@extends('layouts.admin')

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

@section('content')
<div class="row g-3">
    <div class="col-12">
        <div class="card border shadow-sm" style="height: calc(100vh - 120px); display: flex; flex-direction: column;">
            <div class="card-header border-bottom bg-body position-sticky top-0" style="z-index: 10;">
                <div class="row g-3 align-items-center">
                    <div class="col-md-8">
                        <h5 class="mb-1 text-body-emphasis"><i class="uil uil-plus-circle me-2"></i>Edit Event ( <span class="small text-body-secondary">Kindly fill all required fields.</span>)</h5>
                    </div>
                    <!-- <div class="col-md-4 d-flex justify-content-end">
                        <a href="{{ route('admin.events.index') }}" class="btn btn-phoenix-secondary">
                            <span class="fas fa-arrow-left me-2"></span>Back to Events
                        </a>
                    </div> -->
                </div>
            </div>
            <form id="editEventForm" enctype="multipart/form-data" style="flex: 1; display: flex; flex-direction: column; overflow: hidden;">
                @csrf
                
                <!-- Wizard Progress Steps -->
                <div class="border-bottom bg-light" style="padding: 1rem 0;">
                    <div class="d-flex justify-content-center">
                        <div class="d-flex align-items-center" style="max-width: 800px; width: 100%;">
                            <div class="wizard-step active" id="wizard_step_edit_1">
                                <div class="wizard-step-circle">1</div>
                                <div class="wizard-step-label">Event Details & Config</div>
                            </div>
                            <div class="wizard-step-line"></div>
                            <div class="wizard-step" id="wizard_step_edit_2">
                                <div class="wizard-step-circle">2</div>
                                <div class="wizard-step-label">Categories</div>
                            </div>
                            <div class="wizard-step-line"></div>
                            <div class="wizard-step" id="wizard_step_edit_3">
                                <div class="wizard-step-circle">3</div>
                                <div class="wizard-step-label">Fee Configuration</div>
                            </div>
                        </div>
                    </div>
                    @if($has_participants)
                    <div class="alert alert-warning mb-0 rounded-0 border-0 border-top" style="margin-top: 1rem;">
                        <i class="uil uil-exclamation-triangle me-2"></i>
                        <strong>Warning:</strong> This event has <strong>{{ $participants_count }} registered participant(s)</strong>. 
                        Categories and fee configuration are locked to preserve data integrity.
                    </div>
                    @endif
                </div>

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

                    <!-- STEP 1: Event Details & Configuration -->
                    <div id="wizard_step_edit_1_content" class="wizard-content active">
                    <div class="d-flex align-items-center justify-content-center gap-4 mb-3">
                        <div class="text-center">
                            <div id="cover_image_preview"
                                style="width:120px; height:120px; border:1px solid #ddd; border-radius:8px; overflow:hidden; background:#f8f9fa; display:flex; align-items:center; justify-content:center;">
                                
                            @if($event->coverImage)
                            <img src="{{  $event->coverImage }}" alt="Event Image"
                                style="max-width:100%; max-height:100%; object-fit:cover;">
                            @else
                            <span class="text-muted small">No image</span>
                            @endif
                            </div>
                        </div>
                        <div class="text-center">
                            <input type="file" class="state-required" name="cover_image" id="cover_image"
                                style="display: none;" accept="image/png, image/jpeg,image/jpg"
                                onchange="updateFilePreview('cover_image')">
                            <button type="button" class="btn btn-primary mb-2" id="cover_image_button"
                                onclick="document.getElementById('cover_image').click();">
                                <i class="fas fa-upload"></i> Upload Cover Image
                            </button>
                            <div><span class="text-danger">*</span></div>
                            <small class="text-body-tertiary">Max file size: 300KB (JPG, PNG)</small>
                            <span class="text-danger small" id="error_cover_image" style="display:none;"></span>
                        </div>
                        <!-- <div id="image_preview"
                            style="width:120px; height:120px; border:1px solid #ddd; border-radius:8px; overflow:hidden; background:#f8f9fa; display:flex; align-items:center; justify-content:center;">

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


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

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

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

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

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

                                // Clear any previous errors
                                clearFieldError(inputId);

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

                        /**
                         * Show field error
                         */
                        function showFieldError(fieldId, message) {
                            const field = $('#' + fieldId);
                            const errorSpan = $('#error_' + fieldId);

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

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

                            field.removeClass('is-invalid border-danger');
                            errorSpan.text('').hide();
                        }
                    </script>
                    <div class="row g-3">
                        <div class="col-md-6">
                            <label for="title" class="form-label">Title <span class="text-danger">*</span></label>
                            <input type="text" class="form-control required_event_inputs" id="title" name="title"
                                placeholder="Title" value="{{$event->title}}">
                            <span class="text-danger small" id="error_title"></span>
                            <!-- <div class="invalid-feedback">Please provide a valid event title.</div> -->
                        </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>
                            
                            <!-- Federation Cup Toggle (inline, only visible for Official Events) -->
                            @if($event->group_id == 1)
                            <div id="federation_cup_option_edit" class="mt-3">
                                <div class="card border-warning">
                                    <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-trophy text-warning"></i>
                                                    Federation Cup Event
                                                </h6>
                                                <small class="text-muted">Special grouping rules</small>
                                            </div>
                                            <div class="form-check form-switch">
                                                <input type="checkbox" 
                                                       class="form-check-input" 
                                                       name="is_federation_cup" 
                                                       id="is_federation_cup" 
                                                       value="1"
                                                       {{ $event->is_federation_cup ? 'checked' : '' }}
                                                       {{ $has_participants ? 'disabled' : '' }}
                                                       style="width: 3em; height: 1.5em;">
                                            </div>
                                        </div>
                                        <p class="small text-muted mb-0">
                                            <i class="uil uil-info-circle text-warning me-1"></i>
                                            Allows 4 participants per group instead of 1 for team competitions.
                                            @if($has_participants)
                                                <span class="badge bg-warning text-dark ms-2"><i class="uil uil-lock me-1"></i>Locked - Event has {{ $participants_count }} participants</span>
                                            @endif
                                        </p>
                                    </div>
                                </div>
                                
                                @if($has_participants)
                                <!-- Hidden input to preserve value when checkbox is disabled -->
                                <input type="hidden" name="is_federation_cup" value="{{ $event->is_federation_cup ? '1' : '0' }}">
                                @endif
                            </div>
                            @endif
                        </div>
                        
                        <div class="col-md-3">
                            <label for="start_datetime" class="form-label">Event Start <span class="text-danger">*</span></label>
                            <input type="datetime-local" class="form-control required_event_inputs" id="start_datetime" name="start_datetime"
                                placeholder="Event Start" value="{{ isset($event->start_datetime) ? date('Y-m-d\\TH:i', strtotime($event->start_datetime)) : '' }}">
                            <span class="text-danger small" id="error_start_datetime"></span>
                        </div>
                        <div class="col-md-3">
                            <label for="end_datetime" class="form-label">Event End <span class="text-danger">*</span></label>
                            <input type="datetime-local" class="form-control required_event_inputs" id="end_datetime" name="end_datetime"
                                placeholder="Event End" value="{{ isset($event->end_datetime) ? date('Y-m-d\\TH:i', strtotime($event->end_datetime)) : '' }}">
                            <span class="text-danger small" id="error_end_datetime"></span>
                        </div>
                        <div class="col-md-6">
                            <label for="registration_closure_date" class="form-label">Registration Closure Date <span
                                    class="text-danger">*</span></label>
                            <input type="datetime-local" class="form-control required_event_inputs" id="registration_closure_date"
                                name="registration_closure_date"
                                value="{{ $event->registration_closure_date ? date('Y-m-d\\TH:i', strtotime($event->registration_closure_date)) : '' }}"
                                placeholder="Registration Closure Datetime">
                            <span class="text-danger small" id="error_registration_closure_date"></span>
                        </div>
                        <div class="col-md-6">
                            <label for="state_id" class="form-label">Venue State <span
                                    class="text-danger">*</span></label>
                            <select class="form-select" id="state_id" name="state_id" disabled="true" style="opacity: 0.6; cursor: not-allowed;">
                                <option value="">-Select State/Union Territory/Department-</option>

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

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

                                <optgroup label="DEPARTMENTS">
                                    @foreach ($states as $state)
                                    @if($state->is_state == 3)
                                    @if($state->id == $event->state_id)
                                    <option value="{{ $state->id }}" selected> {{ $state->name }}</option>
                                    @else
                                    <option value="{{ $state->id }}"> {{ $state->name }}</option>
                                    @endif
                                    @endif
                                    @endforeach
                                </optgroup>
                            </select>
                            <span class="text-danger small" id="error_state_id"></span>
                        </div>
                        <!-- <div class="col-md-6">
                            <label for="location" class="form-label">Location <span class="text-danger">*</span></label>
                            <input type="text" class="form-control" id="location" name="location" >
                            <span class="text-danger small" id="error_location"></span>
                        </div> -->
                        <div class="col-6">
                            <label for="address" class="form-label">Address <span class="text-danger">*</span></label>
                            <textarea class="form-control required_event_inputs" id="address" name="address" rows="2"
                                placeholder="Address">{{$event->address}}</textarea>
                            <span class="text-danger small" id="error_address"></span>
                        </div>

                       

                        <!-- Participant Slot Limit -->
                        <div class="col-md-12">
                            <label for="participant_slot_limit" class="form-label fw-semibold">
                                Participant Slot Limit
                                <i class="uil uil-info-circle text-primary" 
                                   role="button"
                                   id="slot_limit_info_icon"
                                   data-bs-toggle="tooltip"
                                   data-bs-placement="top"
                                   title="Click to see recommended values"
                                   style="cursor: pointer;"></i>
                            </label>
                            <input type="number" 
                                   class="form-control form-control-lg" 
                                   name="participant_slot_limit" 
                                   id="participant_slot_limit" 
                                   min="1" 
                                   value="{{ $event->participant_slot_limit ?? '' }}"
                                   readonly
                                   style="background-color: #f8f9fa; cursor: not-allowed;"
                                   placeholder="Auto-configured based on event type">
                            <small class="text-muted d-block mt-1">
                                <i class="uil uil-lightbulb-alt me-1"></i>
                                Automatically set: <strong>Official = 1</strong>, <strong>Federation Cup = 4</strong>, <strong>Open = Unlimited</strong>
                                @if($has_participants)
                                    <span class="badge bg-warning text-dark ms-2"><i class="uil uil-lock me-1"></i>Locked - Event has {{ $participants_count }} participant(s)</span>
                                @endif
                            </small>
                            <div class="alert alert-info mt-2 small" id="slot_limit_info" style="display: none;">
                                <strong><i class="uil uil-lightbulb-alt me-1"></i>Slot Limit Explanation:</strong><br>
                                • <strong>Official Event (1):</strong> Each weight category/option allows 1 participant<br>
                                • <strong>Federation Cup (4):</strong> Each slot allows up to 4 participants for team compositions<br>
                                • <strong>Open Event (Unlimited):</strong> No restriction on participant count
                            </div>
                            <span class="text-danger small" id="error_participant_slot_limit"></span>
                        </div>

                        <!-- Participant Multiplier (hidden - for backward compatibility) -->
                        <input type="hidden" name="participant_multiplier" id="participant_multiplier" value="{{ $event->participant_multiplier ?? 1 }}">

                        <!-- Payment Required -->
                        <div class="col-md-6 d-none">
                            <div class="card h-100 border-success">
                                <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-rupee-sign text-success"></i>
                                                Payment Requirement
                                            </h6>
                                            <small class="text-muted">Control payment workflow</small>
                                        </div>
                                        <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' : '' }}
                                                   style="width: 3em; height: 1.5em;">
                                        </div>
                                    </div>
                                    <p class="small text-muted mb-0">
                                        <i class="uil uil-check-circle text-success me-1"></i>
                                        When enabled, participants must complete payment before their registration is confirmed.
                                    </p>
                                </div>
                            </div>
                            <span class="text-danger small" id="error_payment_required"></span>
                        </div>

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

                       
                    </div>
                    </div>
                    <!-- END STEP 1 -->

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

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

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

                    <!-- STEP 3: Fee Configuration (Moved from Step 2) -->
                    <div id="wizard_step_edit_3_content" class="wizard-content" style="display:none;">
                        <div class="row g-3">
                            <div class="col-12" id="fee_rules_section_edit">
                                <div class="d-flex justify-content-between align-items-center mb-3">
                                    <label class="form-label mb-0">
                                        <u>Registration Fee Rules (Simplified)</u>
                                        <small class="text-body-secondary d-block mt-1">
                                            @if($has_participants)
                                                <span class="badge bg-warning text-dark"><i class="uil uil-lock me-1"></i>Locked - Event has participants</span>
                                            @else
                                                Enter TOTAL amount for each group - system will auto-divide for teams/pairs
                                            @endif
                                        </small>
                                    </label>
                                </div>
                                
                                <div class="border rounded p-3 bg-white">
                                    <div id="fee_rules_container_edit">
                                        <!-- Fee rules will be dynamically inserted here by JS -->
                                    </div>
                                    <div id="fee_rules_empty_edit" class="text-center text-body-secondary py-4">
                                        <i class="uil uil-arrow-left me-1"></i>
                                        Go back to Step 2 and select categories and sub-categories to configure fee rules.
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- END STEP 3 -->
                </div>
                
                <!-- Sticky Footer with Wizard Navigation -->
                <div class="border-top bg-white" style="position: sticky; bottom: 0; z-index: 1000; padding: 1rem 1.5rem; box-shadow: 0 -2px 10px rgba(0,0,0,0.1);">
                    <div class="d-flex justify-content-between align-items-center gap-2">
                        <div class="d-flex gap-2">
                            <a href="{{ route('admin.events.index') }}" class="btn btn-outline-secondary" id="back_to_events">
                                <i class="uil uil-arrow-left me-2"></i>Cancel
                            </a>
                            <button type="button" class="btn btn-outline-info" id="fee_help_button" data-bs-toggle="modal" data-bs-target="#feeGuidelinesModal">
                                <i class="uil uil-question-circle me-1"></i>Fee Guidelines
                            </button>
                        </div>
                        <div class="d-flex gap-2">
                            <button type="button" class="btn btn-secondary" id="wizard_prev_btn_edit" style="display:none;">
                                <i class="uil uil-arrow-left me-2"></i>Previous
                            </button>
                            <button type="button" class="btn btn-primary" id="wizard_next_btn_edit">
                                Next<i class="uil uil-arrow-right ms-2"></i>
                            </button>
                            <button type="button" class="btn btn-success" id="wizard_submit_btn_edit" style="display:none;" onclick="validateEditStep3AndSubmit();">
                                <i class="uil uil-check me-2"></i>Update Event
                            </button>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Fee Guidelines Modal -->
<div class="modal fade" id="feeGuidelinesModal" tabindex="-1" aria-labelledby="feeGuidelinesModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header bg-info-subtle">
                <h5 class="modal-title" id="feeGuidelinesModalLabel">
                    <i class="uil uil-info-circle me-2"></i>Fee Configuration Guidelines
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="alert alert-primary mb-3">
                    <strong><i class="uil uil-lightbulb-alt me-1"></i>Simplified Fee Entry:</strong> 
                    Enter fees only once per group. The system will automatically apply the same fee to all related sub-options.
                </div>

                <h6 class="fw-bold mb-2"><i class="uil uil-dumbbell me-1"></i>Kyorugi</h6>
                <table class="table table-sm table-bordered mb-3">
                    <thead class="table-light">
                        <tr>
                            <th style="width: 30%;">Fee Type</th>
                            <th style="width: 35%;">What You Enter</th>
                            <th style="width: 35%;">System Behavior</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>
                                <div class="d-flex flex-wrap gap-1">
                                    <span class="badge bg-primary">Male</span>
                                    <span class="badge bg-danger">Female</span>
                                </div>
                            </td>
                            <td>₹1000 (per participant)</td>
                            <td>
                                Applies same fee to:<br>
                                • Kyorugi Male<br>
                                • Kyorugi Female
                            </td>
                        </tr>
                    </tbody>
                </table>

                <h6 class="fw-bold mb-2"><i class="uil uil-users-alt me-1"></i>Poomsae</h6>
                <table class="table table-sm table-bordered mb-3">
                    <thead class="table-light">
                        <tr>
                            <th style="width: 30%;">Fee Type</th>
                            <th style="width: 35%;">What You Enter</th>
                            <th style="width: 35%;">System Behavior</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>
                                <div class="d-flex flex-wrap gap-1">
                                    <span class="badge bg-info">Individual</span>
                                </div>
                            </td>
                            <td>₹3000 (per person)</td>
                            <td>
                                Applies same fee to:<br>
                                • Recognized Individual<br>
                                • Freestyle Individual
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <div class="d-flex flex-wrap gap-1">
                                    <span class="badge bg-warning text-dark">Pair</span>
                                </div>
                            </td>
                            <td>₹4000 (total for 2)</td>
                            <td>
                                Applies to both:<br>
                                • Recognized Pair<br>
                                • Freestyle Pair<br>
                                <small class="text-muted">(Auto-divides: ₹2000 per person)</small>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <div class="d-flex flex-wrap gap-1">
                                    <span class="badge bg-success">Recognized Team</span>
                                </div>
                            </td>
                            <td>₹5000 (total for 3)</td>
                            <td>
                                Applies to Recognized Team<br>
                                <small class="text-muted">(Auto-divides: ₹1666.67 per person)</small>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <div class="d-flex flex-wrap gap-1">
                                    <span class="badge bg-primary">Freestyle Team</span>
                                </div>
                            </td>
                            <td>₹6000 (total for 6)</td>
                            <td>
                                Applies to Freestyle Team<br>
                                <small class="text-muted">(Auto-divides: ₹1000 per person)</small>
                            </td>
                        </tr>
                    </tbody>
                </table>

                <h6 class="fw-bold mb-2"><i class="uil uil-arrow-growth me-1"></i>Fee Division Logic</h6>
                <ul class="list-unstyled">
                    <li class="mb-2"><i class="uil uil-check-circle text-success me-1"></i><strong>Individual:</strong> Full amount per participant</li>
                    <li class="mb-2"><i class="uil uil-check-circle text-success me-1"></i><strong>Pair (2 members):</strong> Total amount ÷ 2 = per person</li>
                    <li class="mb-2"><i class="uil uil-check-circle text-success me-1"></i><strong>Recognized Team (3 members):</strong> Total amount ÷ 3 = per person</li>
                    <li class="mb-2"><i class="uil uil-check-circle text-success me-1"></i><strong>Freestyle Team (6 members):</strong> Total amount ÷ 6 = per person</li>
                </ul>

                
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

@endsection

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

    .category-row td {
        vertical-align: middle;
    }
    .table > tbody > tr > td {
        padding: 1rem;
    }
    .table > thead > tr > th {
        font-weight: 600;
        background-color: #f8f9fa;
    }
    .form-check-input:disabled {
        opacity: 0.3;
        cursor: not-allowed;
    }
    .form-check-input:disabled ~ .form-check-label {
        opacity: 0.5;
        cursor: not-allowed;
    }
    
    /* SweetAlert2 wider popup for error lists */
    .swal-wide {
        width: 600px !important;
    }
    .swal-wide .swal2-html-container {
        text-align: left !important;
        white-space: pre-line !important;
    }
</style>
@endpush
@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11.11.1/dist/sweetalert2.all.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
<script>
    // Event fee configuration data for edit mode
    window.eventFeeConfigEdit = {
        categories: @json($categories),
        sub_categories: @json($sub_categories),
        sub_cat_options: @json($sub_cat_options),
        existing_fees: @json($existing_fees),
        has_participants: {{ $has_participants ? 'true' : 'false' }}
    };
</script>
<script src="/js/pages/admin/create_event.js?v=17691531898894"></script>
<script src="/js/pages/admin/edit_event_wizard.js?v=17691531895219"></script>
<script>

    $(function () {
        $('#back_to_events').on('click', function (e) {
            e.preventDefault();
            window.location.href = '/admin/events';
        });
        
        // Toggle slot limit info on icon click
        $('#slot_limit_info_icon').on('click', function() {
            $('#slot_limit_info').slideToggle();
        });
        
        // Initialize Bootstrap tooltips
        $('[data-bs-toggle="tooltip"]').tooltip();
        
        // If group is Official (id=1), lock venue state selection
        function applyVenueLock(){
            var gid = $('#group_id').val();
            if (String(gid) === '1' || String(gid) === '3') {
                $('#state_id').prop('disabled', true).addClass('opacity-75');
            } else {
                $('#state_id').prop('disabled', false).removeClass('opacity-75');
            }
        }
        applyVenueLock();
        $('#group_id').on('change', applyVenueLock);
    });
</script>
@endpush