@extends('layouts.app')

@section('content')
    <div class="container mt-5">
        <!-- Notification Messages - Bigger and more noticeable -->
        <div class="container-fluid pt-4 px-4">
            @if (session('success'))
                <div class="alert alert-success alert-dismissible fade show" role="alert"
                    style="font-size: 18px; padding: 20px; border-left: 6px solid #28a745; box-shadow: 0 4px 8px rgba(0,0,0,0.1);">
                    <i class="fa fa-check-circle me-2" style="font-size: 24px;"></i>
                    <strong>Success!</strong> {{ session('success') }}
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"
                        style="position: absolute; right: 20px; top: 20px;"></button>
                </div>
            @endif

            @if (session('error'))
                <div class="alert alert-danger alert-dismissible fade show" role="alert"
                    style="font-size: 18px; padding: 20px; border-left: 6px solid #dc3545; box-shadow: 0 4px 8px rgba(0,0,0,0.1);">
                    <i class="fa fa-exclamation-circle me-2" style="font-size: 24px;"></i>
                    <strong>Error!</strong> {{ session('error') }}
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"
                        style="position: absolute; right: 20px; top: 20px;"></button>
                </div>
            @endif
        </div>
        <div class="card shadow-sm">
            <div class="card-body">
                <h2 class="mb-4">Create Event</h2>
                <form action="{{ route('events.create-event') }}" method="POST" enctype="multipart/form-data">
                    @csrf

                    <!-- Event Name -->
                    <div class="mb-3">
                        <label for="event_name" class="form-label">Event Name*</label>
                        <input type="text" name="event_name" id="event_name"
                            class="form-control @error('event_name') is-invalid @enderror" placeholder="Enter Event name"
                            value="{{ old('event_name') }}">
                        @error('event_name')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <!-- Event Category (Styled Select Field) -->
                    <div class="mb-3">
                        <label for="event_category_id" class="form-label">Event Category*</label>
                        <div class="input-group">
                            <span class="input-group-text"><i class="bi bi-list-ul"></i></span>
                            <select name="event_category_id" id="event_category_id"
                                class="form-select custom-select @error('event_category_id') is-invalid @enderror">
                                <option value="">Select a category</option>
                                @foreach ($categories as $category)
                                    <option value="{{ $category->id }}"
                                        {{ old('event_category_id') == $category->id ? 'selected' : '' }}>
                                        {{ $category->category_name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                        @error('event_category_id')
                            <div class="invalid-feedback d-block">{{ $message }}</div>
                        @enderror
                    </div>

                    <!-- Event Date -->
                    <div class="mb-3">
                        <label for="event_date" class="form-label">Event Date*</label>
                        <div class="input-group">
                            <input type="date" name="event_date" id="event_date"
                                class="form-control @error('event_date') is-invalid @enderror"
                                value="{{ old('event_date') }}">
                            <span class="input-group-text"><i class="bi bi-calendar"></i></span>
                        </div>
                        @error('event_date')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <!-- Event Time -->
                    <div class="mb-3">
                        <label for="event_time" class="form-label">Event Time*</label>
                        <div class="input-group">
                            <input type="time" name="event_time" id="event_time"
                                class="form-control @error('event_time') is-invalid @enderror"
                                value="{{ old('event_time') }}">
                            <span class="input-group-text"><i class="bi bi-clock"></i></span>
                        </div>
                        @error('event_time')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <!-- Event Venue -->
                    <div class="mb-3">
                        <label for="event_venue" class="form-label">Event Venue*</label>
                        <input type="text" name="event_venue" id="event_venue"
                            class="form-control @error('event_venue') is-invalid @enderror" placeholder="Enter event venue"
                            value="{{ old('event_venue') }}">
                        @error('event_venue')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <!-- Event Photo -->
                    <div class="mb-3">
                        <label for="event_photo" class="form-label">Event Photo*</label>
                        <input type="file" name="event_photo" id="event_photo"
                            class="form-control @error('event_photo') is-invalid @enderror" accept="image/*"
                            onchange="validateImageDimensions(event)">
                        <p class="small text-muted mt-2">Accepted formats: JPG, PNG, GIF (Upload Max size: 300*300px)</p>
                        @error('event_photo')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                        <div id="photo-preview" class="mt-2"></div>
                    </div>

                    <!-- Event Description -->
                    <div class="mb-3">
                        <label for="event_description" class="form-label">Event Description</label>
                        <textarea name="event_description" id="event_description" rows="4"
                            class="form-control @error('event_description') is-invalid @enderror">{{ old('event_description') }}</textarea>
                        @error('event_description')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <!-- Submit Button -->
                    <div class="text-end">
                        <button type="submit" class="btn btn-primary">Submit</button>
                    </div>

                </form>
            </div>
        </div>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/tinymce/6.8.2/tinymce.min.js"></script>
    {{-- <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script> --}}

    <script>
        document.addEventListener("DOMContentLoaded", function() {
            tinymce.init({
                selector: '#event_description',
                plugins: 'lists link image table code help wordcount',
                toolbar: 'undo redo | formatselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image',
                menubar: false,
                height: 200,
            });
        });
    </script>
    <script>
        function validateImageDimensions(event) {
            const file = event.target.files[0];
            if (!file) return;

            const img = new Image();
            const objectUrl = URL.createObjectURL(file);

            img.onload = function() {
                if (img.width !== 300 || img.height !== 300) {
                    alert('Image must be exactly 300x300 pixels.');
                    event.target.value = "";
                    document.getElementById("photo-preview").innerHTML = "";
                } else {

                    const preview = document.getElementById("photo-preview");
                    preview.innerHTML = `<img src="${objectUrl}" alt="Event Photo" width="300" height="300">`;
                }

                URL.revokeObjectURL(objectUrl);
            };

            img.src = objectUrl;
        }
    </script>

    <script>
        // Auto dismiss alerts after 5 seconds
        document.addEventListener('DOMContentLoaded', function() {
            setTimeout(function() {
                var alerts = document.querySelectorAll('.alert');
                alerts.forEach(function(alert) {
                    var bsAlert = new bootstrap.Alert(alert);
                    bsAlert.close();
                });
            }, 5000);
        });
    </script>
    <script>
        function previewEventPhoto(event) {
            const input = event.target;
            const previewContainer = document.getElementById('photo-preview');
            previewContainer.innerHTML = '';

            if (input.files && input.files[0]) {
                const reader = new FileReader();
                reader.onload = function(e) {
                    const img = document.createElement('img');
                    img.src = e.target.result;
                    img.alt = 'Event Photo';
                    img.className = 'img-thumbnail mt-2';
                    previewContainer.appendChild(img);
                };
                reader.readAsDataURL(input.files[0]);
            }
        }
    </script>
@endsection