@extends('layouts.state')

@section('title', 'Open Events')
@section('page-title', 'Open Event Registration')

@section('content')
<script>
    window.eventRegistrationData = {
        categories: @json($categories),
        sub_categories: @json($sub_categories),
        sub_cat_options: @json($sub_cat_options),
        weight_categories: @json($weight_categories),
        event_details: @json($event_details),
        event_id: {{ $event_details->id }},
        age_bars: @json($age_bars)
    };
    window.OPEN_EVENT_MODE = true;
    window.EVENT_GROUP_ID = 2;
    window.eventRegistrationGlobals = window.eventRegistrationData;
    window.eventRegistrationGlobals.allowed_category_ids = (window.eventRegistrationGlobals.allowed_category_ids || (Array.isArray(window.eventRegistrationGlobals.categories) ? window.eventRegistrationGlobals.categories.map(c=>String(c.id)) : []));
    // Expose quickly for any inline usage
    window.eventRegistrationGlobals.event_id = {{ $event_details->id }};
    window.eventRegistrationGlobals.age_bars = window.eventRegistrationGlobals.age_bars || [];
</script>
<div class="row g-2 align-items-center">
    <div class="col-md-12 col-12">
        <div class="d-flex align-items-center mb-2">
            <h5 class="card-title">Open Event: {{ $event_details->title }}</h5>
            <div id="eventUserBadges" class="d-flex align-items-center flex-wrap gap-2 ms-3"></div>
            <div class="ms-auto">
                <div class="d-flex gap-2">
                    <!-- Open events: quick search icon to open results modal -->
                    <button type="button" class="btn btn-sm btn-outline-primary" id="open_search_modal_btn" title="Search" data-bs-toggle="modal" data-bs-target="#registrationSearchResultsModal">
                        <i class="uil uil-search"></i>
                    </button>
                    <button type="button" class="btn btn-sm btn-outline-success" id="download_excel_btn">
                        <i class="uil uil-file-exclamation me-1"></i> Download Excel
                    </button>
                    <button type="button" class="btn btn-sm btn-outline-primary" data-bs-toggle="offcanvas" id="register_new_user" data-bs-target="#registerUserOffcanvas" aria-controls="registerUserOffcanvas">
                        <i class="uil uil-plus"></i> New User
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="row g-3">
    <div class="col-12">
        <div class="card border h-100">
            <div class="card-header border-bottom bg-body" id="accordion_main_card_header">
                <div class="d-flex align-items-center justify-content-between w-100">
                    <div class="small text-body-secondary"><i class="uil uil-database me-1"></i> Registered Users</div>
                    <!-- Search input moved to modal header for Open events -->
                    <div class="d-flex gap-2">
                        <button type="button" class="btn btn-sm btn-outline-secondary" id="expand_all_btn" title="Expand all"><i class="uil uil-plus-square me-1"></i>Expand All</button>
                        <button type="button" class="btn btn-sm btn-outline-secondary" id="collapse_all_btn" title="Collapse all"><i class="uil uil-minus-square me-1"></i>Collapse All</button>
                        <button type="button" class="btn btn-sm btn-outline-warning d-none" id="clearAccordionFilterHeaderBtn" title="Clear filter"><i class="uil uil-times me-1"></i>Clear Filter</button>
                    </div>
                </div>
            </div>
            <div class="card-body p-0">
                <div id="registeredUsersAccordionWrapper" class="position-relative" style="min-height:calc(100vh - 280px); max-height:calc(100vh - 280px); overflow:auto;">
                    <div id="registeredUsersAccordion" class="accordion"></div>
                </div>
            </div>
        </div>
    </div>
    
</div>

@include('state.events.register.partials.register_user_offcanvas')
@endsection

@section('footer_paginator')
    <!-- Open Events: No capacity target -> hide progress bar entirely -->
@endsection

@push('scripts')
<script src="https://cdn.sheetjs.com/xlsx-latest/package/dist/xlsx.full.min.js"></script>
<script src="/vendors/sweetalert2/sweetalert2.all.min.js"></script>
{{-- Load Open-specific restrictions FIRST so they override the defaults --}}
<script src="/js/pages/state/event/register/open/register_event_restrictions.js?v=1769248520"></script>
{{-- Load Open copies first (kept in sync with official) --}}
<script src="/js/pages/state/event/register/open/register_event_users.utils.js?v=1769248520"></script>
<script src="/js/pages/state/event/register/open/register_event_users.composition.js?v=1769248520"></script>
{{-- Modularized helpers: accordion state + visualization/metrics --}}
<script src="/js/pages/state/event/register/open/modules/accordion_state.js?v=1769248520"></script>
<script src="/js/pages/state/event/register/open/modules/visualization_metrics.js?v=1769248520"></script>
<!-- Date utils (polyfills for formatHumanDate etc.) -->
<script src="/js/pages/state/event/register/open/modules/date_utils.js?v=1769248520"></script>

<!-- Renderers & tables extracted into modules -->
<script src="/js/pages/state/event/register/open/modules/participants_table.js?v=1769248520"></script>
<script src="/js/pages/state/event/register/open/modules/renderer_common.js?v=1769248520"></script>
<script src="/js/pages/state/event/register/open/modules/renderer_open_batched.js?v=1769248520"></script>


<script src="/js/pages/state/event/register/open/register_event_users.js?v=1769248520"></script>
<script src="/js/pages/state/event/register/open/register_event_users_export.js?v=1769248520"></script>

<script src="/js/pages/state/event/register/open/register_event_users_overrides.js?v=1769248520"></script>

<!-- Inline helpers for Open events: ensure badges render & provide search modal -->
<script>
document.addEventListener('DOMContentLoaded', function(){
        // Ensure badges render at least once on initial load
        try { if (typeof window.renderEventUserBadges === 'function') { window.renderEventUserBadges(); } } catch(e){}

        // Search wiring
    const input = document.getElementById('regSearchInput');
    const btn = document.getElementById('regSearchBtn');

        function catName(cid){
                const cats = (window.eventRegistrationGlobals?.categories)||[];
                const m = cats.find(c=>String(c.id)===String(cid));
                return (m?.name)||('Category '+cid);
        }
        function subName(sid){
                if(String(sid)==='1') return 'Kyorugi';
                if(String(sid)==='2') return 'Poomsae';
                return '—';
        }
        function optName(u){
                return u.sub_category_option_name || u.sub_cat_option_name || (String(u.sub_category_id)==='1' ? (parseInt(u.gender)===1?'Male':'Female') : '—');
        }
        function uidOf(u){ return u.reg_uid || u.user_uid || u.uid || ''; }

    function doSearch(){
        const qRaw = (input?.value||'').trim();
        const q = qRaw.toLowerCase();
                if(!q){ return openSearchResults([]); }
                const users = (window.registeredEventUsersData && Array.isArray(window.registeredEventUsersData.users)) ? window.registeredEventUsersData.users : [];
                const results = users.filter(u=>{
                        const name = (u.full_name||u.name||'').toString().toLowerCase();
                        const uid = uidOf(u).toString().toLowerCase();
                        return name.includes(q) || uid.includes(q);
                }).map(u=>({
                        name: (u.full_name||u.name||'').toString(),
                        uid: uidOf(u),
                        category: catName(u.category_id),
                        sub: subName(u.sub_category_id),
                        option: optName(u)
        }));
        openSearchResults(results, qRaw);
        }

    function escapeHtml(s){
        return (s||'').toString().replace(/[&<>"']/g, m=>({"&":"&amp;","<":"&lt;",">":"&gt;","\"":"&quot;","'":"&#39;"}[m]));
    }
    function openSearchResults(rows, qRaw=''){
                const modalEl = document.getElementById('registrationSearchResultsModal');
                if(!modalEl) return;
                const tbody = modalEl.querySelector('tbody');
                tbody.innerHTML = '';
        const query = (qRaw||'').trim();
        let re = null;
        if (query) {
            const escaped = query.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
            try { re = new RegExp(escaped, 'ig'); } catch(e){ re = null; }
        }
        const hilite = (text) => {
            const safe = escapeHtml(text||'');
            if (!re) return safe;
            return safe.replace(re, (m)=>`<mark>${escapeHtml(m)}</mark>`);
        };
                if(rows.length===0){
                        const tr = document.createElement('tr');
                        const td = document.createElement('td'); td.colSpan = 5; td.className = 'text-center text-body-secondary'; td.textContent = 'No matches';
                        tr.appendChild(td); tbody.appendChild(tr);
                } else {
                        rows.forEach((r,i)=>{
                                const tr = document.createElement('tr');
                tr.innerHTML = `
                    <td class="text-body-secondary">${i+1}</td>
                    <td>${hilite(r.uid||'—')}</td>
                    <td>${hilite(r.name)}</td>
                    <td>${hilite(r.category)}</td>
                    <td>${hilite(`${r.sub} › ${r.option}`)}</td>
                `;
                                tbody.appendChild(tr);
                        });
                }
                const inst = bootstrap.Modal.getOrCreateInstance(modalEl);
                inst.show();
        // Focus the input when modal opens
        setTimeout(()=>{ try { document.getElementById('regSearchInput')?.focus(); } catch(e){} }, 150);
        }

    if(btn){ btn.addEventListener('click', doSearch); }
    if(input){ input.addEventListener('keydown', e=>{ if(e.key==='Enter'){ e.preventDefault(); doSearch(); } }); }

    // --- Non-destructive accordion filter ---
    let currentAccordionFilterQuery = '';
    function clearMarks(container){
        try {
            container.querySelectorAll('mark').forEach(m=>{ const t=document.createTextNode(m.textContent); m.replaceWith(t); });
        } catch(e){}
    }
    function highlightCell(td, query){
        if (!td || !query) return;
        const raw = td.textContent;
        const esc = query.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
        try {
            td.innerHTML = raw.replace(new RegExp(esc, 'ig'), (m)=>`<mark>${m}</mark>`);
        } catch(e){ td.textContent = raw; }
    }
    function applyAccordionFilter(query){
        const acc = document.getElementById('registeredUsersAccordion');
        if (!acc) return;
        const q = (query||'').trim();
        currentAccordionFilterQuery = q;
        // Reset any previous state
        acc.querySelectorAll('.d-none.search-hidden').forEach(el=>{ el.classList.remove('d-none','search-hidden'); });
        clearMarks(acc);
        // Empty query => nothing to filter
        if (!q){
            document.getElementById('clearAccordionFilterHeaderBtn')?.classList.add('d-none');
            return;
        }
        const qlc = q.toLowerCase();
        // Row-level filter
        acc.querySelectorAll('tr.participant-row').forEach(tr => {
            const uidTd = tr.querySelector('td:nth-child(2)');
            const nameTd = tr.querySelector('td:nth-child(3)');
            const uid = (uidTd?.textContent||'').toLowerCase();
            const name = (nameTd?.textContent||'').toLowerCase();
            const match = uid.includes(qlc) || name.includes(qlc);
            if (!match){ tr.classList.add('d-none','search-hidden'); }
            else { highlightCell(uidTd, q); highlightCell(nameTd, q); }
        });
        // Hide empty participant-table wrappers
        acc.querySelectorAll('.participant-table-wrapper').forEach(w => {
            const anyVisible = w.querySelector('tbody tr.participant-row:not(.d-none)');
            if (!anyVisible){ w.classList.add('d-none','search-hidden'); }
        });
        // Hide option/sub/category accordion-items with no visible rows
        acc.querySelectorAll('.accordion-item').forEach(item => {
            const hasVisible = item.querySelector('tbody tr.participant-row:not(.d-none)');
            if (!hasVisible){ item.classList.add('d-none','search-hidden'); }
        });
        // Show the header Clear Filter button
        document.getElementById('clearAccordionFilterHeaderBtn')?.classList.remove('d-none');

        // Auto-open and scroll to the first matched row for quick navigation
        setTimeout(()=>{
            try {
                const wrapper = document.getElementById('registeredUsersAccordionWrapper');
                const first = acc.querySelector('tr.participant-row:not(.d-none)');
                if (!first || !wrapper) return;
                // Open all ancestor accordion-collapse elements
                let node = first.parentElement;
                while (node) {
                    if (node.classList && node.classList.contains('accordion-collapse')) {
                        node.classList.add('show');
                        const btn = node.previousElementSibling ? node.previousElementSibling.querySelector('.accordion-button') : null;
                        if (btn){ btn.classList.remove('collapsed'); btn.setAttribute('aria-expanded','true'); }
                    }
                    node = node.parentElement;
                }
                // Scroll within the wrapper to bring the row into view
                const rowRect = first.getBoundingClientRect();
                const wrapRect = wrapper.getBoundingClientRect();
                const offset = (rowRect.top - wrapRect.top) + wrapper.scrollTop - 40; // small top padding
                wrapper.scrollTo({ top: Math.max(0, offset), behavior: 'smooth' });
            } catch(e){ /* noop */ }
        }, 50);
    }
    function clearAccordionFilter(){
        const acc = document.getElementById('registeredUsersAccordion');
        if (!acc) return;
        acc.querySelectorAll('.search-hidden').forEach(el=> el.classList.remove('search-hidden'));
        acc.querySelectorAll('.d-none').forEach(el=> el.classList.remove('d-none'));
        clearMarks(acc);
        currentAccordionFilterQuery = '';
        document.getElementById('clearAccordionFilterHeaderBtn')?.classList.add('d-none');
    }
    document.getElementById('clearAccordionFilterHeaderBtn')?.addEventListener('click', clearAccordionFilter);
    // Modal controls
    document.getElementById('applyAccordionFilterBtn')?.addEventListener('click', function(){
        const q = (document.getElementById('regSearchInput')?.value||'').trim();
        applyAccordionFilter(q);
        try { bootstrap.Modal.getInstance(document.getElementById('registrationSearchResultsModal'))?.hide(); } catch(e){}
    });
    document.getElementById('clearAccordionFilterBtn')?.addEventListener('click', function(){
        clearAccordionFilter();
    });
    // Reset toggle state on modal show
    document.getElementById('registrationSearchResultsModal')?.addEventListener('shown.bs.modal', function(){
        // no-op for now
    });
});
</script>

<!-- Results Modal: Category path table -->
<div class="modal fade" id="registrationSearchResultsModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-scrollable">
        <div class="modal-content">
            <div class="modal-header d-flex align-items-center gap-2">
                <h5 class="modal-title me-2 mb-0"><i class="uil uil-search me-2"></i>Search</h5>
                <div class="ms-auto" style="min-width: 340px;">
                        <div class="input-group input-group-sm">
                                <input id="regSearchInput" type="text" class="form-control" placeholder="Search name or UID" aria-label="Search name or UID">
                                <button class="btn btn-outline-primary" type="button" id="regSearchBtn" title="Search">
                                        <i class="uil uil-search"></i>
                                </button>
                        </div>
                </div>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body p-3">
                <div class="table-responsive">
                    <table class="table table-sm table-striped align-middle mb-0">
                        <thead class="table-light">
                            <tr>
                                <th style="width:40px;">#</th>
                                <th style="width:160px;">UID</th>
                                <th>Name</th>
                                <th>Category</th>
                                <th>Path</th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>
            </div>
            <div class="modal-footer flex-column flex-sm-row justify-content-between align-items-center gap-2">
                <div class="form-check form-switch mb-0">
                    <input class="form-check-input" type="checkbox" id="applyAccordionFilterToggle" checked disabled>
                    <label class="form-check-label" for="applyAccordionFilterToggle">Apply search as on-page filter</label>
                </div>
                <div class="ms-sm-auto d-flex gap-2">
                    <button type="button" class="btn btn-outline-secondary" id="clearAccordionFilterBtn">Clear Filter</button>
                    <button type="button" class="btn btn-primary" id="applyAccordionFilterBtn">Apply Filter</button>
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
</div>

@endpush