{{-- resources/views/reservations/calendar.blade.php --}}
@extends('layouts.app')
@section('title', 'Reservations Calendar')
@section('page_title', 'Calendar')
@section('page_subtitle', $start->format('F Y'))

@section('content')

<div class="d-flex gap-2 mb-3">
    <a href="{{ tenant_route('reservations.calendar', ['start' => $start->copy()->subMonth()->toDateString()]) }}"
       class="btn btn-sm btn-outline-secondary">
        ← {{ $start->copy()->subMonth()->format('M') }}
    </a>
    <a href="{{ tenant_route('reservations.calendar') }}"
       class="btn btn-sm btn-outline-secondary">
        Today
    </a>
    <a href="{{ tenant_route('reservations.calendar', ['start' => $start->copy()->addMonth()->toDateString()]) }}"
       class="btn btn-sm btn-outline-secondary">
        {{ $start->copy()->addMonth()->format('M') }} →
    </a>
    <div class="ms-auto">
        <a href="{{ tenant_route('reservations.create') }}"
           class="btn btn-primary btn-sm">
            <i class="bi bi-plus-lg me-1"></i>New Reservation
        </a>
    </div>
</div>

<div class="card">
    <div class="card-body" style="padding:0;">
        <div id="calendar"></div>
    </div>
</div>

@endsection

@push('styles')
<link href="https://cdn.jsdelivr.net/npm/fullcalendar@6.1.8/index.global.min.css" rel="stylesheet">
@endpush

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/fullcalendar@6.1.8/index.global.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    const calendarEl = document.getElementById('calendar');

    const calendar = new FullCalendar.Calendar(calendarEl, {
        initialView: 'dayGridMonth',
        initialDate: '{{ $start->toDateString() }}',
        headerToolbar: false,
        height: 'auto',
        events: @json($events->values()),
        eventClick: function(info) {
            window.location.href = info.event.url;
        },
        eventContent: function(arg) {
            return {
                html: `<div style="padding:2px 5px;font-size:.72rem;
                                   font-weight:600;border-radius:3px;
                                   white-space:nowrap;overflow:hidden;
                                   text-overflow:ellipsis;">
                    ${arg.event.title}
                </div>`
            };
        },
        dayMaxEvents: 4,
    });

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