@extends('layout.template')
@section('title', 'SICCAP ICATEP')
@section('content')
    <div class="content-body">
        <!-- row -->
        <div class="container-fluid">
            <div class="row">
                <div class="col-xl-12 ">
                    <div class="card">
                        <div class="card-header">
                            <h4 class="card-title">Control de Capacitandos</h4>
                            <div class="d-flex gap-2">
                                <!-- @if(Auth::user()->usu_perfil_id == 1)
                                <form action="{{ route('exportarHistorialGeneral') }}" method="POST" target="_blank">
                                    @csrf
                                    <button type="submit" class="btn btn-success btn-sm">
                                        <i class="fas fa-file-excel me-1"></i> Exportar Historial General
                                    </button>
                                </form>
                                @endif -->
                                @puede('Capacitandos','alta_capacitando')
                                <a href="{{ route('agregarCapacitandoadd') }}" class="btn btn-primary btn-sm">
                                    <i class="fas fa-plus"></i> Nuevo Capacitando
                                </a>
                                @endpuede
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                @if (session('success'))
                    <div class="alert alert-primary alert-dismissible fade show" id="alert-container">
                        <svg class="alert-icon" viewBox="0 0 24 24" width="24" height="24" stroke="currentColor"
                            stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round">
                            <polyline points="9 11 12 14 22 4"></polyline>
                            <path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path>
                        </svg>
                        <strong id="alert-confirmacion"> {{ session('success') }}</strong>
                    </div>
                @endif
                <div id="responsiveTable_wrapper" class="dataTables_wrapper no-footer">
                    <table id="responsiveTable" class="table table-striped responsive w-100 dataTable no-footer dtr-inline collapsed capacitandos-table" aria-describedby="responsiveTable_info">
                        <thead>
                            <tr>
                                <th width="10%">ID</th>
                                <th width="10%">No. de Control</th>
                                <th width="30%">Nombre</th>
                                <th width="10%">C.U.R.P.</th>
                                <th width="10%">Celular</th>
                                <th width="30%">Unidad</th>
                                <th width="10%">Acciones</th>
                            </tr>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
                </div>
            </div>

            <!-- MODAL PARA CAMBIO DE ESTARUS DE CAPACITANDO -->
            <div class="modal fade" id="status-cap" style="display: none;" aria-hidden="true">
                <div class="modal-dialog modal-dialog-centered" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title">Confirmar cambio de estatus</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal">
                            </button>
                        </div>
                        <div class="modal-body text-center">
                            <strong id="data-cap"></strong>
                        </div>
                        <div class="modal-footer">
                            <form id="form-cambiar-estatus" class="modal-footer delete">
                                @csrf
                                <input type="hidden" name="id_capacitando" value="" id="id_capacitando">
                                <button type="button" class="btn btn-danger light" data-bs-dismiss="modal">Cerrar</button>
                                <button type="button" id="btn-confirmar-estatus" class="btn btn-primary">Aceptar</button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
            <!--</div>-->

            <!-- MODAL HISTORIAL ACADEMICO -->
            <div class="modal fade" id="modal-historial-academico" tabindex="-1" aria-hidden="true">
                <div class="modal-dialog modal-xl modal-dialog-centered modal-dialog-scrollable" role="document">
                    <div class="modal-content">
                        <div class="modal-header bg-dark text-white">
                            <div>
                                <h5 class="modal-title mb-1 text-white"><i class="fas fa-file-alt me-2 text-white"></i><span id="modal-title-text">Historial Académico</span></h5>
                                <p class="mb-0" style="font-size: 0.9rem;">
                                    <strong>Nombre:</strong> <span id="historial-nombre"></span> &nbsp;|&nbsp;
                                    <strong>No. Control:</strong> <span id="historial-num-control"></span> &nbsp;|&nbsp;
                                    <strong>CURP:</strong> <span id="historial-curp"></span>
                                </p>
                            </div>
                            <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
                        </div>
                        <div class="modal-body">
                            <div id="historial-loading" class="text-center py-4" style="display:none;">
                                <i class="fa fa-spinner fa-spin fa-2x"></i>
                                <p class="mt-2">Cargando historial...</p>
                            </div>
                            <div class="table-responsive">
                                <table class="table table-striped table-bordered table-sm" id="tabla-historial">
                                    <thead class="table-warning">
                                        <tr>
                                            <th style="width: 35%;">Curso</th>
                                            <th>Acreditado</th>
                                            <th>Folio Diploma</th>
                                            <th>Tipo de Curso &nbsp;</th>
                                            <th style="width: 20%;">Aula</th>
                                            <th>Fecha Inicio</th>
                                            <th>Fecha Término</th>
                                        </tr>
                                    </thead>
                                    <tbody id="historial-body">
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <!-- <form action="{{ route('exportarHistorialAcademico') }}" method="POST" target="_blank">
                                @csrf
                                <input type="hidden" name="alu_id" id="export-alu-id">
                                <button type="submit" class="btn btn-success">
                                    <i class="fas fa-file-excel me-1"></i> Excel
                                </button>
                            </form> -->
                            <button type="button" class="btn light btn-danger" data-bs-dismiss="modal">Cerrar</button>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
@endsection

@push('scripts')
    <script>
        // Elimina la tabla si ya existe para evitar duplicados
        if ($.fn.DataTable.isDataTable('#responsiveTable')) {
            $('#responsiveTable').DataTable().destroy();
        }

        //Tabla para mostrar capacitandos registrados
        $('.capacitandos-table').DataTable(
        {
            responsive: true,
            ordering: true, 
            order: [[0, 'desc']],
            language: 
            {
                url: "https://cdn.datatables.net/plug-ins/1.10.25/i18n/Spanish.json"
            },
            stateSave: false,
            stateDuration: 10000,
            processing: true,
            serverSide: true,
            ajax: {
                url: "{{ route('listadoCapacitandos') }}", // Obtener datos de la ruta
                type: 'GET', // Asegurar que sea GET si así está la ruta, o POST si se prefiere
                timeout: 600000 // 10 minutos en milisegundos
            },
            columnDefs: [
                {
                    target: 0,
                    visible: false,
                    searchable: false,
                }
            ],
            columns: 
                    [{
                        data: "alu_id"
                    },
                    {
                        data: "alu_num_control"
                    },
                    {
                        data: "nombre_alumno"
                    },
                    {
                        data: "alu_curp"
                    },
                    {
                        data: "alu_celular"
                    },
                    {
                        data: "uni_nombre"
                    },
                    {
                        data: null,
                        orderable: false, // Disable ordering for the actions column
                        render: function(data) 
                        {
                            var status = data.alu_status;
                            var clase = '';
                            var icon = '';

                            // Determinar la clase y el icono de edicion según el estado
                            switch (status) {
                                case 'A':
                                    claseE = 'success'; iconE = 'fa fa-pencil';
                                    claseS = 'success'; iconS = 'fas fa-check';
                                    $editar= 'Editar';
                                    leyenda = 'Capacitando Activo';
                                    break;
                                case 'I':
                                    claseE = 'danger'; iconE = 'fa fa-pencil';
                                    claseS = 'danger'; iconS = 'fas fa-ban';
                                    $editar= 'Editar';
                                    leyenda = 'Capacitando Inactivo';
                                    break;
                                case 'B':
                                    claseE = 'light'; iconE = 'fas fa-eraser';
                                    claseS = 'light'; iconS = 'fa fa-hourglass-half';
                                    $editar = 'Capacitando en Borrador';
                                    leyenda = 'Para cambiar el estatus termine la captura de datos';
                                    break;
                                default:
                                    claseE = 'secondary'; iconE = 'fa fa-pencil';
                                    claseS = 'secondary'; iconS = '';
                                    $editar= 'Editar';
                                    leyenda = 'Desconocido';
                                    break;
                            }

                            // var btnHistorial = '';
                            // if (status === 'A' || status === 'I') {
                            //     var hasHistory = data.history_count > 0;
                            //     var btnClass = hasHistory ? 'info' : 'dark'; // User asked for success if enabled, gray if disabled
                            //     var btnTitle = hasHistory ? 'Historial Académico' : 'Sin Historial Académico';
                            //     var btnDisabled = hasHistory ? '' : 'disabled';
                            //     var btnActionClass = hasHistory ? 'btn-historial' : '';

                            //     btnHistorial = `
                            //         <button type="button" class="btn btn-${btnClass} shadow btn-xs sharp me-1 ${btnActionClass}"
                            //             data-id="${data.alu_id}"
                            //             data-count="${data.history_count}"
                            //             ${btnDisabled}
                            //             data-bs-toggle="tooltip" data-bs-placement="top" title="${btnTitle}">
                            //             ${data.history_count}
                            //         </button>
                            //     `;
                            // }

                            var btnHistorial = '';
                            if (status === 'A' || status === 'I') {
                                if (data.history_count > 0) {
                                    btnHistorial = `
                                        <button type="button" 
                                            class="btn btn-info shadow btn-xs sharp me-1 btn-historial"
                                            data-id="${data.alu_id}"
                                            data-count="${data.history_count}"
                                            data-bs-toggle="tooltip" 
                                            data-bs-placement="top" 
                                            title="Historial Académico">
                                            ${data.history_count}
                                        </button>
                                    `;
                                } else {
                                    btnHistorial = `
                                        <button type="button" 
                                            class="btn btn-dark shadow btn-xs sharp me-1" 
                                            disabled
                                            data-bs-toggle="tooltip" 
                                            data-bs-placement="top" 
                                            title="Sin Historial Académico">
                                            0
                                        </button>
                                    `;
                                }
                            }

                            return `
                            <div class="d-flex justify-content-center">
                                
                                <form action="{{ route('editarCapacitando') }}" method="post">
                                    @csrf
                                    <input type="hidden" name="id_capacitando" value="${data.alu_id}">
                                    <button type="submit" class="btn btn-${claseE} shadow btn-xs sharp me-1 btn-update" 
                                        data-bs-toggle="tooltip" data-bs-placement="top" title="${$editar}">
                                        <i class="fas fa-user-graduate"></i>
                                    </button>
                                </form>

                                @puede('Capacitandos','activar_capacitando')
                                    <button type="button" class="btn btn-${claseS} shadow btn-xs sharp me-1 btn-status"
                                        ${status === 'B' ? 'disabled' : ''}
                                        data-id="${data.alu_id}" data-nombre="${data.alu_num_control}" data-cap="${data.nombre_alumno}" data-bs-toggle="modal" data-bs-target="#status-cap"
                                        data-bs-toggle="tooltip" data-bs-placement="top" title="${leyenda}">
                                        <i class="${iconS}"></i>
                                    </button>
                                @endpuede

                                @puede('Capacitandos','ver_historial_academico')
                                    ${btnHistorial}
                                @endpuede
                            </div>`;
                        }
                    }
                ]
        });

        $(document).ready(function() {

            $('.capacitandos-table').on('click', '.btn-status', function() {
                $("#id_capacitando").val($(this).data("id"));
                $('#status-cap').find("#data-cap").text($(this).data("cap"));
            });

            // ✅ Historial Académico
            $('.capacitandos-table').on('click', '.btn-historial', function() {
                var aluId = $(this).data('id');
                var count = $(this).data('count');
                var $body = $('#historial-body');
                var $loading = $('#historial-loading');

                // Actualizar título del modal
                $('#modal-title-text').text('Historial Académico (Cursos Tomados: ' + count + ')');

                // Setear alu_id para exportar a Excel
                $('#export-alu-id').val(aluId);

                // Limpiar tabla y mostrar loading
                $body.html('');
                $loading.show();
                $('#modal-historial-academico').modal('show');

                $.ajax({
                    url: "{{ route('getHistorialAcademico') }}",
                    type: 'POST',
                    data: {
                        alu_id: aluId,
                        _token: $('input[name="_token"]').val()
                    },
                    success: function(response) {
                        $loading.hide();

                        // Llenar cabecera
                        $('#historial-nombre').text(response.alumno.nombre_alumno);
                        $('#historial-num-control').text(response.alumno.alu_num_control);
                        $('#historial-curp').text(response.alumno.alu_curp);

                        // Llenar tabla
                        if (response.historial.length === 0) {
                            $body.html('<tr><td colspan="7" class="text-center">No se encontraron registros de historial académico.</td></tr>');
                        } else {
                            var rows = '';
                            $.each(response.historial, function(i, item) {
                                var rowClass = item.aul_estatus === 'X' ? ' style="background-color: #f8d7da;"' : '';
                                rows += '<tr' + rowClass + '>';
                                rows += '<td>' + (item.aul_curso_nombre || '') + '</td>';
                                rows += '<td>' + (item.aa_acreditado || '') + '</td>';
                                rows += '<td>' + (item.aa_folio_diploma || '') + '</td>';
                                rows += '<td>' + (item.tip_nombre || '') + '</td>';
                                rows += '<td>' + (item.aul_clave_registro || item.aul_id2 || '') + '</td>';
                                rows += '<td>' + (item.aul_fecha_inicia ? item.aul_fecha_inicia.split('-').reverse().join('/') : '') + '</td>';
                                rows += '<td>' + (item.aul_fecha_termina ? item.aul_fecha_termina.split('-').reverse().join('/') : '') + '</td>';
                                rows += '</tr>';
                            });
                            $body.html(rows);
                        }
                    },
                    error: function(xhr) {
                        $loading.hide();
                        $body.html('<tr><td colspan="7" class="text-center text-danger">Error al cargar el historial académico.</td></tr>');
                        console.error('Error:', xhr);
                    }
                });
            });

            // ✅ Cambiar estatus sin recargar página
            $('#btn-confirmar-estatus').on('click', function() {
                const idCapacitando = $('#id_capacitando').val();
                const $boton = $(this);
                
                // Deshabilitar botón durante la petición
                $boton.prop('disabled', true).html('<i class="fa fa-spinner fa-spin"></i> Procesando...');
                
                $.ajax({
                    url: "{{ route('capStatus') }}",
                    type: 'POST',
                    data: {
                        id_capacitando: idCapacitando,
                        _token: $('input[name="_token"]').val()
                    },
                    success: function(response) {
                        // Cerrar modal
                        $('#status-cap').modal('hide');
                        
                        // Mostrar mensaje de éxito
                        mostrarAlerta('success', response.message || 'Estatus cambiado correctamente');
                        
                        // Recargar solo la tabla DataTable sin recargar la página
                        $('.capacitandos-table').DataTable().ajax.reload(null, false);
                        
                        // Rehabilitar botón
                        $boton.prop('disabled', false).html('Aceptar');
                    },
                    error: function(xhr, status, error) {
                        console.error('Error al cambiar estatus:', error);
                        
                        // Cerrar modal
                        $('#status-cap').modal('hide');
                        
                        // Mostrar mensaje de error
                        const mensaje = xhr.responseJSON?.message || 'Error al cambiar el estatus';
                        mostrarAlerta('danger', mensaje);
                        
                        // Rehabilitar botón
                        $boton.prop('disabled', false).html('Aceptar');
                    }
                });
            });
            
            // Función para mostrar alertas temporales
            function mostrarAlerta(tipo, mensaje) {
                const iconos = {
                    success: '<polyline points="9 11 12 14 22 4"></polyline><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path>',
                    danger: '<polygon points="7.86 2 16.14 2 22 7.86 22 16.14 16.14 22 7.86 22 2 16.14 2 7.86 7.86 2"></polygon><line x1="15" y1="9" x2="9" y2="15"></line><line x1="9" y1="9" x2="15" y2="15"></line>'
                };
                
                const claseAlerta = tipo === 'success' ? 'alert-primary' : 'alert-danger';
                const icono = iconos[tipo] || iconos.success;
                
                const alertaHtml = `
                    <div class="alert ${claseAlerta} alert-dismissible fade show" id="alert-dinamico">
                        <svg class="alert-icon" viewBox="0 0 24 24" width="24" height="24" stroke="currentColor"
                            stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round">
                            ${icono}
                        </svg>
                        <strong>${mensaje}</strong>
                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                    </div>
                `;
                
                // Eliminar alerta anterior si existe
                $('#alert-dinamico').remove();
                
                // Insertar nueva alerta antes de la tabla
                $('#responsiveTable_wrapper').before(alertaHtml);
                
                // Ocultar automáticamente después de 4 segundos
                setTimeout(function() {
                    $('#alert-dinamico').fadeOut('slow', function() {
                        $(this).remove();
                    });
                }, 4000);
            }

            setTimeout(function() {
                $("#alert-container-error").fadeOut("slow");
                $("#alert-container").fadeOut("slow");
            }, 4000);

        });

    </script>
@endpush