@extends('layouts.staff')

@section('header')
    <h2 class="font-semibold text-xl text-gray-800">My Work Schedule</h2>
@endsection

@section('content')
    <div class="mb-4">
        <div class="bg-blue-100 border border-blue-400 text-blue-700 px-4 py-3 rounded">
            📅 <strong>Your Schedule:</strong> View your assigned shifts below. Any changes contact your manager.
        </div>
    </div>

    <div id="calendar"></div>

    <!-- Event Details Modal -->
    <div id="eventDetailsModal" class="hidden fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50">
        <div class="relative top-20 mx-auto p-6 border w-96 shadow-lg rounded-md bg-white">
            <div class="flex justify-between items-center mb-4">
                <h3 class="text-lg font-semibold text-gray-800">📋 Shift Details</h3>
                <button onclick="closeEventDetailsModal()" class="text-gray-600 hover:text-gray-900 text-2xl">&times;</button>
            </div>
            <div id="eventDetailsContent" class="space-y-3">
                <!-- Content will be populated by JavaScript -->
            </div>
            <div class="mt-6 flex justify-end">
                <button onclick="closeEventDetailsModal()" class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700">
                    Close
                </button>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
<link href='https://cdn.jsdelivr.net/npm/fullcalendar@5.11.3/main.min.css' rel='stylesheet' />
<script src='https://cdn.jsdelivr.net/npm/fullcalendar@5.11.3/main.min.js'></script>

<style>
    #calendar {
        max-width: 1100px;
        margin: 0 auto;
        background: white;
        padding: 20px;
        border-radius: 8px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }
</style>

<script>
    function openEventDetailsModal(eventInfo) {
        const modal = document.getElementById('eventDetailsModal');
        const content = document.getElementById('eventDetailsContent');

        // Format the times
        const startTime = eventInfo.start.toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit' });
        const endTime = eventInfo.end ? eventInfo.end.toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit' }) : 'N/A';
        const date = eventInfo.start.toLocaleDateString('en-US', { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' });

        // Get employee names
        const employeeNames = eventInfo.extendedProps.employeeNames || [];
        const employeeList = employeeNames.length > 0
            ? employeeNames.map((name, index) => `<div class="text-gray-800">${index + 1}. ${name}</div>`).join('')
            : '<p class="text-gray-800">No employees assigned</p>';

        // Build the content
        content.innerHTML = `
            <div class="bg-blue-50 p-4 rounded-lg border border-blue-200">
                <div class="mb-3">
                    <span class="text-sm font-medium text-gray-600">Shift:</span>
                    <p class="text-lg font-semibold text-gray-800">${eventInfo.title}</p>
                </div>
                <div class="mb-3">
                    <span class="text-sm font-medium text-gray-600">📅 Date:</span>
                    <p class="text-gray-800">${date}</p>
                </div>
                <div class="mb-3">
                    <span class="text-sm font-medium text-gray-600">🕐 Time:</span>
                    <p class="text-gray-800">${startTime} - ${endTime}</p>
                </div>
                <div class="mb-3">
                    <span class="text-sm font-medium text-gray-600">👥 Staff Members:</span>
                    <div class="bg-white p-2 rounded border border-gray-200 mt-1">
                        ${employeeList}
                    </div>
                </div>
                ${eventInfo.extendedProps.description ? `
                <div class="mb-3">
                    <span class="text-sm font-medium text-gray-600">📝 Notes:</span>
                    <p class="text-gray-800">${eventInfo.extendedProps.description}</p>
                </div>
                ` : ''}
            </div>
        `;

        modal.classList.remove('hidden');
    }

    function closeEventDetailsModal() {
        document.getElementById('eventDetailsModal').classList.add('hidden');
    }

    document.addEventListener('DOMContentLoaded', function() {
        var calendarEl = document.getElementById('calendar');

        var calendar = new FullCalendar.Calendar(calendarEl, {
            initialView: 'dayGridMonth',
            headerToolbar: {
                left: 'prev,next today',
                center: 'title',
                right: 'dayGridMonth,dayGridWeek,dayGridDay'
            },
            events: @json($mappedSchedules),
            selectable: false, // Staff cannot select dates
            eventClick: function(info) {
                openEventDetailsModal(info.event);
            }
        });

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

@endsection