<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 Recibidos</li>
            </ol>
        </nav>

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

                    <!-- Left toolbar -->
                    <div class="col-lg-3">
                        <select name="" id="select_tip_rec" class=" form-select">
                            <option value="1">TRAMITES RECIBIDOS INTERNOS</option>
                            <option value="0">TRAMITES RECIBIDOS EXTERNOS</option>

                        </select>
                    </div>
                    <div class="col-lg-3">
                    
                    </div>
                    <div class="col-lg-3">
                         <!--<select name="" id="select_area_grupo" class=" form-select">
                        </select> -->
                    </div>
                    
                    <div class="col-lg-3">
                    <button type="button" id="btn-carrito" class="btn text-white w-100" style="background-color:#ab47bc;" onclick="Derivar_Carrito_Modal()" ><i class="fa-solid fa-cart-shopping"></i> Derivar Carrito de Expedientes</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>Seguimiento</th>
                            <th>Procedencia</th>
                            <th>Area localizado</th>
                            <th>Estatus</th>
                            <th style="min-width:100px">Accion</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_mostrar_anexo" 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">
                        <iframe id="pdf-frame_a" style="display:block; width:100%; min-height:420px" src=""
                            frameborder="0"></iframe>
                    </div>

                </div>
            </div>
            <div class="modal-footer">
            </div>
        </div>
    </div>
</div>
<!-- Modal -->
<div class="modal fade" id="modal_agregar" 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_agregar"></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-lg-6 mb-3">
                        <label for="">Area Actual</label>
                        <input type="text" id="txt_origen_de_agregar" class="form-control" disabled>
                        <input type="text" id="txt_iddocumento_de_agregar" hidden>

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

                </div>
            </div>
            <div class="modal-footer">
            <div id="div_btn-quitar-area-destino">
                <button type="button" class="btn btn-warning" onclick="Quitar_Destino()" >Quitar Area Destino</button>
            </div>
            
            <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Cancelar</button>
                <button  type="button" class="btn btn-secondary"
                    onclick="Agregar_Carrito()">Agregar</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="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" id="select_notnull">
                                            <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 de Destino (*)</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="3" 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-lg-6 mb-3">
                                            <label for="">N° DNI (*)</label>
                                            <input type="text" class="form-control" id="txt_dni" disabled>
                                        </div>
                                        <div class="col-lg-6 mb-3">
                                            <label for="">Nombre (*)</label>
                                            <input type="text" class="form-control" id="txt_nom" disabled>
                                        </div>
                                        <div class="col-lg-6 mb-3">
                                            <label for="">Apellido Paterno (*)</label>
                                            <input type="text" class="form-control" id="txt_apepat" disabled>
                                        </div>
                                        <div class="col-lg-6 mb-3">
                                            <label for="">Apellido Materno (*)</label>
                                            <input type="text" class="form-control" id="txt_apemat" disabled>
                                        </div>
                                        <div class="col-lg-6 mb-3">
                                            <label for="">Celular (*)</label>
                                            <input type="text" class="form-control" id="txt_celular" disabled>
                                        </div>
                                        <div class="col-lg-6 mb-3">
                                            <label for="">Email (*)</label>
                                            <input type="text" class="form-control" id="txt_email" disabled>
                                        </div>
                                        <div class="col-lg-12 mb-3">
                                            <label for="">Direccion (*)</label>
                                            <input type="text" class="form-control" id="txt_dire" disabled>
                                        </div>
                                        <div class="col-lg-12 mb-3">
                                            <div class="row col-12 mb-3">
                                                <label for="">En Representacion de (*)</label>
                                            </div>
                                            <div class="row col-lg-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">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-lg-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-lg-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-lg-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-lg-12 mb-3">
                        <label for="">Anexar Documento</label>

                        <input type="file" id="txt_documento_de" class="form-control">
                    </div>
                    <div class="col-lg-12 mb-3" id="div_checkbox_visible" style="display:none;">
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" id="chk_visible_publico" value="1">
                            <label class="form-check-label" for="chk_visible_publico">
                                <i class="fa-solid fa-eye me-1"></i> Mostrar este archivo en el seguimiento público
                            </label>
                            <small class="form-text text-muted d-block">Si marca esta opción, el documento adjunto será visible para el ciudadano en la página de seguimiento.</small>
                        </div>
                    </div>
                    <div class="col-lg-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" hidden>
                    <input type="text" id="txt_idareorigen" hidden>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Cancelar</button>
                <button id="button_derivar" type="button" class="btn btn-secondary"
                    onclick="Registrar_Derivacion()">Derivar
                    Documento</button>
            </div>
        </div>
    </div>
</div>

<!-- Modal -->
<div class="modal fade" id="modal_derivar_carrito" 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" >Derivar Carrito de Expedientes</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-lg-6 mb-3 ">
                        <label for="">Area Actual</label>
                        <input type="text" id="txt_origen_de_carrito" class="form-control" disabled>

                    </div>
                    <div class="col-lg-6 mb-3">
                        <label for="">Area Destino</label>
                        <select class="" id="select_area_grupo" style="width:100%">
                        </select>
                    </div>
                </div>
                <div class="row">
                    <div class="col-12">
                        <table id="tabla_carrito_area" class="display compact " style="width:100%">
                            <thead>
                                <tr>
                                    <th>Nro. Expediente</th>
                                    <th>DNI</th>
                                    <th>Administrado</th>
                                    <th>Documento</th>
                                </tr>
                            </thead>

                        </table>
                    </div>

                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Cancelar</button>
                <button id="button_derivar" type="button" class="btn btn-secondary"
                    onclick="Registrar_Derivacion_Carrito()">Derivar
                    Documentos</button>
            </div>
        </div>
    </div>
</div>

<!-- Modal -->
<div class="modal fade" id="modal_mostrar_documento_principal" 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">Documento Principal </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">
                        <iframe id="pdf-frame_a_carrito" style="display:block; width:100%; min-height:420px" src=""
                            frameborder="0"></iframe>
                    </div>

                </div>
            </div>
            <div class="modal-footer">
            </div>
        </div>
    </div>
</div>
<script>
$(document).ready(function() {
    listar_tramite('');  // Cambiado de 1 a '' para mostrar TODOS los trámites sin filtrar por defecto
    Cargar_Select_Area();
    Cargar_Select_Tipo();
    let idareaactual = document.getElementById("txtprincipalareaid").value;
        Cargar_Select_Area_Destino(idareaactual);
    // $('.js-example-basic-single').select2({dropdownParent: $('#modal_registro')});
    // establece el valor por defecto
    $( '#select_tip_rec' ).select2( {
    theme: "bootstrap-5",
    width: $( this ).data( 'width' ) ? $( this ).data( 'width' ) : $( this ).hasClass( 'w-100' ) ? '100%' : 'style',
    placeholder: $( this ).data( 'placeholder' ),
} );
$( '#select_tip_tramite' ).select2( {
    theme: "bootstrap-5",
    width: $( this ).data( 'width' ) ? $( this ).data( 'width' ) : $( this ).hasClass( 'w-100' ) ? '100%' : 'style',
    placeholder: $( this ).data( 'placeholder' ),
} );

$( '#select_area_grupo' ).select2( {
    theme: "bootstrap-5",
        width: $(this).data('width') ? $(this).data('width') : $(this).hasClass('w-100') ? '100%' :
            'style',
        placeholder: $(this).data('placeholder'),
        placeholder: 'SELECCIONAR AREA DESTINO',
        allowClear: false
} );

$( '#select_derivar_de' ).select2( {
    theme: "bootstrap-5",
    width: $( this ).data( 'width' ) ? $( this ).data( 'width' ) : $( this ).hasClass( 'w-100' ) ? '100%' : 'style',
    placeholder: $( this ).data( 'placeholder' ),
} );

});

$('#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')
    });
    const select = document.getElementById('select_area_p');
    if (document.getElementById('select_area_p').value == '') {
        const exteriorOption = document.createElement('option');
        exteriorOption.value = 'exterior';
        exteriorOption.text = 'EXTERIOR';
        exteriorOption.selected = true;
        select.appendChild(exteriorOption);
    }
});
$('#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'),
        placeholder: 'SELECCIONAR ',
        allowClear: false
    });



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

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



});
$('#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';
        }
        document.getElementById('button_derivar').innerHTML = "Derivar Documento";
        $('#button_derivar').removeClass('btn-warning');
        $('#button_derivar').addClass('btn-secondary');
    } else {
        let x = document.getElementsByClassName('div_derivacion');
        for (let i = 0; i < x.length; i++) {
            x[i].style.display = 'none';
        }
        let button = document.getElementById('button_derivar');
        button.innerHTML = "Finalizar Documento";
        $('#button_derivar').removeClass('btn-secondary');
        $('#button_derivar').addClass('btn-warning');
    }
});

// Mostrar/ocultar checkbox de visibilidad cuando se selecciona un archivo
$('#txt_documento_de').change(function() {
    let archivo = this.value;
    if (archivo && archivo.length > 0) {
        $('#div_checkbox_visible').show();
    } else {
        $('#div_checkbox_visible').hide();
        $('#chk_visible_publico').prop('checked', false);
    }
});
</script>