@extends('layouts.admin')

@section('title', 'Create Event')
@section('page-title', 'Create New 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>Create New 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">
                            <input type="datetime-local" class="form-control required_event_inputs" id="registration_closure_date"
                                name="registration_closure_date" placeholder="Registration Closure Datetime">
                    </div> -->
                </div>
            </div>
            <form id="createEventForm" 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() }}">


                    <div class="d-flex align-items-center justify-content-center gap-4" id="cover_image_div">
                        <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;">
                                <span class="text-muted small">No image</span>
                            </div>
                        </div>
                        <div class="text-center">
                            <input type="file" class="required_event_inputs" name="cover_image" id="cover_image"
                                style="display: none;" accept="image/png, image/jpeg,image/jpg" placeholder="Cover Image"
                                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>
                    <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) {
                            // alert('#error_' + fieldId);

                            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">
                            <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">
                                <option selected value="">--Select Group--</option>
                                @foreach ($event_groups as $event_group)
                                <option value="{{ $event_group->id }}"> {{ $event_group->name }}</option>
                                @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">
                            <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">
                            <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" placeholder="Registration Closure Datetime">
                            <span class="text-danger small" id="error_registration_closure_date"></span>
                        </div>
                        <div class="col-md-6">
                            <label for="" class="form-label">Venue State <span class="text-danger">*</span></label>
                            <select class="form-select " id="state_id" name="">
                                <option value="">-Select State/Union Territory/Department-</option>

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

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

                                <optgroup label="DEPARTMENTS">
                                    @foreach ($states as $state)
                                    @if($state->is_state == 3)
                                    <option value="{{ $state->id }}"> {{ $state->name }}</option>
                                    @endif
                                    @endforeach
                                </optgroup>
                            </select>
                            <span class="text-danger small" id="error_"></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"></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" id="categories_container">
                                @foreach ($categories as $category)
                                <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}}">
                                    <span class="form-check-label">
                                        {{$category->name}}
                                    </span>
                                </label>
                                @endforeach
                            </div>
                        </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="validateCreateEvent()">
                                <i class="uil uil-check me-2"></i>Create 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=1768900540"></script>
<script>



    $(function () {
        // Example: Populate select and categories dynamically if needed
        // $('#group_id').append('<option value="1">Group 1</option>');
        // $('#').append('<option value="1">State 1</option>');
        // $('#categories_container').append('<div class="form-check form-check-inline"><input class="form-check-input" type="checkbox" name="category_ids[]" id="cat_1" value="1"><label class="form-check-label" for="cat_1">Category 1</label></div>');

        // Form validation and AJAX submit



        // Back to events button handler
        $('#back_to_events').on('click', function (e) {
            event.preventDefault();
            window.location.href = '/admin/events'; // Change to your route
        });
    });
</script>
@endpush