@section('title', 'BizMan | Calendar')

<x-app-layout>
    <x-slot name="header">
        <h2 class="font-semibold text-xl text-gray-800 leading-tight">
            {{ __('Unified Calendar') }}
        </h2>
        <p class="text-gray-500 text-sm">{{ date('l, d M Y') }}</p>
    </x-slot>

    <div>
        <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
            <div class="mb-6">
                <h1 class="text-3xl max-sm:text-2xl font-semibold text-gray-900 mb-2">Unified Calendar</h1>
                <p class="text-gray-600">Semua jadwal Anda dari Appointments dan Implementation Calendar</p>
            </div>

            <div class="bg-white rounded-lg shadow-sm p-6 mb-6">
                <div class="flex flex-wrap items-center gap-4 text-sm">
                    <div class="flex items-center gap-2">
                        <svg class="w-4 h-4 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z" />
                        </svg>
                        <span class="text-gray-600 font-medium">Filters:</span>
                    </div>

                    <select id="statusFilter"
                        class="px-3 w-[150px] py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 text-gray-700">
                        <option value="">All Status</option>
                        <option value="scheduled">Scheduled</option>
                        <option value="completed">Completed</option>
                        <option value="cancelled">Cancelled</option>
                    </select>

                    <select id="typeFilter"
                        class="px-3 py-2 w-[150px] border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 text-gray-700">
                        <option value="">All Types</option>
                        <option value="appointment">Appointment</option>
                        <option value="implementation">Implementation</option>
                    </select>

                    <span class="ml-auto text-gray-500" id="eventCount">
                        0 events
                    </span>
                </div>
            </div>

            <div class="bg-white rounded-lg shadow-sm p-6">
                <div id="calendar"></div>
            </div>

            <div class="bg-white rounded-lg shadow-sm p-6 mt-6">
                <h3 class="text-sm font-semibold text-gray-900 mb-4">Legend</h3>
                <div class="flex flex-wrap gap-6">
                    <div class="flex items-center gap-2">
                        <div class="w-6 h-6 rounded" style="background-color: #BFDBFE; border: 1px solid #93C5FD;">
                        </div>
                        <span class="text-sm text-gray-700">Appointment (Scheduled)</span>
                    </div>
                    <div class="flex items-center gap-2">
                        <div class="w-6 h-6 rounded" style="background-color: #DDD6FE; border: 1px solid #C4B5FD;">
                        </div>
                        <span class="text-sm text-gray-700">Implementation (Scheduled)</span>
                    </div>
                    <div class="flex items-center gap-2">
                        <div class="w-6 h-6 rounded" style="background-color: #BBF7D0; border: 1px solid #86EFAC;">
                        </div>
                        <span class="text-sm text-gray-700">Completed</span>
                    </div>
                    <div class="flex items-center gap-2">
                        <div class="w-6 h-6 rounded" style="background-color: #FECACA; border: 1px solid #FCA5A5;">
                        </div>
                        <span class="text-sm text-gray-700">Cancelled</span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    @push('styles')
        <link href='https://cdn.jsdelivr.net/npm/fullcalendar@6.1.10/index.global.min.css' rel='stylesheet' />
        <style>
            .fc-event {
                cursor: pointer;
            }

            .fc .fc-daygrid-day.fc-day-today {
                background-color: #EFF6FF !important;
            }

            .fc .fc-button-primary {
                background-color: #2563EB !important;
                border-color: #2563EB !important;
            }

            .fc .fc-button-primary:hover {
                background-color: #1D4ED8 !important;
                border-color: #1D4ED8 !important;
            }

            .fc .fc-button-primary:disabled {
                background-color: #93C5FD !important;
                border-color: #93C5FD !important;
            }
        </style>
    @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 allEventsData = @json($allEvents);
                let allEvents = allEventsData;

                const calendar = new FullCalendar.Calendar(calendarEl, {
                    initialView: 'dayGridMonth',
                    initialDate: '2025-12-20',
                    headerToolbar: window.innerWidth < 768 ? {
                        left: 'prev,next',
                        center: 'title',
                        right: 'dayGridMonth,listMonth'
                    } : {
                        left: 'prev,next today',
                        center: 'title',
                        right: 'dayGridMonth,listMonth'
                    },
                    buttonText: {
                        today: 'Today',
                        month: 'Month',
                        list: 'List'
                    },
                    titleFormat: window.innerWidth < 768 ? {
                        year: 'numeric',
                        month: 'short'
                    } : {
                        year: 'numeric',
                        month: 'long'
                    },
                    height: 'auto',
                    events: filterEvents(allEvents),
                    eventClick: function(info) {
                        const event = info.event;
                        let detailsHtml = `
                            <div class="text-left space-y-2">
                                <p><strong>Date:</strong> ${event.start.toLocaleDateString('id-ID', {weekday: 'long', year: 'numeric', month: 'long', day: 'numeric'})}</p>
                                <p><strong>Time:</strong> ${event.start.toLocaleTimeString('id-ID', {hour: '2-digit', minute: '2-digit'})}</p>
                                <p><strong>Type:</strong> <span class="capitalize">${event.extendedProps.type}</span></p>
                                <p><strong>Status:</strong> <span class="capitalize ${
                                    event.extendedProps.status === 'completed' ? 'text-green-600' : 
                                    event.extendedProps.status === 'cancelled' ? 'text-red-600' : 
                                    'text-blue-600'
                                }">${event.extendedProps.status}</span></p>
                                ${event.extendedProps.description ? `<p><strong>Description:</strong> ${event.extendedProps.description}</p>` : ''}
                                ${event.extendedProps.location ? `<p><strong>Client:</strong> ${event.extendedProps.location}</p>` : ''}
                                ${event.extendedProps.implementator ? `<p><strong>Implementator:</strong> ${event.extendedProps.implementator}</p>` : ''}
                            </div>
                        `;

                        Swal.fire({
                            title: event.title,
                            html: detailsHtml,
                            confirmButtonColor: '#3B82F6',
                            confirmButtonText: 'Close'
                        });
                    },
                    eventDidMount: function(info) {
                        info.el.title = info.event.extendedProps.description || info.event.title;
                    },
                    dayCellDidMount: function(info) {
                        if (info.date.toDateString() === new Date(2025, 11, 20).toDateString()) {
                            info.el.style.backgroundColor = '#EFF6FF';
                        }
                    }
                });

                calendar.render();
                updateEventCount(allEvents.length);

                document.getElementById('statusFilter').addEventListener('change', function() {
                    const filtered = filterEvents(allEvents);
                    calendar.removeAllEvents();
                    calendar.addEventSource(filtered);
                });

                document.getElementById('typeFilter').addEventListener('change', function() {
                    const filtered = filterEvents(allEvents);
                    calendar.removeAllEvents();
                    calendar.addEventSource(filtered);
                });

                function filterEvents(events) {
                    const statusFilter = document.getElementById('statusFilter').value;
                    const typeFilter = document.getElementById('typeFilter').value;

                    let filtered = events;

                    if (statusFilter) {
                        filtered = filtered.filter(e => e.extendedProps.status === statusFilter);
                    }

                    if (typeFilter) {
                        filtered = filtered.filter(e => e.extendedProps.type === typeFilter);
                    }

                    updateEventCount(filtered.length);
                    return filtered;
                }

                function updateEventCount(count) {
                    document.getElementById('eventCount').textContent = count + ' events';
                }
            });
        </script>
    @endpush
</x-app-layout>