{{-- resources/views/rdv/create.blade.php --}}
@extends('layouts.master')

@section('content')
  <div class="container py-5">
    <h2 class="mb-4">Réserver : {{ $prestation->title }}</h2>

    {{-- LE CALENDRIER --}}
    <div id="calendar" style="max-width:900px;margin:2rem auto;"></div>

    {{-- FORMULAIRE CACHÉ --}}
    <form action="{{ route('rdv.store') }}" method="POST" class="text-center mt-4">
      @csrf
      <input type="hidden" name="prestation_id" value="{{ $prestation->id }}">
      <input type="hidden" name="date" id="slotDate">
      <input type="hidden" name="client_name" id="slotName">
      <input type="hidden" name="client_email" id="slotEmail">
      <button type="submit" class="btn btn-success">Confirmer la réservation</button>
    </form>
  </div>
@endsection

@push('styles')
  <!-- FullCalendar Core + TimeGrid (unpkg pour avoir un CSS propre) -->
  <link
    href="https://unpkg.com/@fullcalendar/core@6.1.4/main.min.css"
    rel="stylesheet"
  />
  <link
    href="https://unpkg.com/@fullcalendar/timegrid@6.1.4/main.min.css"
    rel="stylesheet"
  />
  <style>
    /* Un petit style pour que ce soit propre */
    #calendar {
      background: #fff;
      border-radius: 8px;
      box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    }
  </style>
@endpush

@push('scripts')
  <!-- FullCalendar Core + TimeGrid + Interaction + Locale FR depuis unpkg -->
  <script src="https://unpkg.com/@fullcalendar/core@6.1.4/index.global.min.js"></script>
  <script src="https://unpkg.com/@fullcalendar/timegrid@6.1.4/index.global.min.js"></script>
  <script src="https://unpkg.com/@fullcalendar/interaction@6.1.4/index.global.min.js"></script>
  <script src="https://unpkg.com/@fullcalendar/core@6.1.4/locales/fr.global.min.js"></script>

  <script>
    document.addEventListener('DOMContentLoaded', function() {
      // Tes créneaux dispo injectés depuis le controller
      const events = @json($slots);

      const calendarEl = document.getElementById('calendar');
      const calendar   = new FullCalendar.Calendar(calendarEl, {
        locale:        'fr',            // langue française
        firstDay:      1,               // lundi = 1
        initialView:   'timeGridWeek',
        selectable:    true,
        allDaySlot:    false,
        headerToolbar: {
          left:   'today prev,next',
          center: 'title',
          right:  'timeGridWeek,timeGridDay'
        },
        buttonText: {
          today: "Aujourd’hui",
          week:  "Semaine",
          day:   "Jour",
          list:  "Liste"
        },
        dayHeaderFormat: { weekday: 'long' },
        titleFormat:     { year: 'numeric', month: 'long', day: 'numeric' },
        slotLabelFormat: { hour: '2-digit', minute: '2-digit', meridiem: false },
        events: events,
        select(info) {
          // lorsque l'utilisateur sélectionne un créneau
          document.getElementById('slotDate').value  = info.startStr;
          const nom   = prompt('Votre nom ?','');
          const email = prompt('Votre e-mail ?','');
          document.getElementById('slotName').value  = nom   || '';
          document.getElementById('slotEmail').value = email || '';
        }
      });

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