@push('styles')
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.7/css/jquery.dataTables.min.css">
<style>
    .pm-wrap { background:#f8fafc; min-height:100vh; padding:10px; }
    .pm-page-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; gap:10px; }
    .pm-page-title { margin:0; font-size:33px; font-weight:700; color:#111827; letter-spacing:-.02em; line-height:1.2; }
    .pm-page-actions { display:flex; align-items:center; gap:10px; }
    .pm-search-card, .pm-table-card, .pm-modal-card { background:#fff; border:1px solid #e5e7eb; border-radius:14px; box-shadow:0 2px 8px rgba(0,0,0,.05); }
    .pm-search-card { padding:14px; margin-bottom:14px; }
    .pm-search-title { margin:0 0 8px 0; font-size:15px; font-weight:700; color:#111827; }
    .pm-search-grid { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
    .pm-input, .pm-select { border:1px solid #d1d5db; border-radius:8px; padding:8px 11px; font-size:13px; color:#111827; background:#fff; font-family:'Plus Jakarta Sans', sans-serif; }
    .pm-input { flex:1; min-width:260px; }
    .pm-select {
        min-width:190px;
        -webkit-appearance:none;
        -moz-appearance:none;
        appearance:none;
        padding-right:34px;
        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='M6 8l4 4 4-4' stroke='%236b7280' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
        background-repeat:no-repeat;
        background-position:right 10px center;
        background-size:14px 14px;
    }
    .pm-btn { border-radius:10px; border:1px solid transparent; font-size:13px; font-weight:700; padding:8px 13px; cursor:pointer; }
    .pm-btn-primary { background:#111827; color:#fff; }
    .pm-btn-secondary { background:#fff; color:#374151; border-color:#d1d5db; }
    .pm-btn-danger { background:#fff; color:#b42318; border-color:#f3c5c5; }
    .pm-status { display:none; margin-bottom:10px; border-radius:10px; padding:10px 12px; font-size:13px; font-weight:600; }
    .pm-status.success { display:block; color:#065f46; background:#ecfdf3; border:1px solid #abefc6; }
    .pm-status.error { display:block; color:#991b1b; background:#fef2f2; border:1px solid #fca5a5; }
    .pm-table-header { display:flex; align-items:center; justify-content:space-between; padding:12px 14px 8px 14px; border-bottom:1px solid #f3f4f6; }
    .pm-table-title { margin:0; font-size:16px; font-weight:700; color:#111827; display:flex; align-items:center; gap:8px; }
    .pm-table-title-icon { width:16px; height:16px; color:#4f46e5; }
    .pm-table-shell { padding:8px 12px 12px; }

    #pm-table { width:100% !important; border-collapse:separate; border-spacing:0; }
    #pm-table thead { background: linear-gradient(to bottom, #fafbfc 0%, #f8fafc 100%); }
    #pm-table thead th {
        padding: 14px 16px;
        text-align: left;
        font-size: 0.875rem;
        font-weight: 700;
        color: #374151;
        border-bottom: 2px solid #e5e7eb;
        border-right: 1px solid #f0f0f0;
        white-space: nowrap;
        text-transform: none;
        letter-spacing: normal;
    }
    #pm-table thead th:last-child,
    #pm-table tbody td:last-child {
        border-right: none;
        text-align: center;
    }
    #pm-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;
    }
    #pm-table tbody tr:nth-child(even) { background-color:#fafbfc; }
    #pm-table tbody tr:hover { background-color:#f0f4ff !important; }

    #pm-table_wrapper .dataTables_length { padding:8px 16px 10px 16px; }
    #pm-table_wrapper .dataTables_filter { display:none; }
    #pm-table_wrapper .dataTables_info {
        padding:12px 16px;
        color:#6b7280;
        font-weight:600;
        font-size:14px;
    }
    #pm-table_wrapper .dataTables_paginate {
        margin-top:0;
        padding:12px 16px;
        display:flex;
        justify-content:flex-end;
        gap:8px;
    }
    #pm-table_wrapper .dataTables_paginate .paginate_button {
        padding:6px 12px;
        border:1px solid #e5e7eb;
        border-radius:8px;
        background:#fff;
        color:#374151 !important;
    }
    #pm-table_wrapper .dataTables_paginate .paginate_button.current,
    #pm-table_wrapper .dataTables_paginate .paginate_button.current:hover {
        background:#fff !important;
        border-color:#d1d5db !important;
        color:#111827 !important;
    }

    .pm-pill { display:inline-flex; align-items:center; border-radius:999px; padding:4px 10px; font-size:11px; font-weight:700; }
    .pm-pill-active { color:#027a48; background:#d1fadf; border:1px solid #abefc6; }
    .pm-pill-inactive { color:#f04438; background:#fee4e2; border:1px solid #fecdca; }

    .action-buttons { display:flex; gap:8px; justify-content:center; width:100%; }
    .action-button {
        width:36px;
        height:36px;
        border:none;
        border-radius:10px;
        display:inline-flex;
        align-items:center;
        justify-content:center;
        cursor:pointer;
        transition:transform .15s ease, filter .15s ease;
    }
    .action-button svg { width:16px; height:16px; }
    .action-button.edit { color:#2f6bff; background:#eef5ff; }
    .action-button.delete { color:#ff3b30; background:#fff1f1; }
    .action-button:hover { transform:translateY(-1px); filter:brightness(0.98); }

    .pm-modal { position:fixed; inset:0; z-index:60; display:none; align-items:center; justify-content:center; background:rgba(0,0,0,.5); padding:12px; }
    .pm-modal.show { display:flex; }
    .pm-modal-card { width:min(720px, 100%); max-height:90vh; overflow:auto; }
    .pm-modal-head { padding:14px; border-bottom:1px solid #f3f4f6; display:flex; justify-content:flex-start; align-items:center; }
    .pm-modal-body { padding:14px; }
    .pm-grid { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px; }
    .pm-full { grid-column:1 / -1; }
    .pm-label { display:block; margin-bottom:6px; color:#374151; font-size:0.875rem; font-weight:700; }
    .pm-required { color:#b42318; margin-left:2px; }
    .pm-field { width:100%; border:1px solid #d1d5db; border-radius:8px; padding:8px 10px; font-size:13px; }
    .pm-field:focus { outline:none; border-color:#4f46e5; box-shadow:0 0 0 3px rgba(79,70,229,.12); }
    .pm-field-invalid,
    .pm-field-invalid:focus {
        border-color:#f04438 !important;
        box-shadow:0 0 0 3px rgba(240, 68, 56, .12) !important;
    }
    .pm-textarea { min-height:88px; resize:vertical; }
    .pm-error { margin-top:4px; color:#b42318; font-size:12px; min-height:16px; }
    .pm-modal-actions { margin-top:12px; display:flex; justify-content:flex-end; gap:8px; }
    .pm-spinner { width:14px; height:14px; border:2px solid currentColor; border-right-color:transparent; border-radius:9999px; display:inline-block; animation:pm-spin .7s linear infinite; vertical-align:middle; }
    .pm-hidden { display:none !important; }
    .pm-delete-modal {
        position:fixed;
        inset:0;
        z-index:61;
        display:none;
        align-items:center;
        justify-content:center;
        background:rgba(0,0,0,.45);
        padding:12px;
        opacity:0;
        transition:opacity .18s ease;
    }
    .pm-delete-modal.show { display:flex; }
    .pm-delete-modal.pm-delete-visible { opacity:1; }
    .pm-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;
        opacity:0;
        transform:translateY(8px) scale(.985);
        transition:opacity .2s ease, transform .2s ease;
    }
    .pm-delete-modal.pm-delete-visible .pm-delete-card {
        opacity:1;
        transform:translateY(0) scale(1);
    }
    .pm-delete-head {
        display:flex;
        gap:10px;
        align-items:center;
        padding:16px 18px 12px 18px;
        border-bottom:1px solid #f1f5f9;
        background:linear-gradient(180deg, #fff7f7 0%, #ffffff 100%);
    }
    .pm-delete-icon {
        width:32px;
        height:32px;
        border-radius:999px;
        display:inline-flex;
        align-items:center;
        justify-content:center;
        background:#fee2e2;
        color:#dc2626;
        flex:0 0 auto;
    }
    .pm-delete-icon svg { width:16px; height:16px; }
    .pm-delete-title {
        margin:0;
        font-size:25px;
        font-weight:700;
        color:#111827;
        line-height:1.2;
    }
    .pm-delete-body { padding:16px 18px 20px 18px; }
    .pm-delete-text {
        margin:0;
        color:#4b5563;
        font-size:14px;
        line-height:1.55;
    }
    .pm-delete-actions {
        margin-top:18px;
        display:flex;
        justify-content:flex-end;
        gap:10px;
    }
    .pm-delete-actions .pm-btn-secondary {
        padding:10px 16px;
        border-radius:8px;
        border:1px solid #d1d5db;
        background:#fff;
        color:#374151;
        font-weight:600;
    }
    .pm-delete-actions .pm-btn-danger {
        padding:10px 18px;
        border-radius:10px;
        border:none;
        background:linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
        color:#fff;
        font-weight:700;
    }
    .pm-delete-actions .pm-btn-danger:hover {
        filter:brightness(0.97);
    }

    @keyframes pm-spin {
        to { transform: rotate(360deg); }
    }

    @media (max-width: 900px) {
        .pm-grid { grid-template-columns:1fr; }
        .pm-input { min-width:100%; }
        .pm-page-header { flex-direction:column; align-items:flex-start; }
    }

    #pm-table_wrapper .dataTables_length {
        padding:8px 16px 10px 16px;
        color:#0f172a;
        font-weight:600;
    }
    #pm-table_wrapper .dataTables_length label {
        display:flex;
        align-items:center;
        gap:8px;
        font-size:14px;
    }
    #pm-table_wrapper .dataTables_length select {
        border:1px solid #d1d5db;
        border-radius:10px;
        background:#fff;
        min-width:58px;
        height:34px;
        padding:4px 24px 4px 10px;
        color:#1f2937;
        font-weight:600;
    }
</style>
@endpush

<x-filament-panels::page>
    <div class="pm-wrap">
        <div class="pm-page-header">
            <h1 class="pm-page-title">Parental Master</h1>
            <div class="pm-page-actions">
                <button id="pm-add-btn" class="pm-btn pm-btn-primary" type="button">Add Parental Master</button>
            </div>
        </div>

        <div class="pm-search-card">
            <div id="pm-status" class="pm-status"></div>
            <h3 class="pm-search-title">Search Parental Master</h3>
            <div class="pm-search-grid">
                <input id="pm-search" class="pm-input" type="text" placeholder="Search Parental Master">
                <select id="pm-status-filter" class="pm-select" aria-label="Status Filter">
                    <option value="all">All Status</option>
                    <option value="active">Active</option>
                    <option value="inactive">Inactive</option>
                </select>
                <button id="pm-search-btn" class="pm-btn pm-btn-primary" type="button">
                    <span id="pm-search-text">Search</span>
                    <span id="pm-search-loader" class="pm-spinner pm-hidden" aria-hidden="true"></span>
                </button>
                <button id="pm-reset-btn" class="pm-btn pm-btn-secondary" type="button">Reset</button>
            </div>
        </div>

        <div class="pm-table-card">
            <div class="pm-table-header">
                <h3 class="pm-table-title">
                    <svg class="pm-table-title-icon" viewBox="0 0 20 20" fill="none" aria-hidden="true">
                        <path d="M10 2.5 16.5 6v8L10 17.5 3.5 14V6L10 2.5Z" stroke="currentColor" stroke-width="1.6" stroke-linejoin="round"/>
                        <path d="M3.8 6.2 10 10l6.2-3.8" stroke="currentColor" stroke-width="1.6" stroke-linejoin="round"/>
                        <path d="M10 10v7" stroke="currentColor" stroke-width="1.6"/>
                    </svg>
                    Parental Master
                </h3>
            </div>
            <div class="pm-table-shell">
                <table id="pm-table" class="display">
                    <thead>
                        <tr>
                            <th>Age Group</th>
                            <th>Title</th>
                            <th>Player Title</th>
                            <th>Min Age</th>
                            <th>Max Age</th>
                            <th>Status</th>
                            <th>Updated At</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
        </div>
    </div>

    <div id="pm-modal" class="pm-modal" aria-hidden="true">
        <div class="pm-modal-card">
            <div class="pm-modal-head">
                <h4 id="pm-modal-title" style="margin:0;font-size:16px;font-weight:700;color:#111827;">Create Parental Master</h4>
            </div>
            <div class="pm-modal-body">
                <form id="pm-form" novalidate>
                    <input type="hidden" id="pm-id">
                    <div class="pm-grid">
                        <div>
                            <label class="pm-label" for="pm-age-group">Age Group<span class="pm-required">*</span></label>
                            <input id="pm-age-group" class="pm-field" type="text" placeholder="e.g. 13-17" required>
                            <div class="pm-error" data-error="age_group"></div>
                        </div>
                        <div>
                            <label class="pm-label" for="pm-title">Title<span class="pm-required">*</span></label>
                            <input id="pm-title" class="pm-field" type="text" placeholder="Enter title" required>
                            <div class="pm-error" data-error="title"></div>
                        </div>
                        <div>
                            <label class="pm-label" for="pm-player-title">Player Title<span class="pm-required">*</span></label>
                            <input id="pm-player-title" class="pm-field" type="text" placeholder="Enter player title" required>
                            <div class="pm-error" data-error="player_title"></div>
                        </div>
                        <div>
                            <label class="pm-label" for="pm-status-input">Status<span class="pm-required">*</span></label>
                            <select id="pm-status-input" class="pm-field" required>
                                <option value="">Select Status</option>
                                <option value="1">Active</option>
                                <option value="0">Inactive</option>
                            </select>
                            <div class="pm-error" data-error="status"></div>
                        </div>
                        <div>
                            <label class="pm-label" for="pm-min-age">Min Age<span class="pm-required">*</span></label>
                            <input id="pm-min-age" class="pm-field" type="number" min="0" max="120" required>
                            <div class="pm-error" data-error="min_age"></div>
                        </div>
                        <div>
                            <label class="pm-label" for="pm-max-age">Max Age<span class="pm-required">*</span></label>
                            <input id="pm-max-age" class="pm-field" type="number" min="0" max="120" required>
                            <div class="pm-error" data-error="max_age"></div>
                        </div>
                        <div class="pm-full">
                            <label class="pm-label" for="pm-description">Age Group Description</label>
                            <textarea id="pm-description" class="pm-field pm-textarea" placeholder="Description"></textarea>
                            <div class="pm-error" data-error="age_group_description"></div>
                        </div>
                    </div>
                    <div class="pm-modal-actions">
                        <button id="pm-cancel-btn" class="pm-btn pm-btn-secondary" type="button">Cancel</button>
                        <button id="pm-save-btn" class="pm-btn pm-btn-primary" type="submit">
                            <span id="pm-save-text">Save</span>
                            <span id="pm-save-loader" class="pm-spinner pm-hidden" aria-hidden="true"></span>
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div id="pm-delete-modal" class="pm-delete-modal" aria-hidden="true">
        <div id="pm-delete-card" class="pm-delete-card">
            <div class="pm-delete-head">
                <span class="pm-delete-icon">
                    <svg 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="pm-delete-title">Delete Parental Master</h3>
            </div>
            <div class="pm-delete-body">
                <p class="pm-delete-text">Are you sure you want to delete this parental master record? This action cannot be undone.</p>
                <div class="pm-delete-actions">
                    <button id="pm-delete-cancel-btn" class="pm-btn pm-btn-secondary" type="button">Cancel</button>
                    <button id="pm-delete-confirm-btn" class="pm-btn pm-btn-danger" type="button">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 endpoints = {
                list: '/admin/api/operations/parental-master',
                base: '/admin/api/operations/parental-master',
            };

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

            const els = {
                status: document.getElementById('pm-status'),
                search: document.getElementById('pm-search'),
                statusFilter: document.getElementById('pm-status-filter'),
                searchBtn: document.getElementById('pm-search-btn'),
                searchText: document.getElementById('pm-search-text'),
                searchLoader: document.getElementById('pm-search-loader'),
                resetBtn: document.getElementById('pm-reset-btn'),
                addBtn: document.getElementById('pm-add-btn'),
                modal: document.getElementById('pm-modal'),
                modalTitle: document.getElementById('pm-modal-title'),
                cancelBtn: document.getElementById('pm-cancel-btn'),
                form: document.getElementById('pm-form'),
                id: document.getElementById('pm-id'),
                ageGroup: document.getElementById('pm-age-group'),
                title: document.getElementById('pm-title'),
                playerTitle: document.getElementById('pm-player-title'),
                description: document.getElementById('pm-description'),
                minAge: document.getElementById('pm-min-age'),
                maxAge: document.getElementById('pm-max-age'),
                statusInput: document.getElementById('pm-status-input'),
                saveBtn: document.getElementById('pm-save-btn'),
                saveText: document.getElementById('pm-save-text'),
                saveLoader: document.getElementById('pm-save-loader'),
                deleteModal: document.getElementById('pm-delete-modal'),
                deleteCard: document.getElementById('pm-delete-card'),
                deleteCancelBtn: document.getElementById('pm-delete-cancel-btn'),
                deleteConfirmBtn: document.getElementById('pm-delete-confirm-btn'),
            };

            let table = null;
            let statusTimer = null;
            let pendingDeleteId = null;
            let deleteModalCloseTimer = null;

            const fieldMap = {
                age_group: els.ageGroup,
                title: els.title,
                player_title: els.playerTitle,
                min_age: els.minAge,
                max_age: els.maxAge,
                status: els.statusInput,
            };

            function showStatus(message, type) {
                els.status.className = 'pm-status ' + (type === 'error' ? 'error' : 'success');
                els.status.textContent = String(message || '');

                if (statusTimer) {
                    clearTimeout(statusTimer);
                }
                statusTimer = window.setTimeout(function () {
                    clearStatus();
                }, type === 'error' ? 6000 : 3500);
            }

            function clearStatus() {
                els.status.className = 'pm-status';
                els.status.textContent = '';
                if (statusTimer) {
                    clearTimeout(statusTimer);
                    statusTimer = null;
                }
            }

            function setSearchLoading(loading) {
                if (!els.searchBtn) return;
                els.searchBtn.disabled = loading;
                els.searchLoader.classList.toggle('pm-hidden', !loading);
                els.searchText.textContent = loading ? 'Searching' : 'Search';
            }

            function setSaveLoading(loading, isEdit) {
                if (!els.saveBtn) return;
                els.saveBtn.disabled = loading;
                els.saveLoader.classList.toggle('pm-hidden', !loading);
                if (loading) {
                    els.saveText.textContent = isEdit ? 'Updating' : 'Saving';
                } else {
                    els.saveText.textContent = isEdit ? 'Update' : 'Save';
                }
            }

            function clearErrors() {
                document.querySelectorAll('[data-error]').forEach((node) => { node.textContent = ''; });
                Object.values(fieldMap).forEach((node) => node?.classList.remove('pm-field-invalid'));
            }

            function setErrors(errors) {
                clearErrors();
                if (!errors || typeof errors !== 'object') return;
                Object.entries(errors).forEach(([key, value]) => {
                    const node = document.querySelector('[data-error="' + key + '"]');
                    if (!node) return;
                    node.textContent = Array.isArray(value) ? String(value[0] || '') : String(value || '');
                    if (fieldMap[key]) {
                        fieldMap[key].classList.add('pm-field-invalid');
                    }
                });
            }

            function setFieldError(field, message) {
                const node = document.querySelector('[data-error="' + field + '"]');
                if (node) {
                    node.textContent = String(message || '');
                }
                if (fieldMap[field]) {
                    if (message) {
                        fieldMap[field].classList.add('pm-field-invalid');
                    } else {
                        fieldMap[field].classList.remove('pm-field-invalid');
                    }
                }
            }

            function clearFieldError(field) {
                setFieldError(field, '');
            }

            function validateForm() {
                clearErrors();

                let valid = true;
                const ageGroup = String(els.ageGroup.value || '').trim();
                const title = String(els.title.value || '').trim();
                const playerTitle = String(els.playerTitle.value || '').trim();
                const minAgeRaw = String(els.minAge.value || '').trim();
                const maxAgeRaw = String(els.maxAge.value || '').trim();
                const statusRaw = String(els.statusInput.value || '').trim();

                if (ageGroup === '') {
                    setFieldError('age_group', 'Age Group is required.');
                    valid = false;
                }

                if (title === '') {
                    setFieldError('title', 'Title is required.');
                    valid = false;
                }

                if (playerTitle === '') {
                    setFieldError('player_title', 'Player Title is required.');
                    valid = false;
                }

                if (minAgeRaw === '') {
                    setFieldError('min_age', 'Min Age is required.');
                    valid = false;
                }

                if (maxAgeRaw === '') {
                    setFieldError('max_age', 'Max Age is required.');
                    valid = false;
                }

                if (statusRaw !== '1' && statusRaw !== '0') {
                    setFieldError('status', 'Status is required.');
                    valid = false;
                }

                if (minAgeRaw !== '' && maxAgeRaw !== '') {
                    const minAge = Number(minAgeRaw);
                    const maxAge = Number(maxAgeRaw);

                    if (Number.isNaN(minAge) || minAge < 0 || minAge > 120) {
                        setFieldError('min_age', 'Min Age must be between 0 and 120.');
                        valid = false;
                    }

                    if (Number.isNaN(maxAge) || maxAge < 0 || maxAge > 120) {
                        setFieldError('max_age', 'Max Age must be between 0 and 120.');
                        valid = false;
                    }

                    if (!Number.isNaN(minAge) && !Number.isNaN(maxAge) && maxAge < minAge) {
                        setFieldError('max_age', 'Max Age must be greater than or equal to Min Age.');
                        valid = false;
                    }
                }

                return valid;
            }

            function openModal(editing, row) {
                clearErrors();
                if (editing && row) {
                    els.modalTitle.textContent = 'Edit Parental Master';
                    setSaveLoading(false, true);
                    els.id.value = String(row.id || '');
                    els.ageGroup.value = String(row.age_group || '');
                    els.title.value = String(row.title || '');
                    els.playerTitle.value = String(row.player_title || '');
                    els.description.value = String(row.age_group_description || '');
                    els.minAge.value = String(row.min_age || '');
                    els.maxAge.value = String(row.max_age || '');
                    els.statusInput.value = String(Number(row.status ?? 1));
                } else {
                    els.modalTitle.textContent = 'Create Parental Master';
                    setSaveLoading(false, false);
                    els.form.reset();
                    els.id.value = '';
                    els.statusInput.value = '';
                }

                els.modal.classList.add('show');
                els.modal.setAttribute('aria-hidden', 'false');
            }

            function closeModal() {
                els.modal.classList.remove('show');
                els.modal.setAttribute('aria-hidden', 'true');
                clearErrors();
            }

            function openDeleteModal(id) {
                pendingDeleteId = Number(id || 0) || null;
                if (!pendingDeleteId) return;
                if (deleteModalCloseTimer) {
                    clearTimeout(deleteModalCloseTimer);
                    deleteModalCloseTimer = null;
                }
                els.deleteModal.classList.add('show');
                els.deleteModal.setAttribute('aria-hidden', 'false');
                requestAnimationFrame(function () {
                    els.deleteModal.classList.add('pm-delete-visible');
                });
            }

            function closeDeleteModal() {
                pendingDeleteId = null;
                els.deleteModal.classList.remove('pm-delete-visible');
                deleteModalCloseTimer = window.setTimeout(function () {
                    els.deleteModal.classList.remove('show');
                    els.deleteModal.setAttribute('aria-hidden', 'true');
                    deleteModalCloseTimer = null;
                }, 200);
            }

            function esc(value) {
                return String(value ?? '')
                    .replace(/&/g, '&amp;')
                    .replace(/</g, '&lt;')
                    .replace(/>/g, '&gt;')
                    .replace(/"/g, '&quot;')
                    .replace(/'/g, '&#039;');
            }

            async function apiRequest(url, options = {}) {
                const fetchOptions = {
                    method: options.method || 'GET',
                    headers: {
                        'Accept': 'application/json',
                        'X-CSRF-TOKEN': csrfToken,
                        ...(options.body ? { 'Content-Type': 'application/json' } : {}),
                    },
                    ...(options.body ? { body: JSON.stringify(options.body) } : {}),
                };

                if (window.SMSApi && typeof window.SMSApi.fetchJson === 'function') {
                    return window.SMSApi.fetchJson(url, fetchOptions, { auth: 'if-available', retryOn401: true });
                }

                const response = await fetch(url, {
                    ...fetchOptions,
                    credentials: 'same-origin',
                    headers: {
                        ...fetchOptions.headers,
                        'X-Requested-With': 'XMLHttpRequest',
                    },
                });
                const payload = await response.json().catch(() => ({}));
                if (!response.ok) {
                    const error = new Error(payload.message || 'Request failed.');
                    error.payload = payload;
                    throw error;
                }
                return payload;
            }

            function buildPayload() {
                return {
                    age_group: String(els.ageGroup.value || '').trim(),
                    title: String(els.title.value || '').trim(),
                    player_title: String(els.playerTitle.value || '').trim(),
                    age_group_description: String(els.description.value || '').trim(),
                    min_age: Number(els.minAge.value || 0),
                    max_age: Number(els.maxAge.value || 0),
                    status: Number(els.statusInput.value),
                };
            }

            function initializeTable() {
                table = $('#pm-table').DataTable({
                    processing: true,
                    serverSide: true,
                    searching: false,
                    pageLength: 10,
                    lengthMenu: [[10, 25, 50, 100], [10, 25, 50, 100]],
                    ajax: async function (data, callback) {
                        setSearchLoading(true);
                        try {
                            const params = new URLSearchParams($.param(data));
                            params.set('search[value]', (els.search.value || '').trim());
                            params.set('status_filter', els.statusFilter.value || 'all');

                            const response = await apiRequest(endpoints.list + '?' + params.toString(), { method: 'GET' });
                            callback(response);
                        } catch (error) {
                            showStatus(error?.payload?.message || error.message || 'Unable to load records.', 'error');
                            callback({ draw: data.draw, recordsTotal: 0, recordsFiltered: 0, data: [] });
                        } finally {
                            setSearchLoading(false);
                        }
                    },
                    columns: [
                        {
                            data: 'age_group',
                            name: 'age_group',
                            render: function (value, type, row) {
                                return '<div style="font-weight:700;color:#133b61;">' + esc(value || '') + '</div>'
                                    + '<div style="margin-top:4px;color:#5b6f86;font-size:12px;">' + esc(row.age_group_description || '') + '</div>';
                            }
                        },
                        { data: 'title', name: 'title', defaultContent: '-' },
                        { data: 'player_title', name: 'player_title', defaultContent: '-' },
                        { data: 'min_age', name: 'min_age' },
                        { data: 'max_age', name: 'max_age' },
                        {
                            data: 'status',
                            name: 'status',
                            render: function (value) {
                                return Number(value) === 1
                                    ? '<span class="pm-pill pm-pill-active">Active</span>'
                                    : '<span class="pm-pill pm-pill-inactive">Inactive</span>';
                            }
                        },
                        {
                            data: 'updated_at',
                            name: 'updated_at',
                            defaultContent: '-',
                            render: function (value) {
                                if (!value) return '-';

                                const iso = String(value).includes('T')
                                    ? String(value)
                                    : String(value).replace(' ', 'T');

                                const date = new Date(iso);
                                if (Number.isNaN(date.getTime())) return esc(value);

                                return date.toLocaleDateString('en-US', {
                                    month: 'short',
                                    day: 'numeric',
                                    year: 'numeric',
                                });
                            }
                        },
                        {
                            data: null,
                            orderable: false,
                            searchable: false,
                            render: function (row) {
                                const id = Number(row?.id || 0);
                                return '<div class="action-buttons">'
                                    + '<button class="action-button edit" title="Edit" aria-label="Edit" data-action="edit" data-id="' + id + '">'
                                    + '<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" title="Delete" aria-label="Delete" data-action="delete" data-id="' + id + '">'
                                    + '<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: [[6, 'desc']],
                    language: {
                        processing: 'Loading parental master records...',
                        emptyTable: 'No parental master records found',
                        zeroRecords: 'No matching parental master records found',
                    },
                });
            }

            async function submitForm(event) {
                event.preventDefault();
                clearStatus();
                clearErrors();

                if (!validateForm()) {
                    return;
                }

                const id = Number(els.id.value || 0);
                const isEdit = id > 0;
                const url = isEdit ? (endpoints.base + '/' + id) : endpoints.base;
                const method = isEdit ? 'PUT' : 'POST';
                setSaveLoading(true, isEdit);

                try {
                    const response = await apiRequest(url, { method, body: buildPayload() });
                    showStatus(response.message || (isEdit ? 'Updated successfully.' : 'Created successfully.'), 'success');
                    closeModal();
                    table.ajax.reload(null, false);
                } catch (error) {
                    const payload = error?.payload || {};
                    if (payload.errors) {
                        setErrors(payload.errors);
                        return;
                    }
                    showStatus(payload.message || error.message || 'Unable to save record.', 'error');
                } finally {
                    setSaveLoading(false, isEdit);
                }
            }

            async function onTableAction(event) {
                const btn = event.target.closest('button[data-action]');
                if (!btn) return;

                const action = btn.getAttribute('data-action');
                const rowData = table.row($(btn).closest('tr')).data();
                const id = Number(btn.getAttribute('data-id') || rowData?.id || 0);
                if (!id) return;

                if (action === 'edit') {
                    openModal(true, rowData || null);
                    return;
                }

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

            let searchDebounce = null;
            els.search.addEventListener('input', function () {
                if (searchDebounce) clearTimeout(searchDebounce);
                searchDebounce = setTimeout(function () { table.ajax.reload(); }, 300);
            });

            els.searchBtn.addEventListener('click', function () { table.ajax.reload(); });
            els.statusFilter.addEventListener('change', function () { table.ajax.reload(); });
            els.resetBtn.addEventListener('click', function () {
                els.search.value = '';
                els.statusFilter.value = 'all';
                clearStatus();
                table.ajax.reload();
            });
            els.addBtn.addEventListener('click', function () { openModal(false, null); });
            els.cancelBtn.addEventListener('click', closeModal);
            els.modal.addEventListener('click', function (event) {
                if (event.target === els.modal) closeModal();
            });
            els.deleteModal.addEventListener('click', function (event) {
                if (event.target === els.deleteModal) closeDeleteModal();
            });
            els.deleteCard.addEventListener('click', function (event) {
                event.stopPropagation();
            });
            els.deleteCancelBtn.addEventListener('click', closeDeleteModal);
            els.deleteConfirmBtn.addEventListener('click', async function () {
                if (!pendingDeleteId) {
                    closeDeleteModal();
                    return;
                }
                clearStatus();
                try {
                    const response = await apiRequest(endpoints.base + '/' + pendingDeleteId, { method: 'DELETE' });
                    showStatus(response.message || 'Deleted successfully.', 'success');
                    closeDeleteModal();
                    table.ajax.reload(null, false);
                } catch (error) {
                    showStatus(error?.payload?.message || error.message || 'Unable to delete record.', 'error');
                    closeDeleteModal();
                }
            });

            els.ageGroup.addEventListener('input', function () { clearFieldError('age_group'); });
            els.title.addEventListener('input', function () { clearFieldError('title'); });
            els.playerTitle.addEventListener('input', function () { clearFieldError('player_title'); });
            els.minAge.addEventListener('input', function () { clearFieldError('min_age'); });
            els.maxAge.addEventListener('input', function () { clearFieldError('max_age'); });
            els.statusInput.addEventListener('change', function () { clearFieldError('status'); });

            els.form.addEventListener('submit', submitForm);
            document.getElementById('pm-table').addEventListener('click', onTableAction);

            initializeTable();
        })();
    </script>
    @endpush
</x-filament-panels::page>