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

@section('content')
  <div class="container mx-auto py-5" style="max-width:900px;">
    <h2 class="mb-2 text-2xl font-semibold">Réserver : {{ $prestation->title }}</h2>
    <p class="text-gray-700 mb-4">
      Durée : <strong>{{ $prestation->duration }} h</strong> |
      Prix  : <strong>{{ $prestation->price }} €</strong>
    </p>

    <form action="{{ route('rdv.store') }}" method="POST" id="booking-form">
      @csrf
      <input type="hidden" name="prestation_id" value="{{ $prestation->id }}">
      <input type="hidden" name="date" id="slotDate">
      <input type="hidden" name="client_name" value="{{ auth()->user()->name }}">
      <input type="hidden" name="client_numero" id="slotPhone">

      {{-- Navigation de semaines --}}
      <div class="flex items-center justify-between mb-4">
        <button type="button" id="prev-week" class="px-4 py-2 bg-gray-200 rounded hover:bg-gray-300">&lt;</button>
        <div id="week-label" class="text-lg font-medium"></div>
        <button type="button" id="next-week" class="px-4 py-2 bg-gray-200 rounded hover:bg-gray-300">&gt;</button>
      </div>

      {{-- Grille des créneaux --}}
      <div id="slots-grid"
           class="grid grid-cols-7 gap-2 bg-white p-4 rounded shadow overflow-x-auto mb-6">
      </div>

      {{-- Téléphone --}}
      <div class="mb-4">
        <label for="client_phone_input" class="block font-medium mb-1">Téléphone</label>
        <input type="tel"
               id="client_phone_input"
               class="w-full border-gray-300 rounded px-3 py-2"
               placeholder="06 12 34 56 78"
               pattern="^0[1-9]([-. ]?[0-9]{2}){4}$"
               required>
      </div>

      <button type="submit"
              class="w-full bg-blue-600 text-white py-2 rounded hover:bg-blue-700 transition">
        Confirmer la réservation
      </button>
    </form>
  </div>

  <!-- Modale de confirmation -->
  <div id="confirmation-modal"
       class="hidden fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
    <div class="bg-white rounded-lg shadow-lg p-6 w-full max-w-md">
      <h3 class="text-lg font-semibold mb-4">Confirmer votre réservation</h3>
      <p id="modal-message" class="text-gray-700 mb-6"></p>
      <div class="flex justify-end space-x-4">
        <button id="cancel-btn" class="px-4 py-2 bg-gray-300 rounded hover:bg-gray-400">Annuler</button>
        <button id="confirm-btn" class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700">Confirmer</button>
      </div>
    </div>
  </div>
@endsection

@push('styles')
  <style>
    .slot-label {
      display: inline-block;
      padding: .25rem .5rem;
      background: #f3f4f6;
      border-radius: .25rem;
      cursor: pointer;
      transition: background .2s;
    }
    .slot-label:hover { background: #e5e7eb; }
    input[type=radio]:checked + .slot-label {
      background: #2563eb;
      color: white;
    }
    .slot-label.opacity-50 {
      background: #e5e7eb;
      color: #9ca3af;
    }
    /* Modale de confirmation */
    #confirmation-modal { display: none; }
    #confirmation-modal.active { display: flex; }
  </style>
@endpush

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function () {
  const duration    = {{ (int)$prestation->duration }};
  const price       = {{ $prestation->price }};
  const takenStarts = new Set(@json($taken));  // débuts de rdv existants
  const now         = new Date();
  let offsetWeeks   = 0;

  // Convertit chaque début en toutes ses demi-heures occupées
  const pad = n => String(n).padStart(2,'0');
  function formatDate(d) {
    return `${d.getFullYear()}-${pad(d.getMonth()+1)}-${pad(d.getDate())}`
         + ` ${pad(d.getHours())}:${pad(d.getMinutes())}`;
  }
  const allTaken = new Set();
  takenStarts.forEach(startStr => {
    let cur = new Date(startStr.replace(' ', 'T'));
    for(let i=0; i<duration*2; i++){
      allTaken.add(formatDate(cur));
      cur = new Date(cur.getTime() + 30*60000);
    }
  });

  function isSlotAvailable(slot) {
    for(let i=0; i<duration*2; i++){
      const ts = formatDate(new Date(slot.getTime() + i*30*60000));
      if(allTaken.has(ts)) return false;
    }
    return true;
  }

  function addDays(d,n){ let x=new Date(d); x.setDate(x.getDate()+n); return x }
  function setTime(d,h,m){ let x=new Date(d); x.setHours(h,m,0,0); return x }
  function labelDate(d){
    return d.toLocaleDateString('fr-FR',{weekday:'short',day:'numeric',month:'short'});
  }

  const weekLabel = document.getElementById('week-label');
  const prevBtn   = document.getElementById('prev-week');
  const nextBtn   = document.getElementById('next-week');
  const grid      = document.getElementById('slots-grid');
  const slotDate  = document.getElementById('slotDate');
  const phoneIn   = document.getElementById('client_phone_input');
  const phoneOut  = document.getElementById('slotPhone');
  const form      = document.getElementById('booking-form');
  const modal     = document.getElementById('confirmation-modal');
  const msgBox    = document.getElementById('modal-message');
  const cancelBtn = document.getElementById('cancel-btn');
  const confirmBtn= document.getElementById('confirm-btn');

  phoneIn.addEventListener('input', ()=> phoneOut.value = phoneIn.value);

  function renderWeek(){
    grid.innerHTML = '';
    const base   = addDays(new Date(), offsetWeeks*7);
    const wd     = base.getDay() || 7;
    const monday = addDays(base, 1-wd);
    const sunday = addDays(monday, 6);
    weekLabel.textContent =
      `Du ${pad(monday.getDate())}/${pad(monday.getMonth()+1)}`
    + ` au ${pad(sunday.getDate())}/${pad(sunday.getMonth()+1)}`;

    for(let i=0; i<7; i++){
      const col = document.createElement('div');
      col.classList.add('flex','flex-col','items-center','space-y-1');
      const day = addDays(monday,i);
      // en-tête
      const h = document.createElement('div');
      h.className = 'font-medium mb-2 text-center';
      h.textContent = labelDate(day);
      col.append(h);

      let slot = setTime(day,9,0);
      const limit = setTime(day,19-duration,0);
      while(slot <= limit){
        const ts = formatDate(slot);
        const id = 'slot-' + slot.getTime();

        const wrapper = document.createElement('div');
        wrapper.classList.add('flex','items-center');

        const radio = document.createElement('input');
        radio.type='radio'; radio.name='date';
        radio.id=id; radio.value=ts;

        const label = document.createElement('label');
        label.htmlFor=id; label.classList.add('slot-label');
        label.textContent = `${pad(slot.getHours())}:${pad(slot.getMinutes())}`;

        if(slot < now || !isSlotAvailable(slot)){
          radio.disabled = true;
          label.classList.add('opacity-50','cursor-not-allowed');
        } else {
          radio.required = true;
          radio.classList.add('hidden');
          radio.addEventListener('change', ()=> slotDate.value = ts);
          wrapper.append(radio,label);
        }

        col.append(wrapper);
        slot = new Date(slot.getTime() + 30*60000);
      }

      grid.append(col);
    }
  }

  prevBtn.addEventListener('click', ()=>{ offsetWeeks--; renderWeek() });
  nextBtn.addEventListener('click', ()=>{ offsetWeeks++; renderWeek() });
  renderWeek();

  // Confirmation modal
  form.addEventListener('submit', function(e){
    e.preventDefault();
    const startStr = slotDate.value;
    if(!startStr){
      alert('Veuillez choisir un créneau.');
      return;
    }
    let sd = new Date(startStr.replace(' ','T'));
    let ed = new Date(sd.getTime() + duration*3600*1000);
    const endStr = `${pad(ed.getHours())}:${pad(ed.getMinutes())}`;

    const msg = 
      `Vous allez réserver :<br><br>`+
      `• Prestation : {{ $prestation->title }}<br>`+
      `• Prix       : ${price} €<br>`+
      `• Durée      : ${duration} h<br>`+
      `• Date & heure : ${startStr} → ${endStr}<br>`+
      `• Téléphone  : ${phoneOut.value}<br>`;

    msgBox.innerHTML = msg;
    modal.classList.add('active');

    cancelBtn.onclick = ()=> modal.classList.remove('active');
    confirmBtn.onclick = ()=>{
      modal.classList.remove('active');
      form.submit();
    };
  });
});
</script>
@endpush