<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.18/dist/css/bootstrap-select.min.css">
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.2.0/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.13.1/css/dataTables.bootstrap5.min.css">
    <script src="https://kit.fontawesome.com/b05a604369.js" crossorigin="anonymous"></script>
    <link rel="shortcut icon" href="/img/DATT-Favicon.png" type="image/x-icon">
    <link
      href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css"
      rel="stylesheet"
    />
    <script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
    
    <script
      src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"
      integrity="sha512-2ImtlRlf2VVmiGZsjm9bEyhjGW4dU7B6TNwh/hx/iSByxNENtj3WVE6o/9Lj4TJeVXPi4bnOIMXFIJJAeufa0A=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    ></script>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
    <title>Buscador de coberturas</title>
</head>
<body style="background-color: gray;">
    <div style="display: flex; justify-content: center; align-items: center;">
        <h1 class="text-white">Buscador de coberturas</h1>
    </div>
    <div style="display: flex; justify-content: center; align-items: center;">
        <input type="text" name="Buscador" id="Buscador" class="form-control" style="width: 50%;" placeholder="Ingrese el codigo postal o municipio">
    </div>
    <div style="display: flex; justify-content: center; align-items: center;">
        <div>
            <button class="btn btn-success my-3" id="Buscar">Buscar</button>
        </div>
    </div>
    <div style="display: flex; justify-content: center; align-items: center;" id="alerta-buscando" hidden>
        <div style="width: 50%;">
            <div class="alert alert-info" role="alert">
                <div class="spinner-border spinner-border-sm text-info" role="status">
                    <span class="visually-hidden">Loading...</span>
                  </div> Buscando resultados, favor de esperar ...
              </div>
        </div>
    </div>
    <div style="display: flex; justify-content: center; align-items: center;" id="tabla-de-coberturas" hidden>
        <div style="width: 50%;">
            <div class="table-responsive">
                <table class="table" id="Tabla-coberturas" style="color: white;">
                    <thead>
                        <tr>
                            <th scope="col">Codigo Postal</th>
                            <th scope="col">Municipio</th>
                            <th scope="col">Localidad</th>
                            <th scope="col">Paqueteria</th>
                        </tr>
                    </thead>
                    <tbody>
        
                    </tbody>
                </table>
            </div>
        </div>
    </div>




<script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
<script src="https://cdn.datatables.net/1.13.1/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.3.6/js/dataTables.buttons.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
<script src="https://cdn.datatables.net/buttons/2.3.6/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.3.6/js/buttons.print.min.js"></script>
<script src="https://cdn.datatables.net/1.13.1/js/dataTables.bootstrap5.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<script>
    document.getElementById("Buscar").addEventListener("click", function(){
        $.ajax({
            url: '/servicios-datt/coberturas/buscar',
            data: {Elemento: document.getElementById("Buscador").value},
            method: 'POST',
            beforeSend: ()=>{
                document.getElementById("alerta-buscando").removeAttribute("hidden", "");
            },
            success: (res)=>{
                document.getElementById("tabla-de-coberturas").removeAttribute("hidden", "");
                document.getElementById("alerta-buscando").setAttribute("hidden", "");
                $("#Tabla-coberturas > tbody").empty();
                    
                    res.Mensaje.forEach((data) => {
                        
                        var rows = "<tr>" +
                            "<td>" + data.db_zip + "</td>" +
                            "<td>" + data.db_municipio + "</td>" +
                            "<td>" + data.db_localidad + "</td>" +
                            `<td>${data.db_paqueteria}</td>` +
                            "</tr>";
                        $('#Tabla-coberturas tbody').append(rows);
                    });
            },
            error: (error)=>{
                Swal.fire('No se encontraron resultados')
            }
        })
    })
</script>
</body>
</html>