@extends('layouts.admin')

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

@section('content')
    <div class="mb-4">
        <button onclick="openScheduleModal()" class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700">
            + Add Schedule
        </button>
    </div>

    @if(\App\Models\User::where('role', 'staff')->count() == 0)
        <div class="bg-yellow-100 border border-yellow-400 text-yellow-700 px-4 py-3 rounded mb-4">
            ⚠️ <strong>Warning:</strong> No staff users found. You need to create staff users first before adding schedules.
        </div>
    @endif

    @if(count($mappedSchedules) == 0)
        <div class="bg-blue-100 border border-blue-400 text-blue-700 px-4 py-3 rounded mb-4">
            ℹ️ <strong>Info:</strong> No schedules found. Click "+ Add Schedule" to create your first shift.
        </div>
    @endif

    <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>

    <!-- Schedule Modal -->
    <div id="scheduleModal" 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-5 border w-96 shadow-lg rounded-md bg-white">
            <div class="flex justify-between items-center mb-4">
                <h3 class="text-lg font-semibold">Add Schedule</h3>
                <button onclick="closeScheduleModal()" class="text-gray-600 hover:text-gray-900 text-2xl">&times;</button>
            </div>
            <form id="scheduleForm" method="POST" action="{{ route('schedules.store') }}">
                @csrf
                <div class="space-y-4">
                    <div>
                        <label class="block text-sm font-medium mb-1">Select Shift</label>
                        <select name="shift_id" id="shift_id" required
                                class="w-full border-gray-300 rounded-md shadow-sm">
                            <option value="">Choose a shift...</option>
                            @foreach(\App\Models\Shift::all() as $shift)
                                <option value="{{ $shift->id }}">{{ $shift->name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div>
                        <label class="block text-sm font-medium mb-2">Select Staff Members</label>
                        <div class="border border-gray-300 rounded-md p-3 max-h-48 overflow-y-auto bg-gray-50">
                            @foreach(\App\Models\User::where('role', 'staff')->get() as $user)
                                <div class="flex items-center mb-2">
                                    <input type="checkbox" name="user_ids[]" value="{{ $user->id }}" id="user_{{ $user->id }}"
                                           class="rounded border-gray-300 text-blue-600 shadow-sm">
                                    <label for="user_{{ $user->id }}" class="ml-2 text-sm text-gray-700 cursor-pointer">
                                        {{ $user->name }}
                                    </label>
                                </div>
                            @endforeach
                        </div>
                        <p class="text-xs text-gray-500 mt-1">Select one or more staff members for this shift</p>
                    </div>
                    <div>
                        <label class="block text-sm font-medium mb-1">Date</label>
                        <input type="date" name="shift_date" id="shift_date" required
                               class="w-full border-gray-300 rounded-md shadow-sm">
                    </div>
                    <div>
                        <label class="block text-sm font-medium mb-1">Description (Optional)</label>
                        <textarea name="description" id="description" rows="2"
                                  class="w-full border-gray-300 rounded-md shadow-sm"></textarea>
                    </div>
                </div>
                <div class="mt-6 flex justify-end space-x-2">
                    <button type="button" onclick="closeScheduleModal()"
                            class="px-4 py-2 bg-gray-300 text-gray-700 rounded hover:bg-gray-400">
                        Cancel
                    </button>
                    <button type="submit"
                            class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700">
                        Save Schedule
                    </button>
                </div>
            </form>
        </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 openScheduleModal() {
        document.getElementById('scheduleModal').classList.remove('hidden');
        document.getElementById('shift_date').value = new Date().toISOString().split('T')[0];
    }

    function closeScheduleModal() {
        document.getElementById('scheduleModal').classList.add('hidden');
        document.getElementById('scheduleForm').reset();
    }

    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 events = @json($mappedSchedules);

        console.log('Events to display:', events);

        var calendar = new FullCalendar.Calendar(calendarEl, {
            initialView: 'dayGridMonth',
            headerToolbar: {
                left: 'prev,next today',
                center: 'title',
                right: 'dayGridMonth,dayGridWeek,dayGridDay'
            },
            events: events,
            selectable: true,
            select: function(info) {
                document.getElementById('shift_date').value = info.startStr;
                openScheduleModal();
            },
            eventClick: function(info) {
                openEventDetailsModal(info.event);
            }
        });

        calendar.render();

        // Handle form submission
        document.getElementById('scheduleForm').addEventListener('submit', function(e) {
            e.preventDefault();

            const formData = new FormData(this);

            fetch('{{ route("schedules.store") }}', {
                method: 'POST',
                body: formData,
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}',
                    'Accept': 'application/json'
                }
            })
            .then(response => {
                if (!response.ok) {
                    return response.json().then(err => {
                        throw new Error(JSON.stringify(err));
                    });
                }
                return response.json();
            })
            .then(data => {
                alert(data.message);
                closeScheduleModal();
                location.reload();
            })
            .catch(error => {
                console.error('Error:', error);
                alert('Failed to create schedule. Check console for details.');
            });
        });
    });
</script>

@endsection