{{-- visits/calendar.blade.php --}}
@extends('layouts.admin')
@section('title','Kalender Kunjungan')
@push('styles')
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/6.1.10/index.global.min.css">
@endpush
@section('content')
<div class="d-flex justify-content-between align-items-center mb-3">
  <div class="btn-group btn-group-sm">
    <a href="{{ route('admin.visits.calendar') }}" class="btn btn-primary">Kalender</a>
    <a href="{{ route('admin.visits.index') }}" class="btn btn-outline-primary">List</a>
  </div>
  <a href="{{ route('admin.visits.create') }}" class="btn btn-primary btn-sm"><i class="fas fa-plus me-1"></i>Jadwalkan Kunjungan</a>
</div>
<div class="card">
  <div class="card-body">
    <div id="calendar"></div>
  </div>
</div>
@endsection
@push('scripts')
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/6.1.10/index.global.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
  const cal = new FullCalendar.Calendar(document.getElementById('calendar'), {
    initialView: 'dayGridMonth',
    locale: 'id',
    headerToolbar: { left:'prev,next today', center:'title', right:'dayGridMonth,timeGridWeek,listWeek' },
    events: '{{ route('admin.visits.calendar.events') }}',
    eventClick: function(info) { if(info.event.url) { window.location.href = info.event.url; info.jsEvent.preventDefault(); } },
    height: 'auto',
  });
  cal.render();
});
</script>
@endpush
