{{-- form starts --}}
<form class="needs-validation" id="form" name="form" novalidate>
    @csrf
    <!-- /tab-content -->
    <div class="tab-content" id="myTabContent-2">
        <div class="tab-pane fade show active" id="withoutSpace" Aulae="tabpanel" aria-labelledby="home-tab-2">
            <div class="card-body p-3">
                <div class="row">
                    <div class="row col-xl-6 m-0">
                        <!-- data -->
                        <fieldset style="border: 1px groove #ddd !important; padding: 0 1.4em 1.4em 1.4em !important; margin: 0 0 1.5em 0 !important; -webkit-box-shadow: 0px 0px 0px 0px #000; box-shadow: 0px 0px 0px 0px #000;">
                            <legend class="text-primary mt-2 mb-3" style="font-size: 1.2em !important; font-weight: bold !important; text-align: left !important;">
                                DATOS DEL SOLICITANTE
                            </legend>
                            {{-- row --}}
                            <div class="row m-0 p-0 col-xl-12 col-md-12 col-sm-12 col-12">
                                <div class="col-xl-4 col-md-4 col-sm-4 col-12 mb-3">
                                    <label for="txt_td_tipo_solicitante" class="form-label text-primary">Tipo de Solicitante
                                        @include('include.span.obligatory')
                                    </label>
                                    <select id="txt_td_tipo_solicitante" name="txt_td_tipo_solicitante"
                                        class="default-select  form-control form-control-sm" required>
                                        <option selected disabled value="">Seleccione una opción</option>
                                    </select>
                                </div>
                                <div id="div-txt_ruc" class="col-xl-4 col-md-4 col-sm-4 col-12 mb-3">
                                    <label for="txt_ruc" class="form-label text-primary">Nro de RUC
                                        @include('include.span.obligatory')
                                    </label>
                                    <div class="input-group">
                                        <input id="txt_ruc" name="txt_ruc" type="text"
                                            class="form-control form-control-sm text-uppercase" autocomplete="off" required>
                                        <a class="input-group-text bg-primary text-white btn btn-sm " href="javascript:void(0);" id="btn-querydata1" data-bs-placement="top" title="Consultar RENIEC"> <i class="fa fa-search"></i> </a>
                                        @include('include.div.invalid-feedback')
                                    </div>
                                </div>
                                <div id="div-txt_razon_social" class="col-xl-4 col-md-4 col-sm-4 col-12 mb-3">
                                    <label for="txt_razon_social" class="form-label text-primary">Razon Social
                                        @include('include.span.obligatory')
                                    </label>
                                    <input id="txt_razon_social" name="txt_razon_social" type="text"
                                        class="form-control form-control-sm text-uppercase" autocomplete="off" required>
                                    @include('include.div.invalid-feedback')
                                </div>
                                <div class="col-xl-6 col-md-6 col-sm-6 col-12 mb-3">
                                    <label for="txt_identification_type" class="form-label text-primary">Tipo de Documento
                                        @include('include.span.obligatory')
                                    </label>
                                    <select id="txt_identification_type" name="txt_identification_type"
                                        class="default-select  form-control form-control-sm" required>
                                        {{-- combobox --}}
                                    </select>
                                </div>
                                <div class="col-xl-6 col-md-6 col-sm-6 col-12 mb-3">
                                    <label for="txt_numero_documento" class="form-label text-primary">Número de Documento
                                        @include('include.span.obligatory')
                                    </label>
                                    <div class="input-group">
                                        <input id="txt_numero_documento" name="txt_numero_documento" type="text"
                                            class="form-control form-control-sm" autocomplete="off" required>
                                        <a class="input-group-text bg-primary text-white btn btn-sm " href="javascript:void(0);" id="btn-querydata2" data-bs-placement="top" title="Consultar RENIEC"> <i class="fa fa-search"></i> </a>
                                        @include('include.div.invalid-feedback')
                                    </div>
                                </div>
                                <div class="col-xl-4 col-md-4 col-sm-4 col-12 mb-3">
                                    <label for="txt_apellido_pa" class="form-label text-primary">Apellido Paterno
                                        @include('include.span.obligatory')
                                    </label>
                                    <input id="txt_apellido_pa" name="txt_apellido_pa" type="text"
                                        class="form-control form-control-sm text-uppercase" autocomplete="off" required>
                                    @include('include.div.invalid-feedback')
                                </div>
                                <div class="col-xl-4 col-md-4 col-sm-4 col-12 mb-3">
                                    <label for="txt_apellido_ma" class="form-label text-primary">Apellido Materno
                                        @include('include.span.obligatory')
                                    </label>
                                    <input id="txt_apellido_ma" name="txt_apellido_ma" type="text"
                                        class="form-control form-control-sm text-uppercase" autocomplete="off" required>
                                    @include('include.div.invalid-feedback')
                                </div>
                                <div class="col-xl-4 col-md-4 col-sm-4 col-12 mb-3">
                                    <label for="txt_nombres" class="form-label text-primary">Nombres
                                        @include('include.span.obligatory')
                                    </label>
                                    <input id="txt_nombres" name="txt_nombres" type="text"
                                        class="form-control form-control-sm text-uppercase" autocomplete="off" required>
                                    @include('include.div.invalid-feedback')
                                </div>
                                {{-- <div class="col-xl-12 col-md-12 col-sm-12 col-12 mb-3">
                                    <label for="txt_programa" class="form-label text-primary">Programa de Estudio del
                                        Solicitante
                                        @include('include.span.obligatory')
                                    </label>
                                    <select id="txt_programa" name="txt_programa" class="default-select  form-control form-control-sm" required>
                                    </select>
                                </div> --}}
                                <div class="col-xl-4 col-md-6 col-sm-6 col-12 mb-3">
                                    <label for="txt_correo" class="form-label text-primary">Correo eléctronico
                                        @include('include.span.obligatory')
                                    </label>
                                    <input id="txt_correo" name="txt_correo" type="text"
                                        class="form-control form-control-sm" autocomplete="off" required>
                                    @include('include.div.invalid-feedback')
                                </div>
                                <div class="col-xl-4 col-md-6 col-sm-6 col-12 mb-3">
                                    <label for="txt_celular" class="form-label text-primary">Celular
                                        @include('include.span.obligatory')
                                    </label>
                                    <input id="txt_celular" name="txt_celular" type="text"
                                        class="form-control form-control-sm" autocomplete="off" required>
                                    @include('include.div.invalid-feedback')
                                </div>
                                <div class="col-xl-4 col-md-6 col-sm-12 col-12 mb-3">
                                    <label for="txt_direccion" class="form-label text-primary">Dirección
                                        @include('include.span.obligatory')
                                    </label>
                                    <input id="txt_direccion" name="txt_direccion" type="text"
                                        class="form-control form-control-sm text-uppercase" autocomplete="off" required>
                                    @include('include.div.invalid-feedback')
                                </div>
                                <div class="col-xl-4 col-md-4 col-sm-12 col-12 mb-3">
                                    <label for="txt_departamento" class="form-label text-primary">Departamento
                                        @include('include.span.obligatory')
                                    </label>
                                    <select id="txt_departamento" name="txt_departamento"
                                        class="form-control form-control-sm" data-live-search="true" required>
                                        <!-- combobox -->
                                        @include('include.combobox.departamento')
                                    </select>
                                </div>
                                <div class="col-xl-4 col-md-4 col-sm-12 col-12 mb-3">
                                    <label for="txt_provincia" class="form-label text-primary">Provincia
                                        @include('include.span.obligatory')
                                    </label>
                                    <select id="txt_provincia" name="txt_provincia" class="form-control form-control-sm"
                                        data-live-search="true" required>
                                        <!-- combobox dinamico -->
                                        <option selected disabled value="">Seleccione opción</option>
                                    </select>
                                </div>
                                <div class="col-xl-4 col-md-4 col-sm-12 col-12 mb-3">
                                    <label for="txt_distrito" class="form-label text-primary">Distrito
                                        @include('include.span.obligatory')
                                    </label>
                                    <select id="txt_distrito" name="txt_distrito" class="form-control form-control-sm"
                                        data-live-search="true" required>
                                        <!-- combobox dinamico -->
                                        <option selected disabled value="">Seleccione opción</option>
                                    </select>
                                </div>
                            </div>
                        </fieldset>
                    </div>
                    <div class="row col-xl-6 m-0">
                        <!-- data -->
                        <fieldset style="border: 1px groove #ddd !important; padding: 0 1.4em 1.4em 1.4em !important; margin: 0 0 1.5em 0 !important; -webkit-box-shadow: 0px 0px 0px 0px #000; box-shadow: 0px 0px 0px 0px #000;">
                            <legend class="text-primary mt-2 mb-3" style="font-size: 1.2em !important; font-weight: bold !important; text-align: left !important;">
                                DATOS DEL DOCUMENTO 
                            </legend>
                            {{-- row --}}
                            <div class="row m-0 p-0 col-xl-12 col-md-12 col-sm-12 col-12">
                                <div class="col-xl-6 col-md-12 col-sm-12 col-12 mb-3">
                                    <label for="txt_td_tipo" class="form-label text-primary">Tipo de Trámite
                                        @include('include.span.obligatory')
                                    </label>
                                    <select id="txt_td_tipo" name="txt_td_tipo"
                                        class="default-select  form-control form-control-sm" required>
                                        {{-- combobox --}}
                                    </select>
                                </div>
                                {{-- row --}}
                                <div class="col-xl-6 col-md-12 col-sm-12 col-12 mb-3">
                                    <label for="txt_area" class="form-label text-primary">Área a la que se dirige
                                        @include('include.span.obligatory')
                                    </label>
                                    <select id="txt_area" name="txt_area"
                                        class="default-select  form-control form-control-sm" required>
                                        {{-- combobox --}}
                                    </select>
                                </div>
                                {{-- row --}}
                                <div class="col-xl-12 col-md-12 col-sm-12 col-12 mb-3">
                                    <label for="txt_asunto" class="form-label text-primary">Asunto
                                        @include('include.span.obligatory')
                                    </label>
                                    <textarea id="txt_asunto" name="txt_asunto" rows="2" class="form-control" placeholder="Ingrese fundamentación de la solicitud" required></textarea>
                                    @include('include.div.invalid-feedback')
                                </div>
                                {{-- row --}}
                                {{-- <div class="col-xl-12 col-md-12 col-sm-12 col-12 mb-3">
                                    <label for="txt_documentos" class="form-label text-primary">Documentos que se adjuntan</label>
                                    <textarea id="txt_documentos" name="txt_documentos" rows="2" class="form-control" placeholder="Ingrese la lista documentos adjuntos en su archivo"></textarea>
                                    @include('include.div.invalid-feedback')
                                </div> --}}
                                <div class="col-xl-6 col-md-6 col-sm-6 col-12 mb-3">
                                    <label for="txt_folios" class="form-label text-primary">N°
                                        Folios
                                        @include('include.span.obligatory')
                                    </label>
                                    <input id="txt_folios" name="txt_folios"
                                        placeholder="Digite la cantidad de hojas de su documento" type="number"
                                        maxlength="2" onkeypress='return event.charCode >= 48 && event.charCode <= 57'
                                        class="form-control form-control-sm" autocomplete="off" required>
                                    @include('include.div.invalid-feedback')
                                </div>
                                <div class="col-xl-6 col-md-6 col-sm-6 col-12 mb-3">
                                    <label for="txt_fechadoc" class="form-label text-primary">Fecha
                                        documento
                                        @include('include.span.obligatory')
                                    </label>
                                    <input id="txt_fechadoc" name="txt_fechadoc" type="text"
                                        class="form-control form-control-sm text-uppercase" autocomplete="off" readonly
                                        required>
                                    @include('include.div.invalid-feedback')
                                </div>
                                <div class="col-xl-6 col-lg-6 col-md-6 col-sm-6 col-12 mb-3">
                                    <label for="documento" class="form-label text-primary">Inserte
                                        Documento
                                        @include('include.span.obligatory')
                                    </label>
                                    <input class="form-control form-control-sm" type="file" id="documento"
                                        name="documento" accept=".pdf" required>
                                    <div class="invalid-feedback" id="validate_message_File_docuemento">
                                        Inserte los archivos requeridos.
                                    </div>
                                </div>
                                <div class="col-xl-6 col-md-6 col-sm-6 col-12 mb-3">
                                    <label for="check_tyc" class="form-label text-primary">Términos y condiciones
                                        @include('include.span.obligatory')
                                    </label>
                                    <div class="form-check mb-2">
                                        <input id="check_tyc" name="check_tyc" type="checkbox" class="form-check-input"
                                            required>
                                        <label class="form-check-label">Acepto los términos y condiciones</label>
                                    </div>
                                </div>
                                <div class="col-xl-6 col-md-6 col-sm-6 col-12 mb-3">
                                    <button id="btnRegistrarTD" type="button" class="btn btn-primary btn-sm ">Enviar Trámite</button>
                                </div>
                            </div>
                        </fieldset>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- /tab-content -->
</form>
{{-- form end --}}

{{-- <div class="row col-xl-12">
    <fieldset style="border: 1px groove #ddd !important; padding: 0 1.4em 1.4em 1.4em !important; margin: 0 0 1.5em 0 !important; -webkit-box-shadow: 0px 0px 0px 0px #000;box-shadow: 0px 0px 0px 0px #000;">
        <legend class="text-primary mt-2"
            style="font-size: 1.2em !important;
        font-weight: bold !important;
        text-align: left !important;">
            DATOS DEL CONTACTO
        </legend>
        <div class="row m-0 p-0 col-xl-12 col-md-12 col-sm-12 col-12 mb-3">
            <!-- Nombres -->
            <div class="gmail-box d-flex justify-content-start">
                <a href="https://api.whatsapp.com/send?phone=994025833&amp;text=Saludos cordinales, deseO comunicarme con usted para:"
                    target="_blank" class="gmail">
                    <h4><i class="fa-brands fa-whatsapp"></i>
                        ###-###-###</h4>
                </a>
                <a target="_blank" href="mailto:dev@silfersystem.com" class="gmail px-5">
                    <h4><i class="fa fa-envelope"></i>
                        dev@silfersystem.com</h4>
                </a>
            </div>
        </div>
    </fieldset>
</div> --}}