@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 h-100 shadow-sm">
            <div class="card-header border-bottom bg-body" style="max-height:10% !important;">
                <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">
                @csrf
                <div class="card-body mt-5" style="height: calc(100vh - 280px); max-height: calc(100vh - 280px); overflow-y:auto;">
                    <input type="hidden" name="_token" id="_token" value="{{ csrf_token() }}">
                    <input type="hidden" name="event_id" id="event_id" value="{{ $event->id }}">

                    <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 invalid-feedback" id="error_cover_image"></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-8">
                            <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-4">
                            <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 == $event->group_id)
                                <option value="{{ $event_group->id }}" selected> {{ $event_group->name }}</option>
                                @else
                                <option value="{{ $event_group->id }}"> {{ $event_group->name }}</option>
                                @endif
                                @endforeach
                            </select>
                            <span class="text-danger small" id="error_group_id"></span>
                        </div>
                        <div class="col-md-3">
                            <label for="start_datetime" class="form-label">Event Start <span class="text-danger">*</span></label>
                            <input type="datetime-local" class="form-control required_event_inputs" id="start_datetime" name="start_datetime"
                                placeholder="Event Start" 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>
                                <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>
                        <div class="col-12">
                            <label class="form-label"><u>Select Event Categories to be displayed while registration.</u>
                                <span class="text-danger">*</span></label>
                            <div class="d-flex flex-wrap gap-2 opacity-75" id="categories_container">
                                @foreach ($categories as $category)
                                @if (in_array($category->id, explode(',', $event->category_ids)))
                                <label class="form-check form-check-inline" for="cat_{{$category->id}}">
                                    <input class="form-check-input" id="cat_{{$category->id}}" name="categories_options" type="checkbox"
                                        value="{{$category->id}}" data-label="{{$category->name}}" checked disabled>
                                    <span class="form-check-label">
                                        {{$category->name}}
                                    </span>
                                </label>
                                @else
                                <label class="form-check form-check-inline" for="cat_{{$category->id}}">
                                    <input class="form-check-input" id="cat_{{$category->id}}" name="categories_options" type="checkbox"
                                        value="{{$category->id}}" data-label="{{$category->name}}" disabled>
                                    <span class="form-check-label">
                                        {{$category->name}}
                                    </span>
                                </label>
                                @endif
                                @endforeach
                            </div>
                            <small class="text-body-secondary d-block">Categories are locked once event is created to protect existing registrations.</small>
                        </div>
                    </div>
                    <!-- Sticky submit bar -->
                    <div id="eventSubmitButtons" class="position-sticky" style="bottom:0; z-index:10;">
                        <div class="bg-body pt-3 pb-3 d-flex justify-content-end border-top 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>Back
                            </a>
                            <button type="button" class="btn btn-primary" onclick="validateUpdateEvent()">
                                <i class="uil uil-check me-2"></i>Update Event
                            </button>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@push('styles')
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
@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 src="/js/pages/admin/create_event.js?v=1768883716"></script>
<script>

    $(function () {
        $('#back_to_events').on('click', function (e) {
            e.preventDefault();
            window.location.href = '/admin/events';
        });
        // If group is Official (id=1), lock venue state selection
        function applyVenueLock(){
            var gid = $('#group_id').val();
            if (String(gid) === '1'){
                $('#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