@extends('admin.admin_dashboard')
@section('admin')

<div class="page-content">
    <x-chm.layout.page title="Calendar" subtitle="Schedule meetings, deadlines, and reminders." icon="bx bx-calendar">
        <x-slot:breadcrumb>
            <x-chm.breadcrumb-item :href="route('admin.dashboard')">Home</x-chm.breadcrumb-item>
            <x-chm.breadcrumb-item :active="true">Calendar</x-chm.breadcrumb-item>
        </x-slot:breadcrumb>

        <x-slot:actions>
            <button type="button" class="btn btn-primary btn-sm" data-bs-toggle="modal" data-bs-target="#eventModal" id="addEventBtn">
                <i class="bx bx-plus"></i> Add event
            </button>
        </x-slot:actions>

        <div class="row g-4">
            <div class="col-lg-9">
                <div class="card">
                    <div class="card-body">
                        <div id="chmCalendar"></div>
                    </div>
                </div>
            </div>
            <div class="col-lg-3">
                <div class="card">
                    <div class="card-body">
                        <h6 class="mb-3">Upcoming</h6>
                        @forelse($upcoming as $event)
                            <div class="chm-calendar-upcoming-item mb-3">
                                <span class="chm-calendar-dot" style="background:{{ $event->color }}"></span>
                                <div>
                                    <strong class="d-block">{{ $event->title }}</strong>
                                    <span class="small text-muted">{{ $event->starts_at->format('M j, Y g:i A') }}</span>
                                </div>
                            </div>
                        @empty
                            <p class="small text-muted mb-0">No upcoming events.</p>
                        @endforelse
                    </div>
                </div>
            </div>
        </div>
    </x-chm.layout.page>
</div>

<div class="modal fade" id="eventModal" tabindex="-1">
    <div class="modal-dialog">
        <form id="eventForm" class="modal-content">
            @csrf
            <div class="modal-header">
                <h5 class="modal-title" id="eventModalTitle">Add event</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <input type="hidden" id="eventId">
                <div class="mb-3">
                    <label class="form-label">Title</label>
                    <input type="text" id="eventTitle" class="form-control" required maxlength="255">
                </div>
                <div class="mb-3">
                    <label class="form-label">Description</label>
                    <textarea id="eventDescription" class="form-control" rows="3" maxlength="2000"></textarea>
                </div>
                <div class="row g-2 mb-3">
                    <div class="col-md-6">
                        <label class="form-label">Starts</label>
                        <input type="datetime-local" id="eventStarts" class="form-control" required>
                    </div>
                    <div class="col-md-6">
                        <label class="form-label">Ends</label>
                        <input type="datetime-local" id="eventEnds" class="form-control">
                    </div>
                </div>
                <div class="row g-2">
                    <div class="col-md-6">
                        <div class="form-check">
                            <input type="checkbox" id="eventAllDay" class="form-check-input">
                            <label class="form-check-label" for="eventAllDay">All day</label>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <label class="form-label">Colour</label>
                        <input type="color" id="eventColor" class="form-control form-control-color w-100" value="#1e3a5f">
                    </div>
                </div>
            </div>
            <div class="modal-footer justify-content-between">
                <button type="button" class="btn btn-outline-danger d-none" id="deleteEventBtn">Delete</button>
                <div class="d-flex gap-2 ms-auto">
                    <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary">Save event</button>
                </div>
            </div>
        </form>
    </div>
</div>

@endsection

@push('vendor-scripts')
<link href="https://cdn.jsdelivr.net/npm/fullcalendar@6.1.15/index.global.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/fullcalendar@6.1.15/index.global.min.js"></script>
@endpush

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function () {
    var calendarEl = document.getElementById('chmCalendar');
    var modalEl = document.getElementById('eventModal');
    var form = document.getElementById('eventForm');
    var modal = modalEl ? new bootstrap.Modal(modalEl) : null;
    var csrf = @json(csrf_token());
    var eventsUrl = @json(route('application.calendar.events'));
    var storeUrl = @json(route('application.calendar.events.store'));
    var updateUrlTemplate = @json(route('application.calendar.events.update', ['id' => '__ID__']));
    var deleteUrlTemplate = @json(route('application.calendar.events.destroy', ['id' => '__ID__']));

    function urlFor(template, id) {
        return template.replace('__ID__', id);
    }

    function resetForm() {
        document.getElementById('eventId').value = '';
        document.getElementById('eventTitle').value = '';
        document.getElementById('eventDescription').value = '';
        document.getElementById('eventStarts').value = '';
        document.getElementById('eventEnds').value = '';
        document.getElementById('eventAllDay').checked = false;
        document.getElementById('eventColor').value = '#1e3a5f';
        document.getElementById('eventModalTitle').textContent = 'Add event';
        document.getElementById('deleteEventBtn').classList.add('d-none');
    }

    function formatLocal(date) {
        if (!date) return '';
        var d = date instanceof Date ? date : new Date(date);
        var pad = function (n) { return String(n).padStart(2, '0'); };
        return d.getFullYear() + '-' + pad(d.getMonth() + 1) + '-' + pad(d.getDate()) + 'T' + pad(d.getHours()) + ':' + pad(d.getMinutes());
    }

    function openForm(data) {
        resetForm();
        if (data && data.id) {
            document.getElementById('eventId').value = data.id;
            document.getElementById('eventTitle').value = data.title || '';
            document.getElementById('eventDescription').value = data.extendedProps?.description || '';
            document.getElementById('eventStarts').value = formatLocal(data.start);
            document.getElementById('eventEnds').value = formatLocal(data.end);
            document.getElementById('eventAllDay').checked = !!data.allDay;
            document.getElementById('eventColor').value = data.backgroundColor || '#1e3a5f';
            document.getElementById('eventModalTitle').textContent = 'Edit event';
            document.getElementById('deleteEventBtn').classList.remove('d-none');
        }
        modal.show();
    }

    document.getElementById('addEventBtn')?.addEventListener('click', function () {
        resetForm();
        document.getElementById('eventModalTitle').textContent = 'Add event';
    });

    document.getElementById('deleteEventBtn')?.addEventListener('click', function () {
        var id = document.getElementById('eventId').value;
        if (!id) return;

        if (typeof Swal === 'undefined') {
            if (confirm('Delete this event?')) {
                submitEventDelete(id);
            }
            return;
        }

        Swal.fire({
            title: 'Are you sure?',
            text: 'Delete this event?',
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#dc3545',
            cancelButtonColor: '#6c757d',
            confirmButtonText: 'Yes, delete it',
        }).then(function (result) {
            if (result.isConfirmed) {
                submitEventDelete(id);
            }
        });
    });

    function submitEventDelete(id) {
        fetch(urlFor(deleteUrlTemplate, id), {
            method: 'DELETE',
            headers: {
                'X-CSRF-TOKEN': csrf,
                'Accept': 'application/json',
                'X-Requested-With': 'XMLHttpRequest',
            },
        }).then(function (res) {
            if (!res.ok) throw new Error('Delete failed');
            modal.hide();
            calendar.refetchEvents();
            if (window.ChmNotify) {
                window.ChmNotify.success('Event deleted', 'The calendar event was removed.');
            } else if (typeof Swal !== 'undefined') {
                Swal.fire({
                    icon: 'success',
                    title: 'Event deleted',
                    text: 'The calendar event was removed.',
                    confirmButtonColor: '#15803d',
                });
            }
        }).catch(function () {
            if (typeof Swal !== 'undefined') {
                Swal.fire({ icon: 'error', title: 'Could not delete event', confirmButtonColor: '#1e3a5f' });
            }
        });
    }

    form?.addEventListener('submit', function (e) {
        e.preventDefault();
        var id = document.getElementById('eventId').value;
        var payload = {
            title: document.getElementById('eventTitle').value,
            description: document.getElementById('eventDescription').value,
            starts_at: document.getElementById('eventStarts').value,
            ends_at: document.getElementById('eventEnds').value || null,
            all_day: document.getElementById('eventAllDay').checked ? 1 : 0,
            color: document.getElementById('eventColor').value,
        };
        var url = id ? urlFor(updateUrlTemplate, id) : storeUrl;
        var method = id ? 'PATCH' : 'POST';

        fetch(url, {
            method: method,
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': csrf,
                'Accept': 'application/json',
            },
            body: JSON.stringify(payload),
        }).then(function (res) {
            if (!res.ok) throw new Error('Save failed');
            modal.hide();
            calendar.refetchEvents();
        }).catch(function () {
            if (typeof Swal !== 'undefined') {
                Swal.fire({ icon: 'warning', title: 'Could not save event', confirmButtonColor: '#1e3a5f' });
            }
        });
    });

    var calendar = new FullCalendar.Calendar(calendarEl, {
        initialView: 'dayGridMonth',
        headerToolbar: { left: 'prev,next today', center: 'title', right: 'dayGridMonth,timeGridWeek,listWeek' },
        height: 'auto',
        events: eventsUrl,
        dateClick: function (info) {
            resetForm();
            document.getElementById('eventStarts').value = info.dateStr + 'T09:00';
            document.getElementById('eventModalTitle').textContent = 'Add event';
            modal.show();
        },
        eventClick: function (info) {
            openForm(info.event);
        },
    });

    calendar.render();
});
</script>
@endpush