@extends("intranet/layout2")
@section('title', 'Procesos Electoral')

@section("content2")
    <div class="container-fluid py-2">
        <!-- Encabezado -->
        <div class="d-flex flex-column flex-md-row justify-content-between align-items-start align-items-md-center mb-4 gap-3">
            <div>
                <h4 class="fw-bold mb-1">Proceso Electoral</h4>
                <small class="text-muted">Aqui Podras visualizar todos los Procesos electorales Participados</small>
            </div>

            <button class="btn btn-primary" id="btnactivarproceso">Activar Nuevo Proceso</button>
        </div>

        {{--modal mensaje--}}
        <div id="iddivalertaelectoral" class="alert alert-warning alert-dismissible py-2 mb-2 fade show d-none" role="alert" style="padding-left: 1rem; padding-right: 1rem;">
            <div class="d-flex align-items-center">
                <i class="fas fa-exclamation-circle me-2"></i>
                <span id="iddivalertaelectoralMessage"></span>
            </div>
        </div>

        <!-- Filtros y búsqueda -->
        <div class="row g-2 mb-3">
            <div class="col-md-6 d-flex gap-2 flex-wrap">
                <select class="form-select form-select-sm w-auto" id="idselectfiltrarproceso">
                    <option selected value="0">Filtrar por Proceso electoral</option>
                    <option value="1">Elección Presidencial</option>
                    <option value="2">Elecciones de Congresistas de la República</option>
                    <option value="3">Elecciones Regionales</option>
                    <option value="4">Elecciones Municipales Distritales</option>
                    <option value="5">Elecciones Municipales Provinciales</option>
                </select>
                <select class="form-select form-select-sm w-auto" id="idselectfilasproceso">
                    <option value="10">10 filas</option>
                    <option value="25">25 filas</option>
                    <option value="50">50 filas</option>
                    <option value="100">100 filas</option>
                </select>
            </div>
            <div class="col-md-6">
                <div class="input-group input-group-sm justify-content-md-end">
                    <input type="text" class="form-control" placeholder="Buscar..." id="txtbuscarprocesoelectoral">
                    <button class="btn btn-outline-secondary">
                        <i class="fas fa-search"></i>
                    </button>
                </div>
            </div>
        </div>

        @livewire('electoral.electoral')
    </div>
@endsection

@push('scripts2')
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script>
        if (typeof jQuery == 'undefined') {
            alert('jQuery NO está cargado');
        }

        $(document).ready(function (){
            $("#btnactivarproceso").click(async function (e){
                await activarprocessoelectoral();
            });

            $('#idselectfiltrarproceso, #idselectfilasproceso').change(async function(e) {
                e.preventDefault();
                await listarprocesoelectoral();
            });

            $('#txtbuscarprocesoelectoral').on('input', async function(e) {
                e.preventDefault();
                await listarprocesoelectoral();
            });

            $(document).on('click', '#btneliminarelectoral', async function (e){
                e.preventDefault();
                const id = $(this).data('id'); // Obtiene directamente el ID del data-attribute

                const pregunta = await window.SweetAlertpreguntarSI_NO([{icon: "question",title: `Estas seguro de eliminar el ${id}`}]);
                if(pregunta){
                    $.ajax({
                        url: "/eliminarelectoral",
                        type: "POST",
                        contentType: "application/json",
                        data: JSON.stringify({
                            IdElectoralpartido: id
                        }),
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        },
                        success: async function (response){
                            if(response.success){
                                await listarprocesoelectoral();
                            }

                            window.mostralertaboostrap([{
                                message: response.message,
                                type: response.success === false ? "danger" : "success",
                                iddiv: '#iddivalertaelectoral',
                                iddivmessage: '#iddivalertaelectoralMessage'
                            }]);
                        },
                        error: function (error){
                            window.mostralertaboostrap([{
                                message:error.responseJSON.message || 'Ocurrió un error al guardar',
                                type: "danger",
                                iddiv: '#iddivalertaelectoral',
                                iddivmessage: '#iddivalertaelectoralMessage'
                            }]);
                        }
                    });
                }
            });

            $(document).on('click', '#btndetalleelectoral', async function (e){
                e.preventDefault();
                const idelectoral = $(this).data('id'); // Obtiene directamente el ID del data-attribute
                window.location.replace(`/detalleelectoral/${idelectoral}`);
            });
        });

        async function activarprocessoelectoral(){
            const pregunta = await window.SweetAlertpreguntarSI_NO([{title: "Estas seguro de activar un nuevo proceso electoral?"}]);
            if(pregunta){
                window.SweetAlertProgressOpen1([{
                    title: "Verificando porfavor espera"
                }]);

                $.ajax({
                    url: "/activacionelectoral",
                    type: "POST",
                    contentType: "application/json",
                    // data: JSON.stringify(datos),
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    success: async function (response){
                        window.SweetAlertProgressClose1();
                        if(response.success){
                            // Actualizar Livewire
                            await listarprocesoelectoral();
                        }

                        window.mostralertaboostrap([{
                            message: response.message,
                            type: response.success === false ? "danger" : "success",
                            iddiv: '#iddivalertaelectoral',
                            iddivmessage: '#iddivalertaelectoralMessage'
                        }]);
                    },
                    error: function(xhr) {
                        window.SweetAlertProgressClose1();
                        window.mostralertaboostrap([{
                            message:xhr.responseJSON.message || 'Ocurrió un error al guardar',
                            type: "danger",
                            iddiv: '#iddivalertaelectoral',
                            iddivmessage: '#iddivalertaelectoralMessage'
                        }]);
                        // console.error('Error:', xhr.responseJSON);
                        // Swal.fire({
                        //     icon: 'error',
                        //     title: 'Error',
                        //     text: xhr.responseJSON.message || 'Ocurrió un error al guardar'
                        // });
                    }
                });
            }
        }

        async function listarprocesoelectoral() {
            const datos = {
                buscar: $('#txtbuscarprocesoelectoral').val().trim(),
                filtrarproceso: $('#idselectfiltrarproceso').val(),
                filtrarfila: $('#idselectfilasproceso').val()
            }

            return new Promise((resolve, reject) => {
                if(window.Livewire) {
                    Livewire.dispatch('listarprocesoelectoralDesdeJS', [datos]);
                    Livewire.on('respuestalistarprocesoelectoralDesdeJS', (respuesta) => {
                        if(respuesta[0]["success"]){
                            // mostrarError(respuesta[0]["mensaje"]);
                            resolve(true);
                        }else{
                            resolve(false); // Resolvemos la promesa cuando el proceso termina
                        }

                    });
                } else {
                    // Si Livewire no está disponible, rechazamos la promesa
                    reject("error");
                    // reject('Livewire no está disponible');
                }
            });

            // return new Promise(resolve => setTimeout(resolve, ms));
        }
    </script>
@endpush