{{-- resources/views/admin/disponibilites/index.blade.php --}}
<x-app-layout>
  <x-slot name="header">
    <div class="flex items-center justify-between">
      <h2 class="font-semibold text-xl">Admin</h2>
      <nav class="space-x-4">
        <a href="{{ route('admin.dashboard') }}" class="hover:underline">Dashboard</a>
        <a href="{{ route('admin.disponibilites.index') }}" class="hover:underline">RDV</a>
      </nav>
    </div>
  </x-slot>

  @push('styles')
    <!-- On importe la CSS depuis les bons packages @fullcalendar -->
    <link
      href="https://cdn.jsdelivr.net/npm/@fullcalendar/common@6.1.4/main.min.css"
      rel="stylesheet"
    />
    <link
      href="https://cdn.jsdelivr.net/npm/@fullcalendar/daygrid@6.1.4/main.min.css"
      rel="stylesheet"
    />
    <link
      href="https://cdn.jsdelivr.net/npm/@fullcalendar/timegrid@6.1.4/main.min.css"
      rel="stylesheet"
    />
    <style>
      #calendar {
        max-width: 900px;
        margin: 2rem auto;
        background: #fff;
        border-radius: .5rem;
        box-shadow: 0 2px 6px rgba(0,0,0,0.1);
      }
    </style>
  @endpush

  <div class="container py-5">
    <h1 class="text-2xl mb-4">Mes prochains RDV</h1>
    <div id="calendar"></div>

    <h2 class="text-xl mt-8 mb-4">Liste</h2>
    @forelse($upcomingRdvs as $rdv)
      <div class="mb-2 p-3 bg-gray-50 rounded shadow-sm flex justify-between">
        <div>
          {{ \Carbon\Carbon::parse($rdv->date)->format('d/m/Y H:i') }}
          — <strong>{{ $rdv->client_name }}</strong>
          ({{ $rdv->prestation->title }})
        </div>
        <span>{{ (int)$rdv->prestation->duration }}h</span>
      </div>
    @empty
      <p>Aucun RDV à venir.</p>
    @endforelse
  </div>

  @push('scripts')
    <!-- On importe les bundles JS globaux FullCalendar -->
    <script src="https://cdn.jsdelivr.net/npm/@fullcalendar/core@6.1.4/index.global.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@fullcalendar/daygrid@6.1.4/index.global.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@fullcalendar/timegrid@6.1.4/index.global.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@fullcalendar/interaction@6.1.4/index.global.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@fullcalendar/core@6.1.4/locales/fr.global.min.js"></script>

    <script>
      document.addEventListener('DOMContentLoaded', function() {
        var calendar = new FullCalendar.Calendar(
          document.getElementById('calendar'),
          {
            locale:        'fr',
            firstDay:      1,
            initialView:   'timeGridWeek',
            headerToolbar: {
              left:   'today prev,next',
              center: 'title',
              right:  'timeGridWeek,timeGridDay'
            },
            buttonText: {
              today: "Aujourd’hui",
              week:  "Semaine",
              day:   "Jour"
            },
            plugins: [
              FullCalendar.DayGridPlugin,
              FullCalendar.TimeGridPlugin,
              FullCalendar.InteractionPlugin
            ],

            slotMinTime: '06:00:00',
            slotMaxTime: '20:00:00',
            scrollTime:  '09:00:00',

            allDaySlot:      false,
            slotLabelFormat: { hour: '2-digit', minute: '2-digit', meridiem: false },

            // enfin, on injecte tes events PHP correctement
            events: @json($events)
          }
        );
        calendar.render();
      });
    </script>
  @endpush
</x-app-layout>