{% extends "base.html" %}

{% block title %}Gestión de Servidores{% endblock %}

{% block content %}
<div class="container mx-auto p-4 max-w-3xl pb-8">
    <div class="mb-6 flex items-start justify-between gap-4">
        <div>
            <h2 class="text-2xl font-bold text-green-400"><i class="la la-id-badge mr-2"></i>Gestión de Servidores</h2>
            <p class="text-xs text-slate-500">Administración de personal de servicio</p>
        </div>
        <a href="{{ prefix }}/servidores/lista"
            class="inline-flex shrink-0 items-center gap-2 rounded-lg border border-slate-700 bg-slate-800 px-3 py-2 text-sm font-bold text-sky-400 transition hover:border-sky-500/40 hover:bg-sky-500/10 hover:text-sky-300">
            <i class="la la-list text-xl"></i>
            Ver Lista
        </a>
    </div>

    <div id="alert-container" class="mb-4"></div>

    <div class="glass rounded-2xl border border-slate-700 shadow-2xl overflow-hidden">
        <div class="border-b border-slate-700 px-6 py-5">
            <h5 class="text-xl font-bold text-blue-400">Registrar Nuevo Servidor</h5>
            <p class="mt-1 text-sm text-slate-400">Complete los datos del servidor para crear el registro estadístico.</p>
        </div>

        <form id="servidorForm" action="{{ prefix }}/servidores/crear" method="POST" class="p-6 pb-8 max-h-[32rem] overflow-y-auto">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div class="md:col-span-2">
                    <label class="block text-sm font-medium mb-1 text-slate-400">Nombre Completo</label>
                    <input type="text" name="nombre"
                        class="w-full p-2 bg-slate-900 border border-slate-700 rounded-lg focus:ring-2 focus:ring-blue-500 outline-none"
                        required maxlength="100">
                </div>
                <div>
                    <label class="block text-sm font-medium mb-1 text-slate-400">Cédula / ID</label>
                    <input type="number" name="cedula"
                        class="w-full p-2 bg-slate-900 border border-slate-700 rounded-lg outline-none" required>
                </div>
                <div>
                    <label class="block text-sm font-medium mb-1 text-slate-400">Fecha de Nacimiento</label>
                    <div class="relative">
                        <input type="text" data-visible-date
                            class="w-full p-2 bg-slate-900 border border-slate-700 rounded-lg outline-none text-white"
                            placeholder="DD/MM/YYYY" autocomplete="off" inputmode="numeric">
                        <input type="date" name="fecha_nacimiento" class="hidden fecha-native" aria-hidden="true">
                    </div>
                    <p class="mt-1 text-[11px] text-slate-500">Formato sugerido: DD/MM/AAAA</p>
                </div>
                <div>
                    <label class="block text-sm font-medium mb-1 text-slate-400">Edad</label>
                    <input type="number" name="edad"
                        class="w-full p-2 bg-slate-900 border border-slate-700 rounded-lg outline-none" required
                        min="1">
                </div>
                <div>
                    <label class="block text-sm font-medium mb-1 text-slate-400">Celular</label>
                    <input type="text" name="celular"
                        class="w-full p-2 bg-slate-900 border border-slate-700 rounded-lg outline-none"
                        maxlength="20">
                </div>
                <div>
                    <label class="block text-sm font-medium mb-1 text-slate-400">Correo Electrónico</label>
                    <input type="email" name="correo"
                        class="w-full p-2 bg-slate-900 border border-slate-700 rounded-lg outline-none"
                        maxlength="100">
                </div>
                <div>
                    <label class="block text-sm font-medium mb-1 text-slate-400">Número de Equipo</label>
                    <input type="number" name="numero_equipo"
                        class="w-full p-2 bg-slate-900 border border-slate-700 rounded-lg outline-none">
                </div>
                <div>
                    <label class="block text-sm font-medium mb-1 text-slate-400">Capitán Responsable</label>
                    <select name="id_capitan"
                        class="w-full p-2 bg-slate-900 border border-slate-700 rounded-lg outline-none text-white focus:ring-2 focus:ring-blue-500">
                        <option value="">Seleccione un capitán...</option>
                        {% for c in capitanes %}
                        <option value="{{ c.id }}">{{ c.nombre }}</option>
                        {% endfor %}
                    </select>
                </div>
                <div>
                    <label class="block text-sm font-medium mb-1 text-slate-400">Sexo</label>
                    <select name="sexo"
                        class="w-full p-2 bg-slate-900 border border-slate-700 rounded-lg outline-none text-white">
                        <option value="">Seleccione...</option>
                        <option value="masculino">Masculino</option>
                        <option value="femenino">Femenino</option>
                    </select>
                </div>
                <div>
                    <label class="block text-sm font-medium mb-1 text-slate-400">Profesión</label>
                    <input type="text" name="profesion"
                        class="w-full p-2 bg-slate-900 border border-slate-700 rounded-lg outline-none" maxlength="100">
                </div>
                <div>
                    <label class="block text-sm font-medium mb-1 text-slate-400">Estado Civil</label>
                    <select name="estado_civil"
                        class="w-full p-2 bg-slate-900 border border-slate-700 rounded-lg outline-none text-white">
                        <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>
                    <label class="block text-sm font-medium mb-1 text-slate-400">Cantidad de Hijos</label>
                    <input type="number" name="cantidad_hijos" min="0"
                        class="w-full p-2 bg-slate-900 border border-slate-700 rounded-lg outline-none">
                </div>
                <div>
                    <label class="block text-sm font-medium mb-1 text-slate-400">Tiempo de Servicio</label>
                    <input type="text" name="tiempo_servicio"
                        class="w-full p-2 bg-slate-900 border border-slate-700 rounded-lg outline-none" maxlength="100" placeholder="Ej: 2 años">
                </div>
            </div>

            <div class="border-t border-slate-700 pt-4 mt-4">
                <h6 class="text-sm font-bold text-slate-300 mb-3">Información Complementaria</h6>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div>
                        <label class="block text-sm font-medium mb-1 text-slate-400">¿Pertenece a Evangelio Cambia?</label>
                        <select name="pertenece_evangelio_cambia"
                            class="w-full p-2 bg-slate-900 border border-slate-700 rounded-lg outline-none text-white">
                            <option value="">Seleccione...</option>
                            <option value="si">Sí</option>
                            <option value="no">No</option>
                        </select>
                    </div>
                    <div>
                        <label class="block text-sm font-medium mb-1 text-slate-400">¿Sirve en Otra Área?</label>
                        <select name="sirve_otra_area"
                            class="w-full p-2 bg-slate-900 border border-slate-700 rounded-lg outline-none text-white">
                            <option value="">Seleccione...</option>
                            <option value="si">Sí</option>
                            <option value="no">No</option>
                        </select>
                    </div>
                    <div class="md:col-span-2">
                        <label class="block text-sm font-medium mb-1 text-slate-400">¿Cuál otra área?</label>
                        <input type="text" name="otra_area_detalle"
                            class="w-full p-2 bg-slate-900 border border-slate-700 rounded-lg outline-none" maxlength="100">
                    </div>
                    <div>
                        <label class="block text-sm font-medium mb-1 text-slate-400">¿Bautizado?</label>
                        <select name="bautizado"
                            class="w-full p-2 bg-slate-900 border border-slate-700 rounded-lg outline-none text-white">
                            <option value="">Seleccione...</option>
                            <option value="si">Sí</option>
                            <option value="no">No</option>
                        </select>
                    </div>
                    <div>
                        <label class="block text-sm font-medium mb-1 text-slate-400">¿Asiste a Discipulado?</label>
                        <select name="asiste_discipulado"
                            class="w-full p-2 bg-slate-900 border border-slate-700 rounded-lg outline-none text-white">
                            <option value="">Seleccione...</option>
                            <option value="si">Sí</option>
                            <option value="no">No</option>
                        </select>
                    </div>
                    <div>
                        <label class="block text-sm font-medium mb-1 text-slate-400">¿Usa Transporte?</label>
                        <select name="usa_transporte"
                            class="w-full p-2 bg-slate-900 border border-slate-700 rounded-lg outline-none text-white">
                            <option value="">Seleccione...</option>
                            <option value="si">Sí</option>
                            <option value="no">No</option>
                        </select>
                    </div>
                    <div class="md:col-span-2">
                        <label class="block text-sm font-medium mb-1 text-slate-400">¿Ha sido levantado como servidor?</label>
                        <select name="levantado"
                            class="w-full p-2 bg-slate-900 border border-slate-700 rounded-lg outline-none text-white">
                            <option value="">Seleccione...</option>
                            <option value="si">Sí</option>
                            <option value="no">No</option>
                        </select>
                    </div>
                    <div class="md:col-span-2">
                        <label class="block text-sm font-medium mb-1 text-slate-400">Dirección</label>
                        <textarea name="direccion" rows="3"
                            class="w-full p-2 bg-slate-900 border border-slate-700 rounded-lg outline-none text-white"></textarea>
                    </div>
                </div>
            </div>

            <div class="mt-6 grid grid-cols-1 sm:grid-cols-2 gap-3">
                <button type="reset"
                    class="w-full rounded-lg bg-slate-700 p-2 font-bold text-white transition hover:bg-slate-600">
                    Limpiar
                </button>
                <button type="submit"
                    class="w-full rounded-lg bg-blue-600 p-2 font-bold text-white transition hover:bg-blue-700">
                    Guardar Servidor
                </button>
            </div>
        </form>
    </div>
</div>

{% endblock %}

{% block scripts %}
<script>
    document.addEventListener('DOMContentLoaded', function () {
        const urlParams = new URLSearchParams(window.location.search);
        const msg = urlParams.get('msg');
        const type = urlParams.get('type') || 'info';
        if (msg) {
            const toneClasses = type === 'error'
                ? 'border-red-500/40 bg-red-500/10 text-red-300'
                : type === 'success'
                    ? 'border-emerald-500/40 bg-emerald-500/10 text-emerald-300'
                    : 'border-blue-500/40 bg-blue-500/10 text-blue-300';
            const alertHtml = `
                <div class="rounded-xl border px-4 py-3 text-sm flex items-center justify-between gap-3 ${toneClasses}">
                    <span>${msg}</span>
                    <button type="button" class="text-slate-300 hover:text-white" aria-label="Cerrar" onclick="this.closest('div').remove()">
                        <i class="la la-times"></i>
                    </button>
                </div>`;
            document.getElementById('alert-container').innerHTML = alertHtml;
        }
    });

    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);
            const dt = new Date(yyyy, mm, dd);
            return isNaN(dt.getTime()) ? null : dt;
        }
        const ymd = text.match(/^(\d{4})-(\d{2})-(\d{2})$/);
        if (ymd) {
            const yyyy = parseInt(ymd[1], 10);
            const mm = parseInt(ymd[2], 10) - 1;
            const dd = parseInt(ymd[3], 10);
            const dt = new Date(yyyy, mm, dd);
            return isNaN(dt.getTime()) ? null : dt;
        }
        return null;
    }

    function formatToDisplay(date) {
        if (!date) 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) 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) 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(root) {
        const visibles = root.querySelectorAll('input[data-visible-date]');
        visibles.forEach(v => {
            if (v._dateAttached) return;
            v._dateAttached = true;
            const form = v.closest('form');
            let native = v.parentElement.querySelector('input[type="date"]');
            if (!native && form) native = form.querySelector('input[type="date"][name="fecha_nacimiento"]');

            if (native && native.value) {
                const dt = parseDateFromText(native.value);
                if (dt) v.value = formatToDisplay(dt);
                const edadInput = form && form.querySelector('input[name="edad"]');
                if (edadInput) {
                    const age = calculateAge(dt);
                    if (age !== null && !isNaN(age)) edadInput.value = age;
                }
            }

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

                native.addEventListener('change', () => {
                    const dt = parseDateFromText(native.value);
                    if (dt) v.value = formatToDisplay(dt);
                    const edadInput = form && form.querySelector('input[name="edad"]');
                    if (edadInput) {
                        const age = calculateAge(dt);
                        if (age !== null && !isNaN(age)) edadInput.value = age;
                    }
                });
            }

            v.addEventListener('blur', () => {
                const dt = parseDateFromText(v.value) || null;
                if (native) native.value = dt ? formatToISO(dt) : '';
                const edadInput = form && form.querySelector('input[name="edad"]');
                if (edadInput) {
                    const age = dt ? calculateAge(dt) : '';
                    edadInput.value = (age !== null && !isNaN(age)) ? age : '';
                }
            });
        });
    }

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