@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">Campos de Formación Profesional</h4>
                        </div>
                        @php $puedeEliminar = 0; @endphp
                        @puede('Campos de formacion profesional', 'eliminar_cfp')
                            @php $puedeEliminar = 1; @endphp
                            <div class="card-body">
                                <div class="basic-form">
                                    <form action="{{ route('cfpNuevo') }}" method="post" class="agregar-curso">
                                        @csrf
                                        <div class="row">
                                            <div class="col-lg-2 mb-3 col-md-6" id="div_clave_cfp">
                                                <label class="form-label">Clave</label>
                                                <input type="number" name="clave_cfp" id="clave_cfp" min="1" max="999"
                                                    maxlength="3" pattern="[0-9]{3}" inputmode="numeric" value="{{ old('clave_cfp') }}"
                                                    oninput="this.value = this.value.replace(/[^0-9]/g, '').slice(0, 3)" 
                                                    class="form-control" placeholder="Ingrese Clave">
                                                @error('clave_cfp')
                                                    <div class="text-danger">{{ $message }}</div>
                                                @enderror
                                            </div>
                                            <div class="col-lg-4 mb-3 col-md-6">
                                                <label class="form-label">Nombre</label>
                                                <input type="text" name="nombre_cfp" id="nombre_cfp"
                                                    value="{{ old('nombre_cfp') }}"
                                                    class="form-control"placeholder="Ingrese Nombre">
                                                @error('nombre_cfp')
                                                    <div class="text-danger">{{ $message }}</div>
                                                @enderror
                                            </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
                        <!-- <input type="hidden" value="{{--@puede('Campos de formacion profesional', 'eliminar_cfp') @endpuede--}}" id="puedeEliminar"> -->
                    </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 cfp-table" aria-describedby="responsiveTable_info">
                        <thead>
                            <tr>
                                <th width="5%" class="text-center">Clave</th>
                                <th>Nombre</th>
                                <th width="5%">Eliminar</th>
                            </tr>
                        </thead>
                        <tbody>
                            <!----Aqui--->
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <!-- MODAL ELIMINAR CAMPO DE FORMACION PROFESIONAL -->
        <div class="modal fade" id="delete-cfp" 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 Campo de Formaci&oacute;n Profesional</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal">
                        </button>
                    </div>
                    <div class="modal-body text-center">
                        <strong id="name_cfp"></strong><br>
                        <strong class="text-danger" id="cfp-response-msg"></strong>
                    </div>
                    <div class="modal-footer">
                        @csrf
                        <button type="button" class="btn btn-primary light" data-bs-dismiss="modal">Cerrar</button>
                        <button type="button" id="eliminar" class="btn btn-danger" 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('cfpDestroy') }}" method="post" class="modal-footer delete">
                            @csrf
                            <input type="hidden" name="id_curso" value="" id="id_curso">
                            <button type="button" class="btn btn-primary light" data-bs-dismiss="modal">NO</button>
                            <button type="submit" class="btn btn-danger" data-bs-dismiss="modal">SI</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--</div>-->
    </div>
    </div>
    </div>
@endsection

@push('scripts')
    <script>
        const nombreCfpInput = document.getElementById('nombre_cfp');
        if (nombreCfpInput) {
            nombreCfpInput.addEventListener('input', function(event) {
                const cursorPos = this.selectionStart;
                this.value = this.value.toUpperCase();
                this.setSelectionRange(cursorPos, cursorPos);
            });
        }

        $(document).ready(function() {
            setTimeout(function() {
                $("#alert-container-error").fadeOut("slow");
                $("#alert-container").fadeOut("slow");
            }, 4000);

            $("#clave_cfp, #nombre_cfp").on("input", function() {
                $(this).siblings(".text-danger").fadeOut("slow");
            }); 
        });

        // VERIFICAR Y DESTRUIR DataTable correctamente
        if ($.fn.DataTable.isDataTable('.cfp-table')) {
            $('.cfp-table').DataTable().destroy();
        }

        function eliminarCFP(idCurso) {
            $.ajax({
                url: "{{ route('validarEliminacion') }}",
                method: 'POST',
                data: {
                    _token: '{{ csrf_token() }}',
                    id_curso: idCurso
                },
                success: function(response) {
                    if(response.message=='SI'){
                        $('#cfp-response-msg').text('Se encuentra registrado en un curso y no puede ser eliminado.');
                        $('#eliminar').prop('disabled', true);
                    }else{
                        $('#cfp-response-msg').text('');
                        $('#eliminar').prop('disabled', false);
                    }
                },
                error: function(xhr) {
                    $('#cfp-response-msg').text('Ocurrió un error al intentar eliminar el CFP.');
                }
            });
        }

        const puedeEliminar = {{ $puedeEliminar ?? 0 }} == 1;

        // INICIALIZAR DataTable dentro de $(document).ready()
        $(document).ready(function() {
            //TABLA CAMPOS DE FORMACION PROFESIONAL
            var table = $('.cfp-table').DataTable({
                ordering: true,
                order: [[0, 'desc']],
                language: {
                    url: "https://cdn.datatables.net/plug-ins/1.10.25/i18n/Spanish.json"
                },
                stateSave: false,
                stateDuration: 10000,
                processing: true, // Agregar indicador de carga
                ajax: {
                    url: "{{ route('cfpShow') }}",
                    dataSrc: 'data', // Especificar dónde están los datos
                    error: function(xhr, error, thrown) {
                        console.error('Error al cargar datos:', xhr.responseText);
                        alert('Error al cargar los datos de la tabla');
                    }
                },
                columnDefs: puedeEliminar ? [] : [
                    {
                        target: 2,
                        visible: false
                    }
                ],
                columns: [
                    {
                        data: "cfp_id_ed",
                        className: "text-center",
                    },
                    {
                        data: "cfp_nombre"
                    },
                    {
                        data: null,
                        orderable: false,
                        render: function(data) {
                            if (!puedeEliminar) {
                                return '';
                            }
                            return `
                                <div class="d-flex justify-content-center">
                                    <button type="button" 
                                        class="btn btn-danger shadow btn-xs sharp me-1 btn-delete" 
                                        data-bs-toggle="modal" 
                                        data-bs-target="#delete-cfp" 
                                        data-id="${data.cfp_id}"
                                        data-cfp="${data.cfp_nombre}" 
                                        onClick="eliminarCFP(${data.cfp_id})">
                                        <i class="fa fa-trash"></i>
                                    </button>
                                </div>`;
                        } 
                    }
                ]
            });

            // Event handler después de inicializar la tabla
            $('.cfp-table').on('click', '.btn-delete', function() {
                $("#id_curso").val($(this).data("id"));
                $('#delete-cfp').find("#name_cfp").text($(this).data("cfp"));
            });
        });
    </script>
@endpush