@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">Instructores</h4>
                        </div>
                        <div class="card-body">
                            <div class="basic-form d-flex gap-4 flex-wrap justify-content-between align-items-center w-full">
                                <div class="">
                                @puede('Instructores', 'alta_instructor')
                                    <a href="{{ route('indexAddInstructor') }}">
                                        <button type="button" class="btn btn-primary btn-sm me-3"><i class="fas fa-plus"> </i>
                                            Nuevo Instructor
                                        </button>
                                    </a>
                                @endpuede
    
                            </div>
                            <style>
                                .dashboard-card {
                                    transition: all 0.1s ease-in-out;
                                    border-radius: 5px;
                                }

                                .dashboard-card:hover {
                                    transform: scale(1.05);
                                    
                                }
                                @media screen and (min-width: 969px) {
                                    .card-body-dashboard {
                                        padding: 2px 4px;
                                    }
                                }

                                .card-body-dashboard {
                                    padding: 4px 6px;
                                }
                            </style>
                            <div class="basic-form d-flex gap-4 flex-wrap justify-content-end align-items-center w-full">
                                <div class="d-flex flex-wrap gap-1">
                                        @if (isset($status) && count($status) > 0)
                                            @foreach ($status as $key => $data)
                                                <div class="dashboard-card {{ $data['color'] }} status-card"
                                                    data-bs-toggle="tooltip" data-bs-placement="top"
                                                    title="{{ $data['label'] }}" data-estatus="{{ $key }}"
                                                    style="cursor: pointer;">
                                                    <div class="card-body-dashboard">
                                                        @php $textColor = $data['color'] == 'bg-light' ? 'text-dark' : 'text-white'; @endphp
                                                        <div class="d-flex align-items-center justify-content-center gap-1">
                                                            <i class="{{ $data['icon'] }} {{ $textColor }}"
                                                                style="font-size: 10px;"></i>
                                                            <span class="mb-0 {{ $textColor }}"
                                                                style="font-size: 14px; font-weight: 500;">{{ $data['count'] }}</span>
                                                        </div>
                                                    </div>
                                                </div>
                                            @endforeach
                                        @endif
                                        <div class="dashboard-card bg-light status-card" data-estatus="" title="Todos" style="cursor: pointer;">
                                            <div class="card-body-dashboard">
                                                <div class="d-flex align-items-center justify-content-center gap-1">
                                                    <i class="fas fa-layer-group text-dark" style="font-size: 10px;"></i>
                                                    <span class="mb-0 text-dark" style="font-size: 14px; font-weight: 500;">
                                                        Todos ({{ $totalInstructuresActual }})
                                                    </span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </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
                @if (session('error'))
                    <div class="alert alert-danger alert-dismissible fade show" id="alert-container-error">
                        <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">
                            <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>
                        </svg>
                        <strong id="alert-confirmacion-error"> {{ session('error') }}</strong>
                    </div>
                @endif

                <div id="responsiveTableInstructores_wrapper" class="dataTables_wrapper no-footer">
                    <table id="responsiveTableInstructores"
                        class="table table-striped responsive w-100 dataTable no-footer dtr-inline collapsed psc-table"
                        aria-describedby="responsiveTableInstructores_info">
                        <thead>
                            <tr>
                                <th width="10%">ID</th>
                                <th width="11%">Expediente</th>
                                <th width="25%">Nombre</th>
                                <th nowrap>Unidad</th>
                                <th width="8%">Fecha Alta</th>
                                <th width="19%">Observaciones</th>
                                <th width="5%" class="text-center">Acciones</th>
                            </tr>
                        </thead>
                        <tbody>
                            <!----Aqui--->
                        </tbody>
                    </table>
                </div>

            </div>

            <div class="row">

                <!-- MODAL PARA ACTIVAR/DESACTIVAR ESPECIALIDADES DEL PSC --->
                <div class="modal fade" id="especialidades-activadas" tabindex="-1" style="display: none;"
                    aria-modal="true" role="dialog" aria-hidden="true">
                    <div class="modal-dialog modal-dialog-centered modal-lg">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title">Activar o Desactivar Especialidades del PSC</h5>
                                <button type="button" class="btn-close" data-bs-dismiss="modal">
                                </button>
                            </div>
                            <div class="modal-body">
                                <div id="tablaEspecialidades_wrapper" class="dataTables_wrapper no-footer">
                                    <strong class="text-primary" id="psc"></strong><br>
                                    <table id="tablaEspecialidades" class="display responsive w-80 dataTable psc-esp-table"
                                        aria-describedby="tablaEspecialidades_info">
                                        <thead>
                                            <tr>
                                                <th width="40%">Especialidad</th>
                                                <th width="5%" class="text-center">Estatus</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                        </tbody>
                                        <tfoot class="">
                                            <tr>
                                                <th colspan="4" class="border-0 text-center">
                                                    <span class="text-success">Activado <i class="fa fa-check"></i></span>&nbsp;
                                                    <span class="text-danger">Desactivado <i class="fa fa-close"></i></span>
                                                </th>
                                            </tr>
                                        </tfoot>
                                    </table>
                                </div>
                                <span class="text-primary" id="mensaje-confirmacion"></span>
                                <span class="text-danger" id="mensaje-error"></span>
                            </div>
                            @puede('Instructores', 'activar_especialidades_instructor')
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-danger light"
                                        data-bs-dismiss="modal">Cerrar</button>
                                    <form method="POST" class="guardar" action="{{ route('updateStatusEsp') }}">
                                        @csrf
                                        <button type="submit" class="btn btn-primary w-30 guardar">Guardar</button>
                                        <input type="hidden" name="id_psc" id="id_psc" value="">
                                        <input type="hidden" name="cambiar_status" id="status" value="">
                                    </form>
                                </div>
                            @endpuede
                        </div>
                    </div>
                </div>

                <!-- MODAL PARA ACTIVAR/DESACTIVAR CURSOS DEL PSC --->
                <div class="modal fade" id="cursos-activados" tabindex="-1" style="display: none;"
                    aria-modal="true" role="dialog" aria-hidden="true">
                    <div class="modal-dialog modal-dialog-centered modal-xl">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title">Activar o Desactivar Cursos del PSC</h5>
                                <button type="button" class="btn-close" data-bs-dismiss="modal">
                                </button>
                            </div>
                            <div class="modal-body">
                                <div id="tablaCursos_wrapper" class="dataTables_wrapper no-footer">
                                    <strong class="text-primary" id="cursos_activados_psc"></strong><br>
                                    <table id="tablaCursos"
                                        class="display responsive w-80 dataTable psc-cursos-table"
                                        aria-describedby="tablaCursos_info">
                                        <thead>
                                            <tr>
                                                <th width="40%">Curso</th>
                                                <th width="15%" class="text-center">Tipo de Formación</th>
                                                <th width="5%" class="text-center">Estatus</th>
                                            </tr>
                                        </thead>

                                    </table>
                                </div>
                                <!--
                                <span class="text-primary" id="mensaje-confirmacion"></span>
                                <span class="text-danger" id="mensaje-error"></span>
                                -->
                            </div>
                            <div class="modal-footer">
                                @php
                                    $perfilUsuario = auth()->user()->usu_perfil_id;
                                    $esJefeODta = in_array($perfilUsuario, [1, 9, 24]); // 1=Jefe, 9=DTA
                                @endphp

                                <div class="w-100 mb-2">
                                    <span class="text-danger" id="mensaje-confirmacion-curso" style="font-weight: bold; display: none;"></span>
                                    <span class="text-danger" id="mensaje-error-curso" style="font-weight: bold; display: none;"></span>
                                </div>

                                <button type="button" class="btn btn-danger light" data-bs-dismiss="modal">Cerrar</button>

                                @if($esJefeODta)
                                    <form method="POST" class="guardar-curso" action="{{ route('updateStatusCurso') }}">
                                        @csrf
                                        <button type="submit" class="btn btn-primary w-30 guardar-curso">Guardar</button>
                                        <input type="hidden" name="id_psc" id="id_psc_curso" value="">
                                        <input type="hidden" name="tipo" id="id_tipo" value="">
                                        <input type="hidden" name="cambiar_status_curso" id="activar_cursos"
                                            value="">
                                    </form>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>

                <!-- MODAL PARA ACTIVAR/DESACTIVAR PSC EN UNIDAD --->
                <div class="modal fade" id="unidades-autorizadas" tabindex="-1" style="display: none;" aria-modal="true" role="dialog">
                    <div class="modal-dialog modal-dialog-centered modal-lg">
                        <div class="modal-content">
                            <div class="modal-header bg-primary">
                                <h5 class="modal-title text-light">Activar o Desactivar PSC en Unidad</h5>
                                <button type="button" class="btn-close" data-bs-dismiss="modal">
                                </button>
                            </div>
                            <div class="modal-body">
                                <div id="tablaUnidades_wrapper" class="dataTables_wrapper no-footer">
                                    <i class="fas fa-user-tie fa-2x"></i> <strong class="text-primary" id="nombre_psc"></strong><br>
                                    <table id="tablaUnidades" class="display responsive w-80 dataTable unidades-autorizadas-table"
                                        aria-describedby="tablaUnidades_info">
                                        <thead>
                                            <tr>
                                                <th width="40%">Unidad <i class="far fa-building fa-lg"></i></th>
                                                <th width="5%" class="text-center">Estatus</th>
                                                <th width="40%">Unidad <i class="far fa-building fa-lg"></i></th>
                                                <th width="5%" class="text-center">Estatus</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                        </tbody>
                                        <tfoot class="">
                                            <tr>
                                                <th colspan="4" class="border-0 text-center">
                                                    <span class="text-success">Activado <i class="fa fa-check"></i>
                                                    </span>&nbsp;
                                                    <span class="text-danger">Desactivado <i
                                                            class="fa fa-close"></i></span>
                                                </th>
                                            </tr>
                                        </tfoot>
                                    </table>
                                </div>
                                <div class="text-danger" id="msg_error_guardar_activar_unidad">
                                </div>
                                <div class="modal-footer">
                                     @php
                                        $perfilUsuario = auth()->user()->usu_perfil_id;
                                        $esJefeODta = in_array($perfilUsuario, [1, 9, 24]); // 1=Jefe, 9=DTA
                                    @endphp
                                    <!--puede('Instructores', 'activar_especialidades_instructor')-->
                                    @if($esJefeODta)
                                        <button type="button" class="btn btn-danger light"
                                            id="desactivarTodo">Desactivar
                                            Todo</button>
                                        <input type="hidden" name="id_curso" id="id_curso_desactivar" value="">
                                        <button type="button" class="btn btn-success light" id="activarTodo">Activar
                                            Todo
                                        </button>
                                        <form action="" class="guardar-psc-unidad" method="POST">
                                            @csrf
                                            <button type="submit" class="btn btn-primary guardar"
                                                data-bs-dismiss="modal" id="btn_guardar_psc_unidad">Guardar</button>
                                            <input type="hidden" name="cambiar_status" id="id-unidades-psc"
                                                value="">
                                            <input type="hidden" name="id_psc" id="id_psc_guardar" value="">
                                            <input type="hidden" name="" id="accion" value="">
                                        </form>
                                    @endif
                                    <!--endpuede-->
                                </div>

                            </div>
                        </div>
                    </div>
                </div>

                <!-- MODAL PARA VER ARCHIVOS PDF -->
                <div class="modal fade" id="modalArchivo" tabindex="-1" aria-labelledby="modalArchivoLabel"
                    aria-hidden="true">
                    <div class="modal-dialog modal-dialog-centered modal-xl">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title" id="modalArchivoLabel">Archivo PDF</h5>
                                <button type="button" class="btn-close" data-bs-dismiss="modal"
                                    aria-label="Cerrar"></button>
                            </div>
                            <div class="modal-body">
                                <iframe id="visorPDF" src="" width="100%" height="800px"
                                    frameborder="0"></iframe>
                            </div>
                        </div>
                    </div>
                </div>
                
            </div>

        </div>
    </div>
@endsection

@push('scripts')
    <script>
        if ($.fn.DataTable.isDataTable('#responsiveTableInstructores')) {
            $('#responsiveTableInstructores').DataTable().destroy();
        }

        // $('.psc-table').on('draw.dt', function() {
        //     const tooltips = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
        //     tooltips.forEach(function(tooltipEl) {
        //         new bootstrap.Tooltip(tooltipEl);
        //     });
        // });

        $(document).on('shown.bs.modal', function() {
            const tooltips = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
            tooltips.forEach(function(tooltipEl) {
                new bootstrap.Tooltip(tooltipEl);
            });
        });

        $(document).ready(function() {
            // Limpiar localStorage cuando se regresa a la página de listado después de crear/editar
            @if (session('success'))
                localStorage.clear();
            @endif

            setTimeout(function() {
                $("#alert-container-error").fadeOut("slow");
                $("#alert-container").fadeOut("slow"); // Desaparece alerta
            }, 4000); // 4 segundos

        });

        $(document).on('click', '.ver-pdf', function() {
            const src = $(this).data('src');
            $('#visorPDF').attr('src', src);
        });

        // TABLA PSC

        const BASE_URL = '{{ url("/") }}';
        const SIN_DOC = `${BASE_URL}/storage/app/public/instructores/sin_documento.pdf`;
        const CLASS_BTN_MAP = ['dark', 'warning', 'danger', 'success'];

        // Recuperar estatus del localStorage si existe
        let estatusActivo = localStorage.getItem('estatusActivo_instructores');
        if (estatusActivo === 'null') estatusActivo = null;

        function initTooltips() {
            document.querySelectorAll('[data-bs-toggle="tooltip"]').forEach(el => {
                bootstrap.Tooltip.getOrCreateInstance(el, {
                    container: 'body',
                    trigger: 'hover'
                });
            });
        }

        $('.status-card').on('click', function() {
            const tip = bootstrap.Tooltip.getInstance(this);
            if (tip) tip.hide();
            let estatus = $(this).data('estatus');
            estatusActivo = (estatus !== undefined && estatus !== null && estatus !== '') ? estatus : null; 
            localStorage.setItem('estatusActivo_instructores', estatusActivo);
            $('.status-card').removeClass('active-card');
            $(this).addClass('active-card');
            $('.psc-table').DataTable().search('').page('first').ajax.reload();
        });

        // Función global para actualizar el color del botón de unidades
        function actualizarColorBotonUnidades(instructorId, tieneUnidadesActivas) {
            let $boton = null;
            
            // Buscar en el DOM visible
            $boton = $('.btn-unidades-autorizadas[data-id="' + instructorId + '"]');
            
            if ($boton.length === 0) {
                $boton = $('.btn-unidad-' + instructorId);
            }
            
            // Si no se encuentra en DOM visible, buscar en todas las filas de DataTables
            if ($boton.length === 0 && $.fn.DataTable.isDataTable('.psc-table')) {
                let table = $('.psc-table').DataTable();
                table.rows().every(function() {
                    let row = this.node();
                    let $btnInRow = $(row).find('.btn-unidades-autorizadas[data-id="' + instructorId + '"]');
                    if ($btnInRow.length > 0) {
                        $boton = $btnInRow;
                        return false;
                    }
                });
            }
            
            // Actualizar color del botón si se encontró
            if ($boton.length > 0) {
                if (tieneUnidadesActivas) {
                    $boton.removeClass('btn-dark').addClass('btn-success');
                } else {
                    $boton.removeClass('btn-success').addClass('btn-dark');
                }
            }
        }

        // Función global para actualizar el color del botón de especialidades
        function actualizarColorBotonEspecialidades(instructorId, tieneEspecialidadesActivas) {
            let $boton = null;
            
            // Buscar en el DOM visible
            $boton = $('.btn-especialidades[data-id="' + instructorId + '"]');
            
            // Si no se encuentra en DOM visible, buscar en todas las filas de DataTables
            if ($boton.length === 0 && $.fn.DataTable.isDataTable('.psc-table')) {
                let table = $('.psc-table').DataTable();
                table.rows().every(function() {
                    let row = this.node();
                    let $btnInRow = $(row).find('.btn-especialidades[data-id="' + instructorId + '"]');
                    if ($btnInRow.length > 0) {
                        $boton = $btnInRow;
                        return false;
                    }
                });
            }
            
            // Actualizar color del botón si se encontró
            if ($boton.length > 0) {
                if (tieneEspecialidadesActivas) {
                    $boton.removeClass('btn-primary').addClass('btn-success');
                } else {
                    $boton.removeClass('btn-success').addClass('btn-primary');
                }
            }
        }

        // Función global para actualizar el color del botón de cursos
        function actualizarColorBotonCursos(instructorId, tieneCursosActivos) {
            let $boton = null;
            
            // Buscar en el DOM visible
            $boton = $('.btn-cursos-activos[data-id-instructor="' + instructorId + '"]');
            
            // Si no se encuentra en DOM visible, buscar en todas las filas de DataTables
            if ($boton.length === 0 && $.fn.DataTable.isDataTable('.psc-table')) {
                let table = $('.psc-table').DataTable();
                table.rows().every(function() {
                    let row = this.node();
                    let $btnInRow = $(row).find('.btn-cursos-activos[data-id-instructor="' + instructorId + '"]');
                    if ($btnInRow.length > 0) {
                        $boton = $btnInRow;
                        return false;
                    }
                });
            }
            
            // Actualizar color del botón si se encontró
            if ($boton.length > 0) {
                if (tieneCursosActivos) {
                    $boton.removeClass('btn-info').addClass('btn-success');
                } else {
                    $boton.removeClass('btn-success').addClass('btn-info');
                }
            }
        }

        $('.psc-table').on('draw.dt', function() {
            initTooltips();
        });

        initTooltips();

        $('.psc-table').DataTable({
            ordering: true, // Desabilitar ordenamiento
            order: [[0, 'desc']],
            language: {
                url: "https://cdn.datatables.net/plug-ins/1.10.25/i18n/Spanish.json"
            },
            stateSave: true,
            stateDuration: 10000,
            processing: true,
            serverSide: true,

            ajax: {
                url: "{{ route('instructoresShow') }}",
                type: 'GET',
                data: function(d) {
                    d.estatus = estatusActivo;
                },
                error: function(xhr, error, thrown) {
                    console.error('Error al cargar datos:', xhr.responseText);
                    alert('Error al cargar los datos de la tabla');
                }
            },
            initComplete: function() {
                if (estatusActivo !== null && estatusActivo !== undefined) {
                    $('.status-card[data-estatus="' + estatusActivo + '"]').addClass('active-card');
                } else {
                    $('.status-card[data-estatus=""]').addClass('active-card');
                }
            },
            
            columnDefs: [{
                target: 0,
                visible: false,
                searchable: false,
            }],
            
            columns: [
                { data: "ins_id" },
                { data: "ins_num_exp" },
                { data: "nombre_psc" },
                { data: "uni_nombre" },
                { data: "fecha_alta" },
                {
                    data: "ultima_observacion",
                    orderable: false, // ✅ Desactivar ordenamiento en observaciones
                    render: function(data, type, row) {
                        if (data && data.length > 100) {
                            let textoCorto = data.substring(0, 100) + '...';
                            return `<span data-bs-toggle="tooltip" data-bs-placement="top" title="${data.replace(/"/g, '&quot;')}">${textoCorto}</span>`;
                        }
                        return data || 'Sin observaciones';
                    }
                },
                {
                    data: null,
                    orderable: false,
                    searchable: false,
                    render: function(data) {

                        const archivos = {
                            ident: data.ins_file_identificacion ? `${BASE_URL}${data.ins_file_identificacion}` : SIN_DOC,
                            curri: data.ins_file_curriculum ? `${BASE_URL}${data.ins_file_curriculum}` : SIN_DOC,
                            cuenta: data.ins_file_estado_cuenta ? `${BASE_URL}${data.ins_file_estado_cuenta}` : SIN_DOC,
                            fiscal: data.ins_file_cons_fiscal ? `${BASE_URL}${data.ins_file_cons_fiscal}` : SIN_DOC,
                            acta: data.ins_file_acta ? `${BASE_URL}${data.ins_file_acta}` : SIN_DOC,
                            domicilio: data.ins_file_domicilio ? `${BASE_URL}${data.ins_file_domicilio}` : SIN_DOC,
                            curp: data.ins_file_curp ? `${BASE_URL}${data.ins_file_curp}`: SIN_DOC
                        };

                        const classBtn = CLASS_BTN_MAP[data.ins_estatus_validado] || 'dark';

                        const especialidades = [
                            data.ins_id_cfp1, 
                            data.ins_id_cfp2, 
                            data.ins_id_cfp3, 
                            data.ins_id_cfp4, 
                            data.ins_id_cfp5  // Cambio: antes era insid_cfp5
                        ].filter(Boolean).join(',');

                        const noBorrador = data.ins_estatus_validado != 0;
                        const psc = `${data.ins_nombre} ${data.ins_ape_pat} ${data.ins_ape_mat}`;

                        const puedeEditarInstructor = {{ \App\Services\PermisoService::tienePermisoCache('Instructores','editar_instructor') ? 'true' : 'false'}};
                        const puedeActivarUnidadesInstructor = {{ \App\Services\PermisoService::tienePermisoCache('Instructores','activar_unidades_instructor') ? 'true' : 'false'}};
                        const puedeActivarEspecialidadesInstructor = {{ \App\Services\PermisoService::tienePermisoCache('Instructores','activar_especialidades_instructor') ? 'true' : 'false'}};
                        const puedeActivarCursosInstructor = {{ \App\Services\PermisoService::tienePermisoCache('Instructores','activar_cursos_instructor') ? 'true' : 'false'}};
                        const puedeVerDocumentosInstructor = {{ \App\Services\PermisoService::tienePermisoCache('Instructores','ver_documentos') ? 'true' : 'false'}};

                        // ✅ OPTIMIZACIÓN 5: Template literals simplificados
                        return `
                            <div class="d-flex justify-content-center">
                                ${puedeEditarInstructor == true ? `
                                    <button type="button" class="btn btn-${classBtn} shadow btn-xs sharp me-1 btn-edit" data-id="${data.ins_id}"
                                    data-bs-toggle="tooltip" 
                                    data-bs-placement="top" 
                                    title="Editar Instructor">
                                        <i class="fas fa-user-alt"></i>
                                    </button>
                                    `: ''}
                                ${noBorrador ? `
                                    ${puedeActivarUnidadesInstructor == true ? `
                                        <button type="button" class="btn ${data.tiene_unidades_activas ? 'btn-success' : 'btn-dark'} shadow btn-xs sharp me-1 btn-unidades-autorizadas btn-unidad-${data.ins_id}" 
                                            data-bs-toggle="tooltip" 
                                            data-bs-placement="top" 
                                            title="Activar/Desactivar PSC en Unidades"
                                            data-id="${data.ins_id}" data-psc="${psc}" data-instructor-id="${data.ins_id}">
                                            <i class="fa fa-institution"></i>
                                        </button>
                                    `: ''}
                                    ${puedeActivarEspecialidadesInstructor == true ? `
                                        <button type="button" class="btn ${data.tiene_especialidades_activas ? 'btn-success' : 'btn-primary'} shadow btn-xs sharp me-1 btn-especialidades" 
                                            data-bs-toggle="tooltip" 
                                            data-bs-placement="top" 
                                            title="Activar/Desactivar Especialidades"
                                            data-id="${data.ins_id}" data-psc="${psc}" data-instructor-id="${data.ins_id}">
                                            <i class="fa fa-bookmark"></i>
                                        </button>
                                    `: ''}
                                    ${puedeActivarCursosInstructor == true ? `
                                        <button type="button" class="btn ${data.tiene_cursos_activos ? 'btn-success' : 'btn-info'} shadow btn-xs sharp me-1 btn-cursos-activos" 
                                            data-bs-toggle="tooltip" 
                                            data-bs-placement="top" 
                                            title="Activar/Desactivar Cursos"
                                            data-id-especialidades="${especialidades}" data-id-instructor="${data.ins_id}" data-psc="${psc}">
                                            <i class="fa fa-address-book"></i>
                                        </button>
                                    `: '' }
                                    ${puedeVerDocumentosInstructor == true ? `
                                        <div class="dropdown">
                                            <button type="button" class="btn btn-secondary shadow btn-xs sharp" data-bs-toggle="dropdown">
                                                <i class="fa fa-file-pdf"></i>
                                            </button>
                                            <div class="dropdown-menu">
                                                <a class="dropdown-item ver-pdf" data-src="${archivos.ident}" data-bs-toggle="modal" data-bs-target="#modalArchivo">Identificación</a>
                                                <a class="dropdown-item ver-pdf" data-src="${archivos.curri}" data-bs-toggle="modal" data-bs-target="#modalArchivo">Curriculum</a>
                                                <a class="dropdown-item ver-pdf" data-src="${archivos.cuenta}" data-bs-toggle="modal" data-bs-target="#modalArchivo">Estado de Cuenta</a>
                                                <a class="dropdown-item ver-pdf" data-src="${archivos.fiscal}" data-bs-toggle="modal" data-bs-target="#modalArchivo">Constancia Fiscal</a>
                                                <a class="dropdown-item ver-pdf" data-src="${archivos.acta}" data-bs-toggle="modal" data-bs-target="#modalArchivo">Comprobante Estudios</a>
                                                <a class="dropdown-item ver-pdf" data-src="${archivos.domicilio}" data-bs-toggle="modal" data-bs-target="#modalArchivo">Comprobante de Domicilio</a>
                                                <a class="dropdown-item ver-pdf" data-src="${archivos.curp}" data-bs-toggle="modal" data-bs-target="#modalArchivo">Comprobante CURP</a>
                                            </div>
                                        </div> 
                                    `: ''}
                                    
                                ` : ''}
                            </div>`;
                    }
                }
            ],
            deferRender: true,
            pageLength: 10,
            lengthMenu: [[10, 25, 50, 100], [10, 25, 50, 100]],
            drawCallback: function() {
                // Aplicar colores guardados después de dibujar la tabla
                let estadoUnidades = JSON.parse(localStorage.getItem('estadoUnidades') || '{}');
                $('.btn-unidades-autorizadas').each(function() {
                    let instructorId = $(this).data('instructor-id');
                    if (instructorId && typeof estadoUnidades[instructorId] !== 'undefined') {
                        if (estadoUnidades[instructorId]) {
                            $(this).removeClass('btn-dark').addClass('btn-success');
                        } else {
                            $(this).removeClass('btn-success').addClass('btn-dark');
                        }
                    }
                });
                
                // Aplicar colores guardados para especialidades
                let estadoEspecialidades = JSON.parse(localStorage.getItem('estadoEspecialidades') || '{}');
                $('.btn-especialidades').each(function() {
                    let instructorId = $(this).data('instructor-id');
                    if (instructorId && typeof estadoEspecialidades[instructorId] !== 'undefined') {
                        if (estadoEspecialidades[instructorId]) {
                            $(this).removeClass('btn-primary').addClass('btn-success');
                        } else {
                            $(this).removeClass('btn-success').addClass('btn-primary');
                        }
                    }
                });
                
                // ⚠️ NO aplicar localStorage para cursos
                // El servidor calcula dinámicamente tiene_cursos_activos basado en especialidades activas
                // Por lo tanto, siempre confiamos en el color que viene del servidor
                // El localStorage de cursos solo se usa para sincronización interna, no para sobrescribir
            }
        });

        // MODAL PARA ACTIVAR O DESACTIVAR CURSO
        function cambiarStatus(button) {
            if ($(button).hasClass('btn-success')) {
                $(button).removeClass('btn-success').addClass('btn-danger');
                $(button).find('i').removeClass('fa-check').addClass('fa-close');
            } else {
                $(button).removeClass('btn-danger').addClass('btn-success');
                $(button).find('i').removeClass('fa-close').addClass('fa-check');
            }

            let especialidadesStatus = [];

            let modalId = $("#especialidades-activadas");

            modalId.find('.toggle-status').each(function() {
                especialidadesStatus.push({
                    id: $(this).data('id-esp'),
                    status: $(this).hasClass('btn-success') ? 'activar' : 'desactivar'
                });
            });

            $('#status').val(JSON.stringify(especialidadesStatus));

        }





        $(document).ready(function() {

            //TABLA PARA ACTIVAR O DESACTIVAR PSC EN UNIDAD
            $('.psc-table').on('click', '.btn-unidades-autorizadas', function() {
                $(this).tooltip('hide');
                $('#unidades-autorizadas').modal('show');
                
                var id = $(this).data('id');
                var $botonActual = $(this); // Guardar referencia al botón clickeado
                $("#nombre_psc").text($(this).data("psc"));
                $("#id_psc_guardar").val($(this).data("id"));
                $('#cambiar_status').val('');

                const url_1 = "{{ route('unidadesActivos', ['id' => '_ID']) }}".replace('_ID', id);

                $.ajax({
                    url: url_1, // Asegúrate de tener esta ruta definida
                    method: 'GET',
                    dataType: "json",
                    success: function(response) {
                        //const data = response.success;

                        // 1) quitar duplicados por id de unidad
                        const unidadesDeduplicadas = Array.from(
                            new Map(response.success.map(item => [item.ins_uni_unidad_id, item])).values()
                        );

                        let html = '';
                        
                        for (let i = 0; i < unidadesDeduplicadas.length; i += 2) {
                            const item1 = unidadesDeduplicadas[i];
                            const item2 = unidadesDeduplicadas[i + 1] ?? null;
                            //            <td><i class="far fa-building fa-1x"></i> ${item1.uni_nombre} </td>

                            html += `<tr>
                                        <td>${item1.uni_nombre}</td>
                                        <td class="text-center">
                                            <button class="btn ${item1.ins_uni_estatus_instructor ? 'btn-success' : 'btn-danger'} 
                                                shadow btn-xs sharp me-1 toggle-status" data-id="${item1.ins_uni_instructor_id}" 
                                                data-id-unidad="${item1.ins_uni_unidad_id}" onClick="cambiarStatusUnidad(this)">
                                                <i class="fa ${item1.ins_uni_estatus_instructor ? 'fa-check' : 'fa-times'}"></i>
                                            </button>
                                        </td>`;
                            
                            if (item2) {
                                html += `
                                        <td>${item2.uni_nombre}</td>
                                        <td class="text-center">
                                            <button class="btn ${item2.ins_uni_estatus_instructor ? 'btn-success' : 'btn-danger'} 
                                                shadow btn-xs sharp me-1 toggle-status" data-id="${item2.ins_uni_instructor_id}" 
                                                data-id-unidad="${item2.ins_uni_unidad_id}" onClick="cambiarStatusUnidad(this)">
                                                <i class="fa ${item2.ins_uni_estatus_instructor ? 'fa-check' : 'fa-times'}"></i>
                                            </button>
                                        </td>`;
                            } else {
                                html += `<td></td><td></td>`;
                            }

                            html += `</tr>`;
                            
                        }
                        
                        $('#unidades-autorizadas').find('.unidades-autorizadas-table tbody').empty().html(html);
                        
                        // Actualizar color del botón según unidades activas
                        let unidadesActivas = 0;
                        data.forEach(item => {
                            if (item.ins_uni_estatus_instructor) {
                                unidadesActivas++;
                            }
                        });
                        
                        // Actualizar clase del botón
                        if (unidadesActivas > 0) {
                            $botonActual.removeClass('btn-dark').addClass('btn-success');
                        } else {
                            $botonActual.removeClass('btn-success').addClass('btn-dark');
                        }
                    },
                    error: function(xhr) {
                        console.log("error");
                        $('#cfp-response-msg').text(
                            'Ocurrió un error al intentar eliminar el CFP.');
                    }
                });

            });


            $('.psc-table').on('click', '.btn-especialidades', function() {
                $(this).tooltip('hide');
                $('#especialidades-activadas').modal('show');

                var id = $(this).data('id');
                $("#psc").text($(this).data("psc"));
                $("#id_psc").val($(this).data("id"));
                $('#cambiar_status').val('');

                const url_1 = "{{ route('pscEspecialidadesShow', ['id' => '_ID']) }}".replace('_ID', id);

                $.ajax({
                    url: url_1, // Asegúrate de tener esta ruta definida
                    method: 'GET',
                    dataType: "json",
                    success: function(response) {
                        const data = response.data;
                        let html = '';

                        data.forEach(item => {
                            html += `<tr>
                        <td>${item.esp_nombre} / ${item.esp_clave}</td>
                        <td class="text-center">
                            <button class="btn ${item.ins_esp_estatus ? 'btn-success' : 'btn-danger'} shadow btn-xs sharp me-1 toggle-status" data-id="${item.ins_esp_instructor_id}"
                            data-id-esp="${item.ins_esp_especialidad_id}" onClick="cambiarStatus(this)">
                                <i class="fa ${item.ins_esp_estatus ? 'fa-check' : 'fa-times'}"></i>
                            </button>
                        </td>
                    </tr>`;
                        });

                        $('#especialidades-activadas').find('.psc-esp-table tbody').html(html);
                    },
                    error: function(xhr) {
                        console.log("error");
                        $('#cfp-response-msg').text(
                            'Ocurrió un error al intentar eliminar el CFP.');
                    }
                });

                $(document).ready(function() {
                    $(".guardar").on("submit", function(e) {
                        e.preventDefault(); // Previene la recarga de la página
                        let form = $(this);
                        let actionUrl = form.attr("action");
                        let formData = form.serialize();

                        $.ajax({
                            url: actionUrl,
                            type: "POST",
                            data: formData,
                            dataType: "json",
                            success: function(response) {

                                if (response.success) {
                                    $('#mensaje-confirmacion').show();
                                    $('#mensaje-confirmacion').text(response
                                        .success);
                                    setTimeout(function() {
                                        $("#mensaje-confirmacion")
                                            .fadeOut(
                                                "slow"
                                            );
                                    }, 4000);
                                    
                                    // Contar cuántas especialidades están activadas
                                    let especialidadesActivas = 0;
                                    $('#especialidades-activadas .psc-esp-table .toggle-status').each(function() {
                                        if ($(this).hasClass('btn-success')) {
                                            especialidadesActivas++;
                                        }
                                    });
                                    
                                    // Obtener el ID del instructor
                                    let instructorId = $('#id_psc').val();
                                    
                                    // Usar función global para actualizar el botón
                                    actualizarColorBotonEspecialidades(instructorId, especialidadesActivas > 0);
                                    
                                    // Guardar estado en localStorage para persistencia
                                    let estadoEspecialidades = JSON.parse(localStorage.getItem('estadoEspecialidades') || '{}');
                                    estadoEspecialidades[instructorId] = especialidadesActivas > 0;
                                    localStorage.setItem('estadoEspecialidades', JSON.stringify(estadoEspecialidades));
                                    
                                    // Limpiar el estado de cursos del localStorage para este instructor
                                    // Esto permite que el servidor calcule el nuevo estado después de eliminar cursos
                                    let estadoCursos = JSON.parse(localStorage.getItem('estadoCursos') || '{}');
                                    delete estadoCursos[instructorId];
                                    localStorage.setItem('estadoCursos', JSON.stringify(estadoCursos));
                                    
                                    // Recargar la tabla y sincronizar el localStorage con el nuevo estado del servidor
                                    $('.psc-table').DataTable().ajax.reload(function() {
                                        // Después de que la recarga termine, obtener el color real del botón renderizado por el servidor
                                        let $boton = $('.btn-cursos-activos[data-id-instructor="' + instructorId + '"]');
                                        
                                        // Si el botón no está visible en la página actual, buscarlo en todas las filas de DataTables
                                        if ($boton.length === 0 && $.fn.DataTable.isDataTable('.psc-table')) {
                                            let table = $('.psc-table').DataTable();
                                            table.rows().every(function() {
                                                let row = this.node();
                                                let $btnInRow = $(row).find('.btn-cursos-activos[data-id-instructor="' + instructorId + '"]');
                                                if ($btnInRow.length > 0) {
                                                    $boton = $btnInRow;
                                                    return false;
                                                }
                                            });
                                        }
                                        
                                        // Sincronizar localStorage con el estado real del servidor
                                        if ($boton.length > 0) {
                                            let tieneCursosActivos = $boton.hasClass('btn-success');
                                            let estadoCursos = JSON.parse(localStorage.getItem('estadoCursos') || '{}');
                                            estadoCursos[instructorId] = tieneCursosActivos;
                                            localStorage.setItem('estadoCursos', JSON.stringify(estadoCursos));
                                        }
                                    }, false);
                                }
                            },
                            error: function(xhr) {
                                $('#mensaje-error').show().html(xhr.responseJSON
                                    .error);
                                setTimeout(function() {
                                    $("#mensaje-error").fadeOut(
                                        "slow");
                                }, 4000);
                            }
                        });
                    });
                });
            });
        });

        // ACTIVAR O DESACTIVAR ESPECIALIDADES - Actualizar color al cerrar modal
        $('#especialidades-activadas').on('hidden.bs.modal', function() {
            // Actualizar el botón cuando se cierra el modal
            let instructorId = $('#id_psc').val();
            if (instructorId) {
                // Contar especialidades activas
                let especialidadesActivas = 0;
                $('#especialidades-activadas .psc-esp-table .toggle-status').each(function() {
                    if ($(this).hasClass('btn-success')) {
                        especialidadesActivas++;
                    }
                });
                
                // Actualizar el botón
                actualizarColorBotonEspecialidades(instructorId, especialidadesActivas > 0);
            }
        });

        // ACTIVAR O DESACTIVAR CURSOS - Actualizar color al cerrar modal
        $('#cursos-activados').on('hidden.bs.modal', function() {
            // Actualizar el botón cuando se cierra el modal
            let instructorId = $('#id_psc_curso').val();
            if (instructorId) {
                // Contar cursos activos desde el campo hidden
                let cursosActivadosValue = $('#activar_cursos').val();
                let cantidadCursosActivos = 0;
                
                if (cursosActivadosValue && cursosActivadosValue.trim() !== '') {
                    let cursosArray = cursosActivadosValue.split(',').filter(id => id.trim() !== '');
                    cantidadCursosActivos = cursosArray.length;
                }
                
                // Actualizar el botón
                actualizarColorBotonCursos(instructorId, cantidadCursosActivos > 0);
            }
        });

        // ACTIVAR O DESACATIVAR PSC EN UNIDAD
        $('#unidades-autorizadas').on('hidden.bs.modal', function() {
            $('#msg_error_guardar_activar_unidad').html('');
            
            // Actualizar el botón cuando se cierra el modal
            let instructorId = $('#id_psc_guardar').val();
            if (instructorId) {
                // Contar unidades activas
                let unidadesActivas = 0;
                $('#unidades-autorizadas .unidades-autorizadas-table .toggle-status').each(function() {
                    if ($(this).hasClass('btn-success')) {
                        unidadesActivas++;
                    }
                });
                
                // Actualizar el botón
                actualizarColorBotonUnidades(instructorId, unidadesActivas > 0);
            }
        });

        $('#unidades-autorizadas').on('shown.bs.modal', function() {
            $('#id-unidades-psc').val(''); // Vacía el campo
            $('#accion').val('');
        });

        $(document).ready(function() {
            $('#btn_guardar_psc_unidad').on('mousedown', function(e) {
                let msg_error = $('#id-unidades-psc').val();
                let action = $('#accion').val();
                // Intercepta antes de que Bootstrap lo procese
                if (!action) {
                    e.preventDefault();
                    e.stopImmediatePropagation();
                    // Opcional: eliminar el atributo para evitar que Bootstrap lo use
                    $(this).removeAttr('data-bs-dismiss');
                } else {
                    $(this).attr('data-bs-dismiss');
                }
            });
        });

        $(".guardar-psc-unidad").on("submit", function(e) {
            let msg_error = $('#id-unidades-psc').val();

            if (!msg_error) {
                $('#msg_error_guardar_activar_unidad').html('Selecione una opcion para guardar');
            }

            let accion = $('#accion').val();

            if (accion == 2) {
                $url = "{{ route('desactivarAllUnidad') }}";
            } else if (accion == 3) {
                $url = "{{ route('activarAllUnidad') }}";
            } else if (accion == 1) {
                $url = "{{ route('updateStatusUnidad') }}";
            }

            e.preventDefault(); // Previene la recarga de la página
            let form = $(this);
            let actionUrl = $url;
            let formData = form.serialize();

            $.ajax({
                url: actionUrl,
                type: "POST",
                data: formData,
                dataType: "json",
                success: function(response) {

                    if (response.success) {
                        $('#mensaje-confirmacion').show();
                        $('#mensaje-confirmacion').text(response
                            .success);
                        setTimeout(function() {
                            $("#mensaje-confirmacion")
                                .fadeOut(
                                    "slow"
                                );
                        }, 4000);

                        // Contar cuántas unidades están activadas
                        let unidadesActivas = 0;
                        $('#unidades-autorizadas .unidades-autorizadas-table .toggle-status').each(function() {
                            if ($(this).hasClass('btn-success')) {
                                unidadesActivas++;
                            }
                        });

                        // Obtener el ID del instructor
                        let instructorId = $('#id_psc_guardar').val();

                        // Usar función global para actualizar el botón
                        actualizarColorBotonUnidades(instructorId, unidadesActivas > 0);
                        
                        // Guardar estado en localStorage para persistencia
                        let estadoUnidades = JSON.parse(localStorage.getItem('estadoUnidades') || '{}');
                        estadoUnidades[instructorId] = unidadesActivas > 0;
                        localStorage.setItem('estadoUnidades', JSON.stringify(estadoUnidades));
                    }
                },
                error: function(xhr) {
                    //$('#msg_error_guardar_activar_unidad').show().html(xhr.responseJSON.error);

                }
            });
        });


        $('#desactivarTodo').on('click', function() {
            //$('#btn_guardar_psc_unidad').attr('data-bs-dismiss');
            $('#btn_guardar_psc_unidad').attr('data-bs-dismiss', 'modal');
            $('.unidades-autorizadas-table .toggle-status').each(function() {
                $(this).removeClass('btn-success').addClass('btn-danger');
                $(this).find('i').removeClass('fa-check').addClass('fa-close');
            });

            $('#accion').val(2);
        });

        $('#activarTodo').on('click', function() {
            //$('#btn_guardar_psc_unidad').attr('data-bs-dismiss');
            $('#btn_guardar_psc_unidad').attr('data-bs-dismiss', 'modal');
            $('.unidades-autorizadas-table .toggle-status').each(function() {
                $(this).removeClass('btn-danger').addClass('btn-success');
                $(this).find('i').removeClass('fa-close').addClass('fa-check');
            });

            $('#accion').val(3);
        });

        // MODAL PARA ACTIVAR O DESACTIVAR CURSOS DEL PSC
        function cambiarStatusUnidad(button) {
            $('#btn_guardar_psc_unidad').attr('data-bs-dismiss', 'modal');

            if ($(button).hasClass('btn-success')) {
                $(button).removeClass('btn-success').addClass('btn-danger');
                $(button).find('i').removeClass('fa-check').addClass('fa-close');
            } else {
                $(button).removeClass('btn-danger').addClass('btn-success');
                $(button).find('i').removeClass('fa-close').addClass('fa-check');
            }

            let unidadesStatus = [];
            let modalId = $("#unidades-autorizadas");

            modalId.find('.toggle-status').each(function() {
                unidadesStatus.push({
                    id: $(this).data('id-unidad'),
                    status: $(this).hasClass('btn-success') ? 'activar' : 'desactivar'
                });
            });
            $('#accion').val(1);
            $('#id-unidades-psc').val(JSON.stringify(unidadesStatus));
        }


        // MODAL PARA ACTIVAR O DESACTIVAR CURSOS DEL PSC
        function cambiarStatusCurso(button) {
            if ($(button).hasClass('btn-success')) {
                $(button).removeClass('btn-success').addClass('btn-danger');
                $(button).find('i').removeClass('fa-check').addClass('fa-close');
            } else {
                $(button).removeClass('btn-danger').addClass('btn-success');
                $(button).find('i').removeClass('fa-close').addClass('fa-check');
            }

            let especialidadesStatus = [];
            //let modalId = $("#cursos-activados");
            // Acceder al DataTable por su ID
            let table = $('.psc-cursos-table').DataTable();

            table.$('.toggle-status.btn-success').each(function() {
                especialidadesStatus.push($(this).data('id'));
            });

            $('#activar_cursos').val(especialidadesStatus);
        }

        $(document).ready(function() {
            $('.psc-table').on('click', '.btn-cursos-activos', function() {
                $(this).tooltip('hide');
                $('#cursos-activados').modal('show');

                var id = $(this).data('id-especialidades');
                var id_instructor = $(this).data('id-instructor');
                $('#id_psc_curso').val(id_instructor);
                $("#cursos_activados_psc").text($(this).data("psc"));
                // limpia mensajes
                $('#mensaje-confirmacion-curso').hide().text('');
                $('#mensaje-error-curso').hide().text('');

                $.ajax({
                    url: '{{ route('activos') }}',
                    method: 'POST',
                    data: {
                        _token: '{{ csrf_token() }}',
                        id: id,
                        id_instructor: id_instructor
                    },
                    success: function(response) {
                        const data = response.data;
                        let html = '';
                        cursosActivados = [];

                        if (Array.isArray(data) && data.length > 0 && data[0].ins_cur_id_curso) {
                            cursosActivados = JSON.parse(data[0].ins_cur_id_curso);
                        }
                        // inicializa el campo con los cursos activados
                        $('#activar_cursos').val(cursosActivados.join(','));

                        //let cursosActivados = JSON.parse(data[0].ins_cur_id_cur) || 0;
                        //Ordenar los elementos: primero los que están activos
                        data.sort((a, b) => {
                            const aActivo = cursosActivados.includes(a.cur_id) ? 0 : 1;
                            const bActivo = cursosActivados.includes(b.cur_id) ? 0 : 1;
                            return aActivo - bActivo;
                        });
                        // muestra los campos de activacion o desactivación PSC
                        data.forEach(item => {
                            const esCursoActivo = cursosActivados.includes(item
                                .cur_id);

                            html += `<tr>
                                    <td>${item.cur_nombre} | ${item.cur_clave}</td>
                                    <td class="text-center">${item.cur_tipo_formacion ? item.cur_tipo_formacion : ''}</td>
                                    <td class="text-center">
                                    <button class="btn ${esCursoActivo ? 'btn-success' : 'btn-danger'} shadow btn-xs sharp me-1 toggle-status" Onclick="cambiarStatusCurso(this)"
                                            data-id="${item.cur_id}">
                                    <i class="fa ${esCursoActivo ? 'fa-check' : 'fa-close'}"></i>
                                    </button>
                                    </td>
                                </tr>`;
                        });
                        //$('#cursos-activados').find('.psc-cursos-table tbody').html(html);
                        const $tabla = $('#cursos-activados').find('.psc-cursos-table');
                        // Limpiar y llenar tabla
                        $tabla.DataTable().clear()
                            .destroy(); // elimina instancia anterior si existe
                        $tabla.find('tbody').html(html);
                        // Inicializar DataTables con paginación
                        $tabla.DataTable({
                            paging: true,
                            pageLength: 10,
                            searching: true,
                            ordering: false,
                            info: true,
                            language: {
                                url: "https://cdn.datatables.net/plug-ins/1.13.6/i18n/es-ES.json"
                            }
                        });
                    },
                    error: function(xhr) {
                        console.log("error");
                        $('#cfp-response-msg').text(
                            'Ocurrió un error al intentar eliminar el CFP.');
                    }
                });

                $(".guardar-curso").on("submit", function(e) {

                    e.preventDefault(); // Previene la recarga de la página
                    let form = $(this);
                    let actionUrl = form.attr("action");
                    let formData = form.serialize();

                    $('#mensaje-confirmacion-curso').hide().text('');
                    $('#mensaje-error-curso').hide().text('');

                    // cuenta cuantos grupos estan activados
                    let cursosActivados = $('#activar_cursos').val();
                    let cantidadCursosActivados = 0;
                    
                    if (cursosActivados) {
                        // Si es un array, contar los elementos
                        let cursosArray = cursosActivados.split(',').filter(id => id.trim() !== '');
                        cantidadCursosActivados = cursosArray.length;
                    }

                    $.ajax({
                        url: actionUrl,
                        type: "POST",
                        data: formData,
                        dataType: "json",
                        success: function(response) {

                            if (response.success) {
                                // mensaje de total de cursos activados
                                let mensajePersonalizado = `${response.success}. Total de cursos activados: ${cantidadCursosActivados}`;

                                $('#mensaje-confirmacion-curso').show().text(mensajePersonalizado);
                                //$('#mensaje-confirmacion').text(response.success);

                                setTimeout(function() {
                                    $("#mensaje-confirmacion-curso").fadeOut("slow");
                                    /*$('#cursos-activados').modal('hide');*/
                                }, 4000);
                                
                                // Obtener el ID del instructor
                                let instructorId = $('#id_psc_curso').val();
                                
                                // Usar función global para actualizar el botón
                                actualizarColorBotonCursos(instructorId, cantidadCursosActivados > 0);
                                
                                // Guardar estado en localStorage para persistencia
                                let estadoCursos = JSON.parse(localStorage.getItem('estadoCursos') || '{}');
                                estadoCursos[instructorId] = cantidadCursosActivados > 0;
                                localStorage.setItem('estadoCursos', JSON.stringify(estadoCursos));
                            }
                        },
                        error: function(xhr) {
                            $('#mensaje-error-curso').show().html(xhr.responseJSON?.error || 'Error desconocido');
                            setTimeout(function() {
                                $("#mensaje-error-curso").fadeOut("slow");
                            }, 4000);
                        }
                    });
                });

            });
        });

        //UPDATE INSTRUCTOR
        $(document).ready(function() {
            $('.psc-table').on('click', '.btn-edit', function() {
                var id = $(this).data('id');
                const url_edit = "{{ route('showInstructor', ['id' => '_ID']) }}".replace('_ID', id);
                window.location.href = url_edit; // Redirecciona a la vista directamente
            });
        });
    </script>
@endpush