@extends('layouts.user')

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

@section('content')
<script>
    // ============================================================================
    // USER EVENT REGISTRATION SYSTEM
    // User can only view and manage their own registrations
    // ============================================================================
    
    // 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);
    
    // Authenticated user data for user-scoped operations
    window.authUserData = {
        uid: '{{ auth()->user()->reg_uid }}',
        portal_user_id: {{ auth()->id() }},
        name: '{{ auth()->user()->name }}',
        email: '{{ auth()->user()->email }}'
    };
    
    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 (user-scoped)
    window.PAYMENT_USER_DETAILS_BASE = "{{ url('user/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">
                Event: {{ $event_details->title }}
            </h5>
            <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('user.events.payments.view', ['eventId' => $event_details->id]) }}">
                        <i class="uil uil-transaction me-1"></i> My Payments
                    </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 My Entries
                    </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 Registration
                    </button>
                </div>
            </div>
         </div>
         <div class="alert alert-info py-2 mb-2">
            <i class="uil uil-info-circle me-1"></i>
            <strong>Note:</strong> This page shows only YOUR registrations for this event.
         </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> My Registrations</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('user.events.register.partials.register_user_offcanvas')
{{-- Unified Payments Offcanvas (Works for All Event Types) --}}
@include('user.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('user.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/user/events/register/smart_search.js?v=1775968307"></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;
    }

    /* ============================================================================ */
    /* Professional Composition Panel Styles - Clean & Minimal Design */
    /* ============================================================================ */
    .composition-panel-clean {
        background: #ffffff;
        border: 1px solid #e5e7eb;
        border-radius: 8px;
        padding: 16px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    }

    .composition-panel-clean .panel-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 12px;
        padding-bottom: 12px;
        border-bottom: 1px solid #f3f4f6;
    }

    .composition-panel-clean .panel-title {
        font-size: 14px;
        font-weight: 600;
        color: #374151;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .composition-panel-clean .panel-title .icon {
        color: #6b7280;
        font-size: 16px;
    }

    .composition-panel-clean .member-count {
        font-size: 13px;
        color: #6b7280;
        font-weight: 500;
        background: #f9fafb;
        padding: 4px 10px;
        border-radius: 12px;
        border: 1px solid #e5e7eb;
    }

    .composition-panel-clean .member-count.complete {
        color: #059669;
        background: #d1fae5;
        border-color: #a7f3d0;
    }

    /* Progress Bar - Clean Style */
    .progress-clean {
        height: 6px;
        background: #f3f4f6;
        border-radius: 3px;
        overflow: hidden;
        margin-bottom: 12px;
    }

    .progress-clean .progress-bar-clean {
        height: 100%;
        transition: width 0.3s ease;
    }

    .progress-clean .progress-bar-clean.incomplete {
        background: #3b82f6;
    }

    .progress-clean .progress-bar-clean.complete {
        background: #10b981;
    }

    /* Info Section */
    .composition-info {
        font-size: 13px;
        color: #6b7280;
        margin-bottom: 12px;
        line-height: 1.5;
    }

    .composition-info strong {
        color: #374151;
    }

    .composition-complete-msg {
        display: flex;
        align-items: center;
        gap: 6px;
        font-size: 13px;
        color: #059669;
        font-weight: 500;
        margin-top: 8px;
    }

    /* Context Section - Slot/Registration Info */
    .context-section {
        margin-top: 16px;
        padding-top: 16px;
        border-top: 1px solid #f3f4f6;
    }

    .context-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 8px;
    }

    .context-label {
        font-size: 13px;
        color: #6b7280;
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .context-value {
        font-size: 13px;
        font-weight: 600;
        color: #374151;
    }

    .context-value.success {
        color: #059669;
    }

    .context-value.danger {
        color: #dc2626;
    }

    .context-value.info {
        color: #2563eb;
    }

    /* Slot Progress Bar */
    .slot-progress-clean {
        height: 4px;
        background: #f3f4f6;
        border-radius: 2px;
        overflow: hidden;
        margin: 8px 0;
    }

    .slot-progress-clean .slot-bar {
        height: 100%;
        transition: width 0.3s ease;
    }

    .slot-progress-clean .slot-bar.available {
        background: #3b82f6;
    }

    .slot-progress-clean .slot-bar.full {
        background: #dc2626;
    }

    /* Status Messages */
    .status-message {
        font-size: 12px;
        color: #6b7280;
        display: flex;
        align-items: center;
        gap: 6px;
        margin-top: 6px;
    }

    .status-message.success {
        color: #059669;
    }

    .status-message.danger {
        color: #dc2626;
    }

    .status-message.info {
        color: #2563eb;
    }
    
    /* 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('user.events.register.partials.registration_visualization')


<!-- Razorpay configuration MUST be set BEFORE loading payment module -->
<script>
    // Pass Razorpay configuration to JavaScript
    window.RAZORPAY_KEY = "{{ config('services.razorpay.key') }}";
    
    // ============================================================================
    // USER PAYMENT ROUTES - User-scoped payment operations
    // ============================================================================
    window.PAYMENT_ROUTES = {
        CREATE_ORDER: "{{ route('user.events.payments.order.create', ['eventId' => $event_details->id]) }}",
        VERIFY_PAYMENT: "{{ route('user.events.payments.order.verify', ['eventId' => $event_details->id]) }}",
        VIEW_PAYMENTS: "{{ route('user.events.payments.view', ['eventId' => $event_details->id]) }}",
        EXPORT_DATA: "{{ route('user.events.payments.export', ['eventId' => $event_details->id]) }}",
        USER_DETAILS_BASE: "{{ url('user/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: "Event"
    };
    
    // Debug: Log Razorpay configuration
    console.log('Razorpay Config Check (User Event):', {
        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 (Adapted for User Portal) -->
<!-- Load Order: Foundation → Core → Features → Buffer → Display → Actions → Orchestrator -->
<!-- ============================================================================ -->

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

<!-- 11. Payment Canvas (payment-centric view with breakdown modal) -->
<script src="/js/pages/user/events/register/payment_canvas.js?v=1775968307"></script>

<!-- 12. Registered Users (fetch, accordion rendering, state persistence) -->
<script src="/js/pages/user/events/register/register_event_users.registered.js?v=1775968307"></script>

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

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

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

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

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

<!-- 16. Main Orchestrator (initialization and coordination) -->
<script src="/js/pages/user/events/register/register_event_users.main.js?v=1775968307"></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/user/events/register/register_event_users_export.js?v=1775968307"></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;

    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 = `/user/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) {
        // Initialize offcanvas and use loadPaymentCanvas from payment_canvas.js
        paymentsBtn.addEventListener('click', function() {
            const eventId = this.dataset.eventId;
            if (eventId && typeof window.loadPaymentCanvas === 'function') {
                // Show offcanvas
                const offcanvas = window.bootstrap.Offcanvas.getOrCreateInstance(offcanvasEl);
                offcanvas.show();
                
                // Load payment data
                window.loadPaymentCanvas(eventId);
            } else {
                console.error('loadPaymentCanvas function not found or eventId missing');
            }
        });
    }
});

// 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('user.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 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_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 At
            ];
            
            XLSX.utils.book_append_sheet(wb, ws, 'My Payments');
            
            // Generate filename with timestamp
            const timestamp = new Date().toISOString().slice(0, 19).replace(/:/g, '-');
            const filename = `My_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