@extends('layouts.app')

@section('title', 'Edit Event')

@section('content')
    <nav class="mb-4">
        <ol class="flex items-center space-x-2 text-sm text-gray-600">
            <li><a href="{{ url('dashboard') }}" class="hover:text-blue-600">Dashboard</a></li>
            <li>
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
                </svg>
            </li>
            <li><a href="{{ route('events.index') }}" class="hover:text-blue-600">Events</a></li>
            <li>
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
                </svg>
            </li>
            <li class="text-gray-900">Edit</li>
        </ol>
    </nav>

    <div class="bg-white p-4 rounded shadow mb-6">
        <h3 class="text-lg font-semibold mb-4">Edit Event</h3>

        <form id="editEventForm" class="space-y-3">
            @csrf
            @method('PUT')

            <div>
                <label class="block text-xs font-medium text-gray-700">Title</label>
                <input type="text" id="title" name="title" class="mt-1 block w-full px-2 py-1 text-xs border rounded focus:ring-blue-500 focus:border-blue-500">
            </div>

            <div>
                <label class="block text-xs font-medium text-gray-700">Description</label>
                <textarea id="description" name="description" rows="3" class="mt-1 block w-full px-2 py-1 text-xs border rounded focus:ring-blue-500 focus:border-blue-500"></textarea>
            </div>

            <div class="grid grid-cols-2 gap-2">
                <div>
                    <label class="block text-xs font-medium text-gray-700">Organizer</label>
                    <input type="text" id="organizer_id" name="organizer_id" class="mt-1 block w-full px-2 py-1 text-xs border rounded focus:ring-blue-500 focus:border-blue-500">
                </div>

                <div>
                    <label class="block text-xs font-medium text-gray-700">Venue</label>
                    <select id="venue_id" name="venue_id" class="mt-1 block w-full px-2 py-1 text-xs border rounded focus:ring-blue-500 focus:border-blue-500">
                        <option value="">Select Venue</option>
                    </select>
                </div>
            </div>

            <div>
                <label class="block text-xs font-medium text-gray-700">Category</label>
                <input type="text" id="category" name="category" class="mt-1 block w-full px-2 py-1 text-xs border rounded focus:ring-blue-500 focus:border-blue-500">
            </div>

            <div class="grid grid-cols-2 gap-2">
                <div>
                    <label class="block text-xs font-medium text-gray-700">Start Date & Time</label>
                    <input type="datetime-local" id="start_datetime" name="start_datetime" class="mt-1 block w-full px-2 py-1 text-xs border rounded focus:ring-blue-500 focus:border-blue-500">
                </div>
                <div>
                    <label class="block text-xs font-medium text-gray-700">End Date & Time</label>
                    <input type="datetime-local" id="end_datetime" name="end_datetime" class="mt-1 block w-full px-2 py-1 text-xs border rounded focus:ring-blue-500 focus:border-blue-500">
                </div>
            </div>

            <div class="grid grid-cols-3 gap-2">
                <div>
                    <label class="block text-xs font-medium text-gray-700">Ticket Price ($)</label>
                    <input type="number" id="ticket_price" name="ticket_price" step="0.01" min="0" class="mt-1 block w-full px-2 py-1 text-xs border rounded focus:ring-blue-500 focus:border-blue-500">
                </div>
                <div>
                    <label class="block text-xs font-medium text-gray-700">Total Tickets</label>
                    <input type="number" id="total_tickets" name="total_tickets" min="0" class="mt-1 block w-full px-2 py-1 text-xs border rounded focus:ring-blue-500 focus:border-blue-500">
                </div>
                <div>
                    <label class="block text-xs font-medium text-gray-700">Available Tickets</label>
                    <input type="number" id="available_tickets" name="available_tickets" min="0" class="mt-1 block w-full px-2 py-1 text-xs border rounded focus:ring-blue-500 focus:border-blue-500">
                </div>
            </div>

            <div>
                <label class="block text-xs font-medium text-gray-700">Event Status</label>
                <select id="event_status" name="event_status" class="mt-1 block w-full px-2 py-1 text-xs border rounded focus:ring-blue-500 focus:border-blue-500">
                    <option value="upcoming">Upcoming</option>
                    <option value="ongoing">Ongoing</option>
                    <option value="completed">Completed</option>
                    <option value="cancelled">Cancelled</option>
                </select>
            </div>

            <div>
                <label class="block text-xs font-medium text-gray-700">Status</label>
                <select id="status" name="status" class="mt-1 block w-full px-2 py-1 text-xs border rounded focus:ring-blue-500 focus:border-blue-500">
                    <option value="active">Active</option>
                    <option value="inactive">Inactive</option>
                </select>
            </div>

            <button type="submit" class="px-3 py-1 text-xs bg-blue-500 text-white rounded hover:bg-blue-600">
                Update Event
            </button>
        </form>
    </div>
@endsection

@push('scripts')
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script>
        $(document).ready(function() {
            function loadVenues() {
                $.get('{{ route("venues.select") }}', function(res) {
                    if (res.success) {
                        let options = '<option value="">Select Venue</option>';
                        res.data.forEach(function(venue) {
                            options += `<option value="${venue.venue_id}">${venue.name}</option>`;
                        });
                        $('#venue_id').html(options);
                    } else {
                        Swal.fire('Error', 'Failed to load venues', 'error');
                    }
                });
            }

            // Initial load
            loadVenues();
        });
        $(document).ready(function () {
            const eventId = "{{ $id }}";

            // Fetch event data
            $.get(`/events/${eventId}`, function (res) {
                if (res.success) {
                    const e = res.data;
                    $('#title').val(e.title);
                    $('#description').val(e.description);
                    $('#organizer_id').val(e.organizer_id);
                    $('#venue_id').val(e.venue_id);
                    $('#category').val(e.category);
                    $('#start_datetime').val(e.start_datetime ? e.start_datetime.replace(' ', 'T') : '');
                    $('#end_datetime').val(e.end_datetime ? e.end_datetime.replace(' ', 'T') : '');
                    $('#ticket_price').val(e.ticket_price);
                    $('#total_tickets').val(e.total_tickets);
                    $('#available_tickets').val(e.available_tickets);
                    $('#event_status').val(e.event_status);
                    $('#status').val(e.status);
                } else {
                    Swal.fire('Error', res.message, 'error');
                }
            }).fail(() => {
                Swal.fire('Error', 'Unable to fetch event data.', 'error');
            });

            // Update event
            $('#editEventForm').on('submit', function (e) {
                e.preventDefault();

                Swal.fire({
                    title: 'Updating event...',
                    allowOutsideClick: false,
                    didOpen: () => Swal.showLoading()
                });

                $.ajax({
                    url: `/events/${eventId}`,
                    type: 'PUT',
                    data: $(this).serialize(),
                    success: function (res) {
                        Swal.close();
                        if (res.success) {
                            Swal.fire('Success', res.message, 'success').then(() => {
                                window.location.href = "{{ route('events.index') }}";
                            });
                        } else {
                            Swal.fire('Error', res.message, 'error');
                        }
                    },
                    error: function (xhr) {
                        Swal.close();
                        if (xhr.status === 422) {
                            let errors = xhr.responseJSON.errors;
                            let msg = Object.values(errors).map(arr => arr[0]).join('<br>');
                            Swal.fire('Validation Error', msg, 'warning');
                        } else {
                            Swal.fire('Error', 'Something went wrong.', 'error');
                        }
                    }
                });
            });
        });
    </script>
@endpush