@php
    $isMetaConfigured = \App\Models\WabaPlatformSetting::isMetaConfigured();
    $isEmbeddedConfigured = \App\Models\WabaPlatformSetting::isEmbeddedSignupConfigured();
    $isOAuthEnabled = \App\Models\WabaPlatformSetting::isOAuthEnabled();
    
    // Determine current step
    $currentStep = 1;
    if ($isMetaConfigured) $currentStep = 2;
    if ($isEmbeddedConfigured) $currentStep = 3;
    if ($isOAuthEnabled) $currentStep = 4;
    
    // PENTING: Untuk FB SDK popup mode dengan Embedded Signup,
    // redirect_uri adalah URL halaman (BUKAN callback URL)
    $oauthRedirectUri = \App\Services\MetaOAuthService::getOAuthRedirectUri();
@endphp

<!-- Header Card -->
<div class="card shadow-sm border-0 mb-4" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
    <div class="card-body text-white py-4">
        <div class="row align-items-center">
            <div class="col-auto">
                <div class="bg-white bg-opacity-25 rounded-circle p-3">
                    <i class="ti ti-brand-meta fs-1"></i>
                </div>
            </div>
            <div class="col">
                <h4 class="mb-1">Integrasi Meta WhatsApp Business</h4>
                <p class="mb-0 opacity-75">Konfigurasi Facebook Login for Business & WhatsApp Embedded Signup</p>
            </div>
            <div class="col-auto">
                @if($isOAuthEnabled)
                    <span class="badge bg-success fs-6 px-3 py-2">
                        <i class="ti ti-check me-1"></i> Aktif
                    </span>
                @else
                    <span class="badge bg-warning text-dark fs-6 px-3 py-2">
                        <i class="ti ti-alert-circle me-1"></i> Belum Aktif
                    </span>
                @endif
            </div>
        </div>
    </div>
</div>

<!-- Setup Progress -->
<div class="card shadow-sm mb-4">
    <div class="card-body">
        <h6 class="text-muted mb-4"><i class="ti ti-list-check me-2"></i>Progress Konfigurasi</h6>
        <div class="setup-progress">
            <div class="setup-step {{ $currentStep > 1 ? 'completed' : ($currentStep == 1 ? 'active' : 'pending') }}">
                <div class="step-icon">
                    @if($currentStep > 1)
                        <i class="ti ti-check"></i>
                    @else
                        1
                    @endif
                </div>
                <div class="step-label">Kredensial Meta App</div>
            </div>
            <div class="setup-step {{ $currentStep > 2 ? 'completed' : ($currentStep == 2 ? 'active' : 'pending') }}">
                <div class="step-icon">
                    @if($currentStep > 2)
                        <i class="ti ti-check"></i>
                    @else
                        2
                    @endif
                </div>
                <div class="step-label">Embedded Signup</div>
            </div>
            <div class="setup-step {{ $currentStep > 3 ? 'completed' : ($currentStep == 3 ? 'active' : 'pending') }}">
                <div class="step-icon">
                    @if($currentStep > 3)
                        <i class="ti ti-check"></i>
                    @else
                        3
                    @endif
                </div>
                <div class="step-label">Aktifkan OAuth</div>
            </div>
            <div class="setup-step {{ $currentStep == 4 ? 'completed' : 'pending' }}">
                <div class="step-icon">
                    @if($currentStep == 4)
                        <i class="ti ti-check"></i>
                    @else
                        4
                    @endif
                </div>
                <div class="step-label">Siap Digunakan</div>
            </div>
        </div>
    </div>
</div>

<!-- OAuth Redirect URI Info -->
<div class="highlight-box mb-4">
    <div class="d-flex align-items-start">
        <i class="ti ti-link fs-4 text-primary me-3 mt-1"></i>
        <div class="flex-grow-1">
            <h6 class="mb-1">OAuth Redirect URI <span class="badge bg-danger">PENTING</span></h6>
            <p class="text-muted small mb-2">
                Salin URL ini ke <strong>Meta App → Facebook Login → Valid OAuth Redirect URIs</strong>
            </p>
            <div class="input-group">
                <input type="text" class="form-control bg-white" value="{{ $oauthRedirectUri }}" readonly id="oauthRedirectUri">
                <button class="btn btn-primary btn-copy" type="button" data-copy="{{ $oauthRedirectUri }}">
                    <i class="ti ti-copy me-1"></i> Salin
                </button>
            </div>
            <div class="alert alert-warning mt-3 mb-0 py-2">
                <i class="ti ti-alert-triangle me-1"></i>
                <strong>PENTING:</strong> URL ini HARUS sama persis di 3 tempat:
                <ol class="mb-0 mt-1 small">
                    <li><strong>Meta App → Facebook Login → Valid OAuth Redirect URIs</strong></li>
                    <li><strong>Meta App → Settings → App Domains</strong> (tanpa https://)</li>
                    <li><strong>URL halaman</strong> saat client akses WABA Integration</li>
                </ol>
            </div>
        </div>
    </div>
</div>

<!-- Section 1: Meta App Credentials -->
<div class="config-section {{ $isMetaConfigured ? 'success' : 'warning' }}">
    <div class="config-section-header" data-bs-toggle="collapse" data-bs-target="#section1" style="cursor: pointer;">
        <h6>
            <i class="ti ti-brand-meta text-primary"></i>
            <span>Langkah 1: Kredensial Meta App</span>
            @if($isMetaConfigured)
                <span class="badge bg-success ms-2"><i class="ti ti-check"></i> Selesai</span>
            @else
                <span class="badge bg-warning text-dark ms-2">Wajib Diisi</span>
            @endif
        </h6>
        <i class="ti ti-chevron-down"></i>
    </div>
    <div class="collapse {{ !$isMetaConfigured ? 'show' : '' }}" id="section1">
        <div class="config-section-body">
            <!-- Instructions -->
            <div class="alert alert-light border mb-4">
                <h6 class="alert-heading"><i class="ti ti-bulb text-warning me-2"></i>Cara Mendapatkan Kredensial:</h6>
                <ol class="mb-0 ps-3">
                    <li class="mb-2">Buka <a href="https://developers.facebook.com/apps" target="_blank" class="fw-semibold">Meta for Developers <i class="ti ti-external-link"></i></a></li>
                    <li class="mb-2">Klik <strong>"Create App"</strong> → Pilih tipe <strong>"Business"</strong></li>
                    <li class="mb-2">Tambahkan produk: <strong>"Facebook Login for Business"</strong> dan <strong>"WhatsApp"</strong></li>
                    <li class="mb-2">Buka <strong>App Settings → Basic</strong> untuk melihat App ID dan App Secret</li>
                    <li>Salin <strong>App ID</strong> dan <strong>App Secret</strong> ke form di bawah</li>
                </ol>
            </div>

            <div class="row">
                <div class="col-md-6">
                    @foreach($settings[$groupKey] ?? [] as $setting)
                        @if($setting['key'] === 'meta_app_id')
                            <div class="mb-3">
                                <label class="form-label fw-semibold">
                                    <i class="ti ti-id text-primary me-1"></i> Meta App ID
                                    <span class="text-danger">*</span>
                                </label>
                                <input type="text" 
                                       class="form-control form-control-lg" 
                                       name="settings[{{ $groupKey }}][{{ $setting['key'] }}]"
                                       value="{{ $setting['value'] }}"
                                       id="{{ $groupKey }}_{{ $setting['key'] }}"
                                       placeholder="Contoh: 1234567890123456">
                                <small class="text-muted">ID aplikasi dari Meta for Developers</small>
                            </div>
                        @endif
                    @endforeach
                </div>
                <div class="col-md-6">
                    @foreach($settings[$groupKey] ?? [] as $setting)
                        @if($setting['key'] === 'meta_app_secret')
                            <div class="mb-3">
                                <label class="form-label fw-semibold">
                                    <i class="ti ti-key text-warning me-1"></i> Meta App Secret
                                    <span class="text-danger">*</span>
                                </label>
                                <div class="input-group">
                                    <input type="password" 
                                           class="form-control form-control-lg" 
                                           name="settings[{{ $groupKey }}][{{ $setting['key'] }}]"
                                           value="{{ $setting['value'] }}"
                                           id="{{ $groupKey }}_{{ $setting['key'] }}"
                                           autocomplete="off"
                                           placeholder="••••••••••••••••">
                                    <button class="btn btn-outline-secondary btn-toggle-password" type="button" data-target="{{ $groupKey }}_{{ $setting['key'] }}">
                                        <i class="ti ti-eye"></i>
                                    </button>
                                </div>
                                <small class="text-danger"><i class="ti ti-alert-circle me-1"></i>Jangan bagikan secret ini ke siapapun!</small>
                            </div>
                        @endif
                    @endforeach
                </div>
            </div>

            @foreach($settings[$groupKey] ?? [] as $setting)
                @if($setting['key'] === 'meta_business_id')
                    <div class="mb-3">
                        <label class="form-label fw-semibold">
                            <i class="ti ti-building text-info me-1"></i> Platform Business ID
                            <span class="text-muted fw-normal">(Opsional)</span>
                        </label>
                        <input type="text" 
                               class="form-control" 
                               name="settings[{{ $groupKey }}][{{ $setting['key'] }}]"
                               value="{{ $setting['value'] }}"
                               id="{{ $groupKey }}_{{ $setting['key'] }}"
                               placeholder="Contoh: 123456789012345">
                        <small class="text-muted">Business Manager ID platform Anda (untuk Tech Provider)</small>
                    </div>
                @endif
            @endforeach
        </div>
    </div>
</div>

<!-- Section 2: WhatsApp Embedded Signup -->
<div class="config-section {{ $isEmbeddedConfigured ? 'success' : ($isMetaConfigured ? 'warning' : '') }}">
    <div class="config-section-header" data-bs-toggle="collapse" data-bs-target="#section2" style="cursor: pointer;">
        <h6>
            <i class="ti ti-brand-whatsapp text-success"></i>
            <span>Langkah 2: WhatsApp Embedded Signup</span>
            @if($isEmbeddedConfigured)
                <span class="badge bg-success ms-2"><i class="ti ti-check"></i> Selesai</span>
            @elseif($isMetaConfigured)
                <span class="badge bg-warning text-dark ms-2">Wajib Diisi</span>
            @else
                <span class="badge bg-secondary ms-2">Menunggu Langkah 1</span>
            @endif
        </h6>
        <i class="ti ti-chevron-down"></i>
    </div>
    <div class="collapse {{ $isMetaConfigured && !$isEmbeddedConfigured ? 'show' : '' }}" id="section2">
        <div class="config-section-body">
            <!-- Instructions -->
            <div class="alert alert-light border mb-4">
                <h6 class="alert-heading"><i class="ti ti-bulb text-warning me-2"></i>Cara Membuat Embedded Signup Configuration:</h6>
                <ol class="mb-0 ps-3">
                    <li class="mb-2">Buka <a href="https://business.facebook.com/settings/whatsapp-embedded-signup-configurations" target="_blank" class="fw-semibold">Meta Business Settings <i class="ti ti-external-link"></i></a></li>
                    <li class="mb-2">Klik <strong>"Create Configuration"</strong></li>
                    <li class="mb-2">Isi detail konfigurasi sesuai kebutuhan bisnis Anda</li>
                    <li class="mb-2">Setelah dibuat, salin <strong>Configuration ID</strong> ke form di bawah</li>
                </ol>
            </div>

            <div class="row">
                <div class="col-md-6">
                    @foreach($settings[$groupKey] ?? [] as $setting)
                        @if($setting['key'] === 'embedded_signup_config_id')
                            <div class="mb-3">
                                <label class="form-label fw-semibold">
                                    <i class="ti ti-settings-2 text-success me-1"></i> Embedded Signup Config ID
                                    <span class="text-danger">*</span>
                                </label>
                                <input type="text" 
                                       class="form-control form-control-lg" 
                                       name="settings[{{ $groupKey }}][{{ $setting['key'] }}]"
                                       value="{{ $setting['value'] }}"
                                       id="{{ $groupKey }}_{{ $setting['key'] }}"
                                       placeholder="Contoh: 123456789012345">
                                <small class="text-muted">ID konfigurasi dari WhatsApp Embedded Signup</small>
                            </div>
                        @endif
                    @endforeach
                </div>
                <div class="col-md-6">
                    @foreach($settings[$groupKey] ?? [] as $setting)
                        @if($setting['key'] === 'solution_id')
                            <div class="mb-3">
                                <label class="form-label fw-semibold">
                                    <i class="ti ti-puzzle text-info me-1"></i> Solution ID
                                    <span class="text-muted fw-normal">(Opsional)</span>
                                </label>
                                <input type="text" 
                                       class="form-control form-control-lg" 
                                       name="settings[{{ $groupKey }}][{{ $setting['key'] }}]"
                                       value="{{ $setting['value'] }}"
                                       id="{{ $groupKey }}_{{ $setting['key'] }}"
                                       placeholder="Kosongkan jika tidak ada">
                                <small class="text-muted">Hanya untuk partner solutions tertentu</small>
                            </div>
                        @endif
                    @endforeach
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Section 3: OAuth Settings -->
<div class="config-section {{ $isOAuthEnabled ? 'success' : '' }}">
    <div class="config-section-header" data-bs-toggle="collapse" data-bs-target="#section3" style="cursor: pointer;">
        <h6>
            <i class="ti ti-toggle-right text-warning"></i>
            <span>Langkah 3: Aktifkan OAuth</span>
            @if($isOAuthEnabled)
                <span class="badge bg-success ms-2"><i class="ti ti-check"></i> Aktif</span>
            @elseif($isEmbeddedConfigured)
                <span class="badge bg-warning text-dark ms-2">Siap Diaktifkan</span>
            @else
                <span class="badge bg-secondary ms-2">Menunggu Langkah 2</span>
            @endif
        </h6>
        <i class="ti ti-chevron-down"></i>
    </div>
    <div class="collapse {{ $isEmbeddedConfigured && !$isOAuthEnabled ? 'show' : '' }}" id="section3">
        <div class="config-section-body">
            @foreach($settings[$groupKey] ?? [] as $setting)
                @if($setting['key'] === 'oauth_enabled')
                    <div class="mb-4 p-3 bg-light rounded">
                        <div class="form-check form-switch">
                            <input type="hidden" name="settings[{{ $groupKey }}][{{ $setting['key'] }}]" value="0">
                            <input class="form-check-input" 
                                   type="checkbox" 
                                   name="settings[{{ $groupKey }}][{{ $setting['key'] }}]"
                                   value="1"
                                   id="{{ $groupKey }}_{{ $setting['key'] }}"
                                   style="width: 3rem; height: 1.5rem;"
                                   {{ $setting['value'] ? 'checked' : '' }}>
                            <label class="form-check-label ms-2 fw-semibold fs-5" for="{{ $groupKey }}_{{ $setting['key'] }}">
                                {{ $setting['value'] ? 'OAuth Aktif' : 'OAuth Nonaktif' }}
                            </label>
                        </div>
                        <small class="text-muted d-block mt-2">
                            <i class="ti ti-info-circle me-1"></i>
                            Jika diaktifkan, client bisa menghubungkan WhatsApp Business Account mereka melalui Self Service
                        </small>
                    </div>
                @endif
            @endforeach

            <div class="row">
                @foreach($settings[$groupKey] ?? [] as $setting)
                    @if($setting['key'] === 'oauth_scopes')
                        <div class="col-md-6 mb-3">
                            <label class="form-label fw-semibold">
                                <i class="ti ti-lock-access text-primary me-1"></i> OAuth Scopes
                            </label>
                            <input type="text" 
                                   class="form-control" 
                                   name="settings[{{ $groupKey }}][{{ $setting['key'] }}]"
                                   value="{{ $setting['value'] }}"
                                   id="{{ $groupKey }}_{{ $setting['key'] }}">
                            <small class="text-muted">Permission yang diminta (pisahkan dengan koma)</small>
                        </div>
                    @endif
                    @if($setting['key'] === 'oauth_state_expiry_minutes')
                        <div class="col-md-6 mb-3">
                            <label class="form-label fw-semibold">
                                <i class="ti ti-clock text-info me-1"></i> State Expiry (menit)
                            </label>
                            <input type="number" 
                                   class="form-control" 
                                   name="settings[{{ $groupKey }}][{{ $setting['key'] }}]"
                                   value="{{ $setting['value'] }}"
                                   id="{{ $groupKey }}_{{ $setting['key'] }}"
                                   min="5"
                                   max="1440">
                            <small class="text-muted">Waktu kedaluwarsa OAuth state</small>
                        </div>
                    @endif
                @endforeach
            </div>

            @foreach($settings[$groupKey] ?? [] as $setting)
                @if($setting['key'] === 'oauth_redirect_uri')
                    <div class="mb-3">
                        <label class="form-label fw-semibold">
                            <i class="ti ti-link text-danger me-1"></i> OAuth Redirect URI
                            <span class="badge bg-danger ms-2">WAJIB SAMA</span>
                        </label>
                        <input type="text" 
                               class="form-control" 
                               name="settings[{{ $groupKey }}][{{ $setting['key'] }}]"
                               value="{{ $setting['value'] }}"
                               id="{{ $groupKey }}_{{ $setting['key'] }}"
                               placeholder="https://client.whatscrm.id/client/waba-integration">
                        <div class="alert alert-warning mt-2 mb-0 py-2">
                            <i class="ti ti-alert-triangle me-1"></i>
                            <strong>PENTING:</strong> URL ini HARUS SAMA PERSIS di 3 tempat:
                            <ol class="mb-0 mt-1 small">
                                <li><strong>Di sini</strong> (Admin Settings)</li>
                                <li><strong>Meta App → Facebook Login → Valid OAuth Redirect URIs</strong></li>
                                <li><strong>Meta App → Settings → App Domains</strong> (tanpa https://)</li>
                            </ol>
                            <hr class="my-2">
                            <span class="small">Tidak boleh beda: subdomain, path, trailing slash, protocol (http/https)</span>
                        </div>
                        <small class="text-muted mt-1 d-block">
                            Contoh: <code>https://client.whatscrm.id/client/waba-integration</code>
                        </small>
                    </div>
                @endif
            @endforeach
        </div>
    </div>
</div>

<!-- Section 4: Meta Webhook -->
@php
    $webhookUrl = url('/api/meta/webhook');
    $webhookVerifyToken = config('waba.webhook_verify_token');
    $hasWebhookToken = !empty($webhookVerifyToken);
@endphp
<div class="config-section {{ $hasWebhookToken ? 'success' : '' }}">
    <div class="config-section-header" data-bs-toggle="collapse" data-bs-target="#section4" style="cursor: pointer;">
        <h6>
            <i class="ti ti-webhook text-info"></i>
            <span>Meta Webhook</span>
            @if($hasWebhookToken)
                <span class="badge bg-success ms-2"><i class="ti ti-check"></i> Configured</span>
            @else
                <span class="badge bg-warning text-dark ms-2">Belum Diset</span>
            @endif
        </h6>
        <i class="ti ti-chevron-down"></i>
    </div>
    <div class="collapse" id="section4">
        <div class="config-section-body">
            <div class="row">
                <!-- Webhook Configuration -->
                <div class="col-md-7">
                    <div class="card border-primary mb-3">
                        <div class="card-header bg-primary bg-opacity-10">
                            <h6 class="mb-0 text-primary"><i class="ti ti-webhook me-2"></i>Konfigurasi Webhook</h6>
                        </div>
                        <div class="card-body">
                            <div class="mb-3">
                                <label class="form-label fw-semibold">Callback URL <span class="text-danger">*</span></label>
                                <div class="input-group">
                                    <input type="text" class="form-control" id="webhookUrlGlobal" value="{{ $webhookUrl }}" readonly>
                                    <button class="btn btn-outline-secondary btn-copy" type="button" data-copy="{{ $webhookUrl }}">
                                        <i class="ti ti-copy"></i>
                                    </button>
                                </div>
                                <small class="text-muted">URL yang akan didaftarkan ke Meta untuk menerima webhook</small>
                            </div>
                            
                            <div class="mb-3">
                                <label class="form-label fw-semibold">
                                    Verify Token 
                                    <span class="badge bg-info">From .env</span>
                                </label>
                                <div class="input-group">
                                    <input type="text" 
                                           class="form-control" 
                                           id="verifyTokenGlobal"
                                           value="{{ $webhookVerifyToken }}" 
                                           readonly>
                                    <button class="btn btn-outline-secondary btn-copy" type="button" data-copy="{{ $webhookVerifyToken }}">
                                        <i class="ti ti-copy"></i>
                                    </button>
                                </div>
                                <small class="text-muted">Token diambil dari <code>.env</code> → <code>WABA_WEBHOOK_VERIFY_TOKEN</code></small>
                            </div>

                            <div class="mb-3">
                                <label class="form-label fw-semibold">Status Registrasi</label>
                                <div>
                                    @if($hasWebhookToken)
                                        <span class="badge bg-success"><i class="ti ti-check me-1"></i>Token Ready</span>
                                        <span class="text-muted small ms-2">Siap didaftarkan ke Meta</span>
                                    @else
                                        <span class="badge bg-warning text-dark"><i class="ti ti-alert-triangle me-1"></i>Token Belum Diset</span>
                                        <span class="text-muted small ms-2">Set <code>WABA_WEBHOOK_VERIFY_TOKEN</code> di file <code>.env</code></span>
                                    @endif
                                </div>
                            </div>

                            @if(!$hasWebhookToken)
                                <div class="alert alert-warning mb-0">
                                    <h6 class="alert-heading"><i class="ti ti-alert-triangle me-2"></i>Token Belum Dikonfigurasi</h6>
                                    <p class="mb-2 small">Tambahkan baris berikut ke file <code>.env</code> Anda:</p>
                                    <div class="bg-dark text-white p-2 rounded mb-2">
                                        <code>WABA_WEBHOOK_VERIFY_TOKEN={{ \Illuminate\Support\Str::random(32) }}</code>
                                        <button class="btn btn-sm btn-outline-light float-end btn-copy" type="button" data-copy="WABA_WEBHOOK_VERIFY_TOKEN={{ \Illuminate\Support\Str::random(32) }}">
                                            <i class="ti ti-copy"></i>
                                        </button>
                                    </div>
                                    <small class="text-muted">Setelah menambahkan, jalankan <code>php artisan config:clear</code></small>
                                </div>
                            @endif
                        </div>
                    </div>
                </div>

                <!-- Webhook Info -->
                <div class="col-md-5">
                    <div class="card mb-3">
                        <div class="card-header bg-light">
                            <h6 class="mb-0"><i class="ti ti-list-check me-2"></i>Cara Setup Webhook</h6>
                        </div>
                        <div class="card-body">
                            <ol class="mb-0 small ps-3">
                                <li class="mb-2">Set <strong>WABA_WEBHOOK_VERIFY_TOKEN</strong> di file <code>.env</code></li>
                                <li class="mb-2">Salin <strong>Callback URL</strong> dan <strong>Verify Token</strong></li>
                                <li class="mb-2">Buka <a href="https://developers.facebook.com/apps" target="_blank">Meta App Dashboard</a></li>
                                <li class="mb-2">Pilih App Anda → <strong>WhatsApp</strong> → <strong>Configuration</strong></li>
                                <li class="mb-2">Di bagian <strong>Webhook</strong>, klik <strong>Edit</strong></li>
                                <li class="mb-2">Paste <strong>Callback URL</strong> dan <strong>Verify Token</strong></li>
                                <li class="mb-2">Klik <strong>Verify and Save</strong></li>
                                <li>Subscribe ke field: <strong>messages</strong></li>
                            </ol>
                        </div>
                    </div>
                    
                    <div class="card mb-3">
                        <div class="card-header bg-light">
                            <h6 class="mb-0"><i class="ti ti-tags me-2"></i>Webhook Fields</h6>
                        </div>
                        <div class="card-body">
                            <p class="small text-muted mb-2">Subscribe ke field berikut di Meta App:</p>
                            <div class="d-flex flex-wrap gap-2">
                                <span class="badge bg-primary">messages</span>
                                <span class="badge bg-secondary">message_template_status_update</span>
                                <span class="badge bg-secondary">phone_number_quality_update</span>
                                <span class="badge bg-secondary">account_update</span>
                            </div>
                        </div>
                    </div>

                    <div class="card border-warning">
                        <div class="card-header bg-warning bg-opacity-10">
                            <h6 class="mb-0 text-warning"><i class="ti ti-alert-triangle me-2"></i>Penting!</h6>
                        </div>
                        <div class="card-body">
                            <ul class="mb-0 small ps-3">
                                <li class="mb-1">Pastikan server Anda dapat diakses dari internet</li>
                                <li class="mb-1">Gunakan HTTPS untuk Callback URL</li>
                                <li>Simpan Verify Token dengan aman</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Section 5: Advanced Settings -->
<div class="config-section">
    <div class="config-section-header" data-bs-toggle="collapse" data-bs-target="#section5" style="cursor: pointer;">
        <h6>
            <i class="ti ti-adjustments text-secondary"></i>
            <span>Pengaturan Lanjutan</span>
            <span class="badge bg-secondary ms-2">Opsional</span>
        </h6>
        <i class="ti ti-chevron-down"></i>
    </div>
    <div class="collapse" id="section5">
        <div class="config-section-body">
            <div class="row">
                <!-- Token Management -->
                <div class="col-md-6">
                    <h6 class="text-muted mb-3"><i class="ti ti-shield-lock me-2"></i>Manajemen Token</h6>
                    
                    @foreach($settings[$groupKey] ?? [] as $setting)
                        @if($setting['key'] === 'token_refresh_days_before_expiry')
                            <div class="mb-3">
                                <label class="form-label fw-semibold">Refresh Token (hari sebelum expired)</label>
                                <input type="number" 
                                       class="form-control" 
                                       name="settings[{{ $groupKey }}][{{ $setting['key'] }}]"
                                       value="{{ $setting['value'] }}"
                                       id="{{ $groupKey }}_{{ $setting['key'] }}"
                                       min="1"
                                       max="30">
                                <small class="text-muted">Token akan di-refresh X hari sebelum kedaluwarsa</small>
                            </div>
                        @endif
                        @if($setting['key'] === 'system_user_token')
                            <div class="mb-3">
                                <label class="form-label fw-semibold">System User Token</label>
                                <div class="input-group">
                                    <input type="password" 
                                           class="form-control" 
                                           name="settings[{{ $groupKey }}][{{ $setting['key'] }}]"
                                           value="{{ $setting['value'] }}"
                                           id="{{ $groupKey }}_{{ $setting['key'] }}"
                                           autocomplete="off"
                                           placeholder="Token untuk managed WABA">
                                    <button class="btn btn-outline-secondary btn-toggle-password" type="button" data-target="{{ $groupKey }}_{{ $setting['key'] }}">
                                        <i class="ti ti-eye"></i>
                                    </button>
                                </div>
                                <small class="text-muted">Untuk mengelola WABA yang dimiliki platform</small>
                            </div>
                        @endif
                    @endforeach
                </div>

                <!-- API Settings -->
                <div class="col-md-6">
                    <h6 class="text-muted mb-3"><i class="ti ti-api me-2"></i>Pengaturan API</h6>
                    
                    @foreach($settings[$groupKey] ?? [] as $setting)
                        @if($setting['key'] === 'graph_api_version')
                            <div class="mb-3">
                                <label class="form-label fw-semibold">Graph API Version</label>
                                <select class="form-select" 
                                        name="settings[{{ $groupKey }}][{{ $setting['key'] }}]"
                                        id="{{ $groupKey }}_{{ $setting['key'] }}">
                                    @php
                                        $versions = ['v21.0', 'v20.0', 'v19.0', 'v18.0'];
                                    @endphp
                                    @foreach($versions as $version)
                                        <option value="{{ $version }}" {{ $setting['value'] == $version ? 'selected' : '' }}>
                                            {{ $version }} {{ $version == 'v21.0' ? '(Terbaru)' : '' }}
                                        </option>
                                    @endforeach
                                </select>
                                <small class="text-muted">Versi Meta Graph API yang digunakan</small>
                            </div>
                        @endif
                    @endforeach
                </div>
            </div>

            <!-- Tech Provider Section -->
            @php
                $isTechProviderConfigured = \App\Models\WabaPlatformSetting::isTechProviderConfigured();
            @endphp
            <hr class="my-4">
            <div class="row">
                <div class="col-12">
                    <div class="card border-primary">
                        <div class="card-header bg-primary text-white">
                            <div class="d-flex align-items-center justify-content-between">
                                <div>
                                    <h6 class="mb-0"><i class="ti ti-key me-2"></i>Tech Provider Model - Global Access Token</h6>
                                    <small class="opacity-75">Token tunggal untuk semua operasi WABA client</small>
                                </div>
                                @if($isTechProviderConfigured)
                                    <span class="badge bg-success"><i class="ti ti-check me-1"></i>Configured</span>
                                @else
                                    <span class="badge bg-warning text-dark"><i class="ti ti-alert-circle me-1"></i>Belum Diset</span>
                                @endif
                            </div>
                        </div>
                        <div class="card-body">
                            <div class="alert alert-info mb-4">
                                <h6 class="alert-heading"><i class="ti ti-info-circle me-2"></i>Apa itu Tech Provider Model?</h6>
                                <p class="mb-2 small">Dengan model ini, <strong>TIDAK perlu OAuth code exchange per-client</strong>. Client cukup melakukan consent via Embedded Signup, kemudian backend menggunakan token global ini untuk:</p>
                                <ul class="mb-0 small">
                                    <li>Fetch WABA details dari Meta</li>
                                    <li>Repair subscription</li>
                                    <li>Setup webhook</li>
                                    <li>Semua operasi WABA lainnya</li>
                                </ul>
                            </div>

                            @php
                                // Get global_access_token value directly (fallback to empty)
                                $globalAccessToken = '';
                                foreach($settings[$groupKey] ?? [] as $setting) {
                                    if ($setting['key'] === 'global_access_token') {
                                        $globalAccessToken = $setting['value'] ?? '';
                                        break;
                                    }
                                }
                            @endphp

                            <div class="mb-3">
                                <label class="form-label fw-semibold">
                                    <i class="ti ti-key text-primary me-1"></i>Global Access Token
                                    <span class="badge bg-danger ms-1">WAJIB</span>
                                </label>
                                <div class="input-group">
                                    <input type="password" 
                                           class="form-control form-control-lg" 
                                           name="settings[{{ $groupKey }}][global_access_token]"
                                           value="{{ $globalAccessToken }}"
                                           id="oauth_global_access_token"
                                           autocomplete="off"
                                           placeholder="EAAxxxxxxxxxxxxxxxxxxxxxxxx...">
                                    <button class="btn btn-outline-secondary btn-toggle-password" 
                                            type="button" 
                                            data-target="oauth_global_access_token">
                                        <i class="ti ti-eye"></i>
                                    </button>
                                    <button class="btn btn-primary" 
                                            type="button" 
                                            id="btnValidateGlobalToken">
                                        <i class="ti ti-check me-1"></i>Validate
                                    </button>
                                </div>
                                <small class="text-muted">Long-lived token dari System User di Business Manager</small>
                            </div>
                            
                            <!-- Validation Result -->
                            <div id="tokenValidationResult" class="mt-3 d-none">
                                <!-- Will be populated by JavaScript -->
                            </div>

                            <div class="alert alert-warning mb-0 mt-3">
                                <h6 class="alert-heading"><i class="ti ti-bulb me-2"></i>Cara Mendapatkan Token:</h6>
                                <ol class="mb-0 small ps-3">
                                    <li class="mb-1">Buka <a href="https://business.facebook.com/settings/system-users" target="_blank" class="fw-semibold">Meta Business Settings → System Users <i class="ti ti-external-link"></i></a></li>
                                    <li class="mb-1">Buat System User baru atau pilih yang sudah ada</li>
                                    <li class="mb-1">Klik <strong>"Generate Token"</strong></li>
                                    <li class="mb-1">Pilih App Anda dan berikan permission:
                                        <ul class="mt-1">
                                            <li><code>whatsapp_business_management</code></li>
                                            <li><code>whatsapp_business_messaging</code></li>
                                            <li><code>business_management</code></li>
                                        </ul>
                                    </li>
                                    <li>Salin token dan paste di atas</li>
                                </ol>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Help Section -->
<div class="alert alert-info mt-4">
    <div class="d-flex">
        <i class="ti ti-help-circle fs-4 me-3"></i>
        <div>
            <h6 class="alert-heading mb-1">Butuh Bantuan?</h6>
            <p class="mb-2 small">Pelajari cara mengintegrasikan WhatsApp Business API dengan platform Anda:</p>
            <a href="https://developers.facebook.com/docs/facebook-login/facebook-login-for-business" target="_blank" class="btn btn-sm btn-outline-primary me-2">
                <i class="ti ti-external-link me-1"></i> Login for Business
            </a>
            <a href="https://developers.facebook.com/docs/whatsapp/embedded-signup" target="_blank" class="btn btn-sm btn-outline-success">
                <i class="ti ti-external-link me-1"></i> Embedded Signup
            </a>
        </div>
    </div>
</div>