@extends('layouts.admin')

@section('admin_content')
    <div class="container mt-5">
        <div class="card shadow border-0">
            <div class="card-header bg-primary text-white">
                <h5 class="mb-0">Event Management Calendar</h5>
            </div>
            <div class="card-body">
                <div id='calendar'></div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="eventModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="modalTitle">Add/Edit 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">Event Title</label>
                        <input type="text" id="eventTitle" class="form-control">
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Selected Date</label>
                        <input type="text" id="eventDate" class="form-control" readonly>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Localtion</label>
                        <input type="text" id="location" class="form-control " >
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Color</label>
                        <input type="color" id="eventColor" class="form-control form-control-color" value="#3788d8">
                    </div>
                </div>
                <div class="modal-footer d-flex justify-content-between">
                    <button type="button" id="deleteEventBtn" class="btn btn-danger d-none">Delete</button>
                    <div>
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                        <button type="button" id="saveEventBtn" class="btn btn-primary">Save Changes</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@push('styles')
    <link href='https://cdn.jsdelivr.net/npm/fullcalendar@6.1.10/index.global.min.css' rel='stylesheet' />
@endpush
@push('scripts')
    <script src='https://cdn.jsdelivr.net/npm/fullcalendar@6.1.10/index.global.min.js'></script>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const calendarEl = document.getElementById('calendar');
            const myModal = new bootstrap.Modal(document.getElementById('eventModal'));
            const delBtn = document.getElementById('deleteEventBtn');

            const calendar = new FullCalendar.Calendar(calendarEl, {
                initialView: 'dayGridMonth',
                themeSystem: 'bootstrap5',
                selectable: true,
                events: '/admin/get-events',

                // 1. New Event-er jonno click
                dateClick: function(info) {
                    document.getElementById('eventId').value = '';
                    document.getElementById('eventTitle').value = '';
                    document.getElementById('eventDate').value = info.dateStr;
                    document.getElementById('location').value = '';
                    document.getElementById('modalTitle').innerText = "Add New Event";
                    delBtn.classList.add('d-none'); // Create korar somoy delete button lagbe na
                    myModal.show();
                },

                // 2. Existing Event Edit/Delete-er jonno click
                eventClick: function(info) {
                    const event = info.event;
                    document.getElementById('eventId').value = event.id;
                    document.getElementById('eventTitle').value = event.title;
                    document.getElementById('eventDate').value = event.startStr;
                    document.getElementById('eventColor').value = event.backgroundColor;
                    document.getElementById('location').value = event.backgroundColor;
                    document.getElementById('modalTitle').innerText = "Edit Event";
                    delBtn.classList.remove('d-none'); // Edit-er somoy delete button show hobe
                    myModal.show();
                }
            });
            calendar.render();

            // Save/Update Function
            document.getElementById('saveEventBtn').addEventListener('click', function() {
                const id = document.getElementById('eventId').value;
                const title = document.getElementById('eventTitle').value;
                const start = document.getElementById('eventDate').value;
                const color = document.getElementById('eventColor').value;
                const location = document.getElementById('location').value;


                // ID thakle update url, na thakle store url
                const url = id ? "{{ route('admin.events.update') }}" : "{{ route('admin.events.store') }}";

                fetch(url, {
                    method: "POST",
                    headers: {
                        "Content-Type": "application/json",
                        "X-CSRF-TOKEN": "{{ csrf_token() }}"
                    },
                    body: JSON.stringify({
                        id,
                        title,
                        start,
                        color,
                        location
                    })
                }).then(res => res.json()).then(data => {
                    calendar.refetchEvents();
                    myModal.hide();
                });
            });

            // Delete Function
            delBtn.addEventListener('click', function() {
                const id = document.getElementById('eventId').value;
                if (confirm("Are you sure you want to delete this event?")) {
                    fetch(`/admin/events/delete/${id}`, {
                        method: "DELETE",
                        headers: {
                            "X-CSRF-TOKEN": "{{ csrf_token() }}"
                        }
                    }).then(res => res.json()).then(data => {
                        calendar.refetchEvents();
                        myModal.hide();
                    });
                }
            });
        });
    </script>
@endpush