@extends('layouts.state')

@section('title', 'Events')
@section('page-title', 'Events Management')



@section('content')

<!-- Expose backend objects to JavaScript -->
<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 }},
    state_short_name: @json($state_short_name),
    age_bars: @json($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 justify-content-start">Event: {{ $event_details->title }}</h5>
            <!-- Category badges and total badge -->
            <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 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">
                <!-- <div class="row align-items-center py-0" style="min-height:22px;">
                    <div class="col">
                        <h4 class="mb-0 fw-semibold small" style="line-height:1.2;">All Applications</h4>
                    </div>
                </div>-->
               

            </div> 
            <div class="card-body p-0">
               
                <div id="registeredUsersAccordionWrapper" class="position-relative" style="min-height:calc(100vh - 210px); max-height:calc(100vh - 210px); overflow:auto;">
                    <div id="registeredUsersAccordion" class="accordion"></div>
                </div>
            </div>
        </div>
    </div>
</div>

                




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

<!-- Found User Modal & Kyorugi Batch Modal contained within offcanvas partial above -->

@endsection

@section('footer_paginator')
    <div id="laravel_paginator" class="d-flex justify-content-between align-items-center gap-2 flex-wrap">
        <div></div>
        <!-- Route-specific overall registration progress (footer only) -->
        <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('styles')
    <!-- Keep page-local wrapper styles slim; core offcanvas/table styles are in partial -->
    <style>
        /* Page-level additions only (if any). Intentionally minimal. */
    </style>
@endpush

@push('scripts')
<!-- Page-specific scripts for offcanvas functionality -->
<!-- SheetJS (xlsx) Free CDN for Excel export -->
<script src="https://cdn.sheetjs.com/xlsx-latest/package/dist/xlsx.full.min.js"></script>
 <script src="/vendors/sweetalert2/sweetalert2.all.min.js"></script>

<!-- (visualize button relocation script removed; button lives in header now) -->
@include('state.events.partials.registration_visualization')
<!-- Centralized restrictions (pure logic, no UI) -->
<script src="/js/pages/state/event/register/official/register_official_event_restrictions.js?v=1768951149"></script>
<!-- Shared utilities used by composition and main scripts -->
<script src="/js/pages/state/event/register/official/register_event_users.utils.js?v=1768951149"></script>
<!-- Segmented modules: composition must load before main -->
<script src="/js/pages/state/event/register/official/register_event_users.composition.js?v=1768951149"></script>
<!-- Main page logic -->
<script src="/js/pages/state/event/register/official/register_event_users.js?v=1768951149"></script>
<!-- Visualization module can load after main (used on-demand, overrides older impl if any) -->
<script src="/js/pages/state/event/register/official/register_event_users.visualization.js?v=1768951149"></script>
<script>
// Smoke test: ensure restrictions module is loaded and key functions exist
(function(){
    try {
        const ok = window.EventRestrictions && typeof window.EventRestrictions.checkRegistrationRestrictions === 'function' && typeof window.checkPoomsaeRestrictions === 'function';
        console.debug('Restrictions module loaded:', !!window.EventRestrictions, 'Funcs OK:', ok);
    } catch(e) { console.warn('Restrictions smoke test error', e); }
})();
</script>
<script src="/js/pages/state/event/register/official/register_event_users_export.js?v=1768951149"></script>
@endpush