@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">Fee Configuration</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="state_id" class="form-label">Venue State <span class="text-danger">*</span></label>
                            <select class="form-select required_event_inputs" id="state_id" name="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_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)->first();
                                            $hasAdmin = $stateUser !== null;
                                            $isComplete = $hasAdmin && $stateUser->profile_step == 1 && 
                                                          !empty($stateUser->fname) && !empty($stateUser->lname) && 
                                                          !empty($stateUser->mobile) && !empty($stateUser->district_id);
                                            $badge = '';
                                            if (!$hasAdmin) {
                                                $badge = ' 🚫';
                                            } elseif (!$isComplete) {
                                                $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)->first();
                                            $hasAdmin = $stateUser !== null;
                                            $isComplete = $hasAdmin && $stateUser->profile_step == 1 && 
                                                          !empty($stateUser->fname) && !empty($stateUser->lname) && 
                                                          !empty($stateUser->mobile) && !empty($stateUser->district_id);
                                            $badge = '';
                                            if (!$hasAdmin) {
                                                $badge = ' 🚫';
                                            } elseif (!$isComplete) {
                                                $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)->first();
                                            $hasAdmin = $stateUser !== null;
                                            $isComplete = $hasAdmin && $stateUser->profile_step == 1 && 
                                                          !empty($stateUser->fname) && !empty($stateUser->lname) && 
                                                          !empty($stateUser->mobile) && !empty($stateUser->district_id);
                                            $badge = '';
                                            if (!$hasAdmin) {
                                                $badge = ' 🚫';
                                            } elseif (!$isComplete) {
                                                $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-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>
                       <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>


                     
                    </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 (Simplified)</u>
                                        <small class="text-body-secondary d-block mt-1">Enter TOTAL amount for each group - system will auto-divide for teams/pairs</small>
                                    </label>
                                </div>
                                
                                <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 -->
                </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>
                        <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;
    }
</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=17691713183951"></script>
<script src="/js/pages/admin/create_event.js?v=17691713182589"></script>
<script>



    $(function () {
        // ============================================
        // PHASE 3: EVENT PREFIX VALIDATOR
        // ============================================
        
        // Attach real-time prefix validator to event title
        // EventPrefixValidator.attachValidator('#title', {
        //     groupId: 2, // Default to Open (will update dynamically)
        //     startDateSelector: '#start_datetime',
        //     realTime: true
        // });
        
        // Update validator group ID when event group changes
        // $('#group_id').on('change', function() {
        //     const groupId = parseInt($(this).val()) || 2;
        //     // Re-attach validator with new group ID
        //     EventPrefixValidator.attachValidator('#title', {
        //         groupId: groupId,
        //         startDateSelector: '#start_datetime',
        //         realTime: true
        //     });
        // });
        
        // ============================================
        // END PHASE 3 VALIDATOR
        // ============================================
        // ============================================
        // 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