<?php 
require "config/Conexion.php"; 

date_default_timezone_set('America/Lima'); // Establece la zona horaria de Perú
$fechaHoraActual = date("Y-m-d H:i");

?>
<!DOCTYPE html>
<html lang="es">
<head>
    <title>Campo Santo de la Paz Naturales</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="description" content="">
    <meta name="author" content="Author Name">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <link rel="shortcut icon" href="files/camposanto.png"/>
    <!-- <link rel="shortcut icon" href="../files/logo_principal.png"> -->

    <!-- DataTables CSS -->
    <link rel="stylesheet" href="static/lib/datatables-1.10.25/css/dataTables.bootstrap4.min.css"/>
    <link rel="stylesheet" href="static/lib/datatables-1.10.25/plugins/responsive-2.2.9/css/responsive.bootstrap4.min.css"/>

    <!--CSS-->
    <link rel="stylesheet" href="static/lib/bootstrap-4.6.0/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="static/lib/fontawesome-6.1.1/css/all.min.css"/>
    <link rel="stylesheet" href="static/lib/jquery-ui-1.12.1/jquery-ui.css"/>

     <!--Javascript-->
    <script src="static/lib/bootstrap-4.6.0/js/jquery.min.js"></script>
    <script src="static/lib/jquery-ui-1.12.1/jquery-ui.min.js"></script>
    <script src="static/lib/bootstrap-4.6.0/js/popper.min.js"></script>
    <script src="static/lib/bootstrap-4.6.0/js/bootstrap.min.js"></script>
    <script src="static/lib/adminlte-3.2.0/js/adminlte.min.js"></script>

    <!--Template-->
    <link rel="stylesheet" href="static/lib/adminlte-3.2.0/css/adminlte.css"/>
    <!--Styles-->
    <link rel="stylesheet" href="static/css/style.css"/>
   <!--Libs-->
    <script src="static/lib/bootstrap-daterangepicker-3.1/js/moment.min.js"></script>
    <script src="static/lib/bootstrap-daterangepicker-3.1/js/moment-with-locales.js"></script>
    <script src="static/lib/jquery-confirm-3.3.4/js/jquery-confirm.min.js"></script>
    <link rel="stylesheet" href="static/lib/jquery-confirm-3.3.4/css/jquery-confirm.min.css"/>
    <script src="static/lib/sweetalert2-11.0.16/js/sweetalert2.all.min.js"></script>
    <link rel="stylesheet" href="static/lib/sweetalert2-11.0.16/css/sweetalert2.min.css"/>
    <script src="static/lib/jquery-loading-overlay-2.1.7/js/loadingoverlay.min.js"></script>
    <script src="static/js/functions.js"></script>

    <link rel="stylesheet" href="static/lib/select2-4.0.13/css/select2.min.css">
    <script src="static/lib/select2-4.0.13/js/select2.min.js"></script>
    <script src="static/lib/select2-4.0.13/js/i18n/es.js"></script>
    
    <link rel="stylesheet" href="static/lib/select2-4.0.13/css/select2-bootstrap4.min.css">
    <script src="static/lib/tempusdominus-bootstrap-4.5.37.0/js/tempusdominus-bootstrap.js"></script>
    <link rel="stylesheet" href="static/lib/tempusdominus-bootstrap-4.5.37.0/css/tempusdominus-bootstrap.css"/> 
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
    <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
</head>
<style>
    #venta_listar thead th {
    background-color: #e32752;
    color: #ffffff;
    text-align: center;
  }
</style>
<body class="hold-transition layout-top-nav">
    <div class="wrapper">
        <!-- Header Template -->
        <header>
            <!-- Include the contents of 'vtc_header.html' -->
            <nav class="main-header navbar navbar-expand navbar-dark bg-primary">
                <ul class="navbar-nav">
                    <li class="nav-item">
                        <a class="nav-link cursor-pointer collapsedMenu" id="collapsedMenu" data-widget="pushmenu">
                            <i class="fas fa-bars"></i>
                        </a>
                    </li>
                    <li class="nav-item d-none d-sm-inline-block">
                        <a href="#" class="nav-link">Sistema Campo Santo</a>
                    </li>
                </ul>
                <ul class="navbar-nav ml-auto">
                    <li class="nav-item dropdown">
                        <a class="nav-link" data-toggle="dropdown" aria-expanded="false">
                            <i class="fas fa-map"></i> Ubicacion 
                        </a>
                        <div class="dropdown-menu dropdown-menu-lg dropdown-menu-right" style="left: inherit; right: 0;">
                            <span class="dropdown-header">Datos de tu conexión</span>
                            <div class="dropdown-divider"></div>
                            <div class="dropdown-divider"></div>
                            <a class="dropdown-item">
                                <p class="text-sm">Dispositivo</p>
                                <p class="text-sm text-muted">Navegador Web</p>
                            </a>
                            <div class="dropdown-divider"></div>
                            <div class="dropdown-divider"></div>
                            <a class="dropdown-item">
                                <p class="text-sm">Último acceso</p>
                                <p class="text-sm text-muted"> <?php
                                    date_default_timezone_set('America/Lima');
                                    echo date("Y-m-d H:i");
                                ?></p>
                            </a>
                        </div>
                    </li>
                        
                    </li>
                </ul>
            </nav>
        </header>
        <!-- Content Section -->
        <div  class="content-wrapper" >
             <section class="content" > 
                <div   class="d-flex justify-content-center align-items-center" style="min-height: calc(100vh - 150px);" id="formulario_consulta_cliente">
                    <div  class="login-box" style="width: 100%; max-width: 800px;">
                        <div class="card">
                            <div class="card-body login-card-body">
                                <br>
                                <label class="login-box-msg text-center fw-bold d-block"><i class="fa-solid fa-location-dot"></i> Consultar la Ubicacion del Pabellon</label>
                                    <div class="form-group">
                                        <label for="nombre_difunto">Nombre del Difunto:</label>
                                        <input type="text" class="form-control" id="nombre_difunto" maxlength="11" placeholder="Escriba su Nombre" >
                                    </div>

                                    <div class="form-group text-center">
                                        <button type="button" class="btn btn-primary btn-flat" onclick="consultarCliente()">
                                            <i class="fas fa-search"></i> Consultar Ubicacion
                                        </button>
                                    </div>
                                        <div  style="display: block;">
                                                <div class="border p-3 rounded" style="border: 2px solid #ced4da; background-color: #f8f9fa;">
                                                <table style="width:100%;" class="table table-bordered" id="venta_listar">
                                                    <thead>
                                                        <tr>
                                                        <th>Nombre Pabellon</th>
                                                        <th>Nivel</th>
                                                        <th>Columna</th>
                                                        </tr>
                                                    </thead>
                                                    <tbody></tbody>
                                                    </table>
                                                </div>
                                                 <div class="text-center mt-4">
                                                    <img src="files/pabellon/mapa.png" id="imagen_pabellon" alt="Mapa de Pabellones" class="img-fluid" style="max-width: 100%; height: auto;">
                                                </div>
                                        </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        </div>
        <!-- Footer Template -->
        <footer class="main-footer">
            <div class="text-center">
                © Copyright <strong>Campo Santo</strong>. Todos los derechos reservados<br>
                <a href="#" target="_blank">Desarrollado por el equipo de Tecnologia Campo Santo.</a>
            </div>
        </footer>
    </div>
   
    <script>
        // Example script for displaying error messages if they exist
        var errors = '';
        // Add messages dynamically here
        if (errors) {
            alert(errors); // Replace with your own error display logic
        }
    </script>
   
</body>
<!-- JavaScript for DataTable -->
    <script src="static/js/main.js"></script>
   
</html>
<script type="text/javascript">
    $(function () {
    $("#nombre_difunto").autocomplete({
        source: function (request, response) {
            $.ajax({
                url: "ajax/difunto.php?op=autocomplete",
                type: "GET",
                dataType: "json",
                data: { term: request.term },
                success: function (data) {
                    response(data);
                }
            });
        },
        minLength: 2,
        select: function (event, ui) {
            $("#nombre_difunto").val(ui.item.value);
            $("#nombre_difunto").data("iddifunto", ui.item.id); // guardamos el id
            return false;
        }
    });
});

function consultarCliente() {
    let nombre = $("#nombre_difunto").val();

    if (!nombre) {
        Swal.fire('Error', 'Por favor ingrese el nombre del difunto', 'warning');
        return;
    }
    // ✅ Limpiar la tabla antes de consultar
    $("#venta_listar tbody").empty();
    $("#venta_listar tbody").html(`
        <tr>
            <td colspan="3" class="text-center text-muted">Datos no disponibles</td>
        </tr>
    `);
    $.post("ajax/difunto.php?op=ubicacion_difunto", { nombre: nombre }, function (data) {
        let response = JSON.parse(data);
        let html = "";
        if (response.length > 0) {
             let imagen = response[0].imagen || "default.png"; // Imagen por defecto si no viene nada

            // Cambiar la imagen mostrada
            $("#imagen_pabellon").attr("src", "files/pabellon/" + imagen);
            response.forEach(dato => {
                html += `<tr>
                            <td>${dato.nombre_pabellon}</td>
                            <td>${dato.fila}</td>
                            <td>${dato.columna}</td>
                         </tr>`;
            });
        } else {
           html = `<tr>
                      <td colspan="3" class="text-center text-muted">Datos no disponibles</td>
                    </tr>`;
        }
        $("#venta_listar tbody").html(html);
    });
}
</script>