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

@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">Candidatos</h4>
                <small class="text-muted">Gestion de Candidatos</small>
            </div>

            <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#modalnuevocandidato" id="btnnuevocandidato">Nuevo Candidato</button>
        </div>

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

        <!-- Filtros y búsqueda -->
        <div class="row g-2 mb-3">
            <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="txtbuscarcandidato">
                    <button class="btn btn-outline-secondary" id="btnbuscarcandidato">
                        <i class="fas fa-search"></i>
                    </button>
                </div>
            </div>

            <div class="col-md-6 d-flex gap-2 flex-wrap">
                <select class="form-select form-select-sm w-auto" id="idfilascandidato">
                    <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>

        <!-- Loader animado profesional -->
        <div id="idloaderscandidatos" class="custom-loader mb-3" style="display: none;"></div>
        @livewire('candidato.candidato')
    </div>

    <!-- Modal -->
    <div class="modal fade" id="modalnuevocandidato" tabindex="-1" aria-labelledby="modalnuevocandidato" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="idlabeltitlemodalcandidato">Candidato Nuevo</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form id="idformcandidato" class="needs-validation" enctype="multipart/form-data">
                        @csrf
                        <input type="hidden" class="form-control" id="idpersonacandidato" name="idpersonacandidato" value="">
                        <input type="hidden" class="form-control" id="idcandidato" name="idcandidato" value="">
                        <div class="row g-3">
                            <div class="col-md-6">
                                <label class="form-label">Nombre</label>
                                <input type="text" class="form-control" id="idtxtnombrecandidato" name="nombre" required>
                            </div>

                            <div class="col-md-6">
                                <label class="form-label">Correo</label>
                                <input type="email" class="form-control" id="idtxtcorreocandidato" name="correo" required>
                            </div>

                            <div class="col-md-12">
                                <label class="form-label">Dirección</label>
                                <input type="text" class="form-control" id="idtxtdireccioncandidato" name="direccion">
                            </div>

                            <div class="col-md-12">
                                <label class="form-label">Imagen</label>
                                <input type="file" class="form-control" id="idimagen" name="imagen" accept="image/*">
                            </div>

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



                        <div class="d-flex justify-content-end mt-4 align-items-center gap-2">
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
                            <button type="submit" class="btn btn-primary">Guardar</button>
                        </div>
                    </form>
                </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>
        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);


        if (typeof jQuery == 'undefined') {
            alert('jQuery NO está cargado en la vista Candidato');
        }

        $(document).ready(function() {
            // Inicializar el modal
            const modalCandidato = new bootstrap.Modal(document.getElementById('modalnuevocandidato'));

            // Evento para abrir el modal (corregido)
            $(document).on('click', '#btnnuevocandidato', function() {
                $('#idformcandidato')[0].reset();
                $('#idlabeltitlemodalcandidato').text("Nuevo Candidato");
                modalCandidato.show();
            });

            // Submit del formulario
            $('#idformcandidato').on('submit', function(e) {
                e.preventDefault();

                // 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...');

                var formData = new FormData(this);
                formData.append('fecharegistro', fechaLocal);
                $.ajax({
                    url: '/guardarcandidatos',
                    type: 'POST',
                    data: formData,
                    processData: false,
                    contentType: false,
                    success: async function(response) {
                        if(response.success) {
                            await listarcandidatos();

                            // Cerrar el modal y limpiar el formulario
                            $('#idformcandidato')[0].reset();
                            modalCandidato.hide();
                        }

                        submitBtn.prop('disabled', false).text('Guardar');
                        window.mostralertaboostrap([{
                            message: response.message,
                            type: response.success === false ? "danger" : "success",
                            iddiv: '#iddivalertacandidato',
                            iddivmessage: '#iddivalertaCandidatoMessage'
                        }]);
                    },
                    error: function(error) {
                        submitBtn.prop('disabled', false).text('Guardar');
                        window.mostralertaboostrap([{
                            message: error.responseJSON.message,
                            type: "danger",
                            iddiv: '#iddivalertacandidato2',
                            iddivmessage: '#iddivalertaCandidatoMessage2'
                        }]);
                    },
                    // complete: function() {
                    //     // Restaurar el botón
                    //     submitBtn.prop('disabled', false).text('Guardar');
                    // }
                });
            });

            // Limpiar el formulario cuando el modal se cierra
            $('#modalnuevocandidato').on('hidden.bs.modal', function () {
                $('#idformcandidato')[0].reset();
            });

            $(document).on('click', '#btnbuscarcandidato', async function (e){
                e.preventDefault();
                $('#idloaderscandidatos').show();
                await listarcandidatos();
                $('#idloaderscandidatos').hide();
            });

            // Evento para Editar
            $(document).on('click', '#btneditarcandidato', function(e) {
                e.preventDefault();

                // Obtener el card padre que contiene todos los datos
                const card = $(this).closest('.card');

                // Obtener todos los datos del candidato
                const candidatoData = {
                    idcandidato: card.data('candidato-id'),
                    idpersona: card.data('persona-id'),
                    nombre: card.data('candidato-nombre'),
                    correo: card.data('candidato-correo'),
                    direccion: card.data('candidato-direccion'),
                    estado: card.data('candidato-estado'),
                    imagen: card.data('candidato-imagen')
                };

                console.log('Datos del candidato a editar:', candidatoData);

                // Llenar el formulario de edición
                $('#idpersonacandidato').val(candidatoData.idpersona);
                $('#idcandidato').val(candidatoData.idcandidato);
                $('#idtxtnombrecandidato').val(candidatoData.nombre);
                $('#idtxtcorreocandidato').val(candidatoData.correo);
                $('#idtxtdireccioncandidato').val(candidatoData.direccion);
                $('#idselectestado').val(candidatoData.estado);

                // Mostrar la imagen actual (si existe)
                if (candidatoData.imagen) {
                    $('#imagen-preview').attr('src', candidatoData.imagen).show();
                }

                // Guardar el ID en un campo oculto para la actualización
                $('#modalEditarCandidato #idcandidato').val(candidatoData.id);

                // Mostrar el modal de edición
                $('#idlabeltitlemodalcandidato').text("Editar Candidato");
                modalCandidato.show();
                // $('#modalEditarCandidato').modal('show');
            });

            // Evento para Eliminar
            $(document).on('click', '#btneliminarcandidato', function(e) {
                e.preventDefault();
                const candidatoId = $(this).data('candidato-id');

                Swal.fire({
                    title: '¿Estás seguro?',
                    text: "Este candidato será eliminado de forma permanentemente ¡No podrás revertir esto!",
                    showCancelButton: true,
                    confirmButtonColor: '#3085d6',
                    cancelButtonColor: '#d33',
                    confirmButtonText: 'Sí, eliminar',
                    cancelButtonText: 'Cancelar'
                }).then((result) => {
                    if (result.isConfirmed) {
                        window.SweetAlertProgressOpen1([{title: "Eliminado el Candidato"}]);
                        $.ajax({
                            url: `/eliminarcandidato/${candidatoId}`,
                            type: "DELETE",
                            contentType: "application/json",
                            headers: {
                                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                            },
                            success: async function (response){
                                if(response.success){
                                    await listarcandidatos()
                                }

                                window.SweetAlertProgressClose1();
                                window.mostralertaboostrap([{
                                    message: response.message,
                                    type: response.success ? "success" : "danger",
                                    iddiv: '#iddivalertacandidato',
                                    iddivmessage: '#iddivalertaCandidatoMessage'
                                }]);
                            },
                        });
                    }
                });
            });

            $(document).on('click', '#btnestadocandidato', function (e){
                e.preventDefault();

                // Obtener el card padre que contiene todos los datos
                $('#idloaderscandidatos').show();
                const card = $(this).closest('.card');
                const candidatoData = {
                    idcandidato: card.data('candidato-id'),
                    idpersona: card.data('persona-id'),
                    estado: card.data('candidato-estado') == "Activo" ? "Inactivo" : "Activo",
                    editarcandidato: true
                };

                $.ajax({
                    url: '/guardarcandidatos',
                    type: 'POST',
                    contentType: "application/json",
                    data: JSON.stringify(candidatoData),
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    success: async function(response) {
                        if(response.success) {
                            await listarcandidatos();
                        }else{
                            window.mostralertaboostrap([{
                                message: response.message,
                                type: response.success === false ? "danger" : "success",
                                iddiv: '#iddivalertacandidato',
                                iddivmessage: '#iddivalertaCandidatoMessage'
                            }]);
                        }

                        // submitBtn.prop('disabled', false).text('Guardar');
                        $('#idloaderscandidatos').hide();

                    },
                    error: function(error) {
                        $('#idloaderscandidatos').hide();
                        window.mostralertaboostrap([{
                            message: error.responseJSON.message,
                            type: "danger",
                            iddiv: '#iddivalertacandidato',
                            iddivmessage: '#iddivalertaCandidatoMessage'
                        }]);
                    },
                    // complete: function() {
                    //     // Restaurar el botón
                    //     submitBtn.prop('disabled', false).text('Guardar');
                    // }
                });
            })

            $('#idfilascandidato').change(async function(e) {
                e.preventDefault();
                await listarcandidatos();
            });

            $('#txtbuscarcandidato').on('input', async function(e) {
                e.preventDefault();
                $('#idloaderscandidatos').show();
                await listarcandidatos();
                $('#idloaderscandidatos').hide();
            });
        });

        async function listarcandidatos() {
            const datos = {
                buscar: $('#txtbuscarcandidato').val().trim(),
                filtrarfila: $('#idfilascandidato').val()
            }

            return new Promise((resolve, reject) => {
                if(window.Livewire) {
                    Livewire.dispatch('listarcandidatoDesdeJS', [datos]);
                    Livewire.on('respuestalistarcandidatoDesdeJS', (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


{{--<div class="container py-4">--}}
{{--    <!-- Cabecera -->--}}
{{--    <div class="card mb-4" style="border-radius: 10px; background-color: #f8f9fa;">--}}
{{--        <div class="card-body">--}}
{{--            <!-- Título -->--}}
{{--            <div class="d-flex align-items-center" style="background-color: #333; color: white; padding: 10px; border-radius: 10px;">--}}
{{--                <h2 class="mb-0">--}}
{{--                    <i class="fas fa-user"></i> Candidatos--}}
{{--                </h2>--}}

{{--                <!-- Buscador -->--}}
{{--                <div class="ms-auto d-flex">--}}
{{--                    <form method="GET" action="{{ route('vistacandidatos') }}" class="d-flex">--}}
{{--                        <input type="text" name="buscar" value="{{ request('buscar') }}" class="form-control" placeholder="Ingrese el nombre del candidato..." style="width: 300px; border-top-right-radius: 0; border-bottom-right-radius: 0;">--}}
{{--                        <button type="submit" class="btn btn-primary" style="border-top-left-radius: 0; border-bottom-left-radius: 0;">--}}
{{--                            <i class="bi bi-search"></i> Buscar--}}
{{--                        </button>--}}
{{--                    </form>--}}
{{--                    @if (request()->has('buscar'))--}}
{{--                        <a href="{{ route('vistacandidatos', request()->except('buscar')) }}" class="btn btn-secondary ms-2">--}}
{{--                            <i class="bi bi-x-circle"></i> Limpiar Búsqueda--}}
{{--                        </a>--}}
{{--                    @endif--}}
{{--                </div>--}}
{{--            </div>--}}

{{--            <!-- Filtros -->--}}
{{--            <h2 class="h6 mb-3 mt-4">Filtros</h2>--}}
{{--            <form method="GET" action="{{ route('vistacandidatos') }}">--}}
{{--                <div class="row g-4 align-items-end mb-4">--}}
{{--                    <div class="col-md-5">--}}
{{--                        <label for="filtroProvincia" class="form-label">Provincia</label>--}}
{{--                        <div class="input-group">--}}
{{--                            <select name="provincia" id="filtroProvincia" class="form-control">--}}
{{--                                <option value="">Seleccione una provincia</option>--}}
{{--                                @foreach ($provincias as $idProvincia => $provincia)--}}
{{--                                    <option value="{{ $idProvincia }}" {{ request('provincia') == $idProvincia ? 'selected' : '' }}>{{ $provincia }}</option>--}}
{{--                                @endforeach--}}
{{--                            </select>--}}
{{--                        </div>--}}
{{--                    </div>--}}
{{--                    <div class="col-md-5">--}}
{{--                        <label for="filtroDistrito" class="form-label">Distrito</label>--}}
{{--                        <div class="input-group">--}}
{{--                            <select name="distrito" id="filtroDistrito" class="form-control">--}}
{{--                                <option value="">Seleccione un distrito</option>--}}
{{--                                @foreach ($distritos as $idDistrito => $distrito)--}}
{{--                                    <option value="{{ $idDistrito }}" {{ request('distrito') == $idDistrito ? 'selected' : '' }}>{{ $distrito }}</option>--}}
{{--                                @endforeach--}}
{{--                            </select>--}}
{{--                        </div>--}}
{{--                    </div>--}}
{{--                    <div class="col-md-2 d-flex gap-2">--}}
{{--    <button type="submit" class="btn btn-primary w-100">Filtrar</button>--}}
{{--    @if (request()->has('provincia') || request()->has('distrito'))--}}
{{--        <a href="{{ route('vistacandidatos', request()->except('provincia', 'distrito')) }}" class="btn btn-secondary w-100">--}}
{{--            <i class="bi bi-x-circle"></i> Limpiar--}}
{{--        </a>--}}
{{--    @endif--}}
{{--</div>--}}
{{--                </div>--}}
{{--            </form>--}}
{{--        </div>--}}
{{--    </div>--}}

{{--    <!-- Lista de candidatos -->--}}
{{--    <div class="d-flex justify-content-between align-items-center mb-4">--}}
{{--        <h3 class="mb-0">Lista de Candidatos</h3>--}}
{{--        <a href="#" class="btn btn-success">--}}
{{--            <i class="bi bi-plus-lg"></i> Añadir Candidato--}}
{{--        </a>--}}
{{--    </div>--}}

{{--    <div class="row g-4">--}}
{{--        @forelse ($candidatos as $candidato)--}}
{{--            <div class="col-md-3 mb-3">--}}
{{--                <div class="card text-center shadow position-relative">--}}
{{--                    <div class="dropdown position-absolute top-0 end-0 m-2">--}}
{{--                        <button class="btn btn-light btn-sm" type="button" data-bs-toggle="dropdown" aria-expanded="false">--}}
{{--                            <i class="fas fa-ellipsis-v"></i>--}}
{{--                        </button>--}}
{{--                        <ul class="dropdown-menu">--}}
{{--                            <li><a class="dropdown-item" href="#">Editar</a></li>--}}
{{--                            <li><a class="dropdown-item text-danger" href="#">Eliminar</a></li>--}}
{{--                        </ul>--}}
{{--                    </div>--}}
{{--                    <div class="card-body">--}}
{{--                        <img src="{{ asset('storage/imgsistema/usuarioazul_32.png') }}" alt="Foto" class="rounded-circle shadow-sm mb-2" style="width: 60px; height: 70px; object-fit: cover;">--}}
{{--                        <h2 class="card-title h5 mt-2">{{ $candidato->NombreCompleto ?? 'Sin Nombre' }}</h2>--}}
{{--                        <p class="card-text text-muted mb-1">{{ $candidato->postulacion ?? 'Sin Cargo' }}</p>--}}
{{--                        <p class="card-text text-muted">Partido: {{ $candidato->Partido ?? 'Sin Partido' }}</p>--}}
{{--                    </div>--}}
{{--                </div>--}}
{{--            </div>--}}
{{--        @empty--}}
{{--            <p>No hay candidatos registrados.</p>--}}
{{--        @endforelse--}}
{{--    </div>--}}
{{--</div>--}}
{{--@endsection--}}