@extends('layout.template')
@section('title', 'ICAT')
@section('content')
    <div class="content-body">
        <!-- row -->
        <div class="container-fluid">
            <div class="row page-titles mx-0">
                <div class="col-sm-6 p-md-0">
                    <div class="welcome-text">
                         @php
                            $perfil   = auth()->user()->perfil_id;
                            $unidad = auth()->user()->unidad_id;
                            
                            $unidadnombre = DB::table('unidades')
                                    ->orderBy('nombre')
                                    ->where('id', $unidad)
                                    ->first();
                        @endphp 
                        <h4>Nuevo Modelo de Negocios para Certificación</h4>
                    </div>
                </div>
                <div class="col-sm-6 p-md-0 justify-content-sm-end mt-2 mt-sm-0 d-flex">
                    <ol class="breadcrumb">
                        <a href="{{ route('certificacionesModelos') }}" class="btn btn-rounded btn-dark back-fixed btn-sm"
                            aria-label="Regresar">
                            <span class="btn-icon-start text-dark btn-sm"><i class=" ri-arrow-left-line"></i></span>
                            Regresar
                        </a>
                    </ol>
                </div>
            </div>

            <div class="row">
                <!-- se creo el perfil exitosamente -->
                @if (session('success'))
                    <div class="alert alert-primary alert-dismissible fade show" id="alert-container">
                        <i class="ri-checkbox-circle-line alert-icon" aria-hidden="true"></i>
                        <strong id="alert-confirmacion"> {{ session('success') }}</strong>
                    </div>
                @endif

                <div class="col-xl-12 col-xxl-12 col-sm-12">
                    <div class="card">
                        <div class="card-header">
                            <h5 class="card-title"></h5>
                        </div>

                        <div class="card-body">
                            <div class="basic-form">
                                <!-- Formulario nuevo modelo -->
                                <form action="{{ route('certificacionModeloStore') }}" method="POST" id="nuevoModeloCertificacionForm">
                                    @csrf
                                    <div class="modal-body">
                                    
                                        <div class="row"> <!-- 1 -->
                                            <div class="col">&nbsp;</div>
                                        </div>
                                        <div class="row"> <!-- Unidad, Certificacion, Cursos de  unidad -->
                                            <div class="col-md-3 mb-2 pt-1">
                                                <label for="unidad" class="form-label">Unidad ICAT</label>
                                                <select class="form-select form-control form-control-sm" id="unidadDeCapacitacion" name="unidadDeCapacitacion">
                                                    <option value="">Selecciona una unidad</option>
                                                    @if (\App\Support\UnidadIcat::esDireccionGeneral(auth()->user()->unidad_id))
                                                        @foreach ($unidadesDeCapacitacion as $unidad)
                                                            <option value="{{ $unidad->id }}">{{ $unidad->nombre }}</option>
                                                        @endforeach
                                                    @else
                                                        <option selected value="{{ $unidad }}">{{ $unidadnombre->nombre }}</option>
                                                    @endif
                                                </select>
                                            </div>
                                            <div class="col-md-3 mb-2 pt-1">
                                                <label for="tipoDeCertificacion" class="form-label">Tipo de Certificación</label>
                                                <select class="form-select form-control form-control-sm" id="tipoDeCertificacion" name="tipoDeCertificacion">
                                                    <option data-valor="EVALUACION" value="EVALUACION" selected>EVALUACIÓN DIRECTA</option>
                                                    <option data-valor="ROCO"       value="ROCO">ROCO</option>
                                                </select>
                                            </div>
                                            <div class="col-md-6 mb-2 pt-1">
                                                <div class="row" id="listaEvaluaciones" style="display: block;">
                                                    <div class="col-md-12 mb-2 pt-1">
                                                        <label for="evaluacionCurso" class="form-label">Certificación</label>
                                                        <select class="form-select form-control form-control-sm" id="evaluacionCurso" name="evaluacionCurso">
                                                            <option value="">Seleccione una evaluación</option>
                                                            @if (!empty($listaEvaluaciones))
                                                                @foreach ($listaEvaluaciones as $evaluacion)
                                                                    <option value="{{ $evaluacion->clave }}">{{ $evaluacion->clave." - ".$evaluacion->nombre }}</option>
                                                                @endforeach
                                                            @endif
                                                        </select>
                                                    </div>
                                                </div>

                                            </div>
                                        </div>

                                        <div class="row">
                                            <div class="col-md-12 mb-3">&nbsp;</div>
                                        </div>

                                        @php $soloLectura = true; @endphp
                                        @puede('MN de Certificaciones', 'activar_certificacion')
                                            @php $soloLectura = false; @endphp
                                        @endpuede

                                        <div class="row" id="cardEvaluacion" style="display: block;"><!-- EVALUACION -->
                                            <div class="col-md-12 mb-2 pt1">
                                                <div class="card">
                                                    <div class="card-header">
                                                        <h4>Modelo Estándar de Competencia (EC)</h4>
                                                    </div>
                                                    <div class="card-body">
                                                        <div class="row"> <!-- # capacitandos, $ por capacitando, $ evaluacion, $ certificado, $ total evaluación -->
                                                            <div class="col-md-2 mb-2 pt-1">
                                                                <label for="numeroDeCapacitandos" class="form-label">No. de Capacitandos a Evaluar <span class="text-danger">*</span></label>
                                                                <input type="text" class="form-control select-on-click" id="numeroDeCapacitandos" name="numeroDeCapacitandos" placeholder="" value="0"
                                                                pattern="[0-9]*" inputmode="numeric" oninput="this.value = this.value.replace(/[^0-9]/g, '')">
                                                                <input type="hidden" class="form-control select-on-click" id="costoDeCapacitacion" name="costoDeCapacitacion" placeholder="" value="0.00"
                                                                pattern="^\d+(\.\d{1,2})?$" inputmode="decimal"
                                                                oninput="this.value = this.value.replace(/[^0-9.]/g, ''); this.value = this.value.replace(/(\..*)\./g, '$1'); this.value = this.value.replace(/^(\d+(\.\d{0,2})?).*$/, '$1');">
                                                                <div class="invalid-feedback"></div>
                                                            </div>
                                                            
                                                            <div class="col-md-2 mb-2 pt-1">
                                                                <label for="costoDeEvaluacion" class="form-label">Costo de  Evaluación <span class="text-danger">*</span></label>
                                                                <input type="text" class="form-control select-on-click" id="costoDeEvaluacion" name="costoDeEvaluacion" placeholder="" value="0.00"
                                                                pattern="^\d+(\.\d{1,2})?$" inputmode="decimal"
                                                                oninput="this.value = this.value.replace(/[^0-9.]/g, ''); this.value = this.value.replace(/(\..*)\./g, '$1'); this.value = this.value.replace(/^(\d+(\.\d{0,2})?).*$/, '$1');">
                                                                <div class="invalid-feedback"></div>
                                                            </div>
                                                            <div class="col-md-2 mb-2 pt-1">
                                                                <label for="costoDelCertificado" class="form-label">Costo del Certificado <span class="text-danger">*</span></label>
                                                                <input type="text" class="form-control select-on-click" id="costoDelCertificado" name="costoDelCertificado" placeholder="" value="0.00"
                                                                pattern="^\d+(\.\d{1,2})?$" inputmode="decimal"
                                                                oninput="this.value = this.value.replace(/[^0-9.]/g, ''); this.value = this.value.replace(/(\..*)\./g, '$1'); this.value = this.value.replace(/^(\d+(\.\d{0,2})?).*$/, '$1');">
                                                                <div class="invalid-feedback"></div>
                                                            </div>
                                                            <div class="col-md-2 mb-2 pt-1">
                                                                
                                                            </div>
                                                            <div class="col-md-2 mb-2 pt-1">
                                                                <label for="totalDeEvaluacion" class="form-label">Total de Evaluación <span class="text-danger">*</span></label>
                                                                <input type="text" class="form-control" id="totalDeEvaluacion" name="totalDeEvaluacion" placeholder="" value="0.00" readonly>
                                                            </div>
                                                        </div>
                                                        <div class="row"> <!-- # capacitandos, $ por capacitando, $ evaluacion,            , $ total evaluación -->
                                                            <div class="col-md-2 mb-2 pt-1">
                                                                <label for="numeroDeCapacitandos2" class="form-label">No. de Capacitandos a Evaluar <span class="danger">*</span></label>
                                                                <input type="text" class="form-control" id="numeroDeCapacitandos2" name="numeroDeCapacitandos2"  placeholder="" value="0" readonly
                                                                pattern="[0-9]*" inputmode="numeric" oninput="this.value = this.value.replace(/[^0-9]/g, '')">
                                                                <div class="invalid-feedback"></div>
                                                            </div>
                                                            <div class="col-md-2 mb-2 pt-1">
                                                                <label for="horasDeEvaluacion" class="form-label">Horas de Evaluación <span class="text-danger">*</span></label>
                                                                <input type="text" class="form-control select-on-click" id="horasDeEvaluacion" name="horasDeEvaluacion" placeholder="" value="0"
                                                                pattern="[0-9]*" inputmode="numeric" oninput="this.value = this.value.replace(/[^0-9]/g, '')" {{ $soloLectura ? 'readonly' : '' }}>
                                                                <div class="invalid-feedback"></div>
                                                            </div>
                                                            <div class="col-md-2 mb-2 pt-1">
                                                                <label for="pagoAPSC" class="form-label">Pago al PSC  <span class="text-danger">*</span></label>
                                                                <input type="text" class="form-control select-on-click" id="pagoAPSC" name="pagoAPSC" placeholder="" value="0.00"
                                                                pattern="^\d+(\.\d{1,2})?$" inputmode="decimal"
                                                                oninput="this.value = this.value.replace(/[^0-9.]/g, ''); this.value = this.value.replace(/(\..*)\./g, '$1'); this.value = this.value.replace(/^(\d+(\.\d{0,2})?).*$/, '$1');">
                                                                <div class="invalid-feedback"></div>
                                                            </div>
                                                            <div class="col-md-2 mb-2 pt-1">
                                                                &nbsp;
                                                            </div>
                                                            <div class="col-md-2 mb-2 pt-1">
                                                                <label for="gastosConImpuestos" class="form-label">Gastos (CON impuestos) <span class="text-danger">*</span></label>
                                                                <input type="text" class="form-control" id="gastosConImpuestos" name="gastosConImpuestos" placeholder="" value="0.00" readonly>
                                                            </div>
                                                        </div>
                                                        <div class="row"> <!-- # capacitandos, $ por capacitando, $ evaluacion,            , $ total evaluación -->
                                                            <div class="col-md-2 mb-2 pt-1">
                                                                <label for="numeroDeCapacitandos3" class="form-label">No. de Capacitandos a Evaluar <span class="danger">*</span></label>
                                                                <input type="text" class="form-control" id="numeroDeCapacitandos3" name="numeroDeCapacitandos3"  placeholder="" value="0" readonly
                                                                pattern="[0-9]*" inputmode="numeric" oninput="this.value = this.value.replace(/[^0-9]/g, '')">
                                                                <div class="invalid-feedback"></div>
                                                            </div>

                                                            
                                                            <div class="col-md-2 mb-2 pt-1">
                                                                <label for="costoCertificadoICAT" class="form-label">Costo de Certificado a ICAT <span class="text-danger">*</span></label>
                                                                <input type="text" class="form-control select-on-click" id="costoCertificadoICAT" name="costoCertificadoICAT" placeholder="" value="0"
                                                                pattern="^\d+(\.\d{1,2})?$" inputmode="decimal"
                                                                oninput="this.value = this.value.replace(/[^0-9.]/g, ''); this.value = this.value.replace(/(\..*)\./g, '$1'); this.value = this.value.replace(/^(\d+(\.\d{0,2})?).*$/, '$1');" {{ $soloLectura ? 'readonly' : '' }}>
                                                                <div class="invalid-feedback"></div>
                                                            </div>


                                                            <div class="col-md-2 mb-2 pt-1">
                                                                <label for="horasEvaluacionTotales" class="form-label">Horas de Evaluación Totales <span class="text-danger">*</span></label>
                                                                <input type="text" class="form-control" id="horasEvaluacionTotales" name="horasEvaluacionTotales" placeholder="" value="0" readonly>
                                                                <div class="invalid-feedback"></div>
                                                            </div>
                                                            
                                                           
                                                            <div class="col-md-2 mb-2 pt-1">
                                                                &nbsp;
                                                            </div>
                                                            <div class="col-md-2 mb-2 pt-1">
                                                                <label for="soloGastos" class="form-label">Gastos <span class="text-danger">*</span></label>
                                                                <input type="text" class="form-control" id="soloGastos" name="soloGastos" placeholder="" value="0.00" readonly>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="row" id="cardRoco" style="display: none;"><!-- ROCO -->
                                            <div class="col-md-12 mb-2 pt1">
                                                <div class="card">
                                                    <div class="card-header">
                                                        <h4>Modelo ROCO (Reconocimiento Oficial de  Competencia Ocupacional)</h4>
                                                    </div>
                                                    <div class="card-body">
                                                        <div class="row"> <!-- # capacitandos, # horas, $ pago psc, $ total evaluación -->
                                                            
                                                            <div class="col-md-4 mb-2 pt-1">
                                                                <label for="numeroDeCapacitandosRoco" class="form-label">No. de Capacitandos<span class="text-danger">*</span></label>
                                                                <input type="text" class="form-control" id="numeroDeCapacitandosRoco" name="numeroDeCapacitandosRoco" placeholder="" value="1" 
                                                                pattern="[0-9]*" inputmode="numeric" oninput="this.value = this.value.replace(/[^0-9]/g, '')">
                                                                <div class="invalid-feedback"></div>
                                                            </div>

                                                            <div class="col-md-4 mb-2 pt-1">
                                                                <label for="costoPorCapacitandoRoco" class="form-label">Costo por Capacitando <span class="text-danger">*</span></label>
                                                                <input type="text" class="form-control select-on-click" id="costoPorCapacitandoRoco" name="costoPorCapacitandoRoco" placeholder="" value="844"
                                                                pattern="^\d+(\.\d{1,2})?$" inputmode="decimal"
                                                                oninput="this.value = this.value.replace(/[^0-9.]/g, ''); this.value = this.value.replace(/(\..*)\./g, '$1'); this.value = this.value.replace(/^(\d+(\.\d{0,2})?).*$/, '$1');">
                                                                <div class="invalid-feedback"></div>
                                                            </div>

                                                            <div class="col-md-4 mb-2 pt-1">
                                                                <label for="totalRoco" class="form-label">Total <span class="text-danger">*</span></label>
                                                                <input type="text" class="form-control" id="totalRoco" name="totalRoco" placeholder="" readonly>
                                                            </div>



                                                            
                                                            
                                                        </div>
                                                       
                                                        <div class="row"> <!-- $ costo evaluación por capacitando, $ costo de certificado, # numero de evaluados, $ total -->
                                                            
                                                            
                                                            <div class="col-md-4 mb-2 pt-1">
                                                                <label for="horasDeEvaluacionRoco" class="form-label">Horas de Evaluación <span class="text-danger">*</span></label>
                                                                <input type="text" class="form-control" id="horasDeEvaluacionRoco" name="horasDeEvaluacionRoco" placeholder="" value="1" 
                                                                pattern="[0-9]*" inputmode="numeric" oninput="this.value = this.value.replace(/[^0-9]/g, '')">
                                                                <div class="invalid-feedback"></div>
                                                            </div>


                                                            <div class="col-md-4 mb-2 pt-1">
                                                                <label for="pagoAPSCRoco" class="form-label">Pago a PSC (SIN impuestos) <span class="text-danger">*</span></label>
                                                                <input type="text" class="form-control select-on-click" id="pagoAPSCRoco" name="pagoAPSCRoco" placeholder="" value="129.00"
                                                                pattern="^\d+(\.\d{1,2})?$" inputmode="decimal"
                                                                oninput="this.value = this.value.replace(/[^0-9.]/g, ''); this.value = this.value.replace(/(\..*)\./g, '$1'); this.value = this.value.replace(/^(\d+(\.\d{0,2})?).*$/, '$1');">
                                                                <div class="invalid-feedback"></div>
                                                            </div>

                                                            <div class="col-md-4 mb-2 pt-1">
                                                                <label for="totalDeEvaluacionRoco" class="form-label">Total de Evaluación <span class="text-danger">*</span></label>
                                                                <input type="text" class="form-control" id="totalDeEvaluacionRoco" name="totalDeEvaluacionRoco" placeholder="" readonly>
                                                            </div>

                                                            
                                                            
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="row justify-content-center">
                                            <div class="col-md mb-3 pt-3 text-center">
                                                <h3>RENTABILIDAD DEL MODELO DE NEGOCIO</h3>
                                                <div class="row">
                                                    <div class="col-md mb-2 pt-1">
                                                        <h1 id="rentabilidad" class="text-center">0.00</h1>
                                                        <input type="hidden" class="form-control form-control form-control-sm" id="rentabilidadInput" name="rentabilidadInput" value="0">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                    </div>

                                    <div class="modal-footer">
                                        <div class="text-center">
                                            <button type="submit" class="btn btn-primary" id="modelo-borrador" name="accion" value="borrador"><i class=" ri-eraser-line ri-size-lg"></i> Guardar Modelo Borrador</button>
                                            <button type="submit" class="btn btn-success" id="modelo-listo" name="accion" value="listo"><i class=" ri-thumb-up-line ri-size-lg"></i> Guardar Modelo</button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>

                    </div>
                </div>

                <!-- Modal de Confirmación -->
                <div class="modal fade" id="confirmarGuardadoModal" tabindex="-1" aria-labelledby="confirmarGuardadoModalLabel" aria-hidden="true">
                    <div class="modal-dialog modal-dialog-centered">
                        <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="confirmarGuardadoModalLabel">Confirmar Nuevo Modelo</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Cerrar"></button>
                        </div>
                        <div class="modal-body text-center">
                            <p id="mensajeConfirmacionModal" class="fw-bold"></p>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
                            <button type="button" class="btn btn-primary" id="confirmarEnvioBtn">Aceptar</button>
                        </div>
                        </div>
                    </div>
                </div>

        <!-- Modal Duplicate Model Warning -->
        <div class="modal fade" id="duplicateModelModal" tabindex="-1" aria-labelledby="duplicateModelModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-lg modal-dialog-centered">
                <div class="modal-content">
                    <div class="modal-header bg-warning">
                        <h5 class="modal-title text-white" id="duplicateModelModalLabel">¡Advertencia! Modelo Duplicado</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <div class="alert alert-danger" role="alert">
                            <h4 class="alert-heading">Ya existe un modelo de certificación con  misma información</h4>
                            <p>No se puede guardar el modelo porque los datos ingresados coinciden con un registro existente.</p>
                        </div>
                        
                        <div class="card">
                            <div class="card-header">
                                <strong>Modelo de Certificación Existente: <span id="dup_clave"></span></strong>
                            </div>
                            <div class="card-body">
                                <ul class="list-group list-group-flush" id="dup_lista">
                                    <!-- Los elementos se llenarán dinámicamente según el tipo -->
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
                    </div>
                </div>
            </div>
        </div>

            </div>

        </div>
    </div>
@endsection

@push('scripts')
    <script>
        $(window).on('load', function() {
            // Destroy selectpicker if it exists (initialized by custom.js)
            if ($.fn.selectpicker) {
                $('#evaluacionCurso').selectpicker('destroy');
            }

            // Initialize Select2
            $('#evaluacionCurso').select2({
                placeholder: "Seleccione una evaluación",
                allowClear: true,
                width: '100%'
            });
        });

        $(document).ready(function () {
            // Muestra u oculta lista
            $('#tipoDeCertificacion').on('change', function () {
                const selected = $(this).val();

                if (selected === 'EVALUACION') {
                    // Mostrar Evaluación
                    $('#listaEvaluaciones').show();
                    $('#cardEvaluacion').show();

                    // Ocultar ROCO
                    $('#cardRoco').hide();

                    // Limpiar datos
                    // $('#nuevoModeloCertificacionForm')[0].reset();

                } else if (selected === 'ROCO') {
                    // Mostrar ROCO
                    $('#cardRoco').show();

                    // Ocultar Evaluación
                    $('#listaEvaluaciones').hide();
                    $('#cardEvaluacion').hide();

                    // Limpiar datos
                    // $('#nuevoModeloCertificacionForm')[0].reset();

                }
            });

            // Disparar el evento al cargar para aplicar  lógica inicial
            $('#tipoDeCertificacion').trigger('change');

            // Cuando cambie el valor del select con id evaluacionCurso
            $('#evaluacionCurso').on('change', function() {
                let claveEC = $(this).val();

                // Solicitud AJAX
                $.ajax({
                    url: '{{ route("datosEstandar") }}',
                    method: 'GET',
                    data: {
                        claveEC : claveEC,
                    },
                    success: function(response) {
                        //
                        $('#horasDeEvaluacion').val(response.evaluacion_horas);
                        $('#pagoAPSC').val(response.evaluacion_costo_psc);
                        $('#costoCertificadoICAT').val(response.costo_certificado_icat);
                    },
                    error: function() {
                        //
                    }
                });
            });

            $(document).on('focus', '.select-on-click', function() {
                $(this).select();
            });



            // Función para validar formulario
            function validateForm() {
                // Validar selección de unidad, tipo de curso y curso
                let unidad = $('#unidadDeCapacitacion').val();
                $('#unidadDeCapacitacion').removeClass('is-invalid');
                $('#unidadDeCapacitacion').closest('.bootstrap-select').next('.invalid-feedback').remove();
                
                if (!unidad) {
                    $('#unidadDeCapacitacion').focus();
                    if ($('#unidadDeCapacitacion').val() === '') {
                        $('#unidadDeCapacitacion').addClass('is-invalid');
                        $('#unidadDeCapacitacion').closest('.bootstrap-select')
                            .after('<div class="invalid-feedback d-block">Selecciona una unidad</div>');
                        return false;
                    }
                } else {
                    $('#unidadDeCapacitacion').removeClass('is-invalid');
                    $('#unidadDeCapacitacion').closest('.bootstrap-select').next('.invalid-feedback').remove();
                }

                let tipoDeCertificacion = $('#tipoDeCertificacion').val();

                if (tipoDeCertificacion === 'EVALUACION') {
                    let evaluacionCurso = $('#evaluacionCurso').val();
                    
                    $('#evaluacionCurso').removeClass('is-invalid');
                    $('#evaluacionCurso').next('.select2-container').next('.invalid-feedback').remove();

                    if (!evaluacionCurso) {
                        $('#evaluacionCurso').select2('open');
                        $('#evaluacionCurso').addClass('is-invalid');
                        $('#evaluacionCurso').next('.select2-container')
                            .after('<div class="invalid-feedback d-block">Selecciona un curso</div>');
                        return false;
                    }
                }

                return true;
            }

            // Interceptar clic en los botones de guardado
            $('#modelo-borrador, #modelo-listo').on('click', function(e) {
                e.preventDefault(); // Evita que el formulario se envíe todavía

                // Validar formulario antes de chequear duplicados
                if (!validateForm()) {
                    return;
                }

                let accion = $(this).val();
                let form = $('#nuevoModeloCertificacionForm');

                // Realizar chequeo de duplicados
                $.ajax({
                    url: '{{ route("checkDuplicateCertificacion") }}',
                    method: 'POST',
                    data: form.serialize(),
                    success: function(response) {
                        if (response.exists) {
                            // Mostrar modal con información del duplicado
                            $('#dup_clave').text(response.model.clave);
                            
                            // Limpiar lista anterior
                            $('#dup_lista').empty();
                            
                            let tipoDeCertificacion = $('#tipoDeCertificacion').val();
                            
                            if (tipoDeCertificacion === 'EVALUACION') {
                                // Campos para EVALUACION
                                $('#dup_lista').append(
                                    '<li class="list-group-item d-flex justify-content-between align-items-center">' +
                                    'Número de capacitandos' +
                                    '<span class="badge bg-primary rounded-pill">' + response.model.numero_capacitandos + '</span>' +
                                    '</li>' +
                                    '<li class="list-group-item d-flex justify-content-between align-items-center">' +
                                    'Costo de capacitación' +
                                    '<span class="badge bg-primary rounded-pill">$ ' + parseFloat(response.model.costo_capacitacion || 0).toFixed(2) + '</span>' +
                                    '</li>' +
                                    '<li class="list-group-item d-flex justify-content-between align-items-center">' +
                                    'Costo de evaluación' +
                                    '<span class="badge bg-primary rounded-pill">$ ' + parseFloat(response.model.costo_evaluacion || 0).toFixed(2) + '</span>' +
                                    '</li>' +
                                    '<li class="list-group-item d-flex justify-content-between align-items-center">' +
                                    'Costo del certificado' +
                                    '<span class="badge bg-primary rounded-pill">$ ' + parseFloat(response.model.costo_certificado || 0).toFixed(2) + '</span>' +
                                    '</li>' +
                                    '<li class="list-group-item d-flex justify-content-between align-items-center">' +
                                    'Horas de evaluación' +
                                    '<span class="badge bg-primary rounded-pill">' + response.model.horas + '</span>' +
                                    '</li>' +
                                    '<li class="list-group-item d-flex justify-content-between align-items-center">' +
                                    'Pago al PSC' +
                                    '<span class="badge bg-primary rounded-pill">$ ' + parseFloat(response.model.hora_instructor || 0).toFixed(2) + '</span>' +
                                    '</li>' +
                                    '<li class="list-group-item d-flex justify-content-between align-items-center">' +
                                    'Costo certificado ICAT' +
                                    '<span class="badge bg-primary rounded-pill">$ ' + parseFloat(response.model.costo_certificado_icat || 0).toFixed(2) + '</span>' +
                                    '</li>' +
                                    '<li class="list-group-item d-flex justify-content-between align-items-center">' +
                                    'Horas de Evaluación Totales' +
                                    '<span class="badge bg-primary rounded-pill">' + (parseFloat(response.model.numero_capacitandos || 0) * parseFloat(response.model.horas || 0)) + '</span>' +
                                    '</li>' +
                                    '<li class="list-group-item d-flex justify-content-between align-items-center">' +
                                    'Gastos con impuestos' +
                                    '<span class="badge bg-primary rounded-pill">$ ' + parseFloat(response.model.costo_instructor || 0).toFixed(2) + '</span>' +
                                    '</li>' +
                                    '<li class="list-group-item d-flex justify-content-between align-items-center">' +
                                    'Otros gastos' +
                                    '<span class="badge bg-primary rounded-pill">$ ' + parseFloat(response.model.otros_gastos || 0).toFixed(2) + '</span>' +
                                    '</li>'
                                );
                            } else if (tipoDeCertificacion === 'ROCO') {
                                // Campos para ROCO
                                $('#dup_lista').append(
                                    '<li class="list-group-item d-flex justify-content-between align-items-center">' +
                                    'Número de capacitandos' +
                                    '<span class="badge bg-primary rounded-pill">' + response.model.numero_capacitandos + '</span>' +
                                    '</li>' +
                                    '<li class="list-group-item d-flex justify-content-between align-items-center">' +
                                    'Horas de evaluación' +
                                    '<span class="badge bg-primary rounded-pill">' + response.model.horas + '</span>' +
                                    '</li>' +
                                    '<li class="list-group-item d-flex justify-content-between align-items-center">' +
                                    'Pago a PSC' +
                                    '<span class="badge bg-primary rounded-pill">$ ' + parseFloat(response.model.hora_instructor || 0).toFixed(2) + '</span>' +
                                    '</li>' +
                                    '<li class="list-group-item d-flex justify-content-between align-items-center">' +
                                    'Costo por capacitando' +
                                    '<span class="badge bg-primary rounded-pill">$ ' + parseFloat(response.model.costo_capacitando || 0).toFixed(2) + '</span>' +
                                    '</li>' +
                                    '<li class="list-group-item d-flex justify-content-between align-items-center">' +
                                    'Total de evaluación' +
                                    '<span class="badge bg-primary rounded-pill">$ ' + parseFloat(response.model.total_evaluacion_rco || 0).toFixed(2) + '</span>' +
                                    '</li>'
                                );
                            }

                            $('#duplicateModelModal').modal('show');
                        } else {
                            // Si no existe, verificar acción
                            if (accion === 'borrador') {
                                // Guardar directamente si es borrador
                                $('<input>').attr({
                                    type: 'hidden',
                                    name: 'accion',
                                    value: accion
                                }).appendTo(form);
                                form.submit();
                            } else {
                                // Mostrar modal de confirmación para 'listo'
                                $('#mensajeConfirmacionModal').text('¿Está seguro de registrar el Modelo de Negocio para Certificación?');
                                
                                // Guardar  acción en el botón de confirmación
                                $('#confirmarEnvioBtn').data('accion', accion);
                                
                                $('#confirmarGuardadoModal').modal('show');
                            }
                        }
                    },
                    error: function() {
                        alert('Error al verificar duplicados. Por favor intente nuevamente.');
                    }
                });
            });

            // Cuando se confirme el envío
            $('#confirmarEnvioBtn').on('click', function() {
                // Asignar el valor original del botón al campo "accion"
                let accion = $(this).data('accion');
                $('<input>').attr({
                    type: 'hidden',
                    name: 'accion',
                    value: accion
                }).appendTo('#nuevoModeloCertificacionForm');

                // Enviar el formulario
                $('#nuevoModeloCertificacionForm').submit();
            });

            // Evento para calcular  rentabilidad al ingresar datos o seleccionar checkboxes
            $('#nuevoModeloCertificacionForm').on('input change', function () {
                // Tipo de certificación seleccionada
                let tipoDeCertificacion = $('#tipoDeCertificacion').val();

                // EVALUACIÓN
                if (tipoDeCertificacion === 'EVALUACION')
                {   
                    // 
                    var numeroDeCapacitandos        = parseFloat($('#numeroDeCapacitandos').val()) || 0;
                                                      $('#numeroDeCapacitandos2').val(numeroDeCapacitandos);
                                                      $('#numeroDeCapacitandos3').val(numeroDeCapacitandos);
                    var costoDeCapacitacion         = parseFloat($('#costoDeCapacitacion').val())  || 0;
                    var costoDeEvaluacion           = parseFloat($('#costoDeEvaluacion').val())    || 0;
                    var costoDelCertificado         = parseFloat($('#costoDelCertificado').val())  || 0;
                    var totalDeEvaluacion           = (numeroDeCapacitandos * costoDeCapacitacion) + (numeroDeCapacitandos * costoDeEvaluacion) +( numeroDeCapacitandos * costoDelCertificado);
                                                      $('#totalDeEvaluacion').val(Number(totalDeEvaluacion).toLocaleString('es-MX', { minimumFractionDigits: 2, maximumFractionDigits: 2 })); 

                    // 
                    var horasDeEvaluacion           = parseFloat($('#horasDeEvaluacion').val()) || 0;
                    var pagoAPSC                    = parseFloat($('#pagoAPSC').val()) || 0;
                    var gastosConImpuestos          = (numeroDeCapacitandos * horasDeEvaluacion * pagoAPSC)*1.16;
                                                    $('#gastosConImpuestos').val(Number(gastosConImpuestos).toLocaleString('es-MX', { minimumFractionDigits: 2, maximumFractionDigits: 2 }));

                    // 
                    var costoCertificadoICAT      = parseFloat($('#costoCertificadoICAT').val()) || 0;
                    var soloGastos                  = numeroDeCapacitandos * costoCertificadoICAT;
                                                      $('#soloGastos').val(Number(soloGastos).toLocaleString('es-MX', { minimumFractionDigits: 2, maximumFractionDigits: 2 }));

                    // Calcular Horas de Evaluación Totales
                    var horasEvaluacionTotales      = numeroDeCapacitandos * horasDeEvaluacion;
                                                      $('#horasEvaluacionTotales').val(Number(horasEvaluacionTotales).toLocaleString('es-MX', { minimumFractionDigits: 0, maximumFractionDigits: 0 }));

                    // Calcular rentabilidad en porcentaje
                    var rentabilidad = 0;
                    if (totalDeEvaluacion > 0) {
                        rentabilidad = totalDeEvaluacion - (gastosConImpuestos + soloGastos);
                    }
                    $('#rentabilidad').text(Number(rentabilidad).toLocaleString('es-MX', { minimumFractionDigits: 2, maximumFractionDigits: 2 }));
                    $('#rentabilidadInput').val(Number(rentabilidad).toLocaleString('es-MX', { minimumFractionDigits: 2, maximumFractionDigits: 2 }));

                }
                else if (tipoDeCertificacion === 'ROCO')
                {
                    //
                    var numeroDeCapacitandosRoco    = parseFloat($('#numeroDeCapacitandosRoco').val()) || 0;
                    var horasDeEvaluacionRoco       = parseFloat($('#horasDeEvaluacionRoco').val()) || 0;
                    var pagoAPSCRoco                = parseFloat($('#pagoAPSCRoco').val()) || 0;
                    var totalDeEvaluacionRoco       = (horasDeEvaluacionRoco * pagoAPSCRoco) * 1.16;
                                                      $('#totalDeEvaluacionRoco').val(Number(totalDeEvaluacionRoco).toLocaleString('es-MX', { minimumFractionDigits: 2, maximumFractionDigits: 2 }));

                    //


                    //
                    var costoPorCapacitandoRoco     = parseFloat($('#costoPorCapacitandoRoco').val()) || 0;
                    var totalRoco                   = costoPorCapacitandoRoco * numeroDeCapacitandosRoco;
                                                      $('#totalRoco').val(Number(totalRoco).toLocaleString('es-MX', { minimumFractionDigits: 2, maximumFractionDigits: 2 }));
                    // Calcular rentabilidad en porcentaje
                    var rentabilidad = 0;
                    if (totalRoco > 0) {
                        rentabilidad = totalRoco - totalDeEvaluacionRoco;
                    }
                    $('#rentabilidad').text(Number(rentabilidad).toLocaleString('es-MX', { minimumFractionDigits: 2, maximumFractionDigits: 2 }));
                    $('#rentabilidadInput').val(Number(rentabilidad).toLocaleString('es-MX', { minimumFractionDigits: 2, maximumFractionDigits: 2 }));

                }

            });

            $('nuevoModeloCertificacionForm').trigger('input');
        });
    </script>
@endpush