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

{% block title %}Crear Movimiento{% endblock %}
{% block active %}sidebar_movimientos_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-users mr-1"></i> Crear Movimiento</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-users mr-1"></i> Crear Movimiento</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 movimiento</h3>
        </div>
        <div class="card-body">
            <form method="post">
                {% csrf_token %}
                <input type="hidden" name="pk_movimiento" value="">
                <input type="hidden" name="foto_url" value="">

                <div class="form-group">
                    <label for="nombre">Nombre</label>
                    <input type="text" class="form-control" id="nombre" name="nombre" placeholder="Ingrese el nombre del movimiento">
                </div>
                <div class="form-group border rounded border-secondary p-2">
                    <label for="foto">Foto o imagen</label>
                    <div class="mb-2">
                        <img id="foto_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" name="foto" accept="image/*">
                        <div class="input-group-append">
                            <span id="foto_clear" class="input-group-text bg-danger" style="cursor: pointer;" title="Limpiar imagen"><i class="fas fa-trash"></i></span>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <label for="pk_partido">Partido Político</label>
                    <select class="form-control select2bs4" id="pk_partido" name="pk_partido">
                        <!-- Aquí puedes cargar dinámicamente los partidos existentes -->
                    </select>
                </div>
                <div class="form-group">
                    <label for="partido">Es un movimiento de partido</label>
                    <select class="form-control select2bs4" id="partido" name="partido">
                        <option value="0">No</option>
                        <option value="1">Sí</option>
                    </select>
                </div>
                <button type="submit" class="btn btn-primary">Guardar</button>
            </form>
        </div>
        <!-- /.card-body -->
        <div class="card-footer">
            <b>Votaciones Internas Honduras 2025</b> - Movimientos
        </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_movimiento = new URLSearchParams(window.location.search).get('pk_movimiento');

    if (pk_movimiento != null) {
        $('[name="pk_movimiento"]').val(pk_movimiento);
        AJAX_REQUEST('{% url "list_movimientos" %}', 'GET', { id: pk_movimiento }, function (response) {
            if (response.result.length != 0) {
                response = response.result[0];
                $('[name="nombre"]').val(response.nombre);
                SELECT2_PARTIDOS('pk_partido', response.pk_partido);
                $('[name="partido"]').val(response.partido);
                $('[name="foto_url"]').val(response.url_foto);

                // 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', response.url_foto);
            } else {
                // No deberia poder usar esta página (PK roto)
            }
        })
    } else {
        SELECT2_PARTIDOS('pk_partido');
    }

    // AÑadir evento
    FILE_ONCHANGE_SUBIBLE('foto');

    // Añadir evento
    FOTO_ONCHANGE_PREVIEW('foto', 'foto_img');

    // ON CLICK LIMPIAR
    $('#foto_clear').on('click', function () {
        $("[name='foto']").val('').trigger("change");
    })

    $('section.content form').validate({
        rules: {
            nombre: {
                required: true,
            },
            // foto: {
            //     required: true,
            // },
            pk_partido: {
                required: true,
            },
            partido: {
                required: true,
            },
        },
        messages: {
            nombre: {
                required: REQUIRED_MESSAGE,
            },
            // foto: {
            //     required: REQUIRED_MESSAGE,
            // },
            pk_partido: {
                required: REQUIRED_MESSAGE,
            },
            partido: {
                required: REQUIRED_MESSAGE,
            },
        },
        submitHandler: function (form) {
            if ($('[name="foto"]').data('subir') == 1) $('[name="foto_url"]').val(null);
            AJAX_FORM(form, '{% url "save_movimiento" %}', '{% url "listar_movimientos" %}', pk_movimiento == null ? 1 : 2);
        }
    });
</script>
{% endblock %}