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

{% block title %}Vacaciones y Bloqueos de Agenda - Citalis{% 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">Gestión de Agenda</span>
        <h1 class="text-4xl lg:text-6xl leading-tight">Vacaciones.</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>
        Nuevo Periodo
    </button>
</div>

<!-- Tabla de Días Bloqueados -->
<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 blocked-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">Periodo</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">Estado</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="blockedTableBody">
                {% for item in days %}
                <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="Periodo">
                        <div class="flex items-center gap-3">
                            <div class="w-10 h-10 rounded-full bg-accent/5 flex flex-col items-center justify-center text-accent leading-none shrink-0">
                                <i data-lucide="calendar" class="w-4 h-4"></i>
                            </div>
                            <div class="flex flex-col">
                                <span class="text-sm font-black uppercase tracking-tight text-on-surface">
                                    {{ item.start_date|date:"d M" }} - {{ item.end_date|date:"d M, Y" }}
                                </span>
                                <span class="text-[9px] font-bold text-body-text/30 uppercase tracking-widest mt-1">
                                    {% 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="Estado">
                        {% if item.is_active %}
                        <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">Bloqueo Activo</span>
                        {% else %}
                        <span class="px-3 py-1 bg-gray-50 text-gray-400 text-[9px] font-black uppercase tracking-widest rounded-sm">Inactivo</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="editBlockedDay({{ 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="tree-palm" 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 has bloqueado ningún periodo aún.</p>
                        <button onclick="openDrawer()" class="text-xs font-black uppercase tracking-tightest text-primary hover:underline">Bloquear vacaciones o periodos de cierre &rarr;</button>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>

<!-- Drawer / Panel Lateral -->
<div id="blockedDrawer" 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 Periodo</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="blockedForm" class="flex-1 overflow-y-auto p-10 space-y-8">
            {% csrf_token %}
            <input type="hidden" id="item_id" name="id">
            
            <div>
                <label>¿A quién afecta el bloqueo? (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 resources %}
                    <option value="{{ res.id }}">{{ res.name }}</option>
                    {% endfor %}
                </select>
                <p class="text-[9px] text-body-text/40 mt-2 uppercase font-bold tracking-widest italic">Si no seleccionas un profesional, el bloqueo se aplicará a todo el negocio.</p>
            </div>

            <div class="grid grid-cols-2 gap-6">
                <div>
                    <label>Desde *</label>
                    <input type="date" name="start_date" id="id_start_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>
                    <label>Hasta *</label>
                    <input type="date" name="end_date" id="id_end_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>
                <label>Motivo</label>
                <input type="text" name="reason" id="id_reason" placeholder="ej: Vacaciones de Invierno, Licencia Médica..."
                       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">
                <p class="text-[9px] text-body-text/30 mt-2 uppercase font-bold tracking-widest italic">Este texto será visible para los clientes en la agenda pública.</p>
            </div>

            <div class="flex items-center gap-4 py-4 p-5 bg-surface/50 rounded-sm border border-accent/20">
                <input type="checkbox" name="is_active" id="id_is_active" checked class="w-5 h-5 accent-primary">
                <div>
                    <label for="id_is_active" class="text-xs font-black uppercase tracking-tighter block">Habilitar Bloqueo</label>
                    <p class="text-[9px] text-body-text/40 font-bold uppercase tracking-widest">Nadie podrá reservar citas en este rango de fechas.</p>
                </div>
            </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" id="saveBtn" onclick="saveBlockedDay()" 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 Periodo</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-green-50 text-green-500 rounded-full flex items-center justify-center mx-auto mb-8">
            <i data-lucide="unlock" class="w-10 h-10"></i>
        </div>
        <h3 class="text-2xl font-black uppercase tracking-tighter mb-4">¿Desbloquear estas fechas?</h3>
        <p class="text-sm font-medium text-body-text/60 mb-10">El periodo volverá a estar disponible para reservas según el horario normal.</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-primary text-white px-4 py-4 rounded-sm font-black text-[10px] uppercase tracking-widest hover:bg-primary-dark transition-all shadow-md">Confirmar</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">
    Periodo actualizado correctamente
</div>
{% endblock %}

{% block extra_js %}
<script>
    function openDrawer(isEdit = false) {
        document.getElementById('blockedDrawer').classList.remove('invisible');
        setTimeout(() => {
            document.getElementById('drawerOverlay').classList.add('opacity-100');
            document.getElementById('drawerPanel').classList.remove('translate-x-full');
        }, 10);
        
        if (!isEdit) {
            document.getElementById('blockedForm').reset();
            document.getElementById('item_id').value = '';
            document.getElementById('drawerTitle').innerText = 'Agregar Periodo';
        }
    }

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

    function editBlockedDay(id) {
        fetch(`/settings/blocked-days/get/${id}/`)
            .then(r => r.json())
            .then(data => {
                document.getElementById('item_id').value = data.id;
                document.getElementById('id_resource').value = data.resource_id;
                document.getElementById('id_start_date').value = data.start_date;
                document.getElementById('id_end_date').value = data.end_date;
                document.getElementById('id_reason').value = data.reason;
                document.getElementById('id_is_active').checked = data.is_active;
                
                document.getElementById('drawerTitle').innerText = 'Editar Periodo';
                openDrawer(true);
            });
    }

    function saveBlockedDay() {
        const id = document.getElementById('item_id').value;
        const url = id ? `/settings/blocked-days/update/${id}/` : '{% url "blocked_day_create" %}';
        const form = document.getElementById('blockedForm');
        const formData = new FormData(form);
        const saveBtn = document.getElementById('saveBtn');

        saveBtn.disabled = true;
        saveBtn.innerText = 'Guardando...';

        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(id ? 'Periodo actualizado correctamente' : 'Periodo creado correctamente');
                closeDrawer();
                setTimeout(() => location.reload(), 800);
            } else {
                saveBtn.disabled = false;
                saveBtn.innerText = 'Guardar Periodo';
                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/blocked-days/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);
    }

    lucide.createIcons();
</script>
{% endblock %}