{% extends "base.html" %}

{% block title %}Gestión de Colaboradores - 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 Colaboradores</h2>
            <p class="text-slate-400 text-sm">Administre los colaboradores del servicio</p>
        </div>
        <a href="{{ prefix }}/colaboradores/lista" class="text-sky-400 hover:text-sky-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>

    <!-- Mensajes de Feedback -->
    <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 space-y-8 shadow-2xl">
        <form id="colaboradorForm" action="{{ prefix }}/colaboradores/crear" method="post" class="space-y-4">
            <div id="id_field" class="hidden">
                <label class="block text-xs font-semibold text-slate-400 uppercase mb-2 ml-1">ID del Colaborador</label>
                <input type="number" name="id" id="colaborador_id"
                    class="w-full bg-slate-900 border border-slate-700 rounded-xl px-4 py-3 text-white focus:outline-none focus:border-sky-500 font-mono">
            </div>

            <div>
                <label class="block text-xs font-semibold text-slate-400 uppercase mb-2 ml-1">Nombre Completo</label>
                <input type="text" name="nombre" id="colaborador_nombre" required
                    class="w-full bg-slate-900 border border-slate-700 rounded-xl px-4 py-3 text-white focus:outline-none focus:border-sky-500"
                    placeholder="Nombre del colaborador">
            </div>

            <div class="grid grid-cols-2 gap-3">
                <div>
                    <label class="block text-xs font-semibold text-slate-400 uppercase mb-2 ml-1">Cédula</label>
                    <input type="number" name="cedula" id="colaborador_cedula" required
                        class="w-full bg-slate-900 border border-slate-700 rounded-xl px-4 py-3 text-white focus:outline-none focus:border-sky-500"
                        placeholder="Documento de identidad">
                </div>
                <div>
                    <label class="block text-xs font-semibold text-slate-400 uppercase mb-2 ml-1">Fecha de Nacimiento</label>
                    <div class="relative">
                        <input type="text" data-visible-date
                            class="w-full bg-slate-900 border border-slate-700 rounded-xl px-4 py-3 text-white focus:outline-none focus:border-sky-500"
                            placeholder="DD/MM/YYYY" autocomplete="off" inputmode="numeric">
                        <input type="date" name="fecha_nacimiento" id="colaborador_fecha_nacimiento" class="hidden fecha-native" aria-hidden="true">
                    </div>
                </div>
            </div>

            <div class="grid grid-cols-2 gap-3">
                <div>
                    <label class="block text-xs font-semibold text-slate-400 uppercase mb-2 ml-1">Edad</label>
                    <input type="number" name="edad" id="colaborador_edad" required
                        class="w-full bg-slate-900 border border-slate-700 rounded-xl px-4 py-3 text-white focus:outline-none focus:border-sky-500"
                        placeholder="Años">
                </div>
                <div>
                    <label class="block text-xs font-semibold text-slate-400 uppercase mb-2 ml-1">Celular</label>
                    <input type="text" name="celular" id="colaborador_celular"
                        class="w-full bg-slate-900 border border-slate-700 rounded-xl px-4 py-3 text-white focus:outline-none focus:border-sky-500"
                        placeholder="Número de celular">
                </div>
            </div>

            <div class="grid grid-cols-2 gap-3">
                <div>
                    <label class="block text-xs font-semibold text-slate-400 uppercase mb-2 ml-1">Correo Electrónico</label>
                    <input type="email" name="correo" id="colaborador_correo"
                        class="w-full bg-slate-900 border border-slate-700 rounded-xl px-4 py-3 text-white focus:outline-none focus:border-sky-500"
                        placeholder="Correo">
                </div>
                <div>
                    <label class="block text-xs font-semibold text-slate-400 uppercase mb-2 ml-1">Número de Equipo</label>
                    <input type="number" name="numero_equipo" id="colaborador_numero_equipo"
                        class="w-full bg-slate-900 border border-slate-700 rounded-xl px-4 py-3 text-white focus:outline-none focus:border-sky-500"
                        placeholder="N° de equipo">
                </div>
            </div>

            <div>
                <label class="block text-xs font-semibold text-slate-400 uppercase mb-2 ml-1">Capitán Asignado</label>
                <select name="id_capitan" id="colaborador_id_capitan"
                    class="w-full bg-slate-900 border border-slate-700 rounded-xl px-4 py-3 text-white focus:outline-none focus:border-sky-500 appearance-none">
                    <option value="">Seleccione Capitán...</option>
                    {% for cap in capitanes %}
                    <option value="{{ cap.id }}">{{ cap.nombre }}</option>
                    {% endfor %}
                </select>
            </div>

            <!-- Información Adicional -->
            <div class="border-t border-slate-700/50 pt-4 space-y-4 text-start">
                <h3 class="text-sm font-bold text-sky-400 uppercase">Información Adicional</h3>
                
                <div class="grid grid-cols-2 gap-3">
                    <div class="text-start">
                        <label class="block text-xs font-semibold text-slate-400 uppercase mb-2">Sexo</label>
                        <select name="sexo" id="colaborador_sexo"
                            class="w-full bg-slate-900 border border-slate-700 rounded-xl px-4 py-3 text-white focus:border-sky-500 outline-none appearance-none">
                            <option value="">Seleccione Sexo...</option>
                            <option value="masculino">Masculino</option>
                            <option value="femenino">Femenino</option>
                        </select>
                    </div>
                    <div class="text-start">
                        <label class="block text-xs font-semibold text-slate-400 uppercase mb-2">Estado Civil</label>
                        <select name="estado_civil" id="colaborador_estado_civil"
                            class="w-full bg-slate-900 border border-slate-700 rounded-xl px-4 py-3 text-white focus:border-sky-500 outline-none appearance-none">
                            <option value="">Seleccione...</option>
                            <option value="soltero">Soltero</option>
                            <option value="casado">Casado</option>
                            <option value="divorciado">Divorciado</option>
                            <option value="viudo">Viudo</option>
                            <option value="concubinato">Concubinato</option>
                        </select>
                    </div>
                </div>

                <div class="grid grid-cols-2 gap-3">
                    <div class="text-start">
                        <label class="block text-xs font-semibold text-slate-400 uppercase mb-2">Profesión</label>
                        <input type="text" name="profesion" id="colaborador_profesion"
                            class="w-full bg-slate-900 border border-slate-700 rounded-xl px-4 py-3 text-white focus:border-sky-500 outline-none">
                    </div>
                    <div class="text-start">
                        <label class="block text-xs font-semibold text-slate-400 uppercase mb-2">Cantidad de Hijos</label>
                        <input type="number" name="cantidad_hijos" id="colaborador_cantidad_hijos" value="0" min="0"
                            class="w-full bg-slate-900 border border-slate-700 rounded-xl px-4 py-3 text-white focus:border-sky-500 outline-none">
                    </div>
                </div>

                <div class="grid grid-cols-2 gap-3">
                    <div class="text-start">
                        <label class="block text-xs font-semibold text-slate-400 uppercase mb-2">Tiempo de Servicio</label>
                        <input type="text" name="tiempo_servicio" id="colaborador_tiempo_servicio" placeholder="Ej. 2 años"
                            class="w-full bg-slate-900 border border-slate-700 rounded-xl px-4 py-3 text-white focus:border-sky-500 outline-none">
                    </div>
                    <div class="text-start">
                        <label class="block text-xs font-semibold text-slate-400 uppercase mb-2">¿Evangelio Cambia?</label>
                        <select name="pertenece_evangelio_cambia" id="colaborador_pertenece_evangelio_cambia"
                            class="w-full bg-slate-900 border border-slate-700 rounded-xl px-4 py-3 text-white focus:border-sky-500 outline-none appearance-none">
                            <option value="">Seleccione...</option>
                            <option value="si">Sí</option>
                            <option value="no">No</option>
                        </select>
                    </div>
                </div>

                <div class="grid grid-cols-2 gap-3">
                    <div class="text-start">
                        <label class="block text-xs font-semibold text-slate-400 uppercase mb-2">¿Bautizado?</label>
                        <select name="bautizado" id="colaborador_bautizado"
                            class="w-full bg-slate-900 border border-slate-700 rounded-xl px-4 py-3 text-white focus:border-sky-500 outline-none appearance-none">
                            <option value="">Seleccione...</option>
                            <option value="si">Sí</option>
                            <option value="no">No</option>
                        </select>
                    </div>
                    <div class="text-start">
                        <label class="block text-xs font-semibold text-slate-400 uppercase mb-2">¿Asiste Discipulado?</label>
                        <select name="asiste_discipulado" id="colaborador_asiste_discipulado"
                            class="w-full bg-slate-900 border border-slate-700 rounded-xl px-4 py-3 text-white focus:border-sky-500 outline-none appearance-none">
                            <option value="">Seleccione...</option>
                            <option value="si">Sí</option>
                            <option value="no">No</option>
                        </select>
                    </div>
                </div>

                <div class="grid grid-cols-2 gap-3">
                    <div class="text-start">
                        <label class="block text-xs font-semibold text-slate-400 uppercase mb-2">¿Usa Transporte?</label>
                        <select name="usa_transporte" id="colaborador_usa_transporte"
                            class="w-full bg-slate-900 border border-slate-700 rounded-xl px-4 py-3 text-white focus:border-sky-500 outline-none appearance-none">
                            <option value="">Seleccione...</option>
                            <option value="si">Sí</option>
                            <option value="no">No</option>
                        </select>
                    </div>
                    <div class="text-start">
                        <label class="block text-xs font-semibold text-slate-400 uppercase mb-2">¿Sirve en otra área?</label>
                        <select name="sirve_otra_area" id="colaborador_sirve_otra_area" onchange="toggleOtraAreaDetalle(this)"
                            class="w-full bg-slate-900 border border-slate-700 rounded-xl px-4 py-3 text-white focus:border-sky-500 outline-none appearance-none">
                            <option value="">Seleccione...</option>
                            <option value="si">Sí</option>
                            <option value="no">No</option>
                        </select>
                    </div>
                </div>

                <div class="text-start hidden" id="otra_area_detalle_div">
                    <label class="block text-xs font-semibold text-slate-400 uppercase mb-2">¿Cuál área?</label>
                    <input type="text" name="otra_area_detalle" id="colaborador_otra_area_detalle" placeholder="Área de servicio"
                        class="w-full bg-slate-900 border border-slate-700 rounded-xl px-4 py-3 text-white focus:border-sky-500 outline-none">
                </div>
            </div>
                <div class="text-start pt-2">
                    <label class="block text-xs font-semibold text-slate-400 uppercase mb-2">¿Ha sido levantado como colaborador?</label>
                    <select name="levantado" id="colaborador_levantado"
                        class="w-full bg-slate-900 border border-slate-700 rounded-xl px-4 py-3 text-white focus:border-sky-500 outline-none appearance-none">
                        <option value="">Seleccione...</option>
                        <option value="si">Sí</option>
                        <option value="no">No</option>
                    </select>
                </div>
                <div class="text-start pt-2">
                    <label class="block text-xs font-semibold text-slate-400 uppercase mb-2">Dirección</label>
                    <textarea name="direccion" id="colaborador_direccion" rows="3"
                        class="w-full bg-slate-900 border border-slate-700 rounded-xl px-4 py-3 text-white focus:border-sky-500 outline-none"></textarea>
                </div>
            </div>

            <div class="grid grid-cols-2 gap-3 pt-2">
                <button type="submit" id="btn_submit"
                    class="bg-sky-600 hover:bg-sky-500 text-white font-bold py-3 rounded-xl transition-all active:scale-95 shadow-lg shadow-sky-600/30 uppercase tracking-widest text-xs">
                    CREAR
                </button>
                <button type="button" onclick="cambiarAModoEdicion()" id="btn_mode"
                    class="bg-slate-700 hover:bg-slate-600 text-white font-bold py-3 rounded-xl transition-all uppercase tracking-widest text-xs">
                    MODO EDICIÓN
                </button>
            </div>
        </form>

        <form id="deleteForm" action="{{ prefix }}/colaboradores/eliminar" method="post" class="hidden">
            <input type="hidden" name="id" id="delete_id">
            <button type="submit" onclick="return confirm('¿Está seguro de eliminar este colaborador?')"
                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">
                ELIMINAR REGISTRO
            </button>
        </form>
    </div>
</div>

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

        idField.classList.toggle('hidden');
        delForm.classList.toggle('hidden');

        if (!idField.classList.contains('hidden')) {
            form.action = "{{ prefix }}/colaboradores/actualizar";
            btnSubmit.innerText = "ACTUALIZAR";
            btnMode.innerText = "MODO CREAR";
            document.getElementById('colaborador_id').required = true;
        } else {
            form.action = "{{ prefix }}/colaboradores/crear";
            btnSubmit.innerText = "CREAR";
            btnMode.innerText = "MODO EDICIÓN";
            document.getElementById('colaborador_id').required = false;
        }
    }

    function toggleOtraAreaDetalle(selectEl) {
        const div = document.getElementById('otra_area_detalle_div');
        if (selectEl && selectEl.value === 'si') {
            div.classList.remove('hidden');
        } else {
            div.classList.add('hidden');
            const input = div.querySelector('input');
            if (input) input.value = '';
        }
    }

    document.getElementById('colaborador_id').addEventListener('input', (e) => {
        document.getElementById('delete_id').value = e.target.value;
    });

    window.addEventListener('DOMContentLoaded', () => {
        const params = new URLSearchParams(window.location.search);
        if (params.get('id')) {
            document.getElementById('colaborador_id').value = params.get('id');
            document.getElementById('delete_id').value = params.get('id');
            document.getElementById('colaborador_nombre').value = params.get('nombre') || '';
            document.getElementById('colaborador_cedula').value = params.get('cedula') || '';
            document.getElementById('colaborador_edad').value = params.get('edad') || '';
            document.getElementById('colaborador_celular').value = params.get('celular') || '';
            document.getElementById('colaborador_correo').value = params.get('correo') || '';
            document.getElementById('colaborador_numero_equipo').value = params.get('numero_equipo') || '';
            document.getElementById('colaborador_id_capitan').value = params.get('id_capitan') || '';
            
            // Campos nuevos
            document.getElementById('colaborador_sexo').value = params.get('sexo') || '';
            document.getElementById('colaborador_profesion').value = params.get('profesion') || '';
            document.getElementById('colaborador_estado_civil').value = params.get('estado_civil') || '';
            document.getElementById('colaborador_cantidad_hijos').value = params.get('cantidad_hijos') || '0';
            document.getElementById('colaborador_tiempo_servicio').value = params.get('tiempo_servicio') || '';
            document.getElementById('colaborador_pertenece_evangelio_cambia').value = params.get('pertenece_evangelio_cambia') || '';
            document.getElementById('colaborador_bautizado').value = params.get('bautizado') || '';
            document.getElementById('colaborador_asiste_discipulado').value = params.get('asiste_discipulado') || '';
            document.getElementById('colaborador_usa_transporte').value = params.get('usa_transporte') || '';
            document.getElementById('colaborador_levantado').value = params.get('levantado') || '';
            document.getElementById('colaborador_direccion').value = params.get('direccion') || '';

            const sirveOtraSelect = document.getElementById('colaborador_sirve_otra_area');
            sirveOtraSelect.value = params.get('sirve_otra_area') || '';
            document.getElementById('colaborador_otra_area_detalle').value = params.get('otra_area_detalle') || '';
            toggleOtraAreaDetalle(sirveOtraSelect);

            const fechaNac = params.get('fecha_nacimiento');
            if (fechaNac) {
                document.getElementById('colaborador_fecha_nacimiento').value = fechaNac;
                const visibleDate = document.querySelector('input[data-visible-date]');
                if (visibleDate) {
                    const dt = parseDateFromText(fechaNac);
                    if (dt) visibleDate.value = formatToDisplay(dt);
                }
            }
            cambiarAModoEdicion();
        }
    });

    // --- LÓGICA DE FECHA Y CÁLCULO DE EDAD ---
    function parseDateFromText(text) {
        if (!text) return null;
        text = text.trim();
        const dmy = text.match(/^(\d{1,2})\/(\d{1,2})\/(\d{4})$/);
        if (dmy) {
            const dd = parseInt(dmy[1], 10);
            const mm = parseInt(dmy[2], 10) - 1;
            const yyyy = parseInt(dmy[3], 10);
            return new Date(yyyy, mm, dd);
        }
        const ymd = text.match(/^(\d{4})-(\d{2})-(\d{2})$/);
        if (ymd) {
            return new Date(parseInt(ymd[1], 10), parseInt(ymd[2], 10) - 1, parseInt(ymd[3], 10));
        }
        return null;
    }

    function formatToDisplay(date) {
        if (!date || isNaN(date.getTime())) return '';
        const dd = String(date.getDate()).padStart(2, '0');
        const mm = String(date.getMonth() + 1).padStart(2, '0');
        const yyyy = date.getFullYear();
        return `${dd}/${mm}/${yyyy}`;
    }

    function formatToISO(date) {
        if (!date || isNaN(date.getTime())) return '';
        const dd = String(date.getDate()).padStart(2, '0');
        const mm = String(date.getMonth() + 1).padStart(2, '0');
        const yyyy = date.getFullYear();
        return `${yyyy}-${mm}-${dd}`;
    }

    function calculateAge(date) {
        if (!date || isNaN(date.getTime())) return null;
        const today = new Date();
        let age = today.getFullYear() - date.getFullYear();
        const m = today.getMonth() - date.getMonth();
        if (m < 0 || (m === 0 && today.getDate() < date.getDate())) age--;
        return age;
    }

    function attachDateHandlers() {
        const v = document.querySelector('input[data-visible-date]');
        const native = document.querySelector('input[name="fecha_nacimiento"]');
        const edadInput = document.querySelector('input[name="edad"]');

        if (native.value) {
            const dt = parseDateFromText(native.value);
            if (dt) v.value = formatToDisplay(dt);
        }

        v.addEventListener('focus', () => {
            try { native.showPicker(); } catch (e) { native.click(); }
        });

        native.addEventListener('change', () => {
            const dt = parseDateFromText(native.value);
            if (dt) {
                v.value = formatToDisplay(dt);
                const age = calculateAge(dt);
                if (age !== null) edadInput.value = age;
            }
        });

        v.addEventListener('blur', () => {
            const dt = parseDateFromText(v.value);
            native.value = dt ? formatToISO(dt) : '';
            if (dt) {
                const age = calculateAge(dt);
                if (age !== null) edadInput.value = age;
            }
        });
    }

    document.addEventListener('DOMContentLoaded', attachDateHandlers);
</script>
{% endblock %}