@extends('layouts.app')

@section('title', 'Equipment Reservations Calendar')

@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <div class="d-flex justify-content-between align-items-center">
                        <h5 class="mb-0">Equipment Reservations Calendar</h5>
                        <div class="d-flex gap-2">
                            <a href="{{ route('equipment-reservations.index') }}" class="btn btn-outline-secondary btn-sm">
                                <i class="bi bi-list"></i> List View
                            </a>
                            <a href="{{ route('equipment-reservations.create') }}" class="btn btn-primary btn-sm">
                                <i class="bi bi-plus-circle"></i> New Reservation
                            </a>
                        </div>
                    </div>
                </div>
                <div class="card-body">
                    <!-- Filters -->
                    <div class="row mb-4">
                        <div class="col-md-4">
                            <label for="equipment_filter" class="form-label">Filter by Equipment</label>
                            <select class="form-select" id="equipment_filter">
                                <option value="">All Equipment</option>
                                @foreach($equipment as $item)
                                    <option value="{{ $item->id }}" {{ $selectedEquipment && $selectedEquipment->id == $item->id ? 'selected' : '' }}>
                                        {{ $item->name }} ({{ $item->type_name }})
                                    </option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-4">
                            <label for="month_year" class="form-label">Month/Year</label>
                            <input type="month" class="form-control" id="month_year" value="{{ date('Y-m', strtotime($selectedDate)) }}">
                        </div>
                        <div class="col-md-4 d-flex align-items-end">
                            <button type="button" class="btn btn-outline-primary" id="refresh_calendar">
                                <i class="bi bi-arrow-clockwise"></i> Refresh
                            </button>
                        </div>
                    </div>

                    <!-- Calendar Navigation -->
                    <div class="row mb-3">
                        <div class="col-12">
                            <div class="d-flex justify-content-between align-items-center">
                                <button type="button" class="btn btn-outline-secondary" id="prev_month">
                                    <i class="bi bi-chevron-left"></i> Previous
                                </button>
                                <h4 class="mb-0" id="current_month_display">{{ date('F Y', strtotime($selectedDate)) }}</h4>
                                <button type="button" class="btn btn-outline-secondary" id="next_month">
                                    Next <i class="bi bi-chevron-right"></i>
                                </button>
                            </div>
                        </div>
                    </div>

                    <!-- Calendar Grid -->
                    <div class="calendar-container">
                        <!-- Calendar Header -->
                        <div class="calendar-header">
                            <div class="calendar-day-header">Sun</div>
                            <div class="calendar-day-header">Mon</div>
                            <div class="calendar-day-header">Tue</div>
                            <div class="calendar-day-header">Wed</div>
                            <div class="calendar-day-header">Thu</div>
                            <div class="calendar-day-header">Fri</div>
                            <div class="calendar-day-header">Sat</div>
                        </div>

                        <!-- Calendar Days -->
                        <div class="calendar-grid" id="calendar_grid">
                            <!-- Calendar days will be populated by JavaScript -->
                        </div>
                    </div>

                    <!-- Legend -->
                    <div class="row mt-4">
                        <div class="col-12">
                            <div class="card bg-light">
                                <div class="card-body">
                                    <h6 class="card-title">Legend</h6>
                                    <div class="d-flex flex-wrap gap-3">
                                        <div class="d-flex align-items-center">
                                            <div class="calendar-legend-item available"></div>
                                            <span class="ms-2">Available</span>
                                        </div>
                                        <div class="d-flex align-items-center">
                                            <div class="calendar-legend-item reserved"></div>
                                            <span class="ms-2">Reserved</span>
                                        </div>
                                        <div class="d-flex align-items-center">
                                            <div class="calendar-legend-item today"></div>
                                            <span class="ms-2">Today</span>
                                        </div>
                                        <div class="d-flex align-items-center">
                                            <div class="calendar-legend-item past"></div>
                                            <span class="ms-2">Past</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Reservation Details Modal -->
                    <div class="modal fade" id="reservationModal" tabindex="-1" aria-labelledby="reservationModalLabel" aria-hidden="true">
                        <div class="modal-dialog modal-dialog-centered">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h5 class="modal-title" id="reservationModalLabel">Reservation Details</h5>
                                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                </div>
                                <div class="modal-body" id="reservationModalBody">
                                    <!-- Details will be loaded by JS -->
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@push('styles')
<style>
.calendar-container {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
}
.calendar-header, .calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
}
.calendar-day-header {
    text-align: center;
    font-weight: 600;
    padding: 0.5rem 0;
    background: #f1f3f4;
    border-bottom: 1px solid #e0e0e0;
}
.calendar-grid {
    min-height: 400px;
    border: 1px solid #e0e0e0;
    border-top: none;
}
.calendar-day {
    min-height: 80px;
    border-right: 1px solid #e0e0e0;
    border-bottom: 1px solid #e0e0e0;
    padding: 0.5rem;
    position: relative;
    background: #fff;
    cursor: pointer;
    transition: background 0.2s;
}
.calendar-day:last-child {
    border-right: none;
}
.calendar-day.today {
    background: #e3f2fd;
    border: 2px solid #2196f3;
}
.calendar-day.past {
    background: #f8f9fa;
    color: #b0b0b0;
}
.calendar-day .day-number {
    font-weight: 600;
    font-size: 1.1rem;
}
.calendar-day .reservation-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 2px;
    margin-top: 2px;
}
.calendar-day .reservation-dot.reserved {
    background: #e53935;
}
.calendar-day .reservation-dot.available {
    background: #43a047;
}
.calendar-legend-item {
    width: 18px;
    height: 18px;
    border-radius: 4px;
    display: inline-block;
    margin-right: 4px;
}
.calendar-legend-item.available { background: #43a047; }
.calendar-legend-item.reserved { background: #e53935; }
.calendar-legend-item.today { background: #2196f3; }
.calendar-legend-item.past { background: #b0b0b0; }
</style>
@endpush

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    const equipmentFilter = document.getElementById('equipment_filter');
    const monthYearInput = document.getElementById('month_year');
    const calendarGrid = document.getElementById('calendar_grid');
    const currentMonthDisplay = document.getElementById('current_month_display');
    const prevMonthBtn = document.getElementById('prev_month');
    const nextMonthBtn = document.getElementById('next_month');
    const refreshBtn = document.getElementById('refresh_calendar');
    const reservationModal = new bootstrap.Modal(document.getElementById('reservationModal'));
    const reservationModalBody = document.getElementById('reservationModalBody');

    let selectedEquipment = equipmentFilter.value;
    let selectedMonth = monthYearInput.value;

    function renderCalendar(year, month) {
        // Get the first and last day of the month
        const firstDay = new Date(year, month, 1);
        const lastDay = new Date(year, month + 1, 0);
        const today = new Date();
        const daysInMonth = lastDay.getDate();

        // Find the day of week the month starts on (0 = Sunday)
        const startDayOfWeek = firstDay.getDay();

        // Build the calendar grid
        let html = '';
        let dayCounter = 1;
        let totalCells = Math.ceil((daysInMonth + startDayOfWeek) / 7) * 7;

        for (let i = 0; i < totalCells; i++) {
            if (i < startDayOfWeek || dayCounter > daysInMonth) {
                html += `<div class="calendar-day past"></div>`;
            } else {
                // Fix: Create date string in YYYY-MM-DD format without timezone issues
                const cellDate = `${year}-${(month + 1).toString().padStart(2, '0')}-${dayCounter.toString().padStart(2, '0')}`;
                const todayDate = today.toISOString().slice(0, 10);
                const isToday = cellDate === todayDate;
                const isPast = cellDate < todayDate;

                html += `<div class="calendar-day${isToday ? ' today' : ''}${isPast ? ' past' : ''}" 
                            data-date="${cellDate}">
                            <div class="day-number">${dayCounter}</div>
                            <div class="reservation-dots" id="dots-${cellDate}"></div>
                        </div>`;
                dayCounter++;
            }
        }
        calendarGrid.innerHTML = html;
    }

    function fetchReservations() {
        // Fetch reservations for the selected equipment and month
        const [year, month] = selectedMonth.split('-');
        const startDate = `${year}-${month}-01`;
        const endDate = new Date(year, month, 0).toISOString().slice(0,10);

        fetch(`/equipment-reservations?equipment_id=${selectedEquipment}&date_from=${startDate}&date_to=${endDate}&ajax=1`)
            .then(response => response.json())
            .then(data => {
                if (data && data.reservations) {
                    data.reservations.forEach(res => {
                        const dotContainer = document.getElementById('dots-' + res.reservation_date);
                        if (dotContainer) {
                            dotContainer.innerHTML += `<span class="reservation-dot reserved" title="${res.equipment_name}"></span>`;
                        }
                    });
                }
            });
    }

    function updateCalendar() {
        const [year, month] = selectedMonth.split('-');
        renderCalendar(parseInt(year), parseInt(month) - 1);
        currentMonthDisplay.textContent = new Date(selectedMonth + '-01').toLocaleString('default', { month: 'long', year: 'numeric' });
        fetchReservations();
    }

    equipmentFilter.addEventListener('change', function() {
        selectedEquipment = this.value;
        updateCalendar();
    });

    monthYearInput.addEventListener('change', function() {
        selectedMonth = this.value;
        updateCalendar();
    });

    prevMonthBtn.addEventListener('click', function() {
        let [year, month] = selectedMonth.split('-').map(Number);
        month--;
        if (month < 1) {
            month = 12;
            year--;
        }
        selectedMonth = `${year}-${month.toString().padStart(2, '0')}`;
        monthYearInput.value = selectedMonth;
        updateCalendar();
    });

    nextMonthBtn.addEventListener('click', function() {
        let [year, month] = selectedMonth.split('-').map(Number);
        month++;
        if (month > 12) {
            month = 1;
            year++;
        }
        selectedMonth = `${year}-${month.toString().padStart(2, '0')}`;
        monthYearInput.value = selectedMonth;
        updateCalendar();
    });

    refreshBtn.addEventListener('click', function() {
        updateCalendar();
    });

    // Initial render
    updateCalendar();

    // Click handler for reservation details (optional, can be expanded)
    calendarGrid.addEventListener('click', function(e) {
        const dayDiv = e.target.closest('.calendar-day');
        if (dayDiv && !dayDiv.classList.contains('past')) {
            const date = dayDiv.getAttribute('data-date');
            // Fetch and show reservation details for this date
            fetch(`/equipment-reservations?equipment_id=${selectedEquipment}&date_from=${date}&date_to=${date}&ajax=1`)
                .then(response => response.json())
                .then(data => {
                    let html = `<h6>Reservations for ${date}</h6>`;
                    if (data && data.reservations && data.reservations.length > 0) {
                        data.reservations.forEach(res => {
                            html += `<div class="mb-2">
                                <strong>${res.equipment_name}</strong> (${res.start_time} - ${res.end_time})<br>
                                <span class="badge bg-primary">${res.status_name}</span>
                                <div>${res.notes || ''}</div>
                            </div>`;
                        });
                    } else {
                        html += `<p class="text-muted">No reservations for this day.</p>`;
                    }
                    reservationModalBody.innerHTML = html;
                    reservationModal.show();
                });
        }
    });
});
</script>
@endpush
@endsection