<div class="tab-pane fade" id="verification" role="tabpanel">

    {{-- Verification Steps --}}
    <div class="card border-0 shadow-sm mb-3">
        <div class="card-body">
            <h6 class="mb-3"><i class="fas fa-shield-alt me-2"></i>{{ __('admin/settings.verification_steps_title') }}</h6>
            <p class="text-muted small mb-3">{{ __('admin/settings.verification_steps_description') }}</p>

            <div class="row g-3">
                {{-- Email Verification --}}
                <div class="col-md-4">
                    <div class="border rounded p-3 h-100">
                        <div class="d-flex justify-content-between align-items-start mb-2">
                            <div>
                                <i class="fas fa-envelope fa-lg text-primary"></i>
                                <span class="fw-bold ms-2">{{ __('admin/settings.fields_email_verification') }}</span>
                            </div>
                            <div class="form-check form-switch mb-0">
                                <input class="form-check-input" type="checkbox" id="email_verification" name="email_verification" value="1"
                                    {{ old('email_verification', $settings['email_verification'] ?? false) ? 'checked' : '' }}>
                            </div>
                        </div>
                        <small class="text-muted">{{ __('admin/settings.fields_email_verification_description') }}</small>
                    </div>
                </div>

                {{-- SMS Verification --}}
                <div class="col-md-4">
                    <div class="border rounded p-3 h-100">
                        <div class="d-flex justify-content-between align-items-start mb-2">
                            <div>
                                <i class="fas fa-mobile-alt fa-lg text-success"></i>
                                <span class="fw-bold ms-2">{{ __('admin/settings.fields_sms_verification') }}</span>
                            </div>
                            <div class="form-check form-switch mb-0">
                                <input class="form-check-input" type="checkbox" id="sms_verification" name="sms_verification" value="1"
                                    {{ old('sms_verification', $settings['sms_verification'] ?? false) ? 'checked' : '' }}>
                            </div>
                        </div>
                        <small class="text-muted">{{ __('admin/settings.fields_sms_verification_description') }}</small>
                    </div>
                </div>

                {{-- Citizenship / Identity Verification --}}
                <div class="col-md-4">
                    <div class="border rounded p-3 h-100">
                        <div class="d-flex justify-content-between align-items-start mb-2">
                            <div>
                                <i class="fas fa-id-card fa-lg text-warning"></i>
                                <span class="fw-bold ms-2">{{ __('admin/settings.fields_citizenship_verification') }}</span>
                            </div>
                            <div class="form-check form-switch mb-0">
                                <input class="form-check-input" type="checkbox" id="citizenship_verification" name="citizenship_verification" value="1"
                                    {{ old('citizenship_verification', $settings['citizenship_verification'] ?? false) ? 'checked' : '' }}>
                            </div>
                        </div>
                        <small class="text-muted">{{ __('admin/settings.fields_citizenship_verification_description') }}</small>
                    </div>
                </div>
            </div>

            <div class="mt-3 p-2 rounded small text-muted" style="background: rgba(255,255,255,0.03)">
                <i class="fas fa-info-circle me-1"></i>
                {{ __('admin/settings.verification_order_note') }}
            </div>
        </div>
    </div>

    {{-- Identity Verification Settings --}}
    <div class="card border-0 shadow-sm">
        <div class="card-body">
            <h6 class="mb-3"><i class="fas fa-globe me-2"></i>{{ __('admin/settings.verification_country_settings') }}</h6>

            {{-- Country Settings Table --}}
            <div class="d-flex justify-content-between align-items-center mb-3">
                <small class="text-muted">{{ __('admin/settings.verification_country_settings_description') }}</small>
                <button type="button" class="btn btn-sm btn-outline-primary" id="addVerificationCountryBtn">
                    <i class="fas fa-plus me-1"></i>{{ __('admin/settings.verification_add_country') }}
                </button>
            </div>
            <div class="table-responsive">
                <table class="table table-sm table-hover" id="verificationCountryTable">
                    <thead>
                        <tr>
                            <th style="width: 20%">{{ __('admin/settings.verification_col_country') }}</th>
                            <th>{{ __('admin/settings.verification_col_fields') }}</th>
                            <th class="text-center" style="width: 10%">{{ __('admin/settings.verification_col_document') }}</th>
                            <th class="text-center" style="width: 10%">{{ __('admin/settings.verification_col_api_verify') }}</th>
                            <th style="width: 10%">{{ __('admin/settings.verification_col_actions') }}</th>
                        </tr>
                    </thead>
                    <tbody id="verificationCountryBody">
                        {{-- Populated via JS --}}
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    {{-- Add/Edit Country Verification Modal --}}
    <div class="modal fade" id="verificationCountryModal" tabindex="-1" aria-labelledby="verificationCountryModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="verificationCountryModalLabel">{{ __('admin/settings.verification_add_country') }}</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <input type="hidden" id="verCountryEditId" value="">

                    {{-- Country Selection --}}
                    <div class="mb-3 row">
                        <label class="col-sm-4 col-form-label">{{ __('admin/settings.verification_col_country') }}</label>
                        <div class="col-sm-8">
                            <select class="form-select" id="verCountryCode">
                                <option value="">{{ __('admin/settings.verification_select_country') }}</option>
                            </select>
                        </div>
                    </div>

                    {{-- Module Selection --}}
                    <div class="mb-3 row">
                        <label class="col-sm-4 col-form-label">{{ __('admin/settings.verification_module') }}</label>
                        <div class="col-sm-8">
                            <select class="form-select" id="verModuleSelect">
                                <option value="">{{ __('admin/settings.verification_select_module') }}</option>
                            </select>
                            <small class="form-text text-muted" id="verModuleDescription"></small>
                        </div>
                    </div>

                    {{-- Dynamic Module Fields --}}
                    <div id="verModuleFieldsSection" style="display: none;">
                        <hr class="my-3">
                        <h6 class="mb-3"><i class="fas fa-cog me-1"></i> {{ __('admin/settings.verification_field_settings') }}</h6>

                        <div id="verDynamicFieldsContainer"></div>

                        {{-- Document Upload --}}
                        <div class="mb-3 row align-items-center">
                            <label class="col-sm-4 col-form-label">{{ __('admin/settings.verification_col_document') }}</label>
                            <div class="col-sm-8">
                                <div class="d-flex gap-3">
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" id="verDocumentEnabled">
                                        <label class="form-check-label" for="verDocumentEnabled">{{ __('admin/settings.verification_enabled_label') }}</label>
                                    </div>
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" id="verDocumentRequired">
                                        <label class="form-check-label" for="verDocumentRequired">{{ __('admin/settings.verification_required_label') }}</label>
                                    </div>
                                </div>
                            </div>
                        </div>

                        {{-- API Verification --}}
                        <div class="mb-3 row align-items-center" id="verApiSection">
                            <label class="col-sm-4 col-form-label">{{ __('admin/settings.verification_col_api_verify') }}</label>
                            <div class="col-sm-8">
                                <div class="form-check form-switch">
                                    <input class="form-check-input" type="checkbox" id="verApiVerify">
                                </div>
                            </div>
                        </div>

                        {{-- API Provider Selector --}}
                        <div class="mb-3 row align-items-center" id="verApiProviderSection" style="display:none">
                            <label class="col-sm-4 col-form-label" for="verApiProvider">{{ __('admin/verifications.api_provider') }}</label>
                            <div class="col-sm-8">
                                <select class="form-select" id="verApiProvider" name="api_provider">
                                    <option value="">—</option>
                                </select>
                                <small class="form-text text-muted" id="verApiProviderDescription"></small>
                            </div>
                        </div>

                        {{-- Dynamic Module Config --}}
                        <div id="verModuleConfigSection"></div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{ __('admin/common.close') }}</button>
                    <button type="button" class="btn btn-primary" id="saveVerificationCountryBtn">{{ __('admin/common.save') }}</button>
                </div>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script>
window.verificationSettingsConfig = {
    routes: {
        countrySettings: '{{ route("api.admin.verification-country-settings.list") }}',
        availableModules: '{{ route("api.admin.verification-country-settings.modules") }}',
        moduleInfo: '{{ route("api.admin.verification-country-settings.module-info") }}',
        countrySettingStore: '{{ route("api.admin.verification-country-settings.store") }}',
        countrySettingUpdate: '{{ url("/api/v1/admin/verification-country-settings") }}',
        countrySettingDelete: '{{ url("/api/v1/admin/verification-country-settings") }}'
    },
    translations: {
        success: '{{ __("admin/common.success") }}',
        error: '{{ __("admin/common.error") }}',
        addCountry: '{{ __("admin/settings.verification_add_country") }}',
        editCountry: '{{ __("admin/settings.verification_edit_country") }}',
        deleteConfirm: '{{ __("admin/settings.verification_delete_confirm") }}',
        countryDeleted: '{{ __("admin/settings.verification_country_deleted") }}',
        countrySaved: '{{ __("admin/settings.verification_country_saved") }}',
        noCountries: '{{ __("admin/settings.verification_no_countries") }}',
        enabled: '{{ __("admin/settings.verification_enabled_label") }}',
        required: '{{ __("admin/settings.verification_required_label") }}',
        selectCountry: '{{ __("admin/settings.verification_select_country") }}',
        selectModule: '{{ __("admin/settings.verification_select_module") }}',
        saveFailed: '{{ __("admin/settings.save_failed") }}',
        saveError: '{{ __("admin/settings.save_error") }}',
        apiProvider: '{{ __("admin/verifications.api_provider") }}'
    }
};
</script>
@vite('resources/js/admin/settings/verification.js')
@endpush
