<!-- <video class="bg-video" playsinline="playsinline" autoplay="autoplay" muted="muted" loop="loop"><source src="main/assets/video/bg.mp4" type="video/mp4" /></video> -->
<!-- Masthead-->
<div class="masthead">
    <div class="masthead-content text-white">
        <div class="container-fluid px-4 px-lg-0" id="paso1">
            <h1 class="fst-italic lh-1 mb-4">Control de accesos</h1>
            <!-- * * * * * * * * * * * * * * *-->
            <form id="busquedaFrm" name="busquedaFrm" method="POST" action="javascript:app.evaluar();" autocomplete="off" class="needs-validation" novalidate>
                <div class="row">
                    <div class="col-sm-12 col-md-12 mb-2" id="tipos_documento">
                        <label class="form-label">Tipo de documento</label>
                        <div class="row">
                            <div class="col-sm-4 col-md-4">
                                <div class="d-grid">
                                    <button onclick="app.set_tipo_documento(this,'DUI');" type="button" class="btn btn-lg btn-primary float-start">
                                        <i class="fas fa-check"></i>
                                        DUI
                                    </button>
                                </div>
                            </div>
                            <div class="col-sm-4 col-md-4"></div>
                            <div class="col-sm-4 col-md-4">
                                <div class="d-grid">
                                    <button onclick="app.set_tipo_documento(this,'Licencia');" type="button" class="btn btn-lg btn-secondary float-end">
                                        <i class="fas"></i>
                                        Licencia
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-12 col-md-12 td_container" id="dui_container">
                        <div class="row">
                            <div class="col-sm-9 col-md-9">
                                <label class="form-label" for="txtDui">DUI <span class="required">*</span></label>
                                <input type="text" class="form-control" id="txtDui" name="txtDui" placeholder="DUI" required onkeyup="app.validate(this.value);">
                                <div class="invalid-feedback">
                                    Por favor ingrese un el número de DUI.
                                </div>
                            </div>
                            <div class="col-sm-3 col-md-3">
                                <div class="row">
                                    <div class="col-sm-4 col-md-4">
                                        <label class="form-label" for="">&nbsp;</label><br />
                                        <span style="margin-top:25px;">-</span>
                                    </div>
                                    <div class="col-sm-8 col-md-8">
                                        <label class="form-label">&nbsp;</label>
                                        <input type="text" id="txtComplemento" name="txtComplemento" class="form-control" placeholder="" required>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-12 col-md-12 d-none td_container" id="licencia_container">
                        <label for="txtLicencia" class="form-label">Licencia <span class="required">*</span></label>
                        <input type="text" class="form-control" id="txtLicencia" name="txtLicencia" placeholder="Licencia">
                        <div class="invalid-feedback">
                            Por favor ingrese un el número de licencia.
                        </div>
                    </div>
                </div>
                <div class="row mt-2" id="personal_data" style="display: none;">
                    <div class="col-sm-12 col-md-12 mayusculas">
                        <label for="txtNombre">Nombre <span class="required">*</span></label>
                        <input type="text" class="form-control" id="txtNombre" name="txtNombre" placeholder="Nombre" required readonly>
                        <div class="invalid-feedback">
                            Por favor ingrese un nombre.
                        </div>
                    </div>
                </div>
                <div class="row mt-3">
                    <div class="col-sm-12 col-md-12">
                        <div class="row" id="main-button">
                            <div class="col-sm-4 col-md-4"></div>
                            <div class="col-sm-4 col-md-4">
                                <div class="d-grid gap-2">
                                    <button type="button" class="btn btn-primary btn-lg" onclick="app.busqueda_manual();">
                                        <i class="fa-solid fa-search"></i> Buscar
                                    </button>
                                </div>
                            </div>
                            <div class="col-sm-4 col-md-4"></div>
                        </div>
                        <div class="row" id="form-button" style="display: none;">
                            <div class="col-sm-2 col-md-2"></div>
                            <div class="col-sm-4 col-md-4">
                                <div class="d-grid gap-2">
                                    <button type="submit" class="btn btn-primary btn-lg" form="busquedaFrm">
                                        <i class="fa-solid fa-arrow-right"></i> Siguiente
                                    </button>
                                </div>
                            </div>
                            <div class="col-sm-4 col-md-4">
                                <div class="d-grid gap-2">
                                    <button type="button" class="btn btn-danger btn-lg" onclick="app.reset();">
                                        <i class="fa-solid fa-circle-xmark"></i> Cancelar
                                    </button>
                                </div>
                            </div>
                            <div class="col-sm-2 col-md-2"></div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
        <div class="container-fluid px-4 px-lg-0" id="paso2" style="display: none;">
            <h1 class="fst-italic lh-1 mb-4">Control de accesos</h1>
            <div class="row">
                <div class="col-sm-12 col-md-12">
                    <label>DUI:</label>
                    <span class="fw-bold" id="spn_dui"></span>
                </div>
                <div class="col-sm-12 col-md-12">
                    <label>Nombre completo:</label>
                    <span class="fw-bold" id="spn_nombre"></span>
                </div>
            </div>
            <div id="poligonos" class="mt-3">
                <h2 class="fst-italic lh-1 mb-4">Seleccionar polígono</h2>
                <div class="row" id="poligonos_container">
                </div>
                <div class="row mt-2">
                    <div class="col-sm-4 col-md-4"></div>
                    <div class="col-sm-4 col-md-4">
                        <div class="d-grid gap-2">
                            <button type="button" class="btn btn-lg btn-danger" onclick="app.reset();">
                                <i class="fa-solid fa-trash-can"></i> Salir
                            </button>
                        </div>
                    </div>
                    <div class="col-sm-4 col-md-4"></div>
                </div>
            </div>
            <div id="casas" class="mt-3" style="display: none;">
                <h2 class="fst-italic lh-1 mb-4">Especificar casa (Polígono <span id="numero_poligono"></span>)</h2>
                <form id="casaFrm" method="POST" accept-charset="utf-8" action="javascript:app.selectCasa()" class="needs-validation" novalidate>
                    <div class="row">
                        <div class="col-sm-12 col-md-12">
                            <label for="txtCasa">Casa <span class="required">*</span></label>
                            <div class="input-group">
                                <input type="text" class="form-control form-control-lg" id="txtCasa" name="txtCasa" placeholder="Casa" required>
                                <button class="btn btn-danger" type="button" id="button-addon2" onclick="javascript:document.getElementById('txtCasa').value = '';">
                                    <i class="fa-solid fa-eraser"></i>
                                </button>
                                <div class="invalid-feedback">
                                    Por favor ingrese un número de casa.
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-12 col-md-12 mt-2">
                            <div class="row">
                                <div class="col-sm-3 col-md-3 mt-2">
                                    <div class="d-grid gap-2">
                                        <button type="button" class="btn btn-secondary btn-lg" onclick="app.numeroCasa(1);">
                                            1
                                        </button>
                                    </div>
                                </div>
                                <div class="col-sm-3 col-md-3 mt-2">
                                    <div class="d-grid gap-2">
                                        <button type="button" class="btn btn-secondary btn-lg" onclick="app.numeroCasa(2);">
                                            2
                                        </button>
                                    </div>
                                </div>
                                <div class="col-sm-3 col-md-3 mt-2">
                                    <div class="d-grid gap-2">
                                        <button type="button" class="btn btn-secondary btn-lg" onclick="app.numeroCasa(3);">
                                            3
                                        </button>
                                    </div>
                                </div>
                                <div class="col-sm-3 col-md-3 mt-2">
                                    <div class="d-grid gap-2">
                                        <button type="button" class="btn btn-secondary btn-lg" onclick="app.numeroCasa(4);">
                                            4
                                        </button>
                                    </div>
                                </div>
                                <div class="col-sm-3 col-md-3 mt-2">
                                    <div class="d-grid gap-2">
                                        <button type="button" class="btn btn-secondary btn-lg" onclick="app.numeroCasa(5);">
                                            5
                                        </button>
                                    </div>
                                </div>
                                <div class="col-sm-3 col-md-3 mt-2">
                                    <div class="d-grid gap-2">
                                        <button type="button" class="btn btn-secondary btn-lg" onclick="app.numeroCasa(6);">
                                            6
                                        </button>
                                    </div>
                                </div>
                                <div class="col-sm-3 col-md-3 mt-2">
                                    <div class="d-grid gap-2">
                                        <button type="button" class="btn btn-secondary btn-lg" onclick="app.numeroCasa(7);">
                                            7
                                        </button>
                                    </div>
                                </div>
                                <div class="col-sm-3 col-md-3 mt-2">
                                    <div class="d-grid gap-2">
                                        <button type="button" class="btn btn-secondary btn-lg" onclick="app.numeroCasa(8);">
                                            8
                                        </button>
                                    </div>
                                </div>
                                <div class="col-sm-3 col-md-3 mt-2">
                                    <div class="d-grid gap-2">
                                        <button type="button" class="btn btn-secondary btn-lg" onclick="app.numeroCasa(9);">
                                            9
                                        </button>
                                    </div>
                                </div>
                                <div class="col-sm-3 col-md-3 mt-2">
                                    <div class="d-grid gap-2">
                                        <button type="button" class="btn btn-secondary btn-lg" onclick="app.numeroCasa(0);">
                                            0
                                        </button>
                                    </div>
                                </div>
                                <div class="col-sm-3 col-md-3 mt-2">
                                    <div class="d-grid gap-2">
                                        <button type="submit" class="btn btn-primary btn-lg" form="casaFrm">
                                            Siguiente
                                        </button>
                                    </div>
                                </div>
                                <div class="col-sm-3 col-md-3 mt-2">
                                    <div class="d-grid gap-2">
                                        <button type="button" class="btn btn-danger btn-lg" onclick="app.reset();">
                                            <i class="fa-solid fa-trash-can"></i> Salir
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
            <div id="justificacion" class="mt-3" style="display: none;">
                <h4 class="fst-italic lh-1 mb-4">Motivo de visita (<span id="numero_casa"></span>)</h4>
                <div class="row">
                    <div class="col-sm-6 col-md-6 mt-2">
                        <div class="d-grid gap-2">
                            <button type="button" onclick="app.guardar_visita('Visita de trabajo')" class="btn btn-lg btn-primary">
                                Visita de trabajo
                            </button>
                        </div>
                    </div>
                    <div class="col-sm-6 col-md-6 mt-2">
                        <div class="d-grid gap-2">
                            <button type="button" onclick="app.guardar_visita('Visita familiar')" class="btn btn-lg btn-primary">
                                Visita familiar
                            </button>
                        </div>
                    </div>
                    <div class="col-sm-6 col-md-6 mt-2">
                        <div class="d-grid gap-2">
                            <button type="button" onclick="app.guardar_visita('Amistades')" class="btn btn-lg btn-primary">
                                Amistades
                            </button>
                        </div>
                    </div>
                    <div class="col-sm-6 col-md-6 mt-2">
                        <div class="d-grid gap-2">
                            <button type="button" onclick="app.guardar_visita('Proveedor')" class="btn btn-lg btn-primary">
                                Proveedor
                            </button>
                        </div>
                    </div>
                    <div class="col-sm-6 col-md-6 mt-2">
                        <div class="d-grid gap-2">
                            <button type="button" onclick="app.guardar_visita('Transporte de residentes')" class="btn btn-lg btn-primary">
                                Transporte de residentes
                            </button>
                        </div>
                    </div>
                    <div class="col-sm-6 col-md-6 mt-2">
                        <div class="d-grid gap-2">
                            <button type="button" onclick="app.guardar_visita('Delivery')" class="btn btn-lg btn-primary">
                                Delivery
                            </button>
                        </div>
                    </div>
                </div>
                <div class="row mt-2">
                    <div class="col-sm-4 col-md-4"></div>
                    <div class="col-sm-4 col-md-4">
                        <div class="d-grid gap-2">
                            <button type="button" class="btn btn-lg btn-danger" onclick="app.reset();">
                                <i class="fa-solid fa-trash-can"></i> Salir
                            </button>
                        </div>
                    </div>
                    <div class="col-sm-4 col-md-4"></div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="ubicacionMdl" data-bs-backdrop="static" data-bs-keyboard="false">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Ubicación</h5>
                <!-- <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> -->
            </div>
            <div class="modal-body">
                <form action="javascript:ubicacion.guardar()" id="ubicacionFrm" name="ubicacionFrm" method="POST" class="needs-validation" accept-charset="utf-8" novalidate>
                    <div class="row">
                        <div class="col-sm-12 col-md-12">
                            <label for="cboSucursal">Sucursal <span class="required">*</span></label>
                            <select class="ubicacionCbo" title="" id="cboSucursal" required onchange="ubicacion.getCluster(this.value);">
                                <option value="">seleccione</option>
                            </select>
                            <div class="invalid-feedback">
                                Por favor seleccione una sucursal.
                            </div>
                        </div>
                        <div class="col-sm-12 col-md-12">
                            <label for="cboCluster">Cluster <span class="required">*</span></label>
                            <select class="ubicacionCbo" title="" id="cboCluster" required>
                                <option value="">seleccione</option>
                            </select>
                            <div class="invalid-feedback">
                                Por favor seleccione un cluster.
                            </div>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="submit" class="btn btn-primary" form="ubicacionFrm">
                    <i class="fa-solid fa-check-circle"></i> Guardar
                </button>
            </div>
        </div>
    </div>
</div>
<?php
$jsFiles = ['visitas'];
