@extends('layouts.state')

@php
    // Detect event type and badges based on participant_slot_limit
    $participantSlotLimit = $event_details->participant_slot_limit ?? 1;
    $isMultiSlot = $participantSlotLimit > 1;
    $isFederationCup = $participantSlotLimit === 4;
    
    // Determine event type name and badge
    if ($isFederationCup) {
        $eventTypeName = 'Federation Cup';
        $badgeClass = 'bg-warning';
        $badgeIcon = 'uil-trophy';
    } elseif ($isMultiSlot) {
        $eventTypeName = 'Multi-Slot Event (' . $participantSlotLimit . ')';
        $badgeClass = 'bg-info';
        $badgeIcon = 'uil-users-alt';
    } elseif ((int)$event_details->group_id === 1) {
        $eventTypeName = 'Official Event';
        $badgeClass = 'bg-primary';
        $badgeIcon = 'uil-award';
    } elseif ((int)$event_details->group_id === 2) {
        $eventTypeName = 'Open Event';
        $badgeClass = 'bg-success';
        $badgeIcon = 'uil-calendar-alt';
    } else {
        $eventTypeName = 'Event';
        $badgeClass = 'bg-secondary';
        $badgeIcon = 'uil-trophy';
    }
@endphp

@section('title', $eventTypeName . ' Registration')
@section('page-title', $eventTypeName . ' Registration')

@section('content')
<script>
    // ============================================================================
    // UNIFIED EVENT REGISTRATION SYSTEM
    // Dynamically adapts to Official (1), Open (2), or Multi-Slot (3) events
    // ============================================================================
    
    // Inject backend error messages for frontend consistency
    @php
        $errorMessages = [
            'SLOT_LIMIT_REACHED' => \App\Constants\EventMessages::SLOT_LIMIT_REACHED,
            'SLOT_LIMIT_EXCEEDED' => \App\Constants\EventMessages::SLOT_LIMIT_EXCEEDED,
            'SLOT_LIMIT_PARTIAL' => \App\Constants\EventMessages::SLOT_LIMIT_PARTIAL,
            'OFFICIAL_EVENT_REQUIRES_SLOT_LIMIT' => \App\Constants\EventMessages::OFFICIAL_EVENT_REQUIRES_SLOT_LIMIT,
            'OFFICIAL_EVENT_NULL_SLOT_LIMIT' => \App\Constants\EventMessages::OFFICIAL_EVENT_NULL_SLOT_LIMIT,
            'OFFICIAL_EVENT_INVALID_SLOT_LIMIT' => \App\Constants\EventMessages::OFFICIAL_EVENT_INVALID_SLOT_LIMIT,
            'OPEN_EVENT_UNLIMITED_SLOTS' => \App\Constants\EventMessages::OPEN_EVENT_UNLIMITED_SLOTS,
            'UID_SEARCH_LOCKED_SLOTS_FULL' => \App\Constants\EventMessages::UID_SEARCH_LOCKED_SLOTS_FULL,
            'UID_SEARCH_LOCKED_CAPACITY_REACHED' => \App\Constants\EventMessages::UID_SEARCH_LOCKED_CAPACITY_REACHED,
            'UID_SEARCH_UNLOCKED_SLOTS_AVAILABLE' => \App\Constants\EventMessages::UID_SEARCH_UNLOCKED_SLOTS_AVAILABLE,
        ];
    @endphp
    window.EVENT_ERROR_MESSAGES = @json($errorMessages);
    
    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),
            payment_required: {{ $payment_required ? 1 : 0 }},
            accept_online_payment: {{ $accept_online_payment ? 1 : 0 }},
            accept_offline_payment: {{ $accept_offline_payment ? 1 : 0 }}
        },
        event_id: {{ $event_details->id }},
        state_short_name: @json($state_short_name),
        state_id: {{ (int)($state_id ?? 0) }},
        age_bars: @json($age_bars),
        category_subcategory_map: @json($category_subcategory_map ?? [])
    };
    
    // Initialize eventRegistrationGlobals from eventRegistrationData
    window.eventRegistrationGlobals = {
        categories: @json($categories),
        sub_categories: @json($sub_categories),
        sub_cat_options: @json($sub_cat_options),
        weight_categories: @json($weight_categories),
        event_id: {{ $event_details->id }},
        event: @json($event_details),
        allowed_category_ids: @json($categories->pluck('id')->map(function($id) { return (string)$id; })->toArray()),
        category_subcategory_map: @json($category_subcategory_map ?? []),
        age_bars: @json($age_bars)
    };
    
    // Event Type Detection (group_id: 1=Official, 2=Open)
    // Multi-slot events are identified by participant_slot_limit > 1
    window.eventGroupId = {{ (int)$event_details->group_id }};
    window.currentEventId = {{ $event_details->id }};
    window.eventId = {{ $event_details->id }};
    
    // Multi-slot detection (replaces is_federation_cup)
    window.isMultiSlot = {{ ($event_details->participant_slot_limit ?? 1) > 1 ? 'true' : 'false' }};
    window.isOfficialEvent = (window.eventGroupId === 1);
    window.isOpenEvent = (window.eventGroupId === 2);

    // Payment routes for per-user details (unified for all event types)
    window.PAYMENT_USER_DETAILS_BASE = "{{ url('state/events/' . $event_details->id . '/payments/user') }}";
</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 justify-content-start">
                <span class="badge {{ $badgeClass }} me-2">{{ $eventTypeName }}</span>
                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">
                    <button type="button" class="btn btn-sm btn-outline-warning shadow-sm" id="view_payments_btn" data-event-id="{{ $event_details->id }}" data-url="{{ route('state.events.payments.view', ['eventId' => $event_details->id]) }}">
                        <i class="uil uil-transaction me-1"></i> View Payments
                    </button>
                    <button type="button" class="btn btn-sm btn-outline-primary shadow-sm" id="open_visualization_btn" title="Visualize Representation">
                        <i class="uil uil-presentation"></i>
                    </button>
                    <button type="button" class="btn btn-sm btn-outline-success shadow-sm" 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 shadow-sm" 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="d-flex align-items-center gap-2">
                        <div class="small text-body-secondary"><i class="uil uil-database me-1"></i> Registered Users</div>
                        <div class="input-group input-group-sm" style="max-width:260px;">
                            <span class="input-group-text"><i class="uil uil-search"></i></span>
                            <input type="text" class="form-control" id="accordionSearchInput" placeholder="Search UID or name...">
                        </div>
                    </div>
                    <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 - 240px); max-height:calc(100vh - 240px); overflow:auto;">
                    <div id="registeredUsersAccordion" class="accordion"></div>
                </div>
            </div>
        </div>
    </div>
</div>

@include('state.events.register.partials.register_user_offcanvas')
{{-- Unified Payments Offcanvas (Works for All Event Types) --}}
@include('state.events.register.partials.payments_offcanvas')

<!-- Search Results Modal -->
<div class="modal fade" id="registrationSearchResultsModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg">
        <div class="modal-content">
            <div class="modal-header py-2 bg-light">
                <h6 class="modal-title"><i class="uil uil-search me-1"></i> Search Users</h6>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body p-3">
                <div class="row g-2 align-items-center mb-3">
                    <div class="col-sm-8">
                        <div class="input-group input-group-sm">
                            <input type="text" class="form-control" id="regSearchInput" placeholder="Search by name, email or UID...">
                            <button class="btn btn-outline-secondary" type="button" id="regSearchBtn">
                                <i class="uil uil-search"></i>
                            </button>
                        </div>
                    </div>
                </div>
                <div class="table-responsive" style="max-height:380px; overflow:auto;">
                    <table class="table table-sm table-hover align-middle mb-0">
                        <thead class="table-light">
                            <tr>
                                <th style="width:40px;">#</th>
                                <th>UID</th>
                                <th>Name</th>
                                <th>Email</th>
                                <th>Mobile</th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>
            </div>
            <div class="modal-footer py-2">
                <button type="button" class="btn btn-sm btn-secondary" data-bs-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

{{-- Unified Payment Modals (Works for All Event Types) --}}
@include('state.events.register.partials.payment_modals')

@endsection

@section('footer_paginator')
    <div id="laravel_paginator" class="d-flex justify-content-between align-items-center gap-2 flex-wrap">
        <div></div>
        <div id="registrationProgressWrapper" class="d-none d-md-flex align-items-center" style="min-width:280px;">
            <div class="me-2 small text-nowrap"><i class="uil uil-users-alt me-1"></i><span id="registrationProgressSummary">0 / 100 registered</span></div>
            <div class="progress" style="width:220px; height: 12px; border-radius: 8px; overflow: hidden;">
                <div id="registrationProgressBarDone" class="progress-bar bg-success" role="progressbar" style="width: 0%" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
                <div id="registrationProgressBarPending" class="progress-bar bg-danger" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
<!-- ✅ Shared Smart Search Module (Global for All Event Groups) -->
<script src="/js/pages/state/event/register/smart_search.js?v=1769404684"></script>


@endpush

@push('styles')
<style>
    /* Slot Usage Indicator Styles */
    .slot-usage-indicator {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        font-size: 0.875rem;
    }
    
    .slot-usage-indicator .badge {
        font-size: 0.75rem;
        padding: 0.25rem 0.5rem;
        font-weight: 600;
        white-space: nowrap;
    }
    
    .slot-usage-indicator small {
        font-size: 0.7rem;
        white-space: nowrap;
    }
    
    /* Prevent slot indicator from being clickable in accordion button */
    .accordion-button .slot-usage-indicator {
        pointer-events: none;
    }
    
    /* Ensure slot indicator stays on the right */
    .accordion-button > div {
        width: 100%;
    }
    
    @media (max-width: 768px) {
        .slot-usage-indicator {
            font-size: 0.75rem;
        }
        
        .slot-usage-indicator .badge {
            font-size: 0.7rem;
            padding: 0.2rem 0.4rem;
        }
        
        .slot-usage-indicator small {
            display: none; /* Hide availability text on mobile */
        }
    }
</style>
@endpush

@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>
<!-- Razorpay Checkout Script -->
<script src="https://checkout.razorpay.com/v1/checkout.js"></script>

@include('state.events.register.partials.registration_visualization')


<!-- Removed federation folder modules - functionality integrated into main modules -->

<!-- Removed federation folder modules - functionality integrated into main modules -->

<!-- Razorpay configuration MUST be set BEFORE loading payment module -->
<script>
    // Pass Razorpay configuration to JavaScript
    window.RAZORPAY_KEY = "{{ config('services.razorpay.key') }}";
    
    // ============================================================================
    // UNIFIED PAYMENT ROUTES - Works for ALL event types
    // No more event-type-specific routes
    // ============================================================================
    window.PAYMENT_ROUTES = {
        CREATE_ORDER: "{{ route('state.events.payments.order.create', ['eventId' => $event_details->id]) }}",
        VERIFY_PAYMENT: "{{ route('state.events.payments.order.verify', ['eventId' => $event_details->id]) }}",
        VIEW_PAYMENTS: "{{ route('state.events.payments.view', ['eventId' => $event_details->id]) }}",
        EXPORT_DATA: "{{ route('state.events.payments.export', ['eventId' => $event_details->id]) }}",
        USER_DETAILS_BASE: "{{ url('state/events/' . $event_details->id . '/payments/user') }}"
    };
    
    // Event metadata for conditional logic if needed
    window.EVENT_META = {
        id: {{ $event_details->id }},
        group_id: {{ $event_details->group_id }},
        is_multi_slot: {{ ($event_details->participant_slot_limit ?? 1) > 1 ? 'true' : 'false' }},
        participant_slot_limit: {{ $event_details->participant_slot_limit ?? 1 }},
        type_label: "{{ $eventTypeName }}"
    };
    
    // Debug: Log Razorpay configuration
    console.log('Razorpay Config Check ({{ $eventTypeName }}):', {
        RAZORPAY_KEY: window.RAZORPAY_KEY,
        keyLength: window.RAZORPAY_KEY ? window.RAZORPAY_KEY.length : 0,
        isEmpty: window.RAZORPAY_KEY === '',
        isUndefined: typeof window.RAZORPAY_KEY === 'undefined',
        PAYMENT_ROUTES: window.PAYMENT_ROUTES,
        isMultiSlot: window.isMultiSlot
    });
</script>

<!-- ============================================================================ -->
<!-- EVENT REGISTRATION MODULAR JAVASCRIPT ARCHITECTURE (Phase 1 & 2 COMPLETE) -->
<!-- 🎉 Refactoring Complete: 6,624 lines → 11 modules (~600 lines each) -->
<!-- Load Order: Foundation → Core → Features → Buffer → Display → Actions → Orchestrator -->
<!-- ============================================================================ -->

<!-- ==================== FOUNDATION MODULES ==================== -->


<!-- 1. Global Configuration (event detection, routes, constants) -->
<script src="/js/pages/state/event/register/register_event_users.config.js?v=1769404684"></script>

<!-- 2. Shared Utilities (helpers, formatters, SweetAlert wrappers) -->
<script src="/js/pages/state/event/register/register_event_users.utils.js?v=1769404684"></script>

<!-- ==================== CORE FUNCTIONALITY ==================== -->

<!-- 3. Form Module (dropdowns, visibility toggles, category/subcategory handlers) -->
<script src="/js/pages/state/event/register/register_event_users.form.js?v=1769404684"></script>

<!-- 4. Validation Module (form validation, draft validation, restrictions checking) -->
<script src="/js/pages/state/event/register/register_event_users.validation.js?v=1769404684"></script>

<!-- 5. Restrictions Module (Poomsae/Kyorugi-specific rules) -->
<script src="/js/pages/state/event/register/register_event_users.restrictions.js?v=1769404684"></script>

<!-- 6. Composition Module (team composition display) -->
<script src="/js/pages/state/event/register/register_event_users.composition.js?v=1769404684"></script>

<!-- ==================== FEATURES ==================== -->

<!-- 7. Smart Search Module (smart search offcanvas) -->
<script src="/js/pages/state/event/register/smart_search.js?v=1769404684"></script>

<!-- 8. Event Payment Integration (Unified - works for all event types) -->
<script src="/js/pages/state/event/register/event_payment.js?v=1769404684"></script>

<!-- ==================== BUFFER & STATE MANAGEMENT ==================== -->

<!-- 9. Pending Buffer (add/remove participants, render pending table) -->
<script src="/js/pages/state/event/register/register_event_users.pending.js?v=1769404684"></script>

<!-- ==================== DISPLAY MODULES ==================== -->

<!-- 10. Participant Renderer (table/card rendering, multi-slot batch grouping) -->
<script src="/js/pages/state/event/register/register_event_users.participants.js?v=1769404684"></script>

<!-- 11. Registered Users (fetch, accordion rendering, state persistence) -->
<script src="/js/pages/state/event/register/register_event_users.registered.js?v=1769404684"></script>

<!-- 12. Visualization (progress tracking, capacity calculation, ECharts tree) -->
<script src="/js/pages/state/event/register/register_event_users.visualization.js?v=1769404684"></script>

<!-- ==================== ACTIONS & SUBMISSION ==================== -->

<!-- 13. Participant Actions (event handlers, search, offcanvas lifecycle) -->
<script src="/js/pages/state/event/register/register_event_users.actions.js?v=1769404684"></script>

<!-- 14. Registration Submission (submit workflow, payment integration) -->
<script src="/js/pages/state/event/register/register_event_users.submission.js?v=1769404684"></script>

<!-- ==================== LEGACY MONOLITH (BACKUP - REMOVE AFTER TESTING) ==================== -->

<!-- 15. Main Registration Script (ORIGINAL MONOLITH - 6,624 lines) -->
<!-- ⚠️ DISABLED: Refactored into modules above. Keep for 2 weeks as rollback. -->
<!-- <script src="/js/pages/state/event/register/register_event_users.js?v=1769404684"></script> -->

<!-- ==================== ORCHESTRATOR (MUST BE LAST) ==================== -->

<!-- 16. Main Orchestrator (initialization and coordination) -->
<script src="/js/pages/state/event/register/register_event_users.main.js?v=1769404684"></script>

<script>
(function(){
    try {
        const ok = window.EventRestrictions && typeof window.EventRestrictions.checkRegistrationRestrictions === 'function' && typeof window.checkPoomsaeRestrictions === 'function';
        console.debug('Event Restrictions module loaded:', !!window.EventRestrictions, 'Funcs OK:', ok);
    } catch(e) { console.warn('Event Restrictions smoke test error', e); }
})();
</script>

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

<script>
// Wire backend searchUsers endpoint into search modal
document.addEventListener('DOMContentLoaded', function(){
    const input = document.getElementById('regSearchInput');
    const btn = document.getElementById('regSearchBtn');

    if (!input || !btn) return;

    // NOTE: Now uses unified search via smart_search_user route
    // window.SEARCH_ROUTES = window.SEARCH_ROUTES || {};

    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');
        if (!tbody) return;
        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){
            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.email||'')}</td>
                    <td>${hilite(r.mobile||'')}</td>
                `;
                tbody.appendChild(tr);
            });
        }
    }

    function doSearch(){
        const qRaw = (input?.value||'').trim();
        const stateId = window.eventRegistrationData?.state_id || '';
        const eventId = window.eventRegistrationData?.event_id || '';

        if (!qRaw){
            openSearchResults([], qRaw);
            return;
        }

        const params = new URLSearchParams({
            search: qRaw,
            state_id: stateId,
            event_id: eventId
        });

        const url = `/state/events/search_user_by_uid?${params.toString()}`;

        fetch(url, { headers: { 'X-Requested-With': 'XMLHttpRequest' }})
            .then(res => res.ok ? res.json() : Promise.reject(new Error('Network error')))
            .then(data => {
                const users = (data && data.success && Array.isArray(data.users)) ? data.users : [];
                const rows = users.map(u => {
                    const fn = (u.fname||'').toString().trim();
                    const ln = (u.lname||'').toString().trim();
                    const full = [fn, ln].filter(Boolean).join(' ').trim();
                    const name = full || (u.full_name||u.name||'');
                    return {
                        uid: u.reg_uid || '',
                        name: name,
                        email: u.email || '',
                        mobile: u.mobile || ''
                    };
                });
                openSearchResults(rows, qRaw);
            })
            .catch(err => {
                console.error('Search users error:', err);
                openSearchResults([], qRaw);
            });
    }

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

    // Auto-focus input when modal opens
    const modalEl = document.getElementById('registrationSearchResultsModal');
    if (modalEl && window.bootstrap && window.bootstrap.Modal){
        modalEl.addEventListener('shown.bs.modal', function(){
            setTimeout(()=>{ try { input.focus(); } catch(e){} }, 150);
        });
    }
});

// Inline accordion search (UID/Name) and payments offcanvas wiring
document.addEventListener('DOMContentLoaded', function(){
    // --- Accordion inline filter ---
    const accSearchInput = document.getElementById('accordionSearchInput');
    const clearHeaderBtn = document.getElementById('clearAccordionFilterHeaderBtn');

    if (accSearchInput) {
        let filterDebounce;

        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();

            acc.querySelectorAll('.d-none.search-hidden').forEach(el=>{ el.classList.remove('d-none','search-hidden'); });
            clearMarks(acc);

            if (!q){
                clearHeaderBtn && clearHeaderBtn.classList.add('d-none');
                return;
            }

            const qlc = q.toLowerCase();

            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); }
            });

            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'); }
            });

            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'); }
            });

            clearHeaderBtn && clearHeaderBtn.classList.remove('d-none');
        }

        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);
            accSearchInput.value = '';
            clearHeaderBtn && clearHeaderBtn.classList.add('d-none');
        }

        accSearchInput.addEventListener('input', function(e){
            const val = e.target.value || '';
            if (filterDebounce) clearTimeout(filterDebounce);
            filterDebounce = setTimeout(()=> applyAccordionFilter(val), 150);
        });

        clearHeaderBtn && clearHeaderBtn.addEventListener('click', function(){
            clearAccordionFilter();
        });
    }

    // --- Payments offcanvas ---
    const paymentsBtn = document.getElementById('view_payments_btn');
    const offcanvasEl = document.getElementById('paymentsOffcanvas');
    if (paymentsBtn && offcanvasEl && window.bootstrap) {
        const offcanvas = window.bootstrap.Offcanvas.getOrCreateInstance(offcanvasEl);
        const table = offcanvasEl.querySelector('#paymentsTable tbody');
        const loadingRow = offcanvasEl.querySelector('.payments-loading-row');
        const emptyRow = offcanvasEl.querySelector('.payments-empty-row');
        const searchInput = document.getElementById('paymentsSearchInput');
        const totalsSummary = document.getElementById('paymentsTotalsSummary');

        let lastRows = [];

        function renderPayments(rows, totals){
            if (!table) return;
            table.querySelectorAll('tr').forEach(tr => {
                if (!tr.classList.contains('payments-loading-row') && !tr.classList.contains('payments-empty-row')) {
                    tr.remove();
                }
            });

            if (rows.length === 0){
                emptyRow && emptyRow.classList.remove('d-none');
                loadingRow && loadingRow.classList.add('d-none');
            } else {
                emptyRow && emptyRow.classList.add('d-none');
                loadingRow && loadingRow.classList.add('d-none');

                rows.forEach((r, idx) => {
                    const tr = document.createElement('tr');
                    tr.className = 'payments-row';
                    tr.dataset.uid = (r.reg_uid||'').toString().toLowerCase();
                    tr.dataset.name = (r.full_name||'').toString().toLowerCase();
                    tr.dataset.email = (r.email||'').toString().toLowerCase();
                    tr.dataset.channel = (r.payment_channel||'').toString().toLowerCase();
                    const paidAmt = parseFloat(r.paid_amount||0) || 0;
                    const pendingAmt = parseFloat(r.pending_amount||0) || 0;
                    const count = parseInt(r.participants_count||0, 10) || 0;
                    const portalUserId = r.portal_user_id || '';
                    const channel = r.payment_channel || 'unknown';
                    const channelLabel = channel === 'online' ? 'Online' : channel === 'offline' ? 'Offline' : channel === 'mixed' ? 'Mixed' : '—';
                    const channelClass = channel === 'online' ? 'badge-success' : channel === 'offline' ? 'badge-info' : 'badge-secondary';
                    tr.innerHTML = `
                        <td class="text-body-secondary">${idx+1}</td>
                        <td>${r.reg_uid||'—'}</td>
                        <td>${r.full_name||''}</td>
                        <td>${r.email||''}</td>
                        <td class="text-center">${count}</td>
                        <td class="text-end text-success fw-semibold">${paidAmt > 0 ? paidAmt.toFixed(2) : '—'}</td>
                        <td class="text-end text-warning fw-semibold">${pendingAmt > 0 ? pendingAmt.toFixed(2) : '—'}</td>
                        <td class="text-center"><span class="badge ${channelClass}">${channelLabel}</span></td>
                        <td class="text-center">
                            <button type="button" class="btn btn-xs btn-outline-primary view-payment-breakdown-btn" 
                                    data-portal-user-id="${portalUserId}" 
                                    data-name="${r.full_name||''}"
                                    title="View Details">
                                <i class="uil uil-eye"></i>
                            </button>
                        </td>
                    `;
                    table.appendChild(tr);
                });
            }

            if (totalsSummary && totals){
                const totalPaid = parseFloat(totals.total_paid||0) || 0;
                const totalPending = parseFloat(totals.total_pending||0) || 0;
                const totalAmount = parseFloat(totals.total_amount||0) || 0;
                totalsSummary.innerHTML = `
                    <span class="text-success fw-semibold">Paid: ₹${totalPaid.toFixed(2)}</span>
                    <span class="mx-2">|</span>
                    <span class="text-warning fw-semibold">Pending: ₹${totalPending.toFixed(2)}</span>
                    <span class="mx-2">|</span>
                    <span class="fw-bold">Total: ₹${totalAmount.toFixed(2)}</span>
                `;
            }
        }

        function applyPaymentsFilter(query, channelFilter){
            const q = (query||'').toLowerCase().trim();
            const channel = (channelFilter||'all').toLowerCase();
            const rows = table ? table.querySelectorAll('tr.payments-row') : [];
            let visibleCount = 0;
            let visiblePaid = 0;
            let visiblePending = 0;
            
            rows.forEach(tr => {
                const uid = tr.dataset.uid||'';
                const name = tr.dataset.name||'';
                const email = tr.dataset.email||'';
                const rowChannel = tr.dataset.channel||'';
                
                // Check text match
                const textMatch = !q || uid.includes(q) || name.includes(q) || email.includes(q);
                
                // Check channel match
                const channelMatch = channel === 'all' || rowChannel === channel || (channel === 'online' && rowChannel === 'mixed') || (channel === 'offline' && rowChannel === 'mixed');
                
                const shouldShow = textMatch && channelMatch;
                tr.classList.toggle('d-none', !shouldShow);
                
                if (shouldShow) {
                    visibleCount++;
                    // Update visible totals
                    const cells = tr.querySelectorAll('td');
                    if (cells.length >= 7) {
                        const paidText = cells[5].textContent.replace(/[^0-9.]/g, '');
                        const pendingText = cells[6].textContent.replace(/[^0-9.]/g, '');
                        visiblePaid += parseFloat(paidText) || 0;
                        visiblePending += parseFloat(pendingText) || 0;
                    }
                }
            });
            
            // Update totals summary with filtered values
            if (totalsSummary && (q || channel !== 'all')) {
                const visibleTotal = visiblePaid + visiblePending;
                totalsSummary.innerHTML = `
                    <span class="text-success fw-semibold">Paid: ₹${visiblePaid.toFixed(2)}</span>
                    <span class="mx-2">|</span>
                    <span class="text-warning fw-semibold">Pending: ₹${visiblePending.toFixed(2)}</span>
                    <span class="mx-2">|</span>
                    <span class="fw-bold">Total: ₹${visibleTotal.toFixed(2)}</span>
                    <span class="ms-2 text-muted">(${visibleCount} shown)</span>
                `;
            }
        }

        if (searchInput){
            let searchDebounce;
            searchInput.addEventListener('input', function(e){
                const val = e.target.value || '';
                const channelFilter = document.getElementById('paymentChannelFilter')?.value || 'all';
                if (searchDebounce) clearTimeout(searchDebounce);
                searchDebounce = setTimeout(()=> applyPaymentsFilter(val, channelFilter), 150);
            });
        }
        
        // Add channel filter event listener
        const channelFilterSelect = document.getElementById('paymentChannelFilter');
        if (channelFilterSelect) {
            channelFilterSelect.addEventListener('change', function(e){
                const val = searchInput?.value || '';
                applyPaymentsFilter(val, e.target.value);
            });
        }

        paymentsBtn.addEventListener('click', function(){
            const url = paymentsBtn.getAttribute('data-url');
            if (!url) return;

            offcanvas.show();
            if (loadingRow) loadingRow.classList.remove('d-none');
            if (emptyRow) emptyRow.classList.add('d-none');
            if (totalsSummary) totalsSummary.textContent = '';

            fetch(url, {
                headers: {
                    'Accept': 'application/json',
                    'X-Requested-With': 'XMLHttpRequest'
                }
            })
                .then(res => {
                    console.log('Pending payments response status:', res.status, res.statusText);
                    if (!res.ok) {
                        return res.text().then(text => {
                            console.error('Pending payments error response:', text);
                            throw new Error(`HTTP ${res.status}: ${res.statusText}`);
                        });
                    }
                    return res.json();
                })
                .then(data => {
                    console.log('Pending payments data:', data);
                    const rows = Array.isArray(data.rows) ? data.rows : [];
                    lastRows = rows;
                    renderPayments(rows, data.totals || {});
                })
                .catch(err => {
                    console.error('View payments error:', err);
                    if (loadingRow) loadingRow.classList.add('d-none');
                    if (emptyRow) emptyRow.classList.remove('d-none');
                    if (totalsSummary) totalsSummary.textContent = 'Failed to load payments: ' + err.message;
                });
        });

        // Handle payment breakdown button clicks (from Pending Offline Payments)
        if (table) {
            table.addEventListener('click', function(e) {
                const btn = e.target.closest('.view-payment-breakdown-btn');
                if (!btn) return;
                
                const portalUserId = btn.getAttribute('data-portal-user-id');
                const userName = btn.getAttribute('data-name');
                
                if (!portalUserId) return;
                
                // Open modal and load breakdown
                const modalEl = document.getElementById('paymentBreakdownModal');
                const modalTitle = document.getElementById('paymentBreakdownModalTitle');
                const modalBody = document.getElementById('paymentBreakdownModalBody');
                
                if (!modalEl || !modalBody) return;
                
                if (modalTitle) {
                    modalTitle.innerHTML = `<i class="uil uil-invoice me-1"></i> Payment Breakdown - ${userName}`;
                }
                
                modalBody.innerHTML = '<div class="text-center text-body-secondary small py-3">Loading breakdown...</div>';
                
                const modal = window.bootstrap.Modal.getOrCreateInstance(modalEl);
                modal.show();
                
                // Fetch breakdown from backend
                const eventId = window.eventRegistrationData?.event_id;
                const url = `${window.PAYMENT_USER_DETAILS_BASE}/${portalUserId}`;
                
                fetch(url, {
                    headers: {
                        'Accept': 'application/json',
                        'X-Requested-With': 'XMLHttpRequest'
                    }
                })
                    .then(res => {
                        console.log('Payment breakdown response status:', res.status, res.statusText);
                        if (!res.ok) {
                            return res.text().then(text => {
                                console.error('Payment breakdown error response:', text);
                                throw new Error(`HTTP ${res.status}: ${res.statusText}`);
                            });
                        }
                        return res.json();
                    })
                    .then(data => {
                        console.log('Payment breakdown data:', data);
                        if (data.success) {
                            renderPaymentBreakdown(modalBody, data);
                        } else {
                            modalBody.innerHTML = '<div class="alert alert-danger">Failed to load breakdown: ' + (data.message || 'Unknown error') + '</div>';
                        }
                    })
                    .catch(err => {
                        console.error('Error loading payment breakdown:', err);
                        modalBody.innerHTML = '<div class="alert alert-danger">Error loading breakdown: ' + err.message + '</div>';
                    });
            });
        }

        function renderPaymentBreakdown(container, data) {
            const { summary, participants } = data;
            
            if (!summary || !participants) {
                container.innerHTML = '<div class="alert alert-warning">No data available.</div>';
                return;
            }
            
            const totalPending = parseFloat(summary.pending_amount || 0) || 0;
            const totalPaid = parseFloat(summary.paid_amount || 0) || 0;
            
            let html = `
                <div class="row g-2 mb-3 small">
                    <div class="col-md-6">
                        <div class="border rounded p-2 h-100">
                            <div class="text-body-secondary mb-1">Total Participants</div>
                            <div class="fw-semibold">${summary.participants_count || 0}</div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="border rounded p-2 h-100">
                            <div class="text-body-secondary mb-1">Total Amount</div>
                            <div class="fw-semibold">₹ ${(totalPaid + totalPending).toFixed(2)}</div>
                        </div>
                    </div>
                </div>
                
                <div class="border rounded">
                    <div class="border-bottom bg-body small text-body-secondary px-2 py-1">
                        <i class="uil uil-list-ul me-1"></i>Registrations Breakdown
                    </div>
                    <div class="table-responsive" style="max-height:400px;overflow:auto;">
                        <table class="table table-sm mb-0 align-middle">
                            <thead class="table-light small">
                                <tr>
                                    <th>#</th>
                                    <th>Category / Sub-Category / Option</th>
                                    <th class="text-end">Amount (₹)</th>
                                </tr>
                            </thead>
                            <tbody>`;
            
            if (participants.length > 0) {
                participants.forEach((p, idx) => {
                    const cat = p.category_name || '-';
                    const sub = p.sub_category_name || '-';
                    const opt = p.option_name || '-';
                    const weight = p.weight_category_name 
                        ? `${p.weight_category_name}${p.weight_category_description ? ' (' + p.weight_category_description + ')' : ''}` 
                        : '';
                    const desc = [cat, sub, opt].filter(Boolean).join(' / ');
                    const extra = weight ? `<div class="text-body-secondary small">${weight}</div>` : '';
                    const amt = parseFloat(p.per_person_amount || 0) || 0;
                    
                    html += `<tr>
                        <td class="text-center text-body-secondary">${idx + 1}</td>
                        <td>
                            <div class="fw-semibold">${desc}</div>
                            ${extra}
                        </td>
                        <td class="text-end">${amt ? '₹ ' + amt.toFixed(2) : '—'}</td>
                    </tr>`;
                });
            } else {
                html += '<tr><td colspan="3" class="text-center text-body-secondary small py-2">No participants found.</td></tr>';
            }
            
            html += `</tbody>
                        </table>
                    </div>
                </div>`;
            
            container.innerHTML = html;
        }
    }
});

// Excel export for payments canvas - fetch detailed payment records
$('#download_payments_canvas_excel_btn').on('click', function() {
    const eventId = window.eventRegistrationData?.event_id;
    
    if (!eventId) {
        Swal.fire({
            icon: 'error',
            title: 'Error',
            text: 'Event ID not found.',
            confirmButtonText: 'OK'
        });
        return;
    }
    
    // Show loading indicator
    Swal.fire({
        title: 'Generating Excel...',
        html: 'Please wait while we prepare your export.',
        allowOutsideClick: false,
        didOpen: () => {
            Swal.showLoading();
        }
    });
    
    // Fetch detailed payment records from backend
    $.ajax({
        url: window.PAYMENT_ROUTES?.EXPORT_DATA || `{{ route('state.events.payments.export', ['eventId' => $event_details->id]) }}`,
        method: 'GET',
        headers: {
            'X-Requested-With': 'XMLHttpRequest',
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        },
        success: function(response) {
            if (!response.success || !response.data || response.data.length === 0) {
                Swal.fire({
                    icon: 'warning',
                    title: 'No Data',
                    text: 'No payment records to export.',
                    confirmButtonText: 'OK'
                });
                return;
            }
            
            const payments = response.data;
            const data = [];
            
            // Add headers with all required columns
            data.push([
                'S.No',
                'UID',
                'Name',
                'Email',
                'Total Amount (₹)',
                'Payment Channel',
                'Payment Date',
                'Tax (₹)',
                'Captured',
                'Razorpay Payment ID',
                'Razorpay Order ID',
                'Payment Status',
                'Created By Admin',            
                'Created At'
            ]);
            
            // Process each payment record
            payments.forEach((payment, index) => {
                data.push([
                    index + 1,
                    payment.reg_uid || '—',
                    payment.name || '—',
                    payment.email || '—',
                    payment.amount || 0,
                    payment.payment_channel || '—',
                    payment.payment_date || '—',
                    payment.tax || 0,
                    payment.captured ? 'Yes' : 'No',
                    payment.razorpay_payment_id || '—',
                    payment.razorpay_order_id || '—',
                    payment.payment_status || payment.status || '—',
                    payment.created_by_admin_name || '—',
                    payment.created_at || '—'
                ]);
            });
            
            // Create workbook and worksheet
            const wb = XLSX.utils.book_new();
            const ws = XLSX.utils.aoa_to_sheet(data);
            
            // Set column widths
            ws['!cols'] = [
                { wch: 6 },  // S.No
                { wch: 18 }, // UID
                { wch: 25 }, // Name
                { wch: 30 }, // Email
                { wch: 15 }, // Total Amount
                { wch: 15 }, // Payment Channel
                { wch: 12 }, // Payment Date
                { wch: 10 }, // Tax
                { wch: 10 }, // Captured
                { wch: 25 }, // Razorpay Payment ID
                { wch: 25 }, // Razorpay Order ID
                { wch: 15 }, // Payment Status
                { wch: 20 }, // Created By Admin           
                { wch: 20 }  // Created At
            ];
            
            XLSX.utils.book_append_sheet(wb, ws, 'Payments');
            
            // Generate filename with timestamp
            const timestamp = new Date().toISOString().slice(0, 19).replace(/:/g, '-');
            const filename = `Event_Payments_${timestamp}.xlsx`;
            
            // Download the file
            XLSX.writeFile(wb, filename);
            
            Swal.fire({
                icon: 'success',
                title: 'Export Successful',
                text: `Excel file "${filename}" has been downloaded with ${payments.length} records.`,
                timer: 2500,
                showConfirmButton: false
            });
        },
        error: function(xhr) {
            Swal.fire({
                icon: 'error',
                title: 'Export Failed',
                text: 'Failed to fetch payment data. Please try again.',
                confirmButtonText: 'OK'
            });
            console.error('Excel export error:', xhr);
        }
    });
});
</script>
@endpush