{{-- 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-4">
                <div class="row">

                    <!-- 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 mb-3">
                            {{-- field --}}
                            <div class="col-xl-12 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>
                        </div>

                        {{-- row --}}
                        <div class="row m-0 p-0 col-xl-12 col-md-12 col-sm-12 col-12 mb-3">
                            {{-- field --}}
                            <div class="col-xl-12 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>
                        </div>


                        {{-- row --}}
                        <div class="row m-0 p-0 col-xl-12 col-md-12 col-sm-12 col-12 mb-3">
                            {{-- field --}}
                            <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 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>
                                    {{-- combobox --}}
                                    <option selected disabled value="">Seleccione un documento</option>
                                </select>
                            </div>
                            {{-- field --}}
                            <div class="col-xl-4 col-md-4 col-sm-4 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>
                            {{-- field --}}
                            <div class="col-xl-4 col-md-4 col-sm-4 col-12 mb-3">
                                <label for="txt_numero_documento" class="form-label text-primary">Número de Documento
                                    @include('include.span.obligatory')
                                </label>
                                <input id="txt_numero_documento" name="txt_numero_documento" type="text"
                                    class="form-control form-control-sm" autocomplete="off" required>
                                @include('include.div.invalid-feedback')
                                {{-- mensaje de error campo vacio --}}
                            </div>
                        </div>

                        {{-- row --}}
                        <div class="row m-0 p-0 col-xl-12 col-md-12 col-sm-12 col-12 mb-3">
                            {{-- field --}}
                            <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')
                                {{-- mensaje de error campo vacio --}}
                            </div>
                            {{-- field --}}
                            <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')
                                {{-- mensaje de error campo vacio --}}
                            </div>
                            {{-- field --}}
                            <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')
                                {{-- mensaje de error campo vacio --}}
                            </div>
                        </div>


                        {{-- row --}}
                        <div class="row m-0 p-0 col-xl-12 col-md-12 col-sm-12 col-12 mb-3">
                            {{-- field --}}
                            <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>
                                    {{-- combobox --}}
                                </select>
                            </div>
                        </div>


                        {{-- row --}}
                        <div class="row m-0 p-0 col-xl-12 col-md-12 col-sm-12 col-12 mb-3">
                            {{-- field --}}
                            <div class="col-xl-4 col-md-4 col-sm-4 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>
                            {{-- field --}}
                            <div class="col-xl-4 col-md-4 col-sm-4 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>
                            {{-- field --}}
                            <div class="col-xl-4 col-md-4 col-sm-4 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>

                        {{-- row --}}
                        <div class="row m-0 p-0 col-xl-12 col-md-12 col-sm-12 col-12 mb-3">
                            {{-- field --}}
                            <div class="col-xl-12 col-md-12 col-sm-12 col-12 mb-3">
                                <label for="txt_folios" class="form-label text-primary">Dirección
                                    @include('include.span.obligatory')
                                </label>
                                <input id="txt_folios" name="txt_folios" type="text"
                                    class="form-control form-control-sm text-uppercase" autocomplete="off" required>
                                @include('include.div.invalid-feedback')
                                {{-- mensaje de error campo vacio --}}
                            </div>
                        </div>

                        {{-- row --}}
                        <div class="row m-0 p-0 col-xl-12 col-md-12 col-sm-12 col-12 mb-3">
                            {{-- field --}}
                            <div class="col-xl-6 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')
                                {{-- mensaje de error campo vacio --}}
                            </div>

                            {{-- field --}}
                            <div class="col-xl-6 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')
                                {{-- mensaje de error campo vacio --}}
                            </div>

                        </div>


                        {{-- row --}}
                        <div class="row m-0 p-0 col-xl-12 col-md-12 col-sm-12 col-12 mb-3">
                            {{-- field --}}
                            <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')
                                {{-- mensaje de error campo vacio --}}
                            </div>
                        </div>

                        {{-- row --}}
                        <div class="row m-0 p-0 col-xl-12 col-md-12 col-sm-12 col-12 mb-3">
                            {{-- field --}}
                            <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')
                                {{-- mensaje de error campo vacio --}}
                            </div>
                        </div>

                        {{-- row --}}
                        <div class="row m-0 p-0 col-xl-12 col-md-12 col-sm-12 col-12 mb-3">
                            {{-- field --}}
                            <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')
                                {{-- mensaje de error campo vacio --}}
                            </div>

                            {{-- field --}}
                            <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')
                                {{-- mensaje de error campo vacio --}}
                            </div>

                        </div>

                        {{-- row --}}
                        <div class="row m-0 p-0 col-xl-12 col-md-12 col-sm-12 col-12 mb-3">
                            <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>
                    </fieldset>

                    <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>
            </div>
            <div class="card-footer text-lg-end text-end">
                <button id="btnRegistrarTD" type="button" class="btn btn-primary btn-sm ">Registrar</button>
            </div>
        </div>
    </div>
    <!-- /tab-content -->
</form>
{{-- form end --}}