@php
    $edit = !empty($event->id);
@endphp
@extends('layouts.admin.master')
@section('title', isset($event) ? 'Edit Event' : 'Create Event')

@push('css')
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
<!-- Summernote CSS -->
<link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-bs4.min.css" rel="stylesheet">
<style>
    .highlight-item {
        border: 1px solid #ddd;
        padding: 10px;
        margin-bottom: 10px;
        border-radius: 5px;
        background-color: #f9f9f9;
    }

    .error{
        font-size: 13px;
        color: #d62b13;
    }

    .date-item {
        border: 1px solid #ddd;
        padding: 15px;
        margin-bottom: 15px;
        border-radius: 5px;
        background-color: #f9f9f9;
    }
    .guest-pricing {
        background-color: #e8f4fd;
        padding: 10px;
        border-radius: 5px;
        margin: 0px;
    }

    /* Validation styling */
    .form-control.is-invalid {
        border-color: #dc3545;
        box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
    }

    .text-danger {
        color: #dc3545 !important;
        font-size: 0.875rem;
        margin-top: 0.25rem;
        display: block;
    }

    .btn:disabled {
        opacity: 0.65;
        cursor: not-allowed;
    }

    .btn .fa-spinner {
        animation: spin 1s linear infinite;
    }

    @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }

    /* Summernote Mobile Responsive Styles */
    @media (max-width: 768px) {
        .note-editor .note-toolbar {
            flex-wrap: wrap;
        }

        .note-editor .note-toolbar .note-btn-group {
            margin-bottom: 5px;
        }

        .note-editor .note-editing-area {
            min-height: 150px;
        }

        .note-modal .modal-dialog {
            margin: 10px;
            max-width: calc(100% - 20px);
        }

        .note-popover {
            max-width: 250px;
        }
    }

    @media (max-width: 576px) {
        .note-editor .note-toolbar {
            padding: 5px;
        }

        .note-editor .note-toolbar .note-btn {
            padding: 4px 6px;
            margin: 1px;
        }
    }
</style>
@endpush

@section('content')
<div class="content-header">
    <div class="container-fluid">
        <div class="row mb-2">
            <div class="col-sm-6">
                <h1 class="m-0">{{ isset($event) ? 'Edit Event' : 'Create Event' }}</h1>
            </div>
            <div class="col-sm-6">
                <ol class="breadcrumb float-sm-right">
                    <li class="breadcrumb-item"><a href="{{ route('admin.events.index') }}">Events</a></li>
                    <li class="breadcrumb-item active">{{ isset($event) ? 'Edit' : 'Create' }}</li>
                </ol>
            </div>
        </div>
    </div>
</div>

<div class="content">
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-header">
                        <h3 class="card-title">Event Information</h3>
                    </div>
                    <div class="card-body">
                        <form id="eventForm" method="POST" action="{{ isset($event) ? route('admin.events.update', $event->id) : route('admin.events.store') }}" enctype="multipart/form-data">
                            @csrf
                            @if(isset($event))
                                @method('PUT')
                            @endif

                            <div class="row">
                                <!-- Basic Information -->
                                <div class="col-md-6 col-sm-12">
                                    <div class="form-group">
                                        <label for="name">Event Name <x-required /></label>
                                        <input type="text" class="form-control" id="name" name="name" value="{{ $event->name ?? old('name') }}" required>
                                    </div>
                                </div>
                                <div class="col-md-2 col-sm-12">
                                    <div class="form-group">
                                        <label for="category">Category <x-required /></label>
                                        <select class="form-control" id="category" name="category" required>
                                            <option value="">Select Category</option>
                                            @foreach(App\Models\Event::CATEGORIES as $key => $value)
                                                <option value="{{ $key }}" {{ (isset($event) && $event->category == $key) || old('category') == $key ? 'selected' : '' }}>
                                                    {{ $value }}
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-2 col-sm-12">
                                    <div class="form-group">
                                        <label for="order">Order <x-required /></label>
                                        <input type="number" class="form-control" id="order" name="order" value="{{ $event->order ?? old('order') }}" min="0">
                                    </div>
                                </div>
                                <div class="col-md-2 col-sm-12">
                                    <div class="form-group">
                                        <label for="status">Status <x-required /></label>
                                        <select class="form-control" id="status" name="status" required>
                                            <option value="1" {{ (isset($event) && $event->status == 1) || old('status') == '1' ? 'selected' : '' }}>Active</option>
                                            <option value="0" {{ (isset($event) && $event->status == 0) || old('status') == '0' ? 'selected' : '' }}>Inactive</option>
                                        </select>
                                    </div>
                                </div>

                                <div class="col-md-6 col-sm-12">
                                    <div class="form-group">
                                        <label for="venue">Venue <x-required /></label>
                                        <textarea class="form-control" id="venue" name="venue" rows="3" required>{{ $event->venue ?? old('venue') }}</textarea>
                                    </div>
                                </div>
                                <div class="col-md-3 col-sm-12">
                                    <div class="form-group">
                                        <label for="expected_attendees">Expected Attendees</label>
                                        <input type="text" id="expected_attendees" name="expected_attendees" class="form-control" value="{{ $event->expected_attendees ?? old('expected_attendees') }}">
                                    </div>
                                </div>
                                <div class="col-md-3 col-sm-12">
                                    <div class="form-check mt-4">
                                        <input type="checkbox" class="form-check-input" id="is_guest_allowed" name="is_guest_allowed" value="1" {{ (isset($event) && $event->is_guest_allowed) || old('is_guest_allowed') ? 'checked' : '' }}>
                                        <label class="form-check-label" for="is_guest_allowed">Guests Allowed</label>
                                    </div>

                                    <div class="form-check">
                                        <input type="checkbox" class="form-check-input" id="is_accommodation_available" name="is_accommodation_available" value="1" {{ (isset($event) && $event->is_accommodation_available) || old('is_accommodation_available') ? 'checked' : '' }}>
                                        <label class="form-check-label" for="is_accommodation_available">Accommodation Assistance Available</label>
                                    </div>
                                </div>

                                {{--Last Payment Date--}}
                                <div class="col-md-3 col-sm-12">
                                    <div class="form-group">
                                        <label for="last_payment_date">Last Payment Date/Time <x-required /></label>
                                        <input type="text" id="last_payment_date" name="last_payment_date" class="form-control" value="{{ $event->last_payment_date ?? old('last_payment_date') }}">
                                    </div>
                                </div>

                                <div class="col-md-12 col-sm-12">
                                    <div class="form-group">
                                        <label for="description">Description <x-required /></label>
                                        <textarea class="form-control" id="description" name="description" rows="3" required>{{ $event->description ?? old('description') }}</textarea>
                                    </div>
                                </div>

                            </div>

                            <div class="row">
                                <div class="col-12">
                                    <hr>

                                    <!-- Highlights Section -->
                                    <div class="form-group">
                                        <label>Highlights</label>
                                    </div>
                                    <div id="highlightsContainer" class="row">
                                        @if(isset($event) && $event->highlights)
                                            @foreach($event->highlights as $highlight)
                                                <div class="col-sm-12 col-md-4 highlight-item-col">
                                                    <div class="highlight-item">
                                                        <div class="input-group">
                                                            <input type="text" class="form-control" name="highlights[]" value="{{ $highlight }}" placeholder="Enter highlight">
                                                            <div class="input-group-append">
                                                                <button type="button" class="btn btn-danger remove-highlight">Remove</button>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            @endforeach
                                        @endif
                                    </div>
                                    <button type="button" class="btn btn-info btn-sm" id="addHighlight">Add Highlight</button>

                                    <hr>
                                </div>
                            </div>

                            <!-- OTP Section -->
                            <div class="row" id="otpSection" style="display: {{ (isset($event) && $event->is_guest_allowed) || old('is_guest_allowed') ? 'block' : 'none' }};">
                                <div class="col-12">
                                    <hr>
                                    <div class="form-group">
                                        <label>OTP</label>
                                    </div>
                                    <div id="otpContainer" class="row">
                                        @php
                                            $hasRenderedOtps = false;
                                            $otpsToRender = [];

                                            if (old('otps') && is_array(old('otps')) && count(old('otps')) > 0) {
                                                $otpsToRender = old('otps');
                                            } elseif (isset($event) && $event->otps && count($event->otps) > 0) {
                                                $otpsToRender = $event->otps;
                                            }
                                        @endphp

                                        @if(count($otpsToRender) > 0)
                                            @foreach($otpsToRender as $otp)
                                                @php $hasRenderedOtps = true; @endphp
                                                <div class="col-sm-12 col-md-4 otp-item-col">
                                                    <div class="highlight-item">
                                                        <div class="input-group">
                                                            <input type="number" class="form-control" name="otps[]" value="{{ $otp }}" placeholder="Enter OTP Name" {{ $loop->first ? '' : '' }}>
                                                            @if(!$loop->first)
                                                                <div class="input-group-append">
                                                                    <button type="button" class="btn btn-danger remove-otp">Remove</button>
                                                                </div>
                                                            @endif
                                                        </div>
                                                    </div>
                                                </div>
                                            @endforeach
                                        @endif

                                        {{-- The default required OTP field will be handled by JavaScript --}}
                                    </div>
                                    <button type="button" class="btn btn-info btn-sm" id="addOtpField">Add OTP</button>
                                    <hr>
                                </div>
                            </div>

                            <!-- Event Dates Section -->
                            <div class="form-group">
                                <label>Event Dates <x-required /></label>
                                <div id="datesContainer">
                                    @if(isset($event) && $event->dates->count() > 0)
                                        @foreach($event->dates as $date)
                                            <div class="date-item">
                                                <div class="row">
                                                    {{--event segment name--}}
                                                    <div class="col-sm-12 col-md-12">
                                                        <div class="form-group">
                                                            <label>Event Segment Name <x-required /></label>
                                                            <input type="text" class="form-control" name="event_dates[{{ $loop->index }}][event_segment_name]" value="{{ $date->event_segment_name }}" required>
                                                        </div>
                                                    </div>


                                                    <div class="col-sm-12 col-md-10">
                                                        <div class="row">
                                                            <div class="col-sm-12 col-md-5">
                                                                <div class="form-group">
                                                                    <label>Start Date <x-required /></label>
                                                                    <input type="hidden" name="event_dates[{{ $loop->index }}][id]" value="{{ $date->id ?? '' }}" />
                                                                    <input type="text" class="form-control event_dates" name="event_dates[{{ $loop->index }}][start_date_time]" value="{{ $date->start_date_time ?? '' }}" required>
                                                                </div>
                                                            </div>
                                                            <div class="col-sm-12 col-md-5">
                                                                <div class="form-group">
                                                                    <label>End Date <x-required /></label>
                                                                    <input type="text" class="form-control event_dates" name="event_dates[{{ $loop->index }}][end_date_time]" value="{{ $date->end_date_time ?? '' }}" required>
                                                                </div>
                                                            </div>
                                                            <div class="col-sm-12 col-md-2">
                                                                <div class="form-group">
                                                                    <label>Fee <span class="text-danger d-inline">*</span></label>
                                                                    <input type="number" class="form-control" name="event_dates[{{ $loop->index }}][fee]" value="{{ $date->fee }}"step="0.01" min="0" required>
                                                                </div>
                                                            </div>
                                                            <div class="col-sm-12">
                                                                <div class="form-group">
                                                                    <label>Day Offers</label>
                                                                    <input type="text" class="form-control" name="event_dates[{{ $loop->index }}][day_offer]" value="{{ $date->day_offer ?? '' }}" placeholder="Lunch included, Residential assistance available etc.">
                                                                    <small>Please use a comma ( , ) to separate multiple offers. Ex. Lunch included, Residential assistance available </small>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="row guest-pricing">
                                                            <div class="row guest-pricing">
                                                                <div class="col-12">
                                                                    <h6>Guest Pricing</h6>
                                                                </div>
                                                                <div class="col-sm-12 col-md-4">
                                                                    <div class="form-group">
                                                                        <label>Spouse Fee <x-required/> </label>
                                                                        <input type="number" class="form-control" name="event_dates[{{ $loop->index }}][spouse_fee]" value="{{ $date->spouse_fee }}"step="0.01" min="0">
                                                                    </div>
                                                                </div>
                                                                <div class="col-sm-12 col-md-4">
                                                                    <div class="form-group">
                                                                        <label>Children (Below 5) <x-required/></label>
                                                                        <input type="number" class="form-control" name="event_dates[{{ $loop->index }}][children_below_5_fee]" value="{{ $date->children_below_5_fee }}"step="0.01" min="0">
                                                                    </div>
                                                                </div>
                                                                <div class="col-sm-12 col-md-4">
                                                                    <div class="form-group">
                                                                        <label>Children (5-12) <x-required/></label>
                                                                        <input type="number" class="form-control" name="event_dates[{{ $loop->index }}][children_5_to_12_fee]" value="{{ $date->children_5_to_12_fee }}"step="0.01" min="0">
                                                                    </div>
                                                                </div>
                                                                <div class="col-sm-12 col-md-4">
                                                                    <div class="form-group">
                                                                        <label>Children (Above 12) <x-required/></label>
                                                                        <input type="number" class="form-control" name="event_dates[{{ $loop->index }}][children_above_12_fee]" value="{{ $date->children_above_12_fee }}"step="0.01" min="0">
                                                                    </div>
                                                                </div>
                                                                <div class="col-sm-12 col-md-4">
                                                                    <div class="form-group">
                                                                        <label>Driver Fee <x-required/></label>
                                                                        <input type="number" class="form-control" name="event_dates[{{ $loop->index }}][driver_fee]" value="{{ $date->driver_fee }}" step="0.01" min="0">
                                                                    </div>
                                                                </div>
                                                                <div class="col-sm-12 col-md-4">
                                                                    <div class="form-group">
                                                                        <label>Maid Fee <x-required/></label>
                                                                        <input type="number" class="form-control" name="event_dates[{{ $loop->index }}][maid_fee]" value="{{ $date->maid_fee }}"step="0.01" min="0">
                                                                    </div>
                                                                </div>
                                                                <div class="col-sm-12 col-md-4">
                                                                    <div class="form-group">
                                                                        <label>Other Guest Fee <x-required/></label>
                                                                        <input type="number" class="form-control" name="event_dates[{{ $loop->index }}][other_guest_fee]" value="{{ $date->other_guest_fee }}"step="0.01" min="0">
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="col-sm-12 col-md-2">
                                                        <button type="button" class="btn btn-danger btn-sm btn-block remove-date" style="margin-top: 35px !important;">
                                                            Remove Date
                                                        </button>
                                                    </div>
                                                </div>
                                            </div>
                                        @endforeach
                                    @else
                                        <div class="date-item">
                                            <div class="row">
                                                <div class="col-sm-12 col-md-10">
                                                    <div class="row">
                                                        {{--event segment name--}}
                                                        <div class="col-sm-12 col-md-12">
                                                            <div class="form-group">
                                                                <label>Event Segment Name <x-required /></label>
                                                                <input type="text" class="form-control" name="event_dates[0][event_segment_name]" required>
                                                            </div>
                                                        </div>

                                                        <div class="col-sm-12 col-md-5">
                                                            <div class="form-group">
                                                                <label>Start Date <x-required /></label>
                                                                <input type="text" class="form-control event_dates" name="event_dates[0][start_date_time]" required>
                                                            </div>
                                                        </div>
                                                        <div class="col-sm-12 col-md-5">
                                                            <div class="form-group">
                                                                <label>End Date <x-required /></label>
                                                                <input type="text" class="form-control event_dates" name="event_dates[0][end_date_time]" required>
                                                            </div>
                                                        </div>
                                                        <div class="col-sm-12 col-md-2">
                                                            <div class="form-group">
                                                                <label>Fee <span class="text-danger d-inline">*</span></label>
                                                                <input type="number" class="form-control" name="event_dates[0][fee]"step="0.01" min="0" required>
                                                            </div>
                                                        </div>
                                                        <div class="col-sm-12">
                                                            <div class="form-group">
                                                                <label>Day Offers</label>
                                                                <input type="text" class="form-control" name="event_dates[0][day_offer]" placeholder="Lunch included, Residential assistance available etc.">
                                                                <small>Please use a comma ( , ) to separate multiple offers. Ex. Lunch included, Residential assistance available </small>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="row guest-pricing">
                                                        <div class="col-12">
                                                            <h6>Guest Pricing</h6>
                                                        </div>
                                                        <div class="col-sm-12 col-md-4">
                                                            <div class="form-group">
                                                                <label>Spouse Fee <x-required/> </label>
                                                                <input type="number" class="form-control" name="event_dates[0][spouse_fee]"step="0.01" min="0">
                                                            </div>
                                                        </div>
                                                        <div class="col-sm-12 col-md-4">
                                                            <div class="form-group">
                                                                <label>Children (Below 5) <x-required/></label>
                                                                <input type="number" class="form-control" name="event_dates[0][children_below_5_fee]"step="0.01" min="0">
                                                            </div>
                                                        </div>
                                                        <div class="col-sm-12 col-md-4">
                                                            <div class="form-group">
                                                                <label>Children (5-12) <x-required/></label>
                                                                <input type="number" class="form-control" name="event_dates[0][children_5_to_12_fee]"step="0.01" min="0">
                                                            </div>
                                                        </div>
                                                        <div class="col-sm-12 col-md-4">
                                                            <div class="form-group">
                                                                <label>Children (Above 12) <x-required/></label>
                                                                <input type="number" class="form-control" name="event_dates[0][children_above_12_fee]"step="0.01" min="0">
                                                            </div>
                                                        </div>
                                                        <div class="col-sm-12 col-md-4">
                                                            <div class="form-group">
                                                                <label>Driver Fee <x-required/></label>
                                                                <input type="number" class="form-control" name="event_dates[0][driver_fee]"step="0.01" min="0">
                                                            </div>
                                                        </div>
                                                        <div class="col-sm-12 col-md-4">
                                                            <div class="form-group">
                                                                <label>Maid Fee <x-required/></label>
                                                                <input type="number" class="form-control" name="event_dates[0][maid_fee]"step="0.01" min="0">
                                                            </div>
                                                        </div>
                                                        <div class="col-sm-12 col-md-4">
                                                            <div class="form-group">
                                                                <label>Other Guest Fee <x-required/></label>
                                                                <input type="number" class="form-control" name="event_dates[0][other_guest_fee]"step="0.01" min="0">
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-sm-12 col-md-2">
                                                    <button type="button" class="btn btn-danger btn-sm btn-block remove-date" style="margin-top: 35px !important;">
                                                        Remove Date
                                                    </button>
                                                </div>
                                            </div>
                                        </div>
                                    @endif
                                </div>
                                <button type="button" class="btn btn-info btn-sm" id="addDate">Add Date</button>
                            </div>

                            <hr>

                            <!-- File Upload Section -->
                            <div class="form-group">
                                <label>Upload Files</label>
                                <input type="file" class="form-control-file" name="files[]" multiple accept=".jpg,.jpeg,.png,.pdf,.doc,.docx">
                                <small class="form-text text-muted">You can upload multiple files. Supported formats: JPG, PNG, PDF, DOC, DOCX (Max: 10MB each)</small>

                                @if(isset($event) && $event->files->count() > 0)
                                    <div class="mt-3">
                                        <h6>Current Files:</h6>
                                        @foreach($event->files as $file)
                                            <div class="d-flex align-items-center mb-2">
                                                <input type="checkbox" name="delete_files[]" value="{{ $file->id }}" id="delete_file_{{ $file->id }}">
                                                <label for="delete_file_{{ $file->id }}" class="mb-0 ml-2">
                                                    {{ basename($file->file_path) }}
                                                </label>
                                                <small class="text-muted ml-2">(Mark to delete)</small>
                                            </div>
                                        @endforeach
                                    </div>
                                @endif
                            </div>

                            <div class="form-group text-center">
                                <button type="submit" class="btn btn-primary">Save Event</button>
                                <a href="{{ route('admin.events.index') }}" class="btn btn-secondary">Cancel</a>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('js')
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.5/jquery.validate.min.js"></script>
<!-- Summernote JS -->
<script src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-bs4.min.js"></script>
<script>
$(document).ready(function() {
    // Initialize Summernote for description
    $('#description').summernote({
        height: 200,
        minHeight: 150,
        maxHeight: 400,
        placeholder: 'Enter event description...',
        toolbar: [
            ['style', ['style']],
            ['font', ['bold', 'underline', 'italic', 'clear']],
            ['fontname', ['fontname']],
            ['fontsize', ['fontsize']],
            ['color', ['color']],
            ['para', ['ul', 'ol', 'paragraph']],
            ['table', ['table']],
            ['insert', ['link']],
            ['view', ['codeview', 'undo', 'redo']]
        ],
        fontNames: ['Arial', 'Arial Black', 'Comic Sans MS', 'Courier New', 'Helvetica Neue', 'Helvetica', 'Impact', 'Lucida Grande', 'Tahoma', 'Times New Roman', 'Verdana'],
        fontSizes: ['8', '9', '10', '11', '12', '14', '16', '18', '20', '24', '28', '32', '36', '48', '64'],
        dialogsInBody: true,
        dialogsFade: true,
        focus: false,
        tabDisable: false,
        styleTags: ['p', 'blockquote', 'pre', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6'],
        callbacks: {
            onInit: function() {
                console.log('Summernote initialized for event description');
            }
        }
    });

    // Clean up Summernote on page unload
    $(window).on('beforeunload', function() {
        if ($('#description').length && $('#description').summernote) {
            $('#description').summernote('destroy');
        }
    });

    $(".event_dates").flatpickr({
        enableTime: true,
        dateFormat: "Y-m-d H:i",
    });

    $("#last_payment_date").flatpickr({
        enableTime: true,
        dateFormat: "Y-m-d H:i",
    });

    let dateIndex = {{ isset($event) && $event->dates->count() > 0 ? $event->dates->count() : 0 }};
    let highlightIndex = {{ isset($event) && $event->highlights ? count($event->highlights) : 0 }};
    let otpIndex = {{ isset($event) && $event->otps ? count($event->otps) : 0 }};

    // Function to add a default OTP field without a remove button
    function addDefaultOtpField() {
        const defaultOtpHtml = `
            <div class="col-sm-12 col-md-4 otp-item-col">
                <div class="highlight-item">
                    <div class="input-group">
                        <input type="number" class="form-control" name="otps[]" placeholder="Enter OTP Name">
                        {{-- No remove button for the default field --}}
                    </div>
                </div>
            </div>
        `;
        $('#otpContainer').append(defaultOtpHtml);
        $('[name="otps[]"]').last().rules('add', 'required');
    }

    // Function to add a new OTP field with a remove button
    function addNewOtpField() {
        const otpHtml = `
            <div class="col-sm-12 col-md-4 otp-item-col">
                <div class="highlight-item">
                    <div class="input-group">
                        <input type="text" class="form-control" name="otps[]" placeholder="Enter OTP Name">
                        <div class="input-group-append">
                            <button type="button" class="btn btn-danger remove-otp">Remove</button>
                        </div>
                    </div>
                </div>
            </div>
        `;
        $('#otpContainer').append(otpHtml);
        $('[name="otps[]"]').last().rules('add', 'required');
        otpIndex++;
    }

    // Add Highlight
    $('#addHighlight').click(function() {
        const highlightHtml = `
            <div class="col-sm-12 col-md-4 highlight-item-col">
                <div class="highlight-item">
                    <div class="input-group">
                        <input type="text" class="form-control" name="highlights[]" placeholder="Enter highlight">
                        <div class="input-group-append">
                            <button type="button" class="btn btn-danger remove-highlight">Remove</button>
                        </div>
                    </div>
                </div>
            </div>
        `;
        $('#highlightsContainer').append(highlightHtml);
        highlightIndex++;
    });

    // Remove Highlight
    $(document).on('click', '.remove-highlight', function() {
        $(this).closest('.highlight-item-col').remove();
    });

    // Add OTP Field
    $('#addOtpField').click(function() {
        addNewOtpField();
    });

    // Remove OTP Field
    $(document).on('click', '.remove-otp', function() {
        $(this).closest('.otp-item-col').remove();
        // If all OTP fields are removed and is_guest_allowed is checked, add a default one back
        if ($('#is_guest_allowed').is(':checked') && $('#otpContainer').children().length === 0) {
            addDefaultOtpField();
        }
    });

    // Toggle OTP section visibility based on is_guest_allowed checkbox
    $('#is_guest_allowed').change(function() {
        if ($(this).is(':checked')) {
            $('#otpSection').show();
            if ($('#otpContainer').children().length === 0) {
                addDefaultOtpField();
            }
        } else {
            $('#otpSection').hide();
            $('#otpContainer').empty(); // Clear OTP fields when section is hidden
        }
    });


    // Initial setup for existing OTP fields on page load
    // if ($('#is_guest_allowed').is(':checked')) {
    //     $('#otpSection').show();
    //     // If there are no existing OTPs, add a default one
    //     if ($('#otpContainer').children().length === 0) {
    //         addDefaultOtpField();
    //     } else {
    //         // For existing OTPs, make all of them required
    //         $('[name="otps[]"]').each(function(index) {
    //             if ($(this).val().trim() !== '') {
    //                 $(this).rules('add', 'required');
    //             } else if (index === 0) {
    //                  $(this).rules('add', 'required'); // First field is always required
    //             }
    //         });
    //     }
    // } else {
    //     $('#otpSection').hide();
    //     $('#otpContainer').empty();
    // }

    // Add Date
    $('#addDate').click(function() {
        /*dateIndex count check first and update it*/
        dateIndex++;
        const dateHtml = `
            <div class="date-item">
                <div class="row">

                    {{--event segment name--}}
                    <div class="col-sm-12 col-md-10">
                        <div class="form-group">
                            <label>Event Segment Name <x-required /></label>
                            <input type="text" class="form-control" name="event_dates[${dateIndex}][event_segment_name]" required>
                        </div>
                    </div>

                    <div class="col-sm-12 col-md-10">
                        <div class="row">
                            <div class="col-sm-12 col-md-5">
                                <div class="form-group">
                                    <label>Start Date <x-required /></label>
                                    <input type="hidden" name="event_dates[${dateIndex}][id]" value="" />
                                    <input type="text" class="form-control event_dates" name="event_dates[${dateIndex}][start_date_time]" required>
                                </div>
                            </div>
                            <div class="col-sm-12 col-md-5">
                                <div class="form-group">
                                    <label>End Date <x-required /></label>
                                    <input type="text" class="form-control event_dates" name="event_dates[${dateIndex}][end_date_time]" required>
                                </div>
                            </div>
                            <div class="col-sm-12 col-md-2">
                                <div class="form-group">
                                    <label>Fee <span class="text-danger d-inline">*</span></label>
                                    <input type="number" class="form-control" name="event_dates[${dateIndex}][fee]"step="0.01" min="0" required>
                                </div>
                            </div>
                            <div class="col-sm-12">
                                <div class="form-group">
                                    <label>Day Offers</label>
                                    <input type="text" class="form-control" name="event_dates[${dateIndex}][day_offer]" placeholder="Lunch included, Residential assistance available etc.">
                                    <small>Please use a comma ( , ) to separate multiple offers. Ex. Lunch included, Residential assistance available </small>
                                </div>
                            </div>
                        </div>
                        <div class="row guest-pricing">
                            <div class="col-12">
                                <h6>Guest Pricing</h6>
                            </div>
                            <div class="col-sm-12 col-md-4">
                                <div class="form-group">
                                    <label>Spouse Fee <x-required/> </label>
                                    <input type="number" class="form-control" name="event_dates[${dateIndex}][spouse_fee]"step="0.01" min="0">
                                </div>
                            </div>
                            <div class="col-sm-12 col-md-4">
                                <div class="form-group">
                                    <label>Children (Below 5) <x-required/></label>
                                    <input type="number" class="form-control" name="event_dates[${dateIndex}][children_below_5_fee]"step="0.01" min="0">
                                </div>
                            </div>
                            <div class="col-sm-12 col-md-4">
                                <div class="form-group">
                                    <label>Children (5-12) <x-required/></label>
                                    <input type="number" class="form-control" name="event_dates[${dateIndex}][children_5_to_12_fee]"step="0.01" min="0">
                                </div>
                            </div>
                            <div class="col-sm-12 col-md-4">
                                <div class="form-group">
                                    <label>Children (Above 12) <x-required/></label>
                                    <input type="number" class="form-control" name="event_dates[${dateIndex}][children_above_12_fee]"step="0.01" min="0">
                                </div>
                            </div>
                            <div class="col-sm-12 col-md-4">
                                <div class="form-group">
                                    <label>Driver Fee <x-required/></label>
                                    <input type="number" class="form-control" name="event_dates[${dateIndex}][driver_fee]"step="0.01" min="0">
                                </div>
                            </div>
                            <div class="col-sm-12 col-md-4">
                                <div class="form-group">
                                    <label>Maid Fee <x-required/></label>
                                    <input type="number" class="form-control" name="event_dates[${dateIndex}][maid_fee]"step="0.01" min="0">
                                </div>
                            </div>
                            <div class="col-sm-12 col-md-4">
                                <div class="form-group">
                                    <label>Other Guest Fee <x-required/></label>
                                    <input type="number" class="form-control" name="event_dates[${dateIndex}][other_guest_fee]"step="0.01" min="0">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-12 col-md-2">
                        <button type="button" class="btn btn-danger btn-sm btn-block remove-date" style="margin-top: 35px !important;">
                            Remove Date
                        </button>
                    </div>
                </div>
            </div>
        `;//${dateIndex}
        $('#datesContainer').append(dateHtml);

        $('#datesContainer .date-item:last .event_dates').flatpickr({
            enableTime: true,
            dateFormat: "Y-m-d H:i",
        });


        //dateIndex++;
    });

    // Remove Date
    $(document).on('click', '.remove-date', function() {
        $(this).closest('.date-item').remove();
    });

    // Add custom validation method for Summernote
    $.validator.addMethod("summernoteRequired", function(value, element) {
        var textContent = $('#description').summernote('code').replace(/<[^>]*>/g, '').trim();
        return textContent.length > 0;
    }, "Please enter event description");

    $.validator.addMethod("summernoteMinLength", function(value, element, param) {
        var textContent = $('#description').summernote('code').replace(/<[^>]*>/g, '').trim();
        return textContent.length >= param;
    }, "Description must be at least {0} characters long");

    // Form validation rules
    $('#eventForm').validate({
        rules: {
            name: {
                required: true,
                minlength: 3,
                maxlength: 255
            },
            category: {
                required: true
            },
            venue: {
                required: true,
                minlength: 5
            },
            last_payment_date: {
                required: true
            },
            description: {
                summernoteRequired: true,
                summernoteMinLength: 10
            },
            'event_dates[${dateIndex}][event_segment_name]': {
                required: true
            },
            'dates[0][date]': {
                required: true
            },
            'dates[0][start_time]': {
                required: true
            },
            'dates[0][end_time]': {
                required: true
            },
            'dates[0][fee]': {
                required: true,
                number: true,
                min: 0
            },
            'otps[]': {
                required: function(element) {
                    return $('#is_guest_allowed').is(':checked');
                }
            }
        },
        messages: {
            name: {
                required: "Please enter event name",
                minlength: "Event name must be at least 3 characters long",
                maxlength: "Event name cannot exceed 255 characters"
            },
            category: {
                required: "Please select a category"
            },
            venue: {
                required: "Please enter venue",
                minlength: "Venue must be at least 5 characters long"
            },
            description: {
                summernoteRequired: "Please enter event description",
                summernoteMinLength: "Description must be at least 10 characters long"
            },
            'dates[0][date]': {
                required: "Please select event date"
            },
            'dates[0][start_time]': {
                required: "Please select start time"
            },
            'dates[0][end_time]': {
                required: "Please select end time"
            },
            'dates[0][fee]': {
                required: "Please enter event fee",
                number: "Fee must be a valid number",
                min: "Fee cannot be negative"
            }
        },
        errorPlacement: function(error, element) {
            if (element.attr("name") == "otps[]" ) {
                error.insertAfter(element.closest('.input-group'));
            } else {
                error.addClass('text-danger');
                error.insertAfter(element);
            }
        },
        highlight: function(element) {
            $(element).addClass('is-invalid');
        },
        unhighlight: function(element) {
            $(element).removeClass('is-invalid');
        }
    });

    // Form submission
    $('#eventForm').submit(function(e) {
        e.preventDefault();

        // Sync Summernote content before validation
        if ($('#description').summernote) {
            $('#description').val($('#description').summernote('code'));
        }

        // Check if form is valid
        if (!$(this).valid()) {
            return false;
        }

        // Get submit button and disable it
        const submitBtn = $(this).find('button[type="submit"]');
        const originalText = submitBtn.html();

        // Disable button and show progress state
        submitBtn.prop('disabled', true)
                 .html('<i class="fas fa-spinner fa-spin me-2"></i>Saving Event...');

        const formData = new FormData(this);

        $.ajax({
            url: $(this).attr('action'),
            type: 'POST',
            data: formData,
            processData: false,
            contentType: false,
            success: function(response) {
                if (response.alertType === 'success') {
                    // console.log("AJAX Success: Before toastr.success");
                    toastr.success(response.message);
                    // console.log("AJAX Success: After toastr.success");
                    // debugger; // Add this line to pause execution here
                    setTimeout(function() {
                        // console.log("Attempting to redirect to: " + response.redirectTo);
                        window.location.href = response.redirectTo;
                    }, 1500);
                }
            },
            error: function(xhr) {
                // Re-enable button and restore original text
                submitBtn.prop('disabled', false).html(originalText);

                if (xhr.status === 422) {
                    const errors = xhr.responseJSON.errors;
                    Object.keys(errors).forEach(function(key) {
                        toastr.error(errors[key][0]);
                    });
                } else {
                    let msg = 'Something went wrong!';
                    if (xhr.responseJSON && xhr.responseJSON.message) {
                        msg = xhr.responseJSON.message;
                    }
                    toastr.error(msg);
                }
            }
        });
    });
});
</script>
@endpush