@extends('backend.layout.master-tailwind')
@section('title', __('All Integrations'))

@section('admin_styles')
    <style>
        .int-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
            gap: 16px;
        }

        .int-card {
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: 12px;
            overflow: hidden;
            display: flex;
            flex-direction: column;
        }

        .int-accent {
            height: 4px;
        }

        .int-body {
            padding: 16px;
            flex: 1;
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        .int-name {
            font-size: 14px;
            font-weight: 600;
            color: var(--text);
        }

        .int-desc {
            font-size: 12px;
            color: var(--text-3);
            line-height: 1.5;
            flex: 1;
        }

        .int-foot {
            display: flex;
            align-items: center;
            gap: 8px;
            padding-top: 4px;
        }

        .dialog-head {
            padding: 16px 20px;
            border-bottom: 1px solid var(--border);
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .dialog-head h3 {
            font-size: 14px;
            font-weight: 600;
            color: var(--text);
            margin: 0;
        }

        .dialog-body {
            padding: 20px;
            display: flex;
            flex-direction: column;
            gap: 14px;
        }

        .dialog-foot {
            padding: 12px 20px;
            border-top: 1px solid var(--border);
            display: flex;
            justify-content: flex-end;
            gap: 8px;
        }

        .field-label {
            display: block;
            font-size: 12px;
            color: var(--text-2);
            margin-bottom: 6px;
            font-weight: 500;
        }
    </style>
@endsection

@section('content')
    @php $m = 'get_static_option'; @endphp
    <div class="page">

        <div class="page-head">
            <div>
                <h1 class="page-title">{{ __('Integrations') }}</h1>
                <p class="page-sub">{{ __('Manage third-party integrations and tracking scripts') }}</p>
            </div>
        </div>

        <div class="int-grid">

            {{-- Google Analytics GT4 --}}
            <div class="int-card">
                <div class="int-accent" style="background:#F9AB00"></div>
                <div class="int-body">
                    <div class="int-name">{{ __('Google Analytics GT4') }}</div>
                    <div class="int-desc">{{ __('Configure Google Analytics (GT4) into the website.') }}</div>
                    <div class="int-foot">
                        @if ($m('google_analytics_gt4_status') == 'on')
                            <span class="tag"
                                style="background:color-mix(in oklch,var(--success,#22c55e) 12%,transparent);color:var(--success,#22c55e);border-color:color-mix(in oklch,var(--success,#22c55e) 30%,transparent)">{{ __('Active') }}</span>
                        @else
                            <span class="tag"
                                style="background:color-mix(in oklch,var(--text-3) 12%,transparent);color:var(--text-3);border-color:color-mix(in oklch,var(--text-3) 30%,transparent)">{{ __('Inactive') }}</span>
                        @endif
                        <span style="flex:1"></span>
                        <button class="btn ghost sm pl_active_deactive" data-option="google_analytics_gt4_status"
                            data-status="{{ $m('google_analytics_gt4_status') }}">{{ $m('google_analytics_gt4_status') == 'on' ? __('Deactivate') : __('Activate') }}</button>
                        <button class="btn sm"
                            style="background:color-mix(in oklch,#F9AB00 15%,transparent);color:#a37200;border:1px solid color-mix(in oklch,#F9AB00 35%,transparent)"
                            onclick="document.getElementById('google_analytics_dialog').showModal()">{{ __('Settings') }}</button>
                    </div>
                </div>
            </div>

            {{-- Google Tag Manager --}}
            <div class="int-card">
                <div class="int-accent" style="background:#4285f4"></div>
                <div class="int-body">
                    <div class="int-name">{{ __('Google Tag Manager') }}</div>
                    <div class="int-desc">{{ __('Configure Google Tag Manager into the website.') }}</div>
                    <div class="int-foot">
                        @if ($m('google_tag_manager_status') == 'on')
                            <span class="tag"
                                style="background:color-mix(in oklch,var(--success,#22c55e) 12%,transparent);color:var(--success,#22c55e);border-color:color-mix(in oklch,var(--success,#22c55e) 30%,transparent)">{{ __('Active') }}</span>
                        @else
                            <span class="tag"
                                style="background:color-mix(in oklch,var(--text-3) 12%,transparent);color:var(--text-3);border-color:color-mix(in oklch,var(--text-3) 30%,transparent)">{{ __('Inactive') }}</span>
                        @endif
                        <span style="flex:1"></span>
                        <button class="btn ghost sm pl_active_deactive" data-option="google_tag_manager_status"
                            data-status="{{ $m('google_tag_manager_status') }}">{{ $m('google_tag_manager_status') == 'on' ? __('Deactivate') : __('Activate') }}</button>
                        <button class="btn sm"
                            style="background:color-mix(in oklch,#4285f4 15%,transparent);color:#1a56c4;border:1px solid color-mix(in oklch,#4285f4 35%,transparent)"
                            onclick="document.getElementById('google_tag_manager_dialog').showModal()">{{ __('Settings') }}</button>
                    </div>
                </div>
            </div>

            {{-- Facebook Pixels --}}
            <div class="int-card">
                <div class="int-accent" style="background:#397bee"></div>
                <div class="int-body">
                    <div class="int-name">{{ __('Facebook Pixels') }}</div>
                    <div class="int-desc">{{ __('Configure Facebook Pixels into the website.') }}</div>
                    <div class="int-foot">
                        @if ($m('facebook_pixels_status') == 'on')
                            <span class="tag"
                                style="background:color-mix(in oklch,var(--success,#22c55e) 12%,transparent);color:var(--success,#22c55e);border-color:color-mix(in oklch,var(--success,#22c55e) 30%,transparent)">{{ __('Active') }}</span>
                        @else
                            <span class="tag"
                                style="background:color-mix(in oklch,var(--text-3) 12%,transparent);color:var(--text-3);border-color:color-mix(in oklch,var(--text-3) 30%,transparent)">{{ __('Inactive') }}</span>
                        @endif
                        <span style="flex:1"></span>
                        <button class="btn ghost sm pl_active_deactive" data-option="facebook_pixels_status"
                            data-status="{{ $m('facebook_pixels_status') }}">{{ $m('facebook_pixels_status') == 'on' ? __('Deactivate') : __('Activate') }}</button>
                        <button class="btn sm"
                            style="background:color-mix(in oklch,#397bee 15%,transparent);color:#1a56c4;border:1px solid color-mix(in oklch,#397bee 35%,transparent)"
                            onclick="document.getElementById('facebook_pixels_dialog').showModal()">{{ __('Settings') }}</button>
                    </div>
                </div>
            </div>

            {{-- AdRoll --}}
            <div class="int-card">
                <div class="int-accent" style="background:#06aeef"></div>
                <div class="int-body">
                    <div class="int-name">{{ __('AdRoll') }}</div>
                    <div class="int-desc">{{ __('Configure AdRoll pixels into the website.') }}</div>
                    <div class="int-foot">
                        @if ($m('adroll_pixels_status') == 'on')
                            <span class="tag"
                                style="background:color-mix(in oklch,var(--success,#22c55e) 12%,transparent);color:var(--success,#22c55e);border-color:color-mix(in oklch,var(--success,#22c55e) 30%,transparent)">{{ __('Active') }}</span>
                        @else
                            <span class="tag"
                                style="background:color-mix(in oklch,var(--text-3) 12%,transparent);color:var(--text-3);border-color:color-mix(in oklch,var(--text-3) 30%,transparent)">{{ __('Inactive') }}</span>
                        @endif
                        <span style="flex:1"></span>
                        <button class="btn ghost sm pl_active_deactive" data-option="adroll_pixels_status"
                            data-status="{{ $m('adroll_pixels_status') }}">{{ $m('adroll_pixels_status') == 'on' ? __('Deactivate') : __('Activate') }}</button>
                        <button class="btn sm"
                            style="background:color-mix(in oklch,#06aeef 15%,transparent);color:#0577a0;border:1px solid color-mix(in oklch,#06aeef 35%,transparent)"
                            onclick="document.getElementById('adroll_pixels_dialog').showModal()">{{ __('Settings') }}</button>
                    </div>
                </div>
            </div>

            {{-- WhatsApp --}}
            <div class="int-card">
                <div class="int-accent" style="background:#25d366"></div>
                <div class="int-body">
                    <div class="int-name">{{ __('WhatsApp') }}</div>
                    <div class="int-desc">{{ __('Configure WhatsApp chat button into the website.') }}</div>
                    <div class="int-foot">
                        @if ($m('whatsapp_status') == 'on')
                            <span class="tag"
                                style="background:color-mix(in oklch,var(--success,#22c55e) 12%,transparent);color:var(--success,#22c55e);border-color:color-mix(in oklch,var(--success,#22c55e) 30%,transparent)">{{ __('Active') }}</span>
                        @else
                            <span class="tag"
                                style="background:color-mix(in oklch,var(--text-3) 12%,transparent);color:var(--text-3);border-color:color-mix(in oklch,var(--text-3) 30%,transparent)">{{ __('Inactive') }}</span>
                        @endif
                        <span style="flex:1"></span>
                        <button class="btn ghost sm pl_active_deactive" data-option="whatsapp_status"
                            data-status="{{ $m('whatsapp_status') }}">{{ $m('whatsapp_status') == 'on' ? __('Deactivate') : __('Activate') }}</button>
                        <button class="btn sm"
                            style="background:color-mix(in oklch,#25d366 15%,transparent);color:#128c3f;border:1px solid color-mix(in oklch,#25d366 35%,transparent)"
                            onclick="document.getElementById('whatsapp_dialog').showModal()">{{ __('Settings') }}</button>
                    </div>
                </div>
            </div>

            {{-- Messenger --}}
            <div class="int-card">
                <div class="int-accent" style="background:#A334FA"></div>
                <div class="int-body">
                    <div class="int-name">{{ __('Messenger') }}</div>
                    <div class="int-desc">{{ __('Configure Facebook Messenger chat into the website.') }}</div>
                    <div class="int-foot">
                        @if ($m('messenger_status') == 'on')
                            <span class="tag"
                                style="background:color-mix(in oklch,var(--success,#22c55e) 12%,transparent);color:var(--success,#22c55e);border-color:color-mix(in oklch,var(--success,#22c55e) 30%,transparent)">{{ __('Active') }}</span>
                        @else
                            <span class="tag"
                                style="background:color-mix(in oklch,var(--text-3) 12%,transparent);color:var(--text-3);border-color:color-mix(in oklch,var(--text-3) 30%,transparent)">{{ __('Inactive') }}</span>
                        @endif
                        <span style="flex:1"></span>
                        <button class="btn ghost sm pl_active_deactive" data-option="messenger_status"
                            data-status="{{ $m('messenger_status') }}">{{ $m('messenger_status') == 'on' ? __('Deactivate') : __('Activate') }}</button>
                        <button class="btn sm"
                            style="background:color-mix(in oklch,#A334FA 15%,transparent);color:#6b1fb5;border:1px solid color-mix(in oklch,#A334FA 35%,transparent)"
                            onclick="document.getElementById('messenger_dialog').showModal()">{{ __('Settings') }}</button>
                    </div>
                </div>
            </div>

            {{-- Tawk.to --}}
            <div class="int-card">
                <div class="int-accent" style="background:#00b447"></div>
                <div class="int-body">
                    <div class="int-name">{{ __('Tawk.to') }}</div>
                    <div class="int-desc">{{ __('Configure Tawk.to live chat into the website.') }}</div>
                    <div class="int-foot">
                        @if ($m('twakto_status') == 'on')
                            <span class="tag"
                                style="background:color-mix(in oklch,var(--success,#22c55e) 12%,transparent);color:var(--success,#22c55e);border-color:color-mix(in oklch,var(--success,#22c55e) 30%,transparent)">{{ __('Active') }}</span>
                        @else
                            <span class="tag"
                                style="background:color-mix(in oklch,var(--text-3) 12%,transparent);color:var(--text-3);border-color:color-mix(in oklch,var(--text-3) 30%,transparent)">{{ __('Inactive') }}</span>
                        @endif
                        <span style="flex:1"></span>
                        <button class="btn ghost sm pl_active_deactive" data-option="twakto_status"
                            data-status="{{ $m('twakto_status') }}">{{ $m('twakto_status') == 'on' ? __('Deactivate') : __('Activate') }}</button>
                        <button class="btn sm"
                            style="background:color-mix(in oklch,#00b447 15%,transparent);color:#007a30;border:1px solid color-mix(in oklch,#00b447 35%,transparent)"
                            onclick="document.getElementById('twakto_dialog').showModal()">{{ __('Settings') }}</button>
                    </div>
                </div>
            </div>

            {{-- Crisp --}}
            <div class="int-card">
                <div class="int-accent" style="background:#1a72f5"></div>
                <div class="int-body">
                    <div class="int-name">{{ __('Crisp') }}</div>
                    <div class="int-desc">{{ __('Configure Crisp live chat into the website.') }}</div>
                    <div class="int-foot">
                        @if ($m('crsip_status') == 'on')
                            <span class="tag"
                                style="background:color-mix(in oklch,var(--success,#22c55e) 12%,transparent);color:var(--success,#22c55e);border-color:color-mix(in oklch,var(--success,#22c55e) 30%,transparent)">{{ __('Active') }}</span>
                        @else
                            <span class="tag"
                                style="background:color-mix(in oklch,var(--text-3) 12%,transparent);color:var(--text-3);border-color:color-mix(in oklch,var(--text-3) 30%,transparent)">{{ __('Inactive') }}</span>
                        @endif
                        <span style="flex:1"></span>
                        <button class="btn ghost sm pl_active_deactive" data-option="crsip_status"
                            data-status="{{ $m('crsip_status') }}">{{ $m('crsip_status') == 'on' ? __('Deactivate') : __('Activate') }}</button>
                        <button class="btn sm"
                            style="background:color-mix(in oklch,#1a72f5 15%,transparent);color:#0f4db5;border:1px solid color-mix(in oklch,#1a72f5 35%,transparent)"
                            onclick="document.getElementById('crsip_dialog').showModal()">{{ __('Settings') }}</button>
                    </div>
                </div>
            </div>

            {{-- Tidio --}}
            <div class="int-card">
                <div class="int-accent" style="background:#0567ff"></div>
                <div class="int-body">
                    <div class="int-name">{{ __('Tidio') }}</div>
                    <div class="int-desc">{{ __('Configure Tidio live chat into the website.') }}</div>
                    <div class="int-foot">
                        @if ($m('tidio_status') == 'on')
                            <span class="tag"
                                style="background:color-mix(in oklch,var(--success,#22c55e) 12%,transparent);color:var(--success,#22c55e);border-color:color-mix(in oklch,var(--success,#22c55e) 30%,transparent)">{{ __('Active') }}</span>
                        @else
                            <span class="tag"
                                style="background:color-mix(in oklch,var(--text-3) 12%,transparent);color:var(--text-3);border-color:color-mix(in oklch,var(--text-3) 30%,transparent)">{{ __('Inactive') }}</span>
                        @endif
                        <span style="flex:1"></span>
                        <button class="btn ghost sm pl_active_deactive" data-option="tidio_status"
                            data-status="{{ $m('tidio_status') }}">{{ $m('tidio_status') == 'on' ? __('Deactivate') : __('Activate') }}</button>
                        <button class="btn sm"
                            style="background:color-mix(in oklch,#0567ff 15%,transparent);color:#0044cc;border:1px solid color-mix(in oklch,#0567ff 35%,transparent)"
                            onclick="document.getElementById('tidio_dialog').showModal()">{{ __('Settings') }}</button>
                    </div>
                </div>
            </div>

            {{-- Google Captcha V3 --}}
            <div class="int-card">
                <div class="int-accent" style="background:#F9AB00"></div>
                <div class="int-body">
                    <div class="int-name">{{ __('Google reCAPTCHA V3') }}</div>
                    <div class="int-desc">{{ __('Configure Google reCAPTCHA V3 into the website.') }}</div>
                    <div class="int-foot">
                        @if ($m('captcha_status') == 'on')
                            <span class="tag"
                                style="background:color-mix(in oklch,var(--success,#22c55e) 12%,transparent);color:var(--success,#22c55e);border-color:color-mix(in oklch,var(--success,#22c55e) 30%,transparent)">{{ __('Active') }}</span>
                        @else
                            <span class="tag"
                                style="background:color-mix(in oklch,var(--text-3) 12%,transparent);color:var(--text-3);border-color:color-mix(in oklch,var(--text-3) 30%,transparent)">{{ __('Inactive') }}</span>
                        @endif
                        <span style="flex:1"></span>
                        <button class="btn ghost sm pl_active_deactive" data-option="captcha_status"
                            data-status="{{ $m('captcha_status') }}">{{ $m('captcha_status') == 'on' ? __('Deactivate') : __('Activate') }}</button>
                        <button class="btn sm"
                            style="background:color-mix(in oklch,#F9AB00 15%,transparent);color:#a37200;border:1px solid color-mix(in oklch,#F9AB00 35%,transparent)"
                            onclick="document.getElementById('google_captcha_dialog').showModal()">{{ __('Settings') }}</button>
                    </div>
                </div>
            </div>

            {{-- Instagram --}}
            <div class="int-card">
                <div class="int-accent" style="background:linear-gradient(90deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888)">
                </div>
                <div class="int-body">
                    <div class="int-name">{{ __('Instagram') }}</div>
                    <div class="int-desc">
                        {{ __('Configure Instagram integration. Works when an Instagram feature is available.') }}</div>
                    <div class="int-foot">
                        @if ($m('instagram_status') == 'on')
                            <span class="tag"
                                style="background:color-mix(in oklch,var(--success,#22c55e) 12%,transparent);color:var(--success,#22c55e);border-color:color-mix(in oklch,var(--success,#22c55e) 30%,transparent)">{{ __('Active') }}</span>
                        @else
                            <span class="tag"
                                style="background:color-mix(in oklch,var(--text-3) 12%,transparent);color:var(--text-3);border-color:color-mix(in oklch,var(--text-3) 30%,transparent)">{{ __('Inactive') }}</span>
                        @endif
                        <span style="flex:1"></span>
                        <button class="btn ghost sm pl_active_deactive" data-option="instagram_status"
                            data-status="{{ $m('instagram_status') }}">{{ $m('instagram_status') == 'on' ? __('Deactivate') : __('Activate') }}</button>
                        <button class="btn sm"
                            style="background:color-mix(in oklch,#dc2743 12%,transparent);color:#9b1c30;border:1px solid color-mix(in oklch,#dc2743 30%,transparent)"
                            onclick="document.getElementById('instagram_dialog').showModal()">{{ __('Settings') }}</button>
                    </div>
                </div>
            </div>

        </div>
    </div>

    {{-- ── Dialogs ─────────────────────────────────────────── --}}

    {{-- Google Analytics --}}
    <dialog id="google_analytics_dialog"
        style="border:none;border-radius:12px;padding:0;background:var(--surface);color:var(--text);width:100%;max-width:460px;box-shadow:0 20px 60px rgba(0,0,0,.3)">
        <div class="dialog-head">
            <h3>{{ __('Google Analytics GT4') }}</h3>
            <button type="button" class="icon-btn"
                onclick="document.getElementById('google_analytics_dialog').close()"><svg class="icon"
                    viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                    stroke-linejoin="round">
                    <path d="M18 6 6 18M6 6l12 12" />
                </svg></button>
        </div>
        <form action="{{ route('admin.integration') }}" method="POST">
            @csrf<input type="hidden" name="data_type" value="google_analytics">
            <div class="dialog-body">
                <div><label class="field-label">{{ __('Google Analytics GT4 ID') }}</label><input type="text"
                        name="google_analytics_gt4_ID" class="input wide" value="{{ $m('google_analytics_gt4_ID') }}">
                </div>
            </div>
            <div class="dialog-foot">
                <button type="button" class="btn ghost sm"
                    onclick="document.getElementById('google_analytics_dialog').close()">{{ __('Cancel') }}</button>
                <button type="submit" class="btn primary sm">{{ __('Save') }}</button>
            </div>
        </form>
    </dialog>

    {{-- Google Tag Manager --}}
    <dialog id="google_tag_manager_dialog"
        style="border:none;border-radius:12px;padding:0;background:var(--surface);color:var(--text);width:100%;max-width:460px;box-shadow:0 20px 60px rgba(0,0,0,.3)">
        <div class="dialog-head">
            <h3>{{ __('Google Tag Manager') }}</h3>
            <button type="button" class="icon-btn"
                onclick="document.getElementById('google_tag_manager_dialog').close()"><svg class="icon"
                    viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                    stroke-linejoin="round">
                    <path d="M18 6 6 18M6 6l12 12" />
                </svg></button>
        </div>
        <form action="{{ route('admin.integration') }}" method="POST">
            @csrf<input type="hidden" name="data_type" value="google_tag_manager">
            <div class="dialog-body">
                <div><label class="field-label">{{ __('Google Tag Manager ID') }}</label><input type="text"
                        name="google_tag_manager_ID" class="input wide" value="{{ $m('google_tag_manager_ID') }}"></div>
            </div>
            <div class="dialog-foot">
                <button type="button" class="btn ghost sm"
                    onclick="document.getElementById('google_tag_manager_dialog').close()">{{ __('Cancel') }}</button>
                <button type="submit" class="btn primary sm">{{ __('Save') }}</button>
            </div>
        </form>
    </dialog>

    {{-- Facebook Pixels --}}
    <dialog id="facebook_pixels_dialog"
        style="border:none;border-radius:12px;padding:0;background:var(--surface);color:var(--text);width:100%;max-width:460px;box-shadow:0 20px 60px rgba(0,0,0,.3)">
        <div class="dialog-head">
            <h3>{{ __('Facebook Pixels') }}</h3>
            <button type="button" class="icon-btn"
                onclick="document.getElementById('facebook_pixels_dialog').close()"><svg class="icon"
                    viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                    stroke-linejoin="round">
                    <path d="M18 6 6 18M6 6l12 12" />
                </svg></button>
        </div>
        <form action="{{ route('admin.integration') }}" method="POST">
            @csrf<input type="hidden" name="data_type" value="facebook_pixels">
            <div class="dialog-body">
                <div><label class="field-label">{{ __('Facebook Pixels ID') }}</label><input type="text"
                        name="facebook_pixels_id" class="input wide" value="{{ $m('facebook_pixels_id') }}"></div>
            </div>
            <div class="dialog-foot">
                <button type="button" class="btn ghost sm"
                    onclick="document.getElementById('facebook_pixels_dialog').close()">{{ __('Cancel') }}</button>
                <button type="submit" class="btn primary sm">{{ __('Save') }}</button>
            </div>
        </form>
    </dialog>

    {{-- AdRoll --}}
    <dialog id="adroll_pixels_dialog"
        style="border:none;border-radius:12px;padding:0;background:var(--surface);color:var(--text);width:100%;max-width:460px;box-shadow:0 20px 60px rgba(0,0,0,.3)">
        <div class="dialog-head">
            <h3>{{ __('AdRoll Pixels') }}</h3>
            <button type="button" class="icon-btn"
                onclick="document.getElementById('adroll_pixels_dialog').close()"><svg class="icon" viewBox="0 0 24 24"
                    fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                    stroke-linejoin="round">
                    <path d="M18 6 6 18M6 6l12 12" />
                </svg></button>
        </div>
        <form action="{{ route('admin.integration') }}" method="POST">
            @csrf<input type="hidden" name="data_type" value="adroll_pixels">
            <div class="dialog-body">
                <div><label class="field-label">{{ __('AdRoll Advertiser ID') }}</label><input type="text"
                        name="adroll_adviser_id" class="input wide" value="{{ $m('adroll_adviser_id') }}"></div>
                <div><label class="field-label">{{ __('AdRoll Publisher ID') }}</label><input type="text"
                        name="adroll_publisher_id" class="input wide" value="{{ $m('adroll_publisher_id') }}"></div>
            </div>
            <div class="dialog-foot">
                <button type="button" class="btn ghost sm"
                    onclick="document.getElementById('adroll_pixels_dialog').close()">{{ __('Cancel') }}</button>
                <button type="submit" class="btn primary sm">{{ __('Save') }}</button>
            </div>
        </form>
    </dialog>

    {{-- WhatsApp --}}
    <dialog id="whatsapp_dialog"
        style="border:none;border-radius:12px;padding:0;background:var(--surface);color:var(--text);width:100%;max-width:460px;box-shadow:0 20px 60px rgba(0,0,0,.3)">
        <div class="dialog-head">
            <h3>{{ __('WhatsApp') }}</h3>
            <button type="button" class="icon-btn" onclick="document.getElementById('whatsapp_dialog').close()"><svg
                    class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                    stroke-linecap="round" stroke-linejoin="round">
                    <path d="M18 6 6 18M6 6l12 12" />
                </svg></button>
        </div>
        <form action="{{ route('admin.integration') }}" method="POST">
            @csrf<input type="hidden" name="data_type" value="whatsapp">
            <div class="dialog-body">
                <div><label class="field-label">{{ __('Mobile Number with Country Code') }}</label><input type="text"
                        name="whatsapp_mobile_number" class="input wide" value="{{ $m('whatsapp_mobile_number') }}"
                        placeholder="+1234567890"></div>
                <div><label class="field-label">{{ __('Initial Message') }}</label><input type="text"
                        name="whatsapp_initial_text" class="input wide" value="{{ $m('whatsapp_initial_text') }}">
                </div>
            </div>
            <div class="dialog-foot">
                <button type="button" class="btn ghost sm"
                    onclick="document.getElementById('whatsapp_dialog').close()">{{ __('Cancel') }}</button>
                <button type="submit" class="btn primary sm">{{ __('Save') }}</button>
            </div>
        </form>
    </dialog>

    {{-- Messenger --}}
    <dialog id="messenger_dialog"
        style="border:none;border-radius:12px;padding:0;background:var(--surface);color:var(--text);width:100%;max-width:460px;box-shadow:0 20px 60px rgba(0,0,0,.3)">
        <div class="dialog-head">
            <h3>{{ __('Messenger') }}</h3>
            <button type="button" class="icon-btn" onclick="document.getElementById('messenger_dialog').close()"><svg
                    class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                    stroke-linecap="round" stroke-linejoin="round">
                    <path d="M18 6 6 18M6 6l12 12" />
                </svg></button>
        </div>
        <form action="{{ route('admin.integration') }}" method="POST">
            @csrf<input type="hidden" name="data_type" value="messenger">
            <div class="dialog-body">
                <div><label class="field-label">{{ __('Messenger Page ID') }}</label><input type="text"
                        name="messenger_page_id" class="input wide" value="{{ $m('messenger_page_id') }}"></div>
            </div>
            <div class="dialog-foot">
                <button type="button" class="btn ghost sm"
                    onclick="document.getElementById('messenger_dialog').close()">{{ __('Cancel') }}</button>
                <button type="submit" class="btn primary sm">{{ __('Save') }}</button>
            </div>
        </form>
    </dialog>

    {{-- Tawk.to --}}
    <dialog id="twakto_dialog"
        style="border:none;border-radius:12px;padding:0;background:var(--surface);color:var(--text);width:100%;max-width:460px;box-shadow:0 20px 60px rgba(0,0,0,.3)">
        <div class="dialog-head">
            <h3>{{ __('Tawk.to') }}</h3>
            <button type="button" class="icon-btn" onclick="document.getElementById('twakto_dialog').close()"><svg
                    class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                    stroke-linecap="round" stroke-linejoin="round">
                    <path d="M18 6 6 18M6 6l12 12" />
                </svg></button>
        </div>
        <form action="{{ route('admin.integration') }}" method="POST">
            @csrf<input type="hidden" name="data_type" value="twakto">
            <div class="dialog-body">
                <div><label class="field-label">{{ __('Widget ID') }}</label><input type="text"
                        name="twakto_widget_id" class="input wide" value="{{ $m('twakto_widget_id') }}"></div>
            </div>
            <div class="dialog-foot">
                <button type="button" class="btn ghost sm"
                    onclick="document.getElementById('twakto_dialog').close()">{{ __('Cancel') }}</button>
                <button type="submit" class="btn primary sm">{{ __('Save') }}</button>
            </div>
        </form>
    </dialog>

    {{-- Crisp --}}
    <dialog id="crsip_dialog"
        style="border:none;border-radius:12px;padding:0;background:var(--surface);color:var(--text);width:100%;max-width:460px;box-shadow:0 20px 60px rgba(0,0,0,.3)">
        <div class="dialog-head">
            <h3>{{ __('Crisp') }}</h3>
            <button type="button" class="icon-btn" onclick="document.getElementById('crsip_dialog').close()"><svg
                    class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                    stroke-linecap="round" stroke-linejoin="round">
                    <path d="M18 6 6 18M6 6l12 12" />
                </svg></button>
        </div>
        <form action="{{ route('admin.integration') }}" method="POST">
            @csrf<input type="hidden" name="data_type" value="crsip">
            <div class="dialog-body">
                <div><label class="field-label">{{ __('Website ID') }}</label><input type="text"
                        name="crsip_website_id" class="input wide" value="{{ $m('crsip_website_id') }}"></div>
            </div>
            <div class="dialog-foot">
                <button type="button" class="btn ghost sm"
                    onclick="document.getElementById('crsip_dialog').close()">{{ __('Cancel') }}</button>
                <button type="submit" class="btn primary sm">{{ __('Save') }}</button>
            </div>
        </form>
    </dialog>

    {{-- Tidio --}}
    <dialog id="tidio_dialog"
        style="border:none;border-radius:12px;padding:0;background:var(--surface);color:var(--text);width:100%;max-width:460px;box-shadow:0 20px 60px rgba(0,0,0,.3)">
        <div class="dialog-head">
            <h3>{{ __('Tidio') }}</h3>
            <button type="button" class="icon-btn" onclick="document.getElementById('tidio_dialog').close()"><svg
                    class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                    stroke-linecap="round" stroke-linejoin="round">
                    <path d="M18 6 6 18M6 6l12 12" />
                </svg></button>
        </div>
        <form action="{{ route('admin.integration') }}" method="POST">
            @csrf<input type="hidden" name="data_type" value="tidio">
            <div class="dialog-body">
                <div><label class="field-label">{{ __('Chat Page ID') }}</label><input type="text"
                        name="tidio_chat_page_id" class="input wide" value="{{ $m('tidio_chat_page_id') }}"></div>
            </div>
            <div class="dialog-foot">
                <button type="button" class="btn ghost sm"
                    onclick="document.getElementById('tidio_dialog').close()">{{ __('Cancel') }}</button>
                <button type="submit" class="btn primary sm">{{ __('Save') }}</button>
            </div>
        </form>
    </dialog>

    {{-- Google Captcha V3 --}}
    <dialog id="google_captcha_dialog"
        style="border:none;border-radius:12px;padding:0;background:var(--surface);color:var(--text);width:100%;max-width:460px;box-shadow:0 20px 60px rgba(0,0,0,.3)">
        <div class="dialog-head">
            <h3>{{ __('Google reCAPTCHA V3') }}</h3>
            <button type="button" class="icon-btn"
                onclick="document.getElementById('google_captcha_dialog').close()"><svg class="icon"
                    viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                    stroke-linejoin="round">
                    <path d="M18 6 6 18M6 6l12 12" />
                </svg></button>
        </div>
        <form action="{{ route('admin.integration') }}" method="POST">
            @csrf<input type="hidden" name="data_type" value="google_captcha_v3">
            <div class="dialog-body">
                <div><label class="field-label">{{ __('Site Key') }}</label><input type="text"
                        name="site_google_captcha_v3_site_key" class="input wide"
                        value="{{ $m('site_google_captcha_v3_site_key') }}"></div>
                <div><label class="field-label">{{ __('Secret Key') }}</label><input type="text"
                        name="site_google_captcha_v3_secret_key" class="input wide"
                        value="{{ $m('site_google_captcha_v3_secret_key') }}"></div>
            </div>
            <div class="dialog-foot">
                <button type="button" class="btn ghost sm"
                    onclick="document.getElementById('google_captcha_dialog').close()">{{ __('Cancel') }}</button>
                <button type="submit" class="btn primary sm">{{ __('Save') }}</button>
            </div>
        </form>
    </dialog>

    {{-- Instagram --}}
    <dialog id="instagram_dialog"
        style="border:none;border-radius:12px;padding:0;background:var(--surface);color:var(--text);width:100%;max-width:460px;box-shadow:0 20px 60px rgba(0,0,0,.3)">
        <div class="dialog-head">
            <h3>{{ __('Instagram') }}</h3>
            <button type="button" class="icon-btn" onclick="document.getElementById('instagram_dialog').close()"><svg
                    class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                    stroke-linecap="round" stroke-linejoin="round">
                    <path d="M18 6 6 18M6 6l12 12" />
                </svg></button>
        </div>
        <form action="{{ route('admin.integration') }}" method="POST">
            @csrf<input type="hidden" name="data_type" value="instagram">
            <div class="dialog-body">
                <div><label class="field-label">{{ __('Access Token') }}</label><input type="text"
                        name="instagram_access_token" class="input wide" value="{{ $m('instagram_access_token') }}">
                </div>
            </div>
            <div class="dialog-foot">
                <button type="button" class="btn ghost sm"
                    onclick="document.getElementById('instagram_dialog').close()">{{ __('Cancel') }}</button>
                <button type="submit" class="btn primary sm">{{ __('Save') }}</button>
            </div>
        </form>
    </dialog>

@endsection

@section('script')
    <script>
        (function($) {
            'use strict';

            // activate / deactivate
            $(document).on('click', '.pl_active_deactive', function(e) {
                e.preventDefault();
                var el = $(this);
                Swal.fire({
                    title: '{{ __('Are you sure?') }}',
                    text: '{{ __('You can revert this decision any time.') }}',
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#6366f1',
                    cancelButtonColor: '#6b7280',
                    confirmButtonText: '{{ __('Yes!') }}',
                    cancelButtonText: '{{ __('Cancel') }}'
                }).then(function(result) {
                    if (result.isConfirmed) {
                        $.ajax({
                            method: 'POST',
                            url: '{{ route('admin.integration.activation') }}',
                            data: {
                                option_name: el.data('option'),
                                status: el.data('status'),
                                _token: '{{ csrf_token() }}'
                            },
                            success: function(res) {
                                if (res.type === 'success') {
                                    toastr.success(res.status === 'on' ?
                                        '{{ __('Successfully Deactivated') }}' :
                                        '{{ __('Successfully Activated') }}');
                                    setTimeout(function() {
                                        location.reload();
                                    }, 800);
                                }
                            }
                        });
                    }
                });
            });

            // close dialog on backdrop click
            document.querySelectorAll('dialog').forEach(function(d) {
                d.addEventListener('click', function(e) {
                    if (e.target === d) d.close();
                });
            });

        })(jQuery);
    </script>
@endsection