@extends('layouts.app')

@section('content')
<div class="container mb-5">
    <div class="row">
        <div class="col">
            <h2>Kelola User</h2>
            <p>Manajemen data user system dan peserta SPMB.</p>
        </div>
    </div>
</div>

<!-- Main Content -->
<main class="container mb-5">
    <!-- User Table -->
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-body">
                    <h5 class="card-title mb-3">Data User</h5>
                    <div class="d-flex justify-content-between align-items-center mb-3">
                        <p class="text-muted mb-0">Tabel data user system dan peserta SPMB.</p>
                        <button type="button" class="btn btn-danger btn-sm" data-bs-toggle="modal" data-bs-target="#tambahPesertaModal">
                            <i class="bi bi-plus-circle me-1"></i>
                            Tambah Peserta
                        </button>
                    </div>
                    
                    <!-- User Table -->
                    <div class="table-responsive">
                        <table class="table table-striped table-hover">
                            <thead class="table-dark">
                                <tr>
                                    <th scope="col" class="text-center" style="width: 44px;">
                                        <input type="checkbox" class="form-check-input" id="selectAllUsers" aria-label="Pilih semua user">
                                    </th>
                                    <th scope="col">#</th>
                                    <th scope="col">Username</th>
                                    <th scope="col">Email</th>
                                    <th scope="col">Nama</th>
                                    <th scope="col">Role</th>
                                    <th scope="col">Aksi</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse ($users as $index => $user)
                                    <tr class="user-row">
                                        <td class="text-center align-middle">
                                            <input type="checkbox" class="form-check-input user-select-checkbox" value="{{ $user->id }}" aria-label="Pilih user {{ $user->username }}">
                                        </td>
                                        <th scope="row">{{ $index + 1 }}</th>
                                        <td>{{ $user->username }}</td>
                                        <td>{{ $user->email }}</td>
                                        <td>{{ $user->name }}</td>
                                            <td>
                                                @if($user->role == 'peserta')
                                                    <button type="button" class="btn btn-sm btn-outline-secondary role-peserta-btn" data-user-id="{{ $user->id }}">
                                                        <i class="bi bi-person-lines-fill me-1"></i>
                                                        {{ ucfirst($user->role) }}
                                                    </button>
                                                @else
                                                    <span class="badge @if($user->role == 'admin') bg-primary @else bg-success @endif">
                                                        {{ ucfirst($user->role) }}
                                                    </span>
                                                @endif
                                            </td>
                                        <td>
                                            <div class="btn-group btn-group-sm">
                                                <button type="button" class="btn btn-primary" onclick="editUser({{ $user->id }})">
                                                    <i class="bi bi-pencil"></i>
                                                    Edit
                                                </button>
                                                <button type="button" class="btn btn-danger delete-user-btn" data-url="{{ url('/admin/users/'.$user->id) }}" data-username="{{ $user->username }}">
                                                    <i class="bi bi-trash"></i>
                                                    Hapus
                                                </button>
                                            </div>
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="7" class="text-center py-3">
                                            <i class="bi bi-inbox text-muted fs-4 d-block mb-2"></i>
                                            Belum ada data user
                                        </td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</main>

<!-- Modal Edit User -->
<div class="modal fade" id="editUserModal" tabindex="-1" aria-labelledby="editUserModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="editUserModalLabel" style="background-color: #198754; color: white; padding: 10px; border-radius: 5px;">
                    <i class="bi bi-pencil-square me-2"></i>
                    Edit Data User
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form id="editUserForm" method="POST" action="#" enctype="multipart/form-data">
                @csrf
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label for="editUsername" class="form-label">Username <span class="text-danger">*</span></label>
                            <input type="text" class="form-control" id="editUsername" name="username" required>
                            <div class="form-text">Username untuk login system</div>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label for="editEmail" class="form-label">Email <span class="text-danger">*</span></label>
                            <input type="email" class="form-control" id="editEmail" name="email" required>
                            <div class="form-text">Email resmi user</div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label for="editName" class="form-label">Nama Lengkap <span class="text-danger">*</span></label>
                            <input type="text" class="form-control" id="editName" name="name" required>
                            <div class="form-text">Nama lengkap user</div>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label for="editRole" class="form-label">Role <span class="text-danger">*</span></label>
                            <select class="form-select" id="editRole" name="role" required>
                                <option value="user">User</option>
                                <option value="peserta">Peserta</option>
                                <option value="admin">Admin</option>
                            </select>
                            <div class="form-text">Level akses user</div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                        <i class="bi bi-x-circle me-1"></i>
                        Batal
                    </button>
                    <button type="submit" class="btn btn-primary">
                        <i class="bi bi-save me-1"></i>
                        Simpan Perubahan
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Modal Tambah User/Peserta -->
<div class="modal fade" id="tambahPesertaModal" tabindex="-1" aria-labelledby="tambahPesertaModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="tambahPesertaModalLabel">
                    <i class="bi bi-person-plus me-2"></i>
                    Tambah User Baru
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form id="tambahPesertaForm" method="POST" action="{{ route('admin.kelola.peserta.store') }}">
                @csrf
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label for="username" class="form-label">Username <span class="text-danger">*</span></label>
                            <input type="text" class="form-control" id="username" name="username" required>
                            <div class="form-text">Username untuk login system</div>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label for="password" class="form-label">Password <span class="text-danger">*</span></label>
                            <input type="password" class="form-control" id="password" name="password" required minlength="6">
                            <div class="form-text">Minimal 6 karakter</div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label for="password_confirmation" class="form-label">Konfirmasi Password <span class="text-danger">*</span></label>
                            <input type="password" class="form-control" id="password_confirmation" name="password_confirmation" required minlength="6">
                            <div class="form-text">Ulangi password untuk konfirmasi</div>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label for="role" class="form-label">Role</label>
                            <select class="form-select" id="role" name="role" required>
                                <option value="">Pilih Role</option>
                                <option value="admin">Admin</option>
                                <option value="peserta">Peserta</option>
                            </select>
                            <div class="form-text">Role pengguna dalam sistem</div>
                        </div>
                    </div>
                    
                    <div class="alert alert-info mt-3" role="alert">
                        <i class="bi bi-info-circle me-2"></i>
                        Data peserta SPMB akan diisi oleh peserta sendiri saat mendaftar.
                    </div>
                </div>
                <div class="modal-footer">
                    <div class="d-flex justify-content-between align-items-center w-100">
                        <div>
                            <button type="button" class="btn btn-success" onclick="showImportModal()">
                                <i class="bi bi-file-earmark-excel me-1"></i>
                                Import

                        <!-- Modal Status Peserta SPMB -->
                        <div class="modal fade" id="statusPesertaModal" tabindex="-1" aria-labelledby="statusPesertaModalLabel" aria-hidden="true">
                            <div class="modal-dialog modal-md">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <h5 class="modal-title" id="statusPesertaModalLabel">Status Peserta SPMB</h5>
                                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                    </div>
                                    <div class="modal-body" id="statusPesertaBody">
                                        <div class="text-center py-4">Memuat data...</div>
                                    </div>
                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Tutup</button>
                                    </div>
                                </div>
                            </div>
                        </div>

                        @push('scripts')
                        <script>
                            document.addEventListener('DOMContentLoaded', function () {
                                document.querySelectorAll('.role-peserta-btn').forEach(function(btn) {
                                    btn.addEventListener('click', function () {
                                        const userId = this.getAttribute('data-user-id');
                                        const modalEl = document.getElementById('statusPesertaModal');
                                        const modalBody = document.getElementById('statusPesertaBody');
                                        modalBody.innerHTML = '<div class="text-center py-4">Memuat data...</div>';
                                        const modal = new bootstrap.Modal(modalEl);
                                        modal.show();

                                        // Try to fetch pendaftar status via AJAX
                                        fetch(`/admin/pendaftar/${userId}`, {
                                            headers: { 'Accept': 'application/json', 'X-Requested-With': 'XMLHttpRequest' }
                                        })
                                        .then(resp => resp.json().catch(() => null))
                                        .then(data => {
                                            function extractPendaftar(resp) {
                                                if (!resp) return null;
                                                if (resp.pendaftar) return resp.pendaftar;
                                                if (resp.data) return resp.data;
                                                if (resp.payload) return resp.payload;
                                                // direct shape
                                                if (resp.nama_peserta || resp.nik || resp.nisn || resp.status) return resp;
                                                // if resp has success wrapper with object inside
                                                if (resp.success && typeof resp === 'object') {
                                                    // try common keys
                                                    const keys = ['result','item','pendaftar','data','payload'];
                                                    for (const k of keys) if (resp[k]) return resp[k];
                                                }
                                                if (Array.isArray(resp) && resp.length > 0) return resp[0];
                                                return null;
                                            }

                                            const p = extractPendaftar(data);
                                            if (p) {
                                                const person = Array.isArray(p) ? p[0] : p;
                                                const status = (person.status || 'menunggu').toString().toLowerCase();
                                                const badgeClass = status === 'diterima' ? 'bg-success' : (status === 'ditolak' ? 'bg-danger' : 'bg-warning text-dark');
                                                modalBody.innerHTML = `
                                                    <p><strong>Nama:</strong> ${person.nama_peserta || person.name || '-'} </p>
                                                    <p><strong>NIK:</strong> ${person.nik || '-'} </p>
                                                    <p><strong>NISN:</strong> ${person.nisn || '-'} </p>
                                                    <p><strong>Status:</strong> <span class="badge ${badgeClass}">${status.charAt(0).toUpperCase()+status.slice(1)}</span></p>
                                                `;
                                            } else {
                                                modalBody.innerHTML = '<div class="text-center py-4">Belum ada data pendaftaran untuk peserta ini.</div>';
                                            }
                                        })
                                        .catch(() => {
                                            modalBody.innerHTML = '<div class="text-center py-4">Gagal memuat data. Periksa koneksi atau route belum tersedia.</div>';
                                        });
                                    });
                                });
                            });
                        </script>
                        @endpush
                            </button>
                        </div>
                        <div>
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                                <i class="bi bi-x-circle me-1"></i>
                                Batal
                            </button>
                            <button type="submit" class="btn btn-primary">
                                <i class="bi bi-save me-1"></i>
                                Simpan User
                            </button>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Modal Import User -->
<div class="modal fade" id="importUserModal" tabindex="-1" aria-labelledby="importUserModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="importUserModalLabel">
                    <i class="bi bi-file-earmark-excel me-2"></i>
                    Import User dari File XLSX
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form id="importUserForm" method="POST" action="{{ route('admin.kelola.import') }}" enctype="multipart/form-data">
                @csrf
                <div class="modal-body">
                    <div class="alert alert-info" role="alert">
                        <i class="bi bi-info-circle me-2"></i>
                        Upload file XLSX untuk mengimport data user baru. Format file harus mengikuti template yang tersedia.
                    </div>
                    
                    <div class="mb-3">
                        <label for="importFile" class="form-label">Pilih File XLSX</label>
                        <input type="file" class="form-control" id="importFile" name="import_file" accept=".xlsx,.xls" required>
                        <div class="form-text">Maksimal file 10MB. Hanya file .xlsx dan .xls yang diperbolehkan.</div>
                    </div>
                    
                    <div class="form-check mb-3">
                        <input class="form-check-input" type="checkbox" id="overwriteExisting" name="overwrite_existing" value="1">
                        <label class="form-check-label" for="overwriteExisting">
                            Timpa data user yang sudah ada (berdasarkan username atau email)
                        </label>
                    </div>
                    
                    <div class="text-center">
                        <button type="submit" class="btn btn-primary">
                            <i class="bi bi-upload me-1"></i>
                            Import Data
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

@push('scripts')
<script>
    function showImportModal() {
        const importModal = new bootstrap.Modal(document.getElementById('importUserModal'));
        importModal.show();
    }

    function updateUserSelectionState() {
        const selectAll = document.getElementById('selectAllUsers');
        const rowCheckboxes = Array.from(document.querySelectorAll('.user-select-checkbox'));

        if (!selectAll || rowCheckboxes.length === 0) {
            return;
        }

        const checkedCount = rowCheckboxes.filter(checkbox => checkbox.checked).length;
        selectAll.checked = checkedCount === rowCheckboxes.length;
        selectAll.indeterminate = checkedCount > 0 && checkedCount < rowCheckboxes.length;

        rowCheckboxes.forEach(checkbox => {
            const row = checkbox.closest('tr');
            if (row) {
                row.classList.toggle('table-active', checkbox.checked);
            }
        });
    }

    const selectAllUsers = document.getElementById('selectAllUsers');
    if (selectAllUsers) {
        selectAllUsers.addEventListener('change', function () {
            const checked = this.checked;
            document.querySelectorAll('.user-select-checkbox').forEach(function(checkbox) {
                checkbox.checked = checked;
                const row = checkbox.closest('tr');
                if (row) {
                    row.classList.toggle('table-active', checked);
                }
            });
            selectAllUsers.indeterminate = false;
        });
    }

    document.querySelectorAll('.user-select-checkbox').forEach(function(checkbox) {
        checkbox.addEventListener('change', updateUserSelectionState);
    });

    updateUserSelectionState();

    // Handle delete forms via AJAX to match controller JSON responses
    document.querySelectorAll('.delete-user-form').forEach(function(form) {
        form.addEventListener('submit', function(e) {
            e.preventDefault();

            const row = form.closest('tr');
            const usernameCell = row ? row.querySelector('td:nth-child(2)') : null;
            const usernameText = usernameCell ? usernameCell.textContent.trim() : '';

            if (!confirm(`Apakah Anda yakin ingin menghapus user ${usernameText}?`)) {
                return;
            }

            const submitBtn = form.querySelector('button[type="submit"]');
            const originalHTML = submitBtn ? submitBtn.innerHTML : null;
            if (submitBtn) {
                submitBtn.innerHTML = '<i class="bi bi-hourglass-split me-1"></i> Menghapus...';
                submitBtn.disabled = true;
            }

            let url = form.getAttribute('action') || form.action;
            console.log('Delete URL (raw):', url);
            // Normalize to absolute path if route helper returned a relative one
            if (!/^https?:\/\//i.test(url) && !url.startsWith('/')) {
                url = '/' + url.replace(/^\/+/, '');
            }
            console.log('Delete URL (normalized):', url);
            const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || form.querySelector('input[name="_token"]')?.value || '';

            fetch(url, {
                method: 'DELETE',
                credentials: 'same-origin',
                headers: {
                    'X-CSRF-TOKEN': csrfToken,
                    'X-Requested-With': 'XMLHttpRequest',
                    'Accept': 'application/json'
                }
            })
            .then(response => {
                return response.json().catch(() => ({ success: false, error: 'Invalid JSON response from server' }));
            })
            .then(data => {
                if (data.success) {
                    if (row) row.remove();
                    alert(data.message || 'User berhasil dihapus');
                } else {
                    alert('Gagal menghapus user: ' + (data.error || data.message || 'Unknown error'));
                }
            })
            .catch(error => {
                console.error('Delete error:', error);
                alert('Terjadi kesalahan saat menghapus user: ' + error.message);
            })
            .finally(() => {
                if (submitBtn) {
                    submitBtn.innerHTML = originalHTML;
                    submitBtn.disabled = false;
                }
            });
        });
    });

    // New: handle delete via single button (.delete-user-btn)
    document.querySelectorAll('.delete-user-btn').forEach(function(btn) {
        btn.addEventListener('click', function(e) {
            e.preventDefault();
            let url = btn.getAttribute('data-url');
            console.log('Delete button data-url:', url);
            if (!url) url = btn.getAttribute('href') || '';
            // Ensure absolute path
            if (!/^https?:\/\//i.test(url) && !url.startsWith('/')) {
                url = '/' + url.replace(/^\/+/, '');
            }
            console.log('Delete URL used:', url);
            const username = btn.getAttribute('data-username') || '';

            if (!confirm(`Apakah Anda yakin ingin menghapus user ${username}?`)) return;

            const originalHTML = btn.innerHTML;
            btn.innerHTML = '<i class="bi bi-hourglass-split me-1"></i> Menghapus...';
            btn.disabled = true;

            const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || '';

            fetch(url, {
                method: 'DELETE',
                credentials: 'same-origin',
                headers: {
                    'X-CSRF-TOKEN': csrfToken,
                    'X-Requested-With': 'XMLHttpRequest',
                    'Accept': 'application/json'
                }
            })
            .then(resp => resp.json().catch(() => ({ success: false, error: 'Invalid JSON response from server' })))
            .then(data => {
                if (data.success) {
                    const row = btn.closest('tr');
                    if (row) row.remove();
                    alert(data.message || 'User berhasil dihapus');
                } else {
                    alert('Gagal menghapus user: ' + (data.error || data.message || 'Unknown error'));
                }
            })
            .catch(err => {
                console.error('Delete error:', err);
                alert('Terjadi kesalahan saat menghapus user: ' + err.message);
            })
            .finally(() => {
                btn.innerHTML = originalHTML;
                btn.disabled = false;
            });
        });
    });

    function editUser(userId) {
        console.log('editUser called with userId:', userId);
        
        // Check if userId is valid
        if (!userId || userId === 'undefined' || isNaN(userId)) {
            console.error('Invalid userId:', userId);
            alert('User ID tidak valid');
            return;
        }
        
        // Fetch user data
        const apiUrl = `/admin/users/${userId}`;
        console.log('Fetching from:', apiUrl);
        
        fetch(apiUrl, {
            method: 'GET',
            headers: {
                'Accept': 'application/json',
                'X-Requested-With': 'XMLHttpRequest'
            }
        })
            .then(response => {
                console.log('Response status:', response.status, response.statusText);
                
                // Check if response is JSON
                const contentType = response.headers.get('content-type');
                console.log('Content-Type:', contentType);
                
                if (!contentType || !contentType.includes('application/json')) {
                    return response.text().then(text => {
                        console.log('Non-JSON response:', text.substring(0, 200));
                        throw new Error(`Server returned non-JSON response: ${text.substring(0, 200)}`);
                    });
                }
                
                if (!response.ok) {
                    if (response.status === 401) {
                        throw new Error('Authentication required. Please login again.');
                    } else if (response.status === 403) {
                        throw new Error('Access denied. Admin privileges required.');
                    } else if (response.status === 404) {
                        throw new Error('User not found.');
                    } else {
                        return response.text().then(text => {
                            console.error('Server error response:', text);
                            throw new Error(`Server error ${response.status}: ${text.substring(0, 500)}`);
                        });
                    }
                }
                return response.json();
            })
            .then(data => {
                console.log('User data received:', data);
                
                if (data.success) {
                    // Fill form fields
                    document.getElementById('editUsername').value = data.user.username || '';
                    document.getElementById('editEmail').value = data.user.email || '';
                    document.getElementById('editName').value = data.user.name || '';
                    document.getElementById('editRole').value = data.user.role || 'user';
                    
                    // Update form action
                    document.getElementById('editUserForm').action = `/admin/users/${userId}`;
                    console.log('Form action updated to:', document.getElementById('editUserForm').action);
                    
                    // Show modal
                    const editModal = new bootstrap.Modal(document.getElementById('editUserModal'));
                    editModal.show();
                    console.log('Edit modal shown');
                } else {
                    alert('Error: ' + data.error);
                }
            })
            .catch(error => {
                console.error('Error:', error);
                alert('Error loading user data: ' + error.message);
            });
    }

    

    // Handle edit user form submission
    const editUserForm = document.getElementById('editUserForm');
    if (editUserForm) {
        editUserForm.addEventListener('submit', function(e) {
            e.preventDefault();
            
            // Show loading state
            const submitBtn = editUserForm.querySelector('button[type="submit"]');
            const originalText = submitBtn.innerHTML;
            submitBtn.innerHTML = '<i class="bi bi-hourglass-split me-1"></i> Processing...';
            submitBtn.disabled = true;
            
            // Add timeout handling
            const timeoutPromise = new Promise((_, reject) => {
                setTimeout(() => {
                    reject(new Error('Request timeout. Please try again.'));
                }, 5000); // 5 seconds timeout (reduced for faster feedback)
            });
            
            // Get form data
            const formData = new FormData(editUserForm);
            
            // Add CSRF token with fallback
            const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || 
                             document.querySelector('input[name="_token"]')?.value || '';
            
            if (csrfToken) {
                formData.append('_token', csrfToken);
                formData.append('_method', 'PUT'); // Method spoofing for PUT request
            } else {
                console.warn('CSRF token not found, request may fail');
            }
            
            // Create fetch promise with timeout
            const fetchPromise = fetch(editUserForm.action, {
                method: 'POST',
                body: formData,
                headers: {
                    'X-Requested-With': 'XMLHttpRequest',
                    'Accept': 'application/json',
                    'X-HTTP-Method-Override': 'PUT' // Override method header
                },
                signal: AbortSignal.timeout(10000) // Abort after 10 seconds
            });
            
            // Race between fetch and timeout
            Promise.race([fetchPromise, timeoutPromise])
                .then(response => {
                    // Check if response is JSON
                    const contentType = response.headers.get('content-type');
                    if (!contentType || !contentType.includes('application/json')) {
                        return response.text().then(text => {
                            throw new Error(`Server returned non-JSON response: ${text.substring(0, 500)}`);
                        });
                    }
                    
                    if (!response.ok) {
                        if (response.status === 401) {
                            throw new Error('Authentication required. Please login again.');
                        } else if (response.status === 403) {
                            throw new Error('Access denied. Admin privileges required.');
                        } else if (response.status === 404) {
                            throw new Error('User not found.');
                        } else {
                            // Try to get error message from response
                            return response.text().then(text => {
                                throw new Error(`Server error ${response.status}: ${text.substring(0, 500)}`);
                            });
                        }
                    }
                    
                    return response.json();
                })
                .then(data => {
                    if (data.success) {
                        alert('User berhasil diperbarui');
                        location.reload();
                    } else {
                        alert('Error: ' + data.error);
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                    alert('Error: ' + error.message);
                    // Restore button state
                    submitBtn.innerHTML = originalText;
                    submitBtn.disabled = false;
                });
        });
    }
</script>
@endpush
@endsection