{% extends 'base.html' %}{% load static %}
{% load static %}

{% block title %}Crear Candidato{% endblock %}
{% block active %}sidebar_candidatos_crear{% endblock %}

{% block content %}
<!-- Content Header (Page header) -->
<section class="content-header">
    <div class="container-fluid">
        <div class="row mb-2">
            <div class="col-sm-6">
                <h1><i class="nav-icon fas fa-user-friends mr-1"></i> Crear Candidato</h1>
            </div>
            <div class="col-sm-6">
                <ol class="breadcrumb float-sm-right">
                    <li class="breadcrumb-item"><a href="{% url 'dashboard_votaciones' %}">Inicio</a></li>
                    <li class="breadcrumb-item active"><i class="nav-icon fas fa-user-friends mr-1"></i> Crear Candidato</li>
                </ol>
            </div>
        </div>
    </div><!-- /.container-fluid -->
</section>

<!-- Main content -->
<section class="content">

    <!-- block content -->
    <!-- Default box -->
    <div class="card">
        <div class="card-header">
            <h3 class="card-title"><b>Votaciones Internas Honduras 2025</b> - Formulario de registro de candidato</h3>
        </div>
        <div class="card-body">
            <form method="post" enctype="multipart/form-data">
                {% csrf_token %}
                <input type="hidden" name="pk_candidato" value="">
                <input type="hidden" name="foto_papeleta_url" value="">
                <input type="hidden" name="foto_perfil_url" value="">
                <input type="hidden" name="foto_identidad_anverso_url" value="">
                <input type="hidden" name="foto_identidad_reverso_url" value="">
                <input type="hidden" name="archivo_adicional_url" value="">

                <div class="row">
                    <div class="col-sm-6">
                        <div class="form-group">
                            <label for="nombres">Nombres</label>
                            <input type="text" class="form-control" id="nombres" name="nombres" placeholder="Ingrese los nombres del candidato">
                        </div>
                    </div>
                    <div class="col-sm-6">
                        <div class="form-group">
                            <label for="apellidos">Apellidos</label>
                            <input type="text" class="form-control" id="apellidos" name="apellidos" placeholder="Ingrese los apellidos del candidato">
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <label for="direccion">Dirección</label>
                    <input type="text" class="form-control" id="direccion" name="direccion" placeholder="Ingrese la dirección del candidato">
                </div>
                <div class="row">
                    <div class="col-sm-6">
                        <div class="form-group">
                            <label for="telefono">Teléfono</label>
                            <input type="text" class="form-control" id="telefono" name="telefono" placeholder="Ingrese el teléfono del candidato">
                        </div>
                    </div>
                    <div class="col-sm-6">
                        <div class="form-group">
                            <label for="celular">Celular</label>
                            <input type="text" class="form-control" id="celular" name="celular" placeholder="Ingrese el celular del candidato">
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-6">
                        <div class="form-group">
                            <label for="email">Email</label>
                            <input type="email" class="form-control" id="email" name="email" placeholder="Ingrese el correo electrónico del candidato">
                        </div>
                    </div>
                    <div class="col-sm-6">
                        <div class="form-group">
                            <label for="pk_sexo">Sexo</label>
                            <select class="form-control select2bs4" id="pk_sexo" name="pk_sexo">
                            </select>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-6">
                        <div class="form-group">
                            <label for="fecha_nacimiento">Fecha de Nacimiento</label>
                            <input type="date" class="form-control" id="fecha_nacimiento" name="fecha_nacimiento">
                        </div>
                    </div>
                    <div class="col-sm-6">
                        <div class="form-group">
                            <label for="pk_nacionalidad">Nacionalidad</label>
                            <select class="form-control select2bs4" id="pk_nacionalidad" name="pk_nacionalidad">
                            </select>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-6">
                        <div class="form-group">
                            <label for="identidad">Identidad</label>
                            <input type="text" class="form-control" id="identidad" name="identidad" placeholder="Ingrese el número de identidad del candidato">
                        </div>
                    </div>
                    <div class="col-sm-6">
                        <div class="form-group">
                            <label for="rtn">RTN</label>
                            <input type="text" class="form-control" id="rtn" name="rtn" placeholder="Ingrese el RTN del candidato">
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-6">
                        <div class="form-group border rounded border-secondary p-2">
                            <label for="foto_perfil">Foto de Perfil</label>
                            <div class="mb-2">
                                <img id="foto_perfil_img" src="{% static 'img/no-image.jpg' %}" alt="Previsualización" class="img-fluid border rounded" style="max-height: 200px;">
                            </div>
                            <div class="input-group">
                                <input type="file" data-subir="1" class="form-control" id="foto_perfil" name="foto_perfil" accept="image/*">
                                <div class="input-group-append">
                                    <span id="foto_perfil_tomar" class="input-group-text bg-primary" style="cursor: pointer;" title="Tomar fotografía"><i class="fas fa-camera"></i></span>
                                </div>
                                <div class="input-group-append">
                                    <span id="foto_perfil_clear" class="input-group-text bg-danger" style="cursor: pointer;" title="Limpiar imagen"><i class="fas fa-trash"></i></span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-6">
                        <div class="form-group border rounded border-secondary p-2">
                            <label for="foto_papeleta">Foto de Papeleta</label>
                            <div class="mb-2">
                                <img id="foto_papeleta_img" src="{% static 'img/no-image.jpg' %}" alt="Previsualización" class="img-fluid border rounded" style="max-height: 200px;">
                            </div>
                            <div class="input-group">
                                <input type="file" data-subir="1" class="form-control" id="foto_papeleta" name="foto_papeleta" accept="image/*">
                                <div class="input-group-append">
                                    <span id="foto_papeleta_clear" class="input-group-text bg-danger" style="cursor: pointer;" title="Limpiar imagen"><i class="fas fa-trash"></i></span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-6">
                        <div class="form-group border rounded border-secondary p-2">
                            <label for="foto_identidad_anverso">Foto Identidad (Anverso)</label>
                            <div class="mb-2">
                                <img id="foto_identidad_anverso_img" src="{% static 'img/no-image.jpg' %}" alt="Previsualización" class="img-fluid border rounded" style="max-height: 200px;">
                            </div>
                            <div class="input-group">
                                <input type="file" data-subir="1" class="form-control" id="foto_identidad_anverso" name="foto_identidad_anverso" accept="image/*">
                                <div class="input-group-append">
                                    <span id="foto_identidad_anverso_tomar" class="input-group-text bg-primary" style="cursor: pointer;" title="Tomar fotografía"><i class="fas fa-camera"></i></span>
                                </div>
                                <div class="input-group-append">
                                    <span id="foto_identidad_anverso_clear" class="input-group-text bg-danger" style="cursor: pointer;" title="Limpiar imagen"><i class="fas fa-trash"></i></span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-6">
                        <div class="form-group border rounded border-secondary p-2">
                            <label for="foto_identidad_reverso">Foto Identidad (Reverso)</label>
                            <div class="mb-2">
                                <img id="foto_identidad_reverso_img" src="{% static 'img/no-image.jpg' %}" alt="Previsualización" class="img-fluid border rounded" style="max-height: 200px;">
                            </div>
                            <div class="input-group">
                                <input type="file" data-subir="1" class="form-control" id="foto_identidad_reverso" name="foto_identidad_reverso" accept="image/*">
                                <div class="input-group-append">
                                    <span id="foto_identidad_reverso_tomar" class="input-group-text bg-primary" style="cursor: pointer;" title="Tomar fotografía"><i class="fas fa-camera"></i></span>
                                </div>
                                <div class="input-group-append">
                                    <span id="foto_identidad_reverso_clear" class="input-group-text bg-danger" style="cursor: pointer;" title="Limpiar imagen"><i class="fas fa-trash"></i></span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-6">
                        <div class="form-group">
                            <label for="pk_movimiento">Movimiento</label>
                            <select class="form-control select2bs4" id="pk_movimiento" name="pk_movimiento">
                            </select>
                        </div>
                    </div>
                    <div class="col-sm-6">
                        <div class="form-group">
                            <label for="pk_tipo">Tipo de Candidato</label>
                            <select class="form-control select2bs4" id="pk_tipo" name="pk_tipo">
                            </select>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-4">
                        <div class="form-group">
                            <label for="pk_eleccion_proceso">Proceso Electoral</label>
                            <select class="form-control select2bs4" id="pk_eleccion_proceso" name="pk_eleccion_proceso">
                            </select>
                        </div>
                    </div>
                    <div class="col-sm-4">
                        <div class="form-group">
                            <label for="pk_region">Región</label>
                            <select class="form-control select2bs4" id="pk_region" name="pk_region">
                            </select>
                        </div>
                    </div>
                    <div class="col-sm-4">
                        <div class="form-group">
                            <div class="form-group">
                                <label for="casilla"># Casilla</label>
                                <input type="number" class="form-control" id="casilla" name="casilla" placeholder="Ingrese el número de casilla del candidato">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <label for="pk_candidato_mayor">Candidato Propietario</label>
                    <select class="form-control select2bs4" id="pk_candidato_mayor" name="pk_candidato_mayor">
                    </select>
                </div>
                <div class="form-group border rounded border-secondary p-2">
                    <label for="archivo_adicional">Archivo Adicional</label>
                    <div class="input-group">
                        <input type="file" data-subir="1" class="form-control" id="archivo_adicional" name="archivo_adicional">
                        <div class="input-group-append">
                            <span id="archivo_adicional_clear" class="input-group-text bg-danger" style="cursor: pointer;" title="Limpiar imagen"><i class="fas fa-trash"></i></span>
                        </div>
                    </div>
                </div>
                <button type="submit" class="btn btn-primary">Guardar</button>
            </form>
        </div>
        <!-- /.card-body -->
        <div class="card-footer">
            <b>Votaciones Internas Honduras 2025</b> - Candidatos
        </div>
        <!-- /.card-footer-->
    </div>
    <!-- /.card -->

</section>
<!-- /.content -->
{% endblock %}

{% block scripts %}
<script>
    if (new URLSearchParams(window.location.search).get('opc') == 4) $('section.content').find('button[type="submit"]').hide();

    let pk_candidato = new URLSearchParams(window.location.search).get('pk_candidato');

    if (pk_candidato != null) {
        $('[name="pk_candidato"]').val(pk_candidato);
        AJAX_REQUEST('{% url "list_candidatos" %}', 'GET', { id: pk_candidato }, function (response) {
            if (response.result.length != 0) {
                response = response.result[0];
                $('[name="nombres"]').val(response.nombres);
                $('[name="apellidos"]').val(response.apellidos);
                $('[name="direccion"]').val(response.direccion);
                $('[name="telefono"]').val(response.telefono);
                $('[name="celular"]').val(response.celular);
                $('[name="email"]').val(response.email);
                $('[name="fecha_nacimiento"]').val(response.fecha_nacimiento);
                $('[name="identidad"]').val(response.identidad);
                $('[name="rtn"]').val(response.rtn);
                $('[name="casilla"]').val(response.casilla);
                $('[name="foto_papeleta_url"]').val(response.url_foto_papeleta);
                $('[name="foto_perfil_url"]').val(response.url_foto_perfil);
                $('[name="foto_identidad_anverso_url"]').val(response.url_foto_identidad_anverso);
                $('[name="foto_identidad_reverso_url"]').val(response.url_foto_identidad_reverso);
                $('[name="archivo_adicional_url"]').val(response.url_archivo_adicional);
                SELECT2_SEXOS('pk_sexo', response.pk_sexo);
                SELECT2_NACIONALIDADES('pk_nacionalidad', response.pk_nacionalidad);
                SELECT2_MOVIMIENTOS('pk_movimiento', response.pk_movimiento);
                SELECT2_ELECCIONES_PROCESO('pk_eleccion_proceso', response.pk_eleccion_proceso);
                SELECT2_REGIONES('pk_region', response.pk_region);
                SELECT2_CANDIDATOS_TIPO('pk_tipo', response.pk_tipo);
                SELECT2_CANDIDATOS('pk_candidato_mayor', response.pk_candidato_mayor, true);

                // Para que el user vea el campo lleno o no
                // (FILE_LOAD dispara trigger('change') y también deja el input file no subible)
                FILE_LOAD('foto_perfil', response.url_foto_perfil);
                FILE_LOAD('foto_papeleta', response.url_foto_papeleta);
                FILE_LOAD('foto_identidad_anverso', response.url_foto_identidad_anverso);
                FILE_LOAD('foto_identidad_reverso', response.url_foto_identidad_reverso);
                FILE_LOAD('archivo_adicional', response.url_archivo_adicional);

            } else {
                // No deberia poder usar esta página (PK roto)
            }
        })
    } else {
        SELECT2_SEXOS('pk_sexo');
        SELECT2_NACIONALIDADES('pk_nacionalidad');
        SELECT2_MOVIMIENTOS('pk_movimiento');
        SELECT2_ELECCIONES_PROCESO('pk_eleccion_proceso');
        SELECT2_REGIONES('pk_region');
        SELECT2_CANDIDATOS_TIPO('pk_tipo');
        SELECT2_CANDIDATOS('pk_candidato_mayor', null, true);
    }

    // Añadir evento
    FILE_ONCHANGE_SUBIBLE('foto_perfil');
    FILE_ONCHANGE_SUBIBLE('foto_papeleta');
    FILE_ONCHANGE_SUBIBLE('foto_identidad_anverso');
    FILE_ONCHANGE_SUBIBLE('foto_identidad_reverso');
    FILE_ONCHANGE_SUBIBLE('archivo_adicional');

    // Añadir evento
    FOTO_ONCHANGE_PREVIEW('foto_perfil', 'foto_perfil_img');
    FOTO_ONCHANGE_PREVIEW('foto_papeleta', 'foto_papeleta_img');
    FOTO_ONCHANGE_PREVIEW('foto_identidad_anverso', 'foto_identidad_anverso_img');
    FOTO_ONCHANGE_PREVIEW('foto_identidad_reverso', 'foto_identidad_reverso_img');

    // ON CLICK TOMAR FOTO
    $('#foto_perfil_tomar').on('click', function () {
        TOMAR_FOTO('foto_perfil', 'Tomar Fotografía de Perfil del Candidato');
    })
    $('#foto_identidad_anverso_tomar').on('click', function () {
        TOMAR_FOTO('foto_identidad_anverso', 'Tomar Fotografía de Indentidad (Anverso) del Candidato');
    })
    $('#foto_identidad_reverso_tomar').on('click', function () {
        TOMAR_FOTO('foto_identidad_reverso', 'Tomar Fotografía de Indentidad (Reverso) del Candidato');
    })

    // ON CLICK LIMPIAR
    $('#foto_perfil_clear').on('click', function () {
        $("[name='foto_perfil']").val('').trigger("change");
    })
    $('#foto_papeleta_clear').on('click', function () {
        $("[name='foto_papeleta']").val('').trigger("change");
    })
    $('#foto_identidad_anverso_clear').on('click', function () {
        $("[name='foto_identidad_anverso']").val('').trigger("change");
    })
    $('#foto_identidad_reverso_clear').on('click', function () {
        $("[name='foto_identidad_reverso']").val('').trigger("change");
    })
    $('#archivo_adicional_clear').on('click', function () {
        $("[name='archivo_adicional']").val('').trigger("change");
    })


    $(document).ready(function () {
        // Validación con jQuery Validation
        $('section.content form').validate({
            rules: {
                nombres: { required: true },
                apellidos: { required: true },
                direccion: { required: true },
                celular: { required: true, minlength: 8 },
                identidad: { required: true, minlength: 13 },

                // rtn: { required: true, minlength: 14 },
                email: { email: true },
                // email: { required: true, email: true },
                // fecha_nacimiento: { required: true },
                pk_movimiento: { required: true },
                pk_eleccion_proceso: { required: true },
                pk_region: { required: true },
                pk_tipo: { required: true },
                // pk_candidato_mayor: { required: true },
                pk_sexo: { required: true },
                // pk_nacionalidad: { required: true },
            },
            messages: {
                nombres: { required: REQUIRED_MESSAGE },
                apellidos: { required: REQUIRED_MESSAGE },
                direccion: { required: REQUIRED_MESSAGE },
                celular: { required: REQUIRED_MESSAGE, minlength: 'Debe tener 8 dígitos.', },
                identidad: { required: REQUIRED_MESSAGE, minlength: 'Debe tener 13 dígitos.', },

                // rtn: { required: REQUIRED_MESSAGE, minlength: 'Debe tener 14 dígitos.', },
                email: { email: 'Ingrese un email válido.' },
                // email: { required: REQUIRED_MESSAGE, email: 'Ingrese un email válido.' },
                // fecha_nacimiento: { required: REQUIRED_MESSAGE },
                pk_movimiento: { required: REQUIRED_MESSAGE },
                pk_eleccion_proceso: { required: REQUIRED_MESSAGE },
                pk_region: { required: REQUIRED_MESSAGE },
                pk_tipo: { required: REQUIRED_MESSAGE },
                // pk_candidato_mayor: { required: REQUIRED_MESSAGE },
                pk_sexo: { required: REQUIRED_MESSAGE },
                // pk_nacionalidad: { required: REQUIRED_MESSAGE },
            },
            submitHandler: function (form) {
                if ($('[name="foto_papeleta"]').data('subir') == 1) $('[name="foto_papeleta_url"]').val(null);
                if ($('[name="foto_perfil"]').data('subir') == 1) $('[name="foto_perfil_url"]').val(null);
                if ($('[name="foto_identidad_anverso"]').data('subir') == 1) $('[name="foto_identidad_anverso_url"]').val(null);
                if ($('[name="foto_identidad_reverso"]').data('subir') == 1) $('[name="foto_identidad_reverso_url"]').val(null);
                if ($('[name="archivo_adicional"]').data('subir') == 1) $('[name="archivo_adicional_url"]').val(null);
                AJAX_FORM(form, '{% url "save_candidato" %}', '{% url "listar_candidatos" %}', pk_candidato == null ? 1 : 2);
            }
        });
    });
</script>
{% endblock %}