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

@section("content2")
    <!-- Header con botón de volver y título -->
    <header class="bg-light py-1 px-2 border-bottom">
        <input type="hidden" id="txtidelectoral" value="{{ $idelectoral }}">
        <div class="d-flex justify-content-between align-items-center">
            <div class="d-flex align-items-center">
                <button id="btnvolverdetalleelectoral" class="btn btn-outline-secondary me-3">
                    <i class="fas fa-arrow-left me-1"></i>
                </button>
                <h5 class="mb-0 text-black">Detalle del Proceso Electoral</h5>
            </div>
            <button type="button" id="btnAccionSecundaria" class="btn btn-primary btn-sm" data-target-modal="">
                <i class="fas fa-add me-1"></i> Asignar
            </button>
        </div>
    </header>

    <div class="container my-2">
        <div class="row g-3">
            <!-- Card 1: Información de Mesa -->
            <div class="col-md-6 col-lg-3">
                <a href="#" class="text-decoration-none card-link" data-card-type="candidatos">
                    <div class="card border-primary h-100 shadow-sm card-hover">
                        <div class="card-body">
                            <div class="d-flex align-items-center mb-3">
                                <div class="bg-primary bg-opacity-10 p-2 rounded me-3">
                                    <i class="fas fa-hashtag text-primary"></i>
                                </div>
                                <div>
                                    <p class="small text-muted mb-0">N° Candidatos</p>
                                    <p class="fw-bold mb-0">{{ $totalcandidatos  }}</p>
                                </div>
                            </div>
                            <div class="text-center">
                            <span class="text-primary detail-link">
                                <i class="fas fa-eye me-1"></i> Ver detalle
                            </span>
                            </div>
                        </div>
                    </div>
                </a>
            </div>

            <!-- Card 2: Ubicación -->
            <div class="col-md-6 col-lg-3">
                <a href="#" class="text-decoration-none card-link" data-card-type="personeros">
                    <div class="card border-success h-100 shadow-sm card-hover">
                        <div class="card-body">
                            <div class="d-flex align-items-center mb-4">
                                <div class="bg-primary bg-opacity-10 p-2 rounded me-3">
                                    <i class="fas fa-hashtag text-primary"></i>
                                </div>
                                <div>
                                    <p class="small text-muted mb-0">Personeros Asignados</p>
                                    <p class="fw-bold mb-0">{{ $totalpersoneros }}</p>
                                </div>
                            </div>
                            <div class="text-center">
                            <span class="text-success detail-link">
                                <i class="fas fa-eye me-1"></i> Ver detalle
                            </span>
                            </div>
                        </div>
                    </div>
                </a>
            </div>

            <!-- Card 3: Estadísticas -->
            <div class="col-md-6 col-lg-3">
                <a href="#" class="text-decoration-none card-link" data-card-type="coordinadores">
                    <div class="card border-info h-100 shadow-sm card-hover">

                        <div class="card-body">
                            <div class="d-flex align-items-center mb-4">
                                <div class="bg-primary bg-opacity-10 p-2 rounded me-3">
                                    <i class="fas fa-hashtag text-primary"></i>
                                </div>
                                <div>
                                        <p class="small text-muted mb-0">Coordinadores Asignados</p>
                                    <p class="fw-bold mb-0">{{ $totalcoordinador }}</p>
                                </div>
                            </div>
                            <div class="text-center mt-3">
                                <span class="text-info detail-link">
                                    <i class="fas fa-eye me-1"></i> Ver detalle
                                </span>
                            </div>
                        </div>
                    </div>
                </a>
            </div>

            <!-- Card 4: Acciones -->
            <div class="col-md-6 col-lg-3">
                <a href="#" class="text-decoration-none card-link" data-card-type="otro">
                    <div class="card border-warning h-100 shadow-sm card-hover">
                        <div class="card-body d-flex flex-column">
                            <div class="text-center mt-auto">
                                <span class="text-warning detail-link">
                                    <i class="fas fa-eye me-1"></i> Ver detalle
                                </span>
                            </div>
                        </div>
                    </div>
                </a>
            </div>
        </div>
    </div>

    <div id="iddivcirculeprogressbar" class="d-none justify-content-center align-items-center" style="height: calc(100vh - 240px);">
        <div class="text-center">
            <div class="spinner-border text-success" style="width: 3rem; height: 3rem;" role="status">
                <span class="visually-hidden">Cargando...</span>
            </div>
            <div class="mt-3 fw-semibold text-success">Procesando datos...</div>
        </div>
    </div>

    {{--modal mensaje--}}
    <div id="iddivalertacandidatoelectoral" 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="iddivalertacandidatoelectoralMessage"></span>
        </div>
    </div>

    <div class="d-none" id="iddivcandidatoselectorales">
        @livewire('electoral.detalle.candidatoselectoral', ['electoralId' => $idelectoral])
    </div>

    <div class="d-none" id="iddivmesaselectorales">
        @livewire('electoral.detalle.mesaselectoral', ['electoralId' => $idelectoral])
    </div>


    @livewire('electoral.detalle.coordinadorelectoral')


    <!-- Modal 1 -->
    <div class="modal fade" id="idmdalCandidatos" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header bg-primary text-white">
                    <h5 class="modal-title">Asignar Nuevo Candidato</h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form id="formAsignarCandidato">
                        @csrf
                        {{--modal mensaje--}}
                        <div id="iddivalertacandidatoelectoral2" 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="iddivalertacandidatoelectoralMessage2"></span>
                            </div>
                        </div>

                        <div class="mb-4">
                            <input type="hidden" id="txtcandidatoelecotral">
                            <label class="form-label fw-bold">Seleccione al Candidato</label>
                            <select class="form-select" id="idselectcandidato" name="idselectcandidato" required>
                                <option value="">Seleccionar...</option>
                                @forelse($candidatos as $cand)
                                    <option value="{{ $cand['IdCandidato'] }}">{{ $cand['NombreCandidato'] }} </option>
                                @empty
                                    <option value="" disabled>No hay candidatos</option>
                                @endforelse
                            </select>

                            <br>
                            <label for="idselcetmotivotraslado" class="form-label small fw-bold">Tipo de Postulacion</label>
                            <select class="form-select form-select-sm" id="idselecttipopostulacion" name="motivotraslado" required>
                                <option value="">Seleccionar...</option>
                                <option value="1">Alcalde Regional</option>
                                <option value="2">Alcalde Provincial</option>
                                <option value="3">Alcalde Distrital</option>
                                <option value="4">Alcalde Nacional</option>
                            </select>
                        </div>

                        <div class="modal-footer">
                            <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">
                                <i class="fas fa-times me-1"></i> Cancelar
                            </button>
                            <button type="submit" id="btnGuardarCandidato" class="btn btn-primary">
                                <i class="fas fa-user-plus me-1"></i> Asignar
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal 2-->
    <div class="modal fade" id="idmodalpersonero" tabindex="-1" aria-labelledby="idmodalpersonero" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="idmodalpersoneroLabel">Modal title</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    ...
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary">Save changes</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal 3-->
    <div class="modal fade" id="idmodalcoordinador" tabindex="-1" aria-labelledby="idmodalcoordinador" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="idmodalcoordinadorLabel">Modal title</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    ...
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary">Save changes</button>
                </div>
            </div>
        </div>
    </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 src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.14.0-beta3/dist/js/bootstrap-select.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.14.0-beta3/dist/js/i18n/defaults-es_ES.min.js"></script>
    <script>
        const fecha = new Date();
        const fechaLocal = fecha.getFullYear() + "-" +
            ("0" + (fecha.getMonth() + 1)).slice(-2) + "-" +
            ("0" + fecha.getDate()).slice(-2) + " " +
            ("0" + fecha.getHours()).slice(-2) + ":" +
            ("0" + fecha.getMinutes()).slice(-2) + ":" +
            ("0" + fecha.getSeconds()).slice(-2);

        let currentCardType = ''; // Variable para almacenar el tipo de tarjeta seleccionada
        $(document).ready(function(){
            $(document).on('click', '#btnvolverdetalleelectoral', function (e){
                e.preventDefault();
                window.location.replace("/electoral");
            });

            $(document).on('click', '.card-link', async function(e) {
                e.preventDefault();

                const cardType = $(this).data('card-type');
                currentCardType = cardType;
                updateSecondaryButton(currentCardType);

                $('#iddivcandidatoselectorales').removeClass('d-block').addClass('d-none');
                $('#iddivmesaselectorales').removeClass('d-block').addClass('d-none');
                $('#iddivcirculeprogressbar').removeClass('d-none').addClass('d-flex');

                switch(cardType) {
                    case 'candidatos':
                        await listarcandidatoselecotral();
                        $('#iddivcirculeprogressbar').removeClass('d-flex').addClass('d-none');
                        $('#iddivcandidatoselectorales').removeClass('d-none').addClass('d-block');
                        break;
                    case 'personeros':
                        await listarmesaselecotral();
                        $('#iddivcirculeprogressbar').removeClass('d-flex').addClass('d-none');
                        $('#iddivmesaselectorales').removeClass('d-none').addClass('d-block');

                        // manejarClickPersoneros();
                        break;
                    case 'coordinadores':
                        // manejarClickCoordinadores();
                        break;
                    default:
                        // manejarClickDefault();
                }
            });

            // Manejar clic en el botón secundario
            $('#btnAccionSecundaria').click(function() {
                const modalId = $(this).attr('data-target-modal');

                if (!modalId) {
                    window.SweetAlert2([{
                        title: "Seleccione una opción",
                        text: "Por favor, seleccione primero una categoría",
                        icon: "warning"
                    }]);
                    return;
                }

                // Abrir el modal correspondiente
                const modal = new bootstrap.Modal(document.getElementById(modalId));
                modal.show();

                // Opcional: cargar datos específicos del modal
                saberclicbotonabrirmodl(modalId, currentCardType);
            });

            $("#formAsignarCandidato").submit(function(e) {
                e.preventDefault();

                // Desactivar inputs y botón
                const $form = $(this);
                $form.find(":input").prop("disabled", true);

                const datos = {
                    idcandidatoelectoral: $("#txtcandidatoelecotral").val(),
                    idelectoral : $("#txtidelectoral").val(),
                    idselecttipopostulacion: $("#idselecttipopostulacion").val(),
                    idselectcandidato: $("#idselectcandidato").val(),
                    fecharegistro: fechaLocal,
                    _token: $('input[name="_token"]').val()
                };

                // Mostrar loader o deshabilitar botón si es necesario
                const submitBtn = $(this).find('button[type="submit"]');
                submitBtn.prop('disabled', true).html('<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> Guardando...');

                // Enviar datos al servidor (AJAX)
                $.ajax({
                    url: "/guardarcandidatoelectoral", // Ruta en Laravel
                    type: "POST",
                    contentType: "application/json",
                    data: JSON.stringify(datos),
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    success: async function(response) {
                        if (!response.success) {
                            $form.find(":input").prop("disabled", false);
                            submitBtn.prop('disabled', false).text('Confirmar asignacion');
                            window.mostralertaboostrap([{
                                message: response.message,
                                type: response.success === false ? "danger" : "success",
                                iddiv: '#iddivalertacandidatoelectoral2',
                                iddivmessage: '#iddivalertacandidatoelectoralMessage2'
                            }]);
                        }else{
                            // Actualizar Livewire
                            await listarcandidatoselecotral();
                            window.mostralertaboostrap([{
                                message: response.message,
                                type: response.success === false ? "danger" : "success",
                                iddiv: '#iddivalertacandidatoelectoral',
                                iddivmessage: '#iddivalertacandidatoelectoralMessage'
                            }]);

                            // Resetear y cerrar modal
                            $form[0].reset();
                            submitBtn.prop('disabled', false).text('Confirmar asignacion');
                            bootstrap.Modal.getInstance($('#idmdalCandidatos')[0]).hide();
                        }

                    },
                    error: function(error) {
                        window.mostralertaboostrap([{
                            message: error.responseJSON.message,
                            type: "danger",
                            iddiv: '#iddivalertacandidatoelectoral2',
                            iddivmessage: '#iddivalertacandidatoelectoralMessage2'
                        }]);

                        // alert("Error: " + xhr.responseJSON.message);
                    }
                });
            });
        });

        async function listarcandidatoselecotral() {
            return new Promise((resolve, reject) => {
                if(window.Livewire) {
                    Livewire.dispatch('listarcandidatoelectoralDesdeJS');
                    Livewire.on('respuestalistarcandidatoelectoralDesdeJS', (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");
                }
            });

            // return new Promise(resolve => setTimeout(resolve, ms));
        }

        async function listarmesaselecotral() {
            return new Promise((resolve, reject) => {
                if(window.Livewire) {
                    Livewire.dispatch('listarmesaselectoralDesdeJS');
                    Livewire.on('respuestalistarmesaselectoralDesdeJS', (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");
                }
            });

            // return new Promise(resolve => setTimeout(resolve, ms));
        }

        // Función para actualizar el botón secundario
        function updateSecondaryButton(cardType) {
            const $btn = $('#btnAccionSecundaria');

            // Configurar el botón según el tipo de tarjeta
            switch(cardType) {
                case 'candidatos':
                    $btn.attr('data-target-modal', 'idmdalCandidatos')
                        .html('<i class="fas fa-user-plus me-1"></i> Asignar Candidato');


                    break;
                case 'personeros':
                    $btn.attr('data-target-modal', 'idmodalpersonero')
                        .html('<i class="fas fa-user-tie me-1"></i> Asignar Personero');
                    break;
                case 'coordinadores':
                    $btn.attr('data-target-modal', 'idmodalcoordinador')
                        .html('<i class="fas fa-users-cog me-1"></i> Asignar Coordinador');
                    break;
                default:
                    $btn.attr('data-target-modal', '')
                        .html('<i class="fas fa-add me-1"></i> Asignar');
            }
        }

        // Función para cargar datos en el modal (opcional)
        function saberclicbotonabrirmodl(modalId, cardType) {
            switch(modalId) {
                case 'idmdalCandidatos':
                    // Cargar datos para modal de candidatos
                    break;
                case 'idmodalpersonero':
                    // Cargar datos para modal de personeros
                    break;
                case 'idmodalcoordinador':
                    // Cargar datos para modal de coordinadores
                    break;
            }
        }
    </script>
@endpush

<style>
    .card-hover {
        transition: all 0.3s ease;
    }
    .card-hover:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    }
    .detail-link {
        position: relative;
        overflow: hidden;
        transition: all 0.3s ease;
    }
    .detail-link::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 2px;
        background: currentColor;
        transform: scaleX(0);
        transform-origin: right;
        transition: transform 0.3s ease;
    }
    .detail-link:hover::after {
        transform: scaleX(1);
        transform-origin: left;
    }
</style>