@extends('layouts.app')

@section('title', 'Calendar')

@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h5 class="mb-0">Calendar</h5>
                    <div class="d-flex gap-2">
                        <button class="btn btn-outline-primary" onclick="showAddEventModal()">
                            <i class="fas fa-plus me-2"></i>Add Event
                        </button>
                        <button class="btn btn-outline-success" onclick="exportCalendar()">
                            <i class="fas fa-download me-2"></i>Export
                        </button>
                    </div>
                </div>
                <div class="card-body">
                    <!-- Calendar Filters -->
                    <div class="row mb-3">
                        <div class="col-md-3">
                            <label class="form-label">View</label>
                            <select class="form-select" id="calendar_view">
                                <option value="month">Month</option>
                                <option value="week">Week</option>
                                <option value="day">Day</option>
                                <option value="list">List</option>
                            </select>
                        </div>
                        <div class="col-md-3">
                            <label class="form-label">Event Type</label>
                            <select class="form-select" id="event_type_filter">
                                <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>
                            </select>
                        </div>
                        <div class="col-md-3">
                            <label class="form-label">Department</label>
                            <select class="form-select" id="department_filter">
                                <option value="">All Departments</option>
                                @foreach($departments ?? [] as $department)
                                    <option value="{{ $department->id }}">{{ $department->name }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-3">
                            <label class="form-label">&nbsp;</label>
                            <button class="btn btn-primary w-100" onclick="updateCalendar()">Update</button>
                        </div>
                    </div>

                    <!-- Calendar Navigation -->
                    <div class="row mb-3">
                        <div class="col-md-4">
                            <button class="btn btn-outline-secondary" onclick="previousMonth()">
                                <i class="fas fa-chevron-left"></i> Previous
                            </button>
                        </div>
                        <div class="col-md-4 text-center">
                            <h5 id="currentMonth" class="mb-0">{{ now()->format('F Y') }}</h5>
                        </div>
                        <div class="col-md-4 text-end">
                            <button class="btn btn-outline-secondary" onclick="nextMonth()">
                                Next <i class="fas fa-chevron-right"></i>
                            </button>
                        </div>
                    </div>

                    <!-- Calendar Grid -->
                    <div id="calendarContainer">
                        <!-- Calendar will be loaded here -->
                        <div class="text-center py-5">
                            <i class="fas fa-calendar-alt fa-3x text-muted mb-3"></i>
                            <h5 class="text-muted">Loading calendar...</h5>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Add Event Modal -->
<div class="modal fade" id="addEventModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Add Event</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <form id="eventForm">
                    <div class="mb-3">
                        <label class="form-label">Event Title</label>
                        <input type="text" class="form-control" id="event_title" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Event Type</label>
                        <select class="form-select" id="event_type" required>
                            <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="other">Other</option>
                        </select>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">Start Date</label>
                                <input type="date" class="form-control" id="start_date" required>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">End Date</label>
                                <input type="date" class="form-control" id="end_date">
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">Start Time</label>
                                <input type="time" class="form-control" id="start_time">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">End Time</label>
                                <input type="time" class="form-control" id="end_time">
                            </div>
                        </div>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Department</label>
                        <select class="form-select" id="department_id">
                            <option value="">Select Department</option>
                            @foreach($departments ?? [] as $department)
                                <option value="{{ $department->id }}">{{ $department->name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Description</label>
                        <textarea class="form-control" id="description" rows="3"></textarea>
                    </div>
                    <div class="mb-3">
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" id="is_all_day">
                            <label class="form-check-label">All Day Event</label>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-primary" onclick="saveEvent()">Save Event</button>
            </div>
        </div>
    </div>
</div>

<!-- Event Details Modal -->
<div class="modal fade" id="eventDetailsModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Event Details</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body" id="eventDetailsContent">
                <!-- Event details will be loaded here -->
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                <button type="button" class="btn btn-warning" onclick="editEvent()">
                    <i class="fas fa-edit me-2"></i> Edit
                </button>
                <button type="button" class="btn btn-danger" onclick="deleteEvent()">
                    <i class="fas fa-trash me-2"></i> Delete
                </button>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<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 the 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 the 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="d-flex justify-content-between align-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="ms-2">Morning Shift</span>
                                </div>
                                <div class="event-item">
                                    <span class="badge bg-success">Patrol</span>
                                    <span class="ms-2">Evening Patrol</span>
                                </div>
                            </div>
                        </div>
                        <div class="text-muted small">${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;
    new bootstrap.Modal(document.getElementById('addEventModal')).show();
}

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);
    
    bootstrap.Modal.getInstance(document.getElementById('addEventModal')).hide();
    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>
@endsection