@extends('layouts.public')
<style>
@media (max-width: 768px) {
  .modal-dialog {
    margin: 1rem;
  }
  .modal-content {
    font-size: 14px;
  }
  #agenda .fc-toolbar {
    flex-wrap: wrap;
    gap: 0.5rem;
  }
  #agenda {
    font-size: 13px;
  }
}
</style>

@section('title', 'Agenda del Doctor')

@section('content')
<div class="container py-4">
  <div class="d-flex justify-content-between align-items-center mb-3">
    <h3 class="fw-bold text-primary m-0">
        Agenda del Dr. {{ $doctor->nombre }}
    </h3>

    <div class="d-flex gap-2">
        <button
            type="button"
            class="btn btn-primary"
            data-bs-toggle="modal"
            data-bs-target="#nuevaCitaModal"
        >
            <i class="ti ti-calendar-plus me-1"></i>
            Nueva cita
        </button>

        <a href="{{ route('resultados.doctor.dashboard', $doctor->idDoctor) }}"
           class="btn btn-outline-secondary">
            <i class="ti ti-arrow-left"></i> Volver al Panel
        </a>
    </div>
</div>

  <div id="agenda"></div>
</div>
<!-- MODAL DETALLE DE CITA -->
<div class="modal fade" id="citaModal" tabindex="-1" aria-labelledby="citaModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered modal-lg">
    <div class="modal-content">
      <div class="modal-header bg-primary text-white">
        <h5 class="modal-title" id="citaModalLabel">Detalle de la Cita</h5>
        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body">
        <div class="row g-2">
          <div class="col-12 col-md-6">
            <p><strong>Paciente:</strong> <span id="m-paciente">-</span></p>
            <p><strong>Tipo:</strong> <span id="m-tipo">-</span></p>
            <p style="display: none"><strong>Doctor:</strong> <span id="m-doctor">-</span></p>
          </div>
          <div class="col-12 col-md-6">
            <p><strong>Sucursal:</strong> <span id="m-sucursal">-</span></p>
            <p><strong>Fecha/Hora:</strong> <span id="m-fecha">-</span></p>
            <p><strong>Expediente:</strong> <span id="m-expediente">-</span></p>
          </div>
        </div>

        <p class="mt-3" id="m-desc-wrap" style="display:none;">
          <strong>Notas:</strong> <span id="m-desc">-</span>
        </p>

        <div class="row mt-2">
            <div class="col-md-6">
                <small class="text-muted">Última modificación por</small><br>
                <strong id="m-admin">-</strong>
            </div>

            <div class="col-md-6">
                <small class="text-muted">Fecha modificación</small><br>
                <strong id="m-updated">-</strong>
            </div>
        </div>
        <div id="m-status-wrap" class="mt-2" style="display:none;">
          <span class="badge" id="m-status">-</span>
        </div>
      </div>
      <div class="modal-footer">
        <a id="btn-whats" class="btn btn-success d-none" target="_blank" style="display: none;">
          <i class="ti ti-brand-whatsapp"></i> WhatsApp
        </a>
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
      </div>
    </div>
  </div>
</div>
<!-- MODAL NUEVA CITA -->
<div class="modal fade" id="nuevaCitaModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg">
        <div class="modal-content">

            <div class="modal-header bg-primary text-white">
                <h5 class="modal-title">
                    <i class="ti ti-calendar-plus me-1"></i>
                    Nueva consulta
                </h5>

                <button
                    type="button"
                    class="btn-close btn-close-white"
                    data-bs-dismiss="modal"
                ></button>
            </div>

            <form id="formNuevaCita">
                @csrf

                <div class="modal-body">

                    <div
                        id="alertNuevaCita"
                        class="alert alert-danger d-none"
                    ></div>

                    <!-- Doctor -->
                    <div class="alert alert-light border mb-4">
                        <small class="text-muted d-block">
                            Médico
                        </small>

                        <strong>
                            {{ trim(
                                $doctor->nombre . ' ' .
                                ($doctor->apPaterno ?? '') . ' ' .
                                ($doctor->apMaterno ?? '')
                            ) }}
                        </strong>
                    </div>

                    <!-- PACIENTE -->
                    <div class="mb-4">
                        <label class="form-label fw-bold">
                            Paciente
                        </label>

                        <div class="btn-group mb-3" role="group">
                            <input
                                type="radio"
                                class="btn-check"
                                name="modo_paciente"
                                id="modoPacienteExistente"
                                value="existente"
                                checked
                            >

                            <label
                                class="btn btn-outline-primary"
                                for="modoPacienteExistente"
                            >
                                <i class="ti ti-search me-1"></i>
                                Buscar paciente
                            </label>

                            <input
                                type="radio"
                                class="btn-check"
                                name="modo_paciente"
                                id="modoPacienteNuevo"
                                value="nuevo"
                            >

                            <label
                                class="btn btn-outline-primary"
                                for="modoPacienteNuevo"
                            >
                                <i class="ti ti-user-plus me-1"></i>
                                Nuevo paciente
                            </label>
                        </div>

                        <!-- EXISTENTE -->
                        <div id="bloquePacienteExistente">

                            <input
                                type="hidden"
                                name="id_paciente"
                                id="nuevo_id_paciente"
                            >

                            <input
                                type="text"
                                class="form-control"
                                id="buscarPaciente"
                                placeholder="Nombre, expediente o teléfono..."
                                autocomplete="off"
                            >

                            <div
                                id="resultadosPacientes"
                                class="list-group mt-2"
                            ></div>

                            <div
                                id="pacienteSeleccionado"
                                class="alert alert-success mt-3 d-none"
                            >
                            </div>
                        </div>

                        <!-- NUEVO -->
                        <div id="bloquePacienteNuevo" class="d-none">

                            <div class="row g-3">

                                <div class="col-md-6">
                                    <label class="form-label">
                                        Nombre *
                                    </label>

                                    <input
                                        type="text"
                                        name="paciente_nombre"
                                        class="form-control"
                                    >
                                </div>

                                <div class="col-md-6">
                                    <label class="form-label">
                                        Apellido paterno *
                                    </label>

                                    <input
                                        type="text"
                                        name="paciente_apPaterno"
                                        class="form-control"
                                    >
                                </div>

                                <div class="col-md-6">
                                    <label class="form-label">
                                        Apellido materno
                                    </label>

                                    <input
                                        type="text"
                                        name="paciente_apMaterno"
                                        class="form-control"
                                    >
                                </div>

                                <div class="col-md-6">
                                    <label class="form-label">
                                        Teléfono *
                                    </label>

                                    <input
                                        type="tel"
                                        name="paciente_telefono"
                                        id="pacienteTelefono"
                                        class="form-control"
                                        maxlength="10"
                                        inputmode="numeric"
                                        placeholder="9991234567"
                                    >

                                    <small class="text-muted">
                                        Debe contener exactamente 10 dígitos.
                                    </small>
                                </div>

                            </div>
                        </div>
                    </div>

                    <hr>

                    <!-- HORARIO -->
                    <div class="row g-3 mb-4">

                        <div class="col-md-4">
                            <label class="form-label fw-bold">
                                Fecha *
                            </label>

                            <input
                                type="date"
                                name="fecha"
                                id="nuevaFecha"
                                class="form-control"
                                required
                            >
                        </div>

                        <div class="col-md-4">
                            <label class="form-label fw-bold">
                                Hora inicio *
                            </label>

                            <input
                                type="time"
                                name="hora_inicio"
                                id="nuevaHoraInicio"
                                class="form-control"
                                required
                            >
                        </div>

                        <div class="col-md-4">
                            <label class="form-label fw-bold">
                                Hora fin *
                            </label>

                            <input
                                type="time"
                                name="hora_fin"
                                id="nuevaHoraFin"
                                class="form-control"
                                required
                            >
                        </div>

                    </div>

                    <div class="row g-3">

                        <!-- Sucursal -->
                        <div class="col-md-6">
                            <label class="form-label fw-bold">
                                Sucursal *
                            </label>

                            <select
                                name="sucursal"
                                class="form-select"
                                required
                            >
                                <option value="">
                                    Seleccione...
                                </option>

                                <option value="0">
                                    Centro
                                </option>

                                <option value="1">
                                    Las Américas
                                </option>
                            </select>
                        </div>

                        <!-- Intercalar -->
                        <div class="col-md-6 d-flex align-items-end">
                            <div class="form-check mb-2">
                                <input
                                    class="form-check-input"
                                    type="checkbox"
                                    name="intercalado"
                                    id="nuevoIntercalado"
                                    value="1"
                                >

                                <label
                                    class="form-check-label"
                                    for="nuevoIntercalado"
                                >
                                    Intercalar esta consulta
                                </label>
                            </div>
                        </div>

                    </div>

                    <!-- Motivo -->
                    <div class="mt-4">
                        <label class="form-label fw-bold">
                            Motivo de consulta *
                        </label>

                        <input
                            type="text"
                            name="asunto"
                            class="form-control"
                            maxlength="255"
                            placeholder="Primera vez, revisión, seguimiento..."
                            required
                        >
                    </div>

                    <!-- Notas -->
                    <div class="mt-3">
                        <label class="form-label fw-bold">
                            Notas adicionales
                        </label>

                        <textarea
                            name="descripcion"
                            class="form-control"
                            rows="3"
                            placeholder="Información adicional..."
                        ></textarea>
                    </div>

                </div>

                <div class="modal-footer">

                    <button
                        type="button"
                        class="btn btn-light"
                        data-bs-dismiss="modal"
                    >
                        Cancelar
                    </button>

                    <button
                        type="submit"
                        class="btn btn-primary"
                        id="btnGuardarNuevaCita"
                    >
                        <i class="ti ti-calendar-plus me-1"></i>
                        Agendar consulta
                    </button>

                </div>
            </form>

        </div>
    </div>
</div>
{{-- FullCalendar CDN --}}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fullcalendar@6.1.15/index.global.min.css">
<script src="https://cdn.jsdelivr.net/npm/fullcalendar@6.1.15/index.global.min.js"></script>

<script>
document.addEventListener('DOMContentLoaded', async () => {
  const citasUrl =
    @json(route('resultados.doctor.citas.api', $doctor->idDoctor));
  const guardarCitaUrl =
    @json(route('resultados.doctor.citas.store', $doctor->idDoctor));
  
   const res = await fetch(citasUrl);
  const data = await res.json()
  const modoExistente = document.getElementById('modoPacienteExistente');
  const modoNuevo = document.getElementById('modoPacienteNuevo');

  const bloqueExistente = document.getElementById('bloquePacienteExistente');
  const bloqueNuevo = document.getElementById('bloquePacienteNuevo');

  const buscarPaciente = document.getElementById('buscarPaciente');
  const resultadosPacientes = document.getElementById('resultadosPacientes');
  const pacienteSeleccionado = document.getElementById('pacienteSeleccionado');
  const inputPacienteId = document.getElementById('nuevo_id_paciente');

let timerPaciente = null;

  const calendar = new FullCalendar.Calendar(document.getElementById('agenda'), {
    locale: 'es',
    timeZone: 'America/Merida',
    initialView: 'listDay',
    nowIndicator: true,
    height: 'auto',
    headerToolbar: {
      left: 'prev,next today',
      center: 'title',
      right: 'listDay,timeGridWeek,dayGridMonth'
    },
    buttonText: {
      today: 'Hoy',
      month: 'Mes',
      week: 'Semana',
      day: 'Día',
      list: 'Día'
    },
    selectable: true,
    selectMirror: true,
    select: function(info) {

        const fecha = info.startStr.substring(0, 10);

        const inicioOriginal = new Date(info.start);

        // Redondear al bloque de 30 minutos más cercano
        const minutos = inicioOriginal.getMinutes();

        if (minutos < 15) {
            inicioOriginal.setMinutes(0);
        } else if (minutos < 45) {
            inicioOriginal.setMinutes(30);
        } else {
            inicioOriginal.setHours(inicioOriginal.getHours() + 1);
            inicioOriginal.setMinutes(0);
        }

        inicioOriginal.setSeconds(0);
        inicioOriginal.setMilliseconds(0);

        // Fin automático +30 minutos
        const finAutomatico = new Date(
            inicioOriginal.getTime() + (30 * 60 * 1000)
        );

        const formatearHora = (fecha) => {
            return String(fecha.getHours()).padStart(2, '0')
                + ':'
                + String(fecha.getMinutes()).padStart(2, '0');
        };

        document.getElementById('nuevaFecha').value = fecha;

        document.getElementById('nuevaHoraInicio').value =
            formatearHora(inicioOriginal);

        document.getElementById('nuevaHoraFin').value =
            formatearHora(finAutomatico);

        const modal = new bootstrap.Modal(
            document.getElementById('nuevaCitaModal')
        );

        modal.show();
    },
    slotMinTime: '08:00:00',
    slotMaxTime: '21:30:00',
    slotDuration: '00:30:00',
    snapDuration: '00:30:00',
    events: data,
    eventContent: function(arg) {
      const e = arg.event
      const p = e.extendedProps
      const color = e.backgroundColor || '#0edff3';
      let status = ''
      switch (String(p.status)) {
        case '3': status = '<span class="badge bg-success">Atendida</span>'; break
        case '1': status = '<span class="badge bg-info text-white">Pendiente por confirmar</span>'; break
        case '2': status = '<span class="badge bg-primary">Confirmada</span>'; break
        case '4': status = '<span class="badge bg-danger">Cancelada</span>'; break
      }
       if (arg.view.type === 'timeGridWeek') {
        return { html: `<div class="p-1 rounded text-white" style="background:${color};font-size:12px">${e.title}</div>` };
      }
      if (arg.view.type === 'dayGridMonth') {
        return { html: `<div class="p-1 rounded text-white" style="background:${color};font-size:12px">${e.title}</div>` };
      }
      return {
        html: `
          <div><strong>${e.title}</strong></div>
          <div class="mt-1">
              ${
                  p.sucursal
                      ? `
                          <span
                              class="badge"
                              style="
                                  background-color:${p.sucursal_color};
                                  color:#fff;
                              "
                          >
                              <i class="ti ti-map-pin me-1"></i>
                              ${p.sucursal}
                          </span>
                      `
                      : ''
              }
          </div>
          ${status}
           <div class="mt-1 text-muted" style="font-size:11px; line-height:1.2;">
            <i class="ti ti-user-edit"></i>
           Creado / Actualizado por: <strong> ${p.admin ?? 'Sin registro'} </strong>
        </div>
        `
      }
    },
    eventClick: function(info) {
      info.jsEvent.preventDefault();
      const e = info.event;
      const p = e.extendedProps || {};
      const cal = info.view.calendar; // dentro de eventClick(info)
      const texto = cal.formatDate(info.event.start, {
        locale: 'es',
        weekday: 'long', day: '2-digit', month: 'short',
        hour: '2-digit', minute: '2-digit', hour12: true
      });
      // Mostrar datos en el modal
      document.getElementById('m-paciente').textContent = e.title || '-';
      document.getElementById('m-tipo').textContent = p.tipo || '-';
      document.getElementById('m-doctor').textContent = p.doctor || '-';
      const sucursalEl = document.getElementById('m-sucursal');

      if (p.sucursal) {

          sucursalEl.innerHTML = `
              <span
                  class="badge"
                  style="
                      background-color:${p.sucursal_color};
                      color:#fff;
                      font-size:13px;
                  "
              >
                  <i class="ti ti-map-pin me-1"></i>
                  ${p.sucursal}
              </span>
          `;

      } else {

          sucursalEl.textContent = '-';
      }
      document.getElementById('m-fecha').textContent = texto;
      document.getElementById('m-expediente').textContent = p.expediente || '-';
      document.getElementById('m-desc').textContent = p.descripcion || '-';
      document.getElementById('m-admin').textContent = p.admin || '-';
      document.getElementById('m-updated').textContent = p.ultima_modificacion || '-';
      document.getElementById('m-desc-wrap').style.display = p.descripcion ? 'block' : 'none';

      // Estado visual
      const statusMap = {
        '3': { text: 'Atendida', cls: 'bg-success text-white' },
        '1': { text: 'Pendiente', cls: 'bg-info text-white' },
        '2': { text: 'Confirmada', cls: 'bg-primary text-white' },
        '4': { text: 'Cancelada', cls: 'bg-danger text-white' }
      };
      const st = statusMap[String(p.status)] || null;
      const statusEl = document.getElementById('m-status');
      const wrapEl = document.getElementById('m-status-wrap');

      if (st) {
        statusEl.textContent = st.text;
        statusEl.className = 'badge ' + st.cls;
        wrapEl.style.display = 'block';
      } else {
        wrapEl.style.display = 'none';
      }

      // WhatsApp link
      if (p.telefono) {
        const tel = p.telefono.replace(/[^\d]/g, '');
        const wa = `https://wa.me/52${tel}`;
        const btn = document.getElementById('btn-whats');
        btn.href = wa;
        btn.classList.remove('d-none');
      }

      // Mostrar modal
      const modal = new bootstrap.Modal(document.getElementById('citaModal'));
      modal.show();
    }

  })

  calendar.render()
  function actualizarModoPaciente() {
      const nuevo = modoNuevo.checked;

      bloqueExistente.classList.toggle('d-none', nuevo);
      bloqueNuevo.classList.toggle('d-none', !nuevo);

      if (nuevo) {
          inputPacienteId.value = '';
          pacienteSeleccionado.classList.add('d-none');
      }
  }

  modoExistente.addEventListener('change', actualizarModoPaciente);
  modoNuevo.addEventListener('change', actualizarModoPaciente);

  actualizarModoPaciente();
  buscarPaciente.addEventListener('input', function () {

    clearTimeout(timerPaciente);

    const term = this.value.trim();

    if (term.length < 2) {
        resultadosPacientes.innerHTML = '';
        return;
    }

    timerPaciente = setTimeout(async () => {

        try {

            const response = await fetch(
                `/resultados/api/pacientes/buscar?q=${encodeURIComponent(term)}`
            );

            const pacientes = await response.json();

            resultadosPacientes.innerHTML = '';

            if (!pacientes.length) {

                resultadosPacientes.innerHTML = `
                    <div class="list-group-item text-muted">
                        No se encontraron pacientes.
                        Puede registrarlo como paciente nuevo.
                    </div>
                `;

                return;
            }

            pacientes.forEach(p => {

                const item = document.createElement('button');

                item.type = 'button';
                item.className = 'list-group-item list-group-item-action';

                item.innerHTML = `
                    <div class="fw-bold">
                        ${p.nombre}
                    </div>

                    <small class="text-muted">
                        Expediente: ${p.expediente || '-'}
                        ·
                        Tel: ${p.telefono || '-'}
                    </small>
                `;

                item.addEventListener('click', () => {

                    inputPacienteId.value = p.id;

                    buscarPaciente.value = p.nombre;

                    resultadosPacientes.innerHTML = '';

                    pacienteSeleccionado.innerHTML = `
                        <i class="ti ti-circle-check me-1"></i>
                        <strong>${p.nombre}</strong><br>
                        <small>
                            Expediente: ${p.expediente || '-'}
                            ·
                            Teléfono: ${p.telefono || '-'}
                        </small>
                    `;

                    pacienteSeleccionado.classList.remove('d-none');
                });

                resultadosPacientes.appendChild(item);
            });

        } catch (error) {

            console.error(error);

            resultadosPacientes.innerHTML = `
                <div class="list-group-item text-danger">
                    No se pudo buscar pacientes.
                </div>
            `;
        }

    }, 350);
});
const formNuevaCita = document.getElementById('formNuevaCita');
const btnGuardarNuevaCita = document.getElementById('btnGuardarNuevaCita');
const alertNuevaCita = document.getElementById('alertNuevaCita');

formNuevaCita.addEventListener('submit', async function(e) {

    e.preventDefault();

    alertNuevaCita.classList.add('d-none');
    alertNuevaCita.innerHTML = '';

    const formData = new FormData(formNuevaCita);

    btnGuardarNuevaCita.disabled = true;

    btnGuardarNuevaCita.innerHTML = `
        <span
            class="spinner-border spinner-border-sm me-1"
        ></span>
        Agendando...
    `;

    try {

        const response = await fetch(guardarCitaUrl, {
            method: 'POST',
            headers: {
                'Accept': 'application/json',
            },
            body: formData
        });

        const result = await response.json();

        if (!response.ok) {

            let mensajes = [];

            if (result.errors) {

                Object.values(result.errors).forEach(errors => {
                    errors.forEach(error => {
                        mensajes.push(error);
                    });
                });

            } else {
                mensajes.push(
                    result.message || 'No se pudo crear la consulta.'
                );
            }

            alertNuevaCita.innerHTML = mensajes
                .map(m => `<div>${m}</div>`)
                .join('');

            alertNuevaCita.classList.remove('d-none');

            return;
        }

        /*
         * Cerrar modal
         */
        const modalElement = document.getElementById('nuevaCitaModal');

        const modal = bootstrap.Modal.getInstance(modalElement);

        modal.hide();

        /*
         * Limpiar formulario
         */
        formNuevaCita.reset();

        inputPacienteId.value = '';

        resultadosPacientes.innerHTML = '';

        pacienteSeleccionado.classList.add('d-none');

        actualizarModoPaciente();

        /*
         * Recargar citas
         */
        const citasResponse = await fetch(
            `/resultados/api/doctor/{{ $doctor->idDoctor }}/citas`
        );

        const nuevasCitas = await citasResponse.json();

        calendar.removeAllEvents();

        calendar.addEventSource(nuevasCitas);

    } catch (error) {

        console.error(error);

        alertNuevaCita.innerHTML =
            'Ocurrió un error al comunicarse con el servidor.';

        alertNuevaCita.classList.remove('d-none');

    } finally {

        btnGuardarNuevaCita.disabled = false;

        btnGuardarNuevaCita.innerHTML = `
            <i class="ti ti-calendar-plus me-1"></i>
            Agendar consulta
        `;
    }
});
const pacienteTelefono =
    document.getElementById('pacienteTelefono');

pacienteTelefono.addEventListener('input', function() {

    this.value = this.value
        .replace(/\D/g, '')
        .slice(0, 10);
});

const nuevaCitaModal = document.getElementById('nuevaCitaModal');

nuevaCitaModal.addEventListener('show.bs.modal', function () {

    const inputFecha = document.getElementById('nuevaFecha');
    const inputInicio = document.getElementById('nuevaHoraInicio');
    const inputFin = document.getElementById('nuevaHoraFin');

    // Si ya tiene fecha/hora porque se abrió desde el calendario,
    // no sobreescribirla.
    if (inputFecha.value && inputInicio.value && inputFin.value) {
        return;
    }

    const ahora = new Date();

    // Fecha actual
    const year = ahora.getFullYear();
    const month = String(ahora.getMonth() + 1).padStart(2, '0');
    const day = String(ahora.getDate()).padStart(2, '0');

    inputFecha.value = `${year}-${month}-${day}`;

    // Redondear SIEMPRE hacia el siguiente bloque de 30 minutos
    let hora = ahora.getHours();
    let minutos = ahora.getMinutes();

    if (minutos === 0 || minutos === 30) {
        // ya está en bloque cerrado
    } else if (minutos < 30) {
        minutos = 30;
    } else {
        hora += 1;
        minutos = 0;
    }

    // Manejar cambio de día si fueran las 23:xx
    if (hora >= 24) {
        hora = 0;

        const manana = new Date(ahora);
        manana.setDate(manana.getDate() + 1);

        const y = manana.getFullYear();
        const m = String(manana.getMonth() + 1).padStart(2, '0');
        const d = String(manana.getDate()).padStart(2, '0');

        inputFecha.value = `${y}-${m}-${d}`;
    }

    const inicio = new Date();
    inicio.setHours(hora, minutos, 0, 0);

    const fin = new Date(inicio.getTime() + 30 * 60 * 1000);

    const formatearHora = fecha =>
        String(fecha.getHours()).padStart(2, '0') +
        ':' +
        String(fecha.getMinutes()).padStart(2, '0');

    inputInicio.value = formatearHora(inicio);
    inputFin.value = formatearHora(fin);
});


// ==========================================
// AL CAMBIAR HORA INICIO → SUMAR 30 MINUTOS
// ==========================================

const inputHoraInicio = document.getElementById('nuevaHoraInicio');
const inputHoraFin = document.getElementById('nuevaHoraFin');

inputHoraInicio.addEventListener('change', function () {

    if (!inputHoraInicio.value) {
        return;
    }

    const [hora, minuto] = inputHoraInicio.value
        .split(':')
        .map(Number);

    const inicio = new Date();
    inicio.setHours(hora, minuto, 0, 0);

    const fin = new Date(
        inicio.getTime() + 30 * 60 * 1000
    );

    inputHoraFin.value =
        String(fin.getHours()).padStart(2, '0') +
        ':' +
        String(fin.getMinutes()).padStart(2, '0');
});

})
</script>

<style>
  .fc {
    background: #fff;
    border-radius: 12px;
    padding: 10px;
    box-shadow: 0 0 8px rgba(0,0,0,0.05);
  }
  .fc-toolbar-title { color: #2E57B7; font-weight: 700; }
</style>
@endsection