@extends('layout.template')
@section('title', 'SICCAP ICATEP')
@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()->usu_perfil_id;
                            $unidad = auth()->user()->usu_unidad_id;
                            
                            $unidadnombre = DB::table('unidades')
                                    ->orderBy('uni_nombre')
                                    ->where('uni_id', $unidad)
                                    ->first();
                        @endphp 
                        <h4>Nuevo Modelo de Negocios</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('modelos') }}" class="btn btn-rounded btn-dark back-fixed btn-sm"
                            aria-label="Regresar">
                            <span class="btn-icon-start text-dark btn-sm"><i class="fa fa-arrow-left"></i></span>
                            Regresar
                        </a>
                    </ol>
                </div>
            </div>

            <div class="row">
                <!-- se creo el modelo exitosamente -->
                @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

                <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('modeloStore') }}" method="POST" id="nuevoModeloForm">
                                    @csrf
                                    <div class="modal-body">
                                    
                                        <div class="row"> <!-- 1 -->
                                            <div class="col">&nbsp;</div>
                                        </div>
                                        <div class="row"> <!-- 1 -->
                                            <div class="col">&nbsp;</div>
                                        </div>
                                        <!-- Removed Unit, Course Type, and Course Name fields as requested -->
                                        
                                        <div class="row"> <!-- # capacitandos, $ por capacitando, $ total de ingreso de los capacitandos -->
                                            <div class="col-md-4 mb-2 pt-1">
                                                <label for="numeroDeCapacitandos" class="form-label">Número de capacitandos</label>
                                                <input type="text" class="form-control select-on-click" id="numeroDeCapacitandos" name="numeroDeCapacitandos" autocomplete="off" placeholder="" value="0"
                                                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="ingresoPorCapacitando" class="form-label">Ingreso por capacitando</label>
                                                <input type="text" class="form-control select-on-click" id="ingresoPorCapacitando" name="ingresoPorCapacitando" autocomplete="off" 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');">
                                                <div class="invalid-feedback"></div>
                                            </div>
                                            <div class="col-md-4 mb-2 pt-1">
                                                <label for="totalIngresoDeCapacitandos" class="form-label">Total ingreso de capacitandos</label>
                                                <input type="text" class="form-control" id="totalIngresoDeCapacitandos" name="totalIngresoDeCapacitandos" placeholder="" value="0" readonly>
                                            </div>
                                        </div>
                                        
                                        <div class="row"> <!-- # madres, $ por madre, $ total de ingreso de las madres -->
                                            <div class="col-md-4 mb-2 pt-1">
                                                <label for="numeroDeMadres" class="form-label">Número de madres</label>
                                                <input type="text" class="form-control select-on-click" id="numeroDeMadres" name="numeroDeMadres" autocomplete="off"  placeholder="" value="0"
                                                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="ingresoPorMadre" class="form-label">Ingreso por madre</label>
                                                <input type="text" class="form-control select-on-click" id="ingresoPorMadre" name="ingresoPorMadre" autocomplete="off" placeholder="" value="0"
                                                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="totalIngresoDeMadres" class="form-label">Total de ingreso de madres</label>
                                                <input type="text" class="form-control" id="totalIngresoDeMadres" name="totalIngresoDeMadres" placeholder="" value="0" readonly>
                                            </div>
                                        </div>
                                        
                                        <div class="row"> <!-- # exentos de pago, $ por exento de pago, $ total de ingreso de exentos de pago -->
                                            <div class="col-md-4 mb-2 pt-1">
                                                <label for="numeroExentosDePago" class="form-label">Número de exentos de pago</label>
                                                <input type="text" class="form-control select-on-click" id="numeroExentosDePago" name="numeroExentosDePago" autocomplete="off"  placeholder="" value="0"
                                                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="ingresoPorExentoDePago" class="form-label">Ingreso por exento de pago</label>
                                                <input type="text" class="form-control select-on-click" id="ingresoPorExentoDePago" name="ingresoPorExentoDePago" autocomplete="off" 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');">
                                                <div class="invalid-feedback"></div>
                                            </div>
                                            <div class="col-md-4 mb-2 pt-1">
                                                <label for="totalIngresoDeExentosDePago" class="form-label">Total de exentos de pago</label>
                                                <input type="text" class="form-control" id="totalIngresoDeExentosDePago" name="totalIngresoDeExentosDePago" placeholder="" value="0" readonly>
                                            </div>
                                        </div>

                                        <div class="row"> <!-- # total de capacitandos, $ ingresos totales del curso -->
                                            <div class="col-md-4 mb-2 pt-1">
                                                <label for="numeroTotalDeCapacitandos" class="form-label">Número total de capacitandos</label>
                                                <input type="text" class="form-control form-control form-control-sm" id="numeroTotalDeCapacitandos" name="numeroTotalDeCapacitandos" 
                                                autocomplete="off"  placeholder="" value="0" readonly>
                                            </div>
                                            <div class="col-md-4 mb-2 pt-1">
                                            </div>
                                            <div class="col-md-4 mb-2 pt-1">
                                                <label for="totalIngresosDelCurso" class="form-label">Total ingresos del curso</label>
                                                <input type="text" class="form-control form-control form-control-sm" id="totalIngresosDelCurso" name="totalIngresosDelCurso" placeholder="" value="0" readonly>
                                            </div>
                                        </div>

                                        <div class="row"> <!-- Es capacitador interno, es capacitador pagado del anexo -->
                                            <div class="col-md-4 mb-2 pt-1"> <!-- Es capacitador interno ? -->
                                                        <div class="form-check custom-checkbox mb-3 checkbox-primary check-xl">
                                                            <input type="checkbox" class="form-check-input" id="capacitadorInterno" name="capacitadorInterno" value="1">
                                                            <label class="form-check-label" for="capacitadorInterno"> Capacitador interno de ICATEP</label>
                                                        </div>
                                            </div>
                                            @puede('Modelos de Negocios', 'autorizar_modelo_negocio')
                                                <div class="col-md-4 mb-2 pt-1"> <!-- Es capacitador pagado del anexo ? -->
                                                    <div class="form-check custom-checkbox mb-3 checkbox-primary check-xl">
                                                        <input type="checkbox" class="form-check-input" id="capacitadorPagadoAnexo" name="capacitadorPagadoAnexo" value="1">
                                                        <label class="form-check-label" for="capacitadorPagadoAnexo"> Capacitador pagado del anexo</label>
                                                    </div>
                                                </div>
                                            @endpuede
                                        </div>

                                        <div class="row"> <!-- # de horas, $ pago por hora, $ pago total del instructor -->
                                            <div class="col-md-4 mb-2 pt-1">
                                                <label for="horasDelCurso" class="form-label">Horas del curso</label>
                                                <input type="text" class="form-control form-control form-control-sm select-on-click" id="horasDelCurso" name="horasDelCurso" autocomplete="off"  placeholder="" value="0"
                                                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="pagoPorHoraAlPSC" class="form-label">Pago por hora al PSC (sin impuestos)</label>
                                                <input type="text" class="form-control form-control form-control-sm select-on-click" id="pagoPorHoraAlPSC" name="pagoPorHoraAlPSC" autocomplete="off" 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');">
                                                <div class="invalid-feedback"></div>
                                            </div>
                                            <div class="col-md-4 mb-2 pt-1">
                                                <label for="costoTotalDelPSC" class="form-label">Costo total del PSC</label>
                                                <input type="text" class="form-control form-control form-control-sm" id="costoTotalDelPSC" name="costoTotalDelPSC" placeholder="" value="0" readonly>
                                            </div>
                                        </div>
                                        
                                        <div class="row"> <!-- $ costo por constancia, $ otros gastos, $ ingreso total -->
                                            <div class="col-md-4 mb-2 pt-1">
                                                <label for="costoPorConstancia" class="form-label">Costo por constancia</label>
                                                <input type="text" class="form-control form-control form-control-sm select-on-click" id="costoPorConstancia" name="costoPorConstancia" autocomplete="off"  placeholder="" value="13"
                                                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');"
                                                @puede('Modelos de Negocios', 'autorizar_modelo_negocio') @else readonly @endpuede>
                                                <div class="invalid-feedback"></div>
                                            </div>
                                            <div class="col-md-4 mb-2 pt-1">
                                                <label for="otrosGastos" class="form-label">Otros gastos</label>
                                                <input type="text" class="form-control form-control form-control-sm select-on-click" id="otrosGastos" name="otrosGastos" autocomplete="off" 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');">
                                                <div class="invalid-feedback"></div>
                                            </div>
                                            <div class="col-md-4 mb-2 pt-1">
                                                <label for="ingresoTotal" class="form-label">Ingreso total</label>
                                                <input type="text" class="form-control form-control form-control-sm" id="ingresoTotal" name="ingresoTotal" placeholder="" value="0" readonly>
                                            </div>
                                        </div>

                                        <div class="row justify-content-center">
                                            <div class="col-md mb-3 pt-3 text-center">
                                                <h3>PORCENTAJE DE RENTABILIDAD DEL MODELO DE NEGOCIO</h3>
                                                <div class="row">
                                                    <div class="col-md mb-2 pt-1">
                                                        <h1 id="rentabilidad" class="text-center">0 %</h1>
                                                        <input type="hidden" class="form-control form-control form-control-sm" id="rentabilidadInput" name="rentabilidadInput" value="0">
                                                    </div>
                                                </div>
                                                <div class="row">
                                                    <div class="col-md mt-3" id="mensajeRentabilidad"></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="fa fa-eraser fa-lg"></i> Guardar Borrador</button>
                                            <button type="submit" class="btn btn-success" id="modelo-listo" name="accion" value="listo"><i class="fa fa-thumbs-up fa-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>

            </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 negocio con la 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 Negocio Existente: <span id="dup_clave"></span></strong>
                            </div>
                            <div class="card-body">
                                <ul class="list-group list-group-flush">
                                    <li class="list-group-item d-flex justify-content-between align-items-center">
                                        Ingreso por capacitando
                                        <span class="badge bg-primary rounded-pill" id="dup_ingresoCap"></span>
                                    </li>
                                    <li class="list-group-item d-flex justify-content-between align-items-center">
                                        Número de madres
                                        <span class="badge bg-primary rounded-pill" id="dup_numMadres"></span>
                                    </li>
                                    <li class="list-group-item d-flex justify-content-between align-items-center">
                                        Ingreso por madre
                                        <span class="badge bg-primary rounded-pill" id="dup_ingresoMadre"></span>
                                    </li>
                                    <li class="list-group-item d-flex justify-content-between align-items-center">
                                        Número de exentos de pago
                                        <span class="badge bg-primary rounded-pill" id="dup_numExentos"></span>
                                    </li>
                                    <li class="list-group-item d-flex justify-content-between align-items-center">
                                        Ingreso por exento de pago
                                        <span class="badge bg-primary rounded-pill" id="dup_ingresoExento"></span>
                                    </li>
                                    <li class="list-group-item d-flex justify-content-between align-items-center">
                                        Número total de capacitandos
                                        <span class="badge bg-primary rounded-pill" id="dup_totalCap"></span>
                                    </li>
                                    <li class="list-group-item d-flex justify-content-between align-items-center">
                                        Horas del curso
                                        <span class="badge bg-primary rounded-pill" id="dup_horas"></span>
                                    </li>
                                    <li class="list-group-item d-flex justify-content-between align-items-center">
                                        Pago por hora al PSC
                                        <span class="badge bg-primary rounded-pill" id="dup_pagoHora"></span>
                                    </li>
                                    <li class="list-group-item d-flex justify-content-between align-items-center">
                                        Costo por constancia
                                        <span class="badge bg-primary rounded-pill" id="dup_costoConstancia"></span>
                                    </li>
                                    <li class="list-group-item d-flex justify-content-between align-items-center">
                                        Otros gastos
                                        <span class="badge bg-primary rounded-pill" id="dup_otrosGastos"></span>
                                    </li>
                                </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>

        <!-- Modal Empty Model Warning -->
        <div class="modal fade" id="emptyModelModal" tabindex="-1" aria-labelledby="emptyModelModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content">
                    <div class="modal-header bg-danger">
                        <h5 class="modal-title text-white" id="emptyModelModalLabel">Aviso</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <p class="fw-bold">El modelo de negocios no puede estar en ceros. Por favor ingrese la información requerida.</p>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
                    </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) {
                $('#cursosEnLaUnidad').selectpicker('destroy');
            }

            // Initialize Select2
            $('#cursosEnLaUnidad').select2({
                placeholder: "Selecciona una unidad y tipo de curso",
                allowClear: true,
                width: '100%'
            });
        });

        $(document).ready(function () {
            // Evento para calcular la rentabilidad al ingresar datos o seleccionar checkboxes
            $('#nuevoModeloForm').on('input change', function (e) {
                // Helper para obtener valor flotante o 0
                function getVal(selector) {
                    var val = parseFloat($(selector).val());
                    return isNaN(val) ? 0 : val;
                }

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

                // Solo actualiza ingresoPorMadre si:
                // Está vacío, o
                // El evento se disparó por cambiar ingresoPorCapacitando
                var ingresoPorMadreInput = $('#ingresoPorMadre');
                var ingresoPorMadreVal = parseFloat(ingresoPorMadreInput.val());

                if (e.target.id === 'ingresoPorCapacitando' || isNaN(ingresoPorMadreVal) || ingresoPorMadreInput.val() === '') {
                    var ingresoPorMadre = ingresoPorCapacitando / 2;
                    ingresoPorMadreInput.val(ingresoPorMadre.toFixed(2));
                } else {
                    var ingresoPorMadre = ingresoPorMadreVal;
                }

                // Madres solteras
                var numeroDeMadres = getVal('#numeroDeMadres');
                var ingresoMadres  = numeroDeMadres * ingresoPorMadre;

                $('#totalIngresoDeMadres').val(Number(ingresoMadres).toLocaleString('es-MX', { minimumFractionDigits: 2, maximumFractionDigits: 2 }));
                var totalIngresoDeMadres = parseFloat(ingresoMadres) || 0;

                // Exentos de pago o becados
                var numeroExentosDePago         = getVal('#numeroExentosDePago');
                var ingresoPorExentoDePago      = getVal('#ingresoPorExentoDePago');
                var ingresoExentosDePago        = numeroExentosDePago * ingresoPorExentoDePago;
                $('#totalIngresoDeExentosDePago').val(Number(ingresoExentosDePago).toLocaleString('es-MX', { minimumFractionDigits: 2, maximumFractionDigits: 2 }));
                var totalIngresoDeExentosDePago = parseFloat(ingresoExentosDePago) || 0;

                // Número total de capacitandos
                var numeroTotalDeCapacitandos   = numeroDeCapacitandos + numeroDeMadres + numeroExentosDePago;
                $('#numeroTotalDeCapacitandos').val(numeroTotalDeCapacitandos);

                // Ingreso total del curso
                var totalIngresosDelCurso       = ingresoCapacitandos + ingresoMadres + ingresoExentosDePago;
                $('#totalIngresosDelCurso').val(Number(totalIngresosDelCurso).toLocaleString('es-MX', { minimumFractionDigits: 2, maximumFractionDigits: 2 }));

                // horas del curso
                var horasDelCurso               = getVal('#horasDelCurso');
                // pago por hora al PSC
                var pagoPorHoraAlPSC            = getVal('#pagoPorHoraAlPSC');
                // Costo total del PSC
                var costoTotalDelPSC            = (horasDelCurso * pagoPorHoraAlPSC) * 1.16;
                $('#costoTotalDelPSC').val(Number(costoTotalDelPSC).toLocaleString('es-MX', { minimumFractionDigits: 2, maximumFractionDigits: 2 }));
                var totalCostoTotalDelPSC       = parseFloat(costoTotalDelPSC) || 0;

                // Costo por constancia
                var costoPorConstancia          = getVal('#costoPorConstancia');
                // Costo por constancia * número total de capacitandos
                var costoPorConstanciaTotal     = costoPorConstancia * numeroTotalDeCapacitandos;

                // Otros gastos
                var otrosGastos                 = getVal('#otrosGastos');

                // Determinar si se resta el costo del PSC
                var costoPSCParaRestar = totalCostoTotalDelPSC;
                if ($('#capacitadorPagadoAnexo').is(':checked')) {
                    costoPSCParaRestar = 0;
                }

                // Ingreso total
                var ingresoTotal                = totalIngresoDeCapacitandos + totalIngresoDeMadres + totalIngresoDeExentosDePago - costoPSCParaRestar - costoPorConstanciaTotal - otrosGastos;
                $('#ingresoTotal').val(Number(ingresoTotal).toLocaleString('es-MX', { minimumFractionDigits: 2, maximumFractionDigits: 2 }));
                // Pago del PSC + total de constancias
                var gastos                      = costoTotalDelPSC + costoPorConstanciaTotal;

                // Si Capacitador Interno está seleccionado
                if ($('#capacitadorInterno').is(':checked')) {
                    // Si Capacitador Pagado del Anexo está seleccionado, no se calcula el costo
                    if ($('#capacitadorPagadoAnexo').is(':checked')) {
                        costoTotalDelPSC = 0; // No se paga al PSC si es capacitador interno
                    } else {
                        // Si no es capacitador pagado del anexo, se calcula el costo total del PSC
                        costoTotalDelPSC = horasDelCurso * pagoPorHoraAlPSC;
                    }
                } else {
                    // Si no es capacitador interno, se calcula el costo total del PSC normalmente
                    costoTotalDelPSC = horasDelCurso * pagoPorHoraAlPSC;
                }

                // Calcular rentabilidad en porcentaje
                var rentabilidad = 0;
                if (ingresoTotal > 0 && totalIngresosDelCurso > 0) {
                    rentabilidad =  ((ingresoTotal)/totalIngresosDelCurso)*100;
                    rentabilidad = parseInt(rentabilidad);
                } else if (ingresoTotal <= 0) {
                    rentabilidad = 0;
                }
                
                $('#rentabilidad').text(rentabilidad + ' %');
                $('#rentabilidadInput').val(rentabilidad);

                // Validar rentabilidad
                if (rentabilidad < 55) {
                    // Mostrar mensaje de advertencia
                    $('#mensajeRentabilidad').html('<h3><span class="text-danger fw-bold">El porcentaje del modelo de negocios debe de ser mayor al 55%</span></h3>');

                    // Cambiar estilo y texto del botón
                    $('#modelo-listo')
                        .removeClass('btn-success')
                        .addClass('btn-primary')
                        .html('<i class="fa fa-thumbs-up fa-lg"></i> Guardar para autorización');
                } else {
                    // Borrar mensaje si es válido
                    $('#mensajeRentabilidad').html('');

                    // Restaurar el botón a su estado normal
                    $('#modelo-listo')
                        .removeClass('btn-primary')
                        .addClass('btn-success')
                        .html('<i class="fa fa-thumbs-up fa-lg"></i> Guardar Modelo');
                }

            });

            // Lógica para checkboxes de capacitador
            $('#capacitadorInterno').on('change', function() {
                if ($(this).is(':checked')) {
                    $('#capacitadorPagadoAnexo').prop('checked', false);
                    $('#pagoPorHoraAlPSC').val(0);
                    $('#costoTotalDelPSC').val(0);
                }
                $('#nuevoModeloForm').trigger('input'); // Recalcular
            });

            $('#capacitadorPagadoAnexo').on('change', function() {
                if ($(this).is(':checked')) {
                    $('#capacitadorInterno').prop('checked', false);
                }
                $('#nuevoModeloForm').trigger('input'); // Recalcular
            });

            $('#pagoPorHoraAlPSC').on('input', function() {
                if ($(this).val() > 0) {
                    $('#capacitadorInterno').prop('checked', false);
                    $('#capacitadorPagadoAnexo').prop('checked', false);
                }
                // No necesitamos trigger input aquí porque ya estamos en un evento input que burbujea o se maneja
            });

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

            // Función de validación
            function validateForm() {
                let isValid = true;
                let requiredFields = [
                    { selector: '#numeroDeCapacitandos', message: 'Ingrese el número de capacitandos.' },
                    { selector: '#ingresoPorCapacitando', message: 'Ingrese el ingreso por capacitando.' },
                    { selector: '#numeroDeMadres', message: 'Ingrese el número de madres.' },
                    { selector: '#ingresoPorMadre', message: 'Ingrese el ingreso por madre.' },
                    { selector: '#numeroExentosDePago', message: 'Ingrese el número de exentos.' },
                    { selector: '#ingresoPorExentoDePago', message: 'Ingrese el ingreso por exento.' },
                    { selector: '#horasDelCurso', message: 'Ingrese las horas del curso.' },
                    { selector: '#pagoPorHoraAlPSC', message: 'Ingrese el pago por hora.' },
                    { selector: '#costoPorConstancia', message: 'Ingrese el costo por constancia.' },
                    { selector: '#otrosGastos', message: 'Ingrese otros gastos (o 0).' }
                ];

                let firstInvalid = null;

                requiredFields.forEach(function(field) {
                    let $input = $(field.selector);
                    let val = $input.val();
                    
                    // Reset previous validation
                    $input.removeClass('is-invalid');
                    $input.siblings('.invalid-feedback').text('');

                    if (val === '' || val === null || isNaN(parseFloat(val))) {
                        $input.addClass('is-invalid');
                        $input.siblings('.invalid-feedback').text(field.message);
                        isValid = false;
                        
                        if (!firstInvalid) {
                            firstInvalid = $input;
                        }
                    }
                });

                if (!isValid && firstInvalid) {
                    firstInvalid.focus();
                    // No alert, just focus and inline errors
                }

                // Validar que no esté todo en ceros
                if (isValid) {
                    var totalCap = parseFloat($('#numeroTotalDeCapacitandos').val()) || 0;
                    var horas = parseFloat($('#horasDelCurso').val()) || 0;

                    if (totalCap <= 0 && horas <= 0) {
                        $('#emptyModelModal').modal('show');
                        isValid = false;
                    }
                }

                return isValid;
            }

            // 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

                var accion = $(this).val(); // 'borrador' o 'listo'
                var form = $('#nuevoModeloForm');

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

                // Realizar chequeo de duplicados
                $.ajax({
                    url: '{{ route("checkDuplicate") }}',
                    method: 'POST',
                    data: form.serialize(),
                    success: function(response) {
                        if (response.exists) {
                            // Mostrar modal con información del duplicado
                            $('#dup_clave').text(response.model.mod_clave);
                            $('#dup_ingresoCap').text('$ ' + parseFloat(response.model.mod_costo_capacitando).toFixed(2));
                            $('#dup_numMadres').text(response.model.mod_numero_madres_solteras);
                            $('#dup_ingresoMadre').text('$ ' + parseFloat(response.model.mod_costo_madre_soltera).toFixed(2));
                            $('#dup_numExentos').text(response.model.mod_numero_becados);
                            $('#dup_ingresoExento').text('$ ' + parseFloat(response.model.mod_costo_becado).toFixed(2));
                            $('#dup_totalCap').text(response.model.mod_total_capacitandos);
                            $('#dup_horas').text(response.model.mod_horas);
                            $('#dup_pagoHora').text('$ ' + parseFloat(response.model.mod_hora_instructor).toFixed(2));
                            $('#dup_costoConstancia').text('$ ' + parseFloat(response.model.mod_costo_constancia).toFixed(2));
                            $('#dup_otrosGastos').text('$ ' + parseFloat(response.model.mod_otros_gastos).toFixed(2));

                            $('#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?');
                                
                                // Guardar la 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.');
                    }
                });
            });

            // Manejar clic en el botón de confirmar envío del modal
            $('#confirmarEnvioBtn').on('click', function() {
                var accion = $(this).data('accion');
                var form = $('#nuevoModeloForm');

                // Agregar el campo 'accion' al formulario y enviar
                $('<input>').attr({
                    type: 'hidden',
                    name: 'accion',
                    value: accion
                }).appendTo(form);
                
                form.submit();
            });

        });
    </script>
@endpush