@extends('layouts.comercio')
@section('title','')

@section('content')
<div class="agenda-hero">
  <div class="agenda-hero__title">
    <h1 class="mb-1">Agenda</h1>
    <p class="mb-0">Gestiona reservas y bloqueos en tiempo real</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">

  {{-- Flashes / errores --}}
  @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

  {{-- Filtros y acciones --}}
  <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="">Todos</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="">—</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 d-flex gap-2">
        <button class="btn btn-primary flex-fill" id="btn-create" type="button">
          <span class="agenda-btn-icon">＋</span> Nueva reserva
        </button>
        <button class="btn btn-outline-secondary flex-fill" id="btn-block" type="button">
          <span class="agenda-btn-icon">⛔</span> Bloquear franja
        </button>
      </div>
    </div>

    {{-- Leyenda --}}
    <div class="d-flex flex-wrap gap-2 mt-3">
      <span class="badge rounded-pill text-bg-success-subtle agenda-chip">Confirmada</span>
      <span class="badge rounded-pill text-bg-warning-subtle agenda-chip">Pendiente</span>
      <span class="badge rounded-pill text-bg-danger-subtle agenda-chip">Cancelada</span>
      <span class="badge rounded-pill text-bg-secondary-subtle agenda-chip">Bloqueo</span>
    </div>
  </div>

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

  {{-- Calendario --}}
  <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{
    /* Paleta clara que combina con sidebar azul #0d6efd */
    --agenda-grad-1:#e8f1ff;            /* azul muy claro */
    --agenda-grad-2:#f3f6ff;            /* violeta muy claro */
    --agenda-page:#f4f6f9;              /* fondo del body */
    --agenda-card:#ffffff;              /* tarjetas/calendario */
    --agenda-border:#dee2e6;            /* bordes suaves */
    --agenda-text:#212529;              /* texto principal */
    --agenda-muted:#6c757d;             /* texto secundario */
  }

  /* Fondo general claro */
  body{ background-color: var(--agenda-page); }

  /* Hero superior ligero */
  .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; }

  /* Card “clean” */
  .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);
  }
  .agenda-chip{ filter: saturate(1.05); }
  .agenda-btn-icon{ margin-right:6px; }

  /* FullCalendar claro */
  #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); /* tono del sidebar */
    --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);
    background-clip: padding-box;
  }
  .fc .fc-event .fc-event-main{
    padding:6px 8px; font-weight:600; letter-spacing:.2px;
  }
  .fc .fc-event.fc-event-past{ opacity:.85; }
  .fc .fc-button{
    border-radius: 10px; border:1px solid var(--agenda-border); font-weight:600;
    background: #ffffff; color: #0d6efd;
  }
  .fc .fc-button-primary:not(:disabled).fc-button-active,
  .fc .fc-button-primary:not(:disabled):active{
    background: #0d6efd; color:#fff; border-color:#0d6efd;
  }

  /* Loader */
  .agenda-loading{
    display:flex; gap:10px; align-items:center;
    color:#0d6efd; margin: 8px 0 16px 4px;
  }
</style>
@endpush

@push('scripts')
<script>
  // Token CSRF desde el <meta> del layout
  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 calendarEl = document.getElementById('calendar');
  if (!calendarEl) return;

  const loader = document.getElementById('agenda-loading');
  const showLoader = (v)=> loader?.classList.toggle('d-none', !v);

  const calendar = new FullCalendar.Calendar(calendarEl, {
    timeZone: 'America/Santiago',
    initialView: 'timeGridWeek',
    expandRows: true,
    slotMinTime: '07:00:00',
    slotMaxTime: '22: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;
      const url = `{{ route('admin.agenda.events') }}?start=${fetchInfo.startStr}&end=${fetchInfo.endStr}&provider_id=${providerId}`;
      fetch(url)
        .then(r=>r.json())
        .then(data=>{
          // colorea por estado si viene en extendedProps
          const mapped = data.map(ev=>{
            const st = ev.extendedProps?.estado;
            if (st === 'confirmada') { ev.backgroundColor = '#22c55e'; ev.borderColor = '#22c55e'; }
            if (st === 'pendiente')  { ev.backgroundColor = '#f59e0b'; ev.borderColor = '#f59e0b'; }
            if (st === 'cancelada')  { ev.backgroundColor = '#ef4444'; ev.borderColor = '#ef4444'; }
            return ev;
          });
          success(mapped);
        })
        .catch(failure);
    },

    eventContent(arg){
      const estado = arg.event.extendedProps?.estado ?? '';
      const dueno  = arg.event.extendedProps?.dueno ?? '';
      const el = document.createElement('div');
      el.innerHTML = `
        <div style="font-size:12px; opacity:.85;">${arg.timeText}</div>
        <div style="font-size:13px; line-height:1.2;">${arg.event.title}</div>
        ${dueno ? `<div style="font-size:11px; opacity:.75;">Cliente: ${dueno}</div>` : ''}
        ${estado ? `<span style="font-size:10px; opacity:.7;">${estado}</span>` : ''}
      `;
      return { domNodes: [el] };
    },

    eventDidMount(info){
      const ep = info.event.extendedProps || {};
      const title = `${info.event.title}
${info.event.start.toLocaleString()} → ${info.event.end?.toLocaleString() || ''}
${ep.dueno ? 'Cliente: '+ep.dueno : ''} ${ep.mascota ? '· Mascota: '+ep.mascota : ''}`;
      info.el.setAttribute('title', title);
    },

    eventClick(info){
      const id = info.event.extendedProps?.booking_id;
      if (id) { window.location = `{{ route('admin.bookings.index') }}?show=${id}`; }
    },

    select(info){
      const serviceSel = document.getElementById('service_id');
      const serviceId  = serviceSel.value;
      const providerId = document.getElementById('provider_id').value;

      if(!serviceId || !providerId){
        alert('Selecciona Servicio y Profesional.');
        calendar.unselect();
        return;
      }

      const form = document.createElement('form');
      form.method = 'POST';
      form.action = '{{ route('admin.bookings.store') }}';

      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='dueno_id' value='{{ auth()->id() }}'>
        <input type='hidden' name='starts_at' value='${info.startStr}'>
      `;

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

  // Render
  calendar.render();

  // Preselección (Opción B)
  const preselected = "{{ $selectedProvider ?? '' }}";
  if (preselected) {
    const sel = document.getElementById('provider_id');
    if (sel) sel.value = preselected;
    calendar.refetchEvents();
  }

  // Botones rápidos
  document.getElementById('provider_id').addEventListener('change', ()=>calendar.refetchEvents());
  document.getElementById('btn-today').addEventListener('click', ()=>calendar.today());

  document.getElementById('btn-block').addEventListener('click', ()=>{
    const providerId = document.getElementById('provider_id').value;
    if(!providerId) return alert('Elige un profesional para bloquear.');

    const start = prompt('Inicio bloqueado (YYYY-MM-DD HH:MM)');
    const end   = prompt('Fin bloqueado (YYYY-MM-DD HH:MM)');
    if(!start || !end) return;

    fetch(`{{ route('admin.agenda.block') }}`,{
      method:'POST',
      headers:{ 'Content-Type':'application/json','X-CSRF-TOKEN': CSRF_TOKEN },
      body: JSON.stringify({ service_provider_id: providerId, starts_at: start, ends_at: end })
    }).then(()=>calendar.refetchEvents());
  });
});
</script>
@endpush