@extends('layouts.cliente') {{-- o tu layout público --}}
@section('title','')

@section('content')
<div class="agenda-hero">
  <div class="agenda-hero__title">
    <h1 class="mb-1">Reserva tu hora</h1>
    <p class="mb-0">Elige profesional, servicio y la hora que más te acomode</p>
  </div>
  <div class="agenda-hero__actions">
    <button class="btn btn-outline-primary btn-sm" id="btn-today">Hoy</button>
  </div>
</div>

<div class="container-fluid agenda-container">

  @if(session('success')) <div class="alert alert-success glass-alert">{{ session('success') }}</div> @endif
  @if(session('error'))   <div class="alert alert-danger glass-alert">{{ session('error') }}</div>   @endif
  @if ($errors->any())
    <div class="alert alert-danger glass-alert">
      <ul class="mb-0">
        @foreach ($errors->all() as $e)
          <li>{{ $e }}</li>
        @endforeach
      </ul>
    </div>
  @endif

  <div class="glass-card p-3 mb-3">
    <div class="row g-3 align-items-end">
      <div class="col-md-4">
        <label class="form-label">Profesional</label>
        <select id="provider_id" class="form-select">
          <option value="">Selecciona…</option>
          @foreach($providers as $p)
            <option value="{{ $p->id }}" @selected(($selectedProvider ?? null) == $p->id)>
              {{ $p->nombre_mostrado }}
            </option>
          @endforeach
        </select>
      </div>
      <div class="col-md-4">
        <label class="form-label">Servicio</label>
        <select id="service_id" class="form-select">
          <option value="">Selecciona…</option>
          @foreach($services as $s)
            <option value="{{ $s->id }}" data-dur="{{ $s->duracion_min }}">
              {{ $s->nombre }} ({{ $s->duracion_min }} min)
            </option>
          @endforeach
        </select>
      </div>
      <div class="col-md-4">
        <small class="text-muted d-block mb-1">Consejo</small>
        <div class="small text-muted">Selecciona profesional y servicio, luego toca un bloque libre para reservar.</div>
      </div>
    </div>
  </div>

  <div id="agenda-loading" class="agenda-loading d-none">
    <div class="spinner-border text-primary" role="status"></div>
    <span>Cargando disponibilidad…</span>
  </div>

  <div class="glass-card p-2">
    <div id="calendar"></div>
  </div>
</div>
@endsection

@push('styles')
<link href="https://cdn.jsdelivr.net/npm/fullcalendar@6.1.15/index.global.min.css" rel="stylesheet"/>
<style>
  :root{
    --agenda-grad-1:#e8f1ff;
    --agenda-grad-2:#f3f6ff;
    --agenda-page:#f4f6f9;
    --agenda-card:#ffffff;
    --agenda-border:#dee2e6;
    --agenda-text:#212529;
    --agenda-muted:#6c757d;
  }
  body{ background-color: var(--agenda-page); }
  .agenda-hero{
    display:flex; justify-content:space-between; align-items:center;
    padding:20px 24px; border-radius:20px; margin-bottom:16px;
    background: linear-gradient(90deg, var(--agenda-grad-1), var(--agenda-grad-2));
    color: var(--agenda-text);
    border:1px solid var(--agenda-border);
  }
  .agenda-hero__title h1{ font-weight:700; letter-spacing:.3px; }
  .agenda-hero__title p{ color: var(--agenda-muted); }
  .agenda-container{ padding-top:6px; }
  .glass-card{
    background: var(--agenda-card);
    border: 1px solid var(--agenda-border);
    border-radius: 16px;
    color: var(--agenda-text);
  }
  .glass-alert{ border-radius: 14px; border: 1px solid var(--agenda-border); }
  #calendar{
    --fc-border-color: var(--agenda-border);
    --fc-page-bg-color: var(--agenda-card);
    --fc-neutral-bg-color: #f8f9fa;
    --fc-today-bg-color: rgba(13,110,253,.08);
    --fc-now-indicator-color: #dc3545;
    color: var(--agenda-text);
  }
  .fc .fc-toolbar.fc-header-toolbar{
    margin:8px 8px 12px; padding:8px; border-radius:12px; background:#f8f9fa; border:1px solid var(--agenda-border);
  }
  .fc-theme-standard .fc-scrollgrid{
    border:1px solid var(--agenda-border); border-radius:14px; overflow:hidden;
  }
  .fc .fc-timegrid-slot{ height: 2.25rem; }
  .fc .fc-timegrid-axis-cushion, .fc .fc-col-header-cell-cushion{ color: var(--agenda-muted); }
  .fc .fc-event{ border:none; border-radius:12px; box-shadow:0 4px 10px rgba(0,0,0,.08); }
  .fc .fc-event .fc-event-main{ padding:6px 8px; font-weight:600; letter-spacing:.2px; }
  .agenda-loading{ display:flex; gap:10px; align-items:center; color:#0d6efd; margin:8px 0 16px 4px; }
</style>
@endpush

@push('scripts')
<script>
  const CSRF_TOKEN = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') ?? '';
</script>
<script src="https://cdn.jsdelivr.net/npm/fullcalendar@6.1.15/index.global.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
  const calEl = document.getElementById('calendar'); if(!calEl) return;
  const loader = document.getElementById('agenda-loading');
  const showLoader = (v)=> loader?.classList.toggle('d-none', !v);

  const calendar = new FullCalendar.Calendar(calEl, {
    timeZone: 'America/Santiago',
    initialView: 'timeGridWeek',
    expandRows: true,
    slotMinTime: '08:00:00',
    slotMaxTime: '21:00:00',
    slotDuration: '00:30:00',
    locale: 'es',
    firstDay: 1,
    nowIndicator: true,
    selectable: true,
    selectMirror: true,
    height: 'auto',
    headerToolbar: { left: 'prev,next today', center: 'title', right: 'dayGridMonth,timeGridWeek,timeGridDay' },

    loading(isLoading){ showLoader(isLoading); },

    events: function(fetchInfo, success, failure){
      const providerId = document.getElementById('provider_id').value;
      // si no hay provider o servicio, igual mostramos bloqueos/reservas para ver disponibilidad general
      const url = `{{ route('agenda.events') }}?start=${fetchInfo.startStr}&end=${fetchInfo.endStr}&provider_id=${providerId}`;
      fetch(url).then(r=>r.json()).then(success).catch(failure);
    },

    select(info){
      const providerId = document.getElementById('provider_id').value;
      const serviceId  = document.getElementById('service_id').value;
      if(!providerId || !serviceId){
        alert('Primero selecciona Profesional y Servicio.');
        calendar.unselect();
        return;
      }

      // Confirmación mínima
      if(!confirm(`¿Reservar ${info.start.toLocaleString()}?`)){
        calendar.unselect(); return;
      }

      // Form POST (cliente)
      const form = document.createElement('form');
      form.method = 'POST';
      form.action = '{{ route('agenda.book') }}';

      const token = document.createElement('input');
      token.type = 'hidden'; token.name = '_token'; token.value = CSRF_TOKEN; form.appendChild(token);

      form.innerHTML += `
        <input type='hidden' name='service_id' value='${serviceId}'>
        <input type='hidden' name='service_provider_id' value='${providerId}'>
        <input type='hidden' name='starts_at' value='${info.startStr}'>
      `;

      document.body.appendChild(form);
      form.submit();
    }
  });

  calendar.render();

  // Preselección si viene ?provider_id=
  const pre = "{{ $selectedProvider ?? '' }}";
  if(pre){ document.getElementById('provider_id').value = pre; calendar.refetchEvents(); }

  document.getElementById('provider_id').addEventListener('change', ()=>calendar.refetchEvents());
  document.getElementById('btn-today').addEventListener('click', ()=>calendar.today());
});
</script>
@endpush