{% extends "dashboard/base_dashboard.html" %}

{% block title %}Horários e Disponibilidade — Dra. Mariela{% endblock %}
{% block panel_title %}Gerir Horários{% endblock %}

{% block panel_content %}
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8">

    <!-- ============================================================ -->
    <!-- HORARIOS SEMANALES -->
    <!-- ============================================================ -->
    <div class="bg-white rounded-xl p-6 border border-gray-100 shadow-sm">
        <div class="flex items-center gap-3 mb-6">
            <div class="w-10 h-10 bg-rosa-bg rounded-xl flex items-center justify-center">
                <svg class="w-5 h-5 text-rosa" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
            </div>
            <div>
                <h2 class="font-poppins font-semibold text-dark text-lg">Horário Semanal</h2>
                <p class="text-gray-400 text-xs">Defina a sua disponibilidade para cada dia</p>
            </div>
        </div>

        <!-- Horarios actuales -->
        <div class="space-y-2 mb-6" id="horarios-lista">
            {% for h in horarios %}
            <div class="flex items-center justify-between p-3 bg-gris-bg rounded-lg">
                <div class="flex items-center gap-3">
                    <span class="w-8 h-8 bg-white rounded-lg flex items-center justify-center text-xs font-bold text-rosa shadow-sm">{{ h.get_dia_semana_display|truncatechars:3 }}</span>
                    <span class="text-sm font-medium text-dark">{{ h.get_dia_semana_display }}</span>
                </div>
                <span class="text-sm text-gray-500">{{ h.hora_inicio|time:"H:i" }} — {{ h.hora_fin|time:"H:i" }}</span>
            </div>
            {% empty %}
            <p class="text-gray-400 text-sm text-center py-4">Sem horários configurados.</p>
            {% endfor %}
        </div>

        <!-- Formulario agregar/editar horario -->
        <div class="border-t border-gray-100 pt-4">
            <h3 class="text-sm font-semibold text-dark mb-3">Adicionar / Atualizar Horário</h3>
            <div class="space-y-3">
                <div>
                    <select id="horario-dia" class="w-full px-4 py-3 border border-gray-200 rounded-xl focus:ring-2 focus:ring-rosa/20 focus:border-rosa outline-none text-sm">
                        <option value="">Selecione dia</option>
                        <option value="0">Segunda-feira</option>
                        <option value="1">Terça-feira</option>
                        <option value="2">Quarta-feira</option>
                        <option value="3">Quinta-feira</option>
                        <option value="4">Sexta-feira</option>
                        <option value="5">Sábado</option>
                        <option value="6">Domingo</option>
                    </select>
                </div>
                <div class="grid grid-cols-2 gap-3">
                    <div>
                        <label class="text-xs text-gray-500 mb-1 block">Hora início</label>
                        <input type="time" id="horario-inicio" value="08:00" class="w-full px-4 py-3 border border-gray-200 rounded-xl focus:ring-2 focus:ring-rosa/20 focus:border-rosa outline-none text-sm">
                    </div>
                    <div>
                        <label class="text-xs text-gray-500 mb-1 block">Hora fim</label>
                        <input type="time" id="horario-fin" value="17:00" class="w-full px-4 py-3 border border-gray-200 rounded-xl focus:ring-2 focus:ring-rosa/20 focus:border-rosa outline-none text-sm">
                    </div>
                </div>
                <button onclick="guardarHorario()" class="btn-dorado w-full py-3 bg-dorado text-white font-semibold rounded-[25px] shadow-md text-sm">
                    Guardar Horário
                </button>
            </div>
        </div>
    </div>

    <!-- ============================================================ -->
    <!-- BLOQUEO DE FECHAS -->
    <!-- ============================================================ -->
    <div class="bg-white rounded-xl p-6 border border-gray-100 shadow-sm">
        <div class="flex items-center gap-3 mb-6">
            <div class="w-10 h-10 bg-red-50 rounded-xl flex items-center justify-center">
                <svg class="w-5 h-5 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636"/></svg>
            </div>
            <div>
                <h2 class="font-poppins font-semibold text-dark text-lg">Bloquear Datas</h2>
                <p class="text-gray-400 text-xs">Férias, feriados ou dias sem atendimento</p>
            </div>
        </div>

        <!-- Fechas bloqueadas actuales -->
        <div class="space-y-2 mb-6" id="bloqueos-lista">
            {% for b in bloqueos %}
            <div class="flex items-center justify-between p-3 bg-red-50/50 rounded-lg">
                <div>
                    <span class="text-sm font-medium text-dark">{{ b.fecha|date:"d/m/Y" }}</span>
                    {% if b.motivo %}<span class="text-xs text-gray-400 ml-2">— {{ b.motivo }}</span>{% endif %}
                </div>
                <button onclick="desbloquearFecha('{{ b.id }}')" class="text-red-400 hover:text-red-600 transition-colors" title="Desbloquear">
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
                </button>
            </div>
            {% empty %}
            <p class="text-gray-400 text-sm text-center py-4">Sem datas bloqueadas.</p>
            {% endfor %}
        </div>

        <!-- Formulario bloquear fecha -->
        <div class="border-t border-gray-100 pt-4">
            <h3 class="text-sm font-semibold text-dark mb-3">Bloquear Nova Data</h3>
            <div class="space-y-3">
                <input type="date" id="bloqueo-fecha" class="w-full px-4 py-3 border border-gray-200 rounded-xl focus:ring-2 focus:ring-rosa/20 focus:border-rosa outline-none text-sm">
                <input type="text" id="bloqueo-motivo" placeholder="Motivo (opcional)" class="w-full px-4 py-3 border border-gray-200 rounded-xl focus:ring-2 focus:ring-rosa/20 focus:border-rosa outline-none text-sm">
                <button onclick="bloquearFecha()" class="w-full py-3 bg-red-500 text-white font-semibold rounded-[25px] shadow-md text-sm hover:bg-red-600 transition-colors">
                    Bloquear Data
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Link volver al calendario -->
<div class="mt-8 text-center">
    <a href="{% url 'appointments:calendario' %}" class="inline-flex items-center gap-2 text-rosa font-medium text-sm hover:underline">
        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"/></svg>
        Voltar ao Calendário
    </a>
</div>
{% endblock %}

{% block extra_js %}
<script>
(function() {
    'use strict';

    const CSRF = '{{ csrf_token }}';

    window.guardarHorario = function() {
        const dia = document.getElementById('horario-dia').value;
        const inicio = document.getElementById('horario-inicio').value;
        const fin = document.getElementById('horario-fin').value;

        if (!dia || !inicio || !fin) {
            alert('Preencha todos os campos.');
            return;
        }

        const formData = new FormData();
        formData.append('dia_semana', dia);
        formData.append('hora_inicio', inicio);
        formData.append('hora_fin', fin);

        fetch('{% url "appointments:guardar_horario" %}', {
            method: 'POST',
            headers: { 'X-CSRFToken': CSRF },
            body: formData,
            credentials: 'same-origin'
        })
        .then(r => r.json())
        .then(data => {
            if (data.success) {
                location.reload();
            } else {
                alert(data.error || 'Erro ao guardar.');
            }
        });
    };

    window.bloquearFecha = function() {
        const fecha = document.getElementById('bloqueo-fecha').value;
        const motivo = document.getElementById('bloqueo-motivo').value;

        if (!fecha) {
            alert('Selecione uma data.');
            return;
        }

        const formData = new FormData();
        formData.append('fecha', fecha);
        formData.append('motivo', motivo);

        fetch('{% url "appointments:bloquear_fecha" %}', {
            method: 'POST',
            headers: { 'X-CSRFToken': CSRF },
            body: formData,
            credentials: 'same-origin'
        })
        .then(r => r.json())
        .then(data => {
            if (data.success) {
                location.reload();
            } else {
                alert(data.error || 'Erro ao bloquear.');
            }
        });
    };

    window.desbloquearFecha = function(bloqueoId) {
        if (!confirm('Desbloquear esta data?')) return;

        fetch('/citas/horarios/desbloquear/' + bloqueoId + '/', {
            method: 'POST',
            headers: { 'X-CSRFToken': CSRF },
            credentials: 'same-origin'
        })
        .then(r => r.json())
        .then(data => {
            if (data.success) {
                location.reload();
            } else {
                alert(data.error || 'Erro ao desbloquear.');
            }
        });
    };
})();
</script>
{% endblock %}