@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">Especialidades</h4>

                        </div>
                        @puede('Especialidades', 'alta_especialidad')
                            <div class="card-body">
                                <div class="basic-form">
                                    <form action="{{ route('especialidadNueva') }}" method="post" class="agregar-especialidad"
                                        id="form_especialidad">
                                        @csrf
                                        <div class="row">
                                            <div class="col-lg-3 mb-3 col-md-6" id="div_cfp">
                                                <label class="form-label">Campo de Formación Profesional</label>
                                                <select name="id_cfp" class="form-select" id="cfp">
                                                    <option value="" {{ old('id_cfp') == null ? 'selected' : '' }}>
                                                        Seleccione</option>
                                                    @foreach ($campos_de_formacion_profesional as $cfp)
                                                        <option value="{{ $cfp->cfp_id }}" data-id="{{ $cfp->cfp_id }}"
                                                            {{ old('id_cfp', '') == $cfp->cfp_id ? 'selected' : '' }}>
                                                            {{ $cfp->cfp_nombre }} </option>
                                                    @endforeach
                                                </select>
                                                @error('id_cfp')
                                                    <div class="text-danger">{{ $message }}</div>
                                                @enderror
                                            </div>
                                            <div class="col-lg-5 mb-3 col-md-6">
                                                <label class="form-label">Nombre de la Especialidad</label>
                                                <input type="text" name="nombre_especialidad" class="form-control"
                                                    value="{{ old('nombre_especialidad') }}"
                                                    placeholder="Escriba el nombre de la Especialidad" id="nom_esp">
                                                @error('nombre_especialidad')
                                                    <div class="text-danger">{{ $message }}</div>
                                                @enderror
                                            </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 ($years as $year)
                                                        <option value="{{ $year }}"
                                                            {{ old('anio', '') == $year ? 'selected' : '' }}>
                                                            {{ $year }}</option>
                                                    @endforeach
                                                </select>
                                                @error('anio')
                                                    <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 name="tipo" class="form-control" id="tipo">
                                                    <option value="" selected>Seleccione</option>
                                                    <option value="A" {{ old('tipo', '') == 'A' ? 'selected' : '' }}>A |
                                                        ACTUALIZACIÓN:</option>
                                                    <option value="C" {{ old('tipo', '') == 'C' ? 'selected' : '' }}>C |
                                                        CAMBIO</option>
                                                    <option value="T" {{ old('tipo', '') == 'T' ? 'selected' : '' }}>T |
                                                        TRANSFORMACIÓN</option>
                                                </select>
                                                @error('tipo')
                                                    <div class="text-danger">{{ $message }}</div>
                                                @enderror
                                            </div>
                                            <div class="col-lg-3 mb-3 col-md-6">
                                                <label class="form-label">Clave</label>
                                                <input type="text" name="clave_especialidad" class="form-control"
                                                    placeholder="" id="clave_esp" value="" required>
                                                <div class="text-danger"></div>
                                            </div>
                                            <div class="col-lg-4 mb-3 col-md-6 d-flex align-items-end">
                                                <button type="submit" class="btn btn-primary w-50">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 collapsed esp-table"
                        aria-describedby="responsiveTable_info">
                        <thead>
                            <tr>
                                <th>id</th>
                                <th>Especialidad</th>
                                <th width="15%">Clave</th>
                                <th width="25%">Campo de Formación Profesional</th>
                                <th width="5%"></th>
                            </tr>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <!-- MODAL ACTUALIZAR ESPECIALIDAD -->
        <div class="modal fade update-cr" id="update-esp" 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 Especialidad</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal">
                        </button>
                    </div>
                    <div class="modal-body">
                        <form action="{{ route('especialidadUpdate') }}" method="post" class="update">
                            @csrf
                            <div class="row">
                                <div id="alert_error_modal"></div>
                                <div class="mb-3 col-md-6">
                                    <label class="form-label">Campo de Formación Profesional</label>
                                    <input type="text" name="id_cfp" class="form-control" value=""
                                        placeholder="" id="cfp_update" onkeyup="this.value = this.value.toUpperCase()"
                                        readonly>
                                    <div class="text-danger"></div>
                                </div>
                                <div class="col-lg-3 mb-3 col-md-6">
                                    <label class="form-label" id="">Clave</label>
                                    <input type="text" name="clave_especialidad" class="form-control" placeholder=""
                                        id="update_clave" value="" onkeyup="this.value = this.value.toUpperCase()">
                                    <div class="text-danger"></div>
                                </div>
                                <div class="mb-3 col-md-6">
                                    <label class="form-label">Nombre de la Especialidad</label>
                                    <input type="text" name="nom_esp_update" class="form-control" value=""
                                        placeholder="Escriba el nombre de la Especialidad" id="nombre_update">
                                    <div class="text-danger"></div>
                                </div>
                                <div class="col-lg-2 mb-3 col-md-6">
                                    <label class="form-label">Año</label>
                                    <select name="anio_update" class="form-control" id="anio_update">
                                        <option value="" selected>Seleccione Año</option>
                                        @foreach ($years as $year)
                                            <option value="{{ $year }}">{{ $year }}</option>
                                        @endforeach
                                    </select>
                                    <div class="text-danger"></div>
                                </div>
                                <div class="col-lg-4 mb-3 col-md-6">
                                    <label class="form-label">Tipo</label>
                                    <select name="tipo_update" class="form-control" id="tipo_update">
                                        <option value="" selected>Seleccione Tipo</option>
                                        <option value="A">A | ACTUALIZACIÓN:</option>
                                        <option value="C">C | CAMBIO</option>
                                        <option value="T">T | TRANSFORMACIÓN</option>
                                    </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 class="modal-body text-center">
                                    <strong class="text-danger" id="esp-verifica-msg"></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 update" id="verifica"
                            onclick="setTimeout(() => { $('.modal').modal('hide'); }, 1500)">Actualizar</button>
                        <input type="hidden" name="id_especialidad" value="" id="id_especialidad">
                    </div>
                    </form>
                </div>
            </div>
        </div>
        <!-- MODAL CURSOS ESPECIALIDAD -->
        <!-- MODAL CURSOS ESPECIALIDAD GENERICO -->
        <div class="modal fade" id="modal-cursos-especialidad" tabindex="-1" aria-hidden="true">
            <div class="modal-dialog modal-xl">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">CURSOS ESPECIALIDAD <span class="text-danger"
                                id="modal-titulo-especialidad"></span></h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                    </div>
                    <div class="modal-body">
                        <div id="modal-cursos-loading" class="text-center">
                            <div class="spinner-border text-primary" role="status">
                                <span class="visually-hidden">Cargando...</span>
                            </div>
                        </div>
                        <div id="modal-cursos-content" style="display: none;">
                            <div id="modal-cursos-error" class="alert alert-danger alert-dismissible alert-alt fade show"
                                style="display: none;">
                                <strong>Advertencia!!</strong> No se encontraron cursos para esta especialidad.
                            </div>
                            <div id="modal-cursos-table-wrapper" class="dataTables_wrapper no-footer">
                                <table class="table table-striped responsive dataTable no-footer dtr-inline collapsed"
                                    style="width: 100%;">
                                    <thead>
                                        <tr>
                                            <th>CLAVE</th>
                                            <th>CURSO</th>
                                            <th>TIPO</th>
                                        </tr>
                                    </thead>
                                    <tbody id="modal-cursos-body">
                                        <!-- Content loaded via AJAX -->
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer"></div>
                </div>
            </div>
        </div>
        <!-- MODAL ELIMINAR ESPECIALIDAD -->
        <div class="modal fade" id="delete-esp" 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 Especialidad</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal">
                        </button>
                    </div>
                    <div class="modal-body text-center">
                        <strong id="name_esp"></strong><br>
                        <strong class="text-danger" id="esp-response-msg"></strong>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-primary light" data-bs-dismiss="modal">Cerrar</button>
                        <button type="submit" class="btn btn-danger" id="eliminar" data-bs-toggle="modal"
                            data-bs-target="#confirm-delete">Eliminar</button>
                    </div>
                </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('especialidadDestroy') }}" method="post" class="modal-footer delete">
                        @csrf
                        <input type="hidden" name="id_especialidad" value="" id="id_esp">
                        <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 PARA CAMBIO DE ESTATUS DE ESPECIALIDAD -->
    <div class="modal fade" id="status-esp" style="display: none;" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Confirmar cambio de estatus</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal">
                    </button>
                </div>
                <div class="modal-body text-center">
                    <strong id="data-esp"></strong>
                </div>
                <div class="modal-footer">
                    <form id="form-cambiar-estatus" class="modal-footer delete">
                        @csrf
                        <input type="hidden" name="id_especialidad_status" value="" id="id_especialidad_status">
                        <button type="button" class="btn btn-danger light" data-bs-dismiss="modal">Cerrar</button>
                        <button type="button" id="btn-confirmar-estatus" class="btn btn-primary">Aceptar</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
    </div>
    <!--</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('#nom_esp, #clave_esp, #update_clave, #nombre_update');
        });

        $('#cfp').select2();

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

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

        function eliminarEsp(idCurso) {
            $.ajax({
                url: '{{ route('validateDestroyEsp') }}', // Asegúrate de tener esta ruta definida
                method: 'POST',
                data: {
                    _token: '{{ csrf_token() }}',
                    id_especialidad: idCurso
                },
                success: function(response) {
                    // Mostrar el mensaje dentro del modal
                    if (response.message == 'SI') {
                        $('#esp-response-msg').html(
                            'La especialidad ya se encuentra registrada en el curso:<br>' + response
                            .curso_nombre + '<br><br>y no puede ser eliminada.');
                        $('#eliminar').prop('disabled', true);
                    } else {
                        $('#esp-response-msg').text('');
                        $('#eliminar').prop('disabled', false);
                    }
                },
                error: function(xhr) {
                    $('#esp-response-msg').text('Ocurrió un error al intentar eliminar la Especialidad.');
                }
            });
        }



        function verificaEsp(idCurso) {
            $.ajax({
                url: '{{ route('validateDestroyEsp') }}', // Asegúrate de tener esta ruta definida
                method: 'POST',
                data: {
                    _token: '{{ csrf_token() }}',
                    id_especialidad: idCurso
                },
                success: function(response) {
                    // Mostrar el mensaje dentro del modal
                    if (response.message == 'SI') {
                        $('#esp-verifica-msg').html(
                            'La especialidad ya se encuentra registrada en el curso:<br>' + response
                            .curso_nombre + '<br>  y no puede ser modificada.');
                        $('#verifica').prop('disabled', true);
                    } else {
                        $('#esp-verifica-msg').text('');
                        $('#verifica').prop('disabled', false);
                    }
                },
                error: function(xhr) {
                    $('#esp-response-msg').text('Ocurrió un error al intentar eliminar la Especialidad.');
                }
            });
        }

        //TABLA ESPECIALIDADES
        $('.esp-table').DataTable({
            ordering: true, // Habilitar ordenamiento
            order: [
                [0, 'desc']
            ], // Ordenar de forma descendente por la primera columna

            language: {
                url: "https://cdn.datatables.net/plug-ins/1.10.25/i18n/Spanish.json"
            },
            stateSave: true,
            stateDuration: 10000,
            processing: true,
            serverSide: true,
            ajax: "{{ route('especialidadShow') }}", // Obteenr ruta de los cursos
            columnDefs: [{
                target: 0,
                visible: false,
                searchable: false,
            }],
            columns: [{
                    data: "esp_id"
                },
                {
                    data: "esp_nombre"
                },
                {
                    data: "esp_clave"
                },
                {
                    data: "cfp_nombre"
                },
                {
                    data: null,
                    orderable: false, // Disable ordering for the actions column
                    render: function(data) {
                        let clave = data.esp_clave;
                        const puedeVerCursosEspecialidad =
                            {{ \App\Services\PermisoService::tienePermisoCache('Especialidades', 'ver_cursos_especialidad') ? 'true' : 'false' }};
                        const puedeEditarEspecialidad =
                            {{ \App\Services\PermisoService::tienePermisoCache('Especialidades', 'editar_especialidad') ? 'true' : 'false' }};
                        const puedeEliminarEspecialidad =
                            {{ \App\Services\PermisoService::tienePermisoCache('Especialidades', 'eliminar_especialidad') ? 'true' : 'false' }};

                        // Icono, color y tooltip para estatus de especialidad
                        let status = data.esp_estatus;
                        let claseS = '';
                        let iconS = '';
                        let tituloS = '';

                        if (status == 1) {
                            claseS = 'success';
                            iconS = 'fas fa-check';
                            tituloS = 'Especialidad Activa';
                        } else {
                            claseS = 'danger';
                            iconS = 'fas fa-ban';
                            tituloS = 'Especialidad Inactiva';
                        }
                        let btn_activar_especialidad = "";
                        let puedeActivarDesactivarEspecialidad =
                            {{ $puedeActivarEspecialidad ? 'true' : 'false' }};

                        if (puedeActivarDesactivarEspecialidad) {
                            btn_activar_especialidad = `
                                   <button type="button" class="btn btn-${claseS} shadow btn-xs sharp me-1 btn-status" 
                                            data-bs-toggle="modal" data-bs-target="#status-esp" 
                                            data-id="${data.esp_id}" data-especialidad="${data.esp_nombre}" 
                                            onClick="statusEsp(${data.esp_id})">
                                            <i class="${iconS}" data-bs-toggle="tooltip" title="${tituloS}"></i>
                                     </button>`;
                        }

                        return `
                            <div class="d-flex justify-content-center">
                                ${puedeEditarEspecialidad == true ? `
                                                    <button type="button" class="btn btn-primary shadow btn-xs sharp me-1 btn-update" 
                                                            data-bs-toggle="modal" data-bs-target="#update-esp" 
                                                            data-id="${data.esp_id}" data-clave="${data.esp_clave}" 
                                                            data-nombre="${data.esp_nombre}" data-year="${data.esp_año}" 
                                                            data-tipo="${data.esp_tipo}" data-cfp="${data.cfp_nombre}" 
                                                            data-id-cfp="${data.cfp_id}">
                                                        <i class="fa fa-pencil-alt" data-bs-toggle="tooltip" title="Editar"></i>
                                                    </button>
                                                ` : ''}
                                ${puedeVerCursosEspecialidad == true ? `
                                                    <button type="button" class="btn btn-dark shadow btn-xs sharp me-1 btn-cursos-especialidad" 
                                                            data-id-esp="${data.esp_id}"
                                                            data-nombre-esp="${data.esp_nombre}">
                                                        <i class="fa fa-eye" data-bs-toggle="tooltip" title="Ver Cursos"></i>
                                                    </button>
                                                ` : ''}
                                ${btn_activar_especialidad}
                                ${puedeEliminarEspecialidad == true ? `
                                                    <button type="button" class="btn btn-danger shadow btn-xs sharp me-1 btn-delete" 
                                                            data-bs-toggle="modal" data-bs-target="#delete-esp" 
                                                            data-id="${data.esp_id}" data-especialidad="${data.esp_nombre}" 
                                                            onClick="eliminarEsp(${data.esp_id})">
                                                        <i class="fa fa-trash" data-bs-toggle="tooltip" title="Eliminar"></i>
                                                    </button>
                                                ` : ''}


                            </div>`;
                    }
                }
            ]
        });

        $(document).ready(function() {

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

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

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


            $('#anio, #cfp, #tipo').on('change',
                function() {
                    let nombreEspecialidad = $('#nom_esp').val(); // Obtener el nuevo año seleccionado
                    let cfp = $('#cfp').val(); // Obtener la nueva letra después del año
                    let anio = $('#anio').val(); // Obtener el nuevo tipo (EBC, SCP, etc.)
                    let tipo = $('#tipo').val(); // Obtener el nuevo consecutivo

                    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 = nombreEspecialidad.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

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

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


        });

        /*
        // Estao inhabilita el input de clave_esp 
        $(document).ready(function() {
            $('#anio').on('change', function() {
                let anio = $('#anio').val();
                if (anio < 2023) {
                    $('#clave_esp').prop('readonly', false);
                } else {
                    $('#clave_esp').prop('readonly', true);
                }
            });
        });
        */

        /*
        $(document).ready(function() {
            
        });
        */

        $('#nom_esp').on('input', function() {
            let nombreEspecialidad = $('#nom_esp').val(); // Obtener el nuevo año seleccionado
            let cfp = $('#cfp').val(); // Obtener la nueva letra después del año
            let anio = $('#anio').val(); // Obtener el nuevo tipo (EBC, SCP, etc.)
            let tipo = $('#tipo').val(); // Obtener el nuevo consecutivo

            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 = nombreEspecialidad.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

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

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

        // UPDATE ESPECIALIDAD EN MODAL
        $(document).on('input', '#nom_esp_update', function() {
            let modalId = $(this).closest(".modal"); // Encuentra el modal actual
            let especialidad = $(this).val().trim(); // Obtener el valor directamente
            let palabras = especialidad.split(/\s+/); // Divide el texto en palabras usando espacios

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

            let palabrasFiltradas = palabras.filter(palabra => !palabrasAEliminar.includes(palabra.toUpperCase()));
            let iniciales = palabrasFiltradas.map(palabra => palabra[0]).join("").toUpperCase();

            let clave_actual = modalId.find('#clave_especialidad').val() || ""; // Asegurar que existe
            let partesClave = clave_actual.split("-");

            let id_cfp = partesClave[0] || "";
            let anio = partesClave[2] || "";
            let tipo = partesClave[3] || "";

            // Asignar la clave actualizada DENTRO del modal actual
            modalId.find('#clave_especialidad').val(id_cfp + "-" + iniciales + (anio ? "-" + anio : "") + (tipo ?
                "-" + tipo : ""));
        });

        $(document).on("change", "#anio_update", function() {
            let modalId = $(this).closest(".modal"); // Encuentra el modal actual
            let clave_actual = modalId.find('#clave_especialidad').val(); // Obtener la clave actual
            let partes = clave_actual.split("-"); // Dividir la clave en partes
            let tipo = modalId.find('#tipo_update').find(":selected").val();

            // Mantener las partes existentes y preservar el tipo
            let id_cfp = partes[0] || "";
            let iniciales = partes[1] || "";
            let anio = $(this).val(); // Obtener el año seleccionado

            let claveEspecialidad = `
                                        $ {
                                            id_cfp
                                        } - $ {
                                            iniciales
                                        } - $ {
                                            anio
                                        }
                                        $ {
                                            tipo
                                        }
                                        `; // Generar la nueva clave
            modalId.find("#clave_especialidad").val(claveEspecialidad);
        });

        $(document).on("change", "#tipo_update", function() {
            let modalId = $(this).closest(".modal"); // Encuentra el modal actual
            let clave_actual = modalId.find('#tipo_update').val(); // Obtener la clave actual
            // let partes = clave_actual.split("-"); // Dividir la clave en partes

            // let id_cfp = partes[0] || "";
            // let iniciales = partes[1] || "";
            // let anio_tipo = partes[2] || "";
            // let tipo = $(this).val();

            let anio = anio_tipo.match(/\d+/)?.[0] || anio_tipo;

            let claveEspecialidad = `
                                        $ {
                                            id_cfp
                                        } - $ {
                                            iniciales
                                        } - $ {
                                            anio
                                        }
                                        $ {
                                            tipo
                                        }
                                        `; // Generar la nueva clave
            modalId.find("#clave_especialidad").val(claveEspecialidad);
        });

        // ACTUALIZAR INFORMACIÓN DE CURSO
        $(document).ready(function() {
            $('.esp-table').on('click', '.btn-update', function() {

                $('#alert-modal').hide();
                $('#alert-modal-error').hide();
                $("#id_especialidad").val($(this).data("id"));
                $("#update_clave").val($(this).data("clave"));
                $("#nombre_update").val($(this).data("nombre"));
                $("#cfp_update").val($(this).data("cfp"));
                $('#anio_update').val($(this).data("year")).prop('selected', true).selectpicker('refresh');
                $('#tipo_update').val($(this).data("tipo")).prop('selected', true).selectpicker('refresh');

                let id_cfp = ($(this).data("id-cfp"));

                $('#anio_update, #tipo_update').on('change',
                    function() {

                        let nombre_especialidad = $("#nombre_update").val();
                        let anio = $("#anio_update").val();
                        let tipo = $("#tipo_update").val();
                        let nombre_esp = nombre_especialidad;

                        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_esp.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 = $('#update_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 = (id_cfp + "-" + iniciales + "-" + anio + tipo);

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

                $(".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 = $('.esp-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() {
            $('.esp-table').on('click', '.btn-delete', function() {
                $("#id_esp").val($(this).data("id"));
                $('#delete-esp').find("#name_esp").text($(this).data(
                    "especialidad")); // Updated to set the course name
            });

            // AJAX para cargar cursos en el modal
            $('.esp-table').on('click', '.btn-cursos-especialidad', function() {
                let espId = $(this).data('id-esp');
                let espNombre = $(this).data('nombre-esp');

                $('#modal-titulo-especialidad').text(espNombre);
                $('#modal-cursos-loading').show();
                $('#modal-cursos-content').hide();
                $('#modal-cursos-body').empty();
                $('#modal-cursos-error').hide();
                $('#modal-cursos-table-wrapper').hide();

                $('#modal-cursos-especialidad').modal('show');

                $.ajax({
                    url: '/especialidades/cursos/' + espId,
                    method: 'GET',
                    success: function(data) {
                        $('#modal-cursos-loading').hide();
                        $('#modal-cursos-content').show();

                        if (data.length > 0) {
                            $('#modal-cursos-table-wrapper').show();
                            let html = '';
                            data.forEach(function(curso) {
                                html += `
                                    <tr>
                                        <td>${curso.cur_clave}</td>
                                        <td>${curso.cur_nombre}</td>
                                        <td>${curso.cur_tipo_nombre}</td>
                                    </tr>
                                `;
                            });
                            $('#modal-cursos-body').html(html);
                        } else {
                            $('#modal-cursos-error').show();
                        }
                    },
                    error: function() {
                        $('#modal-cursos-loading').hide();
                        $('#modal-cursos-content').show();
                        $('#modal-cursos-body').html(
                            '<tr><td colspan="3" class="text-center text-danger">Error al cargar los cursos.</td></tr>'
                        );
                        $('#modal-cursos-table-wrapper').show();
                    }
                });
            });
        });

        $(document).ready(function() {
            $('.esp-table').on('click', '.btn-status', function() {
                $("#id_especialidad_status").val($(this).data("id"));
                $('#status-esp').find("#data-esp").text($(this).data("especialidad"));
            });

            $('#btn-confirmar-estatus').on('click', function() {
                const idEspecialidad = $('#id_especialidad_status').val();
                const $boton = $(this);

                $boton.prop('disabled', true).html('<i class="fa fa-spinner fa-spin"></i> Procesando...');

                $.ajax({
                    url: "{{ route('especialidadStatus') }}",
                    type: 'POST',
                    data: {
                        id_especialidad: idEspecialidad,
                        _token: $('input[name="_token"]').val()
                    },
                    success: function(response) {
                        $('#status-esp').modal('hide');
                        mostrarAlerta('success', response.message ||
                            'Estatus cambiado correctamente');
                        $('.esp-table').DataTable().ajax.reload(null, false);
                        $boton.prop('disabled', false).html('Aceptar');
                    },
                    error: function(xhr, status, error) {
                        console.error('Error al cambiar estatus:', error);
                        $('#status-esp').modal('hide');
                        const mensaje = xhr.responseJSON?.message ||
                            'Error al cambiar el estatus';
                        mostrarAlerta('danger', mensaje);
                        $boton.prop('disabled', false).html('Aceptar');
                    }
                });
            });

            function mostrarAlerta(tipo, mensaje) {
                const iconos = {
                    success: '<polyline points="9 11 12 14 22 4"></polyline><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path>',
                    danger: '<polygon points="7.86 2 16.14 2 22 7.86 22 16.14 16.14 22 7.86 22 2 16.14 2 7.86 7.86 2"></polygon><line x1="15" y1="9" x2="9" y2="15"></line><line x1="9" y1="9" x2="15" y2="15"></line>'
                };

                const claseAlerta = tipo === 'success' ? 'alert-primary' : 'alert-danger';
                const icono = iconos[tipo] || iconos.success;

                const alertaHtml = `
                    <div class="alert ${claseAlerta} alert-dismissible fade show" id="alert-dinamico">
                        <svg class="alert-icon" viewBox="0 0 24 24" width="24" height="24" stroke="currentColor"
                            stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round">
                            ${icono}
                        </svg>
                        <strong>${mensaje}</strong>
                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                    </div>
                `;

                $('#alert-dinamico').remove();
                $('#responsiveTable_wrapper').before(alertaHtml);

                setTimeout(function() {
                    $('#alert-dinamico').fadeOut('slow', function() {
                        $(this).remove();
                    });
                }, 4000);
            }

            // AJAX para cargar cursos en el modal
            $('.esp-table').on('click', '.btn-cursos-especialidad', function() {
                let espId = $(this).data('id-esp');
                let espNombre = $(this).data('nombre-esp');

                $('#modal-titulo-especialidad').text(espNombre);
                $('#modal-cursos-loading').show();
                $('#modal-cursos-content').hide();
                $('#modal-cursos-body').empty();
                $('#modal-cursos-error').hide();
                $('#modal-cursos-table-wrapper').hide();

                $('#modal-cursos-especialidad').modal('show');

                $.ajax({
                    url: '/especialidades/cursos/' + espId,
                    method: 'GET',
                    success: function(data) {
                        $('#modal-cursos-loading').hide();
                        $('#modal-cursos-content').show();

                        if (data.length > 0) {
                            $('#modal-cursos-table-wrapper').show();
                            let html = '';
                            data.forEach(function(curso) {
                                html += `
                                    <tr>
                                        <td>${curso.cur_clave}</td>
                                        <td>${curso.cur_nombre}</td>
                                        <td>${curso.cur_tipo_nombre}</td>
                                    </tr>
                                `;
                            });
                            $('#modal-cursos-body').html(html);
                        } else {
                            $('#modal-cursos-error').show();
                        }
                    },
                    error: function() {
                        $('#modal-cursos-loading').hide();
                        $('#modal-cursos-content').show();
                        $('#modal-cursos-body').html(
                            '<tr><td colspan="3" class="text-center text-danger">Error al cargar los cursos.</td></tr>'
                        );
                        $('#modal-cursos-table-wrapper').show();
                    }
                });
            });
        });
    </script>
@endpush