@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">
                        <h4>Modelo de Negocios de Certificaciones</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('dashboard') }}" 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">
                <div class="col-xl-12 col-xxl-12 col-lg-12 col-md-12 col-sm-12">
                    <div class="card">
                        <div class="card-header">
                            <h4 class="card-titles">Lista de certificaciones </h4>
                            @puede('MN de Certificaciones', 'alta_certificacion')
                                <a href="{{ route('certificacionModeloCreate') }}" class="btn btn-primary">+ Nuevo Modelo de Negocios para Certificación</a>
                            @endpuede
                        </div>
                        <div class="card-body pt-2">
                            <div id="responsiveTable_wrapper" class="dataTables_wrapper no-footer">
                                <table  id="certificacionesModelosDeNegocioTable" class="table table-striped responsive w-100 dataTable no-footer dtr-inline collapsed">
                                    <thead>
                                        <tr>
                                            <th scope="col">CLAVE DE MODELO</th>
                                            <th scope="col"># DE CAPACITANDOS</th>
                                            <th scope="col">$ X CAPACITANDO</th>
                                            <th scope="col">HORAS</th>
                                            <th scope="col">TIPO DE CURSO</th>
                                            <th scope="col"></th>
                                        </tr>
                                    </thead>
                                    <tbody>

                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
			</div>
		</div>

        <!-- Modal Ver Modelo De Negocios -->
        <div class="modal fade" id="verModeloModal" data-bs-keyboard="false" tabindex="-1" aria-labelledby="verModeloModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-xl">

                <div class="modal-content">
                    <div class="modal-header bg-info text-white">
                        <h5 class="modal-title" id="verModeloModalLabel">Información Del Modelo De Negocios</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>

                    <div class="modal-body">
                        <div class="row"> <!-- 1 -->
                            <div class="col"><input type="hidden" id="verModeloID" name="id"></div>
                        </div>

                        <div class="row" id="cardEvaluacion" style="display: none;"><!-- 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="ver_numeroDeCapacitandos" class="form-label">No. de Capacitandos a Evaluar </label>
                                                <span id="ver_numeroDeCapacitandos"> </span>
                                            </div>
                                            <div class="col-md-2 mb-2 pt-1">
                                                <label for="ver_costoDeCapacitacion" class="form-label">Costo de Capacitación </label>
                                                <span id="ver_costoDeCapacitacion"> </span>
                                            </div>
                                            <div class="col-md-2 mb-2 pt-1">
                                                <label for="ver_costoDeEvaluacion" class="form-label">Costo de la Evaluación </label>
                                                <span id="ver_costoDeEvaluacion"> </span>
                                            </div>
                                            <div class="col-md-2 mb-2 pt-1">
                                                <label for="ver_costoDelCertificado" class="form-label">Costo del Certificado </label>
                                                <span id="ver_costoDelCertificado"> </span>
                                            </div>
                                            <div class="col-md-2 mb-2 pt-1">
                                                <label for="ver_totalDeEvaluacion" class="form-label">Total de Evaluación </label>
                                                <span id="ver_totalDeEvaluacion"> </span>
                                            </div>
                                        </div>
                                        <div class="row"> <!-- # capacitandos, $ por capacitando, $ evaluacion,            , $ total evaluación -->
                                            <div class="col-md-2 mb-2 pt-1">
                                                <label for="ver_numeroDeCapacitandos2" class="form-label">No. de Capacitandos a Evaluar </label>
                                                <span id="ver_numeroDeCapacitandos2"> </span>
                                            </div>
                                            <div class="col-md-2 mb-2 pt-1">
                                                <label for="ver_horasDeEvaluacion" class="form-label">Horas de Evaluación </label>
                                                <span id="ver_horasDeEvaluacion"> </span>
                                            </div>
                                            <div class="col-md-2 mb-2 pt-1">
                                                <label for="ver_pagoAPSC" class="form-label">Pago al PSC </label>
                                                <span id="ver_pagoAPSC"> </span>
                                            </div>
                                            <div class="col-md-2 mb-2 pt-1">
                                                &nbsp;
                                            </div>
                                            <div class="col-md-2 mb-2 pt-1">
                                                <label for="ver_gastosConImpuestos" class="form-label">Gastos (CON impuestos) </label>
                                                <span id="ver_gastosConImpuestos"> </span>
                                            </div>
                                        </div>
                                        <div class="row"> <!-- # capacitandos, $ por capacitando, $ evaluacion,            , $ total evaluación -->
                                            <div class="col-md-2 mb-2 pt-1">
                                                <label for="ver_numeroDeCapacitandos3" class="form-label">No. de Capacitandos a Evaluar </label>
                                                <span id="ver_numeroDeCapacitandos3"> </span>
                                            </div>
                                            <div class="col-md-2 mb-2 pt-1">
                                                <label for="ver_costoCertificadoICATEP" class="form-label">Costo de Certificado a ICATEP </label>
                                                <span id="ver_costoCertificadoICATEP"> </span>
                                            </div>
                                            <div class="col-md-2 mb-2 pt-1">
                                                &nbsp;
                                            </div>
                                            <div class="col-md-2 mb-2 pt-1">
                                                &nbsp;
                                            </div>
                                            <div class="col-md-2 mb-2 pt-1">
                                                <label for="ver_soloGastos" class="form-label">Gastos </label>
                                                <span id="ver_soloGastos"> </span>
                                            </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 la 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="ver_numeroDeCapacitandosRoco" class="form-label">Número de Capacitandos</label>
                                                <span id="ver_numeroDeCapacitandosRoco"> </span>
                                            </div>
                                            <div class="col-md-4 mb-2 pt-1">
                                                <label for="ver_costoPorCapacitandoRoco" class="form-label">Costo por Capacitando </label>
                                                <span id="ver_costoPorCapacitandoRoco"> </span>
                                            </div>
                                             <div class="col-md-4 mb-2 pt-1">
                                                <label for="ver_totalRoco" class="form-label">Total </label>
                                                <span id="ver_totalRoco"> </span>
                                            </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="ver_horasDeEvaluacionRoco" class="form-label">Horas de Evaluación </label>
                                                <span id="ver_horasDeEvaluacionRoco"> </span>
                                            </div>
                                            <div class="col-md-4 mb-2 pt-1">
                                                <label for="ver_pagoAPSCRoco" class="form-label">Pago al PSC </label>
                                                <span id="ver_pagoAPSCRoco"> </span>
                                            </div>
                                            <div class="col-md-4 mb-2 pt-1">
                                                <label for="ver_totalDeEvaluacionRoco" class="form-label">Total de Evaluación </label>
                                                <span id="ver_totalDeEvaluacionRoco"> </span>
                                            </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</h1>
                                    </div>
                                </div>
                            </div>
                        </div>

                        @puede('MN de Certificaciones', 'autorizar_modelo')
                            <div class="row justify-content-center" id="divAutorizaCertificacion">
                                <div class="col-md mb-3 pt-3 text-center">
                                    <button type="button" class="btn btn-primary" id="autorizarCertificacionBtn"
                                        data-bs-toggle="modal" data-bs-target="#modelos-activados"> Autorizar
                                        Certificación </button>
                                </div>
                            </div>
                        @endpuede

                    </div>

                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
                    </div>
                </div>
            </div>
        </div>
        <!-- End Modal Ver Modelo De Negocios -->

        <!-- Modal activar o desactivar Modelo De Negocios -->
        <div class="modal fade" id="activaDesactivaModelo" data-bs-keyboard="false" tabindex="-1" aria-labelledby="activaDesactivaModeloModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                    <h5 class="modal-title" id="activaDesactivaModeloModalLabel">Confirmar cambio de estatus</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                    <div class="row">
                        <div class="col">¿ Estás seguro de que deseas cambiar el Estatus del Modelo de Negocios ?</div>
                    </div>
                    <div class="row">&nbsp;</div>
                    <div class="row">
                        <div class="col" id="textoActivaDesactivaModeloModal"></div>
                    </div>
                    </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="confirmActivaDesactivaBtn">Aceptar</button>
                    </div>
                </div>
            </div>
        </div>
        <!-- End Modal activar desactivar Modelo De Negocios -->

        <!-- Modal Eliminar Modelo De Negocios -->
        <div class="modal fade" id="eliminarModeloDeNegocios" data-bs-keyboard="false" tabindex="-1" aria-labelledby="eliminarModeloDeNegociosLabel" aria-hidden="true">
            <div class="modal-dialog modal-lg modal-dialog-centered">
                <div class="modal-content">
                    <div class="modal-header">
                    <h5 class="modal-title" id="eliminarModeloDeNegociosLabel">Eliminar Modelo de Negocios</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <div class="row">&nbsp;</div>
                        <div class="row">
                            <div class="col" id="textoEliminarModeloDeNegocios">
                                <!--  -->
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer  modal-footer-confirm">
                        <button type="button" class="btn btn-primary light" data-bs-dismiss="modal">Cerrar</button>
                        <button type="submit" class="btn btn-danger" id="eliminar" data-bs-toggle="modal"
                        data-bs-target="#confirm-delete">Eliminar</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="modal fade" id="confirm-delete" style="display: none;" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">Confirmar Eliminaci&oacute;n</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal">
                        </button>
                    </div>
                    <div class="modal-footer ">
                        <form action="{{ route('certificacionModeloDestroy') }}" method="post" class="modal-footer delete">
                            @csrf
                            <input type="hidden" name="mod_id" value="" id="mod_id">
                            <button type="button" class="btn btn-primary light" data-bs-dismiss="modal">NO</button>
                            <button type="submit" class="btn btn-danger" data-bs-dismiss="modal">SI</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        <!-- End Modal Eliminar Modelo De Negocios -->

        <!-- MODAL PARA ACTIVAR CURSO EN UNIDAD --->
        <div class="modal fade" id="modelos-activados" tabindex="-1" style="display: none;" aria-modal="true"
            role="dialog" aria-hidden="true">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header bg-primary">
                        <h5 class="modal-title text-white">Activar o Desactivar Certificación en Unidad</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal">
                        </button>
                    </div>
                    <div class="modal-body">
                        <div id="responsiveTableUnidades_wrapper" class="dataTables_wrapper no-footer">
                            <strong class="text-primary" id="st_curso"></strong><br>
                            <table id="responsiveTabl" class="display responsive w-80 dataTable unidades-table"
                                aria-describedby="responsiveTableUnidades_info">
                                <thead>
                                    <tr>
                                        <th width="40%">Unidad</th>
                                        <th width="5%" class="text-center">Status</th>
                                        <th width="40%">Unidad</th>
                                        <th width="5%" class="text-center">Status</th>
                                    </tr>
                                </thead>
                                <tbody>
                                </tbody>
                                <tfoot class="">
                                    <tr>
                                        <th colspan="4" class="border-0 text-center">
                                            <span class="text-success">Activado <i class="fa fa-check"></i>
                                            </span>&nbsp;
                                            <span class="text-danger">Desactivado <i class="fa fa-close"></i></span>
                                        </th>
                                    </tr>
                                </tfoot>
                            </table>
                        </div>
                        <div class="text-danger" id="msg_error_guardar_activar_unidad">
                        </div>
                        <div class="modal-footer">
                            @puede('MN de Certificaciones', 'activar_certificacion')
                            <form method="POST" class="guardar-estatus-unidad" action="" id="activarCertificacionModeloUnidadForm">
                                @csrf
                                <button type="submit" class="btn btn-primary w-30"
                                    id="guardarCertificacionUnidadBtn">Guardar</button>
                                <input type="hidden" name="cambiar_status" id="cambiar_status_cert" value="">
                                <input type="hidden" name="idModelo" id="idModeloCert" value="">
                            </form>
                            @endpuede 
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- End Modal Activar/Desactivar en Unidad -->

	</div>
@endsection

@push('scripts')
    <script>
        $(document).ready(function () {
            // Tabla Modelos de Negocios Certificaciones
            $('#certificacionesModelosDeNegocioTable').DataTable({
                ordering: true, // Habilitar ordenamiento
                order: [], // Deshabilitar ordenamiento inicial
                language: { url: "https://cdn.datatables.net/plug-ins/1.10.25/i18n/Spanish.json" },
                stateSave: false,
                stateDuration: 10000,
                ajax: "{{ route('loadCertificacionesModelos') }}", // Obtener ruta de las certificaciones de modelos
                columnDefs: [
                {
                    // target: 0,
                    // visible: false,
                    // searchable:false,
                }
                ],
                columns: [
                    // {   data: "mod_estatus"             },
                    {   data: "mod_clave"               },
                    {   data: "mod_total_capacitandos"  },
                    {   data: "mod_costo_capacitando"   },
                    {   data: "mod_horas"               },
                    {   data: "mod_tipo"                },
                    {
                        data: null,
                        orderable: false,
                        render: function(data) {
                            let botones = '';
                            let classsBtnActDes   = '';
                            let textBtnActDes     = '';

                            // Generar ruta dinámicamente
                            let urlEdit = "{{ route('certificacionModeloEdit', ['id' => ':id']) }}";
                            urlEdit = urlEdit.replace(':id', data.mod_id);

                            // Clase del botón para activar/desactivar
                            if (data.mod_estatus === "A") {
                                classsBtnActDes   = 'btn btn-success';
                                textBtnActDes     = 'Desactivar';
                            }
                            else if (data.mod_estatus === "I") {
                                classsBtnActDes   = 'btn btn-danger';
                                textBtnActDes     = 'Activar';
                            }

                            // Verificar si es la misma unidad
                            let esMismaUnidad = "{{auth()->user()->usu_unidad_id}}" == data.mod_unidad_id;
                            let unidadAdmin = "{{auth()->user()->usu_unidad_id}}" == 8;

                            if (data.mod_estatus === "A") {
                                // Botón Ver - cambia de color según si está autorizado
                                let eyeBtnClass = data.mod_revisado == 1 ? 'btn-success' : 'btn-primary';
                                let eyeTooltip = data.mod_revisado == 1 ? 'Ver Certificación Autorizada' : 'Ver Certificación sin Autorizar';
                                
                                @puede('MN de Certificaciones','ver_certificacion')
                                botones =  `<button type="button" class="btn ${eyeBtnClass} shadow btn-xs sharp me-1 verModeloModalBtn" data-id="${data.mod_id}" data-revisado="${data.mod_revisado}">
                                                <i class="fa fa-eye" data-bs-toggle="tooltip" title="${eyeTooltip}"></i>
                                            </button>`;
                                @endpuede
                                if (unidadAdmin) {
                                            @puede('MN de Certificaciones', 'editar_certificacion')
                                                botones += `<a href="${urlEdit}" class="btn btn-primary shadow btn-xs sharp me-1">
                                                    <i class="fa fa-edit" data-bs-toggle="tooltip" title="Editar"></i>
                                                </a>`;
                                            @endpuede 
                                            // @puede('MN de Certificaciones', 'activar_certificacion')
                                            // botones += `<button type="button" class="${classsBtnActDes} shadow btn-xs sharp me-1 cambiarEstatusBtn" data-id="${data.mod_id}" data-estatus="${data.mod_estatus}">
                                            //     <i class="fa fa-record-vinyl" data-bs-toggle="tooltip" title="${textBtnActDes}"></i>
                                            // </button>`;
                                            // @endpuede 
                                            if(data.mod_revisado == 1){
                                                botones += `<button type="button" class="btn btn-dark shadow btn-xs sharp me-1 updateModeloUnidadBtn" data-id="${data.mod_id}" data-nombre="${data.mod_clave}" data-revisado="${data.mod_revisado}" data-bs-toggle="modal" data-bs-target="#modelos-activados">
                                                        <i class="fa fa-institution" data-bs-toggle="tooltip" title="Unidades Autorizadas"></i>
                                                </button>`;

                                            }
                                            @puede('MN de Certificaciones', 'eliminar_certificacion_operativo')
                                                botones += `<button type="button" class="btn btn-danger shadow btn-xs sharp me-1 eliminarModeloModalBtn" data-id="${data.mod_id}">
                                                    <i class="fa fa-trash" data-bs-toggle="tooltip" title="Eliminar"></i>
                                                </button>`;
                                            @endpuede
                                }
                            } else if (data.mod_estatus === "I") {
                                // Botón Ver - cambia de color según si está autorizado
                                let eyeBtnClass = data.mod_revisado == 1 ? 'btn-success' : 'btn-primary';
                                let eyeTooltip = data.mod_revisado == 1 ? 'Ver Certificación Autorizada' : 'Ver Certificación sin Autorizar';
                                
                                botones =  `<button type="button" class="btn ${eyeBtnClass} shadow btn-xs sharp me-1 verModeloModalBtn" data-id="${data.mod_id}" data-revisado="${data.mod_revisado}">
                                                <i class="fa fa-eye" data-bs-toggle="tooltip" title="${eyeTooltip}"></i>
                                            </button>`;
                                if (unidadAdmin) {
                                           @puede('MN de Certificaciones', 'editar_certificacion')
                                                botones += `<a href="${urlEdit}" class="btn btn-primary shadow btn-xs sharp me-1">
                                                    <i class="fa fa-edit" data-bs-toggle="tooltip" title="Editar"></i>
                                                </a>`;
                                            @endpuede 
                                            // @puede('MN de Certificaciones', 'activar_certificacion')
                                            //     botones += `<button type="button" class="${classsBtnActDes} shadow btn-xs sharp me-1 cambiarEstatusBtn" data-id="${data.mod_id}" data-estatus="${data.mod_estatus}">
                                            //         <i class="fa fa-record-vinyl" data-bs-toggle="tooltip" title="${textBtnActDes}"></i>
                                            //     </button>`;
                                            // @endpuede 

                                            if(data.mod_revisado == 1){
                                                botones += `<button type="button" class="btn btn-dark shadow btn-xs sharp me-1 updateModeloUnidadBtn" data-id="${data.mod_id}" data-nombre="${data.mod_clave}" data-revisado="${data.mod_revisado}" data-bs-toggle="modal" data-bs-target="#modelos-activados">
                                                        <i class="fa fa-institution" data-bs-toggle="tooltip" title="Unidades Autorizadas"></i>
                                                </button>`;

                                            }
                                        
                                            @puede('MN de Certificaciones', 'eliminar_certificacion_operativo')
                                                botones += `<button type="button" class="btn btn-danger shadow btn-xs sharp me-1 eliminarModeloModalBtn" data-id="${data.mod_id}">
                                                    <i class="fa fa-trash" data-bs-toggle="tooltip" title="Eliminar"></i>
                                                </button>`;
                                            @endpuede 
                                } 
                            }
                            
                            else if (data.mod_estatus === "B") {

                                if(data.mod_revisado == 1){
                                   botones += `<button type="button" class="btn btn-dark shadow btn-xs sharp me-1 updateModeloUnidadBtn" data-id="${data.mod_id}" data-nombre="${data.mod_clave}" data-revisado="${data.mod_revisado}" data-bs-toggle="modal" data-bs-target="#modelos-activados">
                                                        <i class="fa fa-institution" data-bs-toggle="tooltip" title="Unidades Autorizadas"></i>
                                                </button>`;

                            }

                                if (esMismaUnidad)  {
                                    botones =  `<a href="${urlEdit}" class="btn btn-light shadow btn-xs sharp me-1">
                                                    <i class="fa fa-edit" data-bs-toggle="tooltip" title="Borrador"></i>
                                                </a>
                                                <button type="button" class="btn btn-danger shadow btn-xs sharp me-1 eliminarModeloModalBtn" data-id="${data.mod_id}">
                                                    <i class="fa fa-trash" data-bs-toggle="tooltip" title="Eliminar"></i>
                                                </button>`;
                                }
                                else if (unidadAdmin)  {
                                    botones =  `<a href="${urlEdit}" class="btn btn-light shadow btn-xs sharp me-1">
                                                    <i class="fa fa-edit" data-bs-toggle="tooltip" title="Borrador"></i>
                                                </a>
                                                <!-- button type="button" class="btn btn-danger shadow btn-xs sharp me-1 eliminarModeloModalBtn" data-id="${data.mod_id}">
                                                    <i class="fa fa-trash" data-bs-toggle="tooltip" title="Eliminar"></i>
                                                </button-->`;
                                }
                            } else {
                                botones = `<p>Borrador</
                                >`;
                            }
                            

                            return `<div class="d-flex">${botones}</div>`;
                        }
                    }
                ]
            });

            // Si se ha presionado el boton de ver modelo modal
            $(document).on('click', '.verModeloModalBtn', function () {
                let modeloId = $(this).data('id');

                $.ajax({
                    url: '{{ route("certificacionModeloShow", ":id") }}'.replace(':id', modeloId),
                    method: 'GET',
                    success: function (response) {
                        if (response.success) {
                            let data = response.data;
                            // Populate the modal fields
                                $('#ver_modeloClave').text(data.mod_clave);
                                $('#ver_modeloID').val(data.mod_id);
                                $('#ver_unidad').text(data.mod_unidad);
                                $('#ver_tipoDeCurso').text(data.mod_tipo);
                                $('#ver_cursoEnLaUnidad').text(data.mod_curso_nombre);
                                console.log('Curso en la unidad:', data);

                                // Show/Hide cards based on model type and populate fields
                                if (data.mod_tipo === 'EVA') {
                                    // Show Evaluacion card and hide Roco card
                                    $('#cardEvaluacion').show();
                                    $('#cardRoco').hide();

                                    // Populate Evaluacion fields
                                    $('#ver_numeroDeCapacitandos').text(data.mod_numero_capacitandos);
                                    let costoCapacitacion = data.mod_costo_capacitacion;
                                    $('#ver_costoDeCapacitacion').text(Number(costoCapacitacion).toLocaleString('es-MX', { minimumFractionDigits: 2, maximumFractionDigits: 2 }));
                                    let costoEvaluacion = data.mod_costo_evaluacion;
                                    $('#ver_costoDeEvaluacion').text(Number(costoEvaluacion).toLocaleString('es-MX', { minimumFractionDigits: 2, maximumFractionDigits: 2 }));
                                    let costoCertificado = data.mod_costo_certificado;
                                    $('#ver_costoDelCertificado').text(Number(costoCertificado).toLocaleString('es-MX', { minimumFractionDigits: 2, maximumFractionDigits: 2 }));
                                    let totalEvaluacion = data.mod_total_eva_rco;
                                    $('#ver_totalDeEvaluacion').text(Number(totalEvaluacion).toLocaleString('es-MX', { minimumFractionDigits: 2, maximumFractionDigits: 2 }));
                                    $('#ver_numeroDeCapacitandos2').text(data.mod_numero_capacitandos);
                                    $('#ver_horasDeEvaluacion').text(data.mod_horas);
                                    let pagoAPSC = data.mod_hora_instructor;
                                    $('#ver_pagoAPSC').text(Number(pagoAPSC).toLocaleString('es-MX', { minimumFractionDigits: 2, maximumFractionDigits: 2 }));
                                    let constoInstructor = data.mod_costo_instructor;
                                    $('#ver_gastosConImpuestos').text(Number(constoInstructor).toLocaleString('es-MX', { minimumFractionDigits: 2, maximumFractionDigits: 2 }));
                                    $('#ver_numeroDeCapacitandos3').text(data.mod_numero_capacitandos);
                                    let costoCertificadoICATEP = data.mod_costo_certificado_icatep;
                                    $('#ver_costoCertificadoICATEP').text(Number(costoCertificadoICATEP).toLocaleString('es-MX', { minimumFractionDigits: 2, maximumFractionDigits: 2 }));
                                    let otrosGastos = data.mod_otros_gastos;
                                    $('#ver_soloGastos').text(Number(otrosGastos).toLocaleString('es-MX', { minimumFractionDigits: 2, maximumFractionDigits: 2 }));
                                    let ingresoTotal = data.mod_ingreso_total;
                                    $('#rentabilidad').text(Number(ingresoTotal).toLocaleString('es-MX', { minimumFractionDigits: 2, maximumFractionDigits: 2 }));
                                    // End Populate Evaluacion fields

                                } else if (data.mod_tipo === 'RCO') {
                                    // Show Roco card and hide Evaluacion card
                                    $('#cardEvaluacion').hide();
                                    $('#cardRoco').show();

                                    // Populate Roco fields
                                    $('#ver_numeroDeCapacitandosRoco').text(data.mod_numero_capacitandos);
                                    $('#ver_horasDeEvaluacionRoco').text(data.mod_horas);
                                    let pagoAPSCRoco = data.mod_hora_instructor;
                                    $('#ver_pagoAPSCRoco').text(Number(pagoAPSCRoco).toLocaleString('es-MX', { minimumFractionDigits: 2, maximumFractionDigits: 2 }));
                                    let costoInstructorRoco = data.mod_costo_instructor;
                                    $('#ver_totalDeEvaluacionRoco').text(Number(costoInstructorRoco).toLocaleString('es-MX', { minimumFractionDigits: 2, maximumFractionDigits: 2 }));
                                    let otrosGastosRoco = data.mod_otros_gastos;
                                    $('#ver_otrosGastosRoco').text(Number(otrosGastosRoco).toLocaleString('es-MX', { minimumFractionDigits: 2, maximumFractionDigits: 2 }));
                                    let costoCertificadoRoco = data.mod_costo_certificado;
                                    $('#ver_costoDelCertificadoRoco').text(Number(costoCertificadoRoco).toLocaleString('es-MX', { minimumFractionDigits: 2, maximumFractionDigits: 2 }));
                                    let totalGastosRoco = data.mod_total_gastos_eva_rco;
                                    $('#ver_totalGastosRoco').text(Number(totalGastosRoco).toLocaleString('es-MX', { minimumFractionDigits: 2, maximumFractionDigits: 2 }));
                                    let costoPorCapacitandoRoco = data.mod_costo_capacitando;
                                    $('#ver_costoPorCapacitandoRoco').text(Number(costoPorCapacitandoRoco).toLocaleString('es-MX', { minimumFractionDigits: 2, maximumFractionDigits: 2 }));
                                    $('#ver_costoDelCertificadoRoco2').text(Number(costoCertificadoRoco).toLocaleString('es-MX', { minimumFractionDigits: 2, maximumFractionDigits: 2 }));
                                    $('#ver_numeroDeCapacitandosRoco2').text(data.mod_numero_capacitandos);
                                    
                                    $('#ver_totalRoco').text(Number(costoPorCapacitandoRoco).toLocaleString('es-MX', { minimumFractionDigits: 2, maximumFractionDigits: 2 }));
                                    let ingresoTotalRoco = data.mod_ingreso_total;
                                    $('#rentabilidad').text(Number(ingresoTotalRoco).toLocaleString('es-MX', { minimumFractionDigits: 2, maximumFractionDigits: 2 }));
                                    // End Populate Roco fields
                                }
                            // End Populate the modal fields
                            
                            // Show/hide authorization button based on mod_revisado
                            if (data.mod_revisado == 1) {
                                $('#divAutorizaCertificacion').hide();
                            } else {
                                $('#divAutorizaCertificacion').show();
                                // Store mod_id and mod_clave for authorization button
                                $('#autorizarCertificacionBtn').data('id', data.mod_id);
                                $('#autorizarCertificacionBtn').data('nombre', data.mod_clave);
                            }
                            
                            // Show the modal
                            $('#verModeloModal').modal('show');
                        }
                    },
                    error: function () {
                        alert('Error al cargar el modelo de negocio.');
                    }
                });
            });

            // Si se ha presionado el boton de eliminar modelo modal
            $(document).on('click', '.eliminarModeloModalBtn', function () {
                let modeloId = $(this).data('id');

                // Actualiza el texto del modal con la información del modelo
                $.ajax({
                    url: '{{ route("validateDestroyModelo") }}',
                    method: 'POST',
                    data: {
                        _token: '{{ csrf_token() }}',
                        mod_id: modeloId
                    },
                    success: function (response) {
                        if (response.success) {
                            // response.message trae el mensaje personalizado del controlador: "¿ Estas seguro de eliminar el model de negocios [nombre] ?"
                            $('#textoEliminarModeloDeNegocios').html(response.message);
                            // agregar el boton de eliminar si no existe
                            if ($('#eliminar').length === 0) {
                                $('.modal-footer-confirm').append('<button type="submit" class="btn btn-danger" id="eliminar" data-bs-toggle="modal" data-bs-target="#confirm-delete">Eliminar</button>');
                            }
                        } else {
                            // response.message trae el mensaje de error personalizado del controlador: "No se puede eliminar el modelo de negocios debido a que está asociado a aulas existentes. [listar aulas]"
                            $('#textoEliminarModeloDeNegocios').html(response.message);
                            // quitar el boton de eliminar
                            $('#eliminar').remove();
                        }
                    },
                    error: function () {
                        $('#textoEliminarModeloDeNegocios').html('Error al validar la eliminación del modelo de negocios.');
                    }
                });

                $('#mod_id').val(modeloId);
                $('#eliminarModeloDeNegocios').modal('show');
            });

            // Variables para el cambio de estatus
            var mod_id = null;
            var nuevo_estatus = null;

            // Al hacer clic en el botón para cambiar estatus
            $(document).on('click', '.cambiarEstatusBtn', function () {
                    mod_id          = $(this).data('id');
                var estatusActual   = $(this).data('estatus');

                // Determina el nuevo estatus
                nuevo_estatus = estatusActual == 'A' ? 'I' : 'A';

                // Actualiza el texto en el modal
                let texto = nuevo_estatus == 'A' 
                    ? 'Se activará el modelo de negocio.' 
                    : 'Se desactivará el modelo de negocio.';
                $('#textoActivaDesactivaModeloModal').text(texto);

                // Muestra el modal
                $('#activaDesactivaModelo').modal('show');
            });

            // Al confirmar el cambio de estatus
            $('#confirmActivaDesactivaBtn').on('click', function () {
                $.ajax({
                    url: "{{ route('certificacionModeloUpdateStatus') }}",
                    type: "POST",
                    data: {
                        _token: "{{ csrf_token() }}",
                        mod_id: mod_id,
                        nuevo_estatus: nuevo_estatus
                    },
                    success: function (response) {
                        if (response.success) {
                            $('#activaDesactivaModelo').modal('hide');
                            // Opcional: mostrar mensaje de éxito con Bootstrap
                            // alert(response.message);

                            // ✅ Opcional: actualizar visualmente sin recargar la página
                            // Ejemplo: cambia el texto del botón
                             $('#certificacionesModelosDeNegocioTable').DataTable().ajax.reload(null, false);
                        }
                    },
                    error: function (xhr) {
                        alert("Ocurrió un error al actualizar el estatus.");
                    }
                });
            });

            // ================== ACTIVAR/DESACTIVAR MODELO EN UNIDAD ==================
            // Al hacer clic en el botón "Autorizar Certificación" dentro del modal Ver Modelo
            $(document).on('click', '#autorizarCertificacionBtn', function() {
                var id = $(this).data('id');
                var nombreModelo = $(this).data('nombre');
                $("#st_curso").text(nombreModelo);
                $('#cambiar_status_cert').val('');
                $('#idModeloCert').val(id);
                const url_1 = "{{ route('certificacionModelosActivosUnidad', ['id' => '_ID']) }}".replace(
                    '_ID',
                    id);

                $.ajax({
                    url: url_1,
                    method: 'GET',
                    dataType: "json",
                    success: function(response) {
                        const data = response.success;
                        let html = '';

                        for (let i = 0; i < data.length; i += 2) {
                            const item1 = data[i];
                            const item2 = data[i + 1];

                            html += `<tr>
                                    <td>${item1.uni_nombre}</td>
                                    <td class="text-center">
                                        <button class="btn ${item1.cur_uni_estatus ? 'btn-success' : 'btn-danger'} shadow btn-xs sharp me-1 toggle-status-cert" data-id="${item1.uni_id}">
                                            <i class="fa ${item1.cur_uni_estatus ? 'fa-check' : 'fa-times'}"></i>
                                        </button>
                                    </td>`;

                            if (item2) {
                                html += `
                                    <td>${item2.uni_nombre}</td>
                                    <td class="text-center">
                                        <button class="btn ${item2.cur_uni_estatus ? 'btn-success' : 'btn-danger'} shadow btn-xs sharp me-1 toggle-status-cert" data-id="${item2.uni_id}">
                                            <i class="fa ${item2.cur_uni_estatus ? 'fa-check' : 'fa-times'}"></i>
                                        </button>
                                    </td>`;
                            } else {
                                html += `<td></td><td></td>`;
                            }

                            html += `</tr>`;
                        }
                        $('#modelos-activados').find('.unidades-table tbody').html(html);

                    },
                    error: function(xhr) {
                        console.log("error");
                        $('#msg_error_guardar_activar_unidad').text('Ocurrió un error al cargar las unidades.');
                    }
                });
            });

            // Al hacer clic en el botón para abrir el modal de activar/desactivar en unidades (desde DataTable)
            $(document).on('click', '.updateModeloUnidadBtn', function() {
                var id = $(this).data('id');
                var nombreModelo = $(this).data('nombre');
                $("#st_curso").text(nombreModelo);
                $('#cambiar_status_cert').val('');
                $('#idModeloCert').val(id);
                const url_1 = "{{ route('certificacionModelosActivosUnidad', ['id' => '_ID']) }}".replace(
                    '_ID',
                    id);

                $.ajax({
                    url: url_1,
                    method: 'GET',
                    dataType: "json",
                    success: function(response) {
                        const data = response.success;
                        let html = '';

                        for (let i = 0; i < data.length; i += 2) {
                            const item1 = data[i];
                            const item2 = data[i + 1];

                            html += `<tr>
                                    <td>${item1.uni_nombre}</td>
                                    <td class="text-center">
                                        <button class="btn ${item1.cur_uni_estatus ? 'btn-success' : 'btn-danger'} shadow btn-xs sharp me-1 toggle-status-cert" data-id="${item1.uni_id}">
                                            <i class="fa ${item1.cur_uni_estatus ? 'fa-check' : 'fa-times'}"></i>
                                        </button>
                                    </td>`;

                            if (item2) {
                                html += `
                                    <td>${item2.uni_nombre}</td>
                                    <td class="text-center">
                                        <button class="btn ${item2.cur_uni_estatus ? 'btn-success' : 'btn-danger'} shadow btn-xs sharp me-1 toggle-status-cert" data-id="${item2.uni_id}">
                                            <i class="fa ${item2.cur_uni_estatus ? 'fa-check' : 'fa-times'}"></i>
                                        </button>
                                    </td>`;
                            } else {
                                html += `<td></td><td></td>`;
                            }

                            html += `</tr>`;
                        }
                        $('#modelos-activados').find('.unidades-table tbody').html(html);

                    },
                    error: function(xhr) {
                        console.log("error");
                        $('#msg_error_guardar_activar_unidad').text('Ocurrió un error al cargar las unidades.');
                    }
                });
            });

            // Función para cambiar el status de una unidad (toggle button)
            function cambiarStatusCursoCert(button) {
                if ($(button).hasClass('btn-success')) {
                    $(button).removeClass('btn-success').addClass('btn-danger');
                    $(button).find('i').removeClass('fa-check').addClass('fa-times');
                } else {
                    $(button).removeClass('btn-danger').addClass('btn-success');
                    $(button).find('i').removeClass('fa-times').addClass('fa-check');
                }
                let unidadesStatus = [];
                let modalId = $("#modelos-activados");
                modalId.find('.toggle-status-cert').each(function() {
                    unidadesStatus.push({
                        id: $(this).data('id'),
                        status: $(this).hasClass('btn-success') ? 'activar' : 'desactivar'
                    });
                });

                $('#cambiar_status_cert').val(JSON.stringify(unidadesStatus));
            }

            $(document).on('click', '.toggle-status-cert', function() {
                cambiarStatusCursoCert(this);
            });

            // Guardar activación de unidades
            $('#activarCertificacionModeloUnidadForm').on('submit', function(e) {
                e.preventDefault();

                const $form = $(this);
                let url = "{{ route('activarCertificacionModeloUnidad') }}";

                const $btn = $form.find('#guardarCertificacionUnidadBtn');
                $btn.prop('disabled', true);

                // Si no se ha seleccionado ninguna unidad, recopilar el estado actual
                if ($('#cambiar_status_cert').val() === '') {
                    let unidadesStatus = [];
                    $('#modelos-activados').find('.toggle-status-cert').each(function() {
                        unidadesStatus.push({
                            id: $(this).data('id'),
                            status: $(this).hasClass('btn-success') ? 'activar' : 'desactivar'
                        });
                    });
                    $('#cambiar_status_cert').val(JSON.stringify(unidadesStatus));
                }

                $.ajax({
                    url: url,
                    type: 'POST',
                    data: $form.serialize(),
                    dataType: 'json'
                }).done(function(response) {
                    if (response.success) {
                        // Cerrar modal y recargar tabla
                        $('#modelos-activados').modal('hide');
                        $('#verModeloModal').modal('hide');
                        $('#certificacionesModelosDeNegocioTable').DataTable().ajax.reload(null, false);
                        console.log(response.success);
                    }
                }).fail(function(xhr) {
                    const msg = xhr.responseJSON && xhr.responseJSON.error ? xhr.responseJSON.error : 'Ocurrió un error';
                    $('#msg_error_guardar_activar_unidad').text(msg);
                }).always(function() {
                    $btn.prop('disabled', false);
                });
            });

        });

    </script>
@endpush