@extends('header_dashboard')
@section('main')

    <!-- INPUT OCULTO MODO DARK -->
    <input type="hidden" @if(!empty(Session::get('modo'))) value="{{Session::get('modo')}}" @endif id="input_session">
   
    <!-- div contenedor de cards principales  -->
    <div class="container-fluid mt-2">
        <div class='row justify-content-center p-2'>
            <div class="col-10 col-sm-6 col-md-4 col-lg-3 col-xl-2 ps-0 pe-2">
                <div role="button" tabindex="0" class="card h-75 mb-3 mt-3 rounded" style="box-shadow: 4px 2px 5px gray">
                    <div class="card-body ps-0 pe-0 pt-3">
                        <div class="col-12 text-center fw-light btn-nav" style="font-size: 16px;">Contratistas</div>
                        <div class="d-flex justify-content-between ms-4 me-4 mt-4" >
                            <div id="loading_con" style="display:none;">
                                <div class="spinner-border text-fidelitas"></div>  
                            </div>   
                            <div class="fw-light btn-nav" id="valor_card_contratista" ></div>
                            <div class="">
                                <i class="bi bi-building" style="color:#35b3ca; font-size: 35px;"></i>
                            </div>
                        </div>
                    </div>
                </div>  
            </div>
            <div class="col-10 col-sm-6 col-md-4 col-lg-3 col-xl-2 ps-0 pe-2">
                <div role="button" tabindex="0" class="card h-75 mb-3 mt-3 rounded" style="box-shadow: 4px 2px 5px gray">
                    <div class="card-body ps-0 pe-0 pt-3">
                        <div class="col-12 text-center fw-light btn-nav" style="font-size: 16px;">Deuda informada</div>
                        <div class="d-flex justify-content-between ms-4 me-4 mt-4" >
                            <div id="loading_deuda" style="display:none;">
                                <div class="spinner-border text-fidelitas"></div>  
                            </div>   
                            <div class="fw-light btn-nav" id="card_deuda_informada" ></div>
                            <div class="">
                                <i class="fa fa-user" style="color:#35b3ca; font-size: 35px;"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-10 col-sm-6 col-md-4 col-lg-3 col-xl-2 ps-0 pe-2">
                <div role="button" tabindex="0" class="card h-75 mb-3 mt-3 rounded" style="box-shadow: 4px 2px 5px gray" >
                    <div class="card-body ps-0 pe-0 pt-3">
                        <div class="col-12 text-center fw-light btn-nav" style="font-size: 16px;">Contingencia</div>
                        <div class="d-flex justify-content-between ms-4 me-4 mt-4" >
                            <div id="loading_contingencia" style="display:none;">
                                <div class="spinner-border text-fidelitas"></div>  
                            </div>   
                            <div class="fw-light btn-nav" id="card_contingencia" ></div>
                            <div class="">
                                <i class="bi bi-diagram-2" style="color:#35b3ca; font-size: 35px;"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-10 col-sm-6 col-md-4 col-lg-3 col-xl-2 ps-0 pe-2">
                <div role="button" tabindex="0" class="card h-75 mb-3 mt-3 rounded" style="box-shadow: 4px 2px 5px gray">
                    <div class="card-body ps-0 pe-0 pt-3">
                        <div class="col-12 text-center fw-light btn-nav" style="font-size: 16px;">Subcontratistas</div>
                        <div class="d-flex justify-content-between ms-4 me-4 mt-4" >
                            <div id="loading_sub" style="display:none;">
                                <div class="spinner-border text-fidelitas"></div>  
                            </div>   
                            <div class="fw-light btn-nav" id="valor_card_subcontratista" ></div>
                            <div class="">
                                <i class="bi bi-diagram-2" style="color:#35b3ca; font-size: 35px;"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-10 col-sm-6 col-md-4 col-lg-3 col-xl-2 ps-0 pe-2">
                <div role="button" tabindex="0" class="card h-75 mb-3 mt-3 rounded" style="box-shadow: 4px 2px 5px gray">
                    <div class="card-body ps-0 pe-0 pt-3">
                        <div class="col-12 text-center fw-light btn-nav" style="font-size: 16px;">Empleados</div>
                        <div class="d-flex justify-content-between ms-4 me-4 mt-4" >
                            <div id="loading_emp" style="display:none;">
                                <div class="spinner-border text-fidelitas"></div>  
                            </div>   
                            <div class="fw-light btn-nav" id="valor_card_empleados" ></div>
                            <div class="">
                                <i class="fa fa-user" style="color:#35b3ca; font-size: 35px;"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
       </div>
    </div>

    <!-- div contenedor de graficos  -->
    <div class="container-fluid mb-3">
        <div class='row justify-content-center mt-1'>
            <div class='col-12 col-md-12 col-lg-6 col-xl-4 p-2'>
                <div tabindex="0" class='card' style="box-shadow: 4px 2px 5px gray" >
                    <div class="card-title d-flex justify-content-end mb-0">
                        <div class="me-3 mt-4" id="icon-info1" >
                            <!-- <a class="bi bi-info-circle iconos-modal" data-icono="1" type="button" style="color:#35b3ca; font-size: 25px;"></a> -->
                        </div> 
                    </div>   
                    <div class='card-body pt-0 '>
                        <div class="d-flex align-items-center justify-content-center">
                            <div id="loading_graf1" class="spinner-border text-fidelitas" style="display:none; width: 3rem; height: 3rem;"></div>    
                        </div>
                        <div id='mode_white1'>
                            <canvas id='myChart'></canvas>
                        </div>
                        <div id='mode_dark1' style="display:none;">
                            <canvas id='myChartDark1'></canvas>
                        </div>
                    </div>
                </div>
            </div>
            <div class='col-12 col-md-12 col-lg-6 col-xl-4 p-2'>
                <div tabindex="0" class='card' style="box-shadow: 4px 2px 5px gray" >
                    <div class="card-title d-flex justify-content-end mb-0">
                        <div class="me-3 mt-4" id="icon-info2" >
                            <!-- <a class="bi bi-info-circle iconos-modal" data-icono="2" type="button" style="color:#35b3ca; font-size: 25px;"></a> -->
                        </div> 
                    </div>   
                    <div class='card-body pt-0'>
                        <div class="d-flex align-items-center justify-content-center">
                            <div id="loading_graf2" class="spinner-border text-fidelitas" style="display:none; width: 3rem; height: 3rem;"></div>    
                        </div>
                        <div id='mode_white2'>
                            <canvas id='myChart2'></canvas>
                        </div>
                        <div id='mode_dark2' style="display:none;">
                            <canvas id='myChart2dark'></canvas>
                        </div>
                    </div>
                </div>
            </div>
            <div class='col-12 col-md-12 col-lg-6 col-xl-4 p-2'>
                <div tabindex="0" class='card' style="box-shadow: 4px 2px 5px gray" >
                    <div class="card-title d-flex justify-content-end mb-0">
                        <div class="me-3 mt-4" id="icon-info3" >
                            <!-- <a class="bi bi-info-circle iconos-modal" data-icono="3" type="button" style="color:#35b3ca; font-size: 25px;"></a> -->
                        </div> 
                    </div>   
                    <div class='card-body pt-0'>
                        <div class="d-flex align-items-center justify-content-center">
                            <div id="loading_graf3" class="spinner-border text-fidelitas" style="display:none; width: 3rem; height: 3rem;"></div>    
                        </div>
                        <div id='mode_white3'>
                            <canvas id='myChart3'></canvas>
                        </div>
                        <div id='mode_dark3' style="display:none;">
                            <canvas id='myChart3dark'></canvas>
                        </div>
                    </div>
                </div>
            </div>
            <div class='col-12 col-md-12 col-lg-6 col-xl-4 p-2'>
                <div tabindex="0" class='card' style="box-shadow: 4px 2px 5px gray" >
                    <div class="card-title d-flex justify-content-end mb-0">
                        <div class="me-3 mt-4" id="icon-info4" >
                            <!-- <a class="bi bi-info-circle iconos-modal" data-icono="4" type="button" style="color:#35b3ca; font-size: 25px;"></a> -->
                        </div> 
                    </div>   
                    <div class='card-body pt-0'>
                        <div class="d-flex align-items-center justify-content-center">
                            <div id="loading_graf4" class="spinner-border text-fidelitas" style="display:none; width: 3rem; height: 3rem;"></div>    
                        </div>
                        <div id='mode_white4'>
                            <canvas id='myChart4'></canvas>
                        </div>
                        <div id='mode_dark4' style="display:none;">
                            <canvas id='myChart4dark'></canvas>
                        </div>
                    </div>
                </div>
            </div>
            <div class='col-12 col-md-12 col-lg-6 col-xl-4 p-2'>
                <div tabindex="0" class='card' style="box-shadow: 4px 2px 5px gray" >
                    <div class="card-title d-flex justify-content-end mb-0">
                        <div class="me-3 mt-4" id="icon-info5" >
                            <!-- <a class="bi bi-info-circle iconos-modal" data-icono="5" type="button" style="color:#35b3ca; font-size: 25px;"></a> -->
                        </div> 
                    </div>   
                    <div class='card-body pt-0'>
                        <div class="d-flex align-items-center justify-content-center">
                            <div id="loading_graf5" class="spinner-border text-fidelitas" style="display:none; width: 3rem; height: 3rem;"></div>    
                        </div>
                        <div id='mode_white5'>
                            <canvas id='myChart5'></canvas>
                        </div>
                        <div id='mode_dark5' style="display:none;">
                            <canvas id='myChart5dark'></canvas>
                        </div>
                    </div>
                </div>
            </div>
            <div class='col-12 col-md-12 col-lg-6 col-xl-4 p-2'>
                <div tabindex="0" class='card' style="box-shadow: 4px 2px 5px gray" >
                    <div class="card-title d-flex justify-content-end mb-0">
                        <div class="me-3 mt-4" id="icon-info6" style="display:none;">
                            <!-- <a class="bi bi-info-circle iconos-modal" data-icono="6" type="button" style="color:#35b3ca; font-size: 25px;"></a> -->
                        </div> 
                    </div>   
                    <div class='card-body pt-0'>
                        <div class="d-flex align-items-center justify-content-center">
                            <div id="loading_graf6" class="spinner-border text-fidelitas" style="display:none; width: 3rem; height: 3rem;"></div>    
                        </div>
                        <div class="w-100" id='mode_white6'>
                            <canvas id='myChart6'></canvas>
                        </div>
                        <div class="w-100" id='mode_dark6' style="display:none;">
                            <canvas id='myChart6dark'></canvas>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Modal generico graficos -->
        <div class="modal fade" id="modal-graf" tabindex="-2" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-dialog-scrollable modal-lg">
                <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title titulomodal text-secondary btn-nav" id="exampleModalLabel"></h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body p-1" id="body-info"></div>
                <div class="modal-footer p-1">
                    <button type="button" class="btn btn-success" data-bs-dismiss="modal">OK</button>
                </div>
                </div>
            </div>
        </div>

        <!-- Modal grafico1 -->
        <div class="modal fade" id="modal-graf1" tabindex="-2" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
                <div class="modal-content">
                    <div class="modal-header p-2">
                        <h5 class="modal-title titulomodal text-secondary btn-nav" id="exampleModalLabel"></h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body p-1" id="body-info">
                        <div class="d-flex align-items-center p-1 m-1 mb-2">
                            <div class="flex-shrink-0" style="width: 6rem;">
                                <div class="p-4 rounded modal-color" id="modal1-color1" style="width: 3rem; background-color:rgba(34, 177, 76, 0.5); border: solid 1px rgba(34, 177, 76, 0.7);">
                                </div>
                            </div>
                            <div class="flex-grow-1 text-secondary ms-3 btn-nav">
                                El color verde hace referencia a las Contribuciones o Aportes pagos.
                            </div>
                        </div>
                        <div class="d-flex align-items-center p-1 m-1 mb-2">
                            <div class="flex-shrink-0" style="width: 6rem;">
                                <div class="p-4 rounded modal-color" id="modal1-color2" style="width: 3rem; background-color: rgba(255, 0, 0, 0.5); border: solid 1px rgba(255, 0, 0, 0.7);">
                                </div>
                            </div>
                            <div class="flex-grow-1 ms-3 text-secondary btn-nav">
                                El color rojo hace referencia a las Contribuciones o Aportes impagos.
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer p-1">
                        <button type="button" class="btn btn-success" style="color: rgba(255,255,255,0.7);" data-bs-dismiss="modal">OK</button>
                    </div>
                </div>
            </div>
        </div>

        <!-- Modal grafico2 -->
        <div class="modal fade" id="modal-graf2" tabindex="-2" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
                <div class="modal-content">
                    <div class="modal-header p-2">
                        <h5 class="modal-title titulomodal text-secondary btn-nav" id="exampleModalLabel"></h5>
                        <button type="button" class="btn-close" style="color: rgba(255,255,255,0.7);" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body p-1" id="body-info">
                        <div class="d-flex align-items-center p-1 m-1 mb-2">
                            <div class="flex-shrink-0" style="width: 6rem;">
                                <div class="p-4 rounded modal-color" id="modal2-color1" style="width: 3rem; background-color: rgba(34, 177, 76, 0.5); border: solid 1px rgba(34, 177, 76, 0.7);">
                                </div>
                            </div>
                            <div class="flex-grow-1 ms-3 text-secondary btn-nav">
                                El color verde hace referencia a los que estan verificados.
                            </div>
                        </div>
                        <div class="d-flex align-items-center p-1 m-1 mb-2">
                            <div class="flex-shrink-0" style="width: 6rem;">
                                <div class="p-4 rounded modal-color" id="modal2-color2" style="width: 3rem; background-color: rgba(255, 0, 0, 0.5); border: solid 1px rgba(255, 0, 0, 0.7);">
                                </div>
                            </div>
                            <div class="flex-grow-1 text-secondary ms-3 btn-nav">
                                El color rojo hace referencia a los que estan rechazados.
                            </div>
                        </div>
                        <div class="d-flex align-items-center p-1 m-1 mb-2">
                            <div class="flex-shrink-0" style="width: 6rem;">
                                <div class="p-4 rounded modal-color" id="modal2-color3" style="width: 3rem; background-color: rgba(201, 203, 207, 0.5); border: solid 1px rgba(201, 203, 207, 0.7);">
                                </div>
                            </div>
                            <div class="flex-grow-1 ms-3 text-secondary btn-nav">
                                El color gris hace referencia a los que estan no presentada.
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer p-1">
                        <button type="button" class="btn btn-success" style="color: rgba(255,255,255,0.7);" data-bs-dismiss="modal">OK</button>
                    </div>
                </div>
            </div>
        </div>

        <!-- Modal grafico3 -->
        <div class="modal fade" id="modal-graf3" tabindex="-2" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
                <div class="modal-content">
                    <div class="modal-header p-2">
                        <h5 class="modal-title titulomodal text-secondary btn-nav" id="exampleModalLabel"></h5>
                        <button type="button" class="btn-close" style="color: rgba(255,255,255,0.7);" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body p-1" id="body-info">
                        <div class="d-flex align-items-center p-1 m-1 mb-2">
                            <div class="flex-shrink-0" style="width: 6rem;">
                                <div class="p-4 rounded modal-color" id="modal3-color1" style="width: 3rem; background-color: rgba(91, 192, 222, 0.5); border: solid 1px rgba(91, 192, 222, 0.7);">
                                </div>
                            </div>
                            <div class="flex-grow-1 ms-3 text-secondary btn-nav">
                                El color azul hace referencia a Monto total PP (MM$).
                            </div>
                        </div>
                        <div class="d-flex align-items-center p-1 m-1 mb-2">
                            <div class="flex-shrink-0" style="width: 6rem;">
                                <div class="p-4 rounded modal-color" id="modal3-color2" style="width: 3rem; background-color: rgba(0, 0, 0, 0.5); border: solid 1px rgba(201, 203, 207, 0.7)">
                                </div>
                            </div>
                            <div class="flex-grow-1 ms-3 text-secondary btn-nav">
                                El grafico lineal color gris hace referencia a Q Empresas con PP.
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer p-1">
                        <button type="button" class="btn btn-success" style="color: rgba(255,255,255,0.7);" data-bs-dismiss="modal">OK</button>
                    </div>
                </div>
            </div>
        </div>

        <!-- Modal grafico4 -->
        <div class="modal fade" id="modal-graf4" tabindex="-2" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
                <div class="modal-content">
                    <div class="modal-header p-2">
                        <h5 class="modal-title titulomodal text-secondary btn-nav" id="exampleModalLabel"></h5>
                        <button type="button" class="btn-close" style="color: rgba(255,255,255,0.7);" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body p-1" id="body-info">
                        <div class="d-flex align-items-center p-1 m-1 mb-2">
                            <div class="flex-shrink-0" style="width: 6rem;">
                                <div class="p-4 rounded modal-color" id="modal4-color1" style="width: 3rem; background-color: rgba(34, 177, 76, 0.5); border: solid 1px rgba(34, 177, 76, 0.7);">
                                </div>
                            </div>
                            <div class="flex-grow-1 ms-3 text-secondary btn-nav">
                                El color verde hace referencia a los que estan completos.
                            </div>
                        </div>
                        <div class="d-flex align-items-center p-1 m-1 mb-2">
                            <div class="flex-shrink-0" style="width: 6rem;">
                                <div class="p-4 rounded modal-color" id="modal4-color2" style="width: 3rem; background-color: rgba(255, 201, 14, 0.5); border: solid 1px rgba(255, 201, 14, 0.7);">
                                </div>
                            </div>
                            <div class="flex-grow-1 ms-3 text-secondary btn-nav">
                                El color amarillo hace referencia a los que son parcial.
                            </div>
                        </div>
                        <div class="d-flex align-items-center p-1 m-1 mb-2">
                            <div class="flex-shrink-0" style="width: 6rem;">
                                <div class="p-4 rounded modal-color" id="modal4-color3" style="width: 3rem; background-color: rgba(255, 0, 0, 0.5); border: solid 1px rgba(255, 0, 0, 0.7);">
                                </div>
                            </div>
                            <div class="flex-grow-1 ms-3 text-secondary btn-nav">
                                El color rojo hace referencia a los que no presenta.
                            </div>
                        </div>
                        <div class="d-flex align-items-center p-1 m-1 mb-2">
                            <div class="flex-shrink-0" style="width: 6rem;">
                                <div class="p-4 rounded modal-color" id="modal4-color4" style="width: 3rem; background-color: rgba(77, 121, 156, 0.5); border: solid 1px rgba(77, 121, 156, 0.7);">
                                </div>
                            </div>
                            <div class="flex-grow-1 ms-3 text-secondary btn-nav">
                                El color azul hace referencia en espera.
                            </div>
                        </div>
                        <div class="d-flex align-items-center p-1 m-1 mb-2">
                            <div class="flex-shrink-0" style="width: 6rem;">
                                <div class="p-4 rounded modal-color" id="modal4-color5" style="width: 3rem; background-color: rgba(248, 156, 103, 0.5); border: solid 1px rgba(248, 156, 103, 0.7);">
                                </div>
                            </div>
                            <div class="flex-grow-1 ms-3 text-secondary btn-nav">
                                El color naranja hace referencia a los que no presenta.
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer p-1">
                        <button type="button" class="btn btn-success" style="color: rgba(255,255,255,0.7);" data-bs-dismiss="modal">OK</button>
                    </div>
                </div>
            </div>
        </div>

         <!-- Modal grafico6 -->
        <div class="modal fade" id="modal-graf6" tabindex="-2" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
                <div class="modal-content">
                    <div class="modal-header p-2">
                        <h5 class="modal-title titulomodal text-secondary btn-nav" id="exampleModalLabel"></h5>
                        <button type="button" class="btn-close" style="color: rgba(255,255,255,0.7);" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body p-1" id="body-info">
                        <div class="d-flex align-items-center p-1 m-1 mb-2">
                            <div class="flex-shrink-0" style="width: 6rem;">
                                <div class="p-4 rounded modal-color" id="modal6color1" style="width: 3rem; background-color: rgba(255, 159, 64, 0.5); border: solid 1px rgba(255, 159, 64, 0.7);">
                                </div>
                            </div>
                            <div class="flex-grow-1 ms-3 text-secondary btn-nav">
                                El color naranja hace referencia a los que estan vencidos.
                            </div>
                        </div>
                        <div class="d-flex align-items-center p-1 m-1 mb-2">
                            <div class="flex-shrink-0" style="width: 6rem;">
                                <div class="p-4 rounded modal-color" id="modal6color2" style="width: 3rem; background-color: rgba(255, 0, 0, 0.5); border: solid 1px rgba(255, 0, 0, 0.7);">
                                </div>
                            </div>
                            <div class="flex-grow-1 ms-3 text-secondary btn-nav">
                                El color rojo hace referencia a los que estan rechazados.
                            </div>
                        </div>
                        <div class="d-flex align-items-center p-1 m-1 mb-2">
                            <div class="flex-shrink-0" style="width: 6rem;">
                                <div class="p-4 rounded modal-color" id="modal6color3" style="width: 3rem; background-color: rgba(255, 201, 14, 0.5); border: solid 1px rgba(255, 201, 14, 0.7);">
                                </div>
                            </div>
                            <div class="flex-grow-1 ms-3 text-secondary btn-nav">
                                El color amarillo hace referencia a los que estan en verificacion parcial.
                            </div>
                        </div>
                        <div class="d-flex align-items-center p-1 m-1 mb-2">
                            <div class="flex-shrink-0" style="width: 6rem;">
                                <div class="p-4 rounded modal-color" id="modal6color4" style="width: 3rem; background-color: rgba(94, 138, 180, 0.5); border: solid 1px rgba(94, 138, 180, 0.7);">
                                </div>
                            </div>
                            <div class="flex-grow-1 ms-3 text-secondary btn-nav">
                                El color azul hace referencia a los que estan pendiente de carga.
                            </div>
                        </div>
                        <div class="d-flex align-items-center p-1 m-1 mb-2">
                            <div class="flex-shrink-0" style="width: 6rem;">
                                <div class="p-4 rounded modal-color" id="modal6color5" style="width: 3rem; background-color: rgba(27, 54, 93, 0.5); border: solid 1px rgba(27, 54, 93, 0.7);">
                                </div>
                            </div>
                            <div class="flex-grow-1 ms-3 text-secondary btn-nav">
                                El color azul oscuro hace referencia a los que estan pendiente de verificacion.
                            </div>
                        </div>
                        <div class="d-flex align-items-center p-1 m-1 mb-2">
                            <div class="flex-shrink-0" style="width: 6rem;">
                                <div class="p-4 rounded modal-color" id="modal6color6" style="width: 3rem; background-color: rgba(48, 158, 153, 0.5); border: solid 1px rgba(48, 158, 153, 0.7);">
                                </div>
                            </div>
                            <div class="flex-grow-1 ms-3 text-secondary btn-nav">
                                El color verde hace referencia a los que estan en cumplimiento.
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer p-1">
                        <button type="button" class="btn btn-success" style="color: rgba(255,255,255,0.7);" data-bs-dismiss="modal">OK</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

@endsection
@section('funcionesJS')
    <script src="/js/chart.js"></script>
    <script src="/js/graficos_dashboard.js"></script>
    <script>
    $(document).ready(function() {
        load_graficos();
    });
    </script>
@endsection