@include('components.header')

<style>
    /* ========== Theme Variables & Fonts ========== */
    :root {
        --rs-primary-gradient: linear-gradient(135deg, var(--primary-theme-color, #11315b) 0%, #0f172a 100%);
    }

    /* ========== Layout Container ========== */
    .rs-container {
        max-width: 1200px;
        margin: 0 auto;
        padding: 2rem;
    }

    /* ========== Main Card ========== */
    .rs-card-main {
        background: #ffffff;
        border-radius: 16px;
        box-shadow: 0 20px 60px -12px rgba(0, 0, 0, 0.15);
        overflow: hidden;
    }

    .rs-header {
        background: var(--rs-primary-gradient);
        color: #ffffff;
        padding: 2.5rem 2rem;
        position: relative;
        overflow: hidden;
    }

    .rs-header::before {
        content: '';
        position: absolute;
        top: -50%;
        right: -20%;
        width: 300px;
        height: 300px;
        background: rgba(255, 255, 255, 0.04);
        border-radius: 50%;
        pointer-events: none;
    }

    .rs-header h1 {
        font-size: 1.75rem;
        font-weight: 800;
        letter-spacing: 0.025em;
        margin: 0;
        position: relative;
        z-index: 1;
    }

    .rs-header p {
        font-size: 0.875rem;
        opacity: 0.85;
        margin-top: 0.5rem;
        position: relative;
        z-index: 1;
    }

    /* ========== Table Styling ========== */
    .rs-table-container {
        padding: 2rem;
        overflow-x: auto;
    }

    .rs-table {
        width: 100%;
        border-collapse: collapse;
        text-align: left;
    }

    .rs-table th {
        background-color: #f8fafc;
        color: #475569;
        font-weight: 700;
        font-size: 0.75rem;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        padding: 1rem 1.5rem;
        border-bottom: 2px solid #e2e8f0;
    }

    .rs-table td {
        padding: 1rem 1.5rem;
        border-bottom: 1px solid #f1f5f9;
        color: #334155;
        font-size: 0.875rem;
    }

    .rs-table tr:hover {
        background-color: #f8fafc;
    }

    /* ========== Buttons ========== */
    .rs-btn {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 0.625rem 1.25rem;
        border-radius: 8px;
        font-weight: 600;
        font-size: 0.875rem;
        cursor: pointer;
        transition: all 0.2s ease;
        border: none;
    }

    .rs-btn-primary {
        background-color: var(--primary-theme-color, #11315b);
        color: #ffffff;
    }

    .rs-btn-primary:hover {
        opacity: 0.9;
        transform: translateY(-1px);
    }

    .rs-btn-danger {
        background-color: #ef4444;
        color: #ffffff;
    }

    .rs-btn-danger:hover {
        background-color: #dc2626;
    }

    .rs-btn-secondary {
        background-color: #64748b;
        color: #ffffff;
    }

    .rs-btn-secondary:hover {
        background-color: #475569;
    }

    .rs-btn-icon {
        padding: 0.5rem;
        border-radius: 6px;
        background-color: #f1f5f9;
        color: #475569;
    }

    .rs-btn-icon:hover {
        background-color: #e2e8f0;
        color: #1e293b;
    }

    /* ========== Modal Popup ========== */
    .rs-modal-overlay {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(15, 23, 42, 0.6);
        backdrop-filter: blur(4px);
        z-index: 100;
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.3s ease;
    }

    .rs-modal-overlay.open {
        opacity: 1;
        pointer-events: auto;
    }

    .rs-modal {
        background-color: #ffffff;
        border-radius: 16px;
        width: 100%;
        max-width: 600px;
        box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
        overflow: hidden;
        transform: translateY(20px);
        transition: transform 0.3s ease;
    }

    .rs-modal-overlay.open .rs-modal {
        transform: translateY(0);
    }

    .rs-modal-header {
        background-color: #f8fafc;
        padding: 1.25rem 1.5rem;
        border-bottom: 1px solid #e2e8f0;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .rs-modal-header h3 {
        font-size: 1.125rem;
        font-weight: 700;
        color: #1e293b;
        margin: 0;
    }

    .rs-modal-body {
        padding: 1.5rem;
        max-height: 70vh;
        overflow-y: auto;
    }

    .rs-form-group {
        margin-bottom: 1.25rem;
    }

    .rs-form-group label {
        display: block;
        font-size: 0.875rem;
        font-weight: 600;
        color: #475569;
        margin-bottom: 0.5rem;
    }

    .rs-form-control {
        width: 100%;
        padding: 0.75rem 1rem;
        border: 2px solid #e2e8f0;
        border-radius: 10px;
        font-size: 0.925rem;
        transition: all 0.25s ease;
        color: #1e293b;
    }

    .rs-form-control:focus {
        outline: none;
        border-color: var(--primary-theme-color, #11315b);
        box-shadow: 0 0 0 3px rgba(17, 49, 91, 0.15);
    }

    .rs-modal-footer {
        padding: 1.25rem 1.5rem;
        background-color: #f8fafc;
        border-top: 1px solid #e2e8f0;
        display: flex;
        justify-content: flex-end;
        gap: 0.75rem;
    }

    /* ========== Empty / Loading / Status States ========== */
    .rs-empty-state {
        text-align: center;
        padding: 4rem 2rem;
        color: #64748b;
    }

    .rs-empty-state i {
        font-size: 3rem;
        color: #cbd5e1;
        margin-bottom: 1rem;
    }

    .rs-empty-state p {
        font-size: 1rem;
        margin-bottom: 1.5rem;
    }

    /* ========== League buttons ========== */
    .league-btn {
        padding: 0.5rem 1rem;
        background-color: #f1f5f9;
        color: #334155;
        border-radius: 8px;
        font-size: 0.875rem;
        font-weight: 600;
        border: 1px solid #e2e8f0;
        transition: all 0.2s ease;
        cursor: pointer;
    }

    .league-btn:hover {
        background-color: #e2e8f0;
    }

    .league-btn.active {
        background-color: var(--primary-theme-color, #11315b);
        color: #ffffff;
        border-color: var(--primary-theme-color, #11315b);
    }
</style>

<div class="rs-container">
    <div class="rs-card-main">
        <!-- Header -->
        <div class="rs-header">
            <h1 id="rs-page-title">Registration Sets</h1>
            <p>List and configure active Registration Sets.</p>
        </div>

        <!-- Table / Content Area -->
        <div class="rs-table-container">
            <!-- Loading Indicator -->
            <div id="rs-loading-view" class="flex flex-col items-center justify-center py-16">
                <i class="fa-solid fa-circle-notch fa-spin text-4xl text-blue-600 mb-3" style="--primary-theme-color: #11315b; color: var(--primary-theme-color);"></i>
                <p class="text-gray-500 font-medium">Loading registration sets...</p>
            </div>

            <table class="rs-table hidden" id="rs-list-table">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>Name</th>
                        <th>Description</th>
                        <th>Status</th>
                        <th>Order</th>
                        <th>Registration Link</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody id="rs-list-tbody">
                    <!-- Loaded dynamically -->
                </tbody>
            </table>

            <div id="rs-empty-view" class="rs-empty-state hidden">
                <i class="fa-solid fa-folder-open"></i>
                <p>No registration sets found.</p>
            </div>

            <!-- Add Button Below the Table -->
            <div class="flex justify-end mt-6">
                <button class="rs-btn rs-btn-primary" onclick="openAddModal()">
                    <i class="fa-solid fa-plus"></i> Add Registration Set
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Add/Create Popup Modal -->
<div class="rs-modal-overlay" id="add-modal-overlay">
    <div class="rs-modal">
        <div class="rs-modal-header">
            <h3 id="modal-title">Create Registration Set</h3>
            <button class="text-gray-400 hover:text-gray-600" onclick="closeAddModal()">
                <i class="fa-solid fa-xmark text-lg"></i>
            </button>
        </div>
        <div class="rs-modal-body">
            <input type="hidden" id="edit-set-id" value="" />
            
            <div class="rs-form-group">
                <label for="rs-name">Name</label>
                <input type="text" id="rs-name" class="rs-form-control" placeholder="Enter Registration Set Name" />
            </div>
            <div class="rs-form-group">
                <label for="rs-description">Description</label>
                <textarea id="rs-description" class="rs-form-control" rows="3" placeholder="Enter Description"></textarea>
            </div>
            <div class="rs-form-group">
                <label for="rs-order">Order</label>
                <input type="number" id="rs-order" class="rs-form-control" placeholder="Enter display order (e.g. 1)" />
            </div>
            <div class="rs-form-group flex items-center gap-2 mt-2">
                <input type="checkbox" id="rs-disabled" class="w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500 cursor-pointer" />
                <label for="rs-disabled" class="text-sm font-semibold text-gray-700 cursor-pointer select-none">Disabled</label>
            </div>

            <!-- List of currently included forms (visible in Edit mode) -->
            <div id="included-forms-section" class="rs-form-group border-t border-gray-100 pt-4 mt-4 hidden">
                <label class="block font-semibold text-gray-700 text-sm mb-2">Included Forms</label>
                <div id="included-forms-container" class="flex flex-wrap gap-1.5 p-3 bg-gray-50 border border-gray-200 rounded-lg min-h-[48px]">
                    <!-- Badges of selected forms will be generated here -->
                </div>
            </div>

            <!-- League and Forms selector -->
            <div id="league-forms-selector-section" class="border-t border-gray-100 pt-4 mt-4">
                <div class="rs-form-group">
                    <label>Select League</label>
                    <div id="rs-leagues-container" class="flex flex-wrap gap-2 mt-2">
                        <!-- Loaded dynamically -->
                    </div>
                </div>

                <div class="rs-form-group">
                    <label>Select Forms to Include</label>
                    <div id="rs-forms-container" class="space-y-2 mt-2 max-h-48 overflow-y-auto border border-gray-200 p-3 rounded-lg bg-gray-50">
                        <p class="text-xs text-gray-400">Select a league to see available registration forms.</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="rs-modal-footer">
            <button class="rs-btn rs-btn-danger" onclick="closeAddModal()">Back</button>
            <button class="rs-btn rs-btn-primary bg-green-600 hover:bg-green-700" id="save-btn" onclick="submitCreateOrUpdateSet()">Create</button>
        </div>
    </div>
</div>

<script>
    const authOrganisation = localStorage.getItem('organisation');
    const authToken = localStorage.getItem('authToken');
    const apiEndpoint = "{{ config('api.url') }}/graphql/registration";
    const formBuilderEndpoint = "{{ config('api.url') }}/graphql/registrationFormBuilder";

    let registrationSets = [];
    let leaguesList = [];
    let activeLeagueId = null;
    let selectedFormIds = new Set();
    let selectedFormsMap = {}; // mapping form_id -> form_name for current set

    document.addEventListener('DOMContentLoaded', async () => {
        await loadLeagues();
        loadRegistrationSets();
    });

    async function loadLeagues() {
        if (!authOrganisation || !authToken) return;
        try {
            const query = `
                query FetchAllLeaguesAndSeasons {
                    fetchAllLeaguesAndSeasons {
                        leagues {
                            id
                            name
                        }
                    }
                }
            `;
            const response = await fetch(formBuilderEndpoint, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-Token': authToken,
                    'X-Organisation': authOrganisation
                },
                body: JSON.stringify({ query })
            });
            const json = await response.json();
            if (json.data && json.data.fetchAllLeaguesAndSeasons) {
                leaguesList = json.data.fetchAllLeaguesAndSeasons.leagues || [];
            }
        } catch (e) {
            console.error('Error fetching leagues:', e);
        }
    }

    async function loadRegistrationSets() {
        // Show loader
        document.getElementById('rs-loading-view').classList.remove('hidden');
        document.getElementById('rs-list-table').classList.add('hidden');
        document.getElementById('rs-empty-view').classList.add('hidden');

        try {
            let apiSets = [];
            
            // Fetch from server API
            if (authOrganisation && authToken) {
                const query = `
                    query FetchRegistrationSets {
                        fetchRegistrationSets(include_disabled: true, include_forms: true, include_form_pages: false) {
                            id
                            name
                            description
                            disabled
                            rs_order
                            global_page_toggle
                            global_level_select
                            forms
                        }
                    }
                `;

                const response = await fetch(apiEndpoint, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-Organisation': authOrganisation,
                        'X-Token': authToken,
                    },
                    body: JSON.stringify({ query })
                });

                const result = await response.json();
                if (result.data && result.data.fetchRegistrationSets) {
                    apiSets = result.data.fetchRegistrationSets;
                }
            }

            registrationSets = apiSets;
            renderTable();
        } catch (error) {
            console.error('Error loading registration sets:', error);
            registrationSets = [];
            renderTable();
        } finally {
            // Hide loader
            document.getElementById('rs-loading-view').classList.add('hidden');
        }
    }

    function renderTable() {
        const tbody = document.getElementById('rs-list-tbody');
        const emptyView = document.getElementById('rs-empty-view');
        const table = document.getElementById('rs-list-table');

        tbody.innerHTML = '';

        if (registrationSets.length === 0) {
            table.classList.add('hidden');
            emptyView.classList.remove('hidden');
            return;
        }

        table.classList.remove('hidden');
        emptyView.classList.add('hidden');

        registrationSets.forEach(set => {
            const setId = set.id || set.registration_set_id;
            const setName = set.name || set.registration_set_name || 'Registration Set';
            const setDesc = set.description || '';
            const setOrder = set.rs_order || 0;
            const isSetDisabled = set.disabled === 1 || set.disabled === true;
            const statusText = isSetDisabled 
                ? '<span class="inline-block bg-red-100 text-red-800 text-xs px-2.5 py-0.5 rounded-full font-bold">Disabled</span>' 
                : '<span class="inline-block bg-green-100 text-green-800 text-xs px-2.5 py-0.5 rounded-full font-bold">Active</span>';

            // Construct registration link
            const regLink = `${window.location.origin}${window.APP_PREFIX || '/user-dashboard'}/registrations?reg_set=${setId}&reset=1`;

            const tr = document.createElement('tr');
            tr.innerHTML = `
                <td class="font-bold text-gray-900">${setId}</td>
                <td class="font-semibold">${setName}</td>
                <td class="text-gray-500 max-w-xs truncate" title="${setDesc}">${setDesc}</td>
                <td>${statusText}</td>
                <td>${setOrder}</td>
                <td class="max-w-xs truncate">
                    <a href="${regLink}" target="_blank" class="text-blue-600 hover:underline">${regLink}</a>
                </td>
                <td class="flex items-center gap-2">
                    <button class="rs-btn-icon text-blue-600 hover:text-blue-800 hover:bg-blue-50" onclick="openEditModal('${setId}')" title="Edit Registration Set">
                        <i class="fa-solid fa-pen-to-square"></i>
                    </button>
                    <button class="rs-btn-icon text-red-600 hover:text-red-800 hover:bg-red-50" onclick="deleteRegistrationSet('${setId}')" title="Delete Registration Set">
                        <i class="fa-solid fa-trash-can"></i>
                    </button>
                </td>
            `;
            tbody.appendChild(tr);
        });
    }

    function openAddModal() {
        document.getElementById('modal-title').textContent = 'Create Registration Set';
        document.getElementById('edit-set-id').value = '';
        document.getElementById('rs-name').value = '';
        document.getElementById('rs-description').value = '';
        document.getElementById('rs-order').value = '';
        document.getElementById('rs-disabled').checked = false;
        
        // Hide league, forms & included list section in Create mode
        document.getElementById('league-forms-selector-section').classList.add('hidden');
        document.getElementById('included-forms-section').classList.add('hidden');
        document.getElementById('save-btn').textContent = 'Create';

        document.getElementById('add-modal-overlay').classList.add('open');
    }

    async function openEditModal(id) {
        const set = registrationSets.find(s => (s.id == id || s.registration_set_id == id));
        if (!set) return;

        document.getElementById('modal-title').textContent = 'Edit Registration Set';
        document.getElementById('edit-set-id').value = id;
        document.getElementById('rs-name').value = set.name || set.registration_set_name || '';
        document.getElementById('rs-description').value = set.description || '';
        document.getElementById('rs-order').value = set.rs_order || '';
        document.getElementById('rs-disabled').checked = (set.disabled == 1 || set.disabled == true);

        // Show league, forms & included list section in Edit mode
        document.getElementById('league-forms-selector-section').classList.remove('hidden');
        document.getElementById('included-forms-section').classList.remove('hidden');
        document.getElementById('save-btn').textContent = 'Save';

        // Set up active forms selection
        selectedFormIds = new Set((set.forms || []).map(f => parseInt(f.form_id)));
        selectedFormsMap = {};
        (set.forms || []).forEach(f => {
            selectedFormsMap[parseInt(f.form_id)] = f.form_name;
        });

        // Update badges showing currently selected forms
        updateIncludedFormsBadges();

        // Render leagues selection
        renderLeaguesSelection();

        document.getElementById('add-modal-overlay').classList.add('open');
    }

    function updateIncludedFormsBadges() {
        const container = document.getElementById('included-forms-container');
        container.innerHTML = '';

        const formIds = Array.from(selectedFormIds);
        if (formIds.length === 0) {
            container.innerHTML = '<span class="text-xs text-gray-400">No forms currently selected.</span>';
            return;
        }

        formIds.forEach(id => {
            const name = selectedFormsMap[id] || `Form #${id}`;
            const badge = document.createElement('span');
            badge.className = 'inline-flex items-center gap-1 bg-blue-50 text-blue-700 text-xs px-2.5 py-1 rounded border border-blue-100 font-semibold';
            badge.innerHTML = `
                ${name}
                <button type="button" class="text-blue-400 hover:text-blue-600 font-bold ml-1" onclick="removeFormFromSet(${id})">&times;</button>
            `;
            container.appendChild(badge);
        });
    }

    function removeFormFromSet(id) {
        selectedFormIds.delete(id);
        delete selectedFormsMap[id];

        // If currently displaying this form check-box, uncheck it
        const checkbox = document.getElementById(`form-check-${id}`);
        if (checkbox) checkbox.checked = false;

        updateIncludedFormsBadges();
    }

    function renderLeaguesSelection() {
        const container = document.getElementById('rs-leagues-container');
        container.innerHTML = '';

        if (leaguesList.length === 0) {
            container.innerHTML = '<p class="text-xs text-gray-400">No leagues available</p>';
            return;
        }

        leaguesList.forEach(league => {
            const btn = document.createElement('button');
            btn.className = `league-btn ${activeLeagueId == league.id ? 'active' : ''}`;
            btn.textContent = league.name;
            btn.onclick = () => selectLeague(league.id);
            container.appendChild(btn);
        });

        // Trigger first league load if active league is not set
        if (!activeLeagueId && leaguesList.length > 0) {
            selectLeague(leaguesList[0].id);
        } else if (activeLeagueId) {
            selectLeague(activeLeagueId);
        }
    }

    async function selectLeague(leagueId) {
        activeLeagueId = leagueId;
        
        // Highlight active league button
        const buttons = document.querySelectorAll('.league-btn');
        buttons.forEach(btn => btn.classList.remove('active'));
        
        // Find clicked button to add active class
        const clickedBtn = Array.from(buttons).find(b => b.textContent === leaguesList.find(l => l.id == leagueId).name);
        if (clickedBtn) clickedBtn.classList.add('active');

        // Fetch forms for league
        const formsContainer = document.getElementById('rs-forms-container');
        formsContainer.innerHTML = `
            <div class="flex items-center gap-2 text-xs text-gray-400">
                <i class="fa-solid fa-spinner fa-spin"></i> Loading forms...
            </div>
        `;

        try {
            const query = `
                query FetchAllRegistrationFormsByUsingLeagueID($league_id: Int!) {
                    fetchAllRegistrationFormsByUsingLeagueID(league_id: $league_id) {
                        registration_forms {
                            form_id
                            form_name
                        }
                    }
                }
            `;
            const response = await fetch(formBuilderEndpoint, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-Token': authToken,
                    'X-Organisation': authOrganisation
                },
                body: JSON.stringify({
                    query,
                    variables: { league_id: parseInt(leagueId) }
                })
            });
            const json = await response.json();
            
            formsContainer.innerHTML = '';
            if (json.data && json.data.fetchAllRegistrationFormsByUsingLeagueID) {
                const forms = json.data.fetchAllRegistrationFormsByUsingLeagueID.registration_forms || [];
                
                if (forms.length === 0) {
                    formsContainer.innerHTML = '<p class="text-xs text-gray-400">No forms available for this league.</p>';
                    return;
                }

                forms.forEach(form => {
                    const fId = parseInt(form.form_id);
                    const div = document.createElement('div');
                    div.className = 'flex items-center gap-2 py-1';
                    
                    const checked = selectedFormIds.has(fId) ? 'checked' : '';
                    
                    div.innerHTML = `
                        <input type="checkbox" id="form-check-${fId}" class="w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500 cursor-pointer form-select-checkbox" 
                               data-id="${fId}" data-name="${form.form_name}" ${checked} onchange="toggleFormSelection(this)" />
                        <label for="form-check-${fId}" class="text-sm text-gray-700 cursor-pointer select-none">${form.form_name}</label>
                    `;
                    formsContainer.appendChild(div);
                });
            } else {
                formsContainer.innerHTML = '<p class="text-xs text-gray-400">Failed to load forms.</p>';
            }
        } catch (e) {
            console.error(e);
            formsContainer.innerHTML = '<p class="text-xs text-gray-400 text-red-500">Error loading forms.</p>';
        }
    }

    function toggleFormSelection(checkbox) {
        const id = parseInt(checkbox.getAttribute('data-id'));
        const name = checkbox.getAttribute('data-name');
        
        if (checkbox.checked) {
            selectedFormIds.add(id);
            selectedFormsMap[id] = name;
        } else {
            selectedFormIds.delete(id);
            delete selectedFormsMap[id];
        }

        updateIncludedFormsBadges();
    }

    function closeAddModal() {
        document.getElementById('add-modal-overlay').classList.remove('open');
    }

    async function submitCreateOrUpdateSet() {
        const editId = document.getElementById('edit-set-id').value;
        const name = document.getElementById('rs-name').value.trim();
        const description = document.getElementById('rs-description').value.trim();
        const orderVal = document.getElementById('rs-order').value.trim();
        const disabledVal = document.getElementById('rs-disabled').checked ? 1 : 0;

        if (!name) {
            showAlert('Name is required!', 'error');
            return;
        }

        const formIds = Array.from(selectedFormIds).map(id => parseInt(id));

        const query = `
            mutation SaveRegistrationSet($id: Int, $name: String!, $description: String, $rs_order: Int, $disabled: Int, $form_ids: [Int]) {
                saveRegistrationSet(id: $id, name: $name, description: $description, rs_order: $rs_order, disabled: $disabled, form_ids: $form_ids) {
                    success
                    message
                    id
                }
            }
        `;

        try {
            const response = await fetch(apiEndpoint, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-Token': authToken,
                    'X-Organisation': authOrganisation
                },
                body: JSON.stringify({
                    query,
                    variables: {
                        id: editId ? parseInt(editId) : null,
                        name: name,
                        description: description,
                        rs_order: parseInt(orderVal) || 1,
                        disabled: disabledVal,
                        form_ids: formIds
                    }
                })
            });

            const result = await response.json();
            
            if (result.errors) {
                showAlert(result.errors[0].message || 'Failed to save registration set.', 'error');
                return;
            }

            const data = result.data.saveRegistrationSet;
            if (data && data.success) {
                showAlert(data.message, 'success');
                closeAddModal();
                loadRegistrationSets();
            } else {
                showAlert((data && data.message) || 'Failed to save registration set.', 'error');
            }
        } catch (error) {
            console.error('Error saving registration set:', error);
            showAlert('An error occurred while saving.', 'error');
        }
    }

    function deleteRegistrationSet(id) {
        Swal.fire({
            title: 'Are you sure?',
            text: 'You will delete this Registration Set!',
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#ef4444',
            cancelButtonColor: '#64748b',
            confirmButtonText: 'Yes, delete it!'
        }).then(async (result) => {
            if (result.isConfirmed) {
                const query = `
                    mutation DeleteRegistrationSet($id: Int!) {
                        deleteRegistrationSet(id: $id) {
                            success
                            message
                        }
                    }
                `;

                try {
                    const response = await fetch(apiEndpoint, {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'X-Token': authToken,
                            'X-Organisation': authOrganisation
                        },
                        body: JSON.stringify({
                            query,
                            variables: { id: parseInt(id) }
                        })
                    });
                    
                    const result = await response.json();
                    
                    if (result.errors) {
                        showAlert(result.errors[0].message || 'Failed to delete set.', 'error');
                        return;
                    }

                    const data = result.data.deleteRegistrationSet;
                    if (data && data.success) {
                        showAlert(data.message, 'success');
                        loadRegistrationSets();
                    } else {
                        showAlert((data && data.message) || 'Failed to delete set.', 'error');
                    }
                } catch (e) {
                    console.error(e);
                    showAlert('An error occurred during deletion.', 'error');
                }
            }
        });
    }

    function copyToClipboard(text) {
        navigator.clipboard.writeText(text).then(() => {
            showAlert('Link copied to clipboard!', 'success');
        }).catch(err => {
            console.error('Failed to copy link:', err);
            showAlert('Failed to copy link', 'error');
        });
    }
</script>