@extends('layouts.admin')

@section('title', 'Create Event')
@section('page-title', 'Create New Event')

@section('content')
<div class="row justify-content-center">
    <div class="col-lg-9">
        <div class="card card-modern shadow-sm">
            <div class="card-header card-header-modern bg-phoenix-gradient text-white">
                <h5 class="card-title mb-0"><i class="uil uil-plus-circle me-2"></i>Create New Event</h5>
                <div class="card-subtitle text-white-50 small">Kindly fill all required fields.</div>
            </div>
            <div class="card-body position-relative">
                <form >
                    <input type="hidden" name="_token" id="_token" value="{{ csrf_token() }}">


                    <div class="d-flex align-items-center justify-content-center gap-4 mb-3">
                        <div>
                            <label for="coverImage" class="btn btn-phoenix-primary mb-2">
                                <i class="uil uil-image-plus me-2"></i>Upload Event Image
                                <input type="file"  class="required_event_inputs" placeholder="Cover image" id="coverImage" name="coverImage" accept=".jpeg,.jpg,.png,image/jpeg,image/png" style="display: none;" onchange="onImageUploade(event)">
                            </label>
                            <span class="text-danger small" id="error_coverImage"></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;">
                            <span class="text-muted small">No image</span>
                        </div>
                    </div>
                    <script>
                    function onImageUploade(e) {
                        const preview = document.getElementById('image_preview');
                        const file = e.target.files[0];
                        if (file && ['image/jpeg', 'image/png', 'image/jpg'].includes(file.type)) {
                            const reader = new FileReader();
                            reader.onload = function(ev) {
                                const img = new Image();
                                img.onload = function() {
                                    if (img.width === 350 && img.height === 250) {
                                        preview.innerHTML = '<img src="' + ev.target.result + '" style="max-width:100%; max-height:100%; object-fit:cover;">';
                                    } else {
                                        preview.innerHTML = '<span class="text-danger small">Invalid image dimensions</span>';
                                        Swal.fire({
                                            icon: 'error',
                                            title: 'Invalid Image Dimensions',
                                            text: 'Please upload an image with width 350px and height 250px.',
                                        });
                                        e.target.value = '';
                                    }
                                };
                                img.src = ev.target.result;
                            };
                            reader.readAsDataURL(file);
                        } else {
                            preview.innerHTML = '<span class="text-danger small">Invalid file type</span>';
                            Swal.fire({
                                icon: 'error',
                                title: 'Invalid File Type',
                                text: 'Please upload a JPEG or PNG image.',
                            });
                            e.target.value = '';
                        }
                    }
                    </script>
                    <script>
                    document.getElementById('coverImage').addEventListener('change', function(e) {
                        const preview = document.getElementById('image_preview');
                        const file = e.target.files[0];
                        if (file && ['image/jpeg', 'image/png', 'image/jpg'].includes(file.type)) {
                            const reader = new FileReader();
                            reader.onload = function(ev) {
                                preview.innerHTML = '<img src="' + ev.target.result + '" style="max-width:100%; max-height:100%; object-fit:cover;">';
                            };
                            reader.readAsDataURL(file);
                        } else {
                            preview.innerHTML = '<span class="text-danger small">Invalid file type</span>';
                        }
                    });
                    </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-6">
                            <label for="date" class="form-label">Event Date <span class="text-danger">*</span></label>
                            <input type="date" class="form-control required_event_inputs" id="date" name="date" placeholder="Event Date">
                            <span class="text-danger small" id="error_date"></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="date" class="form-control required_event_inputs" id="registration_closure_date" name="registration_closure_date" placeholder="Event Date" >
                            <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="" 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">
                                                <input class="form-check-input" name="categories_options" type="checkbox" value="{{$category->id}}">
                                                <span class="form-check-label">
                                                    {{$category->name}}
                                                </span>
                                            </label>                                   
                                        @endforeach
                            </div>
                        </div>
                    </div>
                    <div class="d-flex justify-content-between mt-4">
                        <a href="#" class="btn btn-outline-secondary" id="back_to_events">
                            <i class="uil uil-arrow-left me-2"></i>Back to Events
                        </a>
                        <button type="button" class="btn btn-phoenix-primary" onclick="validateCreateEvent()">
                            <i class="uil uil-check me-2"></i>Create Event
                        </button>
                    </div>
                </form>
            </div>
        </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=1769064197"></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