@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 Para El Trabajo</h4>
                        </div>
                        @puede('Cursos para el trabajo', 'alta_curso_para_trabajo')
                            <div class="card-body">
                                <div class="basic-form d-block">
                                    <form action="{{ route('cursoParaElTrabajoNuevo') }}" method="post" id="cursoForm">
                                        @csrf
                                        <div class="row">
                                            <div class="col-lg-3 mb-3 col-md-6">
                                                <label class="form-label">Especialidad</label>
                                                <select name="especialidad" class="form-select" id="cfp">
                                                    <option value="">Seleccione</option>
                                                    @foreach ($especialidades_cfp as $cfp)
                                                        <option
                                                            value='{"id":"{{ $cfp->cfp_id }}","cfp_nombre":"{{ $cfp->esp_nombre }}","id_es":"{{ $cfp->esp_id }}"}'>
                                                            {{ $cfp->esp_nombre }} | {{ $cfp->esp_clave }} </option>
                                                    @endforeach
                                                </select>

                                                <div class="text-danger" id="error-cfp">
                                                    @error('especialidad')
                                                        {{ $message }}
                                                    @enderror
                                                </div>

                                            </div>
                                            <div class="col-lg-4 mb-3 col-md-6">
                                                <label class="form-label">Nombre del Curso</label>
                                                <input type="text" name="nombre_curso" id="nombre_curso"
                                                    class="form-control"placeholder="Ingrese Nombre del Curso">

                                                <div class="text-danger" id="error-nombrecurso">
                                                    @error('nombre_curso')
                                                        {{ $message }}
                                                    @enderror
                                                </div>

                                            </div>
                                            <div class="col-lg-1 mb-3 col-md-6">
                                                <label class="form-label">Horas</label>
                                                <input type="number" name="horas" class="form-control" id="horas"
                                                    placeholder="Horas" max="999"
                                                    oninput="if(this.value.length > 3) this.value = this.value.slice(0, 3);">

                                                <div class="text-danger" id="error-horas">
                                                    @error('horas')
                                                        {{ $message }}
                                                    @enderror
                                                </div>

                                            </div>
                                            <div class="col-lg-2 mb-3 col-md-6">
                                                <label class="form-label">Año</label>
                                                <select name="anio" class="form-control" id="anio">
                                                    <option value="" selected>Seleccione</option>
                                                    @foreach ($cursos_para_el_trabajo_years as $year)
                                                        <option value="{{ $year }}">{{ $year }}</option>
                                                    @endforeach
                                                </select>

                                                <div class="text-danger" id="error-anio">
                                                    @error('anio')
                                                        {{ $message }}
                                                    @enderror
                                                </div>

                                            </div>
                                            <div class="col-lg-2 mb-3 col-md-6">
                                                <label class="form-label">Estatus</label>
                                                <select name="estatus" class="form-control" id="estatus">
                                                    <option value="">Seleccione</option>
                                                    <option value="A">A - Actualizaci&oacute;n</option>
                                                    <option value="C">C - Cambio</option>
                                                    <option value="T">T - Transformaci&oacute;n</option>
                                                </select>

                                                <div class="text-danger" id="error-estatus">
                                                    @error('estatus')
                                                        {{ $message }}
                                                    @enderror
                                                </div>

                                            </div>
                                            <div class="col-lg-3 mb-3 col-md-6">
                                                <label class="form-label">Tipo de Formación</label>
                                                <select name="tipo" class="form-control" id="tipo">
                                                    <option value="">Seleccione</option>
                                                    <option value="EBC">EBC - Educaci&oacute;n Basada en Competencias
                                                    </option>
                                                    <option value="CCO">CCO - Criterios de Competecia Ocupacional</option>
                                                    <option value="ECI">ECI - Enfoque de Competencias Integrales</option>
                                                    <option value="SCP">SCP - S&iacute;ntesis de ContenidoProgram&aacute;tico
                                                    </option>
                                                    <option value="EEX">EEX - Especialidades de Extensi&oacute;n</option>
                                                    <option value="ORI">ORI - Oferta Regular ICATEP</option>
                                                </select>

                                                <div class="text-danger" id="error-tipo">
                                                    @error('tipo')
                                                        {{ $message }}
                                                    @enderror
                                                </div>

                                            </div>
                                            <div class="col-lg-2 mb-3 col-md-6">
                                                <label class="form-label">Consecutivo</label>
                                                <select name="consecutivo" class="form-control" id="consecutivo">
                                                    <option value="">Seleccione</option>
                                                    <option value="01">01</option>
                                                    <option value="02">02</option>
                                                    <option value="03">03</option>
                                                    <option value="04">04</option>
                                                    <option value="05">05</option>
                                                    <option value="06">06</option>
                                                    <option value="07">07</option>
                                                    <option value="08">08</option>
                                                    <option value="09">09</option>
                                                    @foreach ($consecutivo as $consecutivos)
                                                        <option value="{{ $consecutivos }}">{{ $consecutivos }}
                                                        </option>
                                                    @endforeach
                                                </select>

                                                <div class="text-danger" id="error-consecutivo">
                                                    @error('consecutivo')
                                                        {{ $message }}
                                                    @enderror
                                                </div>

                                            </div>
                                            <div class="col-lg-3 mb-3 col-md-6">
                                                <label class="form-label">Clave</label>
                                                <input type="text" name="clave" id="clave" class="form-control"
                                                    placeholder="Clave del Curso">
                                                <div class="text-danger"></div>
                                            </div>
                                            <div class="col-lg-4 mb-3 col-md-6 d-flex align-items-end">
                                                <label class="form-label"></label>
                                                <button type="button" class="btn btn-primary w-50"
                                                    id="btnConfirmar">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="39%">Nombre</th>
                                <th width="23%">Especialidad</th>
                                <th width="25%">CFP</th>
                                <th width="1%">Horas</th>
                                <th width="5%" class="text-center"></th>
                            </tr>
                        </thead>
                        <tbody>
                            <!----Aqui--->
                        </tbody>
                    </table>
                </div>
                <!-- MODAL ACTUALIZAR CURSO PARA EL TRABAJO -->
                <div class="modal fade update-cr" id="update-curso" aria-hidden="true">
                    <div class="modal-dialog modal-dialog-centered modal-xl" 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('cursoParaElTrabajoUpdate') }}" 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="">
                                        </div>
                                        <div class="mb-3 col-md-8">
                                            <label class="form-label">Especialidad</label>
                                            <input type="text" value="" name="up_nombre_esp"
                                                class="form-control" id="up_nombre_esp" 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="update_nombre_curso" placeholder="Nombre curso">
                                            <div class="text-danger"></div>
                                        </div>
                                        <div class="mb-3 col-md-2 text-center">
                                            <label class="form-label">Horas</label>
                                            <input type="number" value="" name="update_horas"
                                                class="form-control text-center" id="update_horas" placeholder=""
                                                max="999"
                                                oninput="if(this.value.length > 3) this.value = this.value.slice(0, 3);">
                                            <div class="text-danger"></div>
                                        </div>
                                        <div class="mb-3 col-md-2">
                                            <label class="form-label">Año</label>
                                            <select class="form-control" name="update_year" id="update_year">
                                                <option value="">Seleccione año:</option>
                                                @foreach ($cursos_para_el_trabajo_years as $year)
                                                    <option value="{{ $year }}">{{ $year }}
                                                    </option>
                                                @endforeach
                                            </select>
                                            <div class="text-danger"></div>
                                        </div>
                                        <div class="mb-3 col-md-4">
                                            <label class="form-label">Estatus</label>
                                            <select class="form-control" name="update_estatus" id="update_estatus">
                                                <option value="">Estatus:</option>
                                                <option value="A">A - Actualizaci&oacute;n</option>
                                                <option value="C">C - Cambio</option>
                                                <option value="T">T - Transformaci&oacute;n</option>
                                            </select>
                                            <div class="text-danger"></div>
                                        </div>
                                        <div class="mb-3 col-md-4">
                                            <label class="form-label">Tipo</label>
                                            <select class="form-control" name="update_tipo" id="update_tipo">
                                                <option value="">Tipo:</option>
                                                <option value="EBC">EBC - Educaci&oacute;n Basada en
                                                    Competencias</option>
                                                <option value="CCO">CCO - Criterios de Competecia Ocupacional
                                                </option>
                                                <option value="ECI">ECI - Enfoque de Competencias Integrales
                                                </option>
                                                <option value="SCP">SCP - S&iacute;ntesis de Contenido
                                                    Program&aacute;tico</option>
                                                <option value="EEX">EEX - Especialidades de Extensi&oacute;n
                                                </option>
                                                <option value="ORI">ORI - Oferta Regular ICATEP</option>
                                            </select>
                                            <div class="text-danger"></div>
                                        </div>
                                        <div class="mb-3 col-md-2">
                                            <label class="form-label">Consecutivo</label>
                                            <select class="form-control" name="update_consecutivo"
                                                id="update_consecutivo">
                                                <option value="">Seleccione:</option>
                                                @foreach ($consecutivo as $consecutivos)
                                                    <option value="{{ $consecutivos }}">{{ $consecutivos }}
                                                    </option>
                                                @endforeach
                                            </select>
                                            <div class="text-danger"></div>
                                        </div>
                                        <div class="alert alert-primary alert-dismissible fade show" 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-body text-center">
                                <strong id="name_curso"></strong><br>
                                <strong class="text-danger" id="curso-response1-msg"></strong>
                            </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" onclick="setTimeout(() => { $('.modal').modal('hide'); }, 1500)">Actualizar</button>
                                <input type="hidden" value="" name="id_curso" id="update_id_curso">
                            </div>
                            </form>
                        </div>
                    </div>
                </div>
                <div class="modal fade" id="cursos-activados" tabindex="-1" style="display: none;" aria-modal="true"
                    role="dialog">
                    <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>
                            @puede('Cursos para el trabajo', 'btn_activar_curso_para_trabajo_unidad')
                            <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>
                            @endpuede
                        </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('cursoParaElTrabajoDestroy') }}" 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>
                <!-- MODAL CONFIRMACIÓN DE GUARDAR -->
                <div class="modal fade" id="confirmModal" tabindex="-1" aria-hidden="true">
                    <div class="modal-dialog modal-lg">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title">Confirmar Datos del Curso</h5>
                                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                            </div>
                            <div class="modal-body">
                                <p>Revisa la información antes de guardar:</p>
                                <table class="table table-sm table-bordered">
                                    <tbody>
                                        <tr>
                                            <th>Especialidad</th>
                                            <td id="m_especialidad"></td>
                                        </tr>
                                        <tr>
                                            <th>Nombre del Curso</th>
                                            <td id="m_nombre_curso"></td>
                                        </tr>
                                        <tr>
                                            <th>Horas</th>
                                            <td id="m_horas"></td>
                                        </tr>
                                        <tr>
                                            <th>Año</th>
                                            <td id="m_anio"></td>
                                        </tr>
                                        <tr>
                                            <th>Estatus</th>
                                            <td id="m_estatus"></td>
                                        </tr>
                                        <tr>
                                            <th>Tipo de Formación</th>
                                            <td id="m_tipo"></td>
                                        </tr>
                                        <tr>
                                            <th>Consecutivo</th>
                                            <td id="m_consecutivo"></td>
                                        </tr>
                                        <tr>
                                            <th>Clave</th>
                                            <td id="m_clave"></td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-primary" data-bs-dismiss="modal">Regresar a
                                    editar</button>
                                <button type="button" class="btn btn-success" id="btnEnviar">Confirmar y
                                    Guardar</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </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, #clave, #update_clave, #update_nombre_curso');
        });
        
        $('#cfp').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, #horas").on("input", function() {
            //     $(this).closest('.mb-3').find('.text-danger').fadeOut("slow");
            // });

            $('#anio, #estatus, #tipo, #consecutivo, #cfp').on('input change', function() {
                $(this).closest('.mb-3').find('.text-danger').fadeOut("slow");
            });

            // limitInputLength('#nombre_curso', 20);
            // Al dar clic en "Guardar" llenar el modal
            $('#btnConfirmar').on('click', function() {
                // Validar que los campos obligatorios no esten vacios
                let especialidad = $('#cfp').val();
                let nombreCurso = $('#nombre_curso').val().trim();
                let horas = $('#horas').val().trim();
                let anio = $('#anio').val();
                let estatus = $('#estatus').val();
                let tipo = $('#tipo').val();
                let consecutivo = $('#consecutivo').val();
                let clave = $('#clave').val().trim();

                // limpiar mensaje previo
                $('#error-cfp').text('');
                $('#error-nombrecurso').text('');
                $('#error-horas').text('');
                $('#error-anio').text('');
                $('#error-estatus').text('');
                $('#error-tipo').text('');
                $('#error-consecutivo').text('');
                $('#error-clave').text('');

                if (!especialidad) {
                    $('#error-cfp').text('La Especialidad es obligatorio.');
                    $('#cfp').focus();
                    $('#cfp').val('');
                    return;
                }
                if (!nombreCurso) {
                    $('#error-nombrecurso').text('El Nombre del Curso es obligatorio.');
                    $('#nombre_curso').focus();
                    $('#nombre_curso').val('');
                    return;
                }
                if (!horas || isNaN(horas) || horas <= 0) {
                    $('#error-horas').text('Las Horas es obligatoria y debe ser un número positivo.');
                    $('#horas').focus();
                    $('#horas').val('');
                    return;
                }
                if (!anio) {
                    $('#error-anio').text('El Año es obligatorio.');
                    $('#anio').focus();
                    $('#anio').val('');
                    return;
                }
                if (!estatus) {
                    $('#error-estatus').text('El Estatus es obligatorio.');
                    $('#estatus').focus();
                    $('#estatus').val('');
                    return;
                }
                if (!tipo) {
                    $('#error-tipo').text('El Tipo de Formación es obligatorio.');
                    $('#tipo').focus();
                    $('#tipo').val('');
                    return;
                }
                if (!consecutivo) {
                    $('#error-consecutivo').text('El Consecutivo es obligatorio.');
                    $('#consecutivo').focus();
                    $('#consecutivo').val('');
                    return;
                }
                if (!clave) {
                    $('#error-clave').text('La Clave es obligatoria.');
                    $('#clave').focus();
                    $('#clave').val('');
                    return;
                }

                // Llenar el modal con los valores del formulario
                $('#m_especialidad').text($('#cfp option:selected').text());
                $('#m_nombre_curso').text($('#nombre_curso').val());
                $('#m_horas').text($('#horas').val());
                $('#m_anio').text($('#anio').val());
                $('#m_estatus').text($('#estatus option:selected').text());
                $('#m_tipo').text($('#tipo option:selected').text());
                $('#m_consecutivo').text($('#consecutivo').val());
                $('#m_clave').text($('#clave').val());

                // Mostrar modal (Bootstrap 5)
                $('#confirmModal').modal('show');
            });

            // Si confirman, enviamos el formulario
            $('#btnEnviar').on('click', function() {
                $('#cursoForm').submit();
                // Deshabilitar el botón para evitar múltiples envíos
                $(this).prop('disabled', true);
                // Cambiar el texto del botón para indicar que se está procesando
                $(this).text('Guardando nuevo curso...');
            });

        });



        $('.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').html('Se encuentra registrado con clave :<br>' + response.nombre_curso +
                            '<br> 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');
                }
            });
        }

        


        // TABLA CURSOS PARA EL TRABAJO
        $('.cursos-table').DataTable({
            ordering: true, // Desabilitar ordenamiento
            order: [
                [0, 'desc']
            ],
            language: {
                url: "https://cdn.datatables.net/plug-ins/1.10.25/i18n/Spanish.json"
            },
            stateSave: false,
            stateDuration: 10000,
            ajax: "{{ route('cursoParaElTrabajoShow') }}", // Obteenr ruta de los cursos
            columnDefs: [{
                target: 0,
                visible: false,
                searchable: false,
            }],
            columns: [{
                    data: "cur_id"
                },
                {
                    data: "cur_clave"
                },
                {
                    data: "cur_nombre"
                },
                {
                    data: "esp_nombre"
                },
                {
                    data: "cfp_nombre"
                },
                {
                    data: "cur_horas",
                    data: "cur_horas",
                    className: "text-center"

                },
                {
                    data: null,
                    orderable: false,
                    render: function(data) {
                        let clave = data.cur_clave; // Separar la clave en partes
                        const puedeEditarCurso = "{{ $puedeEditarCurso }}"==1  ? true : false;
                        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-curso="${data.cur_nombre}"  data-nombre-esp="${data.esp_nombre}" data-clave="${data.cur_clave}" data-id="${data.cur_id}"  
                                                    data-horas="${data.cur_horas}"  data-year="${data.cur_año}" data-estatus="${data.cur_estatus}" data-tipo="${data.cur_tipo_formacion}" data-consecutivo="${data.cur_consecutivo}"
                                                    >
                                                <i class="fas fa-pencil-alt" data-bs-toggle="tooltip" title="Editar"></i>
                                            </button>
                                            ` : ''}
                                ${puedeActivarDesactivarCurso == true ? `
                                            <button type="button" class="btn btn-dark shadow btn-xs sharp me-1 btn-activos" data-id="${data.cur_id}" data-curso="${data.cur_nombre}" data-bs-toggle="modal" data-bs-target="#cursos-activados">
                                                    <i class="fa fa-institution" data-bs-toggle="tooltip" title="Activar/Desactivar Curso"></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>`;
                    }
                }
            ]
        });

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

        }

        // Si la tabla ya está inicializada, destruirla correctamente
        if ($.fn.DataTable.isDataTable('.unidades-table')) {
            $('.unidades-table').DataTable().clear()
                .destroy(); // Limpia los datos y luego destruye la instancia
        }

        $(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('');

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

            });
        });

        $('#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);
                });
            });
        });

        // MODAL PARA ACTUALIZAR INFORMACIÓN DEL CURSO
        $(document).ready(function() {
            $('.cursos-table').on('click', '.btn-update', function() {
                // console.log('click en editar');

                // Ocultar alertas
                $('#alert-modal').hide();
                $('#alert-modal-error').hide();

                $("#update_clave").val($(this).data("clave"));
                $("#up_nombre_esp").val($(this).data("nombre-esp"));
                $("#update_nombre_curso").val($(this).data("curso"));
                $("#update_horas").val($(this).data("horas"));
                $("#update_id_curso").val($(this).data("id"));
                

                var year = $(this).data('year');
                var estatus = $(this).data('estatus');
                var consecutivo = $(this).data('consecutivo');
                var tipo = $(this).data('tipo');

                $('#update_year').val(year).prop('selected', true).selectpicker('refresh');
                $('#update_estatus').val(estatus).prop('selected', true).selectpicker('refresh');
                $('#update_consecutivo').val(consecutivo).prop('selected', true).selectpicker('refresh');
                $('#update_tipo').val(tipo).prop('selected', true).selectpicker('refresh');

                $(".modal form.update").off("submit").on("submit", function(e) {
                    // $(".modal form.update").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;
                                console.log(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
                            }
                        }

                    });
                });

            });
        });

        // MODAL PARA ELIMINAR CURSO
        $(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
            });
        });

        $(document).ready(function() {
            // $('#anio, #estatus, #tipo, #consecutivo, #cfp').on('change',
            $('#anio, #estatus, #tipo, #consecutivo, #cfp').on('change',
                function() {
                    let nuevoAnio = $('#anio').val(); // Obtener el nuevo año seleccionado
                    let nuevaLetra = $('#estatus').val(); // Obtener la nueva letra después del año
                    let nuevoTipo = $('#tipo').val(); // Obtener el nuevo tipo (EBC, SCP, etc.)
                    let nuevoConsecutivo = $('#consecutivo').val(); // Obtener el nuevo consecutivo
                    let cfp = $('#cfp').val();
                    let cfp_json = JSON.parse(cfp); // Convierte el string en un objeto JSON
                    let id_cfp = cfp_json.id;
                    let nombre_cfp = cfp_json.cfp_nombre;

                    let palabrasIgnoradas = ['EN', 'LA', 'CON', 'DE', 'LOS', '-', 'A', 'UN', 'DEL', 'E', 'en',
                        'con', 'muy', 'a', 'Y', 'que', 'es'
                    ];

                    // Convertir nombre_cfp en iniciales, excluyendo palabras ignoradas
                    let iniciales = nombre_cfp.split(" ")
                        .filter(word => !palabrasIgnoradas.includes(word.toUpperCase())) // Filtrar palabras
                        .map(word => word.charAt(0)
                            .toUpperCase()) // Tomar la primera letra y ponerla en mayúsculas
                        .join(""); // Unir las iniciales

                    let clave = $('#clave').val(); // Obtener la clave actual

                    // Expresión regular para modificar el año, la letra después del año, el tipo y el consecutivo
                    clave = (String(id_cfp).padStart(2, '0') + "-" + iniciales + "-" + nuevoAnio + nuevaLetra + "-" + nuevoTipo + "-" +
                        nuevoConsecutivo);

                    $('#clave').val(clave); // Actualizar el campo con la nueva clave
                });

            $('#update_year, #update_estatus, #update_tipo, #update_consecutivo').on('change',
                function() {
                    // let clave1 = $('#update_clave').val().split('-').slice(0, 2).join('-') + '-'; // Obtener la clave hasta el segundo guion
                    let clave1 = $('#update_clave').val(); // Obtener la clave hasta el segundo guion
                    let nuevoAnio1 = $('#update_year').val(); // Obtener el nuevo año seleccionado
                    let nuevaLetra1 = $('#update_estatus').val(); // Obtener la nueva letra después del año
                    let nuevoTipo1 = $('#update_tipo').val(); // Obtener el nuevo tipo (EBC, SCP, etc.)
                    let nuevoConsecutivo1 = $('#update_consecutivo').val(); // Obtener el nuevo consecutivo
                    // console.log('valores : ' + nuevoAnio1 + ' ' + nuevaLetra1 + ' ' + nuevoTipo1 + ' ' + nuevoConsecutivo1);
                    // Expresión regular para modificar el año, la letra después del año, el tipo y el consecutivo
                    // updateClave = (clave1 + nuevoAnio1 + nuevaLetra1 + "-" + nuevoTipo1 + "-" +  nuevoConsecutivo1);

                    $('#update_clave').val(updateClave); // Actualizar el campo con la nueva clave
                });
        });
    </script>
@endpush