@extends('layouts.app')

@section('content')
<div class="d-flex justify-content-between align-items-center mb-3">
    <div><h2>Appointment Calendar</h2><p class="text-muted mb-0">Monthly, weekly and daily appointment view.</p></div>
    @if(in_array(auth()->user()->role, ['admin','super_admin']))
        <a href="{{ route('appointments.create') }}" class="btn btn-primary">Book Appointment</a>
    @endif
</div>

<div class="card shadow-sm">
    <div class="card-body">
        <div id="appointment-calendar"></div>
    </div>
</div>

<style>
.event-confirmed { border: 0; }
.event-completed { border: 0; opacity: .8; }
.event-cancelled { border: 0; text-decoration: line-through; }
</style>

<script src="https://cdn.jsdelivr.net/npm/fullcalendar@6.1.17/index.global.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function () {
    const calendar = new FullCalendar.Calendar(document.getElementById('appointment-calendar'), {
        initialView: 'dayGridMonth',
        height: 'auto',
        headerToolbar: {
            left: 'prev,next today',
            center: 'title',
            right: 'dayGridMonth,timeGridWeek,listWeek'
        },
        events: '{{ route('calendar.events') }}',
        eventClick: function (info) {
            const props = info.event.extendedProps;
            alert(
                info.event.title + "\n" +
                "Status: " + props.status + "\n" +
                "Type: " + props.type + "\n" +
                (props.reason ? "Reason: " + props.reason : "")
            );
        }
    });

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