@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 - 200px); 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>)
                            @if($has_participants)
                                <span class="badge bg-warning-subtle text-warning ms-2" style="font-size: 0.75rem; font-weight: 500;">
                                    <i class="uil uil-lock"></i> {{ $participants_count }} registered - Categories & Fees locked
                                </span>
                            @endif
                        </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">Participant Fees</div>
                            </div>

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

                <!-- Scrollable Content Area -->
                <div style="flex: 1; overflow-y: auto; padding: 1.5rem;">
                    <input type="hidden" name="_token" id="_token" value="{{ csrf_token() }}">
                    <input type="hidden" name="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">
                        <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="venue_state_id" class="form-label">Venue State <span
                                    class="text-danger">*</span></label>
                            <select class="form-select" id="venue_state_id" name="venue_state_id" >
                                <option value="">-Select State/Union Territory/Department-</option>

                                <optgroup label="STATES">
                                    @foreach ($states as $state)
                                    @if($state->is_state == 1)
                                    @if($state->id == $event->venue_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->venue_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->venue_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_venue_state_id"></span>
                        </div>
                        
                       
                        
                        <!-- <div class="col-md-6">
                            <label for="location" class="form-label">Location <span class="text-danger">*</span></label>
                            <input type="text" class="form-control" id="location" name="location" >
                            <span class="text-danger small" id="error_location"></span>
                        </div> -->
                        <div class="col-6">
                            <label for="address" class="form-label">Address <span class="text-danger">*</span></label>
                            <textarea class="form-control required_event_inputs" id="address" name="address" rows="2"
                                placeholder="Address">{{$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 is now passed from controller
                        @endphp
                        
                        {{-- DEBUG: Allowed State IDs from backend: {{ json_encode($allowedStateIds) }} --}}
                        {{-- DEBUG: Locked State IDs from backend: {{ json_encode($lockedStateIds) }} --}}
                        
                        <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)
                                                    ->where('is_admin', 1)->first();
                                                $badge = '';
                                                if (!$stateUser) {
                                                    $badge = ' 🚫';
                                                } elseif (empty($stateUser->password)) {
                                                    $invitedDate = $stateUser->created_at;
                                                    $expiryDate = $invitedDate ? $invitedDate->copy()->addHours(48) : null;
                                                    $isExpired = $expiryDate ? now()->greaterThan($expiryDate) : false;
                                                    if ($isExpired) {
                                                        $badge = ' ⏰';
                                                    } else {
                                                        $badge = ' 📧';
                                                    }
                                                } elseif ($stateUser->profile_step != 1 || 
                                                          empty($stateUser->fname) || 
                                                          empty($stateUser->lname) || 
                                                          empty($stateUser->mobile) || 
                                                          empty($stateUser->district_id)) {
                                                    $badge = ' ⚠️';
                                                } else {
                                                    $badge = ' ✅';
                                                }
                                            @endphp
                                            <option value="{{ $state->id }}" 
                                                    @if(in_array($state->id, $allowedStateIds)) selected @endif
                                                    @if(in_array($state->id, $lockedStateIds)) data-custom-properties='{"locked":true}' @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)
                                                    ->where('is_admin', 1)->first();
                                                $badge = '';
                                                if (!$stateUser) {
                                                    $badge = ' 🚫';
                                                } elseif (empty($stateUser->password)) {
                                                    $invitedDate = $stateUser->created_at;
                                                    $expiryDate = $invitedDate ? $invitedDate->copy()->addHours(48) : null;
                                                    $isExpired = $expiryDate ? now()->greaterThan($expiryDate) : false;
                                                    if ($isExpired) {
                                                        $badge = ' ⏰';
                                                    } else {
                                                        $badge = ' 📧';
                                                    }
                                                } elseif ($stateUser->profile_step != 1 || 
                                                          empty($stateUser->fname) || 
                                                          empty($stateUser->lname) || 
                                                          empty($stateUser->mobile) || 
                                                          empty($stateUser->district_id)) {
                                                    $badge = ' ⚠️';
                                                } else {
                                                    $badge = ' ✅';
                                                }
                                            @endphp
                                            <option value="{{ $state->id }}" 
                                                    @if(in_array($state->id, $allowedStateIds)) selected @endif
                                                    @if(in_array($state->id, $lockedStateIds)) data-custom-properties='{"locked":true}' @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)
                                                    ->where('is_admin', 1)->first();
                                                $badge = '';
                                                if (!$stateUser) {
                                                    $badge = ' 🚫';
                                                } elseif (empty($stateUser->password)) {
                                                    $invitedDate = $stateUser->created_at;
                                                    $expiryDate = $invitedDate ? $invitedDate->copy()->addHours(48) : null;
                                                    $isExpired = $expiryDate ? now()->greaterThan($expiryDate) : false;
                                                    if ($isExpired) {
                                                        $badge = ' ⏰';
                                                    } else {
                                                        $badge = ' 📧';
                                                    }
                                                } elseif ($stateUser->profile_step != 1 || 
                                                          empty($stateUser->fname) || 
                                                          empty($stateUser->lname) || 
                                                          empty($stateUser->mobile) || 
                                                          empty($stateUser->district_id)) {
                                                    $badge = ' ⚠️';
                                                } else {
                                                    $badge = ' ✅';
                                                }
                                            @endphp
                                            <option value="{{ $state->id }}" 
                                                    @if(in_array($state->id, $allowedStateIds)) selected @endif
                                                    @if(in_array($state->id, $lockedStateIds)) data-custom-properties='{"locked":true}' @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-warning ms-1">⚠️ Profile Incomplete</span>
                                <span class="badge badge-phoenix badge-phoenix-secondary ms-1">🚫 No Admin</span>
                            </small>
                            <!-- Warning container for state admin status -->
                            <div id="state_admin_warnings_container_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)
                                <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>

                        <!-- Officials Count -->
                        @php
                            // Check if any officials are registered for this event
                            // Note: This will be implemented in Phase 4, for now defaulting to 0
                            $registeredOfficialsCount = 0; // TODO: EventOfficial::where('event_id', $event->id)->whereIn('status', ['pending', 'confirmed'])->count();
                        @endphp
                        <div class="col-md-6">
                            <label for="officials_count_edit" class="form-label fw-semibold">
                                <span class="uil uil-users-alt me-1"></span>
                                Officials Required
                                <span class="text-danger">*</span>
                                @if($registeredOfficialsCount > 0)
                                    <span class="badge bg-warning-subtle text-warning ms-2">
                                        <i class="uil uil-info-circle"></i> {{ $registeredOfficialsCount }} Registered
                                    </span>
                                @endif
                                <i class="uil uil-info-circle text-primary ms-1" 
                                   data-bs-toggle="tooltip" 
                                   data-bs-placement="top"
                                   title="Number of officials needed. Can be adjusted anytime. {{ $registeredOfficialsCount > 0 ? 'Cannot reduce below ' . $registeredOfficialsCount : '' }}"></i>
                            </label>
                            <input type="number" 
                                   class="form-control form-control-lg" 
                                   name="officials_count" 
                                   id="officials_count_edit" 
                                   value="{{ $event->officials_count ?? 1 }}"
                                   min="{{ $registeredOfficialsCount > 0 ? $registeredOfficialsCount : 1 }}" 
                                   max="9999"
                                   step="1"
                                   placeholder="Enter number of officials needed">
                            <small class="text-muted d-block mt-1">
                                @if($registeredOfficialsCount > 0)
                                    <span class="text-warning">
                                        <i class="uil uil-exclamation-triangle"></i> 
                                        Cannot reduce below {{ $registeredOfficialsCount }} (currently registered officials)
                                    </span>
                                @else
                                    Minimum 1 official required. Can be adjusted anytime.
                                @endif
                            </small>
                            <span class="text-danger small" id="error_officials_count"></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);
                                                $isCategoryLocked = in_array($category->id, $lockedCategorySubcategories['categories'] ?? []);
                                            @endphp
                                            <tr id="category_row_edit_{{$category->id}}" class="category-row {{ $isCategorySelected ? 'table-success' : '' }}">
                                                <td class="text-center">
                                                    <div class="d-flex align-items-center justify-content-center gap-1">
                                                        <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}}"
                                                               data-locked="{{ $isCategoryLocked ? '1' : '0' }}"
                                                               {{ $isCategorySelected ? 'checked' : '' }}
                                                               {{ $isCategoryLocked ? 'disabled' : '' }}>
                                                        @if($isCategoryLocked)
                                                            <i class="uil uil-lock text-warning" title="This category has participants and cannot be removed"></i>
                                                        @endif
                                                    </div>
                                                </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]);
                                                                $isSubcategoryLocked = isset($lockedCategorySubcategories['subcategories'][$category->id]) && 
                                                                                      in_array($sub_category->id, $lockedCategorySubcategories['subcategories'][$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}}"
                                                                       data-locked="{{ $isSubcategoryLocked ? '1' : '0' }}"
                                                                       {{ $isSelected ? 'checked' : '' }}
                                                                       {{ $isSubcategoryLocked ? 'disabled' : ($isCategorySelected ? '' : 'disabled') }}>
                                                                <span class="form-check-label">
                                                                    {{$sub_category->name}}
                                                                    @if($isSubcategoryLocked)
                                                                        <i class="uil uil-lock text-warning ms-1" title="This subcategory has participants and cannot be removed"></i>
                                                                    @endif
                                                                </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">
                                <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>
                                
                                <!-- Master Fee Template Panel (Edit Mode) -->
                                <div class="card border-primary mb-3" id="master_fee_template_card_edit" style="border-width: 2px;">
                                    <div class="card-header bg-primary-subtle d-flex justify-content-between align-items-center" 
                                         style="cursor: pointer;" 
                                         data-bs-toggle="collapse" 
                                         data-bs-target="#master_template_collapse_edit">
                                        <div>
                                            <h6 class="mb-0 text-primary">
                                                <i class="uil uil-clipboard-notes me-2"></i>Master Fee Template
                                            </h6>
                                            <small class="text-muted">Define once, apply to multiple categories</small>
                                        </div>
                                        <div class="d-flex align-items-center gap-2">
                                            <span class="badge bg-info" id="template_status_badge_edit">Not Configured</span>
                                            <i class="uil uil-angle-down" id="template_collapse_icon_edit"></i>
                                        </div>
                                    </div>
                                    <div class="collapse" id="master_template_collapse_edit">
                                        <div class="card-body">
                                            @if($has_participants)
                                            <div class="alert alert-warning mb-3">
                                                <i class="uil uil-lock-alt me-1"></i>
                                                <strong>Limited Editing:</strong> This event has participants. Template changes will only apply to categories without registrations.
                                            </div>
                                            @endif
                                            
                                            <!-- Template Fee Inputs -->
                                            <div class="row g-3 mb-3">
                                                <div class="col-12">
                                                    <div class="alert alert-info mb-3">
                                                        <i class="uil uil-info-circle me-1"></i>
                                                        <strong>How it works:</strong> Set your standard fee structure here, then apply it to selected categories below.
                                                    </div>
                                                </div>
                                                
                                                <!-- Kyorugi Template -->
                                                <div class="col-md-6 master-template-kyorugi_edit" style="display: none;">
                                                    <div class="border rounded p-3 bg-light">
                                                        <h6 class="text-primary mb-3">
                                                            <i class="uil uil-dumbbell me-1"></i>Kyorugi Template
                                                        </h6>
                                                        <div class="mb-2">
                                                            <label class="form-label small fw-semibold">Male + Female (Combined)</label>
                                                            <div class="input-group">
                                                                <span class="input-group-text"><i class="uil uil-rupee-sign"></i></span>
                                                                <input type="number" 
                                                                       class="form-control master-template-input-edit" 
                                                                       id="master_kyorugi_fee_edit" 
                                                                       placeholder="500" 
                                                                       min="0" 
                                                                       step="50"
                                                                       data-subcat-id="1">
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                
                                                <!-- Poomsae Template -->
                                                <div class="col-md-6 master-template-poomsae_edit" style="display: none;">
                                                    <div class="border rounded p-3 bg-light">
                                                        <h6 class="text-success mb-3">
                                                            <i class="uil uil-users-alt me-1"></i>Poomsae Template
                                                        </h6>
                                                        <div class="row g-2">
                                                            <div class="col-6">
                                                                <label class="form-label small fw-semibold">Individual</label>
                                                                <div class="input-group input-group-sm">
                                                                    <span class="input-group-text">₹</span>
                                                                    <input type="number" 
                                                                           class="form-control master-template-input-edit" 
                                                                           id="master_poomsae_individual_edit" 
                                                                           placeholder="600" 
                                                                           min="0" 
                                                                           step="50"
                                                                           data-subcat-id="2"
                                                                           data-option-ids="3,6"
                                                                           data-team-size="1">
                                                                </div>
                                                                <small class="text-muted">1 member</small>
                                                            </div>
                                                            <div class="col-6">
                                                                <label class="form-label small fw-semibold">Pair</label>
                                                                <div class="input-group input-group-sm">
                                                                    <span class="input-group-text">₹</span>
                                                                    <input type="number" 
                                                                           class="form-control master-template-input-edit" 
                                                                           id="master_poomsae_pair_edit" 
                                                                           placeholder="800" 
                                                                           min="0" 
                                                                           step="50"
                                                                           data-subcat-id="2"
                                                                           data-option-ids="4,7"
                                                                           data-team-size="2">
                                                                </div>
                                                                <small class="text-muted">2 members</small>
                                                            </div>
                                                            <div class="col-6">
                                                                <label class="form-label small fw-semibold">Recognized Team</label>
                                                                <div class="input-group input-group-sm">
                                                                    <span class="input-group-text">₹</span>
                                                                    <input type="number" 
                                                                           class="form-control master-template-input-edit" 
                                                                           id="master_poomsae_recognized_team_edit" 
                                                                           placeholder="1200" 
                                                                           min="0" 
                                                                           step="50"
                                                                           data-subcat-id="2"
                                                                           data-option-ids="5"
                                                                           data-team-size="3">
                                                                </div>
                                                                <small class="text-muted">3 members</small>
                                                            </div>
                                                            <div class="col-6">
                                                                <label class="form-label small fw-semibold">Freestyle Team</label>
                                                                <div class="input-group input-group-sm">
                                                                    <span class="input-group-text">₹</span>
                                                                    <input type="number" 
                                                                           class="form-control master-template-input-edit" 
                                                                           id="master_poomsae_freestyle_team_edit" 
                                                                           placeholder="2400" 
                                                                           min="0" 
                                                                           step="50"
                                                                           data-subcat-id="2"
                                                                           data-option-ids="8"
                                                                           data-team-size="6">
                                                                </div>
                                                                <small class="text-muted">6 members</small>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            
                                            <!-- Bulk Action Controls -->
                                            <div class="border-top pt-3">
                                                <div class="d-flex justify-content-between align-items-center flex-wrap gap-2">
                                                    <div class="d-flex align-items-center gap-2">
                                                        <button type="button" 
                                                                class="btn btn-primary btn-sm" 
                                                                id="apply_template_to_selected_btn_edit"
                                                                onclick="applyMasterTemplateToSelectedEdit()">
                                                            <i class="uil uil-check-circle me-1"></i>Apply to Selected Categories
                                                        </button>
                                                        <button type="button" 
                                                                class="btn btn-success btn-sm" 
                                                                id="apply_template_to_all_btn_edit"
                                                                onclick="applyMasterTemplateToAllEdit()">
                                                            <i class="uil uil-layer-group me-1"></i>Apply to All Categories
                                                        </button>
                                                    </div>
                                                    <div class="d-flex align-items-center gap-2">
                                                        <button type="button" 
                                                                class="btn btn-outline-secondary btn-sm" 
                                                                onclick="clearMasterTemplateEdit()">
                                                            <i class="uil uil-redo me-1"></i>Clear Template
                                                        </button>
                                                    </div>
                                                </div>
                                                
                                                <!-- Category Selection Checklist (Initially Hidden) -->
                                                <div id="category_selection_panel_edit" class="mt-3" style="display: none;">
                                                    <div class="border rounded p-3 bg-white">
                                                        <label class="form-label mb-2 fw-semibold">
                                                            <i class="uil uil-check-square me-1"></i>Select Categories to Apply Template:
                                                        </label>
                                                        <div id="category_checklist_container_edit" class="d-flex flex-wrap gap-2">
                                                            <!-- Checkboxes will be dynamically inserted here -->
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </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>
                            
                            <!-- Master Fee Template Panel (Edit Mode) -->
                            <div class="col-12" id="master_fee_template_section_edit" style="display: none;">
                                <div class="card border-primary mb-3" id="master_fee_template_card_edit" style="border-width: 2px;">
                                    <div class="card-header bg-primary-subtle d-flex justify-content-between align-items-center" 
                                         style="cursor: pointer;" 
                                         data-bs-toggle="collapse" 
                                         data-bs-target="#master_template_collapse_edit">
                                        <div>
                                            <h6 class="mb-0 text-primary">
                                                <i class="uil uil-clipboard-notes me-2"></i>Master Fee Template
                                            </h6>
                                            <small class="text-muted">Define once, apply to multiple categories</small>
                                        </div>
                                        <div class="d-flex align-items-center gap-2">
                                            <span class="badge bg-info" id="template_status_badge_edit">Not Configured</span>
                                            <i class="uil uil-angle-down" id="template_collapse_icon_edit"></i>
                                        </div>
                                    </div>
                                    <div class="collapse" id="master_template_collapse_edit">
                                        <div class="card-body">
                                            @if($has_participants)
                                            <div class="alert alert-warning mb-3">
                                                <i class="uil uil-lock-alt me-1"></i>
                                                <strong>Limited Editing:</strong> This event has participants. Template changes will only apply to categories without registrations.
                                            </div>
                                            @endif
                                            
                                            <!-- Template Fee Inputs -->
                                            <div class="row g-3 mb-3">
                                                <div class="col-12">
                                                    <div class="alert alert-info mb-3">
                                                        <i class="uil uil-info-circle me-1"></i>
                                                        <strong>How it works:</strong> Set your standard fee structure here, then apply it to selected categories below.
                                                    </div>
                                                </div>
                                                
                                                <!-- Kyorugi Template -->
                                                <div class="col-md-6 master-template-kyorugi_edit" style="display: none;">
                                                    <div class="border rounded p-3 bg-light">
                                                        <h6 class="text-primary mb-3">
                                                            <i class="uil uil-dumbbell me-1"></i>Kyorugi Template
                                                        </h6>
                                                        <div class="mb-2">
                                                            <label class="form-label small fw-semibold">Male + Female (Combined)</label>
                                                            <div class="input-group">
                                                                <span class="input-group-text"><i class="uil uil-rupee-sign"></i></span>
                                                                <input type="number" 
                                                                       class="form-control master-template-input-edit" 
                                                                       id="master_kyorugi_fee_edit" 
                                                                       placeholder="500" 
                                                                       min="0" 
                                                                       step="50"
                                                                       data-subcat-id="1">
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                
                                                <!-- Poomsae Template -->
                                                <div class="col-md-6 master-template-poomsae_edit" style="display: none;">
                                                    <div class="border rounded p-3 bg-light">
                                                        <h6 class="text-success mb-3">
                                                            <i class="uil uil-users-alt me-1"></i>Poomsae Template
                                                        </h6>
                                                        <div class="row g-2">
                                                            <div class="col-6">
                                                                <label class="form-label small fw-semibold">Individual</label>
                                                                <div class="input-group input-group-sm">
                                                                    <span class="input-group-text">₹</span>
                                                                    <input type="number" 
                                                                           class="form-control master-template-input-edit" 
                                                                           id="master_poomsae_individual_edit" 
                                                                           placeholder="600" 
                                                                           min="0" 
                                                                           step="50"
                                                                           data-subcat-id="2"
                                                                           data-option-ids="3,6"
                                                                           data-team-size="1">
                                                                </div>
                                                                <small class="text-muted">1 member</small>
                                                            </div>
                                                            <div class="col-6">
                                                                <label class="form-label small fw-semibold">Pair</label>
                                                                <div class="input-group input-group-sm">
                                                                    <span class="input-group-text">₹</span>
                                                                    <input type="number" 
                                                                           class="form-control master-template-input-edit" 
                                                                           id="master_poomsae_pair_edit" 
                                                                           placeholder="800" 
                                                                           min="0" 
                                                                           step="50"
                                                                           data-subcat-id="2"
                                                                           data-option-ids="4,7"
                                                                           data-team-size="2">
                                                                </div>
                                                                <small class="text-muted">2 members</small>
                                                            </div>
                                                            <div class="col-6">
                                                                <label class="form-label small fw-semibold">Recognized Team</label>
                                                                <div class="input-group input-group-sm">
                                                                    <span class="input-group-text">₹</span>
                                                                    <input type="number" 
                                                                           class="form-control master-template-input-edit" 
                                                                           id="master_poomsae_recognized_team_edit" 
                                                                           placeholder="1200" 
                                                                           min="0" 
                                                                           step="50"
                                                                           data-subcat-id="2"
                                                                           data-option-ids="5"
                                                                           data-team-size="3">
                                                                </div>
                                                                <small class="text-muted">3 members</small>
                                                            </div>
                                                            <div class="col-6">
                                                                <label class="form-label small fw-semibold">Freestyle Team</label>
                                                                <div class="input-group input-group-sm">
                                                                    <span class="input-group-text">₹</span>
                                                                    <input type="number" 
                                                                           class="form-control master-template-input-edit" 
                                                                           id="master_poomsae_freestyle_team_edit" 
                                                                           placeholder="2400" 
                                                                           min="0" 
                                                                           step="50"
                                                                           data-subcat-id="2"
                                                                           data-option-ids="8"
                                                                           data-team-size="6">
                                                                </div>
                                                                <small class="text-muted">6 members</small>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            
                                            <!-- Bulk Action Controls -->
                                            <div class="border-top pt-3">
                                                <div class="d-flex justify-content-between align-items-center flex-wrap gap-2">
                                                    <div class="d-flex align-items-center gap-2">
                                                        <button type="button" 
                                                                class="btn btn-primary btn-sm" 
                                                                id="apply_template_to_selected_btn_edit"
                                                                onclick="applyMasterTemplateToSelectedEdit()">
                                                            <i class="uil uil-check-circle me-1"></i>Apply to Selected Categories
                                                        </button>
                                                        <button type="button" 
                                                                class="btn btn-success btn-sm" 
                                                                id="apply_template_to_all_btn_edit"
                                                                onclick="applyMasterTemplateToAllEdit()">
                                                            <i class="uil uil-layer-group me-1"></i>Apply to All Categories
                                                        </button>
                                                    </div>
                                                    <div class="d-flex align-items-center gap-2">
                                                        <button type="button" 
                                                                class="btn btn-outline-secondary btn-sm" 
                                                                onclick="clearMasterTemplateEdit()">
                                                            <i class="uil uil-redo me-1"></i>Clear Template
                                                        </button>
                                                    </div>
                                                </div>
                                                
                                                <!-- Category Selection Checklist (Initially Hidden) -->
                                                <div id="category_selection_panel_edit" class="mt-3" style="display: none;">
                                                    <div class="border rounded p-3 bg-white">
                                                        <label class="form-label mb-2 fw-semibold">
                                                            <i class="uil uil-check-square me-1"></i>Select Categories to Apply Template:
                                                        </label>
                                                        <div id="category_checklist_container_edit" class="d-flex flex-wrap gap-2">
                                                            <!-- Checkboxes will be dynamically inserted here -->
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- END STEP 3 -->

                    {{-- STEP 4 REMOVED: Officials register for free (no payment required) --}}
                    @if(false) {{-- Step 4 disabled: official fees removed --}}
                    <div id="wizard_step_edit_4_content" class="wizard-content" style="display:none;">
                        @php
                            // Check if officials are registered (lock fees if yes)
                            $hasOfficials = \App\Models\EventOfficial::where('event_id', $event->id)->exists();
                            $officialsCount = \App\Models\EventOfficial::where('event_id', $event->id)->count();
                        @endphp

                        <div class="row g-3">
                            <div class="col-12">
                                <h4 class="mb-1 text-body-emphasis">
                                    <i class="uil uil-award me-2"></i>Step 4: Official Fees Configuration
                                    @if($hasOfficials)
                                        <span class="badge bg-warning-subtle text-warning ms-2" style="font-size: 0.75rem; font-weight: 500;">
                                            <i class="uil uil-lock"></i> {{ $officialsCount }} registered - Fees locked
                                        </span>
                                    @endif
                                </h4>
                                <p class="text-body-secondary mb-4">
                                    Configure registration fees for event officials (Coach, Manager, etc.). 
                                    <span class="badge bg-info">This step is only visible if "Payment Required" is enabled.</span>
                                </p>

                                @if($hasOfficials)
                                    <div class="alert alert-warning d-flex align-items-center mb-4">
                                        <i class="uil uil-exclamation-triangle me-2" style="font-size: 1.5rem;"></i>
                                        <div>
                                            <strong>Editing Restricted:</strong> 
                                            <span class="badge bg-danger ms-2">{{ $officialsCount }}</span> officials already registered.
                                            <small class="d-block mt-1">
                                                Official fees cannot be modified after states have registered officials to maintain payment integrity.
                                            </small>
                                        </div>
                                    </div>
                                @endif

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

                                @if(!$hasOfficials)
                                    <!-- Quick Actions -->
                                    <div class="d-flex gap-2 mb-4">
                                        <button type="button" class="btn btn-sm btn-outline-primary" id="apply_uniform_official_fee_edit">
                                            <i class="uil uil-copy me-1"></i>Apply Same Fee to All Officials
                                        </button>
                                        <button type="button" class="btn btn-sm btn-outline-secondary" id="clear_all_official_fees_edit">
                                            <i class="uil uil-times me-1"></i>Clear All Fees
                                        </button>
                                    </div>
                                @endif

                                <!-- Official Fees Grid -->
                                <div class="row g-3">
                                    @php
                                        $officialTypes = [
                                            ['value' => 'coach', 'label' => 'Coach', 'icon' => 'uil-award', 'color' => 'primary', 'desc' => 'Training Staff'],
                                            ['value' => 'manager', 'label' => 'Manager', 'icon' => 'uil-briefcase', 'color' => 'success', 'desc' => 'Team Management'],
                                            ['value' => 'head_of_team', 'label' => 'Head of Team', 'icon' => 'uil-star', 'color' => 'warning', 'desc' => 'Team Leader'],
                                            ['value' => 'physio', 'label' => 'Physio', 'icon' => 'uil-medkit', 'color' => 'info', 'desc' => 'Medical Support'],
                                            ['value' => 'trainer', 'label' => 'Trainer', 'icon' => 'uil-dumbbell', 'color' => 'danger', 'desc' => 'Fitness Specialist'],
                                            ['value' => 'state_president', 'label' => 'State President', 'icon' => 'uil-user-circle', 'color' => 'dark', 'desc' => 'Leadership'],
                                            ['value' => 'state_secretary', 'label' => 'State Secretary', 'icon' => 'uil-clipboard-notes', 'color' => 'secondary', 'desc' => 'Administration'],
                                        ];

                                        // Get existing fees
                                        $existingFees = \App\Models\EventOfficialFee::where('event_id', $event->id)
                                            ->pluck('fee_amount', 'official_type')
                                            ->toArray();
                                    @endphp

                                    @foreach($officialTypes as $type)
                                        <div class="col-md-6 col-lg-4">
                                            <div class="card h-100 border-2" style="border-color: #667eea;">
                                                <div class="card-body {{ $hasOfficials ? 'bg-light' : '' }}">
                                                    <div class="d-flex align-items-center mb-3">
                                                        <div class="bg-{{ $type['color'] }} bg-opacity-10 p-2 rounded-circle me-2">
                                                            <i class="uil {{ $type['icon'] }} text-{{ $type['color'] }}" style="font-size: 1.5rem;"></i>
                                                        </div>
                                                        <div>
                                                            <h6 class="mb-0 fw-bold">{{ $type['label'] }}</h6>
                                                            <small class="text-muted">{{ $type['desc'] }}</small>
                                                        </div>
                                                        @if($hasOfficials)
                                                            <i class="uil uil-lock text-warning ms-auto" title="Locked"></i>
                                                        @endif
                                                    </div>
                                                    <div class="input-group">
                                                        <span class="input-group-text"><i class="uil uil-rupee-sign"></i></span>
                                                        <input type="number" 
                                                            class="form-control official-fee-input" 
                                                            name="official_fees[{{ $type['value'] }}]" 
                                                            id="official_fee_edit_{{ $type['value'] }}"
                                                            min="0" 
                                                            max="999999" 
                                                            step="1" 
                                                            value="{{ $existingFees[$type['value']] ?? '' }}"
                                                            placeholder="Enter fee"
                                                            {{ $hasOfficials ? 'readonly' : '' }}>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    @endforeach
                                </div>

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

                                <!-- Info Note -->
                                <div class="alert alert-info mt-4">
                                    <i class="uil uil-info-circle me-2"></i>
                                    <strong>Note:</strong> 
                                    <ul class="mb-0 mt-2">
                                        <li>At least one official type must have a fee greater than zero.</li>
                                        <li>Fee amounts must be between ₹0 and ₹999,999.</li>
                                        @if(!$hasOfficials)
                                            <li>You cannot edit official fees after any state has registered officials.</li>
                                        @else
                                            <li class="text-warning"><strong>Fees are currently locked because {{ $officialsCount }} officials are already registered.</strong></li>
                                        @endif
                                        <li>Each state can register up to the officials count specified in Step 1.</li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                    @endif {{-- end disabled step 4 --}}
                    <!-- END STEP 4 -->
                </div>
                
                <!-- Sticky Footer with Wizard Navigation -->
                <div class="border-top bg-white" style="position: sticky; bottom: 0; z-index: 1000; padding: 1rem 1.5rem; box-shadow: 0 -2px 10px rgba(0,0,0,0.1);">
                    <div class="d-flex justify-content-between align-items-center gap-2">
                        <div class="d-flex gap-2">
                            <a href="{{ route('admin.events.index') }}" class="btn btn-outline-secondary" id="back_to_events">
                                <i class="uil uil-arrow-left me-2"></i>Cancel
                            </a>
                            <button type="button" class="btn btn-outline-info" id="fee_help_button" data-bs-toggle="modal" data-bs-target="#feeGuidelinesModal">
                                <i class="uil uil-question-circle me-1"></i>Fee Guidelines
                            </button>
                        </div>
                        
                        <!-- Event Prefix Display (Center) -->
                        <div class="d-flex align-items-center gap-2 px-3 py-2 rounded" style="background-color: #fff3cd; border: 1px solid #ffca2c;">
                            <i class="uil uil-lock text-warning" style="font-size: 1.2rem;"></i>
                            <div class="" style="line-height: 1.2;">
                                <small class="text-muted mb-1" style="font-size: 0.7rem;">Event Prefix (Permanent)</small>
                            </div>
                             <div class="" style="line-height: 1.2;">
                                    <strong class="text-dark" style="font-family: monospace; font-size: ;">{{ $event->event_prefix ?? 'Not Generated' }}</strong>
                            </div>

                        </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;
    }
    
    /* Locked State Items Styling */
    .choices__item.is-locked {
        background-color: #fff3cd !important;
        border-color: #ffca2c !important;
        padding-right: 8px !important;
        position: relative;
    }
    
    .choices__item.is-locked .choices__button {
        display: none !important;
    }
    
    .choices__item.is-locked::after {
        content: '🔒';
        font-size: 14px;
        margin-left: 8px;
        opacity: 0.8;
    }
    
    .choices__item.is-locked:hover {
        background-color: #ffe69c !important;
        border-color: #ffb703 !important;
    }
    
    /* Debug: Ensure locked class is visible */
    .choices__list--multiple .choices__item.is-locked {
        background-color: #fff3cd !important;
        border: 2px solid #ffca2c !important;
    }
    
    /* SweetAlert2 wider popup for error lists */
    .swal-wide {
        width: 600px !important;
    }
    .swal-wide .swal2-html-container {
        text-align: left !important;
        white-space: pre-line !important;
    }
    
    /* Master Fee Template Styles */
    #master_fee_template_card_edit .collapse.show ~ .card-header #template_collapse_icon_edit {
        transform: rotate(180deg);
        transition: transform 0.3s ease;
    }
    
    .master-template-input-edit {
        font-weight: 600;
        font-size: 1.1rem;
    }
    
    .master-template-input-edit:focus {
        border-color: #0d6efd;
        box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
    }
    
    #category_checklist_container_edit .form-check {
        padding: 0.5rem 1rem;
        border: 2px solid #e9ecef;
        border-radius: 0.375rem;
        transition: all 0.2s ease;
    }
    
    #category_checklist_container_edit .form-check:hover {
        border-color: #0d6efd;
        background-color: #f8f9fa;
    }
    
    #category_checklist_container_edit .form-check-input:checked ~ .form-check-label {
        font-weight: 600;
        color: #0d6efd;
    }
    
    .category-tab-badge {
        font-size: 0.75rem;
        padding: 0.25rem 0.5rem;
    }
    
    /* Enhanced Tab Styling for Fee Configuration */
    .nav-tabs .nav-link {
        border: 2px solid transparent;
        color: #6c757d;
        font-weight: 500;
        padding: 0.75rem 1.25rem;
        transition: all 0.3s ease;
        background: #f8f9fa;
        margin-right: 4px;
        border-radius: 0.375rem 0.375rem 0 0;
    }

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

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

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

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

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

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

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

<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
<script>
    // Event fee configuration data 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' }},
        locked_category_subcategories: @json($lockedCategorySubcategories)
    };
</script>
<!-- <script src="/js/modules/event_prefix_validator.js?v=17755049796517"></script> -->
<script src="/js/pages/admin/event_common.js?v=17755049794018"></script>
<script src="/js/pages/admin/event_fee_template.js?v=17755049795294"></script>
<script src="/js/pages/admin/create_event.js?v=17755049796038"></script>
<script src="/js/pages/admin/edit_event_wizard.js?v=17755049796085"></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') {
        //         $('#venue_state_id').prop('disabled', true).addClass('opacity-75');
        //     } else {
        //         $('#venue_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);
               
                    $slotInput.val('');
              
                $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 custom templates for locked states
            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: '',
                callbackOnCreateTemplates: function(template) {
                    return {
                        item: ({ classNames }, data) => {
                            const isLocked = data.customProperties && data.customProperties.locked;
                            
                            return template(`
                                <div class="${
                                    classNames.item
                                } ${
                                    data.highlighted
                                      ? classNames.highlightedState
                                      : classNames.itemSelectable
                                } ${
                                    isLocked ? 'is-locked' : ''
                                }" data-item data-id="${data.id}" data-value="${data.value}" ${
                                    data.active ? 'aria-selected="true"' : ''
                                } ${
                                    data.disabled ? 'aria-disabled="true"' : ''
                                } title="${
                                    isLocked 
                                        ? 'Locked: State has registered participants and cannot be removed' 
                                        : ''
                                }">
                                    ${data.label}
                                    ${
                                        !isLocked
                                            ? `<button type="button" class="${classNames.button}" data-button aria-label="Remove item: '${data.value}'">
                                                Remove item
                                              </button>`
                                            : ''
                                    }
                                </div>
                            `);
                        }
                    };
                }
            });
            
            console.log('Edit Mode: Choices instance created successfully');
            
            // Store instance on element for future reference
            allowedStatesSelect.choices = choicesInstance;
            
            // Get locked state IDs from blade template
            const lockedStateIds = @json($lockedStateIds);
            console.log('Edit Mode: Locked state IDs:', lockedStateIds);
            
            // CRITICAL FIX: Update choices to include customProperties for locked states
            // This ensures the custom template receives the locked flag properly
            if (lockedStateIds && lockedStateIds.length > 0) {
                const allChoices = choicesInstance._currentState.choices;
                allChoices.forEach(choice => {
                    if (lockedStateIds.includes(parseInt(choice.value))) {
                        choice.customProperties = { locked: true };
                        console.log('Edit Mode: Marked choice as locked:', choice.label);
                    }
                });
                // Force re-render of selected items
                choicesInstance._render();
            }
            
            // 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');
                
                // Re-apply locked properties after selection (critical for UI update)
                if (lockedStateIds && lockedStateIds.length > 0) {
                    setTimeout(function() {
                        const items = choicesInstance._currentState.items;
                        items.forEach(item => {
                            if (lockedStateIds.includes(parseInt(item.value))) {
                                item.customProperties = { locked: true };
                                console.log('Edit Mode: Applied locked property to selected item:', item.label);
                            }
                        });
                        // Force re-render to apply custom template
                        choicesInstance._render();
                    }, 100);
                }
                
                // 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');
                    
                    // CRITICAL: Check state admin status on page load for edit mode
                    if (typeof checkStateAdminStatus === 'function') {
                        checkStateAdminStatus();
                    }
                }, 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);
    }
    
    // ============================================
    // EDIT MODE: STATE CHANGE HANDLER WITH LOCKED STATE PREVENTION
    // ============================================
    
    /**
     * Handle state selection changes with locked state protection
     * Prevents removal of locked states (states with participants)
     */
    $(document).on('change', '#allowed_state_ids_edit', function() {
        console.log('Edit Mode: State selection changed');
        
        // Get current selected values
        const currentSelection = $(this).val() || [];
        
        // Get locked state IDs from blade template
        const lockedStateIds = @json($lockedStateIds);
        
        // Check if any locked state was deselected
        const missingLockedStates = lockedStateIds.filter(id => {
            return !currentSelection.includes(String(id));
        });
        
        if (missingLockedStates.length > 0) {
            console.warn('Edit Mode: Attempt to remove locked states:', missingLockedStates);
            
            // Get state names for warning message
            const lockedStateNames = [];
            missingLockedStates.forEach(stateId => {
                const option = $(this).find(`option[value="${stateId}"]`);
                if (option.length) {
                    lockedStateNames.push(option.text().replace(/[📧✅⏰🔒]/g, '').trim());
                }
            });
            
            // Re-add locked states to selection
            const correctedSelection = [...new Set([...currentSelection, ...missingLockedStates.map(String)])];
            
            // Update Choices.js to restore locked states
            const selectElement = document.getElementById('allowed_state_ids_edit');
            if (selectElement && selectElement.choices) {
                selectElement.choices.setChoiceByValue(correctedSelection);
            }
            
            // Show SweetAlert2 warning
            Swal.fire({
                icon: 'warning',
                title: 'Cannot Remove Locked States',
                html: `
                    <div class="text-start">
                        <p class="mb-3">The following state(s) cannot be removed because they have registered participants:</p>
                        <div class="alert alert-danger mb-3">
                            <i class="uil uil-lock me-2"></i><strong>${lockedStateNames.join(', ')}</strong>
                        </div>
                        <p class="text-muted small">
                            <i class="uil uil-info-circle me-1"></i>
                            To remove a state, first delete or move all its registered participants to another state.
                        </p>
                    </div>
                `,
                confirmButtonText: 'Understood',
                confirmButtonColor: '#d33',
                customClass: {
                    popup: 'swal-wide'
                }
            });
            
            return false; // Prevent further processing
        }
        
        // Check state admin status when selection changes
        if (typeof checkStateAdminStatus === 'function') {
            checkStateAdminStatus();
        }
    });
</script>
@endpush