@extends('layouts.admin')

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

@section('content')
@php
    // Check if event has participants (lock critical fields if yes)
    $hasParticipants = \App\Models\EventParticipant::where('event_id', $event->id)->exists();
    $participantCount = \App\Models\EventParticipant::where('event_id', $event->id)->count();
@endphp

<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>Edit 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">
                            <span class="fas fa-arrow-left me-2"></span>Back to Events
                        </a>
                    </div> -->
                </div>
            </div>
            <form id="editEventForm" 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_edit_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_edit_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_edit_3">
                                <div class="wizard-step-circle">3</div>
                                <div class="wizard-step-label">Fee Configuration</div>
                            </div>
                        </div>
                    </div>
                    @if($has_participants)
                    <div class="alert alert-warning mb-0 rounded-0 border-0 border-top" style="margin-top: 1rem;">
                        <i class="uil uil-exclamation-triangle me-2"></i>
                        <strong>Warning:</strong> This event has <strong>{{ $participants_count }} registered participant(s)</strong>. 
                        Categories and fee configuration are locked to preserve data integrity.
                    </div>
                    @endif
                </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="event_id" id="event_id" value="{{ $event->id }}">
                    <input type="hidden" name="current_wizard_step" id="current_wizard_step_edit" value="1">
                    <input type="hidden" name="has_participants" id="has_participants" value="{{ $has_participants ? '1' : '0' }}">

                    <!-- STEP 1: Event Details & Configuration -->
                    <div id="wizard_step_edit_1_content" class="wizard-content active">
                    <div class="d-flex align-items-center justify-content-center gap-4 mb-3">
                        <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;">
                                
                            @if($event->coverImage)
                            <img src="{{  $event->coverImage }}" alt="Event Image"
                                style="max-width:100%; max-height:100%; object-fit:cover;">
                            @else
                            <span class="text-muted small">No image</span>
                            @endif
                            </div>
                        </div>
                        <div class="text-center">
                            <input type="file" class="state-required" name="cover_image" id="cover_image"
                                style="display: none;" accept="image/png, image/jpeg,image/jpg"
                                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>
                            <span class="text-danger small" id="error_cover_image" style="display:none;"></span>
                        </div>
                        <!-- <div id="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;">

                            @if($event->coverImage)
                            <img src="{{  $event->coverImage }}" alt="Event Image"
                                style="max-width:100%; max-height:100%; object-fit:cover;">
                            @else
                            <span class="text-muted small">No image</span>
                            @endif


                        </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) {
                            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="{{$event->title}}">
                        </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" disabled>
                                <option selected value="">--Select Group--</option>
                                @foreach ($event_groups as $event_group)
                                    @if($event_group->id != 3)
                                        @if ($event_group->id == $event->group_id)
                                            <option value="{{ $event_group->id }}" selected> {{ $event_group->name }}</option>
                                        @else
                                            <option value="{{ $event_group->id }}"> {{ $event_group->name }}</option>
                                        @endif
                                    @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" value="{{ isset($event->start_datetime) ? date('Y-m-d\\TH:i', strtotime($event->start_datetime)) : '' }}">
                            <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" value="{{ isset($event->end_datetime) ? date('Y-m-d\\TH:i', strtotime($event->end_datetime)) : '' }}">
                            <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"
                                value="{{ $event->registration_closure_date ? date('Y-m-d\\TH:i', strtotime($event->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" id="state_id" name="state_id" disabled="true" style="opacity: 0.6; cursor: not-allowed;">
                                <option value="">-Select State/Union Territory/Department-</option>

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

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

                                <optgroup label="DEPARTMENTS">
                                    @foreach ($states as $state)
                                    @if($state->is_state == 3)
                                    @if($state->id == $event->state_id)
                                    <option value="{{ $state->id }}" selected> {{ $state->name }}</option>
                                    @else
                                    <option value="{{ $state->id }}"> {{ $state->name }}</option>
                                    @endif
                                    @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">{{$event->address}}</textarea>
                            <span class="text-danger small" id="error_address"></span>
                        </div>

                         <!-- Allowed States Multi-Select (Phase 5) -->
                        @php
                            $allowedStateIds = $event->states()->pluck('state_id')->toArray();
                            $lockedStateIds = $event->getLockedStateIds();
                        @endphp
                        
                        {{-- DEBUG: Allowed State IDs from backend: {{ json_encode($allowedStateIds) }} --}}
                        
                        <div class="col-md-6" id="allowed_states_container_edit" style="@if($event->group_id != 1) display:none; @endif">
                            <label class="form-label fw-semibold" for="allowed_state_ids_edit">
                                <i class="uil uil-map-marker me-1"></i>
                                Allowed States for Registration
                                <span class="text-danger">*</span>
                                @if(count($lockedStateIds) > 0)
                                    <span class="badge bg-warning-subtle text-warning ms-2">
                                        <i class="uil uil-lock"></i> {{ count($lockedStateIds) }} Locked
                                    </span>
                                @endif
                            </label>
                            
                            {{-- Store pre-selected state IDs in a data attribute BEFORE Choices.js initialization --}}
                            <input type="hidden" id="preselected_state_ids" value="{{ json_encode($allowedStateIds) }}">
                            
                            <script>
                                // Immediate debug log to verify data is in HTML
                                console.log('BLADE DEBUG: Allowed State IDs from backend:', {!! json_encode($allowedStateIds) !!});
                            </script>
                            
                            <select id="allowed_state_ids_edit" 
                                    name="allowed_state_ids[]" 
                                    class="form-control"
                                    multiple="multiple" 
                                    size="1">
                                {{-- Removed data-choices attribute - will initialize manually --}}
                                
                                <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 }}" 
                                                    @if(in_array($state->id, $allowedStateIds)) selected @endif
                                                    @if(in_array($state->id, $lockedStateIds)) data-custom-properties='{"locked":true}' disabled @endif>
                                                {{ $state->name }}{{ $badge }}
                                                @if(in_array($state->id, $lockedStateIds))
                                                    🔒 ({{ $event->getParticipantCountForState($state->id) }} participants)
                                                @endif
                                            </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 }}" 
                                                    @if(in_array($state->id, $allowedStateIds)) selected @endif
                                                    @if(in_array($state->id, $lockedStateIds)) data-custom-properties='{"locked":true}' disabled @endif>
                                                {{ $state->name }}{{ $badge }}
                                                @if(in_array($state->id, $lockedStateIds))
                                                    🔒 ({{ $event->getParticipantCountForState($state->id) }} participants)
                                                @endif
                                            </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 }}" 
                                                    @if(in_array($state->id, $allowedStateIds)) selected @endif
                                                    @if(in_array($state->id, $lockedStateIds)) data-custom-properties='{"locked":true}' disabled @endif>
                                                {{ $state->name }}{{ $badge }}
                                                @if(in_array($state->id, $lockedStateIds))
                                                    🔒 ({{ $event->getParticipantCountForState($state->id) }} participants)
                                                @endif
                                            </option>
                                        @endif
                                    @endforeach
                                </optgroup>
                            </select>
                            
                            <small class="text-muted d-block mt-2">
                                <i class="uil uil-search"></i>
                                Type to search and select multiple states.
                                @if(count($lockedStateIds) > 0)
                                    <span class="text-warning d-block mt-1">
                                        <i class="uil uil-lock"></i>
                                        States with participants (🔒) cannot be removed.
                                    </span>
                                @endif
                            </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_edit" class="mt-2"></div>
                            <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" @if(!$hasParticipants && !$event->participant_slot_limit) style="display: none;" @endif>
                            <label for="participant_slot_limit" class="form-label fw-semibold">
                                Participant Slot Limit
                                <span class="text-danger">*</span>
                                @if($hasParticipants)
                                    <span class="badge bg-warning-subtle text-warning ms-2">
                                        <i class="uil uil-lock"></i> Locked
                                    </span>
                                @endif
                                <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). Open: Unlimited. Locked after registrations."></i>
                            </label>
                            <input type="number" 
                                   class="form-control form-control-lg @if($hasParticipants) bg-light @endif" 
                                   name="participant_slot_limit" 
                                   id="participant_slot_limit" 
                                   min="1" 
                                   step="1"
                                   value="{{ $event->participant_slot_limit ?? '' }}"
                                   placeholder="Slot limit"
                                   @if($hasParticipants) readonly disabled style="opacity: 0.6; cursor: not-allowed;" @endif>
                            
                            @if($hasParticipants)
                                <div class="alert alert-warning mt-2 p-2">
                                    <small>
                                        <i class="uil uil-exclamation-triangle me-1"></i>
                                        <strong>Cannot modify:</strong> Slot limit locked after participants registered.
                                        <span class="badge bg-warning text-dark ms-1">{{ $participantCount }} participant(s)</span>
                                    </small>
                                </div>
                            @else
                                <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 (leave empty)
                                </small>
                            @endif
                            
                            <span class="text-danger small" id="error_participant_slot_limit"></span>
                        </div>

                        <!-- Participant Multiplier (hidden - for backward compatibility) -->
                        <input type="hidden" name="participant_multiplier" id="participant_multiplier" value="{{ $event->participant_multiplier ?? 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" 
                                                   {{ ($event->requires_batch_codes ?? 0) ? '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>
                    <!-- END STEP 1 -->

                    <!-- STEP 2: Categories & Sub-Categories (Moved from Step 1) -->
                    <div id="wizard_step_edit_2_content" class="wizard-content" style="display:none;">
                        <div class="row g-3">
                        <!-- Enhanced Sub-Category Configuration (Category-specific) -->
                        <div class="col-12">
                            <div class="d-flex justify-content-between align-items-center mb-3">
                                <label class="form-label mb-0"><u>Configure Sub-Categories for Each Category</u>
                                    <span class="text-danger">*</span></label>
                                <div class="form-check form-switch">
                                    <input class="form-check-input" type="checkbox" id="uniform_subcategories_edit" disabled>
                                    <label class="form-check-label" for="uniform_subcategories_edit">
                                        <small>Apply same sub-categories to all</small>
                                    </label>
                                </div>
                            </div>

                            @php
                                $eventCategoryIds = array_filter(array_map('intval', explode(',', $event->category_ids)));
                                $categorySubcatMapping = $event->getCategorySubCategoryMapping();
                                // Debug: Check the mapping structure
                                // dd($categorySubcatMapping);
                            @endphp

                            <div class="table-responsive">
                                <table class="table table-bordered table-hover align-middle">
                                    <thead class="table-light">
                                        <tr>
                                            <th style="width: 30px;"></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)
                                            @php
                                                $isCategorySelected = in_array($category->id, $eventCategoryIds);
                                            @endphp
                                            <tr id="category_row_edit_{{$category->id}}" class="category-row {{ $isCategorySelected ? 'table-success' : '' }}">
                                                <td class="text-center">
                                                    <input class="form-check-input category-checkbox-edit ms-2" 
                                                           type="checkbox"
                                                           id="cat_edit_{{$category->id}}" 
                                                           name="categories_options" 
                                                           value="{{$category->id}}" 
                                                           data-label="{{$category->name}}"
                                                           {{ $isCategorySelected ? 'checked' : '' }}
                                                           {{ $has_participants ? 'disabled' : '' }}>
                                                </td>
                                                <td>
                                                    <label for="cat_edit_{{$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-edit" data-category-id="{{$category->id}}">
                                                        @foreach ($sub_categories as $sub_category)
                                                            @php
                                                                $isSelected = isset($categorySubcatMapping[$category->id]) && 
                                                                             in_array($sub_category->id, $categorySubcatMapping[$category->id]);
                                                            @endphp
                                                            <label class="form-check form-check-inline mb-0" 
                                                                   for="subcat_edit_{{$category->id}}_{{$sub_category->id}}">
                                                                <input class="form-check-input subcat-checkbox-edit" 
                                                                       type="checkbox"
                                                                       id="subcat_edit_{{$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}}"
                                                                       {{ $isSelected ? 'checked' : '' }}
                                                                       {{ $has_participants || !$isCategorySelected ? 'disabled' : '' }}>
                                                                <span class="form-check-label">{{$sub_category->name}}</span>
                                                            </label>
                                                        @endforeach
                                                    </div>
                                                    <span class="text-danger small d-block mt-1 error-subcat-category" 
                                                          id="error_subcat_edit_{{$category->id}}"></span>
                                                </td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                            <span class="text-danger small" id="error_sub_category_options"></span>
                        </div>
                        </div>
                    </div>
                    <!-- END STEP 2 -->

                    <!-- STEP 3: Payment & Fee Configuration -->
                    <div id="wizard_step_edit_3_content" class="wizard-content" style="display:none;">
                        <div class="row g-3">
                            <!-- Payment Configuration -->
                            <div class="col-12">
                                @if($has_participants)
                                <div class="alert alert-warning d-flex align-items-center mb-3">
                                    <i class="uil uil-exclamation-triangle me-2 fs-4"></i>
                                    <div>
                                        <strong>Payment Configuration Locked</strong>
                                        <p class="mb-0 small">This event has {{ $participantCount }} registered participants. Payment settings cannot be modified to prevent registration disruption.</p>
                                    </div>
                                </div>
                                @endif

                                <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" 
                                                       {{ ($event->payment_required ?? 1) ? 'checked' : '' }}
                                                       {{ $has_participants ? 'disabled' : '' }}
                                                       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: {{ ($event->payment_required ?? 1) ? 'block' : '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" 
                                                           {{ ($event->accept_offline_payment ?? 1) ? 'checked' : '' }}
                                                           {{ $has_participants ? 'disabled' : '' }}>
                                                    <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" 
                                                           {{ ($event->accept_online_payment ?? 1) ? 'checked' : '' }}
                                                           {{ $has_participants ? 'disabled' : '' }}>
                                                    <label class="form-check-label" for="accept_online_payment">
                                                        Online
                                                    </label>
                                                </div>
                                            </div>
                                            @if(!$has_participants)
                                            <span class="text-danger small d-block text-end mt-1" id="error_payment_methods"></span>
                                            @endif
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- Fee Rules Section (shown only when payment is enabled) -->
                            <div class="col-12" id="fee_rules_section_edit" style="display: {{ ($event->payment_required ?? 1) ? 'block' : '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">
                                            @if($has_participants)
                                                <span class="badge bg-warning text-dark"><i class="uil uil-lock me-1"></i>Locked - Event has participants</span>
                                            @else
                                                Enter TOTAL amount for each group - system will auto-divide for teams/pairs
                                            @endif
                                        </small>
                                    </label>
                                </div>
                                
                                <div class="border rounded p-3 bg-white">
                                    <div id="fee_rules_container_edit">
                                        <!-- Fee rules will be dynamically inserted here by JS -->
                                    </div>
                                    <div id="fee_rules_empty_edit" 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_edit" 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_edit">
                                Next<i class="uil uil-arrow-right ms-2"></i>
                            </button>
                            <button type="button" class="btn btn-success" id="wizard_submit_btn_edit" style="display:none;" onclick="validateEditStep3AndSubmit();">
                                <i class="uil uil-check me-2"></i>Update Event
                            </button>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

@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 td {
        vertical-align: middle;
    }
    .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 for edit mode
    window.eventFeeConfigEdit = {
        categories: @json($categories),
        sub_categories: @json($sub_categories),
        sub_cat_options: @json($sub_cat_options),
        existing_fees: @json($existing_fees),
        has_participants: {{ $has_participants ? 'true' : 'false' }}
    };
</script>
<!-- <script src="/js/modules/event_prefix_validator.js?v=17695119615864"></script> -->
<script src="/js/pages/admin/event_common.js?v=17695119614241"></script>
<script src="/js/pages/admin/create_event.js?v=17695119618558"></script>
<script src="/js/pages/admin/edit_event_wizard.js?v=17695119612152"></script>
<script>

    $(function () {
        // ============================================
        // PHASE 3: EVENT PREFIX VALIDATOR (EDIT MODE)
        // ============================================
        
        // Attach real-time prefix validator to event title
        // const currentGroupId = parseInt($('#group_id').val()) || {{ $event->group_id }};
        // EventPrefixValidator.attachValidator('#title', {
        //     groupId: currentGroupId,
        //     startDateSelector: '#start_datetime',
        //     realTime: true
        // });
        
        // // Update validator group ID when event group changes
        // $('#group_id').on('change', function() {
        //     const groupId = parseInt($(this).val()) || 2;
        //     EventPrefixValidator.attachValidator('#title', {
        //         groupId: groupId,
        //         startDateSelector: '#start_datetime',
        //         realTime: true
        //     });
        // });
        
        // ============================================
        // END PHASE 3 VALIDATOR
        // ============================================
        
        $('#back_to_events').on('click', function (e) {
            e.preventDefault();
            window.location.href = '/admin/events';
        });
        
        // Toggle slot limit info on icon click
        $('#slot_limit_info_icon').on('click', function() {
            $('#slot_limit_info').slideToggle();
        });
        
        // Initialize Bootstrap tooltips
        $('[data-bs-toggle="tooltip"]').tooltip();
        
        // If group is Official (id=1), lock venue state selection
        function applyVenueLock(){
            var gid = $('#group_id').val();
            if (String(gid) === '1' || String(gid) === '3') {
                $('#state_id').prop('disabled', true).addClass('opacity-75');
            } else {
                $('#state_id').prop('disabled', false).removeClass('opacity-75');
            }
        }
        applyVenueLock();
        $('#group_id').on('change', applyVenueLock);
        
        @if(!$hasParticipants)
        // Handle Participant Slot Limit visibility based on Event Group (only if not locked)
        $('#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 set default to 1 if empty
                $slotContainer.slideDown(300);
                if (!$slotInput.val()) {
                    $slotInput.val('1');
                }
                $slotInput.prop('disabled', false);
                $slotInput.prop('readonly', false);
                $slotInput.css({'background-color': '', 'cursor': ''});
                if ($hintText.length) {
                    $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
                $slotContainer.slideDown(300);
                $slotInput.val('');
                $slotInput.prop('disabled', true);
                $slotInput.prop('readonly', true);
                $slotInput.css({'background-color': '#f8f9fa', 'cursor': 'not-allowed'});
                if ($hintText.length) {
                    $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);
            }
        });
        @endif

        // ============================================
        // PAYMENT CONFIGURATION HANDLERS (Phase 4)
        // ============================================
        
        @if(!$has_participants)
        // Payment toggle handler - show/hide payment methods and fee section (only if not locked)
        $('#payment_required').on('change', function() {
            const isChecked = $(this).is(':checked');
            const $methodsWrapper = $('#payment_methods_wrapper');
            const $feeSection = $('#fee_rules_section_edit');
            
            if (isChecked) {
                $methodsWrapper.slideDown(300);
                // Only show fee rules if there are selected categories
                if ($('.category-checkbox:checked').length > 0 || $('.subcat-checkbox-edit:checked').length > 0) {
                    $feeSection.slideDown(300);
                }
                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;
            }
        }
        @endif

        // 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 || $('.subcat-checkbox-edit:checked').length > 0) {
                $('#fee_rules_section_edit').show();
            } else {
                $('#fee_rules_section_edit').hide();
            }
        } else {
            $('#payment_methods_wrapper').hide();
            $('#fee_rules_section_edit').hide();
        }
    });

    // ============================================
    // FIX: Manually initialize Choices.js for edit mode with pre-selected states
    // ============================================
    
    /**
     * Initialize Choices.js and set pre-selected states for edit mode
     * Phoenix's auto-init wasn't working, so we do it manually
     */
    function initializeEditModeStates() {
        console.log('Edit Mode: Starting manual initialization...');
        
        const allowedStatesSelect = document.getElementById('allowed_state_ids_edit');
        const preselectedInput = document.getElementById('preselected_state_ids');
        
        if (!allowedStatesSelect) {
            console.error('Edit Mode: Select element not found');
            return;
        }
        
        if (!preselectedInput) {
            console.error('Edit Mode: Hidden input with preselected IDs not found');
            return;
        }
        
        // Parse the pre-selected state IDs from hidden input
        let preselectedIds = [];
        try {
            preselectedIds = JSON.parse(preselectedInput.value);
            console.log('Edit Mode: Pre-selected state IDs from backend:', preselectedIds);
        } catch (e) {
            console.error('Edit Mode: Failed to parse preselected IDs', e);
            return;
        }
        
        // Check if Choices is available
        if (typeof Choices === 'undefined') {
            console.error('Edit Mode: Choices.js library not loaded!');
            return;
        }
        
        // Destroy existing instance if any
        if (allowedStatesSelect.choices) {
            console.log('Edit Mode: Destroying existing Choices instance');
            allowedStatesSelect.choices.destroy();
        }
        
        console.log('Edit Mode: Creating new Choices instance...');
        
        try {
            // Manually create Choices instance with our configuration
            const choicesInstance = new Choices(allowedStatesSelect, {
                removeItemButton: true,
                placeholder: true,
                placeholderValue: 'Type to search states...',
                searchEnabled: true,
                searchPlaceholderValue: 'Type to search states...',
                allowHTML: true,
                shouldSort: false,
                itemSelectText: ''
            });
            
            console.log('Edit Mode: Choices instance created successfully');
            
            // Store instance on element for future reference
            allowedStatesSelect.choices = choicesInstance;
            
            // Set pre-selected values if any
            if (preselectedIds && preselectedIds.length > 0) {
                console.log('Edit Mode: Setting pre-selected values:', preselectedIds);
                
                // Convert to strings
                const stringIds = preselectedIds.map(id => String(id));
                
                // Set values via Choices API
                choicesInstance.setChoiceByValue(stringIds);
                
                console.log('Edit Mode: Pre-selected values set successfully');
                
                // Trigger change event for state admin checking after a delay
                setTimeout(function() {
                    console.log('Edit Mode: Triggering change event for state admin check');
                    $('#allowed_state_ids_edit').trigger('change');
                }, 300);
            } else {
                console.log('Edit Mode: No states to pre-select');
            }
            
        } catch (e) {
            console.error('Edit Mode: Failed to create Choices instance:', e);
            
            // Fallback: manually mark options as selected
            if (preselectedIds && preselectedIds.length > 0) {
                console.log('Edit Mode: Using fallback - manually selecting options');
                preselectedIds.forEach(id => {
                    const option = allowedStatesSelect.querySelector(`option[value="${id}"]`);
                    if (option) {
                        option.selected = true;
                    }
                });
            }
        }
    }
    
    // Wait for DOM and other scripts to load, then initialize
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', function() {
            // Wait a bit longer to ensure Choices.js library is loaded
            setTimeout(initializeEditModeStates, 500);
        });
    } else {
        // DOM already loaded
        setTimeout(initializeEditModeStates, 500);
    }
</script>
@endpush