{% extends "master-administracion.html" %}


{% block stylesheets %}
    {{ parent() }}    

    <!--datatable css-->
    <link rel="stylesheet" href="https://cdn.datatables.net/1.11.5/css/dataTables.bootstrap5.min.css" />
    <!--datatable responsive css-->
    <link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.2.9/css/responsive.bootstrap.min.css" />

    <link rel="stylesheet" href="https://cdn.datatables.net/buttons/2.2.2/css/buttons.dataTables.min.css">

    <!-- Sweet Alert css-->
    <link href="{{assets}}/libs/sweetalert2/sweetalert2.min.css" rel="stylesheet" type="text/css" />
{% endblock %}


{% block javascripts %}
    {{ parent() }}

     <!--datatable js-->
     <script src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js"></script>
     <script src="https://cdn.datatables.net/1.11.5/js/dataTables.bootstrap5.min.js"></script>
     <script src="https://cdn.datatables.net/responsive/2.2.9/js/dataTables.responsive.min.js"></script>
     <script src="https://cdn.datatables.net/buttons/2.2.2/js/dataTables.buttons.min.js"></script>
     <script src="https://cdn.datatables.net/buttons/2.2.2/js/buttons.print.min.js"></script>
     <script src="https://cdn.datatables.net/buttons/2.2.2/js/buttons.html5.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
    <!-- Sweet Alerts js -->
    <script src="{{assets}}/libs/sweetalert2/sweetalert2.min.js"></script>
    <script src="{{assets}}/js/pages/datos.js"></script>

{% endblock %}


{% block body %}


<!-- start page title -->
<div class="row">
    <div class="col-12">
        <div class="page-title-box d-sm-flex align-items-center justify-content-between">
            <h4 class="mb-sm-0">Cargos</h4>

            <div class="page-title-right">
                <ol class="breadcrumb m-0">
                    <li class="breadcrumb-item"><a href="../Administracion/">Administración</a></li>
                    <li class="breadcrumb-item active">Cargos</li>
                </ol>
            </div>

        </div>
    </div>
</div>
<!-- end page title -->

<!--Begin row -->

<div class="row">
    <div class="col-lg-12">
        <div class="card" id="leadsList">
            <div class="card-header border-0">

                <div class="row g-4 align-items-center">
                    
                    <div class="col-sm-auto ms-auto">
                        <div class="hstack gap-2">
                            
                            
                            <button type="button" class="btn btn-primary add-btn" data-bs-toggle="modal" id="create-btn" data-bs-target="#ModalForm"><i class="ri-add-line align-bottom me-1"></i> Cargar</button>


                            <button type="button" onclick="Agregar();" class="btn btn-success add-btn"  id="add-btn" ><i class="ri-add-line align-bottom me-1"></i> Agregar</button>

                            <button type="button" onclick="Eliminar();" class="btn btn-danger add-btn"  id="delete-btn" ><i class="ri-add-line align-bottom me-1"></i> Eliminar</button>
                            

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

    </div>
    <!--end col-->
</div>
<!--end row-->



<div class="row">
    <div class="col-lg-12">
        <div class="card">

            <div class="card-body">

        <table id="dataTable" class="table table-bordered dt-responsive nowrap table-striped align-middle" style="width:100%">
            <thead class="table-light">
                <tr>
                    <th>id_institucion</th>
                    <th>id_directorio</th>
                    <th>id_campo</th>
                    <th>valor</th>
                    <th>siglas</th>
                    <th>institucion</th>
                    <th>seccion</th>
                </tr>
            </thead>
            <tbody class="list form-check-all">

                {% for row in registros %}
                  
                  <tr>
                    <td>{{row.id_institucion}}</td>
                    <td>{{row.id_directorio}}</td>
                    <td>{{row.id_campo}}</td>
                    <td>{{row.valor}}</td>
                    <td>{{row.siglas}}</td>
                    <td>{{row.institucion}}</td>
                    <td>{{row.seccion}}</td>
                  </tr>
                    
                
                                    
               {% endfor %}

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




<div class="modal fade" id="ModalForm" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header bg-light p-3">
                <h5 class="modal-title" id="exampleModalLabel"></h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" id="close-modal"></button>
            </div>
            <!--begin::Form-->
    <form class="form" action="#" id="kt_modal_add_file_form" >
        <!--begin::Modal header-->
        <div class="modal-header" id="kt_modal_add_file_header">
            <!--begin::Modal title-->
            <h2 class="fw-bold">Importar datos desde archivo</h2>
            <!--end::Modal title-->
    
            <!--begin::Close-->
            <div id="kt_modal_add_file_close" data-bs-dismiss="modal" class="btn btn-icon btn-sm btn-active-icon-primary">
                <i class="ki-outline ki-cross fs-1"></i>                    
            </div>
            <!--end::Close-->
        </div>
        <!--end::Modal header-->
    
        <!--begin::Modal body-->
        <div class="modal-body py-10 px-lg-17">


            <!--begin::Scroll-->
            <div class="scroll-y me-n7 pe-7" id="kt_modal_file_scroll" data-kt-scroll="true" data-kt-scroll-activate="{default: false, lg: true}" data-kt-scroll-max-height="auto" data-kt-scroll-dependencies="#kt_modal_add_file_header" data-kt-scroll-wrappers="#kt_modal_add_file_scroll" data-kt-scroll-offset="300px">
                
               <!--begin::Input group-->
               <div class="d-flex flex-column mb-7 fv-row">
                <!--begin::Label-->
                <label class="fs-6 fw-semibold mb-2">
                    <span class="required">Archivo</span>
    
                    <span class="ms-1" data-bs-toggle="tooltip" title="Importa el archivo en formato XLSX para insertar los productos..">
                        <i class="ki-outline ki-information fs-7"></i>                                    </span>
                </label>
                <!--end::Label-->
    
                <!--begin::Input-->
                <input type='file' name='loadxlsx' accept='.XLSX' class='form-control form-control-solid'>
                <!--end::Input-->
            </div>
            <!--end::Input group-->
    
    
    
            <!--begin::Input group-->


            <div class="container" id="progress-bar" style="display: none;">    
                <div class="progress progress-striped">
                  <div class="progress-bar">
                  </div>                       
                </div> 
              </div>
            

                <div id="tbl-data" style="display: none;">
                    <table class="table table-bordered" style="width: 1200px;">
                        <thead>
                            <tr class="fw-bold fs-6 text-gray-800">
                                <th>id_institucion</th>
                                <th>id_directorio</th>
                                <th>id_campo</th>
                                <th>valor</th>
                            </tr>
                        </thead>
                        <tbody id="tbody">
                            
                            
                        </tbody>
                    </table>
                </div>
                
            
            <!--end::Input group-->

     
            </div>
            <!--end::Scroll-->
        </div>
        <!--end::Modal body-->
    
        <!--begin::Modal footer-->
        <div class="modal-footer flex-center">
            <!--begin::Button-->
            <button type="reset" id="kt_modal_add_file_cancel" class="btn btn-light me-3" data-bs-dismiss="modal">
                Descartar
            </button>
            <!--end::Button-->
    
            <!--begin::Button-->
            <button type="button" onclick="AgregarProductosExcel();" id="kt_modal_add_file_submit" class="btn btn-primary">
                <span class="indicator-label">
                    Agregar
                </span>
                <span class="indicator-progress">
                    Please wait... <span class="spinner-border spinner-border-sm align-middle ms-2"></span>
                </span>
            </button>
            <!--end::Button-->
        </div>
        <!--end::Modal footer-->
    </form>
    <!--end::Form-->
        </div>
    </div>
</div>
<!--end modal-->

                    

{% endblock %}