@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">Certificaciones</h4>
                        </div>
                        @php $puedeRegistrar = 0; @endphp
                        @puede('Certificaciones','registrar_certificacion')
                            @php $puedeRegistrar = 1; @endphp
                            <div class="card-body">
                                <div class="basic-form d-block">
                                    <form action="{{ route('agregarCertificacion') }}" method="post">
                                        @csrf
                                        <div class="row align-items-end">
                                            <div class="mb-3 col-md-2">
                                                <label class="form-label">Sector</label>
                                                <select name="sector" class="form-select" id="select_sectores">
                                                    <option value="">Seleccione sector:</option>
                                                    @foreach ($sectores as $sector)
                                                        <option value="{{ $sector->sec_id }}">{{ $sector->sec_nombre }}</option>
                                                    @endforeach
                                                </select>
                                                @error('sector')<div class="text-danger">{{ $message }}</div>@enderror
                                            </div>
                                            <div class="mb-3 col-md-4">
                                                <label class="form-label">Clave competencia</label>
                                                <select name="estandar" class="form-select" id="estandar">
                                                    <option value="">Seleccione estandar:</option>
                                                    @foreach ($lista_certificaciones as $competencia)
                                                        <option value='{"clave":"{{ $competencia->cer_clave }}","estandar":"{{ $competencia->cer_nombre }}"}'>
                                                            {{ $competencia->cer_clave . ' | ' . $competencia->cer_nombre }}
                                                        </option>
                                                    @endforeach
                                                </select>
                                                @error('estandar')
                                                    <div class="text-danger">{{ $message }}</div>
                                                @enderror
                                            </div>
                                            <div class="mb-3 col-md-1">
                                                <label class="form-label">Horas de Evaluación</label>
                                                <input type="text" class="form-control" name="horas_evaluacion" required placeholder="" pattern="[0-9]*" inputmode="numeric" maxlength="4" oninput="this.value = this.value.replace(/[^0-9]/g, '').slice(0, 4)">
                                            </div>
                                            <div class="mb-3 col-md-1">
                                                <label class="form-label">Costo de Evaluación</label>
                                                <input type="text" class="form-control" name="costo_evaluacion" required placeholder="" pattern="^\d{1,4}(\.\d{1,2})?$" inputmode="decimal" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/^(\d{5}).*/, '$1').replace(/(\.\d{3}).*/, '$1')">
                                            </div>
                                            <div class="mb-3 col-md-1">
                                                <label class="form-label">Costo de Certificación</label>
                                                <input type="text" class="form-control" name="costo_certificacion" required placeholder="" pattern="^\d{1,4}(\.\d{1,2})?$" inputmode="decimal" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/^(\d{5}).*/, '$1').replace(/(\.\d{3}).*/, '$1')">
                                            </div>
                                            <div class="mb-3 col-md-2">
                                                <button type="submit" class="btn btn-primary btn-block">Guardar</button>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        @endpuede

                        @php $puedeEliminar = 0; @endphp
                        @puede('Certificaciones','eliminar_certificacion')
                            @php $puedeEliminar = 1; @endphp
                        @endpuede
                        @php $puedeEditar = $puedeRegistrar; @endphp
                    </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 certificaciones-table"
                        aria-describedby="responsiveTable_info">
                        <thead>
                            <tr>
                                <th>ID</th>
                                <th>Clave</th>
                                <th>Nombre</th>
                                <th>Sector</th>
                                @if($puedeEliminar == 1 || $puedeEditar == 1)
                                    <th class="text-center">Acciones</th>
                                @endif
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($certificaciones as $certificacion)
                                <tr>
                                    <td>{{ $certificacion->cur_id }}</td>
                                    <td>{{ $certificacion->cur_clave }}</td>
                                    <td>{{ $certificacion->cur_nombre }}</td>
                                    <td>{{ $certificacion->cer_sector_nombre }}</td>
                                    @if($puedeEliminar == 1 || $puedeEditar == 1)
                                        <td>
                                            <div class="d-flex justify-content-center">
                                                @if($puedeEditar == 1)
                                                    <button class="btn btn-primary shadow btn-xs sharp btn-edit me-1"
                                                        data-id="{{ $certificacion->cur_id }}"
                                                        data-clave="{{ $certificacion->cur_clave }}"
                                                        data-nombre="{{ $certificacion->cur_nombre }}"
                                                        data-sector="{{ $certificacion->cer_sector_id }}"
                                                        data-horas="{{ $certificacion->cer_evaluacion_horas }}"
                                                        data-costo-evaluacion="{{ $certificacion->cer_evaluacion_costo }}"
                                                        data-costo-certificacion="{{ $certificacion->cer_costo_certificado_icatep }}"
                                                        data-bs-toggle="modal"
                                                        data-bs-target="#edit-certificacion">
                                                        <i class="fa fa-pencil"></i>
                                                    </button>
                                                    <button
                                                        class="btn shadow btn-xs sharp btn-status me-1 {{ (int) ($certificacion->cer_activado ?? 0) === 1 ? 'btn-success' : 'btn-danger' }}"
                                                        data-clave="{{ $certificacion->cur_clave }}"
                                                        data-activado="{{ (int) ($certificacion->cer_activado ?? 0) }}">
                                                        <i class="fa fa-power-off"></i>
                                                    </button>
                                                @endif
                                                @if($puedeEliminar == 1)
                                                    <button class="btn btn-danger shadow btn-xs sharp btn-delete" id="borrar"
                                                        data-id="{{ $certificacion->cur_id }}"
                                                        data-curso="{{ $certificacion->cur_clave }}" data-bs-toggle="modal"
                                                        data-bs-target="#delete-curso">
                                                        <i class="fa fa-trash"></i>
                                                    </button>
                                                @endif
                                            </div>
                                        </td>
                                    @endif
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
                <!-- MODAL EDITAR CERTIFICACION -->
                <div class="modal fade" id="edit-certificacion" style="display: none;" aria-hidden="true">
                    <div class="modal-dialog modal-xl modal-dialog-centered" role="document">
                        <div class="modal-content">
                            <form action="{{ route('actualizarCertificacion') }}" method="post">
                                @csrf
                                <input type="hidden" name="id_curso" id="edit_id_curso">
                                <div class="modal-header">
                                    <h5 class="modal-title">Editar Certificación</h5>
                                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                                </div>
                                <div class="modal-body">
                                    <div class="row align-items-end">
                                        <div class="mb-3 col-md-3">
                                            <label class="form-label">Sector</label>
                                            <select name="sector" class="form-select" id="edit_sector" required>
                                                <option value="">Seleccione sector:</option>
                                                @foreach ($sectores as $sector)
                                                    <option value="{{ $sector->sec_id }}">{{ $sector->sec_nombre }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                        <div class="mb-3 col-md-5">
                                            <label class="form-label">Clave competencia</label>
                                            <select name="estandar" class="form-select" id="edit_estandar" required>
                                                <option value="">Seleccione estandar:</option>
                                                @foreach ($lista_certificaciones as $competencia)
                                                    <option value='{"clave":"{{ $competencia->cer_clave }}","estandar":"{{ $competencia->cer_nombre }}"}'
                                                        data-clave="{{ $competencia->cer_clave }}">
                                                        {{ $competencia->cer_clave . ' | ' . $competencia->cer_nombre }}
                                                    </option>
                                                @endforeach
                                            </select>
                                        </div>
                                        <div class="mb-3 col-md-2">
                                            <label class="form-label">Horas de Evaluación</label>
                                            <input type="text" class="form-control" id="edit_horas_evaluacion"
                                                name="horas_evaluacion" required pattern="[0-9]*" inputmode="numeric"
                                                maxlength="4"
                                                oninput="this.value = this.value.replace(/[^0-9]/g, '').slice(0, 4)">
                                        </div>
                                        <div class="mb-3 col-md-2">
                                            <label class="form-label">Costo de Evaluación</label>
                                            <input type="text" class="form-control" id="edit_costo_evaluacion"
                                                name="costo_evaluacion" required pattern="^\d{1,4}(\.\d{1,2})?$"
                                                inputmode="decimal"
                                                oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/^(\d{5}).*/, '$1').replace(/(\.\d{3}).*/, '$1')">
                                        </div>
                                        <div class="mb-3 col-md-2">
                                            <label class="form-label">Costo de Certificación</label>
                                            <input type="text" class="form-control" id="edit_costo_certificacion"
                                                name="costo_certificacion" required pattern="^\d{1,4}(\.\d{1,2})?$"
                                                inputmode="decimal"
                                                oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/^(\d{5}).*/, '$1').replace(/(\.\d{3}).*/, '$1')">
                                        </div>
                                    </div>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-danger light" data-bs-dismiss="modal">Cancelar</button>
                                    <button type="submit" class="btn btn-primary light">Guardar cambios</button>
                                </div>
                            </form>
                        </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 la Certificación</h5>
                                <button type="button" class="btn-close" data-bs-dismiss="modal">
                                </button>
                            </div>
                            <div class="modal-body text-center">
                                <strong id="info_certificacion">

                                </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="btnEliminarCert" data-bs-toggle="modal"
                                    data-bs-target="#confirm-delete" data-bs-dismiss="modal">Eliminar</button>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- MODAL CONFIRMAR BORRADO -->
                <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('eliminarCertificacion') }}" 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>

@endsection
@push('scripts')
    <script>
        $('#estandar').select2();
        $('#select_sectores').select2();
        $('#edit_estandar').select2({
            dropdownParent: $('#edit-certificacion')
        });
        $('#edit_sector').select2({
            dropdownParent: $('#edit-certificacion')
        });

        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

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

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

        $('#responsiveTable').DataTable({
            // Configuración de DataTable
            ordering: true, // Desactiva el ordenamiento automático
            order: [[0, 'desc']],
            columnDefs: [
                {
                    target: 0,
                    visible: false,
                    searchable:false,
                }
            ],
            "language": {
                "url": "https://cdn.datatables.net/plug-ins/1.10.25/i18n/Spanish.json"
            },
        });

        if (puedeEliminar) {
            $(document).on('click', '.btn-delete', function () {
                let id    = $(this).data('id');
                let curso = $(this).data('curso');
                $('#info_certificacion').html('');
                $('#id_curso').val(id);

                // Consulta AJAX a Laravel
                $.ajax({
                    url: "{{ route('certificacionEnAulas') }}",
                    type: 'GET',
                    data: { id: id, clave: curso },
                    success: function (response) {
                        let aulas = response.aulas;
                        let certi = response.certificacion;

                        if (aulas.length > 0) {
                            $('#info_certificacion').html('<span class="text-danger">No se puede eliminar la certificación porque está asociada a algunas aulas.</span>');
                            // mostrar información de aulas
                            let listaAulas = '<br>Claves de Registro : <br><ul>';
                            aulas.forEach(function(aula) {
                                listaAulas += '<li>' + aula.aul_clave_registro + '</li>';
                            });
                            listaAulas += '</ul>';
                            $('#info_certificacion').append(listaAulas);
                            // quitar el boton de eliminar btnEliminarCert
                            $('#btnEliminarCert').hide();
                        } else {
                            var mensaje = '¿Está seguro que desea eliminar la certificación? <br>' + certi.cur_clave + ' - ' + certi.cur_nombre;
                            $('#info_certificacion').html(mensaje);
                            // mostrar el boton de eliminar
                            $('#btnEliminarCert').show();
                        }

                    },
                    error: function () {
                        $('#curso_nombre').text('Error al conectar con el servidor');
                    }
                });
            });
        }

        if (puedeEditar) {
            $(document).on('click', '.btn-edit', function () {
                const idCurso = $(this).data('id');
                const clave = $(this).data('clave');
                const nombre = $(this).data('nombre');
                const sector = $(this).data('sector');
                const horas = $(this).data('horas');
                const costoEvaluacion = $(this).data('costo-evaluacion');
                const costoCertificacion = $(this).data('costo-certificacion');

                $('#edit_id_curso').val(idCurso);
                $('#edit_horas_evaluacion').val(horas ?? '');
                $('#edit_costo_evaluacion').val(costoEvaluacion ?? '');
                $('#edit_costo_certificacion').val(costoCertificacion ?? '');

                $('#edit_sector').val(sector).trigger('change');

                let valorEstandar = '';
                $('#edit_estandar option').each(function () {
                    if ($(this).data('clave') === clave) {
                        valorEstandar = $(this).val();
                        return false;
                    }
                });

                if (!valorEstandar && clave && nombre) {
                    valorEstandar = JSON.stringify({
                        clave: clave,
                        estandar: nombre
                    });
                    $('#edit_estandar').append(new Option(clave + ' | ' + nombre, valorEstandar, false, false));
                }

                $('#edit_estandar').val(valorEstandar).trigger('change');
            });

            $(document).on('click', '.btn-status', function () {
                const $btn = $(this);
                const clave = $btn.data('clave');

                $.ajax({
                    url: "{{ route('actualizarEstatusCertificacion') }}",
                    type: 'POST',
                    data: {
                        _token: "{{ csrf_token() }}",
                        cur_clave: clave
                    },
                    success: function (response) {
                        const activado = Number(response.cer_activado) === 1 ? 1 : 0;
                        $btn.attr('data-activado', activado);
                        $btn.data('activado', activado);
                        $btn.removeClass('btn-success btn-danger')
                            .addClass(activado === 1 ? 'btn-success' : 'btn-danger');
                    },
                    error: function (xhr) {
                        const mensaje = xhr?.responseJSON?.message ?? 'No fue posible actualizar el estatus.';
                        alert(mensaje);
                    }
                });
            });
        }
    </script>
@endpush