{% extends "base_dashboard.html" %}
{% load static %}

{% block title %}Excepciones de Horario{% endblock %}

{% block content %}
<div class="flex flex-col lg:flex-row justify-between items-start lg:items-end gap-6 mb-10 lg:mb-16 reveal page-header">
    <div>
        <span class="text-primary text-[10px] uppercase font-black tracking-[0.4em] mb-4 block">Personalización Avanzada</span>
        <h1 class="text-4xl lg:text-6xl leading-tight">Excepciones.</h1>
    </div>
    <button onclick="openDrawer()" class="bg-primary text-white px-8 lg:px-10 py-4 lg:py-5 rounded-sm font-black text-xs uppercase tracking-[0.2em] hover:bg-primary-dark transition-all shadow-lift flex items-center gap-3 w-full lg:w-auto justify-center">
        <i data-lucide="plus" class="w-4 h-4"></i>
        Nueva Excepción
    </button>
</div>

<!-- Tabla de Excepciones -->
<div class="reveal mt-6 lg:mt-10">
    <div class="bg-white border border-accent/20 rounded-sm overflow-hidden shadow-premium">
        <table class="w-full text-left exceptions-table">
            <thead>
                <tr class="border-b border-accent/10 bg-surface/30">
                    <th class="px-4 lg:px-8 py-4 lg:py-6 text-[10px] font-black uppercase tracking-[0.2em] text-body-text/50 desktop-only">Fecha</th>
                    <th class="px-4 lg:px-8 py-4 lg:py-6 text-[10px] font-black uppercase tracking-[0.2em] text-body-text/50 text-center desktop-only">Horario</th>
                    <th class="px-4 lg:px-8 py-4 lg:py-6 text-[10px] font-black uppercase tracking-[0.2em] text-body-text/50 text-right">Acciones</th>
                </tr>
            </thead>
            <tbody id="exceptionTableBody">
                {% for item in exceptions %}
                <tr class="hover:bg-surface/30 transition-colors border-b border-accent/5 last:border-0" id="row-{{ item.id }}">
                    <td class="px-4 lg:px-8 py-4 lg:py-6" data-label="Fecha">
                        <div class="flex items-center gap-3">
                            <div class="w-10 h-10 rounded-full bg-primary/5 flex flex-col items-center justify-center text-primary leading-none shrink-0">
                                <span class="text-[10px] font-black uppercase">{{ item.date|date:"M" }}</span>
                                <span class="text-lg font-black">{{ item.date|date:"d" }}</span>
                            </div>
                            <div>
                                <span class="text-sm font-black uppercase tracking-tightest text-on-surface">{{ item.date|date:"l, Y" }}</span>
                                <span class="text-[9px] font-bold text-body-text/40 uppercase tracking-widest block lg:hidden">
                                    {% if item.resource %}{{ item.resource.name }}{% else %}Todo el equipo{% endif %}
                                </span>
                            </div>
                        </div>
                    </td>
                    <td class="px-4 lg:px-8 py-4 lg:py-6 text-center" data-label="Horario">
                        {% if item.is_available %}
                        <div class="flex flex-col items-center">
                            <span class="px-2 py-0.5 bg-green-50 text-green-700 text-[8px] font-black uppercase tracking-widest rounded-sm border border-green-100 mb-1">Disponible</span>
                            <div class="text-[10px] font-bold text-primary flex items-center gap-1">
                                <span>{{ item.start_time|time:"H:i" }}</span>
                                <span class="text-accent">—</span>
                                <span>{{ item.end_time|time:"H:i" }}</span>
                            </div>
                        </div>
                        {% else %}
                        <span class="px-3 py-1 bg-red-50 text-red-700 text-[9px] font-black uppercase tracking-widest rounded-sm border border-red-100">Cerrado</span>
                        {% endif %}
                    </td>
                    <td class="px-4 lg:px-8 py-4 lg:py-6 text-right">
                        <div class="flex justify-end gap-2 lg:gap-3">
                            <button onclick="editException({{ item.id }})" class="p-2 hover:bg-primary/10 rounded-sm transition-colors text-primary" title="Editar">
                                <i data-lucide="edit-3" class="w-4 h-4"></i>
                            </button>
                            <button onclick="confirmDelete({{ item.id }})" class="p-2 hover:bg-red-50 rounded-sm transition-colors text-red-500" title="Eliminar">
                                <i data-lucide="trash-2" class="w-4 h-4"></i>
                            </button>
                        </div>
                    </td>
                </tr>
                {% empty %}
                <tr>
                    <td colspan="5" class="px-8 py-32 text-center bg-white">
                        <i data-lucide="star-off" class="w-12 h-12 mx-auto mb-6 text-accent/50"></i>
                        <p class="text-sm font-medium text-body-text/40 uppercase tracking-widest mb-6">No hay excepciones de horario.</p>
                        <button onclick="openDrawer()" class="text-xs font-black uppercase tracking-tightest text-primary hover:underline">Agregar excepción &rarr;</button>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>

<!-- Drawer / Panel Lateral -->
<div id="exceptionDrawer" class="fixed inset-0 z-[100] invisible overflow-hidden">
    <div id="drawerOverlay" class="absolute inset-0 bg-black/20 backdrop-blur-sm opacity-0 transition-opacity duration-300 pointer-events-none" onclick="closeDrawer()"></div>
    
    <div id="drawerPanel" class="absolute right-0 top-0 h-full w-full max-w-md bg-white shadow-2xl translate-x-full transition-transform duration-300 flex flex-col">
        <div class="p-10 border-b border-accent/10 flex justify-between items-center bg-surface/30">
            <h2 id="drawerTitle" class="text-xl font-black uppercase tracking-tighter">Gestionar Excepción</h2>
            <button onclick="closeDrawer()" class="p-2 hover:bg-accent/10 rounded-full transition-colors">
                <i data-lucide="x" class="w-6 h-6"></i>
            </button>
        </div>
        
        <form id="exceptionForm" class="flex-1 overflow-y-auto p-10 space-y-8">
            {% csrf_token %}
            <input type="hidden" id="item_id" name="id">
            
            <div>
                <label>Profesional afectado (Opcional)</label>
                <select name="resource" id="id_resource" class="w-full px-4 py-3 bg-white border border-accent/30 rounded-sm focus:border-primary focus:ring-1 focus:ring-primary outline-none transition-all font-medium text-sm">
                    <option value="">Todo el equipo</option>
                    {% for res in form.resource.field.queryset %}
                    <option value="{{ res.id }}">{{ res.name }}</option>
                    {% endfor %}
                </select>
            </div>

            <div class="grid grid-cols-2 gap-6">
                <div class="col-span-2">
                    <label>Fecha del cambio *</label>
                    <input type="date" name="date" id="id_date" required 
                           class="w-full px-4 py-3 bg-white border border-accent/30 rounded-sm focus:border-primary focus:ring-1 focus:ring-primary outline-none transition-all font-medium text-sm">
                </div>
            </div>

            <div class="p-5 bg-surface/50 rounded-sm border border-accent/20">
                <p class="text-[10px] font-black uppercase tracking-widest mb-4">¿Estarán disponibles en esta fecha?</p>
                <div class="flex gap-6">
                    <label class="flex items-center gap-2 cursor-pointer">
                        <input type="radio" name="is_available" value="True" checked onchange="toggleTimeFields()" class="w-4 h-4 accent-primary">
                        <span class="text-xs font-black uppercase">Sí, disponible</span>
                    </label>
                    <label class="flex items-center gap-2 cursor-pointer">
                        <input type="radio" name="is_available" value="False" onchange="toggleTimeFields()" class="w-4 h-4 accent-primary">
                        <span class="text-xs font-black uppercase">No, cerrado</span>
                    </label>
                </div>
            </div>

            <div id="timeFields" class="grid grid-cols-2 gap-6 transition-all duration-300">
                <div>
                    <label>Hora Inicio *</label>
                    <input type="time" name="start_time" id="id_start_time" 
                           class="w-full px-4 py-3 bg-white border border-accent/30 rounded-sm focus:border-primary focus:ring-1 focus:ring-primary outline-none transition-all font-medium text-sm">
                </div>
                <div>
                    <label>Hora Fin *</label>
                    <input type="time" name="end_time" id="id_end_time" 
                           class="w-full px-4 py-3 bg-white border border-accent/30 rounded-sm focus:border-primary focus:ring-1 focus:ring-primary outline-none transition-all font-medium text-sm">
                </div>
            </div>

            <div>
                <label>Motivo</label>
                <input type="text" name="reason" id="id_reason" placeholder="ej: Horario extendido, Trámite Notarial..."
                       class="w-full px-4 py-3 bg-white border border-accent/30 rounded-sm focus:border-primary focus:ring-1 focus:ring-primary outline-none transition-all font-medium text-sm">
            </div>

            <div id="formErrors" class="hidden p-4 bg-red-50 text-red-600 border border-red-100 rounded-sm text-xs font-bold uppercase tracking-tighter"></div>
        </form>

        <div class="p-10 border-t border-accent/10 flex gap-4 bg-white/50 backdrop-blur-md">
            <button type="button" onclick="closeDrawer()" class="flex-1 px-8 py-5 border border-accent/20 rounded-sm font-black text-xs uppercase tracking-[0.2em] hover:bg-surface transition-all">Cancelar</button>
            <button type="button" onclick="saveException()" class="flex-1 bg-primary text-white px-8 py-5 rounded-sm font-black text-xs uppercase tracking-[0.2em] hover:bg-primary-dark transition-all shadow-lift">Guardar Excepción</button>
        </div>
    </div>
</div>

<!-- Modal de Confirmación -->
<div id="deleteModal" class="fixed inset-0 z-[110] invisible flex items-center justify-center p-6">
    <div class="absolute inset-0 bg-black/40 backdrop-blur-md opacity-0 transition-opacity duration-300" onclick="hideDeleteModal()"></div>
    <div class="relative w-full max-w-sm bg-white rounded-sm shadow-2xl p-10 translate-y-8 opacity-0 transition-all duration-300 text-center">
        <div class="w-20 h-20 bg-red-50 text-red-500 rounded-full flex items-center justify-center mx-auto mb-8">
            <i data-lucide="trash-2" class="w-10 h-10"></i>
        </div>
        <h3 class="text-2xl font-black uppercase tracking-tighter mb-4">¿Eliminar excepción?</h3>
        <p class="text-sm font-medium text-body-text/60 mb-10">Este día volverá a su configuración de horario habitual.</p>
        <div class="flex gap-4">
            <button onclick="hideDeleteModal()" class="flex-1 px-4 py-4 border border-accent/20 rounded-sm font-black text-[10px] uppercase tracking-widest hover:bg-surface transition-all">Cancelar</button>
            <button id="confirmDeleteBtn" class="flex-1 bg-red-500 text-white px-4 py-4 rounded-sm font-black text-[10px] uppercase tracking-widest hover:bg-red-600 transition-all shadow-md">Eliminar</button>
        </div>
    </div>
</div>

<div id="toast" class="fixed bottom-10 left-1/2 -translate-x-1/2 z-[200] px-8 py-4 bg-primary text-white rounded-full font-black text-[10px] uppercase tracking-widest shadow-2xl translate-y-20 opacity-0 transition-all duration-500 pointer-events-none">
    Excepción actualizada correctamente
</div>
{% endblock %}

{% block extra_js %}
<script>
    function openDrawer(isEdit = false) {
        document.getElementById('exceptionDrawer').classList.remove('invisible');
        setTimeout(() => {
            document.getElementById('drawerOverlay').classList.add('opacity-100');
            document.getElementById('drawerPanel').classList.remove('translate-x-full');
        }, 10);
        
        if (!isEdit) {
            document.getElementById('exceptionForm').reset();
            document.getElementById('item_id').value = '';
            document.getElementById('drawerTitle').innerText = 'Nueva Excepción';
            toggleTimeFields();
        }
    }

    function closeDrawer() {
        document.getElementById('drawerOverlay').classList.remove('opacity-100');
        document.getElementById('drawerPanel').classList.add('translate-x-full');
        setTimeout(() => {
            document.getElementById('exceptionDrawer').classList.add('invisible');
            document.getElementById('formErrors').classList.add('hidden');
        }, 300);
    }

    function toggleTimeFields() {
        const isAvailable = document.querySelector('input[name="is_available"]:checked').value === 'True';
        const fields = document.getElementById('timeFields');
        if (isAvailable) {
            fields.classList.remove('opacity-30', 'pointer-events-none');
            document.getElementById('id_start_time').required = true;
            document.getElementById('id_end_time').required = true;
        } else {
            fields.classList.add('opacity-30', 'pointer-events-none');
            document.getElementById('id_start_time').required = false;
            document.getElementById('id_end_time').required = false;
        }
    }

    function editException(id) {
        fetch(`/settings/exceptions/get/${id}/`)
            .then(r => r.json())
            .then(data => {
                document.getElementById('item_id').value = data.id;
                document.getElementById('id_date').value = data.date;
                document.getElementById('id_resource').value = data.resource_id || '';
                document.querySelector(`input[name="is_available"][value="${data.is_available ? 'True' : 'False'}"]`).checked = true;
                document.getElementById('id_start_time').value = data.start_time;
                document.getElementById('id_end_time').value = data.end_time;
                document.getElementById('id_reason').value = data.reason;
                
                document.getElementById('drawerTitle').innerText = 'Editar Excepción';
                openDrawer(true);
                toggleTimeFields();
            });
    }

    function saveException() {
        const id = document.getElementById('item_id').value;
        const url = id ? `/settings/exceptions/update/${id}/` : '{% url "exception_create" %}';
        const form = document.getElementById('exceptionForm');
        const formData = new FormData(form);

        fetch(url, {
            method: 'POST',
            body: formData,
            headers: { 'X-CSRFToken': '{{ csrf_token }}' }
        })
        .then(r => r.json().then(data => ({ status: r.status, ok: r.ok, data })))
        .then(({ ok, data }) => {
            if (ok) {
                showToast(data.message);
                closeDrawer();
                setTimeout(() => location.reload(), 800);
            } else {
                let errorMsg = data.error || 'Error al guardar.';
                if (data.errors) {
                    errorMsg = Object.entries(data.errors).map(([field, errors]) => 
                        `${field.toUpperCase()}: ${errors.join(', ')}`
                    ).join('<br>');
                }
                document.getElementById('formErrors').innerHTML = errorMsg;
                document.getElementById('formErrors').classList.remove('hidden');
            }
        });
    }

    function confirmDelete(id) {
        document.getElementById('deleteModal').classList.remove('invisible');
        setTimeout(() => {
            document.getElementById('deleteModal').querySelector('div').classList.add('opacity-100');
            document.getElementById('deleteModal').querySelector('.relative').classList.add('opacity-100', 'translate-y-0');
            document.getElementById('deleteModal').querySelector('.relative').classList.remove('translate-y-8');
        }, 10);
        
        document.getElementById('confirmDeleteBtn').onclick = () => {
            fetch(`/settings/exceptions/delete/${id}/`, {
                method: 'POST',
                headers: { 'X-CSRFToken': '{{ csrf_token }}' }
            }).then(r => r.json()).then(data => {
                if (data.success) {
                    hideDeleteModal();
                    document.getElementById(`row-${id}`).remove();
                    showToast(data.message);
                }
            });
        };
    }

    function hideDeleteModal() {
        const modal = document.getElementById('deleteModal');
        modal.querySelector('div').classList.remove('opacity-100');
        modal.querySelector('.relative').classList.remove('opacity-100', 'translate-y-0');
        modal.querySelector('.relative').classList.add('translate-y-8');
        setTimeout(() => modal.classList.add('invisible'), 300);
    }

    function showToast(msg) {
        const toast = document.getElementById('toast');
        toast.innerText = msg;
        toast.classList.remove('translate-y-20', 'opacity-0');
        setTimeout(() => toast.classList.add('translate-y-20', 'opacity-0'), 3000);
    }
</script>
{% endblock %}