{% extends "base.html" %}

{% block title %}Gestión de Distribución - EMI{% endblock %}

{% block content %}
<div class="max-w-md mx-auto">
    <div class="mb-6 flex items-center justify-between">
        <div>
            <h2 class="text-xl font-bold text-white">Gestión de Distribución</h2>
            <p class="text-slate-400 text-sm">Registre la salida de insumos</p>
        </div>
        <a href="{{ prefix }}/distribuciones/lista" class="text-purple-400 hover:text-purple-300 flex flex-col items-center">
            <i class="la la-list text-2xl"></i>
            <span class="text-[10px] font-bold uppercase">Ver Lista</span>
        </a>
    </div>

    <!-- Feedback de Mensajes -->
    <script>
        const urlParams = new URLSearchParams(window.location.search);
        const msg = urlParams.get('msg');
        const type = urlParams.get('type');
        if (msg) {
            document.write(`
                <div class="mb-6 p-4 rounded-xl border ${type === 'success' ? 'bg-emerald-500/10 border-emerald-500/50 text-emerald-400' : 'bg-red-500/10 border-red-500/50 text-red-400'} flex items-center gap-3">
                    <i class="la ${type === 'success' ? 'la-check-circle' : 'la-exclamation-circle'} text-xl"></i>
                    <p class="text-sm font-medium">${msg}</p>
                </div>
            `);
        }
    </script>

    <div class="glass p-6 rounded-2xl border border-white/10 shadow-2xl">
        <form id="distForm" action="{{ prefix }}/distribuciones/crear" method="post" class="space-y-6">

            <div id="id_field" class="hidden">
                <label class="block text-xs font-semibold text-slate-400 uppercase mb-2 ml-1">ID Registro</label>
                <input type="number" name="id" id="dist_id" readonly
                    class="w-full bg-slate-900/50 border border-slate-700 rounded-xl px-4 py-3 text-slate-400 outline-none">
            </div>

            <!-- SECCIÓN: ORIGEN -->
            <div class="space-y-4">
                <h3 class="text-xs font-bold text-purple-400 uppercase tracking-widest">Origen (Seleccione uno)</h3>

                <div>
                    <label class="block text-[10px] font-semibold text-slate-400 uppercase mb-2 ml-1">Donación</label>
                    <select name="donacion_id" id="sel_donacion" onchange="toggleOrigen('donacion')"
                        class="w-full bg-slate-900 border border-slate-700 rounded-xl px-3 py-3 text-white focus:outline-none focus:border-purple-500">
                        <option value="">Seleccione Donación...</option>
                        {% for d in donaciones %}
                        <option value="{{ d.id }}">{{ d.descripcion }} ({{ d.cantidad }} {{ d.unidad }})</option>
                        {% endfor %}
                    </select>
                </div>

                <div class="text-center text-slate-600 text-xs italic">ó</div>

                <div>
                    <label class="block text-[10px] font-semibold text-slate-400 uppercase mb-2 ml-1">Alimento
                        Preparado</label>
                    <select name="alimento_preparado_id" id="sel_preparado" onchange="toggleOrigen('preparado')"
                        class="w-full bg-slate-900 border border-slate-700 rounded-xl px-3 py-3 text-white focus:outline-none focus:border-purple-500">
                        <option value="">Seleccione Preparado...</option>
                        {% for p in preparados %}
                        <option value="{{ p.id }}">{{ p.descripcion }} ({{ p.cantidad }} {{ p.unidad }})</option>
                        {% endfor %}
                    </select>
                </div>
            </div>

            <!-- SECCIÓN: DESTINO -->
            <div class="space-y-4 border-t border-white/5 pt-6">
                <h3 class="text-xs font-bold text-teal-400 uppercase tracking-widest">Destino (Seleccione uno)</h3>

                <div class="grid grid-cols-1 gap-4">
                    <div>
                        <label class="block text-[10px] font-semibold text-slate-400 uppercase mb-2 ml-1">Salón</label>
                        <select name="salon_id" id="sel_salon" onchange="toggleDestino('salon')"
                            class="w-full bg-slate-900 border border-slate-700 rounded-xl px-3 py-3 text-white focus:outline-none focus:border-teal-500">
                            <option value="">Seleccione Salón...</option>
                            {% for s in salones %}
                            <option value="{{ s.id }}">{{ s.salon }}</option>
                            {% endfor %}
                        </select>
                    </div>

                    <div>
                        <label class="block text-[10px] font-semibold text-slate-400 uppercase mb-2 ml-1">Área</label>
                        <select name="area_id" id="sel_area" onchange="toggleDestino('area')"
                            class="w-full bg-slate-900 border border-slate-700 rounded-xl px-3 py-3 text-white focus:outline-none focus:border-teal-500">
                            <option value="">Seleccione Área...</option>
                            {% for a in areas %}
                            <option value="{{ a.id }}">{{ a.area }}</option>
                            {% endfor %}
                        </select>
                    </div>

                    <div>
                        <label
                            class="block text-[10px] font-semibold text-slate-400 uppercase mb-2 ml-1">Recepción</label>
                        <select name="recepcion_id" id="sel_recepcion" onchange="toggleDestino('recepcion')"
                            class="w-full bg-slate-900 border border-slate-700 rounded-xl px-3 py-3 text-white focus:outline-none focus:border-teal-500">
                            <option value="">Seleccione Recepción...</option>
                            {% for r in recepciones %}
                            <option value="{{ r.id }}">{{ r.nombre }}</option>
                            {% endfor %}
                        </select>
                    </div>
                </div>
            </div>

            <!-- SECCIÓN: DATOS DE SALIDA -->
            <div class="space-y-4 border-t border-white/5 pt-6">
                <div class="grid grid-cols-2 gap-3">
                    <div>
                        <label class="block text-[10px] font-semibold text-slate-400 uppercase mb-2 ml-1">Cantidad
                            Salida</label>
                        <input type="number" step="0.01" name="cantidad" id="dist_cantidad" required
                            class="w-full bg-slate-900 border border-slate-700 rounded-xl px-4 py-3 text-white focus:outline-none focus:border-purple-500 text-center">
                    </div>
                    <div>
                        <label class="block text-[10px] font-semibold text-slate-400 uppercase mb-2 ml-1">Medida</label>
                        <select name="unidad" id="dist_unidad" required
                            class="w-full bg-slate-900 border border-slate-700 rounded-xl px-3 py-3 text-white focus:outline-none focus:border-purple-500">
                            {% for m in medidas %}
                            <option value="{{ m }}" {% if m=="Unidad(es)" %}selected{% endif %}>{{ m }}</option>
                            {% endfor %}
                        </select>
                    </div>
                </div>
                <div>
                    <label class="block text-xs font-semibold text-slate-400 uppercase mb-2 ml-1">Fecha</label>
                    <input type="date" name="fecha" id="dist_fecha" required
                        class="w-full bg-slate-900 border border-slate-700 rounded-xl px-4 py-3 text-white focus:outline-none focus:border-purple-500">
                </div>
            </div>

            <div class="grid grid-cols-2 gap-3 pt-2">
                <button type="submit" id="btn_submit"
                    class="bg-purple-600 hover:bg-purple-500 text-white font-bold py-4 rounded-xl shadow-lg shadow-purple-600/30 transition-all active:scale-95 uppercase text-sm">
                    Guardar
                </button>
                <button type="button" onclick="cambiarAModoEdicion()" id="btn_mode"
                    class="bg-slate-700 hover:bg-slate-600 text-white font-bold py-4 rounded-xl transition-all uppercase text-xs">
                    Modo Edición
                </button>
            </div>
        </form>

        <form id="deleteForm" action="{{ prefix }}/distribuciones/eliminar" method="post" class="hidden">
            <input type="hidden" name="id" id="delete_id">
            <button type="submit" onclick="return confirm('¿Eliminar este registro de distribución?')"
                class="w-full bg-red-600/20 hover:bg-red-600 text-red-500 hover:text-white font-bold py-3 rounded-xl border border-red-600/50 transition-all mt-2 uppercase text-xs">
                Eliminar Registro
            </button>
        </form>
    </div>
</div>

<script>
    function toggleOrigen(tipo) {
        const selDonacion = document.getElementById('sel_donacion');
        const selPreparado = document.getElementById('sel_preparado');
        if (tipo === 'donacion' && selDonacion.value !== "") {
            selPreparado.value = "";
        } else if (tipo === 'preparado' && selPreparado.value !== "") {
            selDonacion.value = "";
        }
    }

    function toggleDestino(tipo) {
        const fields = ['sel_salon', 'sel_area', 'sel_recepcion'];
        const currentId = 'sel_' + tipo;
        if (document.getElementById(currentId).value !== "") {
            fields.forEach(id => {
                if (id !== currentId) document.getElementById(id).value = "";
            });
        }
    }

    function cambiarAModoEdicion() {
        const form = document.getElementById('distForm');
        const idField = document.getElementById('id_field');
        const delForm = document.getElementById('deleteForm');
        const btnSubmit = document.getElementById('btn_submit');
        const btnMode = document.getElementById('btn_mode');

        const esModoEdicion = idField.classList.toggle('hidden') === false;
        delForm.classList.toggle('hidden');

        if (esModoEdicion) {
            form.action = "{{ prefix }}/distribuciones/actualizar";
            btnSubmit.innerText = "ACTUALIZAR";
            btnMode.innerText = "MODO CREAR";
        } else {
            form.action = "{{ prefix }}/distribuciones/crear";
            btnSubmit.innerText = "GUARDAR";
            btnMode.innerText = "MODO EDICIÓN";
        }
    }

    window.addEventListener('DOMContentLoaded', () => {
        const params = new URLSearchParams(window.location.search);
        if (params.get('id')) {
            document.getElementById('dist_id').value = params.get('id');
            document.getElementById('delete_id').value = params.get('id');

            // Origen
            if (params.get('donacion_id')) document.getElementById('sel_donacion').value = params.get('donacion_id');
            if (params.get('preparado_id')) document.getElementById('sel_preparado').value = params.get('preparado_id');

            // Destino
            if (params.get('salon_id')) document.getElementById('sel_salon').value = params.get('salon_id');
            if (params.get('area_id')) document.getElementById('sel_area').value = params.get('area_id');
            if (params.get('recepcion_id')) document.getElementById('sel_recepcion').value = params.get('recepcion_id');

            document.getElementById('dist_cantidad').value = params.get('cantidad') || '';
            document.getElementById('dist_unidad').value = params.get('unidad') || 'Unidad(es)';
            document.getElementById('dist_fecha').value = params.get('fecha') || '';

            cambiarAModoEdicion();
        } else {
            document.getElementById('dist_fecha').valueAsDate = new Date();
        }
    });
</script>
{% endblock %}