@push('styles')
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.7/css/jquery.dataTables.min.css">
<style>
    .cwr-page {
        background: #f8fafc;
        min-height: 100vh;
        padding: 8px;
    }
    .cwr-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 16px;
    }
    .cwr-title {
        font-size: 1.5rem;
        font-weight: 700;
        color: #111827;
        margin: 0;
    }
    .billing-subtitle {
        margin: 4px 0 0 0;
        font-size: 12px;
        color: #6b7280;
    }
    .btn-primary {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 10px 16px;
        background-color: #111827;
        color: #fff;
        border: none;
        border-radius: 8px;
        font-size: 14px;
        font-weight: 600;
        cursor: pointer;
    }
    .btn-primary:hover { background-color: #1f2937; }
    .btn-secondary {
        padding: 10px 16px;
        border-radius: 8px;
        border: 1px solid #d1d5db;
        background: #fff;
        color: #374151;
        cursor: pointer;
        font-weight: 600;
    }
    .search-filter-section, .table-section {
        background: #fff;
        border-radius: 16px;
        border: 1px solid #e5e7eb;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    }
    .search-filter-section {
        padding: 18px;
        margin-bottom: 16px;
    }
    .search-filter-label {
        font-size: 1.25rem;
        font-weight: 600;
        color: #111827;
        margin-bottom: 10px;
        display: block;
    }
    .search-filter-container {
        display: flex;
        gap: 10px;
        align-items: center;
    }
    .search-filter-input {
        flex: 1;
        padding: 9px 12px;
        border: 1px solid #d1d5db;
        border-radius: 8px;
        font-size: 14px;
    }
    .search-filter-input:focus {
        outline: none;
        border-color: #6366f1;
        box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
    }
    .table-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 14px 16px 8px 16px;
        border-bottom: 1px solid #f3f4f6;
    }
    .table-title {
        font-size: 1.25rem;
        font-weight: 700;
        color: #111827;
        margin: 0;
    }
    .table-wrap { padding: 8px 12px 12px 12px; }
    #country-restrictions-table { width: 100% !important; border-collapse: separate; border-spacing: 0; }
    #country-restrictions-table thead { background: linear-gradient(to bottom, #fafbfc 0%, #f8fafc 100%); }
    #country-restrictions-table thead th {
        padding: 14px 16px;
        text-align: left;
        font-size: 14px;
        font-weight: 700;
        color: #374151;
        border-bottom: 2px solid #e5e7eb;
        border-right: 1px solid #f0f0f0;
        white-space: nowrap;
    }
    #country-restrictions-table thead th:last-child, #country-restrictions-table tbody td:last-child { border-right: none; }
    #country-restrictions-table tbody td {
        padding: 14px 16px;
        border-bottom: 1px solid #f3f4f6;
        border-right: 1px solid #f9fafb;
        font-size: 0.875rem;
        color: #374151;
        vertical-align: middle;
    }
    #country-restrictions-table tbody tr:nth-child(even) { background-color: #fafbfc; }
    #country-restrictions-table tbody tr:hover { background-color: #f0f4ff !important; }
    #country-restrictions-table_wrapper .dataTables_length { padding: 8px 16px 10px 16px; }
    #country-restrictions-table_wrapper .dataTables_length label {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        font-size: 14px;
        font-weight: 600;
        color: #374151;
    }
    #country-restrictions-table_wrapper .dataTables_length select {
        min-width: 60px;
        margin: 0;
        border: 1px solid #d1d5db;
        border-radius: 8px;
        padding: 10px 20px 10px 10px;
        font-size: 14px;
        line-height: 1.2;
        color: #374151;
        background-color: #fff;
        /* background-image: url(data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5 7.5L10 12.5L15 7.5' stroke='%236B7280' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E); */
        background-repeat: no-repeat;
        background-position: right 9px center;
        background-size: 14px 14px;
        cursor: pointer;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
    }
    #country-restrictions-table_wrapper .dataTables_length select:focus {
        outline: none;
        border-color: #6366f1;
        box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
    }
    #country-restrictions-table_wrapper .dataTables_length select::-ms-expand { display: none; }
    #country-restrictions-table_wrapper .dataTables_filter { display: none; }
    #country-restrictions-table_wrapper .dataTables_info {
        padding: 12px 16px;
        color: #6b7280;
        font-weight: 600;
        font-size: 14px;
    }
    #country-restrictions-table_wrapper .dataTables_paginate {
        margin-top: 0;
        padding: 12px 16px;
        display: flex;
        justify-content: flex-end;
        gap: 8px;
    }
    #country-restrictions-table_wrapper .dataTables_paginate .paginate_button {
        padding: 6px 12px;
        border: 1px solid #e5e7eb;
        border-radius: 8px;
        background: #fff;
        color: #374151 !important;
    }
    .pill {
        display: inline-flex;
        align-items: center;
        padding: 6px 10px;
        border-radius: 9999px;
        font-size: 12px;
        font-weight: 700;
    }
    .pill.success { background: #dcfce7; color: #047857; }
    .pill.danger { background: #fee2e2; color: #dc2626; }
    .action-buttons { display: flex; gap: 8px; justify-content: center; width: 100%; }
    #country-restrictions-table thead th:last-child,
    #country-restrictions-table tbody td:last-child {
        text-align: center;
    }
    .action-button {
        width: 36px; height: 36px; border-radius: 10px; border: none;
        display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
        transition: transform 0.15s ease, filter 0.15s ease;
    }
    .action-button.edit { color: #2f6bff; background: #eef5ff; }
    .action-button.delete { color: #ff3b30; background: #fff1f1; }
    .action-button:hover { transform: translateY(-1px); filter: brightness(0.98); }
    .icon { width: 16px; height: 16px; }
    .status-box { margin-bottom: 12px; border-radius: 8px; border: 1px solid transparent; padding: 10px 12px; font-size: 13px; }
    .status-box.success { background: #ecfdf5; border-color: #a7f3d0; color: #047857; }
    .status-box.error { background: #fef2f2; border-color: #fecaca; color: #b91c1c; }
    .cwr-delete-card {
        width: 100%;
        max-width: 460px;
        border-radius: 14px;
        background: #fff;
        border: 1px solid #e5e7eb;
        box-shadow: 0 18px 46px rgba(2, 6, 23, 0.2);
        overflow: hidden;
    }
    .cwr-delete-header {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 16px 18px 12px 18px;
        border-bottom: 1px solid #f1f5f9;
        background: linear-gradient(180deg, #fff7f7 0%, #ffffff 100%);
    }
    .cwr-delete-icon {
        width: 32px;
        height: 32px;
        border-radius: 999px;
        background: #fee2e2;
        color: #dc2626;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
    }
    .cwr-delete-title {
        margin: 0;
        font-size: 25px;
        font-weight: 700;
        color: #111827;
        line-height: 1.2;
    }
    .cwr-delete-body {
        padding: 16px 18px 20px 18px;
    }
    .cwr-delete-text {
        margin: 0;
        font-size: 14px;
        color: #4b5563;
        line-height: 1.55;
    }
    .cwr-delete-actions {
        margin-top: 18px;
        display: flex;
        justify-content: flex-end;
        gap: 10px;
    }
    .btn-danger {
        padding: 10px 18px;
        border-radius: 10px;
        border: none;
        background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
        color: #fff;
        font-weight: 700;
        cursor: pointer;
        box-shadow: 0 6px 16px rgba(220, 38, 38, 0.3);
    }
    .btn-danger:hover { filter: brightness(0.97); }
    .cwr-country-picker { position: relative; }
    .cwr-country-toggle {
        width: 100%;
        min-height: 42px;
        border: 1px solid #d1d5db;
        border-radius: 8px;
        background: #fff;
        padding: 9px 12px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 14px;
        color: #111827;
        cursor: pointer;
    }
    .cwr-country-toggle:hover { background: #fafafa; }
    .cwr-country-panel {
        position: absolute;
        top: calc(100% + 6px);
        left: 0;
        right: 0;
        z-index: 60;
        background: #fff;
        border: 1px solid #e5e7eb;
        border-radius: 10px;
        box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
        padding: 8px;
    }
    .cwr-country-search {
        width: 100%;
        border: 1px solid #d1d5db;
        border-radius: 8px;
        padding: 8px 10px;
        font-size: 13px;
        margin-bottom: 8px;
    }
    .cwr-country-options {
        max-height: 220px;
        overflow: auto;
        border: 1px solid #f1f5f9;
        border-radius: 8px;
        padding: 4px;
    }
    .cwr-country-option {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 6px 8px;
        border-radius: 6px;
        cursor: pointer;
        font-size: 13px;
        color: #111827;
    }
    .cwr-country-option:hover { background: #f8fafc; }
    .cwr-country-option input { width: 14px; height: 14px; }
    .cwr-country-empty {
        padding: 10px;
        font-size: 12px;
        color: #6b7280;
        text-align: center;
    }
    .cwr-note {
        margin-top: 8px;
        border: 1px solid #fbcfe8;
        background: #fdf2f8;
        color: #9d174d;
        border-radius: 8px;
        padding: 8px 10px;
        font-size: 12px;
        line-height: 1.4;
    }
</style>
@endpush

<x-filament-panels::page>
    <div class="cwr-page">
        <div class="cwr-header">
            <div>
                <h1 class="cwr-title">Country Restrictions</h1>
                <p class="billing-subtitle">Manage country-level access restrictions and compliance controls</p>
            </div>
            <button id="cwr-create-btn" class="btn-primary">Create Restriction</button>
        </div>

        <div class="search-filter-section">
            <label class="search-filter-label">Search Country Restrictions</label>
            <div class="search-filter-container">
                <input id="global-search-input" class="search-filter-input" placeholder="Search country, code, reason">
                <select id="restriction-filter-input" class="search-filter-input" style="max-width: 190px;">
                    <option value="all">All Restrictions</option>
                    <option value="restricted">Restricted</option>
                    <option value="allowed">Allowed</option>
                </select>
                <button id="search-btn" class="btn-primary">Search</button>
                <button id="reset-btn" class="btn-secondary">Reset</button>
            </div>
        </div>

        <div id="cwr-status" class="status-box" style="display:none;"></div>

        <div class="table-section">
            <div class="table-header">
                <h3 class="table-title">Country Restrictions</h3>
            </div>
            <div class="table-wrap">
                <table id="country-restrictions-table">
                    <thead>
                        <tr>
                            <th>Code</th>
                            <th>Country</th>
                            <th>Restriction</th>
                            <th>Reason</th>
                            <th>Updated At</th>
                            <th>Status</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                </table>
            </div>
        </div>
    </div>

    <div id="cwr-modal" class="fixed inset-0 z-50 hidden items-center justify-center bg-black/40 p-4">
        <div id="cwr-modal-card" class="w-full max-w-3xl rounded-xl bg-white p-4 shadow-xl">
            <div class="mb-3 flex items-center justify-between">
                <h3 id="cwr-modal-title" class="text-base font-semibold text-gray-900">Create Restriction</h3>
            </div>
            <form id="cwr-form" class="space-y-3">
                <input type="hidden" id="cwr-id">
                <div>
                    <label class="mb-1 block text-sm font-medium text-gray-700">Countries (Multi Select)</label>
                    <div class="cwr-country-picker">
                        <button type="button" id="cwr-country-toggle" class="cwr-country-toggle">
                            <span id="cwr-country-toggle-label">Select countries</span>
                            <svg class="icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
                            </svg>
                        </button>
                        <div id="cwr-country-panel" class="cwr-country-panel hidden">
                            <input type="text" id="cwr-country-search" class="cwr-country-search" placeholder="Search country">
                            <div id="cwr-country-options" class="cwr-country-options"></div>
                        </div>
                    </div>
                    <p class="text-xs text-gray-500 mt-1">Use Ctrl/Cmd to select multiple countries.</p>
                    <div class="cwr-note">
                        <strong>Note:</strong> In <strong>Create</strong>, already restricted countries are auto-selected for this app and
                        only newly selected countries are added as <strong>Restricted</strong>. Existing country records are not modified.
                        Use <strong>Edit</strong> to change existing restriction values.
                    </div>
                </div>
                <div class="grid grid-cols-1 gap-3 sm:grid-cols-2">
                    <div>
                        <label class="mb-1 block text-sm font-medium text-gray-700">Restriction Filter</label>
                        <select id="cwr-restricted" class="w-full rounded-md border border-gray-300 px-3 py-2 text-sm">
                            <option value="1">Restricted</option>
                            <option value="0">Allowed</option>
                        </select>
                    </div>
                    <div>
                        <label class="mb-1 block text-sm font-medium text-gray-700">Reason</label>
                        <input id="cwr-reason" maxlength="500" class="w-full rounded-md border border-gray-300 px-3 py-2 text-sm" placeholder="Reason for restriction (optional)">
                    </div>
                </div>
                <div>
                    <label class="mb-1 block text-sm font-medium text-gray-700">Status</label>
                    <select id="cwr-status-input" class="w-full rounded-md border border-gray-300 px-3 py-2 text-sm">
                        <option value="1">Active</option>
                        <option value="0">Inactive</option>
                    </select>
                </div>
                <div class="flex justify-end gap-2">
                    <button type="button" id="cwr-cancel-btn" class="btn-secondary">Cancel</button>
                    <button type="submit" id="cwr-save-btn" class="btn-primary">
                        <span id="cwr-save-btn-label">Save</span>
                        <span id="cwr-save-btn-loader" class="hidden" style="display:none; margin-left:8px;">
                            <svg class="icon animate-spin" viewBox="0 0 24 24" fill="none">
                                <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-opacity="0.25" stroke-width="3"></circle>
                                <path d="M22 12a10 10 0 00-10-10" stroke="currentColor" stroke-width="3" stroke-linecap="round"></path>
                            </svg>
                        </span>
                    </button>
                </div>
            </form>
        </div>
    </div>

    <div id="cwr-delete-modal" class="fixed inset-0 z-50 hidden items-center justify-center bg-black/45 p-4">
        <div id="cwr-delete-modal-card" class="cwr-delete-card">
            <div class="cwr-delete-header">
                <span class="cwr-delete-icon">
                    <svg class="icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v4m0 4h.01M10.29 3.86l-8.32 14A1 1 0 002.86 19h18.28a1 1 0 00.89-1.14l-8.32-14a1 1 0 00-1.72 0z"></path>
                    </svg>
                </span>
                <h3 class="cwr-delete-title">Delete Restriction</h3>
            </div>
            <div class="cwr-delete-body">
                <p class="cwr-delete-text">Are you sure you want to delete this restriction? This action cannot be undone.</p>
                <div class="cwr-delete-actions">
                    <button type="button" id="cwr-delete-cancel-btn" class="btn-secondary">Cancel</button>
                    <button type="button" id="cwr-delete-confirm-btn" class="btn-danger">Delete</button>
                </div>
            </div>
        </div>
    </div>

    @push('scripts')
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <script src="https://cdn.datatables.net/1.13.7/js/jquery.dataTables.min.js"></script>
    <script>
        (function () {
            'use strict';

            const pageRoot = document.querySelector('.cwr-page');
            if (!pageRoot) {
                return;
            }
            if (pageRoot.dataset.cwrInitialized === '1') {
                return;
            }
            pageRoot.dataset.cwrInitialized = '1';

            const endpoints = {
                token: '/admin/api/tokens/current',
                list: '/admin/api/operations/country-wise-restrictions',
                countries: '/admin/api/operations/country-wise-restrictions/countries',
                create: '/admin/api/operations/country-wise-restrictions',
                updateBase: '/admin/api/operations/country-wise-restrictions',
                deleteBase: '/admin/api/operations/country-wise-restrictions',
            };

            const csrf = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || '';
            const statusBox = document.getElementById('cwr-status');
            const modal = document.getElementById('cwr-modal');
            const modalCard = document.getElementById('cwr-modal-card');
            const deleteModal = document.getElementById('cwr-delete-modal');
            const deleteModalCard = document.getElementById('cwr-delete-modal-card');
            const deleteCancelBtn = document.getElementById('cwr-delete-cancel-btn');
            const deleteConfirmBtn = document.getElementById('cwr-delete-confirm-btn');
            const form = document.getElementById('cwr-form');
            const idInput = document.getElementById('cwr-id');
            const restrictedInput = document.getElementById('cwr-restricted');
            const reasonInput = document.getElementById('cwr-reason');
            const statusInput = document.getElementById('cwr-status-input');
            const modalTitle = document.getElementById('cwr-modal-title');
            const globalSearchInput = document.getElementById('global-search-input');
            const restrictionFilterInput = document.getElementById('restriction-filter-input');
            const countryToggle = document.getElementById('cwr-country-toggle');
            const countryToggleLabel = document.getElementById('cwr-country-toggle-label');
            const countryPanel = document.getElementById('cwr-country-panel');
            const countrySearchInput = document.getElementById('cwr-country-search');
            const countryOptionsContainer = document.getElementById('cwr-country-options');
            const saveBtn = document.getElementById('cwr-save-btn');
            const saveBtnLabel = document.getElementById('cwr-save-btn-label');
            const saveBtnLoader = document.getElementById('cwr-save-btn-loader');

            let countries = [];
            let bearerToken = '';
            let dt = null;
            let statusHideTimer = null;
            let selectedCountryIds = new Set();
            let pendingDeleteId = null;
            let restrictedCountryIds = new Set();

            function showStatus(message, type) {
                statusBox.textContent = message;
                statusBox.className = 'status-box ' + (type === 'error' ? 'error' : 'success');
                statusBox.style.display = 'block';

                if (statusHideTimer) {
                    clearTimeout(statusHideTimer);
                }
                const timeoutMs = type === 'error' ? 6500 : 3500;
                statusHideTimer = setTimeout(() => {
                    hideStatus();
                }, timeoutMs);
            }

            function hideStatus() {
                if (statusHideTimer) {
                    clearTimeout(statusHideTimer);
                    statusHideTimer = null;
                }
                statusBox.style.display = 'none';
            }

            function setSavingState(isSaving) {
                if (!saveBtn || !saveBtnLabel || !saveBtnLoader) {
                    return;
                }

                saveBtn.disabled = isSaving;
                saveBtn.style.opacity = isSaving ? '0.8' : '1';
                saveBtn.style.cursor = isSaving ? 'not-allowed' : 'pointer';

                saveBtnLabel.textContent = isSaving ? 'Saving...' : 'Save';
                saveBtnLoader.style.display = isSaving ? 'inline-flex' : 'none';

                countryToggle.disabled = isSaving;
                restrictedInput.disabled = isSaving ? true : (idInput.value ? false : true);
                statusInput.disabled = isSaving;
                reasonInput.disabled = isSaving;
                countrySearchInput.disabled = isSaving;
            }

            async function fetchBearerToken(forceRefresh = false) {
                if (!forceRefresh && bearerToken) return bearerToken;
                const res = await fetch(endpoints.token, {
                    credentials: 'same-origin',
                    headers: { 'Accept': 'application/json', 'X-Requested-With': 'XMLHttpRequest', 'X-CSRF-TOKEN': csrf },
                });
                const data = await res.json().catch(() => ({}));
                if (!res.ok || !data.token) throw new Error(data.message || 'Unable to fetch API token.');
                bearerToken = String(data.token);
                return bearerToken;
            }

            function openModal() { modal.classList.remove('hidden'); modal.classList.add('flex'); }
            function closeModal() { modal.classList.add('hidden'); modal.classList.remove('flex'); }
            function openDeleteModal(id) {
                pendingDeleteId = Number(id || 0) || null;
                deleteModal.classList.remove('hidden');
                deleteModal.classList.add('flex');
            }
            function closeDeleteModal() {
                pendingDeleteId = null;
                deleteModal.classList.add('hidden');
                deleteModal.classList.remove('flex');
            }

            function resetForm() {
                idInput.value = '';
                selectedCountryIds = new Set(restrictedCountryIds);
                restrictedInput.value = '1';
                restrictedInput.disabled = true;
                reasonInput.value = '';
                statusInput.value = '1';
                modalTitle.textContent = 'Create Restriction';
                updateCountryToggleLabel();
                renderCountryOptions();
            }

            function updateCountryToggleLabel() {
                const total = selectedCountryIds.size;
                if (total === 0) {
                    countryToggleLabel.textContent = 'Select countries';
                    return;
                }
                if (total === 1) {
                    const selectedId = Number(Array.from(selectedCountryIds)[0]);
                    const country = countries.find((c) => Number(c.id) === selectedId);
                    countryToggleLabel.textContent = country ? `${country.name} (${country.code || ''})` : '1 country selected';
                    return;
                }
                countryToggleLabel.textContent = `${total} countries selected`;
            }

            function renderCountryOptions() {
                const search = (countrySearchInput.value || '').trim().toLowerCase();
                const filtered = countries.filter((c) => {
                    const text = `${c.name || ''} ${c.code || ''}`.toLowerCase();
                    return text.includes(search);
                });

                if (!filtered.length) {
                    countryOptionsContainer.innerHTML = '<div class="cwr-country-empty">No countries found</div>';
                    return;
                }

                countryOptionsContainer.innerHTML = filtered.map((c) => {
                    const checked = selectedCountryIds.has(String(c.id)) ? 'checked' : '';
                    const label = `${c.name} (${c.code || ''})`;
                    return `
                        <label class="cwr-country-option">
                            <input type="checkbox" data-country-id="${c.id}" ${checked}>
                            <span>${label}</span>
                        </label>
                    `;
                }).join('');
            }

            async function apiRequest(url, options = {}, hasRetried = false) {
                const token = await fetchBearerToken(hasRetried);
                const res = await fetch(url, {
                    credentials: 'same-origin',
                    headers: {
                        'Accept': 'application/json',
                        'Content-Type': 'application/json',
                        'Authorization': 'Bearer ' + token,
                        'X-Requested-With': 'XMLHttpRequest',
                        'X-CSRF-TOKEN': csrf,
                    },
                    ...options,
                });
                const data = await res.json().catch(() => ({}));
                if (!res.ok) {
                    if (res.status === 401) {
                        bearerToken = '';
                        if (!hasRetried) {
                            return apiRequest(url, options, true);
                        }
                    }
                    throw new Error(data.message || 'Request failed.');
                }
                return data;
            }

            async function loadCountries() {
                const data = await apiRequest(endpoints.countries, { method: 'GET' });
                countries = Array.isArray(data.data) ? data.data : [];
                const restrictedIds = Array.isArray(data?.restricted_country_ids) ? data.restricted_country_ids : [];
                restrictedCountryIds = new Set(restrictedIds.map((id) => String(id)));
                renderCountryOptions();
                updateCountryToggleLabel();
            }

            function initializeTable() {
                if ($.fn.dataTable.isDataTable('#country-restrictions-table')) {
                    $('#country-restrictions-table').DataTable().destroy();
                }

                dt = $('#country-restrictions-table').DataTable({
                    processing: true,
                    serverSide: true,
                    searching: true,
                    ajax: async function (data, callback) {
                        try {
                            const params = new URLSearchParams();
                            Object.entries(data).forEach(([key, value]) => {
                                if (value === undefined || value === null) return;
                                if (typeof value === 'object') {
                                    Object.entries(value).forEach(([k, v]) => params.append(`${key}[${k}]`, v));
                                } else {
                                    params.append(key, value);
                                }
                            });
                            params.set('search[value]', globalSearchInput.value || '');
                            params.set('restriction_filter', restrictionFilterInput.value || 'all');
                            const payload = await apiRequest(`${endpoints.list}?${params.toString()}`, {
                                method: 'GET',
                            });
                            callback(payload);
                        } catch (error) {
                            showStatus(error.message || 'Unable to load country restrictions.', 'error');
                            callback({ draw: data.draw, recordsTotal: 0, recordsFiltered: 0, data: [] });
                        }
                    },
                    columns: [
                        { data: 'country_code', name: 'country_code', defaultContent: '-' },
                        { data: 'country_name', name: 'country_name', defaultContent: '-' },
                        { data: 'is_restricted', name: 'is_restricted', render: (d) => Number(d) ? '<span class="pill danger">Restricted</span>' : '<span class="pill success">Allowed</span>' },
                        {
                            data: 'restriction_reason',
                            name: 'restriction_reason',
                            render: (d) => {
                                const text = d || '-';
                                const safe = $('<div>').text(text).html();
                                return `<span title="${safe}">${safe.length > 60 ? safe.substring(0, 60) + '...' : safe}</span>`;
                            },
                        },
                        { data: 'updated_at', name: 'updated_at', render: (d) => d ? new Date(d).toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' }) : '-' },
                        { data: 'status', name: 'status', render: (d) => Number(d) === 1 ? '<span class="pill success">Active</span>' : '<span class="pill danger">Inactive</span>' },
                        {
                            data: 'id',
                            orderable: false,
                            searchable: false,
                            render: (id) => `
                                <div class="action-buttons">
                                    <button class="action-button edit" data-action="edit" data-id="${id}" title="Edit">
                                        <svg class="icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path>
                                        </svg>
                                    </button>
                                    <button class="action-button delete" data-action="delete" data-id="${id}" title="Delete">
                                        <svg class="icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path>
                                        </svg>
                                    </button>
                                </div>
                            `
                        },
                    ],
                    order: [[4, 'desc']],
                    pageLength: 10,
                    lengthMenu: [[10, 25, 50, 100], [10, 25, 50, 100]],
                    language: {
                        processing: 'Loading country restrictions...',
                        emptyTable: 'No country restrictions found',
                        zeroRecords: 'No matching restrictions found',
                        info: 'Showing _START_ to _END_ of _TOTAL_ entries',
                        infoEmpty: 'Showing 0 to 0 of 0 entries',
                        infoFiltered: '(filtered from _MAX_ total entries)'
                    },
                });
            }

            async function onSubmit(event) {
                event.preventDefault();
                hideStatus();
                setSavingState(true);

                const id = idInput.value ? Number(idInput.value) : null;
                const selectedIds = Array.from(selectedCountryIds).map((v) => Number(v)).filter((v) => v > 0);
                const payload = {
                    country_ids: selectedIds,
                    is_restricted: Number(restrictedInput.value || 0),
                    restriction_reason: (reasonInput.value || '').trim() || null,
                    status: Number(statusInput.value || 1),
                };

                if (!payload.country_ids.length) {
                    showStatus('Please select at least one country.', 'error');
                    setSavingState(false);
                    return;
                }

                try {
                    if (id) {
                        restrictedInput.disabled = false;
                        await apiRequest(`${endpoints.updateBase}/${id}`, { method: 'PUT', body: JSON.stringify(payload) });
                        showStatus('Restriction updated successfully.', 'success');
                    } else {
                        payload.is_restricted = 1;
                        const response = await apiRequest(endpoints.create, { method: 'POST', body: JSON.stringify(payload) });
                        const createdCount = Number(response?.created_count || 0);
                        const skippedCount = Number(response?.skipped_existing_count || 0);
                        showStatus(`Restriction created for ${createdCount} new countries${skippedCount > 0 ? `, skipped ${skippedCount} existing` : ''}.`, 'success');
                    }
                    closeModal();
                    await loadCountries();
                    dt.ajax.reload(null, false);
                } catch (error) {
                    showStatus(error.message || 'Save failed.', 'error');
                } finally {
                    setSavingState(false);
                }
            }

            async function onTableClick(event) {
                const button = event.target.closest('button[data-action]');
                if (!button) return;
                const id = Number(button.dataset.id || 0);
                const action = button.dataset.action;
                if (!id) return;

                const rowData = dt.rows().data().toArray().find((r) => Number(r.id) === id);
                if (!rowData) return;

                if (action === 'edit') {
                    idInput.value = String(rowData.id);
                    selectedCountryIds = new Set([String(rowData.country_id)]);
                    updateCountryToggleLabel();
                    renderCountryOptions();
                    restrictedInput.value = Number(rowData.is_restricted) ? '1' : '0';
                    restrictedInput.disabled = false;
                    reasonInput.value = rowData.restriction_reason || '';
                    statusInput.value = Number(rowData.status) === 1 ? '1' : '0';
                    modalTitle.textContent = 'Edit Restriction';
                    openModal();
                    return;
                }

                if (action === 'delete') {
                    openDeleteModal(id);
                }
            }

            document.getElementById('cwr-create-btn').addEventListener('click', () => { resetForm(); openModal(); });
            document.getElementById('cwr-cancel-btn').addEventListener('click', closeModal);
            form.addEventListener('submit', onSubmit);
            document.getElementById('country-restrictions-table').addEventListener('click', onTableClick);
            document.getElementById('search-btn').addEventListener('click', () => dt.ajax.reload());
            document.getElementById('reset-btn').addEventListener('click', () => {
                globalSearchInput.value = '';
                restrictionFilterInput.value = 'all';
                dt.ajax.reload();
            });
            globalSearchInput.addEventListener('keydown', (e) => { if (e.key === 'Enter') { e.preventDefault(); dt.ajax.reload(); } });
            restrictionFilterInput.addEventListener('change', () => dt.ajax.reload());

            countryToggle.addEventListener('click', () => {
                countryPanel.classList.toggle('hidden');
            });

            countrySearchInput.addEventListener('input', () => {
                renderCountryOptions();
            });

            countryOptionsContainer.addEventListener('change', (e) => {
                const target = e.target;
                if (!(target instanceof HTMLInputElement) || !target.matches('input[type="checkbox"][data-country-id]')) {
                    return;
                }
                const countryId = String(target.getAttribute('data-country-id') || '');
                if (!countryId) {
                    return;
                }
                if (target.checked) {
                    selectedCountryIds.add(countryId);
                } else {
                    selectedCountryIds.delete(countryId);
                }
                updateCountryToggleLabel();
                countryPanel.classList.add('hidden');
            });

            // Prevent closing via backdrop click. Modal closes only via Cancel/Save.
            modal.addEventListener('click', (e) => {
                if (e.target === modal) {
                    e.stopPropagation();
                }
            });
            modalCard.addEventListener('click', (e) => e.stopPropagation());
            deleteModal.addEventListener('click', (e) => {
                if (e.target === deleteModal) {
                    e.stopPropagation();
                }
            });
            deleteModalCard.addEventListener('click', (e) => e.stopPropagation());
            document.addEventListener('click', (e) => {
                if (!countryPanel.classList.contains('hidden')) {
                    const target = e.target;
                    if (!(target instanceof Node)) {
                        return;
                    }
                    if (!countryPanel.contains(target) && !countryToggle.contains(target)) {
                        countryPanel.classList.add('hidden');
                    }
                }
            });

            // Prevent closing via Escape while modal is open.
            document.addEventListener('keydown', (e) => {
                if (e.key === 'Escape' && modal.classList.contains('flex')) {
                    e.preventDefault();
                    e.stopPropagation();
                }
            }, true);

            deleteCancelBtn.addEventListener('click', closeDeleteModal);
            deleteConfirmBtn.addEventListener('click', async () => {
                if (!pendingDeleteId) {
                    closeDeleteModal();
                    return;
                }

                try {
                    await apiRequest(`${endpoints.deleteBase}/${pendingDeleteId}`, { method: 'DELETE' });
                    showStatus('Restriction deleted successfully.', 'success');
                    closeDeleteModal();
                    await loadCountries();
                    dt.ajax.reload(null, false);
                } catch (error) {
                    showStatus(error.message || 'Delete failed.', 'error');
                    closeDeleteModal();
                }
            });

            (async function init() {
                try {
                    await fetchBearerToken();
                    await loadCountries();
                    initializeTable();
                } catch (error) {
                    showStatus(error.message || 'Unable to initialize country restrictions.', 'error');
                }
            })();
        })();
    </script>
    @endpush
</x-filament-panels::page>