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

{% block title %}Disponibilidad Horaria - 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">Configuración Horaria</span>
        <h1 class="text-4xl lg:text-6xl leading-tight">Horario Semanal.</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>
        Agregar Horario
    </button>
</div>

<!-- Tabla de Disponibilidad -->
<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 availability-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">Día</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-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="availabilityTableBody">
                {% for item in availability %}
                <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="Día">
                        <span class="text-sm font-black uppercase tracking-tightest">
                            {% if item.weekday == 1 %}Lunes
                            {% elif item.weekday == 2 %}Martes
                            {% elif item.weekday == 3 %}Miércoles
                            {% elif item.weekday == 4 %}Jueves
                            {% elif item.weekday == 5 %}Viernes
                            {% elif item.weekday == 6 %}Sábado
                            {% elif item.weekday == 0 %}Domingo
                            {% endif %}
                        </span>
                    </td>
                    <td class="px-4 lg:px-8 py-4 lg:py-6 text-center" data-label="Horario">
                        <div class="flex items-center justify-center gap-2 text-xs font-bold text-primary flex-wrap">
                            <span class="bg-primary/5 px-2 lg:px-3 py-1 rounded-sm">{{ item.start_time|time:"H:i" }}</span>
                            <span class="text-accent">—</span>
                            <span class="bg-primary/5 px-2 lg:px-3 py-1 rounded-sm">{{ item.end_time|time:"H:i" }}</span>
                            {% if item.break_start %}
                            <span class="text-[9px] font-bold text-accent uppercase tracking-widest ml-2">
                                <i data-lucide="coffee" class="w-3 h-3 inline"></i>
                                {{ item.break_start|time:"H:i" }}-{{ item.break_end|time:"H:i" }}
                            </span>
                            {% endif %}
                        </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-green-50 text-green-700 text-[9px] font-black uppercase tracking-widest rounded-sm border border-green-100">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="editAvailability({{ 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="calendar" 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">Aún no tienes horarios definidos para tu semana.</p>
                        <button onclick="openDrawer()" class="text-xs font-black uppercase tracking-tightest text-primary hover:underline">Agregar primer horario &rarr;</button>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>

<!-- Drawer / Panel Lateral para Crear/Editar -->
<div id="availabilityDrawer" class="fixed inset-0 z-[100] invisible overflow-hidden">
    <!-- Backdrop -->
    <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>
    
    <!-- Panel -->
    <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">Agregar Horario</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="availabilityForm" class="flex-1 overflow-y-auto p-10 space-y-8">
            {% csrf_token %}
            <input type="hidden" id="item_id" name="id">
            
            <div>
                <label>Día de la semana *</label>
                <select name="weekday" id="id_weekday" 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">
                    <option value="1">Lunes</option>
                    <option value="2">Martes</option>
                    <option value="3">Miércoles</option>
                    <option value="4">Jueves</option>
                    <option value="5">Viernes</option>
                    <option value="6">Sábado</option>
                    <option value="0">Domingo</option>
                </select>
            </div>

            <div class="space-y-4">
                <label class="text-[10px] font-black uppercase tracking-widest text-primary/60">Jornada Laboral</label>
                <div class="grid grid-cols-2 gap-6">
                    <div>
                        <label>Hora Inicio *</label>
                        <input type="time" name="start_time" id="id_start_time" 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>Hora Fin *</label>
                        <input type="time" name="end_time" id="id_end_time" 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>

            <div class="space-y-6 pt-6 border-t border-accent/10">
                <div class="flex items-center justify-between">
                    <label class="text-[10px] font-black uppercase tracking-widest text-accent/60 flex items-center gap-2">
                        <i data-lucide="coffee" class="w-3 h-3"></i> Horario de descanso
                    </label>
                    <label class="relative inline-flex items-center cursor-pointer">
                        <input type="checkbox" id="toggleBreak" class="sr-only peer" onchange="toggleBreakSection()">
                        <div class="w-9 h-5 bg-gray-200 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all peer-checked:bg-primary"></div>
                    </label>
                </div>

                <div id="breakFields" class="hidden grid grid-cols-2 gap-6 p-5 bg-accent/5 rounded-sm border border-accent/10 reveal">
                    <div>
                        <label>Inicio Descanso</label>
                        <input type="time" name="break_start" id="id_break_start"
                               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>Fin Descanso</label>
                        <input type="time" name="break_end" id="id_break_end"
                               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>
                    <p class="col-span-2 text-[9px] font-bold text-accent/40 uppercase tracking-widest">Ej: 13:00 a 14:00. Este periodo se bloqueará automáticamente.</p>
                </div>
            </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">Horario activo</label>
                    <p class="text-[9px] text-body-text/40 font-bold uppercase tracking-widest">Si está desactivado, no se podrán reservar citas en este bloque.</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" onclick="saveAvailability()" 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</button>
        </div>
    </div>
</div>

<!-- Modal de Confirmación de Borrado -->
<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="alert-triangle" class="w-10 h-10"></i>
        </div>
        <h3 class="text-2xl font-black uppercase tracking-tighter mb-4">¿Eliminar horario?</h3>
        <p class="text-sm font-medium text-body-text/60 mb-10">Estás por eliminar este bloque horario. Las citas ya reservadas no se verán afectadas, pero no se podrán realizar nuevas reservas en este tramo.</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">
    Cambios guardados exitosamente
</div>

{% endblock %}

{% block extra_js %}
<script>
    function toggleBreakSection() {
        const checkbox = document.getElementById('toggleBreak');
        const fields = document.getElementById('breakFields');
        if (checkbox.checked) {
            fields.classList.remove('hidden');
        } else {
            fields.classList.add('hidden');
            document.getElementById('id_break_start').value = '';
            document.getElementById('id_break_end').value = '';
        }
    }

    function openDrawer(isEdit = false) {
        document.getElementById('availabilityDrawer').classList.remove('invisible');
        setTimeout(() => {
            document.getElementById('drawerOverlay').classList.add('opacity-100');
            document.getElementById('drawerPanel').classList.remove('translate-x-full');
        }, 10);
        
        if (!isEdit) {
            document.getElementById('availabilityForm').reset();
            document.getElementById('item_id').value = '';
            document.getElementById('drawerTitle').innerText = 'Agregar Horario';
            document.getElementById('toggleBreak').checked = false;
            document.getElementById('breakFields').classList.add('hidden');
        }
    }

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

    function editAvailability(id) {
        fetch(`/settings/availability/get/${id}/`)
            .then(r => r.json())
            .then(data => {
                document.getElementById('item_id').value = data.id;
                document.getElementById('id_weekday').value = data.weekday;
                document.getElementById('id_start_time').value = data.start_time;
                document.getElementById('id_end_time').value = data.end_time;
                document.getElementById('id_is_active').checked = data.is_active;
                
                if (data.break_start) {
                    document.getElementById('toggleBreak').checked = true;
                    document.getElementById('breakFields').classList.remove('hidden');
                    document.getElementById('id_break_start').value = data.break_start;
                    document.getElementById('id_break_end').value = data.break_end;
                } else {
                    document.getElementById('toggleBreak').checked = false;
                    document.getElementById('breakFields').classList.add('hidden');
                    document.getElementById('id_break_start').value = '';
                    document.getElementById('id_break_end').value = '';
                }
                
                document.getElementById('drawerTitle').innerText = 'Editar Horario';
                openDrawer(true);
            });
    }

    function saveAvailability() {
        const id = document.getElementById('item_id').value;
        const url = id ? `/settings/availability/update/${id}/` : '/settings/availability/create/';
        const form = document.getElementById('availabilityForm');
        const formData = new FormData(form);

        fetch(url, {
            method: 'POST',
            body: formData,
            headers: {
                'X-CSRFToken': document.querySelector('[name=csrfmiddlewaretoken]').value
            }
        })
        .then(r => r.json().then(data => ({ status: r.status, ok: r.ok, data })))
        .then(({ status, ok, data }) => {
            if (ok) {
                showToast(data.message);
                closeDrawer();
                setTimeout(() => location.reload(), 800);
            } else {
                let errorMsg = data.error || 'Ocurrió un error al guardar.';
                if (data.errors) {
                    errorMsg = Object.values(data.errors).flat().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.remove('translate-y-8');
            document.getElementById('deleteModal').querySelector('.relative').classList.add('opacity-100');
        }, 10);
        
        document.getElementById('confirmDeleteBtn').onclick = () => {
            fetch(`/settings/availability/delete/${id}/`, {
                method: 'POST',
                headers: { 'X-CSRFToken': document.querySelector('[name=csrfmiddlewaretoken]').value }
            }).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.add('translate-y-8');
        modal.querySelector('.relative').classList.remove('opacity-100');
        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 %}