<?php
ob_start();
ini_set('session.gc_maxlifetime', 14400);
session_set_cookie_params(14400);
session_start();

if (!isset($_SESSION["nombre"]))
{
    header("Location: ../../login/login.php");
}
else
{
    require '../header.php';

if($_SESSION['cliente']==1){

    $idpersona=$_GET['idpersona'];

    $sql_persona= "SELECT nombre FROM persona WHERE idpersona='$idpersona'";  
    $fila = ejecutarConsultaSimpleFila($sql_persona);
    $nombre_persona = $fila['nombre'];

    $sql_confi= "SELECT api_map FROM configuracion";  
    $filas = ejecutarConsultaSimpleFila($sql_confi);
    $api = $filas['api_map'];

?>

            <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
            <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
            <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
            <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=<?php echo $api; ?>"></script>
            
            <style>
                #geomap{
                width: 100%;
                height: 400px;
                }
            </style>
            <div class="content-wrapper">
                <!-- Breadcrumb Section -->
                <section class="content-header">
                    <div class="container-fluid">
                        <div class="row">
                            <div class="col-sm-12">
                                <nav aria-label="breadcrumb">
                                    <ol class="breadcrumb">
                                        <li class="breadcrumb-item">
                                            <a href="#"><i class="fas fa-home"></i> Panel</a>
                                        </li>
                                        <li class="breadcrumb-item active" aria-current="page">
                                            <a href="list.php">
                                                <i class="module-icon"></i> Direcciones
                                            </a>
                                        </li>
                                    </ol>
                                </nav>
                            </div>
                          
                            <div class="col-sm-12" style="margin-top: 20px;">
                                <div class="card  ">
                                    <div class="card-header bg-primary">
                                        <h3 class="card-title">
                                            <i class="fas fa-search"></i>
                                            Listado de Direccion
                                        </h3>
                                    </div>
                                    <div class="card-body" style="display: block;">
                                        <div class="container-fluid">
                                            <br>
                                            
                                            <table style="width:100%;" class="table table-bordered" id="direccion">
                                                <thead>
                                                <tr>
                                                    <th>Direccion Instalacion</th>
                                                    <th>Referencia</th>
                                                    <th>Direccion Fiscal</th>                                                  
                                                    <th>Latitud</th>
                                                    <th>Longitud</th>
                                                    <th>Opciones</th>
                                                </tr>
                                                </thead>
                                                <tbody>
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-12" style="margin-top: 20px;">
                                <form class="form" method="post"  id="frmFormLocation" autocomplete="off">
                                    <div class="card">
                                        <div class="card-header">
                                            <h3 class="card-title" id="idtitle" >
                                                <i class="fas fa-plus"></i> <!-- Icono para agregar -->
                                                Registro Nueva Direccion<!-- Título del formulario -->
                                            </h3>
                                        </div>
                                        <div class="card-body" style="display: block;">
                                            <div class="container-fluid">
                                            <input type="hidden" name="idpersona" id="idpersona" value="<?php echo $idpersona ?>">
                                                <input type="hidden" id="iddireccion" name="iddireccion">    
                                                <input type="hidden" id="address" name="direccion">
                                                <input type="hidden" id="search_latitude" name="latitud"  required>
                                                <input type="hidden" id="search_longitude"  name="longitud" required>
                                                <div class="row">
                                                    <!-- Primera columna -->
                                                    <div class="col-12 col-sm-6 col-md-6">
                                                        <div class="form-group">
                                                            <label for="nombre">Nombre Cliente:</label>
                                                            <input type="text" class="form-control" name="nombre" id="nombre" value="<?php echo $nombre_persona;?>"  placeholder="Nombre Cliente" readonly required>
                                                        </div>
                                                    </div>
                                                    <!-- Segunda columna -->
                                                    <div class="col-12 col-sm-6 col-md-6">
                                                        <div class="form-group">
                                                            <label >Direccion Fiscal:</label>
                                                            <input type="text" class="form-control" name="fiscal" id="fiscal"  placeholder="Direccion Fiscal" required>
                                                        </div>
                                                    </div>
                                                    <div class="col-12 col-sm-6 col-md-6">
                                                        <div class="form-group">
                                                            <label for="descripcion" >Referencia Direccion:</label>
                                                            <input type="text" class="form-control" name="descripcion" id="descripcion"  placeholder="Referencia Direccion" >
                                                        </div>
                                                    </div>
                                                    <div class="col-12 col-sm-6 col-md-6">
                                                        <div class="form-group">
                                                            <br>
                                                            <button type="button" class="btn btn-warning btn-flat" data-toggle="modal" data-target="#exampleModal"><i class="fa fa-map-location-dot"></i> Ubicacion</button>
                                                        </div>
                                                    </div>

                                                </div>  
                                            </div>
                                        </div>
                                        <div class="card-footer">
                                            <!-- Botones de acción -->
                                            <button type="submit" id="btnGuardar" class="btn btn-primary btn-flat">
                                                <i class="fas fa-save"></i> Guardar registro
                                            </button>
                                            <a href="list.php" class="btn btn-danger btn-flat">
                                                <i class="fas fa-times"></i> Cancelar
                                            </a>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </section>                
            </div>


           
                <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="modalLabel" aria-hidden="true">
                    <div class="modal-dialog" role="document">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title" id="modalLabel">Ubicar Direccion</h5>
                                <button type="button" class="close" data-dismiss="modal" aria-label="Cerrar">
                                    <span aria-hidden="true">&times;</span>
                                </button>
                            </div>
                            <form id="formActualizarMikrotik">
                                <div class="modal-body">
                                    <!-- Campo para mostrar el dato -->
                                    <div class="form-group input-group">
                                        <input type="text" id="search_location" class="form-control" placeholder="Busca tu Localizacion">
                                            <div class="input-group-btn">
                                                <button class="btn btn-default get_map" type="button">Localizar</button>
                                            </div>
                                    </div>
                                    <div id="geomap"></div>
                                        <h4>Detalles Direccion</h4>
                                        <p>Direccion : <input type="text" id="address1" size="40" placeholder="Direccion"></p>              
                                        <p>Latitude: &nbsp;&nbsp;&nbsp;&nbsp;<input type="text"  id="search_latitude1" size="30" placeholder="Latitud"></p>
                                        <p>Longitude: <input type="text" id="search_longitude2" size="30" placeholder="Longitud"></p>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-primary btn-flat" data-dismiss="modal"> <i class="fa fa-map-location-dot"></i> Ubicar</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>

<script>
        var geocoder;
        var map;
        var marker;
        /*
         * Google Map with marker
         */
        function initialize() {
            var initialLat = $('.search_latitude').val();
            var initialLong = $('.search_longitude').val();
            initialLat = initialLat?initialLat:-12.0686357;
            initialLong = initialLong?initialLong:-75.21029759999999;

            var latlng = new google.maps.LatLng(initialLat, initialLong);
            var options = {
                zoom: 18,
                center: latlng,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };

            map = new google.maps.Map(document.getElementById("geomap"), options);
            geocoder = new google.maps.Geocoder();
            marker = new google.maps.Marker({
                map: map,
                draggable: true,
                position: latlng
            });
            google.maps.event.addListener(marker, "dragend", function (event) {
              document.getElementById('search_latitude').value = this.getPosition().lat().toString();
              document.getElementById('search_latitude1').value = this.getPosition().lat().toString();
              document.getElementById('search_longitude').value = this.getPosition().lng().toString();
              document.getElementById('search_longitude2').value = this.getPosition().lng().toString();
              placeMarker(event.latLng);
            });

            function placeMarker(location){
             // marker.setPosition(location);
             geocoder.geocode({ location: location },(results = google.maps.GeocoderResult, status= google.maps.GeocoderStatus) => {
                          if (status === "OK") {
                            if (results[0]) {
                               console.log  (results[0].address_components);
                                $('#address').val(results[0].formatted_address);
                                $('#address1').val(results[0].formatted_address);
                            }else{

                            }
                         }
                     });
                }
              }

            $(document).ready(function () {
                
                $('.get_map').click(function (e) {
                    var address = $("#search_location").val();
                    geocoder.geocode({'address': address}, function (results, status) {
                        if (status == google.maps.GeocoderStatus.OK) {
                            map.setCenter(results[0].geometry.location);
                            marker.setPosition(results[0].geometry.location);
                            $('.search_addr').val(results[0].formatted_address);
                            $('.search_latitude').val(marker.getPosition().lat());
                            $('.search_longitude').val(marker.getPosition().lng());
                        } else {
                            alert("La geocodificación no tuvo éxito por el siguiente motivo: " + status);
                        }
                    });
                    e.preventDefault();
                });

            });
            google.maps.event.addDomListener(window, "load", initialize);
  
    </script>
               
<?php
}
require '../footer.php';
?>
<script type="text/javascript" src="../../scripts/location.js"></script>
<?php 
}
ob_end_flush();
?>