@extends('layouts.admin')

@section('title', 'Create Event')
@section('page-title', 'Create New Event')

@section('content')
<div class="row g-3">
    <div class="col-12">
        <div class="card border shadow-sm" style="height: calc(100vh - 120px); display: flex; flex-direction: column;">
            <div class="card-header border-bottom bg-body position-sticky top-0" style="z-index: 10;">
                <div class="row g-3 align-items-center">
                    <div class="col-md-8">
                        <h5 class="mb-1 text-body-emphasis"><i class="uil uil-plus-circle me-2"></i>Create New Event ( <span class="small text-body-secondary">Kindly fill all required fields.</span>)</h5>
                        
                    </div>
                    <!-- <div class="col-md-4 d-flex justify-content-end">
                        <a href="{{ route('admin.events.index') }}" class="btn btn-phoenix-secondary">
                            <input type="datetime-local" class="form-control required_event_inputs" id="registration_closure_date"
                                name="registration_closure_date" placeholder="Registration Closure Datetime">
                    </div> -->
                </div>
            </div>
            <form id="createEventForm" enctype="multipart/form-data" style="flex: 1; display: flex; flex-direction: column; overflow: hidden;">
                @csrf
                
                <!-- Wizard Progress Steps -->
                <div class="border-bottom bg-light" style="padding: 1rem 0;">
                    <div class="d-flex justify-content-center">
                        <div class="d-flex align-items-center" style="max-width: 800px; width: 100%;">
                            <div class="wizard-step active" id="wizard_step_1">
                                <div class="wizard-step-circle">1</div>
                                <div class="wizard-step-label">Event Details & Config</div>
                            </div>
                            <div class="wizard-step-line"></div>
                            <div class="wizard-step" id="wizard_step_2">
                                <div class="wizard-step-circle">2</div>
                                <div class="wizard-step-label">Categories</div>
                            </div>
                            <div class="wizard-step-line"></div>
                            <div class="wizard-step" id="wizard_step_3">
                                <div class="wizard-step-circle">3</div>
                                <div class="wizard-step-label">Participant Fees</div>
                            </div>

                        </div>
                    </div>
                </div>

                <!-- Scrollable Content Area -->
                <div style="flex: 1; overflow-y: auto; padding: 1.5rem;">
                    <input type="hidden" name="_token" id="_token" value="{{ csrf_token() }}">
                    <input type="hidden" name="current_wizard_step" id="current_wizard_step" value="1">

                    <!-- STEP 1: Event Details & Configuration -->
                    <div id="wizard_step_1_content" class="wizard-content active">
                    <div class="d-flex align-items-center justify-content-center gap-4" id="cover_image_div">
                        <div class="text-center">
                            <div id="cover_image_preview"
                                style="width:120px; height:120px; border:1px solid #ddd; border-radius:8px; overflow:hidden; background:#f8f9fa; display:flex; align-items:center; justify-content:center;">
                                <span class="text-muted small">No image</span>
                            </div>
                        </div>
                        <div class="text-center">
                            <input type="file" class="required_event_inputs" name="cover_image" id="cover_image"
                                style="display: none;" accept="image/png, image/jpeg,image/jpg" placeholder="Cover Image"
                                onchange="updateFilePreview('cover_image')">
                            <button type="button" class="btn btn-primary mb-2" id="cover_image_button"
                                onclick="document.getElementById('cover_image').click();">
                                <i class="fas fa-upload"></i> Upload Cover Image
                            </button>
                            <div><span class="text-danger">*</span></div>
                            <small class="text-body-tertiary">Max file size: 300KB (JPG, PNG)</small>

                            <div><span class="text-danger small" id="error_cover_image" style="display:none;"></span></div>

                        </div>
                    </div>
                    <script>
                        /**
                         * Validate file size (in KB)
                         */
                        function validateFileSize(file, maxSizeKB) {
                            const fileSizeKB = file.size / 1024;
                            return fileSizeKB <= maxSizeKB;
                        }

                        /**
                         * Validate file type
                         */
                        function validateFileType(file, allowedTypes) {
                            const fileExtension = file.name.split('.').pop().toLowerCase();
                            return allowedTypes.includes(fileExtension);
                        }
                        /**
                        * Update file preview for cover image
                        */
                        function updateFilePreview(inputId) {
                            // alert(inputId);
                            const input = document.getElementById(inputId);
                            const preview = document.getElementById('cover_image_preview');

                            if (input.files && input.files[0]) {
                                const file = input.files[0];

                                // Validate file
                                if (!validateFileSize(file, 300)) {
                                    showFieldError(inputId, 'Cover image must be less than 300KB.');
                                    input.value = '';
                                    return;
                                }

                                if (!validateFileType(file, ['jpg', 'jpeg', 'png'])) {
                                    showFieldError(inputId, 'Cover image must be JPG or PNG format.');
                                    input.value = '';
                                    return;
                                }

                                // Clear any previous errors
                                clearFieldError(inputId);

                                // Show preview
                                const reader = new FileReader();
                                reader.onload = function (e) {
                                    preview.innerHTML = '<img src="' + e.target.result + '" style="max-width:100%; max-height:100%; object-fit:cover;">';
                                };
                                reader.readAsDataURL(file);
                            }
                        }

                        /**
                         * Show field error
                         */
                        function showFieldError(fieldId, message) {
                            // alert('#error_' + fieldId);

                            const field = $('#' + fieldId);
                            const errorSpan = $('#error_' + fieldId);

                            field.addClass('is-invalid border-danger');
                            errorSpan.text(message).show();
                        }

                        /**
                         * Clear field error
                         */
                        function clearFieldError(fieldId) {
                            const field = $('#' + fieldId);
                            const errorSpan = $('#error_' + fieldId);

                            field.removeClass('is-invalid border-danger');
                            errorSpan.text('').hide();
                        }
                    </script>
                    <div class="row g-3">
                        <div class="col-md-6">
                            <label for="title" class="form-label">Title <span class="text-danger">*</span></label>
                                <input type="text" class="form-control required_event_inputs" id="title" name="title" placeholder="Title" value="">
                        </div>
                        <div class="col-md-6">
                            <label for="group_id" class="form-label">Event Group <span
                                    class="text-danger">*</span></label>
                            <select class="form-select required_event_inputs" id="group_id" name="group_id"
                                placeholder="Event Group">
                                <option selected value="">--Select Group--</option>
                                @foreach ($event_groups as $event_group)
                                    @if($event_group->id != 3)
                                        <option value="{{ $event_group->id }}"> {{ $event_group->name }}</option>
                                    @endif
                                @endforeach
                            </select>
                            <span class="text-danger small" id="error_group_id"></span>
                            
                           
                        </div>
                        
                      
                   
                        <div class="col-md-3">
                            <label for="start_datetime" class="form-label">Event Start <span class="text-danger">*</span></label>
                            <input type="datetime-local" class="form-control required_event_inputs" id="start_datetime" name="start_datetime"
                                placeholder="Event Start">
                            <span class="text-danger small" id="error_start_datetime"></span>
                        </div>
                        <div class="col-md-3">
                            <label for="end_datetime" class="form-label">Event End <span class="text-danger">*</span></label>
                            <input type="datetime-local" class="form-control required_event_inputs" id="end_datetime" name="end_datetime"
                                placeholder="Event End">
                            <span class="text-danger small" id="error_end_datetime"></span>
                        </div>
                        <div class="col-md-6">
                            <label for="registration_closure_date" class="form-label">Registration Closure Date <span
                                    class="text-danger">*</span></label>
                                <input type="datetime-local" class="form-control required_event_inputs" id="registration_closure_date"
                                    name="registration_closure_date" placeholder="Registration Closure Datetime">
                            <span class="text-danger small" id="error_registration_closure_date"></span>
                        </div>
                        <div class="col-md-6">
                            <label for="venue_state_id" class="form-label">Venue State <span class="text-danger">*</span></label>
                            <select class="form-select required_event_inputs" id="venue_state_id" name="venue_state_id">
                                <option value="">-Select State/Union Territory/Department-</option>

                                <optgroup label="STATES">
                                    @foreach ($states as $state)
                                    @if($state->is_state == 1)
                                    <option value="{{ $state->id }}"> {{ $state->name }}</option>
                                    @endif
                                    @endforeach
                                </optgroup>

                                <optgroup label="UNION TERRITORY">
                                    @foreach ($states as $state)
                                    @if($state->is_state == 2)
                                    <option value="{{ $state->id }}"> {{ $state->name }}</option>
                                    @endif
                                    @endforeach
                                </optgroup>

                                <optgroup label="DEPARTMENTS">
                                    @foreach ($states as $state)
                                    @if($state->is_state == 3)
                                    <option value="{{ $state->id }}"> {{ $state->name }}</option>
                                    @endif
                                    @endforeach
                                </optgroup>
                            </select>
                            <span class="text-danger small" id="error_venue_state_id"></span>
                        </div>

                       

                        <!-- <div class="col-md-6">
                            <label for="location" class="form-label">Location <span class="text-danger">*</span></label>
                            <input type="text" class="form-control" id="location" name="location" >
                            <span class="text-danger small" id="error_location"></span>
                        </div> -->
                        <div class="col-6">
                            <label for="address" class="form-label">Address <span class="text-danger">*</span></label>
                            <textarea class="form-control required_event_inputs" id="address" name="address" rows="2"
                                placeholder="Address"></textarea>
                            <span class="text-danger small" id="error_address"></span>
                        </div>

                         <!-- NEW: Allowed States Multi-Select (Official Events Only) -->
                        <div class="col-md-6" id="allowed_states_container" style="display: none;">
                            <label for="allowed_state_ids" class="form-label">
                                Allowed States for Registration 
                                <span class="text-danger">*</span>
                                <i class="uil uil-info-circle text-primary ms-1" 
                                   data-bs-toggle="tooltip" 
                                   data-bs-placement="top"
                                   title="Select states that can register participants for this event. This is different from venue location."></i>
                            </label>
                            <select class="form-select" 
                                    id="allowed_state_ids" 
                                    name="allowed_state_ids[]" 
                                    multiple="multiple"
                                    size="1"
                                    data-choices="data-choices"
                                    data-options='{"removeItemButton":true,"placeholder":true,"placeholderValue":"Search and select states...","searchEnabled":true,"searchPlaceholderValue":"Type to search states..."}'>
                                <option value="">Search and select states...</option>
                                <optgroup label="STATES">
                                    @foreach ($states as $state)
                                    @if($state->is_state == 1)
                                        @php
                                            $stateUser = \App\Models\StateUser::where('state_id', $state->id)
                                                ->where('is_admin', 1)->first();
                                            $badge = '';
                                            if (!$stateUser) {
                                                $badge = ' 🚫';
                                            } elseif (empty($stateUser->password)) {
                                                $invitedDate = $stateUser->created_at;
                                                $expiryDate = $invitedDate ? $invitedDate->copy()->addHours(48) : null;
                                                $isExpired = $expiryDate ? now()->greaterThan($expiryDate) : false;
                                                if ($isExpired) {
                                                    $badge = ' ⏰';
                                                } else {
                                                    $badge = ' 📧';
                                                }
                                            } elseif ($stateUser->profile_step != 1 || 
                                                      empty($stateUser->fname) || 
                                                      empty($stateUser->lname) || 
                                                      empty($stateUser->mobile) || 
                                                      empty($stateUser->district_id)) {
                                                $badge = ' ⚠️';
                                            } else {
                                                $badge = ' ✅';
                                            }
                                        @endphp
                                    <option value="{{ $state->id }}">{{ $state->name }}{{ $badge }}</option>
                                    @endif
                                    @endforeach
                                </optgroup>

                                <optgroup label="UNION TERRITORY">
                                    @foreach ($states as $state)
                                    @if($state->is_state == 2)
                                        @php
                                            $stateUser = \App\Models\StateUser::where('state_id', $state->id)
                                                ->where('is_admin', 1)->first();
                                            $badge = '';
                                            if (!$stateUser) {
                                                $badge = ' 🚫';
                                            } elseif (empty($stateUser->password)) {
                                                $invitedDate = $stateUser->created_at;
                                                $expiryDate = $invitedDate ? $invitedDate->copy()->addHours(48) : null;
                                                $isExpired = $expiryDate ? now()->greaterThan($expiryDate) : false;
                                                if ($isExpired) {
                                                    $badge = ' ⏰';
                                                } else {
                                                    $badge = ' 📧';
                                                }
                                            } elseif ($stateUser->profile_step != 1 || 
                                                      empty($stateUser->fname) || 
                                                      empty($stateUser->lname) || 
                                                      empty($stateUser->mobile) || 
                                                      empty($stateUser->district_id)) {
                                                $badge = ' ⚠️';
                                            } else {
                                                $badge = ' ✅';
                                            }
                                        @endphp
                                    <option value="{{ $state->id }}">{{ $state->name }}{{ $badge }}</option>
                                    @endif
                                    @endforeach
                                </optgroup>

                                <optgroup label="DEPARTMENTS">
                                    @foreach ($states as $state)
                                    @if($state->is_state == 3)
                                        @php
                                            $stateUser = \App\Models\StateUser::where('state_id', $state->id)
                                                ->where('is_admin', 1)->first();
                                            $badge = '';
                                            if (!$stateUser) {
                                                $badge = ' 🚫';
                                            } elseif (empty($stateUser->password)) {
                                                $invitedDate = $stateUser->created_at;
                                                $expiryDate = $invitedDate ? $invitedDate->copy()->addHours(48) : null;
                                                $isExpired = $expiryDate ? now()->greaterThan($expiryDate) : false;
                                                if ($isExpired) {
                                                    $badge = ' ⏰';
                                                } else {
                                                    $badge = ' 📧';
                                                }
                                            } elseif ($stateUser->profile_step != 1 || 
                                                      empty($stateUser->fname) || 
                                                      empty($stateUser->lname) || 
                                                      empty($stateUser->mobile) || 
                                                      empty($stateUser->district_id)) {
                                                $badge = ' ⚠️';
                                            } else {
                                                $badge = ' ✅';
                                            }
                                        @endphp
                                    <option value="{{ $state->id }}">{{ $state->name }}{{ $badge }}</option>
                                    @endif
                                    @endforeach
                                </optgroup>
                            </select>
                            <small class="text-muted d-block mt-1">
                                <i class="uil uil-search text-primary"></i>
                                Type to search states - Select multiple states that can register
                            </small>
                            <small class="d-block mt-2">
                                <strong>Legend:</strong>
                                <span class="badge badge-phoenix badge-phoenix-success ms-2">✅ Active Admin</span>
                                <span class="badge badge-phoenix badge-phoenix-warning ms-1">📧 Invitation Sent</span>
                                <span class="badge badge-phoenix badge-phoenix-danger ms-1">⏰ Link Expired</span>
                                <span class="badge badge-phoenix badge-phoenix-warning ms-1">⚠️ Profile Incomplete</span>
                                <span class="badge badge-phoenix badge-phoenix-secondary ms-1">🚫 No Admin</span>
                            </small>
                            <!-- Warning container for state admin status -->
                            <div id="state_admin_warnings_container" class="mt-2"></div>
                            </small>
                            <span class="text-danger small" id="error_allowed_state_ids"></span>
                        </div>
                        <!-- Participant Slot Limit -->
                        <div class="col-md-6" id="participant_slot_limit_container" style="display: none;">
                            <label for="participant_slot_limit" class="form-label fw-semibold">
                                Participant Slot Limit
                                <span class="text-danger">*</span>
                                <i class="uil uil-info-circle text-primary ms-1" 
                                   data-bs-toggle="tooltip" 
                                   data-bs-placement="top"
                                   title="Official: 1 (standard) or 2/3/4/etc (multi-slot like Fed Cup). Open: Unlimited (auto-set)"></i>
                            </label>
                            <input type="number" 
                                   class="form-control form-control-lg" 
                                   name="participant_slot_limit" 
                                   id="participant_slot_limit" 
                                   min="1" 
                                   step="1"
                                   placeholder="Enter slot limit (1 for standard, 4 for Fed Cup style)" disabled>
                            <small class="text-muted d-block mt-1" id="slot_limit_hint"> 
                                <span class="badge bg-primary-subtle text-primary">Official</span>: 1 (standard) or 4 (Fed Cup style)<br>
                                <span class="badge bg-info-subtle text-info">Open</span>: Unlimited (auto-set when group selected)
                            </small>
                            <span class="text-danger small" id="error_participant_slot_limit"></span>
                        </div>

                        <!-- Officials Count -->
                        <div class="col-md-6">
                            <label for="officials_count" class="form-label fw-semibold">
                                <span class="uil uil-users-alt me-1"></span>
                                Officials Required
                                <span class="text-danger">*</span>
                                <i class="uil uil-info-circle text-primary ms-1" 
                                   data-bs-toggle="tooltip" 
                                   data-bs-placement="top"
                                   title="Number of officials needed (referees, judges, coordinators). Leave as 0 if not applicable."></i>
                            </label>
                            <input type="number" 
                                   class="form-control form-control-lg required_event_inputs" 
                                   name="officials_count" 
                                   id="officials_count" 
                                   value="1"
                                   min="1" 
                                   max="9999"
                                   step="1"
                                   placeholder="Enter number of officials needed">
                            <small class="text-muted d-block mt-1"> 
                                Officials include referees, judges, coordinators, and other event staff.
                                Minimum 1 official required.
                            </small>
                            <span class="text-danger small" id="error_officials_count"></span>
                        </div>
                       <div class="row g-3">
                        <!-- Participant Multiplier (hidden - for backward compatibility) -->
                        <input type="hidden" name="participant_multiplier" id="participant_multiplier" value="1">

                        <!-- Batch Code Generation -->
                        <div class="col-md-6 d-none">
                            <div class="card h-100 border-info">
                                <div class="card-body">
                                    <div class="d-flex justify-content-between align-items-start mb-2">
                                        <div>
                                            <h6 class="mb-1">
                                                <i class="uil uil-code-branch text-info"></i>
                                                Batch Code Generation
                                            </h6>
                                            <small class="text-muted">For Poomsae categories</small>
                                        </div>
                                        <div class="form-check form-switch">
                                            <input type="checkbox" 
                                                   class="form-check-input" 
                                                   name="requires_batch_codes" 
                                                   id="requires_batch_codes" 
                                                   value="1" 
                                                   checked
                                                   style="width: 3em; height: 1.5em;">
                                        </div>
                                    </div>
                                    <p class="small text-muted mb-0">
                                        <i class="uil uil-check-circle text-info me-1"></i>
                                        Automatically generates unique batch codes (e.g., IND-1, PAIR-1, TEAM-1) for Poomsae registrations.
                                    </p>
                                </div>
                            </div>
                            <span class="text-danger small" id="error_requires_batch_codes"></span>
                        </div>
                    </div>

                    <!-- Event Prefix Preview (Auto-generated) -->
                    </div>
                    </div>
                    <!-- END STEP 1 -->

                    <!-- STEP 2: Categories & Sub-Categories (Moved from Step 1) -->
                    <div id="wizard_step_2_content" class="wizard-content" style="display:none;">
                        <div class="row g-3">
                        <div class="col-12">
                            <div class="d-flex justify-content-between align-items-center mb-3">
                                <label class="form-label mb-0"><u>Configure Categories and Sub-Categories</u>
                                    <span class="text-danger">*</span></label>
                                <div class="form-check form-switch">
                                    <input class="form-check-input" type="checkbox" id="uniform_subcategories" 
                                           title="Apply same sub-categories to all selected categories">
                                    <label class="form-check-label" for="uniform_subcategories">
                                        <small>Apply same sub-categories to all</small>
                                    </label>
                                </div>
                            </div>
                            
                            <div class="table-responsive">
                                <table class="table table-bordered table-hover align-middle">
                                    <thead class="table-light">
                                        <tr>
                                            <th style="width: 30px;"><input type="checkbox" class="form-check-input" id="select_all_categories" title="Select all categories"></th>
                                            <th style="width: 200px;">Category</th>
                                            <th>Sub-Categories <small class="text-muted">(Select at least one)</small></th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach ($categories as $category)
                                        <tr id="category_row_{{$category->id}}" class="category-row">
                                            <td class="text-center">
                                                <input class="form-check-input category-checkbox ms-2" 
                                                       type="checkbox"
                                                       id="cat_{{$category->id}}" 
                                                       name="categories_options" 
                                                       value="{{$category->id}}" 
                                                       data-label="{{$category->name}}">
                                            </td>
                                            <td>
                                                <label for="cat_{{$category->id}}" class="mb-0 fw-semibold" style="cursor: pointer;">
                                                    {{$category->name}}
                                                </label>
                                            </td>
                                            <td>
                                                <div class="d-flex flex-wrap gap-2 subcat-container" data-category-id="{{$category->id}}">
                                                    @foreach ($sub_categories as $sub_category)
                                                    <label class="form-check form-check-inline mb-0" 
                                                           for="subcat_{{$category->id}}_{{$sub_category->id}}">
                                                        <input class="form-check-input subcat-checkbox ms-1" 
                                                               type="checkbox"
                                                               id="subcat_{{$category->id}}_{{$sub_category->id}}"
                                                               name="category_subcategories[{{$category->id}}][]"
                                                               value="{{$sub_category->id}}"
                                                               data-category-id="{{$category->id}}"
                                                               data-subcat-id="{{$sub_category->id}}"
                                                               data-label="{{$sub_category->name}}">
                                                        <span class="form-check-label ms-2">{{$sub_category->name}}</span>
                                                    </label>
                                                    @endforeach
                                                </div>
                                                <span class="text-danger small d-block mt-1 error-subcat-category" 
                                                      id="error_subcat_{{$category->id}}"></span>
                                            </td>
                                        </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                            <span class="text-danger small" id="error_categories_options"></span>
                            <span class="text-danger small d-block" id="error_sub_category_options"></span>
                        </div>
                        </div>
                    </div>
                    <!-- END STEP 2 -->

                    <!-- STEP 3: Payment & Fee Configuration -->
                    <div id="wizard_step_3_content" class="wizard-content" style="display:none;">
                        <div class="row g-3">
                            <!-- Payment Configuration -->
                            <div class="col-12">
                                <div class="border rounded p-3 bg-white">
                                    <div class="row align-items-center">
                                        <!-- Left Column: Payment Toggle -->
                                        <div class="col-md-6">
                                            <div class="form-check form-switch">
                                                <input type="checkbox" 
                                                       class="form-check-input" 
                                                       name="payment_required" 
                                                       id="payment_required" 
                                                       value="1"
                                                       style="width: 3em; height: 1.5em;">
                                                <label class="form-check-label ms-2" for="payment_required">
                                                    <strong><i class="uil uil-rupee-sign text-success me-1"></i>Accept Payments</strong>
                                                </label>
                                            </div>
                                        </div>

                                        <!-- Right Column: Payment Channels -->
                                        <div class="col-md-6" id="payment_methods_wrapper" style="display: none;">
                                            <div class="d-flex gap-3 justify-content-end align-items-center">
                                                <span class="text-muted small">Payment Channels:</span>
                                                <div class="form-check">
                                                    <input class="form-check-input" 
                                                           type="checkbox" 
                                                           name="accept_offline_payment" 
                                                           id="accept_offline_payment" 
                                                           value="1">
                                                    <label class="form-check-label" for="accept_offline_payment">
                                                        Offline
                                                    </label>
                                                </div>
                                                <div class="form-check">
                                                    <input class="form-check-input" 
                                                           type="checkbox" 
                                                           name="accept_online_payment" 
                                                           id="accept_online_payment" 
                                                           value="1">
                                                    <label class="form-check-label" for="accept_online_payment">
                                                        Online
                                                    </label>
                                                </div>
                                            </div>
                                            <span class="text-danger small d-block text-end mt-1" id="error_payment_methods"></span>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- Fee Rules Section (shown only when payment is enabled) -->
                            <div class="col-12" id="fee_rules_section" style="display: none;">
                                <hr class="my-3">
                                <div class="d-flex justify-content-between align-items-center mb-3">
                                    <label class="form-label mb-0">
                                        <u>Registration Fee Rules (Inclusive of Taxes)</u>
                                        <small class="text-body-secondary d-block mt-1">Enter Total amount for each group</small>
                                    </label>
                                </div>
                                
                                <!-- Master Fee Template Panel -->
                                <div class="card border-primary mb-3" id="master_fee_template_card" style="border-width: 2px;">
                                    <div class="card-header bg-primary-subtle d-flex justify-content-between align-items-center" 
                                         style="cursor: pointer;" 
                                         data-bs-toggle="collapse" 
                                         data-bs-target="#master_template_collapse">
                                        <div>
                                            <h6 class="mb-0 text-primary">
                                                <i class="uil uil-clipboard-notes me-2"></i>Master Fee Template 
                                            </h6>
                                            <small class="text-muted">Define once, apply to multiple categories</small>
                                        </div>
                                        <div class="d-flex align-items-center gap-2">
                                            <span class="badge bg-info" id="template_status_badge">Not Configured</span>
                                            <i class="uil uil-angle-down" id="template_collapse_icon"></i>
                                        </div>
                                    </div>
                                    <div class="collapse show" id="master_template_collapse">
                                        <div class="card-body">
                                            <!-- Template Fee Inputs -->
                                            <div class="row g-3 mb-3">
                                                <div class="col-12">
                                                    <div class="alert alert-info mb-3">
                                                        <i class="uil uil-info-circle me-1"></i>
                                                        <strong>How it works:</strong> Set your standard fee (inclusive of taxes) structure here, then apply it to selected categories below. You can always customize individual categories later.
                                                    </div>
                                                </div>
                                                
                                                <!-- Kyorugi Template -->
                                                <div class="col-md-6 master-template-kyorugi" style="display: none;">
                                                    <div class="border rounded p-3 bg-light">
                                                        <h6 class="text-primary mb-3">
                                                            <i class="uil uil-dumbbell me-1"></i>Kyorugi Template
                                                        </h6>
                                                        <div class="mb-2">
                                                            <label class="form-label small fw-semibold">Male + Female (Combined)</label>
                                                            <div class="input-group">
                                                                <span class="input-group-text"><i class="uil uil-rupee-sign"></i></span>
                                                                <input type="number" 
                                                                       class="form-control master-template-input" 
                                                                       id="master_kyorugi_fee" 
                                                                       placeholder="500" 
                                                                       min="0" 
                                                                       step="50"
                                                                       data-subcat-id="1">
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                
                                                <!-- Poomsae Template -->
                                                <div class="col-md-6 master-template-poomsae" style="display: none;">
                                                    <div class="border rounded p-3 bg-light">
                                                        <h6 class="text-success mb-3">
                                                            <i class="uil uil-users-alt me-1"></i>Poomsae Template
                                                        </h6>
                                                        <div class="row g-2">
                                                            <div class="col-6">
                                                                <label class="form-label small fw-semibold">Individual</label>
                                                                <div class="input-group input-group-sm">
                                                                    <span class="input-group-text">₹</span>
                                                                    <input type="number" 
                                                                           class="form-control master-template-input" 
                                                                           id="master_poomsae_individual" 
                                                                           placeholder="600" 
                                                                           min="0" 
                                                                           step="50"
                                                                           data-subcat-id="2"
                                                                           data-option-ids="3,6"
                                                                           data-team-size="1">
                                                                </div>
                                                                <small class="text-muted">1 member</small>
                                                            </div>
                                                            <div class="col-6">
                                                                <label class="form-label small fw-semibold">Pair</label>
                                                                <div class="input-group input-group-sm">
                                                                    <span class="input-group-text">₹</span>
                                                                    <input type="number" 
                                                                           class="form-control master-template-input" 
                                                                           id="master_poomsae_pair" 
                                                                           placeholder="800" 
                                                                           min="0" 
                                                                           step="50"
                                                                           data-subcat-id="2"
                                                                           data-option-ids="4,7"
                                                                           data-team-size="2">
                                                                </div>
                                                                <small class="text-muted">2 members</small>
                                                            </div>
                                                            <div class="col-6">
                                                                <label class="form-label small fw-semibold">Recognized Team</label>
                                                                <div class="input-group input-group-sm">
                                                                    <span class="input-group-text">₹</span>
                                                                    <input type="number" 
                                                                           class="form-control master-template-input" 
                                                                           id="master_poomsae_recognized_team" 
                                                                           placeholder="1200" 
                                                                           min="0" 
                                                                           step="50"
                                                                           data-subcat-id="2"
                                                                           data-option-ids="5"
                                                                           data-team-size="3">
                                                                </div>
                                                                <small class="text-muted">3 members</small>
                                                            </div>
                                                            <div class="col-6">
                                                                <label class="form-label small fw-semibold">Freestyle Team</label>
                                                                <div class="input-group input-group-sm">
                                                                    <span class="input-group-text">₹</span>
                                                                    <input type="number" 
                                                                           class="form-control master-template-input" 
                                                                           id="master_poomsae_freestyle_team" 
                                                                           placeholder="2400" 
                                                                           min="0" 
                                                                           step="50"
                                                                           data-subcat-id="2"
                                                                           data-option-ids="8"
                                                                           data-team-size="6">
                                                                </div>
                                                                <small class="text-muted">6 members</small>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            
                                            <!-- Bulk Action Controls -->
                                            <div class="border-top pt-3">
                                                <div class="d-flex justify-content-between align-items-center flex-wrap gap-2">
                                                    <div class="d-flex align-items-center gap-2">
                                                        <button type="button" 
                                                                class="btn btn-primary btn-sm" 
                                                                id="apply_template_to_selected_btn"
                                                                onclick="applyMasterTemplateToSelected()">
                                                            <i class="uil uil-check-circle me-1"></i>Apply to Selected Categories
                                                        </button>
                                                        <button type="button" 
                                                                class="btn btn-success btn-sm" 
                                                                id="apply_template_to_all_btn"
                                                                onclick="applyMasterTemplateToAll()">
                                                            <i class="uil uil-layer-group me-1"></i>Apply to All Categories
                                                        </button>
                                                    </div>
                                                    <div class="d-flex align-items-center gap-2">
                                                        <button type="button" 
                                                                class="btn btn-outline-secondary btn-sm" 
                                                                onclick="clearMasterTemplate()">
                                                            <i class="uil uil-redo me-1"></i>Clear Template
                                                        </button>
                                                    </div>
                                                </div>
                                                
                                                <!-- Category Selection Checklist (Initially Hidden) -->
                                                <div id="category_selection_panel" class="mt-3" style="display: none;">
                                                    <div class="border rounded p-3 bg-white">
                                                        <label class="form-label mb-2 fw-semibold">
                                                            <i class="uil uil-check-square me-1"></i>Select Categories to Apply Template:
                                                        </label>
                                                        <div id="category_checklist_container" class="d-flex flex-wrap gap-2">
                                                            <!-- Checkboxes will be dynamically inserted here -->
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                
                                <!-- Tabbed Category Fee Configuration -->
                                <div class="border rounded p-3 bg-white">
                                    <div id="fee_rules_container">
                                        <!-- Fee rules will be dynamically inserted here by JS -->
                                    </div>
                                    <div id="fee_rules_empty" class="text-center text-body-secondary py-4">
                                        <i class="uil uil-arrow-left me-1"></i>
                                        Go back to Step 2 and select categories and sub-categories to configure fee rules.
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- END STEP 3 -->

                    {{-- STEP 4 REMOVED: Officials register for free (no payment required) --}}
                    <!-- STEP 4: Official Fees Configuration
                    <div id="wizard_step_4_content" class="wizard-content" style="display:none;">
                        <div class="row g-3">
                            <div class="col-12">
                                <h4 class="mb-1 text-body-emphasis">
                                    <i class="uil uil-award me-2"></i>Step 4: Official Fees Configuration
                                </h4>
                                <p class="text-body-secondary mb-4">
                                    Configure registration fees for event officials (Coach, Manager, etc.). 
                                    <span class="badge bg-info">This step is only visible if "Payment Required" is enabled.</span>
                                </p>

                                <!-- Officials Count Display -->
                                <div class="alert alert-info d-flex align-items-center mb-4">
                                    <i class="uil uil-info-circle me-2" style="font-size: 1.5rem;"></i>
                                    <div>
                                        <strong>Officials Allowed per State:</strong> 
                                        <span id="officials_count_display" class="badge bg-primary ms-2">0</span>
                                        <small class="d-block mt-1 text-muted">
                                            This is the number of officials each state can register for this event.
                                        </small>
                                    </div>
                                </div>

                                <!-- Quick Actions -->
                                <div class="d-flex gap-2 mb-4">
                                    <button type="button" class="btn btn-sm btn-outline-primary" id="apply_uniform_official_fee">
                                        <i class="uil uil-copy me-1"></i>Apply Same Fee to All Officials
                                    </button>
                                    <button type="button" class="btn btn-sm btn-outline-secondary" id="clear_all_official_fees">
                                        <i class="uil uil-times me-1"></i>Clear All Fees
                                    </button>
                                </div>

                                <!-- Official Fees Grid -->
                                <div class="row g-3">
                                    <!-- Coach -->
                                    <div class="col-md-6 col-lg-4">
                                        <div class="card h-100 border-2" style="border-color: #667eea;">
                                            <div class="card-body">
                                                <div class="d-flex align-items-center mb-3">
                                                    <div class="bg-primary bg-opacity-10 p-2 rounded-circle me-2">
                                                        <i class="uil uil-award text-primary" style="font-size: 1.5rem;"></i>
                                                    </div>
                                                    <div>
                                                        <h6 class="mb-0 fw-bold">Coach</h6>
                                                        <small class="text-muted">Training Staff</small>
                                                    </div>
                                                </div>
                                                <div class="input-group">
                                                    <span class="input-group-text"><i class="uil uil-rupee-sign"></i></span>
                                                    <input type="number" 
                                                        class="form-control official-fee-input" 
                                                        name="official_fees[coach]" 
                                                        id="official_fee_coach"
                                                        min="0" 
                                                        max="999999" 
                                                        step="1" 
                                                        placeholder="Enter fee">
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <!-- Manager -->
                                    <div class="col-md-6 col-lg-4">
                                        <div class="card h-100 border-2" style="border-color: #667eea;">
                                            <div class="card-body">
                                                <div class="d-flex align-items-center mb-3">
                                                    <div class="bg-success bg-opacity-10 p-2 rounded-circle me-2">
                                                        <i class="uil uil-briefcase text-success" style="font-size: 1.5rem;"></i>
                                                    </div>
                                                    <div>
                                                        <h6 class="mb-0 fw-bold">Manager</h6>
                                                        <small class="text-muted">Team Management</small>
                                                    </div>
                                                </div>
                                                <div class="input-group">
                                                    <span class="input-group-text"><i class="uil uil-rupee-sign"></i></span>
                                                    <input type="number" 
                                                        class="form-control official-fee-input" 
                                                        name="official_fees[manager]" 
                                                        id="official_fee_manager"
                                                        min="0" 
                                                        max="999999" 
                                                        step="1" 
                                                        placeholder="Enter fee">
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <!-- Head of Team -->
                                    <div class="col-md-6 col-lg-4">
                                        <div class="card h-100 border-2" style="border-color: #667eea;">
                                            <div class="card-body">
                                                <div class="d-flex align-items-center mb-3">
                                                    <div class="bg-warning bg-opacity-10 p-2 rounded-circle me-2">
                                                        <i class="uil uil-star text-warning" style="font-size: 1.5rem;"></i>
                                                    </div>
                                                    <div>
                                                        <h6 class="mb-0 fw-bold">Head of Team</h6>
                                                        <small class="text-muted">Team Leader</small>
                                                    </div>
                                                </div>
                                                <div class="input-group">
                                                    <span class="input-group-text"><i class="uil uil-rupee-sign"></i></span>
                                                    <input type="number" 
                                                        class="form-control official-fee-input" 
                                                        name="official_fees[head_of_team]" 
                                                        id="official_fee_head_of_team"
                                                        min="0" 
                                                        max="999999" 
                                                        step="1" 
                                                        placeholder="Enter fee">
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <!-- Physio -->
                                    <div class="col-md-6 col-lg-4">
                                        <div class="card h-100 border-2" style="border-color: #667eea;">
                                            <div class="card-body">
                                                <div class="d-flex align-items-center mb-3">
                                                    <div class="bg-info bg-opacity-10 p-2 rounded-circle me-2">
                                                        <i class="uil uil-medkit text-info" style="font-size: 1.5rem;"></i>
                                                    </div>
                                                    <div>
                                                        <h6 class="mb-0 fw-bold">Physio</h6>
                                                        <small class="text-muted">Medical Support</small>
                                                    </div>
                                                </div>
                                                <div class="input-group">
                                                    <span class="input-group-text"><i class="uil uil-rupee-sign"></i></span>
                                                    <input type="number" 
                                                        class="form-control official-fee-input" 
                                                        name="official_fees[physio]" 
                                                        id="official_fee_physio"
                                                        min="0" 
                                                        max="999999" 
                                                        step="1" 
                                                        placeholder="Enter fee">
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <!-- Trainer -->
                                    <div class="col-md-6 col-lg-4">
                                        <div class="card h-100 border-2" style="border-color: #667eea;">
                                            <div class="card-body">
                                                <div class="d-flex align-items-center mb-3">
                                                    <div class="bg-danger bg-opacity-10 p-2 rounded-circle me-2">
                                                        <i class="uil uil-dumbbell text-danger" style="font-size: 1.5rem;"></i>
                                                    </div>
                                                    <div>
                                                        <h6 class="mb-0 fw-bold">Trainer</h6>
                                                        <small class="text-muted">Fitness Specialist</small>
                                                    </div>
                                                </div>
                                                <div class="input-group">
                                                    <span class="input-group-text"><i class="uil uil-rupee-sign"></i></span>
                                                    <input type="number" 
                                                        class="form-control official-fee-input" 
                                                        name="official_fees[trainer]" 
                                                        id="official_fee_trainer"
                                                        min="0" 
                                                        max="999999" 
                                                        step="1" 
                                                        placeholder="Enter fee">
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <!-- State President -->
                                    <div class="col-md-6 col-lg-4">
                                        <div class="card h-100 border-2" style="border-color: #667eea;">
                                            <div class="card-body">
                                                <div class="d-flex align-items-center mb-3">
                                                    <div class="bg-dark bg-opacity-10 p-2 rounded-circle me-2">
                                                        <i class="uil uil-user-circle text-dark" style="font-size: 1.5rem;"></i>
                                                    </div>
                                                    <div>
                                                        <h6 class="mb-0 fw-bold">State President</h6>
                                                        <small class="text-muted">Leadership</small>
                                                    </div>
                                                </div>
                                                <div class="input-group">
                                                    <span class="input-group-text"><i class="uil uil-rupee-sign"></i></span>
                                                    <input type="number" 
                                                        class="form-control official-fee-input" 
                                                        name="official_fees[state_president]" 
                                                        id="official_fee_state_president"
                                                        min="0" 
                                                        max="999999" 
                                                        step="1" 
                                                        placeholder="Enter fee">
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <!-- State Secretary -->
                                    <div class="col-md-6 col-lg-4">
                                        <div class="card h-100 border-2" style="border-color: #667eea;">
                                            <div class="card-body">
                                                <div class="d-flex align-items-center mb-3">
                                                    <div class="bg-secondary bg-opacity-10 p-2 rounded-circle me-2">
                                                        <i class="uil uil-clipboard-notes text-secondary" style="font-size: 1.5rem;"></i>
                                                    </div>
                                                    <div>
                                                        <h6 class="mb-0 fw-bold">State Secretary</h6>
                                                        <small class="text-muted">Administration</small>
                                                    </div>
                                                </div>
                                                <div class="input-group">
                                                    <span class="input-group-text"><i class="uil uil-rupee-sign"></i></span>
                                                    <input type="number" 
                                                        class="form-control official-fee-input" 
                                                        name="official_fees[state_secretary]" 
                                                        id="official_fee_state_secretary"
                                                        min="0" 
                                                        max="999999" 
                                                        step="1" 
                                                        placeholder="Enter fee">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <!-- Validation Summary -->
                                <div class="alert alert-light border mt-4" id="step4_validation_summary" style="display: none;">
                                    <h6 class="alert-heading mb-2">
                                        <i class="uil uil-check-circle text-success me-1"></i>Validation Summary
                                    </h6>
                                    <ul id="step4_validation_list" class="mb-0 small">
                                        <!-- Populated by JS -->
                                    </ul>
                                </div>

                                <!-- Info Note -->
                                <div class="alert alert-info mt-4">
                                    <i class="uil uil-info-circle me-2"></i>
                                    <strong>Note:</strong> 
                                    <ul class="mb-0 mt-2">
                                        <li>At least one official type must have a fee greater than zero.</li>
                                        <li>Fee amounts must be between ₹0 and ₹999,999.</li>
                                        <li>You cannot edit official fees after any state has registered officials.</li>
                                        <li>Each state can register up to the officials count specified in Step 1.</li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                    END STEP 4 -->
                </div>
                
                <!-- Sticky Footer with Wizard Navigation -->
                <div class="border-top bg-white" style="position: sticky; bottom: 0; z-index: 1000; padding: 1rem 1.5rem; box-shadow: 0 -2px 10px rgba(0,0,0,0.1);">
                    <div class="d-flex justify-content-between align-items-center gap-2">
                        <div class="d-flex gap-2">
                            <a href="{{ route('admin.events.index') }}" class="btn btn-outline-secondary"
                                id="back_to_events">
                                <i class="uil uil-arrow-left me-2"></i>Cancel
                            </a>
                            <button type="button" class="btn btn-outline-info" id="fee_help_button" data-bs-toggle="modal" data-bs-target="#feeGuidelinesModal">
                                <i class="uil uil-question-circle me-1"></i>Fee Guidelines
                            </button>
                        </div>
                        
                        <!-- Event Prefix Preview (Center) -->
                        <div class="d-flex align-items-center gap-2 px-3 py-2 rounded" style="background-color: #e7f3ff; border: 1px solid #0d6efd;">
                            <i class="uil uil-tag-alt text-primary" style="font-size: 1.2rem;"></i>
                            <div class="d-flex flex-column" style="line-height: 1.2;">
                                <small class="text-muted mb-1" style="font-size: 0.7rem;">Auto-Generated Prefix</small>
                               
                            </div>
                             <input type="text" 
                                           class="form-control form-control-sm w-auto" 
                                           id="event_prefix_preview" 
                                           name="event_prefix_preview" 
                                           readonly 
                                           disabled
                                           placeholder="Auto-generates when you enter event title..."
                                           style="background-color: #e9ecef; border-color: #dee2e6; font-weight: 600; max-width: 200px;">
                        </div>
                        
                        <div class="d-flex gap-2">
                            <button type="button" class="btn btn-secondary" id="wizard_prev_btn" style="display:none;">
                                <i class="uil uil-arrow-left me-2"></i>Previous
                            </button>
                            <button type="button" class="btn btn-primary" id="wizard_next_btn">
                                Next<i class="uil uil-arrow-right ms-2"></i>
                            </button>
                            <button type="button" class="btn btn-success" id="wizard_submit_btn" style="display:none;" onclick="validateStep3AndSubmit()">
                                <i class="uil uil-check me-2"></i>Create Event
                            </button>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

{{-- Include Common Modals and Offcanvas --}}
@include('admin.events.partials.modals')

@endsection

@push('styles')
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
<link rel="stylesheet" href="{{ asset('css/custom-badge-colors.css') }}">
<style>
    /* Wizard Steps Styling */
    .wizard-step {
        display: flex;
        flex-direction: column;
        align-items: center;
        position: relative;
        flex: 1;
    }
    .wizard-step-circle {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: #e9ecef;
        color: #6c757d;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 600;
        font-size: 16px;
        transition: all 0.3s ease;
        border: 2px solid #e9ecef;
        z-index: 2;
    }
    .wizard-step.active .wizard-step-circle {
        background: #0d6efd;
        color: white;
        border-color: #0d6efd;
        box-shadow: 0 0 0 4px rgba(13, 110, 253, 0.1);
    }
    .wizard-step.completed .wizard-step-circle {
        background: #198754;
        color: white;
        border-color: #198754;
    }
    .wizard-step-label {
        margin-top: 8px;
        font-size: 13px;
        font-weight: 500;
        color: #6c757d;
        text-align: center;
    }
    .wizard-step.active .wizard-step-label {
        color: #0d6efd;
        font-weight: 600;
    }
    .wizard-step.completed .wizard-step-label {
        color: #198754;
    }
    .wizard-step-line {
        flex: 1;
        height: 2px;
        background: #e9ecef;
        margin: 0 10px;
        align-self: flex-start;
        margin-top: 20px;
        position: relative;
        z-index: 1;
    }
    .wizard-step.completed ~ .wizard-step-line,
    .wizard-step.active ~ .wizard-step-line {
        background: #198754;
    }
    .wizard-content {
        display: none;
        animation: fadeIn 0.3s ease;
    }
    .wizard-content.active {
        display: block;
    }
    @keyframes fadeIn {
        from { opacity: 0; transform: translateY(10px); }
        to { opacity: 1; transform: translateY(0); }
    }

    .category-row {
        transition: background-color 0.2s ease;
    }
    .category-row.table-success {
        background-color: rgba(25, 135, 84, 0.05) !important;
    }
    .category-row td {
        vertical-align: middle;
    }
    .subcat-container .form-check-inline {
        margin-bottom: 0.25rem;
    }
    .table > tbody > tr > td {
        padding: 1rem;
    }
    .table > thead > tr > th {
        font-weight: 600;
        background-color: #f8f9fa;
    }
    .form-check-input:disabled {
        opacity: 0.3;
        cursor: not-allowed;
    }
    .form-check-input:disabled ~ .form-check-label {
        opacity: 0.5;
        cursor: not-allowed;
    }
    
    /* SweetAlert2 wider popup for error lists */
    .swal-wide {
        width: 600px !important;
    }
    .swal-wide .swal2-html-container {
        text-align: left !important;
        white-space: pre-line !important;
    }
    
    /* Master Fee Template Styles */
    #master_fee_template_card .collapse.show ~ .card-header #template_collapse_icon {
        transform: rotate(180deg);
        transition: transform 0.3s ease;
    }
    
    .master-template-input {
        font-weight: 600;
        font-size: 1.1rem;
    }
    
    .master-template-input:focus {
        border-color: #0d6efd;
        box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
    }
    
    #category_checklist_container .form-check {
        padding: 0.5rem 1rem;
        border: 2px solid #e9ecef;
        border-radius: 0.375rem;
        transition: all 0.2s ease;
    }
    
    #category_checklist_container .form-check:hover {
        border-color: #0d6efd;
        background-color: #f8f9fa;
    }
    
    #category_checklist_container .form-check-input:checked ~ .form-check-label {
        font-weight: 600;
        color: #0d6efd;
    }
    
    .category-tab-badge {
        font-size: 0.75rem;
        padding: 0.25rem 0.5rem;
    }
    
    /* Enhanced Tab Styling for Fee Configuration */
    .nav-tabs .nav-link {
        border: 2px solid transparent;
        color: #6c757d;
        font-weight: 500;
        padding: 0.75rem 1.25rem;
        transition: all 0.3s ease;
        background: #f8f9fa;
        margin-right: 4px;
        border-radius: 0.375rem 0.375rem 0 0;
    }

    .nav-tabs .nav-link:hover {
        background: #e9ecef;
        color: #0d6efd;
        border-color: #dee2e6 #dee2e6 #fff;
    }

    .nav-tabs .nav-link.active {
        background: #fff;
        color: #0d6efd;
        font-weight: 600;
        border-color: #0d6efd #0d6efd #fff;
        box-shadow: 0 -2px 8px rgba(13, 110, 253, 0.15);
        position: relative;
        z-index: 1;
    }

    .nav-tabs .nav-link.active .category-tab-badge {
        animation: subtlePulse 2s ease-in-out infinite;
    }

    @keyframes subtlePulse {
        0%, 100% { transform: scale(1); }
        50% { transform: scale(1.05); }
    }

    .tab-content {
        border: 2px solid #dee2e6;
        border-top: 2px solid #0d6efd;
        border-radius: 0 0.375rem 0.375rem 0.375rem;
        padding: 1.5rem;
        background: #fff;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    }

    .tab-content .tab-pane {
        animation: tabFadeIn 0.3s ease;
    }

    @keyframes tabFadeIn {
        from {
            opacity: 0;
            transform: translateY(-10px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
</style>
@endpush
@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11.11.1/dist/sweetalert2.all.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
<script>
    // Event fee configuration data
    window.eventFeeConfig = {
        categories: @json($categories),
        sub_categories: @json($sub_categories),
        sub_cat_options: @json($sub_cat_options)
    };
</script>
<script src="/js/pages/admin/event_common.js?v=17755686304183"></script>
<script src="/js/pages/admin/event_fee_template.js?v=17755686307125"></script>
<script src="/js/pages/admin/create_event.js?v=17755686304352"></script>
<script>



    $(function () {
        // ============================================
        // PHASE 3: EVENT PREFIX REAL-TIME PREVIEW
        // ============================================
        
        let prefixUpdateTimeout;
        
        /**
         * Generate event prefix preview from title
         * Mimics backend algorithm for client-side preview
         */
        function generatePrefixPreview(title) {
            if (!title || title.trim().length === 0) {
                return '';
            }
            
            // Remove stopwords and split into words
            const stopwords = ['the', 'a', 'an', 'of', 'for', 'in', 'on', 'at', 'to', 'and', 'or'];
            const words = title.toLowerCase()
                .split(/[\s\-_]+/)
                .map(w => w.trim())
                .filter(w => w.length > 0 && 
                            !stopwords.includes(w) && 
                            !(/^\d+$/.test(w)) && 
                            w.length !== 8); // Exclude 8-digit dates
            
            // Extract first letter of each word (max 4)
            let basePrefix = words.slice(0, 4)
                .map(w => w.charAt(0).toUpperCase())
                .join('');
            
            // Fallback to uppercase letters if insufficient
            if (basePrefix.length === 0) {
                const uppercase = title.match(/[A-Z]/g);
                if (uppercase && uppercase.length > 0) {
                    basePrefix = uppercase.slice(0, 4).join('');
                } else {
                    basePrefix = 'EV'; // Final fallback
                }
            }
            
            // Add year suffix (current year, 2-digit)
            const year = new Date().getFullYear().toString().slice(-2);
            const prefixWithYear = basePrefix.substring(0, 4) + year;
            
            return prefixWithYear;
        }
        
        /**
         * Update prefix preview field
         */
        function updatePrefixPreview() {
            const title = $('#title').val();
            const prefix = generatePrefixPreview(title);
            
            $('#event_prefix_preview').val(prefix);
            $('#prefix_example').text(prefix || 'FECU26');
            
            // Optional: Validate uniqueness via AJAX (debounced)
            if (prefix.length > 0) {
                clearTimeout(prefixUpdateTimeout);
                prefixUpdateTimeout = setTimeout(() => {
                    validatePrefixUniqueness(prefix);
                }, 300); // 300ms debounce
            }
        }
        
        /**
         * Validate prefix uniqueness via AJAX
         */
        function validatePrefixUniqueness(prefix) {
            $.ajax({
                url: '{{ route("admin.events.validate_prefix") }}',
                method: 'POST',
                data: {
                    prefix: prefix,
                    _token: '{{ csrf_token() }}'
                },
                success: function(response) {
                    const $preview = $('#event_prefix_preview');
                    
                    if (response.valid) {
                        $preview.removeClass('border-warning border-danger')
                                .addClass('border-success');
                    } else {
                        $preview.removeClass('border-success border-danger')
                                .addClass('border-warning');
                    }
                },
                error: function() {
                    // Silently ignore validation errors (non-critical)
                }
            });
        }
        
        // Attach event listener to title field
        $('#title').on('input keyup', updatePrefixPreview);
        
        // Update on page load if title exists
        if ($('#title').val()) {
            updatePrefixPreview();
        }
        
        // ============================================
        // END PHASE 3 PREFIX PREVIEW
        // ============================================
        
        // ============================================
        // MULTI-STATE CONFIGURATION (Phase 2)
        // ============================================
        
        // Show/hide multi-select based on Event Group
        // Choices.js auto-initializes via data-choices attribute
        $('#group_id').on('change', function() {
            const groupId = parseInt($(this).val());
            const $allowedStatesContainer = $('#allowed_states_container');
            
            if (groupId === 1) { 
                // Official Event - Show multi-select
                $allowedStatesContainer.slideDown(300);
            } else { 
                // Open Event or Custom - Hide multi-select
                $allowedStatesContainer.slideUp(300);
                
                // Clear selections via Choices.js instance
                const selectElement = document.getElementById('allowed_state_ids');
                if (selectElement && selectElement.choices) {
                    selectElement.choices.removeActiveItems();
                }
                
                // Clear error messages
                $('#error_allowed_state_ids').text('').hide();
            }
        });
        
        // Trigger on page load if group is pre-selected
        if ($('#group_id').val() == 1) {
            $('#group_id').trigger('change');
        }
        
        // ============================================
        // END MULTI-STATE CONFIGURATION
        // ============================================

        // Example: Populate select and categories dynamically if needed
        // $('#group_id').append('<option value="1">Group 1</option>');
        // $('#').append('<option value="1">State 1</option>');
        // $('#categories_container').append('<div class="form-check form-check-inline"><input class="form-check-input" type="checkbox" name="category_ids[]" id="cat_1" value="1"><label class="form-check-label" for="cat_1">Category 1</label></div>');

        // Form validation and AJAX submit

        // REFACTORED: Auto-configure participant_slot_limit based on Event Group (Phase 3)
        $('#group_id').on('change', function() {
            const groupId = parseInt($(this).val());
            const $slotInput = $('#participant_slot_limit');
            const $slotContainer = $('#participant_slot_limit_container');
            const $hintText = $('#slot_limit_hint');
            
            if (groupId === 1) { 
                // Official Event - Show field and default to 1 (admin can change to 4 for Fed Cup style)
                $slotContainer.slideDown(300);
                $slotInput.val('1');
                $slotInput.prop('disabled', false);
                $slotInput.prop('readonly', false);
                $slotInput.css({'background-color': '', 'cursor': ''});
                $hintText.html(
                    '<span class="badge bg-primary-subtle text-primary">Official</span>: Default 1 (you can change to 4 for Fed Cup style)'
                );
                
            } else if (groupId === 2) { 
                // Open Event - Show field but make it read-only Unlimited (NULL)
                $slotContainer.slideDown(300);
                $slotInput.val('');
                $slotInput.prop('disabled', true);
                $slotInput.prop('readonly', true);
                $slotInput.css({'background-color': '#f8f9fa', 'cursor': 'not-allowed'});
                $hintText.html(
                    '<span class="badge bg-info-subtle text-info">Open</span>: Unlimited participants (automatic)'
                );
                
            } else {
                // No group selected - Hide field
                $slotContainer.slideUp(300);
                $slotInput.val('');
                $slotInput.prop('disabled', true);
                $hintText.html('Please select Event Group first');
            }
            
            // Update participant_multiplier for backward compatibility
            const slotValue = $slotInput.val() || '1';
            $('#participant_multiplier').val(slotValue);
        });

        // Show confirmation if entering multi-slot value (e.g., 4 participants per registration)
        // $('#participant_slot_limit').on('change', function() {
        //     const slotValue = parseInt($(this).val());
            
        //     if (slotValue === 4) {
        //         toastr.info('Multi-slot configuration: 4 participants per registration', 'Multi-Slot Event');
        //     }
            
        //     // Update multiplier
        //     $('#participant_multiplier').val(slotValue || '1');
        // });

        // Initialize Bootstrap tooltips
        $('[data-bs-toggle="tooltip"]').tooltip();

        // ============================================
        // PAYMENT CONFIGURATION HANDLERS (Phase 4)
        // ============================================
        
        // Payment toggle handler - show/hide payment methods and fee section
        $('#payment_required').on('change', function() {
            const isChecked = $(this).is(':checked');
            const $methodsWrapper = $('#payment_methods_wrapper');
            const $feeSection = $('#fee_rules_section');
            
            if (isChecked) {
                $methodsWrapper.slideDown(300);
                // Only show fee rules if there are selected categories
                if ($('.category-checkbox:checked').length > 0) {
                    $feeSection.slideDown(300);
                    if (typeof rebuildFeeRulesSection === 'function') {
                        rebuildFeeRulesSection();
                    }
                }
                validatePaymentMethods();
            } else {
                // Reset and hide
                $('#accept_offline_payment').prop('checked', false);
                $('#accept_online_payment').prop('checked', false);
                $methodsWrapper.slideUp(300);
                $feeSection.slideUp(300);
                $('#error_payment_methods').text('');
                
                // Clear all fee inputs
                $('[name^="fees["]').val('');
            }
        });

        // Payment method checkboxes change handler
        $('#accept_offline_payment, #accept_online_payment').on('change', function() {
            validatePaymentMethods();
        });

        // Validate at least one payment method is selected
        function validatePaymentMethods() {
            const paymentRequired = $('#payment_required').is(':checked');
            const offlineChecked = $('#accept_offline_payment').is(':checked');
            const onlineChecked = $('#accept_online_payment').is(':checked');
            const $errorSpan = $('#error_payment_methods');
            
            if (paymentRequired && !offlineChecked && !onlineChecked) {
                $errorSpan.text('Select at least one channel');
                return false;
            } else {
                $errorSpan.text('');
                return true;
            }
        }

        // Initialize payment UI on page load
        if ($('#payment_required').is(':checked')) {
            $('#payment_methods_wrapper').show();
            // Only show fee rules if there are selected categories
            if ($('.category-checkbox:checked').length > 0) {
                $('#fee_rules_section').show();
            } else {
                $('#fee_rules_section').hide();
            }
        } else {
            $('#payment_methods_wrapper').hide();
            $('#fee_rules_section').hide();
        }

        // Back to events button handler
        $('#back_to_events').on('click', function (e) {
            event.preventDefault();
            window.location.href = '/admin/events'; // Change to your route
        });
    });
</script>
@endpush