<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">Registrar Nuevo Tramite</li>
            </ol>
        </nav>
        <h2 class="mb-3">Tramite Documentario Interno</h2>
        <div class="row mb-5">
            <div class="col-md-6 mb-3">
                <!-- Secondary card -->
                <div class="card ">
                    <h5 class="card-header bg-primary text-white fw-bolder">Datos del Remitente</h5>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-lg-6 mb-3">
                                <label for="">N° DNI (*)</label>
                                <input type="text" readonly class="form-control" id="txt_dni"
                                    onkeypress="return soloNumeros(event)" autocomplete="off">
                            </div>
                            <div class="col-lg-6 mb-3">
                                <label for="">Nombre (*)</label>
                                <input type="text" readonly class="form-control" id="txt_nom"
                                    onkeypress="return sololetras(event)" autocomplete="off">
                            </div>
                            <div class="col-lg-6 mb-3">
                                <label for="">Apellido Paterno (*)</label>
                                <input type="text" readonly class="form-control" id="txt_apepat"
                                    onkeypress="return sololetras(event)" autocomplete="off">
                            </div>
                            <div class="col-lg-6 mb-3">
                                <label for="">Apellido Materno (*)</label>
                                <input type="text" readonly class="form-control" id="txt_apemat"
                                    onkeypress="return sololetras(event)" autocomplete="off">
                            </div>
                            <div class="col-lg-6 mb-3">
                                <label for="">Celular (*)</label>
                                <input type="text" readonly class="form-control" id="txt_celular"
                                    onkeypress="return soloNumeros(event)" autocomplete="off">
                            </div>
                            <div class="col-lg-6 mb-3">
                                <label for="">Email (*)</label>
                                <input type="text" readonly class="form-control" id="txt_email" autocomplete="off">
                            </div>
                            <div class="col-lg-12 mb-3">
                                <label for="">Direccion (*)</label>
                                <input type="text" readonly class="form-control" id="txt_dire" autocomplete="off">
                            </div>
                            <div class="col-lg-12 mb-3">
                                <div class="row col-12 mb-3">
                                    <label for="">En Representacion como (*)</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="">
                                        <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">
                                        <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-lg-4 mb-3">
                                        <label for="">RUC</label>
                                        <input type="text" class="form-control" id="txt_ruc"
                                            onkeypress="return soloNumeros(event)" autocomplete="off">
                                    </div>
                                    <div class="col-lg-8 mb-3">
                                        <label for="">Razon Social</label>
                                        <input type="text" class="form-control" id="txt_razon" autocomplete="off">
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-12 mb-3">
                                <label for="" class="text-danger">(*) Indica que los campos son obligatorios</label>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- END : Secondary card -->
            </div>

            <div class="col-md-6 mb-3">

                <!-- Info card -->
                <div class="card ">
                    <h5 class="card-header bg-primary text-white fw-bolder">Datos del Documento</h5>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-lg-12 mb-3">
                                <label for="">Procedimiento Administrativo (*)</label>
                                <select class="js-example-basic-single" id="select_tupa_d" style="width:100%" title="select your day">
                                </select>
                            </div>
                            <div class="col-lg-12 mb-3">
                                <label for="">Area de Destino (*)</label>
                                <select class="js-example-basic-single" id="select_destino_d" style="width:100%">
                                </select>
                            </div>
                            <div class="col-lg-6 mb-3">
                                <label for="">Tipo de Documento (*)</label>
                                <select class="js-example-basic-single" id="select_tipo" style="width:100%" title="select your day">
                                </select>
                            </div>
                            <div class="col-lg-6 mb-3">
                                <label for="">Nro Documento (*)</label>
                                <input type="text" class="form-control" id="txt_ndocumento" autocomplete="off">
                            </div>
                            
                            <div class="col-lg-12 mb-3">
                                <label for="">Descripcion del tramite (*)</label>
                                <textarea id="txt_asunto" rows="2" class="form-control" style="resize:none;"></textarea>
                            </div>
                            <div class="col-lg-8 mb-3">
                                <label for="" class="">Adjuntar Documento (*)</label>
                                <input type="file" class="form-control" id="txt_archivo">
                            </div>
                            <div class="col-lg-4 mb-3">
                                <label for="">Nro Folio (*)</label>
                                <input type="text" class="form-control" id="txt_folio" autocomplete="off">
                            </div>
                            <div class="col-lg-12 mb-3">
                                <div class="form-check form-check-inline">
                                    <input id="_dm-inlineCheckboxes" class="form-check-input" type="checkbox"
                                        autocomplete="off" value="option1" onclick="validar_informacion()">
                                    <label for="_dm-inlineCheckboxes" class="form-check-label fw-bolder"
                                        style="text-align:justify;">El presente tiene caracter de Declaración jurada, en
                                        caso de producirse fraude o falsedad, me someto a las sanciones que contempla la
                                        LEY.</label>
                                </div>
                            </div>
                            <div class="col-lg-12 mb-3">
                                <label for="" class="text-danger">(*) Indica que los campos son obligatorios</label>
                            </div>
                            <div class="col-lg-12">
                                <button onclick="Registrar_Tramite()" id="btn_registro"
                                    class="w-100 btn btn-warning btn-block">Enviar
                                    Tramite</button>
                            </div>

                        </div>
                    </div>
                </div>
                <!-- END : Info card -->

            </div>

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

<script>
$(document).ready(function() {
    $('.js-example-basic-single').select2({
        theme: "bootstrap-5",
        width: $(this).data('width') ? $(this).data('width') : $(this).hasClass('w-100') ? '100%' :
            'style',
        placeholder: $(this).data('placeholder'),
        placeholder: 'SELECCIONAR ',

    });
    traer_datosremitente();
    Cargar_Select_Tupa();
    Cargar_Select_Tipo();
    Cargar_Select_Area_Actual();

    
    
    $("#rad_presentacion1").on('click', function() {
        document.getElementById('div_juridico').style.display = "none";
    });
    $("#rad_presentacion2").on('click', function() {
        document.getElementById('div_juridico').style.display = "none";
    });
    $("#rad_presentacion3").on('click', function() {
        document.getElementById('div_juridico').style.display = "block";
    });


});

validar_informacion();

function validar_informacion() {
    if (document.getElementById('_dm-inlineCheckboxes').checked == false) {
        $("#btn_registro").addClass('disabled');
    } else {
        $("#btn_registro").removeClass('disabled');
    }
}
$('input[type="file"]').on('change', function() {
    var ext = $(this).val().split('.').pop();
    if ($(this).val() != '') {
        if (ext == "PDF" || ext == "pdf") {
            if ($(this)[0].files[0].size > 8048576) {
                Swal.fire("El archivo selecionado es demasiado pesado",
                    "<label style='color:#9B0000;'>seleccionar un archivo mas liviano</label>",
                    "warning");
                //$("#txtformato").val("");
                //$("#txt_archivo").val("");
                //$("#lb_archivo").html("Seleccionar Archivo");
                //return;
                //$("#btn_subir").prop("disabled",true);
            } else {
                //$("#btn_subir").attr("disabled",false);
            }
            $("#txtformato").val(ext);
        } else {
            $("#txt_archivo").val("");
            Swal.fire("Mensaje de Error", "Extensión no permitida: " + ext, "error");
        }
    }
});
</script>