@extends('layouts.app')

@section('title', 'Calendar')
@section('no-page-header')

@section('content')
<div class="p-6">
    <div class="max-w-7xl mx-auto">
        <div class="bg-white rounded shadow">
            <div class="px-6 py-4 border-b border-gray-200">
                <div class="flex justify-between items-center">
                    <h1 class="text-xl font-semibold">Calendar</h1>
                    <div class="flex space-x-3">
                        <button onclick="showAddEventModal()" class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700">
                            <i class="fas fa-plus mr-2"></i>Add Event
                        </button>
                        <button onclick="exportCalendar()" class="px-4 py-2 bg-green-600 text-white rounded-md hover:bg-green-700">
                            <i class="fas fa-download mr-2"></i>Export
                        </button>
                    </div>
                </div>
            </div>
            
            <div class="p-6">
                <!-- Calendar Filters -->
                <div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">View</label>
                        <select id="calendar_view" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                            <option value="month">Month</option>
                            <option value="week">Week</option>
                            <option value="day">Day</option>
                            <option value="list">List</option>
                        </select>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Event Type</label>
                        <select id="event_type_filter" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                            <option value="">All Events</option>
                            <option value="shift">Shift</option>
                            <option value="patrol">Patrol</option>
                            <option value="meeting">Meeting</option>
                            <option value="training">Training</option>
                            <option value="holiday">Holiday</option>
                            <option value="appointment">Appointment</option>
                        </select>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Department</label>
                        <select id="department_filter" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                            <option value="">All Departments</option>
                            @foreach($departments ?? [] as $department)
                                <option value="{{ $department->id }}">{{ $department->name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="flex items-end">
                        <button onclick="updateCalendar()" class="w-full px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700">Update</button>
                    </div>
                </div>

                <!-- Calendar Navigation -->
                <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
                    <div>
                        <button onclick="previousMonth()" class="w-full px-4 py-2 bg-gray-200 text-gray-700 rounded-md hover:bg-gray-300">
                            <i class="fas fa-chevron-left mr-2"></i> Previous
                        </button>
                    </div>
                    <div class="text-center">
                        <h2 id="currentMonth" class="text-xl font-semibold text-gray-900">{{ now()->format('F Y') }}</h2>
                    </div>
                    <div>
                        <button onclick="nextMonth()" class="w-full px-4 py-2 bg-gray-200 text-gray-700 rounded-md hover:bg-gray-300">
                            Next <i class="fas fa-chevron-right ml-2"></i>
                        </button>
                    </div>
                </div>

                <!-- Calendar Grid -->
                <div id="calendarContainer">
                    <!-- Calendar will be loaded here -->
                    <div class="text-center py-12">
                        <i class="fas fa-calendar-alt text-6xl text-gray-300 mb-4"></i>
                        <h3 class="text-lg text-gray-500">Loading calendar...</h3>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Add Event Modal -->
<div id="addEventModal" class="fixed inset-0 z-50 hidden overflow-y-auto">
    <div class="flex items-center justify-center min-h-screen px-4">
        <div class="fixed inset-0 bg-gray-500 bg-opacity-75" onclick="closeAddEventModal()"></div>
        
        <div class="relative bg-white rounded-lg max-w-md w-full p-6">
            <div class="flex justify-between items-center mb-4">
                <h3 class="text-lg font-medium text-gray-900">Add Event</h3>
                <button onclick="closeAddEventModal()" class="text-gray-400 hover:text-gray-500">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            
            <form id="eventForm" class="space-y-4">
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">Event Title</label>
                    <input type="text" id="event_title" required class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                </div>
                
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">Event Type</label>
                    <select id="event_type" required class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                        <option value="">Select Type</option>
                        <option value="shift">Shift</option>
                        <option value="patrol">Patrol</option>
                        <option value="meeting">Meeting</option>
                        <option value="training">Training</option>
                        <option value="holiday">Holiday</option>
                        <option value="appointment">Appointment</option>
                        <option value="other">Other</option>
                    </select>
                </div>
                
                <div class="grid grid-cols-2 gap-4">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Start Date</label>
                        <input type="date" id="start_date" required class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">End Date</label>
                        <input type="date" id="end_date" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                    </div>
                </div>
                
                <div class="grid grid-cols-2 gap-4">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Start Time</label>
                        <input type="time" id="start_time" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">End Time</label>
                        <input type="time" id="end_time" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                    </div>
                </div>
                
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">Department</label>
                    <select id="department_id" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                        <option value="">Select Department</option>
                        @foreach($departments ?? [] as $department)
                            <option value="{{ $department->id }}">{{ $department->name }}</option>
                        @endforeach
                    </select>
                </div>
                
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">Description</label>
                    <textarea id="description" rows="3" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"></textarea>
                </div>
                
                <div>
                    <label class="flex items-center">
                        <input type="checkbox" id="is_all_day" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
                        <span class="ml-2 text-sm text-gray-700">All Day Event</span>
                    </label>
                </div>
                
                <div class="flex justify-end space-x-3 pt-4">
                    <button type="button" onclick="closeAddEventModal()" class="px-4 py-2 bg-gray-300 text-gray-700 rounded-md hover:bg-gray-400">Cancel</button>
                    <button type="button" onclick="saveEvent()" class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700">Save Event</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Event Details Modal -->
<div id="eventDetailsModal" class="fixed inset-0 z-50 hidden overflow-y-auto">
    <div class="flex items-center justify-center min-h-screen px-4">
        <div class="fixed inset-0 bg-gray-500 bg-opacity-75" onclick="closeEventDetailsModal()"></div>
        
        <div class="relative bg-white rounded-lg max-w-md w-full p-6">
            <div class="flex justify-between items-center mb-4">
                <h3 class="text-lg font-medium text-gray-900">Event Details</h3>
                <button onclick="closeEventDetailsModal()" class="text-gray-400 hover:text-gray-500">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            
            <div id="eventDetailsContent" class="space-y-4">
                <!-- Event details will be loaded here -->
            </div>
            
            <div class="flex justify-end space-x-3 pt-4">
                <button onclick="closeEventDetailsModal()" class="px-4 py-2 bg-gray-300 text-gray-700 rounded-md hover:bg-gray-400">Close</button>
                <button onclick="editEvent()" class="px-4 py-2 bg-yellow-600 text-white rounded-md hover:bg-yellow-700">
                    <i class="fas fa-edit mr-2"></i> Edit
                </button>
                <button onclick="deleteEvent()" class="px-4 py-2 bg-red-600 text-white rounded-md hover:bg-red-700">
                    <i class="fas fa-trash mr-2"></i> Delete
                </button>
            </div>
        </div>
    </div>
</div>

<style>
.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 1px;
    background-color: #e5e7eb;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    overflow: hidden;
}

.calendar-header {
    background-color: #f9fafb;
    padding: 0.75rem;
    text-align: center;
    font-weight: 600;
    font-size: 0.875rem;
    color: #374151;
    border-bottom: 1px solid #e5e7eb;
}

.calendar-day {
    background-color: white;
    min-height: 100px;
    padding: 0.5rem;
    cursor: pointer;
    transition: background-color 0.2s;
}

.calendar-day:hover {
    background-color: #f3f4f6;
}

.calendar-day.today {
    background-color: #eff6ff;
}

.calendar-day.empty {
    background-color: #f9fafb;
    cursor: default;
}

.calendar-day-number {
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.calendar-events {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.event-dot {
    height: 4px;
    border-radius: 2px;
}

.calendar-week-view {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 1px;
    background-color: #e5e7eb;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    overflow: hidden;
}

.calendar-week-day {
    background-color: white;
    min-height: 150px;
    padding: 1rem;
    cursor: pointer;
    transition: background-color 0.2s;
}

.calendar-week-day:hover {
    background-color: #f3f4f6;
}

.calendar-day-view {
    background-color: white;
    border-radius: 0.5rem;
    overflow: hidden;
}

.calendar-day-header {
    background-color: #f9fafb;
    padding: 1rem;
    text-align: center;
    border-bottom: 1px solid #e5e7eb;
}

.calendar-day-header.today {
    background-color: #eff6ff;
}

.calendar-events-list {
    padding: 1rem;
}

.calendar-event {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
    margin-bottom: 0.5rem;
    background-color: #f3f4f6;
    border-radius: 0.375rem;
    border-left: 4px solid #3b82f6;
}

.event-time {
    font-size: 0.875rem;
    color: #6b7280;
    font-weight: 500;
}

.event-title {
    font-weight: 500;
    color: #111827;
}

.event-type {
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    font-size: 0.75rem;
    font-weight: 500;
    color: white;
}

.calendar-list-view {
    background-color: white;
    border-radius: 0.5rem;
    overflow: hidden;
}

.list-group-item {
    padding: 1rem;
    border-bottom: 1px solid #e5e7eb;
}

.list-group-item:last-child {
    border-bottom: none;
}

.event-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.badge {
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    font-size: 0.75rem;
    font-weight: 500;
    color: white;
}

.bg-primary { background-color: #3b82f6; }
.bg-success { background-color: #10b981; }
.bg-warning { background-color: #f59e0b; }
.bg-danger { background-color: #ef4444; }
.bg-info { background-color: #06b6d4; }
</style>
@endsection

<script>
let currentMonth = new Date();
let currentEventId = null;

function updateCalendar() {
    const viewType = document.getElementById('calendar_view').value;
    const eventType = document.getElementById('event_type_filter').value;
    const departmentId = document.getElementById('department_filter').value;
    
    // Update month display
    document.getElementById('currentMonth').textContent = 
        currentMonth.toLocaleDateString('en-US', { month: 'long', year: 'numeric' });
    
    // Generate calendar based on view type
    let calendarHTML = '';
    
    if (viewType === 'month') {
        calendarHTML = generateMonthCalendar(eventType, departmentId);
    } else if (viewType === 'week') {
        calendarHTML = generateWeekCalendar(eventType, departmentId);
    } else if (viewType === 'day') {
        calendarHTML = generateDayCalendar(eventType, departmentId);
    } else if (viewType === 'list') {
        calendarHTML = generateListCalendar(eventType, departmentId);
    }
    
    document.getElementById('calendarContainer').innerHTML = calendarHTML;
}

function generateMonthCalendar(eventType, departmentId) {
    const year = currentMonth.getFullYear();
    const month = currentMonth.getMonth();
    const firstDay = new Date(year, month, 1).getDay();
    const daysInMonth = new Date(year, month + 1, 0).getDate();
    
    let html = '<div class="calendar-grid">';
    
    // Day headers
    const dayHeaders = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
    html += '<div class="calendar-headers">';
    dayHeaders.forEach(day => {
        html += `<div class="calendar-header">${day}</div>`;
    });
    html += '</div>';
    
    // Empty cells before first day
    for (let i = 0; i < firstDay; i++) {
        html += '<div class="calendar-day empty"></div>';
    }
    
    // Days of month
    for (let day = 1; day <= daysInMonth; day++) {
        const date = new Date(year, month, day);
        const isToday = date.toDateString() === new Date().toDateString();
        const hasEvents = Math.random() > 0.7; // Simulate events
        
        html += `<div class="calendar-day ${isToday ? 'today' : ''} ${hasEvents ? 'has-events' : ''}" onclick="selectDate(${year}, ${month}, ${day})">`;
        html += `<div class="calendar-day-number">${day}</div>`;
        if (hasEvents) {
            html += '<div class="calendar-events">';
            html += '<div class="event-dot bg-primary"></div>';
            html += '<div class="event-dot bg-success"></div>';
            html += '</div>';
        }
        html += '</div>';
    }
    
    html += '</div>';
    return html;
}

function generateWeekCalendar(eventType, departmentId) {
    let html = '<div class="calendar-week-view">';
    
    // Week headers
    const dayHeaders = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
    html += '<div class="calendar-headers">';
    dayHeaders.forEach(day => {
        html += `<div class="calendar-header">${day}</div>`;
    });
    html += '</div>';
    
    // Week days
    const startOfWeek = new Date(currentMonth);
    startOfWeek.setDate(startOfWeek.getDate() - startOfWeek.getDay());
    
    for (let i = 0; i < 7; i++) {
        const date = new Date(startOfWeek);
        date.setDate(startOfWeek.getDate() + i);
        const isToday = date.toDateString() === new Date().toDateString();
        const hasEvents = Math.random() > 0.6;
        
        html += `<div class="calendar-week-day ${isToday ? 'today' : ''} ${hasEvents ? 'has-events' : ''}">`;
        html += `<div class="calendar-day-number">${date.getDate()}</div>`;
        html += `<div class="calendar-day-name">${dayHeaders[i]}</div>`;
        if (hasEvents) {
            html += '<div class="calendar-events">';
            html += '<div class="event-dot bg-primary"></div>';
            html += '</div>';
        }
        html += '</div>';
    }
    
    html += '</div>';
    return html;
}

function generateDayCalendar(eventType, departmentId) {
    const date = currentMonth;
    const isToday = date.toDateString() === new Date().toDateString();
    
    let html = '<div class="calendar-day-view">';
    html += `<div class="calendar-day-header ${isToday ? 'today' : ''}">`;
    html += `<h3>${date.toLocaleDateString('en-US', { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' })}</h3>`;
    html += '</div>';
    
    html += '<div class="calendar-events-list">';
    // Simulate events for day
    for (let i = 0; i < 3; i++) {
        const hour = 9 + i * 4;
        html += `
            <div class="calendar-event">
                <div class="event-time">${hour}:00</div>
                <div class="event-title">Sample Event ${i + 1}</div>
                <div class="event-type bg-primary">Shift</div>
            </div>
        `;
    }
    html += '</div>';
    
    html += '</div>';
    return html;
}

function generateListCalendar(eventType, departmentId) {
    let html = '<div class="calendar-list-view">';
    html += '<div class="list-group">';
    
    // Simulate events for month
    for (let day = 1; day <= 30; day++) {
        const date = new Date(currentMonth.getFullYear(), currentMonth.getMonth(), day);
        const hasEvents = Math.random() > 0.7;
        
        if (hasEvents) {
            html += `
                <div class="list-group-item">
                    <div class="flex justify-between items-center">
                        <div>
                            <h6 class="mb-1">${date.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' })}</h6>
                            <div class="calendar-events-list">
                                <div class="event-item">
                                    <span class="badge bg-primary">Shift</span>
                                    <span class="ml-2">Morning Shift</span>
                                </div>
                                <div class="event-item">
                                    <span class="badge bg-success">Patrol</span>
                                    <span class="ml-2">Evening Patrol</span>
                                </div>
                            </div>
                        </div>
                        <div class="text-gray-500 text-sm">${date.toLocaleDateString('en-US', { weekday: 'long' })}</div>
                    </div>
                </div>
            `;
        }
    }
    
    html += '</div>';
    html += '</div>';
    return html;
}

function showAddEventModal() {
    document.getElementById('eventForm').reset();
    // Set default date to current date
    document.getElementById('start_date').value = currentMonth.toISOString().split('T')[0];
    currentEventId = null;
    document.getElementById('addEventModal').classList.remove('hidden');
}

function closeAddEventModal() {
    document.getElementById('addEventModal').classList.add('hidden');
}

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

function saveEvent() {
    const eventData = {
        title: document.getElementById('event_title').value,
        type: document.getElementById('event_type').value,
        start_date: document.getElementById('start_date').value,
        end_date: document.getElementById('end_date').value,
        start_time: document.getElementById('start_time').value,
        end_time: document.getElementById('end_time').value,
        department_id: document.getElementById('department_id').value,
        description: document.getElementById('description').value,
        is_all_day: document.getElementById('is_all_day').checked
    };
    
    // Simulate saving event
    console.log('Saving event:', eventData);
    
    closeAddEventModal();
    updateCalendar();
}

function selectDate(year, month, day) {
    const date = new Date(year, month, day);
    document.getElementById('start_date').value = date.toISOString().split('T')[0];
    document.getElementById('end_date').value = date.toISOString().split('T')[0];
    showAddEventModal();
}

function previousMonth() {
    currentMonth.setMonth(currentMonth.getMonth() - 1);
    updateCalendar();
}

function nextMonth() {
    currentMonth.setMonth(currentMonth.getMonth() + 1);
    updateCalendar();
}

function exportCalendar() {
    const viewType = document.getElementById('calendar_view').value;
    const eventType = document.getElementById('event_type_filter').value;
    const departmentId = document.getElementById('department_filter').value;
    
    const params = new URLSearchParams({
        view: viewType,
        event_type: eventType,
        department_id: departmentId,
        month: currentMonth.getMonth() + 1,
        year: currentMonth.getFullYear()
    });
    
    window.location.href = `/calendar/export?${params.toString()}`;
}

// Initialize calendar on page load
document.addEventListener('DOMContentLoaded', function() {
    updateCalendar();
});

// Update calendar when filters change
document.getElementById('calendar_view').addEventListener('change', updateCalendar);
document.getElementById('event_type_filter').addEventListener('change', updateCalendar);
document.getElementById('department_filter').addEventListener('change', updateCalendar);
</script>