{% extends "base.html" %}
{% set active = "agenda" %}
{% block title %}Agenda · ArcaBeauty Club{% endblock %}

{% block extra_css %}
<style>
.agenda-toolbar { display:flex; align-items:center; gap:14px; margin-bottom:18px; flex-wrap:wrap; }
.agenda-toolbar input[type=date] { max-width:180px; }
.agenda-wrap { overflow-x:auto; }
.agenda-grid {
    display: grid;
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    overflow: hidden;
    background: var(--blanco);
    min-width: 760px;
}
.agenda-head {
    padding: 12px 10px;
    background: var(--crema-oscuro);
    font-size: 13px;
    font-weight: 600;
    color: var(--ciruela);
    border-bottom: 1px solid var(--linea);
    border-right: 1px solid var(--linea);
    text-align: center;
    position: sticky; top:0;
}
.time-label {
    padding: 0 10px;
    font-size: 11px;
    color: var(--tinta-suave);
    border-right: 1px solid var(--linea);
    border-top: 1px solid var(--crema-oscuro);
    display:flex; align-items:flex-start; justify-content:flex-end; padding-top:4px;
}
.slot-cell {
    border-top: 1px solid var(--crema-oscuro);
    border-right: 1px solid var(--linea);
    position: relative;
    min-height: 30px;
    transition: background 0.1s ease;
}
.slot-cell:hover { background: var(--crema-oscuro); cursor: pointer; }
.cita-block {
    position: absolute;
    left: 3px; right: 3px; top: 2px; bottom: 2px;
    border-radius: 7px;
    padding: 5px 8px;
    font-size: 12px;
    color: white;
    overflow: hidden;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
    z-index: 2;
    line-height: 1.3;
}
.cita-block.cancelada { opacity: 0.45; text-decoration: line-through; }
.cita-block .hora { font-weight: 700; }
.cita-block .origen-tag { font-size: 10px; opacity: 0.85; }
.legend { display:flex; gap:14px; margin-top:14px; flex-wrap:wrap; }
.legend-item { display:flex; align-items:center; gap:6px; font-size:12px; color:var(--tinta-suave); }
.legend-dot { width:10px; height:10px; border-radius:50%; display:inline-block; }
</style>
{% endblock %}

{% block content %}
<div class="topbar">
    <div>
        <div class="eyebrow">Operación</div>
        <h1>Agenda</h1>
    </div>
    <button class="btn accent" onclick="abrirModalNuevaCita()">+ Nueva cita</button>
</div>

<div class="agenda-toolbar">
    <button class="btn ghost sm" onclick="cambiarDia(-1)">&larr; Anterior</button>
    <input type="date" id="fechaAgenda" value="{{ '' }}">
    <button class="btn ghost sm" onclick="cambiarDia(1)">Siguiente &rarr;</button>
    <button class="btn secondary sm" onclick="irHoy()">Hoy</button>
</div>

<div class="agenda-wrap">
    <div id="agendaGrid" class="agenda-grid"></div>
</div>

<div class="legend">
    {% for e in empleados %}
    <div class="legend-item"><span class="legend-dot" style="background:{{ e.color }}"></span>{{ e.nombre }}</div>
    {% endfor %}
</div>

<!-- Modal nueva cita -->
<div class="modal-backdrop" id="modalCita">
    <div class="modal">
        <button class="modal-close" onclick="cerrarModal()">&times;</button>
        <h2>Nueva cita</h2>
        <form id="formCita" onsubmit="guardarCita(event)">
            <div class="field">
                <label>Cliente</label>
                <input type="text" id="buscarCliente" placeholder="Buscar por nombre o teléfono..." autocomplete="off">
                <div id="resultadosCliente" style="margin-top:6px;"></div>
                <input type="hidden" id="clienteIdSel">
                <div id="clienteSeleccionado" style="font-size:13px; color:var(--salvia); margin-top:6px;"></div>
            </div>
            <div class="field">
                <label>Servicio</label>
                <select id="servicioSel" onchange="actualizarDisponibilidad()" required>
                    <option value="">Selecciona un servicio</option>
                    {% for s in servicios %}
                    <option value="{{ s.id }}" data-dur="{{ s.duracion_min }}">{{ s.nombre }} &middot; {{ s.duracion_min }} min &middot; ${{ "%.0f"|format(s.precio) }}</option>
                    {% endfor %}
                </select>
            </div>
            <div class="field">
                <label>Profesional</label>
                <select id="empleadoSel" onchange="actualizarDisponibilidad()" required>
                    <option value="">Selecciona un profesional</option>
                    {% for e in empleados %}
                    <option value="{{ e.id }}">{{ e.nombre }} &middot; {{ e.puesto }}</option>
                    {% endfor %}
                </select>
            </div>
            <div class="field">
                <label>Fecha</label>
                <input type="date" id="fechaSel" onchange="actualizarDisponibilidad()" required>
            </div>
            <div class="field">
                <label>Horario disponible</label>
                <select id="horaSel" required>
                    <option value="">Elige fecha, servicio y profesional primero</option>
                </select>
            </div>
            <div class="field">
                <label>Notas (opcional)</label>
                <textarea id="notasSel" rows="2"></textarea>
            </div>
            <button type="submit" class="btn accent" style="width:100%;">Confirmar cita</button>
        </form>
    </div>
</div>

<!-- Modal detalle cita -->
<div class="modal-backdrop" id="modalDetalle">
    <div class="modal">
        <button class="modal-close" onclick="cerrarModalDetalle()">&times;</button>
        <h2>Detalle de la cita</h2>
        <div id="detalleCitaBody"></div>
    </div>
</div>

{% endblock %}

{% block extra_js %}
<script>
const SUCURSAL = {
    apertura: "{{ sucursal.horario_apertura }}",
    cierre: "{{ sucursal.horario_cierre }}",
    intervalo: 30
};
const EMPLEADOS = [
    {% for e in empleados %}{ id: {{ e.id }}, nombre: "{{ e.nombre }}", color: "{{ e.color }}" },{% endfor %}
];
</script>
<script src="{{ url_for('static', filename='js/agenda.js') }}"></script>
{% endblock %}