@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</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 modelos de negocio </h4>
                            @puede('Modelos de Negocios', 'alta_modelo_negocio')
                                <a href="{{ route('modeloCreate') }}" class="btn btn-primary">+ Nuevo Modelo de Negocios</a>
                            @endpuede
                        </div>

                        <div class="card-body pb-0">
                            <div class="d-flex justify-content-end">
                                <button type="button" class="btn btn-outline-secondary btn-sm" id="btnLimpiarFiltros">
                                    <i class="fa fa-undo"></i> Limpiar Filtros
                                </button>
                            </div>
                        </div>

                        <script>
                            document.addEventListener('DOMContentLoaded', function() {
                                $('#btnLimpiarFiltros').on('click', function() {
                                    $('.filtro-busqueda').val('');
                                    $('#modelosDeNegocioTable').DataTable().draw();
                                });
                            });
                        </script>


                        <div class="card-body">
                            <!-- Filtros de búsqueda -->
                            <div class="row mb-3 justify-content-end">
                                <div class="col-md-2 mb-2">
                                    <label for="numeroDeCapacitandos" class="form-label fw-bold"># de Capacitandos</label>
                                    <input type="number" class="form-control filtro-busqueda" id="numeroDeCapacitandos" placeholder="0">
                                </div>
                                <div class="col-md-2 mb-2">
                                    <label for="ingresoPorCapacitando" class="form-label fw-bold">$ por Capacitando</label>
                                    <input type="number" class="form-control filtro-busqueda" id="ingresoPorCapacitando" placeholder="0">
                                </div>
                                <div class="col-md-2 mb-2">
                                    <label for="horasDelCurso" class="form-label fw-bold"># de Horas</label>
                                    <input type="number" class="form-control filtro-busqueda" id="horasDelCurso" placeholder="0">
                                </div>
                                <div class="col-md-2 mb-2">
                                    <label for="pagoPorHoraAlPSC" class="form-label fw-bold">$ por Hora a PSC</label>
                                    <input type="number" class="form-control filtro-busqueda" id="pagoPorHoraAlPSC" placeholder="0">
                                </div>
                            </div>
                        </div>
                        
                        <div class="card-body pt-2">
                            <div id="responsiveTable_wrapper" class="dataTables_wrapper no-footer">
                                <table id="modelosDeNegocioTable"
                                    class="table table-striped responsive w-100 dataTable no-footer dtr-inline collapsed">
                                    <thead>
                                        <tr>
                                            <!-- <th scope="col">ESTATUS</th> -->
                                            <th scope="col">CLAVE DE MODELO</th>
                                            <th scope="col"># CAP.</th>
                                            <th scope="col">$ x CAP.</th>
                                            <th scope="col">HORAS</th>
                                            <th scope="col">$ x HORA</th>
                                            <th scope="col">PORCENTAJE</th>
                                            <th scope="col"></th>
                                        </tr>
                                    </thead>
                                    <tbody>

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


        <!-- End Modal Buscar Modelo de Negocio por monto -->


        <!-- 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">
                        <h5 class="modal-title" id="verModeloModalLabel">Información Del Modelo De Negocios <span
                                id="ver_modeloClave"></span></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="ver_modeloID" name="ver_modeloID">
                                <input type="hidden" id="ver_porcentaje" name="ver_porcentaje">
                            </div>
                        </div>
                        <div class="row"> <!-- Unidad, Tipo de curso, Cursos de la unidad -->
                            <div class="col-md-4 mb-3 pt-2">
                                <label for="ver_unidad" class="form-label">Unidad ICATEP</label>
                                <span id="ver_unidad"> </span>
                            </div>
                            <div class="col-md-4 mb-3 pt-2">
                                <label for="ver_tipoDeCurso" class="form-label">Tipo de Curso</label>
                                <span id="ver_tipoDeCurso"> </span>
                            </div>
                            <div class="col-md-4 mb-3 pt-2">
                                <label for="ver_cursoEnLaUnidad" class="form-label">Nombre del Curso</label>
                                <span id="ver_cursoEnLaUnidad"> </span>
                            </div>
                        </div>

                        <div class="row">
                            <!-- # capacitandos, $ por capacitando, $ total de ingreso de los capacitandos -->
                            <div class="col-md-4 mb-3 pt-2">
                                <label for="ver_numeroDeCapacitandos" class="form-label">Número De Capacitandos</label>
                                <span id="ver_numeroDeCapacitandos"> </span>
                            </div>
                            <div class="col-md-4 mb-3 pt-2">
                                <label for="ver_ingresoPorCapacitando" class="form-label">Ingreso Por Capacitando</label>
                                <span id="ver_ingresoPorCapacitando"> </span>
                            </div>
                            <div class="col-md-4 mb-3 pt-2">
                                <label for="ver_totalIngresoDeCapacitandos" class="form-label">Total Ingreso De
                                    Capacitandos</label>
                                <span id="ver_totalIngresoDeCapacitandos"> </span>
                            </div>
                        </div>

                        <div class="row"> <!-- # madres, $ por madre, $ total de ingreso de las madres -->
                            <div class="col-md-4 mb-3 pt-2">
                                <label for="ver_numeroDeMadres" class="form-label">Número De Madres</label>
                                <span id="ver_numeroDeMadres"> </span>
                            </div>
                            <div class="col-md-4 mb-3 pt-2">
                                <label for="ver_ingresoPorMadre" class="form-label">Ingreso Por Madre</label>
                                <span id="ver_ingresoPorMadre"> </span>
                            </div>
                            <div class="col-md-4 mb-3 pt-2">
                                <label for="ver_totalIngresoDeMadres" class="form-label">Total De Ingreso De Madres</label>
                                <span id="ver_totalIngresoDeMadres"> </span>
                            </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-3 pt-2">
                                <label for="ver_numeroExentosDePago" class="form-label">Número De Exentos De Pago</label>
                                <span id="ver_numeroExentosDePago"> </span>
                            </div>
                            <div class="col-md-4 mb-3 pt-2">
                                <label for="ver_ingresoPorExentoDePago" class="form-label">Ingreso Por Exento De
                                    Pago</label>
                                <span id="ver_ingresoPorExentoDePago"> </span>
                            </div>
                            <div class="col-md-4 mb-3 pt-2">
                                <label for="ver_totalIngresoDeExentosDePago" class="form-label">Total De Exentos De
                                    Pago</label>
                                <span id="ver_totalIngresoDeExentosDePago"> </span>

                            </div>
                        </div>

                        <div class="row"> <!-- # total de capacitandos, $ ingresos totales del curso -->
                            <div class="col-md-4 mb-3 pt-2">
                                <label for="ver_numeroTotalDeCapacitandos" class="form-label">Número Total De
                                    Capacitandos</label>
                                <span id="ver_numeroTotalDeCapacitandos"> </span>
                            </div>
                            <div class="col-md-4 mb-3 pt-2">
                            </div>
                            <div class="col-md-4 mb-3 pt-2">
                                <label for="ver_totalIngresosDelCurso" class="form-label">Total Ingresos Del Curso</label>
                                <span id="ver_totalIngresosDelCurso"> </span>
                            </div>
                        </div>

                        <div class="row"> <!-- Es capacitador interno ? -->
                            <div class="col-md-4 mb-3 pt-2">
                                <div class="form-check custom-checkbox mb-3 checkbox-primary check-xl">
                                    <input type="checkbox" class="form-check-input" id="ver_capacitadorInterno"
                                        name="capacitadorInterno" value="1">
                                    <label class="form-check-label" for="ver_capacitadorInterno"> Capacitador Interno de
                                        ICATEP</label>
                                </div>
                            </div>

                            <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="ver_capacitadorPagadoAnexo"
                                        name="ver_capacitadorPagadoAnexo" value="1">
                                    <label class="form-check-label" for="ver_capacitadorPagadoAnexo"> Capacitador Pagado
                                        del Anexo</label>
                                </div>
                            </div>
                        </div>

                        <div class="row"> <!-- # de horas, $ pago por hora, $ pago total del instructor -->
                            <div class="col-md-4 mb-3 pt-2">
                                <label for="ver_horasDelCurso" class="form-label">Horas Del Curso</label>
                                <span id="ver_horasDelCurso"> </span>
                            </div>
                            <div class="col-md-4 mb-3 pt-2">
                                <label for="ver_pagoPorHoraAlPSC" class="form-label">Pago Por Hora Al PSC (sin
                                    impuestos)</label>
                                <span id="ver_pagoPorHoraAlPSC"> </span>
                            </div>
                            <div class="col-md-4 mb-3 pt-2">
                                <label for="ver_costoTotalDelPSC" class="form-label">Costo Total Del PSC</label>
                                <span id="ver_costoTotalDelPSC"> </span>
                            </div>
                        </div>

                        <div class="row"> <!-- $ costo por constancia, $ otros gastos, $ ingreso total -->
                            <div class="col-md-4 mb-3 pt-2">
                                <label for="ver_costoPorConstancia" class="form-label">Costo Por Constancia</label>
                                <span id="ver_costoPorConstancia"> </span>
                            </div>
                            <div class="col-md-4 mb-3 pt-2">
                                <label for="ver_otrosGastos" class="form-label">Otros Gastos</label>
                                <span id="ver_otrosGastos"> </span>
                            </div>
                            <div class="col-md-4 mb-3 pt-2">
                                <label for="ver_ingresoTotal" class="form-label">Ingreso Total</label>
                                <span id="ver_ingresoTotal"> </span>
                            </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-3 pt-2">
                                        <h1 id="ver_rentabilidad" class="text-center">0 %</h1>
                                    </div>
                                </div>
                            </div>
                        </div>

                        @puede('Modelos de Negocios', 'autorizar_modelo_negocio')
                            <div class="row justify-content-center" id="divAutorizaModelo">
                                <div class="col-md mb-3 pt-3 text-center">
                                    <!--<button type="button" class="btn btn-primary" id="ver_autorizarModeloBtn"> Autorizar-->
                                    <button type="button" class="btn btn-primary" id="autorizarModeloBtn"
                                        data-bs-toggle="modal" data-bs-target="#modelos-activados"> Autorizar
                                        Modelo de Negocios </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 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 Modelo en Unidad</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal">
                        </button>
                    </div>
                    <div class="modal-body">
                        <div id="responsiveTable_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="responsiveTable_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">
                            <form method="POST" class="guardar-estatus-unidad" action="" id="autorizarModeloUnidadForm">
                                @csrf
                                <button type="submit" class="btn btn-primary w-30" data-bs-dismiss="modal"
                                    id="ver_autorizarModeloBtn">Guaaaaaaardar</button>
                                <input type="hidden" name="cambiar_status" id="cambiar_status" value="">
                                <input type="hidden" name="idModelo" id="idModelo" value="">
                            </form>    
                             @puede('Modelos de Negocios', 'update_modelo_unidad')
                             <form method="POST" class="guardar-estatus-unidad d-none" action="" id="updateModeloUnidadForm">
                                @csrf
                                <button type="submit" class="btn btn-primary w-30" data-bs-dismiss="modal"
                                   >Guardar</button>
                                <input type="hidden" name="cambiar_status" id="cambiar_status2" value="">
                                <input type="hidden" name="idModelo" id="idModelo2" value="">
                            </form>
                            @endpuede
                        </div>
                    </div>
                </div>
            </div>
        </div>
       

        <!-- Modal autorizar Modelo De Negocios -->
        <div class="modal fade" id="confirmarAutorizacionModal" tabindex="-1"
            aria-labelledby="confirmarAutorizacionModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="confirmarAutorizacionModalLabel">Confirmación de Autorización</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Cerrar"></button>
                    </div>
                    <div class="modal-body text-center" id="confirmarAutorizacionBody">
                        <!-- Aquí cambiaremos el contenido dinámicamente -->
                    </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="confirmarAutorizacionBtn">Confirmar</button>
                    </div>
                </div>
            </div>
        </div>
        <!-- End Modal activar desactivar 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-dialog-centered 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('modeloDestroy') }}" 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 -->

    </div>
@endsection

@push('scripts')
    <script>
        $(document).ready(function() {

            // Tabla Modelos de Negocios
            $('#modelosDeNegocioTable').DataTable({
                ordering: true, // Habilitar ordenamiento
                order: [
                    [0, 'desc']
                ], // Deshabilitar ordenamiento inicial
                language: {
                    url: "https://cdn.datatables.net/plug-ins/1.10.25/i18n/Spanish.json"
                },
                stateSave: false,
                stateDuration: 10000,
                processing: true,
                serverSide: true,

                ajax: {
                    url: "{{ route('loadModelos') }}",
                    type: 'GET',
                    data: function(d) {
                        d.numeroDeCapacitandos = $('#numeroDeCapacitandos').val();
                        d.ingresoPorCapacitando = $('#ingresoPorCapacitando').val();
                        d.numeroDeMadres = $('#numeroDeMadres').val();
                        d.ingresoPorMadre = $('#ingresoPorMadre').val();
                        d.horasDelCurso = $('#horasDelCurso').val();
                        d.pagoPorHoraAlPSC = $('#pagoPorHoraAlPSC').val();
                    },
                    error: function(xhr, error, thrown) {
                        console.error('Error al cargar datos:', xhr.responseText);
                    }
                },

                columnDefs: [{
                    target: 6, // Columna de acciones no ordenable
                    orderable: false,
                    searchable: false
                }],

                columns: [{
                        data: "mod_clave"
                    },
                    {
                        data: "mod_numero_capacitandos"
                    },
                    {
                        data: "mod_costo_capacitando",
                        render: $.fn.dataTable.render.number(',', '.', 2, '$ ')
                    },
                    {
                        data: "mod_horas"
                    },
                    {
                        data: "mod_hora_instructor",
                        render: $.fn.dataTable.render.number(',', '.', 2, '$ ')
                    },
                    {
                        data: "mod_porcentaje"
                    },
                    {
                        data: null,
                        orderable: false,
                        render: function(data) {
                            let botones = '';
                            let classBtnAutorizar = '';
                            let textBtnAutorizar = '';
                            let iconBtnAutorizar = '';
                            let classsBtnActDes = '';
                            let textBtnActDes = '';

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

                            // Clase del botón para autorizar
                            if (data.mod_revisado === 1) {
                                classBtnAutorizar = 'btn btn-success';
                                textBtnAutorizar = 'Autorizado';
                                iconBtnAutorizar = 'fa fa-check';
                            } else if (data.mod_revisado === 0) {
                                classBtnAutorizar = 'btn btn-danger';
                                textBtnAutorizar = 'Pendiente de autorización';
                                iconBtnAutorizar = 'fa fa-hourglass-half';
                            }

                            // 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") {
                                @puede('Modelos de Negocios', 'ver_modelo_negocio')
                                botones = `<button type="button" class="btn ${data.mod_revisado == 1 ? 'btn-success' : 'btn-primary'} shadow btn-xs sharp me-1 verModeloModalBtn" data-id="${data.mod_id}">
                                                    <i class="fa fa-eye" data-bs-toggle="tooltip" title="${data.mod_revisado == 1 ? 'Ver Modelo Autorizado' : 'Ver Modelo sin autorizar'}"></i>
                                                </button>`;
                                @endpuede

                                if (unidadAdmin) {
                                    @puede('Modelos de Negocios', 'autorizar_modelo_negocio')
                                    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('Modelos de Negocios', 'autorizar_modelo_negocio')
                                    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*/
                                    @puede('Modelos de Negocios', 'autorizar_modelo_negocio')
                                    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") {
                                @puede('Modelos de Negocios', 'ver_modelo_negocio')
                                botones = `<button type="button" class="btn ${data.mod_revisado == 1 ? 'btn-success' : 'btn-primary'} shadow btn-xs sharp me-1 verModeloModalBtn" data-id="${data.mod_id}">
                                                <i class="fa fa-eye" data-bs-toggle="tooltip" title="${data.mod_revisado == 1 ? 'Ver Modelo Autorizado' : 'Ver Modelo sin autorizar'}"></i>
                                            </button>`;
                                @endpuede

                                if (unidadAdmin) {
                                    @puede('Modelos de Negocios', 'autorizar_modelo_negocio')
                                    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('Modelos de Negocios', 'autorizar_modelo_negocio')
                                    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*/
                                    @puede('Modelos de Negocios', 'autorizar_modelo_negocio')
                                    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 (esMismaUnidad) {
                                    @puede('Modelos de Negocios', 'alta_modelo_negocio')
                                    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>`;
                                    @endpuede
                                    @puede('Modelos de Negocios', 'eliminar_modelo_negocio')
                                    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 (unidadAdmin) {
                                    @puede('Modelos de Negocios', 'autorizar_modelo_negocio')
                                    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>`;
                                    @endpuede

                                } else {
                                    @puede('Modelos de Negocios', 'ver_modelo_negocio')
                                    botones = `<p>Borrador</p>`;
                                    @endpuede
                                }
                            }
                            if(data.mod_revisado == 1){
                                   botones += `<button type="button" class="btn btn-dark shadow btn-xs sharp me-1" data-id="${data.mod_id}" data-nombre="${data.mod_clave}" data-revisado="${data.mod_revisado}" data-bs-toggle="modal" data-bs-target="#modelos-activados" id="updateModeloUnidad">
                                                        <i class="fa fa-institution" data-bs-toggle="tooltip" aria-label="Activar/Desactivar Modelo en Unidad"></i>
                                                </button>`;

                            }

                            
                               


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

                // ✅ OPTIMIZACIONES DE RENDIMIENTO
                deferRender: true,
                pageLength: 10,
                lengthMenu: [
                    [10, 25, 50, 100],
                    [10, 25, 50, 100]
                ]
            });

            if ($.fn.DataTable.isDataTable('#responsiveTabl')) {
                $('#responsiveTabl').DataTable().destroy();
            }

            //ACTIVAR MODELO EN UNIDAD
            $(document).ready(function() {
                $('#verModeloModal').on('click', '#autorizarModeloBtn', function() {
                    var id = $(this).data('id');
                    var nombreModelo = $(this).data('nombre');
                    $("#st_curso").text(nombreModelo);
                    $('#cambiar_status').val('');
                    $('#idModelo').val(id);
                    $('#autorizarModeloUnidadForm').removeClass('d-none');
                    $('#updateModeloUnidadForm').addClass('d-none');
                    const url_1 = "{{ route('modelosActivosUnidad', ['id' => '_ID']) }}".replace(
                        '_ID',
                        id);

                    $.ajax({
                        url: url_1, // Asegúrate de tener esta ruta definida
                        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" 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" 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");
                            $('#cfp-response-msg').text(
                                'Ocurrió un error al intentar eliminar el CFP.');
                        }
                    });
                });
            });

             //ACTIVAR MODELO EN UNIDAD
            $(document).ready(function() {
                $('#modelosDeNegocioTable').on('click', '#updateModeloUnidad', function() {
                    var id = $(this).data('id');
                    var nombreModelo = $(this).data('nombre');
                    var revisado = $(this).data('revisado');
                    console.log("revisado "+revisado);
                    $('#autorizarModeloUnidadForm').addClass('d-none');
                    $('#updateModeloUnidadForm').removeClass('d-none');
                    $("#st_curso").text(nombreModelo);
                    $('#cambiar_status').val('');
                    $('#idModelo2').val(id);
                    const url_1 = "{{ route('modelosActivosUnidad', ['id' => '_ID']) }}".replace(
                        '_ID',
                        id);

                    $.ajax({
                        url: url_1, // Asegúrate de tener esta ruta definida
                        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" data-id="${item1.uni_id}" data-rev="${revisado}">
                                                <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" data-id="${item2.uni_id}" data-rev="${revisado}">
                                                <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");
                            $('#cfp-response-msg').text(
                                'Ocurrió un error al intentar eliminar el CFP.');
                        }
                    });
                });
            });

            // Event listeners para los filtros
            let timeout = null;
            $('.filtro-busqueda').on('input', function() {
                clearTimeout(timeout);
                timeout = setTimeout(() => {
                    $('#modelosDeNegocioTable').DataTable().ajax.reload();
                }, 400);
            });





            // MODAL PARA ACTIVAR O DESACTIVAR CURSO
            function cambiarStatusCurso(button) {
                if ($(button).hasClass('btn-success')) {
                    $(button).removeClass('btn-success').addClass('btn-danger');
                    $(button).find('i').removeClass('fa-check').addClass('fa-close');
                } else {
                    $(button).removeClass('btn-danger').addClass('btn-success');
                    $(button).find('i').removeClass('fa-close').addClass('fa-check');
                }
                let unidadesStatus = [];
                let modalId = $("#modelos-activados");
                modalId.find('.toggle-status').each(function() {
                    unidadesStatus.push({
                        id: $(this).data('id'),
                        status: $(this).hasClass('btn-success') ? 'activar' : 'desactivar'
                    });
                     
                });

               // let id =  $(this).data('id');
               let estatus = $(button).data('rev');
               
                console.log(estatus);
                if(estatus == '1'){
                    $('#cambiar_status2').val(JSON.stringify(unidadesStatus));
                   //$('#idModelo2').val(id);

                }else{
                    $('#cambiar_status').val(JSON.stringify(unidadesStatus));
                    //$('#idModelo').val(id);
                }
                  
                let a = $('#cambiar_status').val();
                console.log(a);
                $('#accion').val(1);
            }

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



            $(document).ready(function() {
                // Bind al formulario (no al botón) para manejar el submit correctamente
                $('.guardar-estatus-unidad').on('submit', function(e) {
                    e.preventDefault();

                    const $form = $(this);
                    const accion = String($('#accion').val()).trim();
                    let url = "{{ route('activarModeloUnidad') }}";

                    const $btn = $form.find('.guardar-estatus-activacion');
                    $btn.prop('disabled', true);

                    $.ajax({
                        url: url,
                        type: 'POST',
                        data: $form.serialize(),
                        dataType: 'json'
                    }).done(function(response) {
                        if (response.success) {
                            // Mostrar mensaje si existe el contenedor, si no, loguear
                            const $ok = $('#mensaje-confirmacion');
                            if ($ok.length) {
                                $ok.show().text(response.success).delay(4000).fadeOut(
                                    'slow');
                            } else {
                                console.log(response.success);
                            }
                        }
                    }).fail(function(xhr) {
                        const msg = xhr.responseJSON && xhr.responseJSON.error ? xhr
                            .responseJSON
                            .error : 'Ocurrió un error';
                        const $err = $('#mensaje-error');
                        if ($err.length) {
                            $err.show().html(msg).delay(4000).fadeOut('slow');
                        } else {
                            console.error(msg);
                        }
                    }).always(function() {
                        $btn.prop('disabled', false);
                    });
                });
            });


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

                $.ajax({
                    url: '{{ route('modeloShow', ':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_porcentaje').val(data.mod_porcentaje);
                            $('#ver_unidad').text(data.mod_unidad);
                            $('#ver_tipoDeCurso').text(data.mod_tipo);
                            $('#ver_cursoEnLaUnidad').text(data.mod_curso_nombre);

                            let numeroCapacitandos = data.mod_numero_capacitandos || 0;
                            $('#ver_numeroDeCapacitandos').text(numeroCapacitandos);
                            let costoPorCapacitando = data.mod_costo_capacitando || 0;
                            $('#ver_ingresoPorCapacitando').text(Number(costoPorCapacitando)
                                .toLocaleString('es-MX', {
                                    minimumFractionDigits: 2,
                                    maximumFractionDigits: 2
                                }));
                            let ingresoCapacitando = data.mod_ingreso_capacitandos || 0;
                            $('#ver_totalIngresoDeCapacitandos').text(Number(ingresoCapacitando)
                                .toLocaleString('es-MX', {
                                    minimumFractionDigits: 2,
                                    maximumFractionDigits: 2
                                }));
                            let numeroMadresSolteras = data.mod_numero_madres_solteras || 0;
                            $('#ver_numeroDeMadres').text(numeroMadresSolteras);
                            let costoMadreSoltera = data.mod_costo_madre_soltera || 0;
                            $('#ver_ingresoPorMadre').text(Number(costoMadreSoltera)
                                .toLocaleString('es-MX', {
                                    minimumFractionDigits: 2,
                                    maximumFractionDigits: 2
                                }));
                            let ingresoMadreSolteras = data.mod_ingreso_madres_solteras || 0;
                            $('#ver_totalIngresoDeMadres').text(Number(ingresoMadreSolteras)
                                .toLocaleString('es-MX', {
                                    minimumFractionDigits: 2,
                                    maximumFractionDigits: 2
                                }));
                            let numeroBecados = data.mod_numero_becados || 0;
                            $('#ver_numeroExentosDePago').text(numeroBecados);
                            let costoBecado = data.mod_costo_becado || 0;
                            $('#ver_ingresoPorExentoDePago').text(Number(costoBecado)
                                .toLocaleString('es-MX', {
                                    minimumFractionDigits: 2,
                                    maximumFractionDigits: 2
                                }));
                            let ingresoBecados = data.mod_ingreso_becados || 0;
                            $('#ver_totalIngresoDeExentosDePago').text(Number(ingresoBecados)
                                .toLocaleString('es-MX', {
                                    minimumFractionDigits: 2,
                                    maximumFractionDigits: 2
                                }));
                            let totalCapacitandos = data.mod_total_capacitandos || 0;
                            $('#ver_numeroTotalDeCapacitandos').text(totalCapacitandos);
                            let ingresoCurso = data.mod_ingreso_curso || 0;
                            $('#ver_totalIngresosDelCurso').text(Number(ingresoCurso)
                                .toLocaleString('es-MX', {
                                    minimumFractionDigits: 2,
                                    maximumFractionDigits: 2
                                }));
                            $('#ver_capacitadorInterno').prop('checked', data
                                .mod_instructor_interno == 1);
                            $('#ver_capacitadorPagadoAnexo').prop('checked', data
                                .mod_instructor_anexo == 1);
                            $('#ver_horasDelCurso').text(data.mod_horas);
                            $('#ver_pagoPorHoraAlPSC').text(data.mod_hora_instructor);
                            let costoInstructor = data.mod_costo_instructor || 0;
                            $('#ver_costoTotalDelPSC').text(Number(costoInstructor)
                                .toLocaleString('es-MX', {
                                    minimumFractionDigits: 2,
                                    maximumFractionDigits: 2
                                }));
                            $('#ver_costoPorConstancia').text(data.mod_costo_constancia);
                            $('#ver_otrosGastos').text(data.mod_otros_gastos);
                            let ingresoTotal = data.mod_ingreso_total || 0;
                            $('#ver_ingresoTotal').text(Number(ingresoTotal).toLocaleString(
                                'es-MX', {
                                    minimumFractionDigits: 2,
                                    maximumFractionDigits: 2
                                }));
                            $('#ver_rentabilidad').text(data.mod_porcentaje + ' %');
                            // End populate the modal fields
                            // Mostrar u ocultar el botón de autorizar según el estado
                            if (data.mod_revisado === 0) {
                                @puede('Modelos de Negocios', 'autorizar_modelo_negocio')
                                $('#divAutorizaModelo').show();
                                if (data.mod_porcentaje < 55) {
                                    // ver_autorizarModeloBtn
                                    $('#ver_autorizarModeloBtn')
                                        .removeClass('btn-primary')
                                        .addClass('btn-success')
                                        .html(
                                            '<i class="fa fa-shield-keyhole fa-lg"></i> Autorizar Modelo con CLAVE'
                                        );
                                } else {
                                    $('#ver_autorizarModeloBtn')
                                        .removeClass('btn-success')
                                        .addClass('btn-primary')
                                        .html(
                                            '<i class="fa fa-check fa-lg"></i> Autorizar Modelo'
                                        );
                                }
                                @endpuede
                                $('#autorizarModeloBtn').data('id', data.mod_id);
                                $('#autorizarModeloBtn').data('nombre', data.mod_clave);
                                 $('#autorizarModeloBtn').data('revisado', data.mod_revisado);

                            } else {
                                $('#divAutorizaModelo').hide();
                            }



                            // 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('modeloUpdateStatus') }}",
                    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
                            $('#modelosDeNegocioTable').DataTable().ajax.reload(null, false);
                        }
                    },
                    error: function(xhr) {
                        alert("Ocurrió un error al actualizar el estatus.");
                    }
                });
            });

            // Click en el botón de Autorizar Modelo
            $('#ver_autorizarModeloBtn').on('click', function() {
                let porcentaje = parseFloat($('#ver_porcentaje').val()) || 0;
                let modalBody = $('#confirmarAutorizacionBody');
                modalBody.empty(); // Limpia contenido previo

                if (porcentaje < 55) {
                    modalBody.html(`
                        <p>Para autorizar el Modelo de Negocios es necesario confirmar con la <strong>CLAVE del Director</strong>.</p>
                        <div class="mb-3">
                            <input type="password" class="form-control" id="claveDirector" name="claveDirector" placeholder="Ingrese clave">
                        </div>
                        <div id="mensajeClave" class="text-danger"></div>
                    `);
                } else {
                    modalBody.html(`
                        <p>¿Confirma la autorización del modelo de negocios?</p>
                        <div id="mensajeClave" class="text-danger"></div>
                    `);
                }

                // Mostrar el modal de confirmación
                $('#confirmarAutorizacionModal').modal('show');
            });

            // Click en el botón de Confirmar dentro del modal
            $('#confirmarAutorizacionBtn').on('click', function() {
                let porcentaje = parseFloat($('#ver_porcentaje').val()) || 0;
                let clave = $('#claveDirector').val() || '';
                let idModelo = $('#ver_modeloID').val();

                // Construir datos para AJAX
                let data = {
                    id: idModelo,
                    clave: clave,
                    porcentaje: porcentaje,
                    _token: '{{ csrf_token() }}'
                };

                $.ajax({
                    url: '{{ route('modeloUpdateAutorizar') }}', // Ruta en tu controlador
                    type: 'POST',
                    data: data,
                    success: function(response) {
                        if (response.success) {
                            $('#confirmarAutorizacionModal').modal('hide');
                            // alert('Modelo autorizado correctamente.');
                            // Aquí puedes recargar la tabla o actualizar el modal
                            $('#modelosDeNegocioTable').DataTable().ajax.reload(null, false);
                            $('#verModeloModal').modal('hide');
                        } else {
                            $('#mensajeClave').text(response.message);
                        }
                    },
                    error: function() {
                        $('#mensajeClave').text('Ocurrió un error en la solicitud.');
                    }
                });
            });

        });
    </script>
@endpush