@extends('layouts.master')
@section('title', 'API Configuration')

@push('styles')
    <link rel="stylesheet" href="{{ asset('backend/css/api-configuration.css') }}">
@endpush

@section('content-width-class', '')

@section('content')
    <section>
        <div class="container-fluid" id="csrnow_settings">
            <div class="row flex-nowrap">
                <!-- TAB -->
                <div class="col-auto col-md-4 col-xl-3 px-sm-0 px-0">
                    <div class="card">
                        <div class="card-header p-2">
                            @can('api-configurations-view')
                            <ul class="nav nav-pills flex-column fs-6 border-0 text-start side-menu">
                                <li class="nav-item">
                                    <a class="nav-link active show" data-toggle="tab" href="#modeAPI">
                                        <span class="step-number"><i class="bi bi-diagram-2"></i></span>
                                        <span class="step-text">{{__('Mode (Live/Test)') }}</span>
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" data-toggle="tab" href="#euAPI">
                                        <span class="step-number"><i class="bi bi-gear"></i></span>
                                        <span class="step-text">{{__('EU API') }}</span>
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" data-toggle="tab" href="#reCaptchaAPI">
                                        <span class="step-number"><i class="bi bi-shield-lock"></i></span>
                                        <span class="step-text">{{__('ReCaptcha API') }}</span>
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" data-toggle="tab" href="#cryptoAPI">
                                        <span class="step-number"><i class="bi bi-coin"></i></span>
                                        <span class="step-text">{{__('Crypto API') }}</span>
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" data-toggle="tab" href="#brevoAPI">
                                        <span class="step-number"><i class="bi bi-inboxes"></i></span>
                                        <span class="step-text">{{__('Brevo Email API') }}</span>
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" data-toggle="tab" href="#shuftiAPI">
                                        <span class="step-number"><i class="bi bi-link"></i></span>
                                        <span class="step-text">{{__('Shufti Pro API') }}</span>
                                    </a>
                                </li>
                            </ul>
                            @endcan
                        </div>
                    </div>
                </div>
                <!-- END  -->
                <!-- TAB CONTENT -->
                <div class="col-md-8 col-lg-9 tabDiv" id="scroll_data">
                    <div class="tab-content p-0" id="renderable">
                        @can('api-configurations-view')
                        <div class="tab-pane active show" id="modeAPI">
                            @include('backend.settings.tabs.mode-settings')
                        </div>
                        <div class="tab-pane" id="euAPI">
                            @include('backend.settings.tabs.eu-api-settings')
                        </div>
                        <div class="tab-pane" id="reCaptchaAPI">
                            @include('backend.settings.tabs.recaptcha-api-settings')
                        </div>
                        <div class="tab-pane" id="cryptoAPI">
                            @include('backend.settings.tabs.crypto-api-settings')
                        </div>
                        <div class="tab-pane" id="brevoAPI">
                            @include('backend.settings.tabs.brevo-email-api-settings')
                        </div>
                        <div class="tab-pane" id="shuftiAPI">
                            @include('backend.settings.tabs.shufti-api-settings')
                        </div>
                        @endcan
                    </div>
                </div>
                <!-- END -->
            </div>
        </div>
    </section>
@endsection

@push('scripts')
    <script src="{{ asset('backend/js/pages-js/api-configuration-setting.js') }}"></script>
@endpush