<?php
ob_start();
session_start();

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

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

?>
            
            <!-- <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBQLjBXPoSFnn0NSj--qoqQUtH2oSlgboA&libraries=places"></script> -->
            <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBQLjBXPoSFnn0NSj--qoqQUtH2oSlgboA&libraries=places,drawing"></script>


            <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> Ubicacion 
                                            </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>
                                            Cajas de Distribución FTTH
                                        </h3>
                                    </div>
                                   
                                    <div class="card-body" style="display: block;">
                                        <div class="container-fluid">
                                            <div class="card shadow border" style="padding: 15px; margin-bottom: 20px;">
                                                <div class="row">
                                                    <div class="col-sm-9">
                                                        <button class="btn btn-warning  btn-flat" onclick="abrirModalDesdeBoton()"><i class="fa-solid fa-location-dot"></i> Registrar ubicación</button>
                                                    </div>
                                                    <div class="col-1">
                                                        <input type="color" class="form-control form-control-color" id="colorLinea" value="#0F0000" title="Color de línea" />
                                                    </div>
                                                    <div class="col-2">
                                                        <button class="btn btn-danger btn-flat w-100" onclick="inicializarDibujo()">
                                                        <i class="fa-solid fa-map-pin"></i> Dibujar Línea
                                                        </button>
                                                    </div>
                                                    
                                                    <!-- Columna del mapa -->
                                                    <div class="col-sm-7">
                                                    <br>
                                                        <!-- Campo de búsqueda -->
                                                        <div class="form-group input-group">
                                                            <input type="text" id="search_location" class="form-control" placeholder="Ingrese una dirección">
                                                            <div class="input-group-btn">
                                                                <button class="btn btn-default" type="button" onclick="buscarUbicacion()">Localizar</button>
                                                            </div>
                                                        </div>
                                                        <!-- Mapa -->
                                                        <div id="map" style="width: 100%; height: 600px; margin-top: 10px;"></div>
                                                    </div>

                                                    <!-- Columna de la tabla con su propio marco -->
                                                    <div class="col-sm-5" id="lista_tabla">
                                                    <br>
                                                        <div class="card border shadow-sm" style="padding: 15px;">
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <strong id="latitud"></strong>  <strong id="longitud"></strong>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>                
            </div>


            <!-- Modal de Registro -->
            <!-- Modal para registrar ubicación -->
                <div id="modalUbicacion" class="modal fade" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
                    <div class="modal-dialog">
                        <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title">Registrar Ubicación</h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Cerrar">
                                    <span >&times;</span>
                                </button>
                        </div>
                        <form id="formUbicacion">
                             <div class="modal-body">
                                <div class="form-group">
                                    <input type="hidden" name="idubicacion" id="idubicacion">
                                    <label for="">Seleccione Tipo:</label>
                                    <select id="idtipo" name="idtipo" class="form-control select2" data-live-search="true" required>
                                        <option value="">Seleccione Tipo</option>
                                        <option value="1">Odf</option>
                                        <option value="2">Mufas</option> 
                                        <option value="3">Cajas</option> 
                                    </select>   
                                </div>
                                <div class="form-group" id="grupo-seleccion">
                                    <label for="">Seleccione :</label>
                                    <select id="idseleccion" name="idseleccion" class="form-control select2" data-live-search="true" required>
                                    </select>
                                </div>
                                <div class="form-group" id="grupo-nombre">
                                        <label for="nombre">Nombre:</label>
                                        <input type="text" class="form-control" id="nombre" name="nombre" placeholder="Nombre">
                                </div>
                                <div class="form-group" id="grupo-cantidad">
                                        <label for="cantidad">Cantidad:</label>
                                        <input type="text" class="form-control" id="cantidad" name="cantidad" placeholder="Cantidad">
                                </div>
                                <div class="form-group" id="grupo-entrada">
                                        <label for="entrada">Entrada:</label>
                                        <input type="text" class="form-control" id="entrada" name="entrada" placeholder="Entrada">
                                </div>
                                <div class="form-group" id="grupo-salida">
                                        <label for="salida">Salida:</label>
                                        <input type="text" class="form-control" id="salida" name="salida" placeholder="Salida">
                                </div>
                                <div class="form-group">
                                    <label for="latitudModal">Latitud:</label>
                                    <input type="text" class="form-control" id="latitudModal" readonly>
                                </div>
                                <div class="form-group">
                                    <label for="longitudModal">Longitud:</label>
                                    <input type="text" class="form-control" id="longitudModal" readonly>
                                </div>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-secondary btn-flat" data-dismiss="modal" > <i class="fas fa-times"></i> Cancelar</button>
                                <button type="submit" id="btnGuardar" class="btn btn-primary btn-flat"> <i class="fas fa-save"></i> Guardar</button>
                            </div>
                        </form>
                        </div>
                    </div>
                </div>


                <div id="modalregistro" class="modal fade" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
                    <div class="modal-dialog">
                        <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title">Registrar Puertos</h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Cerrar">
                                    <span >&times;</span>
                                </button>
                        </div>
                        <form id="formPuerto"> 
                            <div class="modal-body">
                                <input type="hidden" name="idodf" id="idodf">
                                <div class="form-group">
                                    <label for="numero_puerto">Numero Puerto:</label>
                                    <input type="text" class="form-control" id="numero_puerto" placeholder="Numero Puertos">
                                </div>
                                <div class="form-group">
                                    <label for="nombre_salida">Nombre Salida:</label>
                                    <input type="text" class="form-control" id="nombre_salida" placeholder="Nombre Salida" >
                                </div>
                                
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-secondary btn-flat" data-dismiss="modal" > <i class="fas fa-times"></i> Cancelar</button>
                                <button type="submit" id="btnGuadarPuerto" class="btn btn-primary btn-flat"> <i class="fas fa-save"></i> Guardar</button>
                            </div>
                        </form>
                        </div>
                    </div>
                </div>
            
<?php
}
require '../footer.php';
?>
<script type="text/javascript" src="../../scripts/ubicacion_new.js"></script>
<?php 
}
ob_end_flush();
?>
   