@extends('layouts.user')

@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)) : []));
    window.eventRegistrationGlobals.event_id = {{ $event_details->id }};
    window.eventRegistrationGlobals.age_bars = window.eventRegistrationGlobals.age_bars || [];
</script>
<div class="row g-2 align-items-center">
    <input type="hidden" name="event_id" value="{{ $event_details->id }}">
    <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">
                    <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 Registration
                    </button>
                </div>
            </div>
        </div>
    </div>
    <div class="col-12 d-none small text-body-secondary">
        Note: This page shows only your registrations for this event.
    </div>
    <div class="col-12" id="finalizeSummaryBanner" style="display:none;">
        <div class="alert alert-warning d-flex align-items-start gap-2 py-2 mb-2">
            <div><i class="uil uil-info-circle"></i></div>
            <div>
                <div class="fw-semibold mb-1">Submission summary</div>
                <div class="small" id="finalizeSummaryText"></div>
            </div>
        </div>
    </div>
    <div class="col-12">
        <div class="alert alert-info py-2 mb-2">
            Payment is required to complete each registration. You will be prompted to pay after validation.
        </div>
    </div>
    <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> Your Registered Entries</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>
                    </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')
@endsection

@section('footer_paginator')
    <!-- No paginator for user open events -->
@endsection

@push('scripts')
<!-- Ensure jQuery is available before state open JS (required for init) -->
<script src="{{ asset('vendors/jquery.min.js') }}"></script>
<script src="/vendors/sweetalert2/sweetalert2.all.min.js"></script>
<!-- User Open-specific copies -->
<script src="/js/pages/user/register/open/register_event_restrictions.js?v=1769212479"></script>
<script src="/js/pages/user/register/open/register_event_users.utils.js?v=1769212479"></script>
<script src="/js/pages/user/register/open/register_event_users.composition.js?v=1769212479"></script>
<script src="/js/pages/user/register/open/composition_visibility_fix.js?v=1769212479"></script>
<!-- Fallback renderer to ensure registered list displays even if state renderer is unavailable -->
<script src="/js/pages/user/register/open/register_event_users_overrides.js?v=1769212479"></script>

<!-- Date utils (polyfills for formatHumanDate etc.) -->
<script src="/js/pages/user/register/open/modules/date_utils.js?v=1769212479"></script>
<!-- User Open Registration State Port (loads state JS once, remaps routes, binds payment) -->
<script src="/js/pages/user/register/open/register_event_users.state-port.js?v=1769212479"></script>
<script>
    // Safety: On offcanvas open, if categories are not yet populated, populate now.
    (function(){
        const oc = document.getElementById('registerUserOffcanvas');
        if (oc){
            oc.addEventListener('shown.bs.offcanvas', function(){
                try {
                    if (typeof window.$ === 'function' && typeof window.populateCategories === 'function'){
                        if ($('#category_id option').length <= 1){
                            window.populateCategories();
                        }
                    }
                } catch(_) {}
            });
        }
    })();
  // Override fetch to scope to current user only (controller already filters, this is a safety)
  if (typeof window.fetchRegisteredEventUsers === 'function'){
    const baseFetch = window.fetchRegisteredEventUsers;
    window.fetchRegisteredEventUsers = function(){ return baseFetch(); };
  }
    // Helper to show finalize summary banner
    window.showFinalizeSummary = function(summary, results){
        try{
            const wrap = document.getElementById('finalizeSummaryBanner');
            const text = document.getElementById('finalizeSummaryText');
            if (!wrap || !text) return;
            const inserted = summary?.inserted || 0;
            const skipped = summary?.skipped || 0;
            let html = `Inserted: <strong>${inserted}</strong>, Skipped: <strong>${skipped}</strong>`;
            if (Array.isArray(results) && results.length){
                const sk = results.filter(r=>r && r.success===false);
                if (sk.length){
                    const items = sk.slice(0,5).map(r=>`Row ${Number(r.index)+1}: ${(Array.isArray(r.errors)?r.errors.join('; '):'Skipped')}`);
                    html += `<br><span class="text-body-tertiary">Top skip reasons:</span><br>` + items.map(s=>`- ${s}`).join('<br>');
                    if (sk.length>5){ html += `<br>...and ${sk.length-5} more.`; }
                }
            }
            text.innerHTML = html;
            wrap.style.display = '';
            setTimeout(()=>{ try{ wrap.style.display='none'; }catch(_){} }, 12000);
        }catch(_){}
    }
</script>
@endpush