<script src="../public/js/tupa.js?rev=<?php echo time(); ?>"></script>

<div class="content__boxed">
    <div class="content__wrap">
        <nav aria-label="breadcrumb" class="pb-2">
            <ol class="breadcrumb mb-0">
                <li class="breadcrumb-item">Sistema de Tramite Documentario</li>
                <li class="breadcrumb-item">TUPA</li>
            </ol>
        </nav>
        <!-- Table with toolbar -->
        <div class="card">
            <div class="card-header ">
                <h5 class="card-title mb-3">PANEL ADMINISTRATIVO TUPA</h5>
                <div class="row">

                    <!-- Left toolbar -->
                    <div class="col-md-6 d-flex gap-1 align-items-center">
                        <button type="button" onclick="AbrirRegistro()"
                            class="btn btn-primary hstack gap-2 align-self-center">
                            <i class="demo-psi-add fs-5"></i>
                            <span class="vr"></span>
                            Nuevo Registro
                        </button>

                    </div>
                    <!-- END : Left toolbar -->
                    <div class="col-md-6 d-flex gap-1 align-items-center justify-content-end d-none">
                        <button type="button" onclick="AbrirSelecionarArea()"
                            class="btn btn-outline-danger hstack gap-2 align-self-center">
                            Seleccionar Area Receptora
                        </button>

                    </div>
                    <!-- Right Toolbar -->


                </div>
            </div>

            <div class="card-body ">
                <div class="table-responsive">
                    <table id="tabla_tupa" class="display " style="width:100%">
                        <thead>
                            <tr>
                                <th>#</th>
                                <th>Procedimiento Administrativo</th>
                                <th>Ver Requisitos</th>
                                <th>Estatus</th>
                                <th style="min-width:90px">Accion</th>
                            </tr>
                        </thead>

                    </table>
                </div>

            </div>
        </div>
        <!-- END : Table with toolbar -->

    </div>
</div>

<!-- Modal -->
<div class="modal fade" id="modal_registro" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">REGISTRO PROCEDIMIENTO ADMINISTRATIVO</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-12 mb-3">
                        <label for="">Procedimiento Administrativo</label>

                        <textarea id="txt_nombre" class="form-control" style="resize:none;" rows="3"></textarea>
                    </div>
                    <div class="col-12 mb-3 d-flex justify-content-end">
                        <button class="btn btn-warning hstack gap-2 align-self-center"
                            onclick="Agregar_Requisito('div_requisito')">
                            <i class="demo-psi-add fs-5"></i>
                            <span class="vr"></span>
                            Agregar Requisito
                        </button>
                    </div>
                    <ol class="col-12 px-3" id="div_requisito">
                    </ol>

                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Cerrar</button>
                <button type="button" class="btn btn-secondary" onclick="Registrar_Tupa()">Registrar</button>
            </div>
        </div>
    </div>
</div>

<!-- Modal -->
<div class="modal fade" id="modal_editar" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg ">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">EDITAR PROCEDIMIENTO ADMINISTRATIVO Y REQUISTOS</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-12 mb-3">
                        <label for="">Procedimineto Administrativo</label>
                        <textarea id="txt_nombre_editar" class="form-control" style="resize:none;" rows="3"></textarea>
                        <input type="text" id="txt_idtupa" hidden>
                    </div>
                    <div class="col-12 mb-3">
                        <label for="">Estatus</label>
                        <select name="" id="select_estatus_tupa" class="form-select js-example-basic-single">
                            <option value="ACTIVO">ACTIVO</option>
                            <option value="INACTIVO">INACTIVO</option>
                        </select>
                    </div>
                    <ol class="col-12 px-3" id="div_requisito_editar">

                    </ol>
                    <div class="col-12 mb-3 d-flex justify-content-end">
                        <button class="btn btn-warning hstack gap-2 align-self-center"
                            onclick="Agregar_Requisito('div_requisito_editar')">
                            <i class="demo-psi-add fs-5"></i>
                            <span class="vr"></span>
                            Agregar Mas Requisito
                        </button>
                    </div>

                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Cerrar</button>
                <button type="button" class="btn btn-secondary" onclick="Modificar_Tupa()">Modificar</button>
            </div>
        </div>
    </div>
</div>

<!-- Modal -->
<div class="modal fade" id="modal_mas" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">REQUISTOS DEL PROCEDIMIENTO ADMINISTRATIVO</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="row px-4">
                    <ol class="list-group" id="lista_requisitos">

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

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



<script>
$(document).ready(function() {
    listar_tupa();
});

var myModal = document.getElementById('modal_registro');
var myInput = document.getElementById('txt_nombre');

myModal.addEventListener('shown.bs.modal', function() {
    myInput.focus()
})
$('#modal_editar').on('shown.bs.modal', function(event) {

    $('.js-example-basic-single').select2({
        dropdownParent: '#modal_editar',
        theme: "bootstrap-5",
        width: $(this).data('width') ? $(this).data('width') : $(this).hasClass('w-100') ? '100%' :
            'style',
        placeholder: $(this).data('placeholder'),
    });
})
</script>