<script src="../public/js/tramite_area.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">Tramites Enviados</li>
            </ol>
        </nav>

        <!-- Table with toolbar -->
        <div class="card">
            <div class="card-header">
                <h5 class="card-title mb-3">PANEL ADMINISTRATIVO DE TRAMITES ENVIADOS</h5>
                <div class="row">

                    <!-- Left toolbar -->
                    <div class="col-md-6 d-flex gap-1 align-items-center">
                        <button type="button"
                            onclick="cargar_contenido('content','modules/tramite_area/tramite_registro.php')"
                            class="btn btn-primary hstack gap-2 align-self-center">
                            <i class="demo-psi-add fs-5"></i>
                            <span class="vr"></span>
                            Nuevo Tramite del Area
                        </button>

                    </div>
                    <!-- END : Left toolbar -->

                    <!-- Right Toolbar -->


                </div>
            </div>

            <div class="card-body ">
                <table id="tabla_tramite" class="display compact " style="width:100%">
                    <thead>
                        <tr>
                            <th>Nro Expediente</th>
                            <th>Nro Doc.</th>
                            <th>Tipo Doc.</th>
                            <th>DNI </th>
                            <th>Remitente</th>
                            <th>Mas datos</th>
                            <th>Area localizado</th>
                            <th>Estado documento</th>
                        </tr>
                    </thead>

                </table>

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

    </div>
</div>

<!-- Modal -->
<div class="modal fade" id="modal_seguimiento" 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="lbl_titulo">Seguimiento del Tramite </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">
                        <table id="tabla_seguimiento" class="display compact " style="width:100%">
                            <thead>
                                <tr>
                                    <th>Procedencia</th>
                                    <th>Fecha</th>
                                    <th>Descripcion</th>
                                    <th>Archivo Anexado</th>
                                </tr>
                            </thead>

                        </table>
                    </div>

                </div>
            </div>
            <div class="modal-footer">
            </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="lbl_titulo_datos">MAS DATOS DEL TRAMITE </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">

                        <!-- Callout tabs with base -->
                        <div class="tab-base">

                            <!-- Nav tabs -->
                            <ul class="nav nav-callout" role="tablist">
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link active" data-bs-toggle="tab"
                                        data-bs-target="#_dm-coTabsBaseHome" type="button" role="tab"
                                        aria-controls="home" aria-selected="true">Informacion</button>
                                </li>
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link" data-bs-toggle="tab"
                                        data-bs-target="#_dm-coTabsBaseProfile" type="button" role="tab"
                                        aria-controls="profile" aria-selected="false">Datos Remitente</button>
                                </li>
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link" data-bs-toggle="tab"
                                        data-bs-target="#_dm-coTabsBaseProfile2" type="button" role="tab"
                                        aria-controls="profile" aria-selected="false">Dodumento Principal</button>
                                </li>

                            </ul>

                            <!-- Tabs content -->
                            <div class="tab-content">
                                <div id="_dm-coTabsBaseHome" class="tab-pane fade active show" role="tabpanel"
                                    aria-labelledby="home-tab">
                                    <div class="row">
                                        <div class="col-lg-6 mb-3">
                                            <label for="">Procedencia del Documento (*)</label>
                                            <select class="js-example-basic-single" id="select_area_p"
                                                style="width:100%" disabled>
                                            </select>
                                        </div>
                                        <div class="col-lg-6 mb-3">
                                            <label for="">Area localizado (*)</label>
                                            <select class="js-example-basic-single" id="select_area_d"
                                                style="width:100%" disabled>
                                            </select>
                                        </div>
                                        <div class="col-lg-4 mb-3">
                                            <label for="">Fecha Registro del Expediente(*)</label>
                                            <input type="text" class="form-control" id="txt_fechareg" disabled>
                                        </div>
                                        <div class="col-lg-3 mb-3">
                                            <label for="">Tipo de Documento (*)</label>
                                            <select class="js-example-basic-single" id="select_tipo" style="width:100%"
                                                disabled>
                                            </select>
                                        </div>
                                        <div class="col-lg-3 mb-3">
                                            <label for="">Nro Documento (*)</label>
                                            <input type="text" class="form-control" id="txt_ndocumento" disabled>
                                        </div>
                                        <div class="col-lg-2 mb-3">
                                            <label for="">Nro Folio (*)</label>
                                            <input type="text" class="form-control" id="txt_folio" disabled>
                                        </div>
                                        <div class="col-lg-12">
                                            <label for="">Procedimiento Administrativo (*)</label>
                                            <textarea id="txt_proc" rows="1" class="form-control" style="resize:none;"
                                                disabled></textarea>
                                            <input type="text" id="txt_idtupaver" hidden>
                                        </div>

                                        <div class="col-lg-12 text-end ">
                                            <button class="btn btn-transparent p-1 text-danger "
                                                onclick="mostar_requisitos()"><i
                                                    class="fa-solid fa-eye fs-5 me-2"></i>Ver Requisitos </button>
                                        </div>
                                        <div class="col-lg-12 mb-3">
                                            <label for="">N° Asunto del tramite (*)</label>
                                            <textarea id="txt_asunto" rows="2" class="form-control" style="resize:none;"
                                                disabled></textarea>
                                        </div>



                                    </div>
                                </div>
                                <div id="_dm-coTabsBaseProfile" class="tab-pane fade" role="tabpanel"
                                    aria-labelledby="profile-tab">
                                    <div class="row">
                                        <div class="col-6 mb-3">
                                            <label for="">N° DNI (*)</label>
                                            <input type="text" class="form-control" id="txt_dni" disabled>
                                        </div>
                                        <div class="col-6 mb-3">
                                            <label for="">Nombre (*)</label>
                                            <input type="text" class="form-control" id="txt_nom" disabled>
                                        </div>
                                        <div class="col-6 mb-3">
                                            <label for="">Apellido Paterno (*)</label>
                                            <input type="text" class="form-control" id="txt_apepat" disabled>
                                        </div>
                                        <div class="col-6 mb-3">
                                            <label for="">Apellido Materno (*)</label>
                                            <input type="text" class="form-control" id="txt_apemat" disabled>
                                        </div>
                                        <div class="col-6 mb-3">
                                            <label for="">Celular (*)</label>
                                            <input type="text" class="form-control" id="txt_celular" disabled>
                                        </div>
                                        <div class="col-6 mb-3">
                                            <label for="">Email (*)</label>
                                            <input type="text" class="form-control" id="txt_email" disabled>
                                        </div>
                                        <div class="col-12 mb-3">
                                            <label for="">Direccion (*)</label>
                                            <input type="text" class="form-control" id="txt_dire" disabled>
                                        </div>
                                        <div class="col-12 mb-3">
                                            <div class="row col-12 mb-3">
                                                <label for="">En Representacion de (*)</label>
                                            </div>
                                            <div class="row col-12 px-2">
                                                <div class="form-check form-check-inline col">
                                                    <input id="rad_presentacion1" class="form-check-input" type="radio"
                                                        name="r1" value="A Nombre Propio" checked disabled>
                                                    <label for="rad_presentacion1" class="form-check-label">A Nombre
                                                        Propio</label>
                                                </div>
                                                <div class="form-check form-check-inline col">
                                                    <input id="rad_presentacion2" class="form-check-input" type="radio"
                                                        name="r1" value="A Otra Persona Natural" disabled>
                                                    <label for="rad_presentacion2" class="form-check-label">A Otra
                                                        Persona
                                                        Natural</label>
                                                </div>
                                                <div class="form-check form-check-inline col">
                                                    <input id="rad_presentacion3" class="form-check-input" type="radio"
                                                        name="r1" value="Persona Juridica" disabled>
                                                    <label for="rad_presentacion3" class="form-check-label">Persona
                                                        Juridica</label>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-12" id="div_juridico" style="display:none;">
                                            <div class="row">
                                                <div class="col-4">
                                                    <label for="">RUC</label>
                                                    <input type="text" class="form-control" id="txt_ruc" disabled>
                                                </div>
                                                <div class="col-8">
                                                    <label for="">Razon Social</label>
                                                    <input type="text" class="form-control" id="txt_razon" disabled>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div id="_dm-coTabsBaseProfile2" class="tab-pane fade" role="tabpanel"
                                    aria-labelledby="profile-tab">
                                    <div class="row">
                                        <iframe id="pdf-frame" style="display:block; width:100%; min-height:420px"
                                            src="" frameborder="0"></iframe>
                                    </div>
                                </div>

                            </div>
                        </div>
                        <!-- END : Callout tabs with base -->

                    </div>
                </div>
            </div>
            <div class="modal-footer">
            </div>
        </div>
    </div>
</div><!-- Modal -->
<div class="modal fade" id="modal_mas_requisitos" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog ">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="lbl_re"></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>

<!-- Modal -->
<div class="modal fade" id="modal_derivar" 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="lbl_titulo_derivar"></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-6 mb-3">
                        <label for="">Fecha Registro</label>
                        <input type="text" id="txt_fecha_de" class="form-control" disabled>
                    </div>
                    <div class="col-6 mb-3">
                        <label for="">Accion</label>
                        <select class="form-select" id="select_derivar_de" style="width:100%">
                            <option value="DERIVAR">DERIVAR</option>
                            <option value="FINALIZAR">FINALIZAR</option>
                        </select>

                    </div>

                    <div class="col-6 mb-3 div_derivacion">
                        <label for="">Area Actual</label>
                        <input type="text" id="txt_origen_de" class="form-control" disabled>

                    </div>
                    <div class="col-6 mb-3 div_derivacion">
                        <label for="">Area Destino</label>
                        <select class="js-example-basic-single" id="select_destino_d" style="width:100%">
                        </select>
                    </div>

                    <div class="col-12 mb-3">
                        <label for="">Anexar Documento</label>

                        <input type="file" id="txt_documento_de" class="form-control">
                    </div>
                    <div class="col-12 mb-3">
                        <label for="">Descripcion</label>
                        <textarea id="txt_descripcion_de" rows="3" class="form-control" style="resize:none;"></textarea>
                    </div>
                    <input type="text" id="txt_iddocumento_de">
                    <input type="text" id="txt_idareorigen">
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-outline-danger" data-bs-dismiss="modal">Cancelar</button>
                <button type="button" class="btn btn-outline-secondary" onclick="Registrar_Derivacion()">Derivar
                    Documento</button>
            </div>
        </div>
    </div>
</div>
<script>
$(document).ready(function() {
    listar_tramite_enviado();
    Cargar_Select_Area();
    Cargar_Select_Tipo();
    // $('.js-example-basic-single').select2({dropdownParent: $('#modal_registro')});

});
$('#modal_mas').on('shown.bs.modal', function(event) {

    $('.js-example-basic-single').select2({
        dropdownParent: '#modal_mas',
        theme: "bootstrap-5",
        width: $(this).data('width') ? $(this).data('width') : $(this).hasClass('w-100') ? '100%' :
            'style',
        placeholder: $(this).data('placeholder')
    });
});
$('#modal_derivar').on('shown.bs.modal', function(event) {

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



});
$('#select_derivar_de').change(function() {
    let de = document.getElementById('select_derivar_de').value;
    if (de == 'DERIVAR') {
        let x = document.getElementsByClassName('div_derivacion');
        for (let i = 0; i < x.length; i++) {
            x[i].style.display = 'block';
        }
    } else {
        let x = document.getElementsByClassName('div_derivacion');
        for (let i = 0; i < x.length; i++) {
            x[i].style.display = 'none';
        }
    }
});
</script>