@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">Cursos En El Trabajo</h4>
                        </div>
                        @puede('Cursos en el trabajo', 'alta_curso_en_trabajo')
                            <div class="card-body">
                                <div class="basic-form d-block">
                                    <form action="{{ route('cursoEnElTrabajoNuevo') }}" method="post" class="agregar-curso">
                                        @csrf
                                        <div class="row align-items-end">
                                            <div class="col-lg-3 mb-3 col-md-6">
                                                <label class="form-label">Especialidad</label>
                                                <select name="especialidad" class="form-select" id="especialidad">
                                                    <option value="" {{ old('especialidad') == null ? 'selected' : '' }}>
                                                        Seleccione</option>
                                                    @foreach ($especialidades_cfp as $especialidad)
                                                        <option
                                                            value='{"id_especialidad":"{{ $especialidad->esp_id }}","cfp":"{{ $especialidad->cfp_id }}"}'
                                                            {{ old('especialidad', '') == $especialidad->esp_id ? 'selected' : '' }}>
                                                            {{ $especialidad->esp_nombre }} | {{ $especialidad->esp_clave }}
                                                        </option>
                                                    @endforeach
                                                </select>
                                                @error('especialidad')
                                                    <div class="text-danger">{{ $message }}</div>
                                                @enderror
                                            </div>
                                            <div class="col-lg-5 mb-3 col-md-6">
                                                <label class="form-label">Nombre del Curso</label>
                                                <input type="text" name="nombre_curso" value="{{ old('nombre_curso') }}"
                                                    class="form-control" id="nombre_curso" placeholder="Nombre del Curso">
                                                @error('nombre_curso')
                                                    <div class="text-danger">{{ $message }}</div>
                                                @enderror
                                            </div>
                                            <div class="col-lg-2 mb-3 col-md-6">
                                                <label class="form-label">Tipo</label>
                                                <select class="form-control" name="tipo_curso" id="tipo_curso">
                                                    <option value="" {{ old('tipo_curso') == null ? 'selected' : '' }}>
                                                        Seleccione</option>
                                                    <option value="CAE"
                                                        {{ old('tipo_curso', '') == 'CAE' ? 'selected' : '' }}>CAE</option>
                                                    <option value="EXT"
                                                        {{ old('tipo_curso', '') == 'EXT' ? 'selected' : '' }}>EXT</option>
                                                    <option value="ALI"
                                                        {{ old('tipo_curso', '') == 'ALI' ? 'selected' : '' }}>ALI</option>
                                                </select>
                                                @error('tipo_curso')
                                                    <div class="text-danger">{{ $message }}</div>
                                                @enderror
                                            </div>
                                            <div class="col-lg-2 mb-3 col-md-6 d-flex align-items-end">
                                                <button type="submit" class="btn btn-primary w-100">Guardar</button>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        @endpuede
                    </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="responsiveTable_wrapper" class="dataTables_wrapper no-footer">
                    <table id="responsiveTable"
                        class="table table-striped responsive w-100 dataTable no-footer dtr-inline collapsed cursos-table"
                        aria-describedby="responsiveTable_info">
                        <thead>
                            <tr>
                                <th width="10%">Id</th>
                                <th width="15%">Clave</th>
                                <th width="45%">Curso</th>
                                <th width="20%">Especialidad</th>
                                <th width="23%">CFP</th>
                                <th width="23%">Tipo</th>
                                <th width="5%"></th>
                            </tr>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
                </div>
                <!-- MODAL PARA ACTUALIZAR CURSO EN EL TRABAJO -->
                <div class="modal fade" id="update-curso" aria-hidden="true">
                    <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title">Actualizar Curso</h5>
                                <button type="button" class="btn-close" data-bs-dismiss="modal">
                                </button>
                            </div>
                            <div class="modal-body">
                                <form action="{{ route('cursoEnElTrabajoUpdate') }}" method="post" class="update">
                                    @csrf
                                    <div class="row">
                                        <div class="mb-3 col-md-4">
                                            <label class="form-label">Clave</label>
                                            <input type="text" value="" name="update_clave"
                                                class="form-control" id="update_clave" placeholder="" readonly>
                                        </div>
                                        <div class="mb-3 col-md-8">
                                            <label class="form-label">Campo de Formación Profesional</label>
                                            <input type="text" value="" name="update_cfp" class="form-control"
                                                id="cfp_update" placeholder="" readonly>
                                        </div>
                                        <div class="mb-3 col-md-10">
                                            <label class="form-label">Nombre Curso</label>
                                            <input type="text" value="" name="update_nombre_curso"
                                                class="form-control" id="nombre_curso_update" placeholder="Nombre curso">
                                        </div>
                                        <div class="mb-3 col-md-2">
                                            <label class="form-label">Tipo curso:</label>
                                            <select class="form-control" name="tipo_update" id="tipo_update">
                                                <option value="">Tipo:</option>
                                                <option value="CAE">CAE</option>
                                                <option value="EXT">EXT</option>
                                                <option value="ALI">ALI</option>
                                            </select>
                                        </div>

                                        <div class="alert alert-primary alert-dismissible fade#" id="alert-modal">
                                            <strong id="alert-modal-confirmacion"></strong>
                                        </div>
                                        <div class="alert alert-danger alert-dismissible fade show"
                                            id="alert-modal-error">
                                            <strong id="alert-modal-confirmacion-error"></strong>
                                        </div>

                                    </div>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-danger light"
                                    data-bs-dismiss="modal">Cerrar</button>
                                <button type="submit" class="btn btn-primary" id="actualizar" data-bs-dismiss="modal">Actualizar</button>
                                <input type="hidden" name="id_curso" id="id_curso_update">
                                <input type="hidden" name="id_cfp" id="id_cfp_update">
                            </div>
                            </form>
                        </div>
                    </div>
                </div>
                <!-- MODAL PARA ACTIVAR CURSO EN UNIDAD --->
                <!-- <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-lg">
                        <div class="modal-content">
                            <div class="modal-header bg-primary">
                                <h5 class="modal-title text-white">Activar o Desactivar Curso en Unidad</h5>
                                <button type="button" class="btn-close" data-bs-dismiss="modal">
                                </button>
                            </div>
                            <div class="modal-body">
                                <div id="responsiveTable_wrapper" class="dataTables_wrapper no-footer">
                                    <strong class="text-primary" id="st_curso"></strong><br>
                                    <table id="responsiveTable" class="display responsive w-80 dataTable unidades-table"
                                        aria-describedby="responsiveTable_info">
                                        <thead>
                                            <tr>
                                                <th width="40%">Unidad</th>
                                                <th width="5%" class="text-center">Status</th>
                                                <th width="40%">Unidad</th>
                                                <th width="5%" class="text-center">Status</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">
                                    <button type="button" class="btn btn-danger light" id="desactivarTodo">Desactivar
                                        Todo</button>
                                    <button type="submit" class="btn btn-success light" id="activarTodo">Activar
                                        Todo</button>
                                    <form method="POST" class="guardar-estatus-unidad" action="">
                                        @csrf
                                        <button type="submit" class="btn btn-primary w-30" data-bs-dismiss="modal"
                                            id="btn_guardar_cambio_curso_unidad">Guardar</button>
                                        <input type="hidden" name="cambiar_status" id="cambiar_status" value="">
                                        <input type="hidden" name="id_curso" id="id_curso_guardar" value="">
                                        <input type="hidden" name="" id="accion" value="">
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div> -->
                     <!-- MODAL ELIMINAR CURSO EN EL TRABAJO -->
                    <div class="modal fade delete-cr" id="delete-curso" 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">Eliminar Curso</h5>
                                    <button type="button" class="btn-close" data-bs-dismiss="modal">
                                    </button>
                                </div>
                                <div class="modal-body text-center">
                                    <strong id="name_curso"></strong><br>
                                    <strong class="text-danger" id="curso-response-msg"></strong>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-primary light"
                                        data-bs-dismiss="modal">Cerrar</button>
                                    <button type="button" class="btn btn-danger" id="eliminar" data-bs-toggle="modal"
                                        data-bs-target="#confirm-delete">Eliminar</button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal fade" id="confirm-delete" 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 Eliminaci&oacute;n</h5>
                                    <button type="button" class="btn-close" data-bs-dismiss="modal">
                                    </button>
                                </div>
                                <div class="modal-footer ">
                                    <form action="{{ route('cursoEnElTrabajoDestroy') }}" method="post"
                                        class="modal-footer delete">
                                        @csrf
                                        <input type="hidden" name="id_curso" value="" id="id_curso">
                                        <button type="button" class="btn btn-primary light"
                                            data-bs-dismiss="modal">NO</button>
                                        <button type="submit" class="btn btn-danger" data-bs-dismiss="modal">SI</button>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                <!--</div>-->
            </div>
            <input type="hidden" id="puedeEditarCurso" value="{{ $puedeEditarCurso }}">
        </div>
    </div>
@endsection

@push('scripts')
    <script>

        function convertToUpperCase(selector) {
            document.querySelectorAll(selector).forEach(input => {
                input.addEventListener('input', function(event) {
                    const cursorPos = this.selectionStart; // Guarda la posición del cursor
                    this.value = this.value.toUpperCase(); // Convierte el texto a mayúsculas
                    this.setSelectionRange(cursorPos, cursorPos); // Restaura la posición del cursor
                });
            });
        }

        $(document).ready(function() {
            convertToUpperCase('#nombre_curso, #nombre_curso_update');
        });
        
        $('#especialidad').select2();

        if ($.fn.DataTable.isDataTable('#responsiveTable')) {
            $('#responsiveTable').DataTable().destroy();
        }

        

        $(document).ready(function() {

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

            $("#nombre_curso").on("input", function() {
                $(this).siblings(".text-danger").fadeOut("slow"); // Oculta el mensaje de error
            });

            $('#especialidad, #tipo_curso').on('input change', function() {
                $(this).closest('.mb-3').find('.text-danger').fadeOut("slow");
            });


        });

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

        function eliminarCurso(idCurso) {
            $.ajax({
                url: '{{ route('validateDestroyCurso') }}', // Asegúrate de tener esta ruta definida
                method: 'POST',
                data: {
                    _token: '{{ csrf_token() }}',
                    id_curso: idCurso
                },
                success: function(response) {
                    // Mostrar el mensaje dentro del modal
                    if (response.message == 'SI') {
                        $('#curso-response-msg').text('Se encuentra registrado en '+response.nombre_curso+ ' y no puede ser eliminado.');
                        $('#eliminar').prop('disabled', true);
                    } else {
                        $('#curso-response-msg').text('');
                        $('#eliminar').prop('disabled', false);
                    }
                },
                error: function(xhr) {
                    $('#curso-response-msg').text('Ocurrió un error al intentar eliminar el Curso');
                }
            });
        }

        const EditarCurso = $('#puedeEditarCurso').val();
        const puedeEditarCurso = EditarCurso==1 ? true : false;

        //Tabla para mostrar cursos registrados
        $('.cursos-table').DataTable({
            ordering: true,
            order: [[0, 'desc']],
            language: {
                url: "https://cdn.datatables.net/plug-ins/1.10.25/i18n/Spanish.json"
            },
            stateSave: false,
            stateDuration: 10000,
            
            // ✅ AGREGAR SERVER-SIDE PROCESSING PARA CARGA RÁPIDA
            processing: true,
            serverSide: true,
            
            ajax: {
                url: "{{ route('cursoEnElTrabajoShow') }}",
                type: 'GET',
                error: function(xhr, error, thrown) {
                    console.error('Error al cargar datos:', xhr.responseText);
                }
            },
            
            columnDefs: [{
                target: 0,
                visible: false,
                searchable: false,
            }, {
                target: 6, // Columna de acciones no ordenable
                orderable: false,
                searchable: false
            }],
            
            columns: [{
                    data: "cur_id"
                },
                {
                    data: "cur_clave"
                },
                {
                    data: "cur_nombre"
                },
                {
                    data: "esp_nombre"
                },
                {
                    data: "cfp_nombre"
                },
                {
                    data: "cur_tipo_formacion"
                },
                {
                    data: null,
                    orderable: false,
                    render: function(data) {

                    const puedeActivarDesactivarCurso = "{{ $puedeActivarDesactivarCurso }}"==1  ? true : false;
                    const puedeEliminarCurso = "{{ $puedeEliminarCurso }}"==1  ? true : false;

                        return `
                    <div class="d-flex justify-content-center">
                    ${puedeEditarCurso == true ? `
                                                <button type="button" class="btn btn-primary shadow btn-xs sharp me-1 btn-update" data-bs-toggle="modal" data-bs-target="#update-curso"
                                                        data-id-cfp="${data.cfp_id}" data-id="${data.cur_id}" data-clave="${data.cur_clave}" data-cfp="${data.cfp_nombre}" data-nombre="${data.cur_nombre}" data-bs-toggle="modal" data-bs-target="#update-curso">
                                                    <i class="fas fa-pencil-alt" data-bs-toggle="tooltip" title="Editar"></i>
                                                </button>
                                                    ` : ''}
                
                    ${puedeEliminarCurso == true ? `
                                                <button type="button" class="btn btn-danger shadow btn-xs sharp me-1 btn-delete"
                                                    data-id="${data.cur_id}" data-curso="${data.cur_nombre}" data-bs-toggle="modal" data-bs-target="#delete-curso"
                                                    onClick="eliminarCurso(${data.cur_id});">
                                                    <i class="fa fa-trash" data-bs-toggle="tooltip" title="Eliminar"></i>
                                                </button>
                                                ` : ''}
                    </div>
                `;
                    }
                }
            ],
            
            // ✅ OPTIMIZACIONES DE RENDIMIENTO
            deferRender: true,
            pageLength: 10,
            lengthMenu: [[10, 25, 50, 100], [10, 25, 50, 100]]
        });

        // MODAL PARA ACTUALIZAR INFORMACIÓN DEL CURSO EN EL TRABAJO
        $(document).ready(function() {
            $('.cursos-table').on('click', '.btn-update', function() {

                // Ocultar alertas
                $('#alert-modal').hide();
                $('#alert-modal-error').hide();
                $("#update_clave").val($(this).data("clave"));
                $("#nombre_curso_update").val($(this).data("nombre"));
                $("#cfp_update").val($(this).data("cfp"));
                $("#id_curso_update").val($(this).data("id"));
                $("#id_cfp_update").val($(this).data("id-cfp"));

                let clave = ($(this).data("clave"));


                if (clave.includes('-')) {
                    // Formato guionado: 30-CNR-EXT-2025-02674
                    let partes = clave.split('-');
                    if (partes.length >= 3) {
                        tipoExtraido = partes[2]; // Tercer bloque
                    }

                    $('#tipo_update').val(tipoExtraido).prop('selected', true).selectpicker('refresh');
                } else {
                    // Formato compacto: 0EXT252676
                    let match = clave.match(/[A-Z]+/);
                    if (match) {
                        tipoExtraido = match[0];
                    }
                    $('#tipo_update').val(tipoExtraido).prop('selected', true).selectpicker('refresh');
                }

                $('#tipo_update').on('change', function() {
                    let clave = $("#update_clave").val(); // Clave actual
                    let tipo = $("#tipo_update").val(); // Nuevo tipo (ej. DIF)

                    if (tipo !== '') {
                        let nuevaClave = '';

                        if (clave.includes('-')) {
                            // Clave con formato guionado → "30-CNR-EXT-2025-02674"
                            // Separar por guiones
                            let partes = clave.split('-');

                            if (partes.length >= 3) {
                                partes[2] = tipo; // Reemplaza el tercer segmento (EXT)
                                nuevaClave = partes.join('-');
                            } else {
                                nuevaClave = clave; // Si no tiene suficientes partes, no modificar
                            }
                        } else {
                            // Clave simple → "0EXT252676"
                            // Reemplaza solo las letras entre números
                            nuevaClave = clave.replace(/[A-Z]+/, tipo);
                        }

                        $('#update_clave').val(nuevaClave);
                    }
                });

                $(".modal form.update").off("submit").on("submit", function(e) {

                    e.preventDefault(); // Prevenir la recarga de página
                    let formData = $(this).serialize(); // Obtener los datos del formulario
                    let dataTable = $('.cursos-table')
                        .DataTable(); // Obtener la instancia de DataTable
                    let paginaActual = dataTable.page(); // Guardar la página actual

                    $.ajax({
                        url: $(this).attr("action"),
                        type: "POST",
                        data: formData, // Agregar ID a la cadena

                        success: function(response) {
                            $('#alert-modal').show();
                            $('#alert-modal-confirmacion').html(response.success);
                            setTimeout(function() {
                                $('#alert-modal').fadeOut(
                                    'slow'); // Ocultar alerta
                            }, 4000); // Tiempo en milisegundos
                            dataTable.ajax.reload(null, false);
                            dataTable.page(paginaActual).draw(
                                false); // Restaurar la página después del reload
                        },
                        error: function(xhr) {
                            if (xhr.status ===
                                422) { // Validación del lado del servidor
                                let errors = xhr.responseJSON.errors;

                                $('.text-danger').html(
                                    ''); // Limpiar mensajes de error anteriores
                                for (let field in errors) {
                                    let errorMessage = errors[field][0];
                                    $(`[name="${field}"]`).closest('.mb-3').find(
                                        '.text-danger').html(errorMessage);
                                }

                                // Eliminar mensajes de error cuando se llenen los campos
                                $('.update input, .update select').on('input change',
                                    function() {
                                        $(this).closest('.mb-3').find(
                                            '.text-danger').html('');
                                    });
                            } else {
                                $('#alert-modal-error').show();
                                $('#alert-modal-confirmacion-error').html(xhr
                                    .responseJSON.error);
                                setTimeout(function() {
                                    $('#alert-modal-error').fadeOut(
                                        'slow'); // Ocultar alerta
                                }, 4000); // Tiempo en milisegundos
                            }
                        }
                    });
                });
            });
        });
     
        $(document).ready(function() {
            $('.cursos-table').on('click', '.btn-activos', function() {
                var id = $(this).data('id');
                $("#st_curso").text($(this).data("curso"));
                $("#id_curso_desactivar").val($(this).data("id"));
                $("#id_curso_activar").val($(this).data("id"));
                $("#id_curso_guardar").val($(this).data("id"));
                $('#cambiar_status').val('');
                /*var url = "{{ route('cursosActivos', ['id' => '__ID__']) }}".replace('__ID__',
                    id);*/ // Reemplaza correctamente el ID

                const url_1 = "{{ route('cursosActivos', ['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;
                        let html = '';

                        for (let i = 0; i < data.length; i += 2) {
                            const item1 = data[i];
                            const item2 = data[i + 1];

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

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

                            html += `</tr>`;
                        }
                        $('#cursos-activados').find('.unidades-table tbody').html(html);

                    },
                    error: function(xhr) {
                        console.log("error");
                        $('#cfp-response-msg').text(
                            'Ocurrió un error al intentar eliminar el CFP.');
                    }
                });
            });
        });

        // MODAL PARA ACTIVAR O DESACTIVAR CURSO
        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 unidadesStatus = [];
            let modalId = $("#cursos-activados");
            modalId.find('.toggle-status').each(function() {
                unidadesStatus.push({
                    id: $(this).data('id'),
                    status: $(this).hasClass('btn-success') ? 'activar' : 'desactivar'
                });
            });
            $('#cambiar_status').val(JSON.stringify(unidadesStatus));
            $('#accion').val(1);
        }

        $('#desactivarTodo').on('click', function() {
            $('#btn_guardar_cambio_curso_unidad').attr('data-bs-dismiss', 'modal');
            $('.unidades-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_cambio_curso_unidad').attr('data-bs-dismiss', 'modal');
            $('.unidades-table .toggle-status').each(function() {
                $(this).removeClass('btn-danger').addClass('btn-success');
                $(this).find('i').removeClass('fa-close').addClass('fa-check');
            });
            $('#accion').val(3);
        });

        $(document).ready(function() {
            // Bind al formulario (no al botón) para manejar el submit correctamente
            $('.guardar-estatus-unidad').on('submit', function(e) {
                e.preventDefault();

                const $form = $(this);
                const accion = String($('#accion').val()).trim();
                let url;

                if (accion == '1') {
                    url = "{{ route('cambiarStatusCursoUnidad') }}";
                } else if (accion == '2') {
                    url = "{{ route('unidadesDesactivarTodo') }}";
                } else if (accion == '3') {
                    url = "{{ route('unidadesActivarTodo') }}";
                } else {

                    return;
                }

                const $btn = $form.find('.guardar-estatus-activacion');
                $btn.prop('disabled', true);

                $.ajax({
                    url: url,
                    type: 'POST',
                    data: $form.serialize(),
                    dataType: 'json'
                }).done(function(response) {
                    if (response.success) {
                        // Mostrar mensaje si existe el contenedor, si no, loguear
                        const $ok = $('#mensaje-confirmacion');
                        if ($ok.length) {
                            $ok.show().text(response.success).delay(4000).fadeOut('slow');
                        } else {
                            console.log(response.success);
                        }
                    }
                }).fail(function(xhr) {
                    const msg = xhr.responseJSON && xhr.responseJSON.error ? xhr.responseJSON
                        .error : 'Ocurrió un error';
                    const $err = $('#mensaje-error');
                    if ($err.length) {
                        $err.show().html(msg).delay(4000).fadeOut('slow');
                    } else {
                        console.error(msg);
                    }
                }).always(function() {
                    $btn.prop('disabled', false);
                });
            });
        });

        // ELIMINAR CURSO EN EL TRABAJO
        $(document).ready(function() {
            $('.cursos-table').on('click', '.btn-delete', function() {
                $("#id_curso").val($(this).data("id"));
                $('#delete-curso').find("#name_curso").text($(this).data(
                    "curso")); // Updated to set the course name
            });
        });
    </script>
@endpush