@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">Registro Curso Para El Trabajo</h4>
                        </div>
                        <div class="card-body">
                            <div class="basic-form">
                                <form action="{{ route('registrarCurso') }}" method="post">
                                    @csrf
                                    <div class="row">
                                        <div class="col-lg-5 mb-3 col-md-6" id="div_cfp">
                                            <label class="form-label">Nombre del Curso</label>
                                            <select name="cursos" class="form-select" id="curso">
                                                <option value="" {{ old('id_cfp') == null ? 'selected' : '' }}>
                                                    Seleccione un Curso:</option>
                                                @foreach ($cursos as $curso)
                                                    <option
                                                        value='{"curso":"{{ $curso->cur_nombre }}","id_cfp":"{{ $curso->cfp_id }}","id_esp":"{{ $curso->cur_especialidad_id }}","id_curso":"{{ $curso->cur_id }}","horas":"{{ $curso->cur_horas }}"}'
                                                        {{ old('id_cfp', '') == $curso->cur_id ? 'selected' : '' }}
                                                        data-horas="{{ $curso->cur_horas }}"
                                                        data-costo-hora="{{ $curso->cur_costo_hora }}"
                                                        data-cfp="{{ $curso->cfp_nombre }}"
                                                        data-especialidad="{{ $curso->esp_nombre }}">
                                                        {{ $curso->cur_nombre }} </option>
                                                @endforeach
                                            </select>
                                            @error('cursos')
                                                <div class="text-danger">{{ $message }}</div>
                                            @enderror
                                        </div>
                                        <div class="col-lg-4 mb-3 col-md-6">
                                            <label class="form-label">Nombre de la Especialidad</label>
                                            <input type="text" name="especialidad" class="form-control"
                                                value="{{ old('nombre_especialidad') }}" placeholder="" id="nom_esp"
                                                onkeyup="this.value = this.value.toUpperCase()" readonly>
                                            @error('nombre_especialidad')
                                                <div class="text-danger">{{ $message }}</div>
                                            @enderror
                                        </div>
                                        <div class="col-lg-3 mb-3 col-md-6">
                                            <label class="form-label">Campo de Formaci&oacute;n Profesional</label>
                                            <input type="text" name="cfp" class="form-control" placeholder=""
                                                id="cfp" value="" readonly>
                                        </div>
                                        <div class="col-lg-1 mb-3 col-md-6 text-center">
                                            <label class="form-label">Horas</label>
                                            <input type="text" name="clave_especialidad" class="form-control text-center"
                                                placeholder="" id="horas" value="" readonly>
                                            <div class="text-danger"></div>
                                        </div>
                                        <div class="col-lg-2 mb-3 col-md-6 text-center">
                                            <label class="form-label">M&iacute;nimo de Capacitandos</label>
                                            <input type="number" name="min_alumnos" class="form-control text-center"
                                                placeholder="" id="cap" value="" readonly>
                                            <div class="text-danger"></div>
                                        </div>
                                        <div class="col-lg-2 mb-3 col-md-6 text-center">
                                            <label class="form-label">Costo por Capacitando</label>
                                            <input type="text" name="costo_cap" class="form-control text-center"
                                                placeholder="" id="costo_cap" value="" readonly>
                                            <div class="text-danger"></div>
                                        </div>
                                        <div class="col-lg-3 mb-3 col-md-6 text-center">
                                            <label class="form-label">Costo por hora del Instructor</label>
                                            <input type="text" name="costo_psc" class="form-control text-center"
                                                placeholder="" id="costo_hora" value="" readonly>
                                            <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>
                    </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="display responsive w-100 dataTable no-footer dtr-inline collapsed cursos-table"
                        aria-describedby="responsiveTable_info">
                        <thead>
                            <tr>
                                <th width="25%">Id</th>
                                <th width="25%">Nombre Curso</th>
                                <th width="15%">CFP</th>
                                <th width="25%">Especialidad</th>
                                <th width="5%">Horas</th>
                                <th width="7%">Clave</th>
                                <th width="2%"></th>
                            </tr>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <!-- MODAL ELIMINAR REGISTRO CURSO PARA 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 Registro de 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="submit" 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('eliminarRegistroCurso') }}" method="post"
                            class="modal-footer delete">
                            @csrf
                            <input type="hidden" name="id_curso" value="" id="id_curso">
                            <input type="hidden" name="rg_cr_clave" value="" id="rg_cr_clave">
                            <button type="button" class="btn btn-primary light" data-bs-dismiss="modal">NO</button>
                            <button type="submit" class="btn btn-danger" data-bs-dismiss="modal">SI</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--</div>-->
    </div>
    </div>
    </div>

@endsection

@push('scripts')
    {{ asset('assets/js/especialidades.js') }}
    <script>
        $('#curso').select2();

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

        $('.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('validateDestroyRegistroCurso') }}", // Asegúrate de tener esta ruta definida
                method: 'POST',
                data: {
                    _token: '{{ csrf_token() }}',
                    clave: idCurso
                },
                success: function(response) {
                    let aulas = response.aulas;

                    if (aulas.length > 0) {
                        $('#curso-response-msg').html('<span class="text-danger">No se puede eliminar el curso porque está asociado a:</span>');
                        // mostrar información de aulas
                        let listaAulas = '<br>Clave de aula';
                        aulas.forEach(function(aula) {
                            listaAulas += '<li>' + aula.aul_clave_registro + '</li>';
                        });
                        listaAulas += '</ul>';
                        $('#curso-response-msg').append(listaAulas);
                        $('#eliminar').prop('disabled', true);
                        return; // Salir de la función si hay aulas asociadas
                    }
                    else {
                        $('#curso-response-msg').text('');
                        $('#eliminar').prop('disabled', false);
                    }

                },
                error: function(xhr) {
                    $('#curso-response-msg').text('Ocurrió un error al intentar eliminar el Registro del Curso');
                }
            });
        }

        //TABLA ESPECIALIDADES
        $('.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('listarCursosParaElTrabajoRegistrados') }}", // Obteenr ruta de los cursos
            columnDefs: [
            {
                target: 0,
                visible: false,
                searchable:false,
            }
            ],
            columns: [
                {
                    data: "reg_cur_id"
                },
                {
                    data: "reg_cur_curso_nombre"
                },
                {
                    data: "reg_cur_cfp_nombre"
                },
                {
                    data: "reg_cur_especialidad_nombre"
                },
                {
                    className: "text-center",
                    data: "reg_cur_horas"
                },
                {
                    data: "reg_cur_curso_clave"
                },
                {
                    data: null,
                    orderable: false,
                    render: function(data) {
                        return `
                                <button type="button" 
                                        class="btn btn-danger shadow btn-xs sharp me-1 btn-delete" 
                                        data-bs-toggle="modal" data-bs-target="#delete-curso" data-nombre="${data.reg_cur_curso_nombre}" data-id="${data.reg_cur_id}" data-clave="${data.reg_cur_curso_clave}" 
                                        onClick="eliminarCurso(${data.reg_cur_id});">
                                    <i class="fa fa-trash" data-bs-toggle="tooltip" title="Eliminar"></i>
                                </button>`;
                    }
                }
            ]
        });

        $(document).ready(function() {

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

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

        });

        $(document).ready(function() {
            $('#curso').on('change',
                function() {

                    let horasSeleccionadas = $('option:selected', this).data("horas");

                    let costoHora = $('option:selected', this).data("costo-hora");
                    let especialidad = $('option:selected', this).data("especialidad");
                    let cfp = $('option:selected', this).data("cfp");

                    $("#costo_hora").val(costoHora);
                    $("#horas").val(horasSeleccionadas);
                    $("#cap").val(15);
                    $("#costo_cap").val(715);
                    $("#nom_esp").val(especialidad);
                    $("#cfp").val(cfp);
                });
        });

        // MODAL PARA ELIMINAR CURSO
        $(document).ready(function() {
            $('.cursos-table').on('click', '.btn-delete', function() {
                $("#id_curso").val($(this).data("id"));
                $("#rg_cr_clave").val($(this).data("clave"));
                $('#delete-curso').find("#name_curso").text($(this).data(
                    "nombre")); // Updated to set the course name
            });
        });

    </script>
@endpush