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

{% block title %}Gestión de Servicios{% 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 Profesional</span>
        <h1 class="text-4xl lg:text-6xl leading-tight">Servicios.</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 Servicio
    </button>
</div>

<!-- Tabla de Servicios -->
<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 services-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">Nombre</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">Duración</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">Capacidad</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="servicesTableBody">
                {% for type in types %}
                <tr class="hover:bg-surface/30 transition-colors border-b border-accent/5 last:border-0" id="row-{{ type.id }}">
                    <td class="px-4 lg:px-8 py-4 lg:py-6" data-label="Nombre">
                        <div class="flex items-center gap-3">
                            <div class="w-8 h-8 rounded-full bg-primary/5 flex items-center justify-center text-primary font-black text-xs shrink-0">
                                {{ type.name|first }}
                            </div>
                            <span class="text-sm font-bold uppercase tracking-tight">{{ type.name }}</span>
                        </div>
                    </td>
                    <td class="px-4 lg:px-8 py-4 lg:py-6 text-center text-xs font-bold text-body-text/60" data-label="Duración">{{ type.duration_minutes }} min</td>
                    <td class="px-4 lg:px-8 py-4 lg:py-6 text-center text-xs font-bold text-body-text/60" data-label="Capacidad">{{ type.slot_capacity }} pers</td>
                    <td class="px-4 lg:px-8 py-4 lg:py-6 text-center" data-label="Estado">
                        {% if type.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="editService({{ type.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({{ type.id }}, '{{ type.name }}')" 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="6" class="px-8 py-32 text-center bg-white">
                        <i data-lucide="package" 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 tipos de cita definidos.</p>
                        <button onclick="openDrawer()" class="text-xs font-black uppercase tracking-tightest text-primary hover:underline">Crear el primero aquí &rarr;</button>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>

<!-- Drawer / Panel Lateral para Crear/Editar -->
<div id="serviceDrawer" 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 sm:max-w-md bg-white shadow-2xl translate-x-full transition-transform duration-300 flex flex-col">
        <div class="p-5 lg:p-10 border-b border-accent/10 flex justify-between items-center bg-surface/30 drawer-header">
            <h2 id="drawerTitle" class="text-lg lg:text-xl font-black uppercase tracking-tighter">Nuevo Servicio</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="serviceForm" class="flex-1 overflow-y-auto p-5 lg:p-10 space-y-6 lg:space-y-8 drawer-content">
            {% csrf_token %}
            <input type="hidden" id="service_id" name="id">
            
            <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>

            <div>
                <label>Nombre del Servicio *</label>
                <input type="text" name="name" id="id_name" required placeholder="ej: Escritura Hipotecaria"
                       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>Slug de URL (opcional)</label>
                <input type="text" name="slug" id="id_slug" placeholder="ej: escritura-hipotecaria"
                       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/40 mt-2 uppercase font-bold tracking-widest">Se generará automáticamente si queda vacío.</p>
            </div>

            <div>
                <label>Descripción</label>
                <textarea name="description" id="id_description" rows="3" placeholder="Describe brevemente de qué trata este servicio..."
                          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"></textarea>
            </div>

            <div class="grid grid-cols-2 gap-6">
                <div>
                    <label>Duración (min) *</label>
                    <input type="number" name="duration_minutes" id="id_duration_minutes" min="1" value="30" 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>Capacidad *</label>
                    <input type="number" name="slot_capacity" id="id_slot_capacity" min="1" value="1" 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>Profesionales asignados</label>
                <div class="grid grid-cols-1 gap-2 bg-surface/30 p-4 rounded-sm border border-accent/10 max-h-40 overflow-y-auto">
                    {% for res in form.resources.field.queryset %}
                    <label class="flex items-center gap-3 cursor-pointer hover:bg-white p-2 rounded-sm transition-colors mb-0 group">
                        <input type="checkbox" name="resources" value="{{ res.id }}" class="resource-checkbox w-4 h-4 accent-primary">
                        <span class="text-xs font-bold uppercase tracking-tightest text-body-text/60 group-hover:text-primary">{{ res.name }}</span>
                    </label>
                    {% endfor %}
                </div>
                <p class="text-[9px] text-body-text/40 mt-2 uppercase font-bold tracking-widest">Si no seleccionas ninguno, se asignarán todos automáticamente.</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>
                    <p class="text-xs font-black uppercase tracking-tighter">Servicio activo</p>
                    <p class="text-[9px] text-body-text/40 font-bold uppercase tracking-widest">Visible en tu página de reservas.</p>
                </div>
            </div>
        </form>

        <div class="p-5 lg:p-10 border-t border-accent/10 flex flex-col sm:flex-row gap-4 bg-white/50 backdrop-blur-md drawer-footer">
            <button type="button" onclick="closeDrawer()" class="flex-1 px-6 lg:px-8 py-4 lg: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="saveService()" class="flex-1 bg-primary text-white px-6 lg:px-8 py-4 lg: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 servicio?</h3>
        <p class="text-sm font-medium text-body-text/60 mb-10">Estás por eliminar "<span id="deleteItemName" class="font-black"></span>". Esta acción lo ocultará permanentemente de tu panel.</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">
    Servicio guardado exitosamente
</div>

{% endblock %}

{% block extra_js %}
<script>
    let currentDeleteId = null;

    function openDrawer(isEdit = false) {
        document.getElementById('serviceDrawer').classList.remove('invisible');
        setTimeout(() => {
            document.getElementById('drawerOverlay').classList.add('opacity-100');
            document.getElementById('drawerPanel').classList.remove('translate-x-full');
        }, 10);
        
        if (!isEdit) {
            document.getElementById('serviceForm').reset();
            document.getElementById('service_id').value = '';
            document.getElementById('drawerTitle').innerText = 'Nuevo Servicio';
            document.getElementById('id_slug').value = '';
            document.getElementById('formErrors').classList.add('hidden');
            // Uncheck all resources for new
            document.querySelectorAll('.resource-checkbox').forEach(cb => cb.checked = false);
        }
    }

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

    function editService(id) {
        fetch(`/settings/appointment-types/get/${id}/`)
            .then(r => r.json())
            .then(data => {
                document.getElementById('service_id').value = data.id;
                document.getElementById('id_name').value = data.name;
                document.getElementById('id_slug').value = data.slug;
                document.getElementById('id_description').value = data.description || '';
                document.getElementById('id_duration_minutes').value = data.duration_minutes;
                document.getElementById('id_slot_capacity').value = data.slot_capacity;
                document.getElementById('id_is_active').checked = data.is_active;
                
                // Mark resources
                document.querySelectorAll('.resource-checkbox').forEach(cb => {
                    cb.checked = data.resource_ids.includes(parseInt(cb.value));
                });
                
                document.getElementById('drawerTitle').innerText = 'Editar Servicio';
                document.getElementById('formErrors').classList.add('hidden');
                openDrawer(true);
            });
    }

    function saveService() {
        const id = document.getElementById('service_id').value;
        const url = id ? `/settings/appointment-types/update/${id}/` : '/settings/appointment-types/create/';
        const form = document.getElementById('serviceForm');
        const formData = new FormData(form);

        // Debug: ensure resources are captured
        const resources = Array.from(document.querySelectorAll('.resource-checkbox:checked')).map(cb => cb.value);
        console.log("Selected resources:", resources);

        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.';
                document.getElementById('formErrors').innerHTML = errorMsg;
                document.getElementById('formErrors').classList.remove('hidden');
                // Scroll to top of form to see error
                document.getElementById('serviceForm').scrollTop = 0;
            }
        })
        .catch(err => {
            document.getElementById('formErrors').innerText = 'Error crítico de conexión.';
            document.getElementById('formErrors').classList.remove('hidden');
        });
    }

    function confirmDelete(id, name) {
        currentDeleteId = id;
        document.getElementById('deleteItemName').innerText = name;
        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/appointment-types/delete/${id}/`, {
                method: 'POST',
                headers: { 'X-CSRFToken': document.querySelector('[name=csrfmiddlewaretoken]').value }
            }).then(r => r.json()).then(data => {
                if (data.success) {
                    hideDeleteModal();
                    const row = document.getElementById(`row-${id}`);
                    if(row) row.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 copyToClipboard(btn) {
        const input = btn.previousElementSibling;
        navigator.clipboard.writeText(input.value);
        showToast('Link copiado al portapapeles');
        const icon = btn.querySelector('i');
        const originalLucide = icon.getAttribute('data-lucide');
        icon.setAttribute('data-lucide', 'check');
        lucide.createIcons();
        setTimeout(() => {
            icon.setAttribute('data-lucide', originalLucide);
            lucide.createIcons();
        }, 2000);
    }

    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 %}