<?php
ob_start();
session_start();

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

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

?>
            <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 src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBQLjBXPoSFnn0NSj--qoqQUtH2oSlgboA&libraries=places"></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> Cobertura 
                                            </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>
                                            Ubicacion de Cajas 
                                        </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">
                                                    <!-- Columna del mapa -->
                                                    <div class="col-sm-7">
                                                        <!-- 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">
                                                        <div class="card border shadow-sm" style="padding: 15px;">
                                                            <div class="card-header bg-danger">
                                                                <h3 class="card-title">
                                                                    <i class="fa-solid fa-satellite-dish"></i>
                                                                    Descripcion de la Caja
                                                                </h3>
                                                            </div>
                                                                <div id="accordion">
                                                                    <div class="card">
                                                                        <div class="card-header" id="headingOne">
                                                                            <h5 class="mb-0">
                                                                                <button class="btn btn-primary btn-block text-left" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                                                                                    <i class="fas fa-image mr-2"></i> Imagen: <strong id="nombre_caja"></strong>
                                                                                </button>
                                                                            </h5>
                                                                        </div>
                                                                        
                                                                        <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
                                                                            <div class="card-body">
                                                                                <form id="formImganen" enctype="multipart/form-data" method="post">
                                                                                    <input type="hidden" name="idcaja" id="idcaja">
                                                                                    <div class="row">
                                                                                        <div class="col-sm-12">
                                                                                            <div class="form-group">
                                                                                                <label>Nombre:</label>
                                                                                                    <input type="text" class="form-control" id="nombre_prime" name="nombre_prime" placeholder="Nombre">
                                                                                            </div>
                                                                                        </div>
                                                                                        <div class="col-sm-12">
                                                                                            <div class="form-group">
                                                                                                <label>Tipo Icono:</label>
                                                                                                <select id="idicono" name="idicono" class="form-control select2" data-live-search="true" >
                                                                                                </select>
                                                                                            </div>
                                                                                        </div>
                                                                                        <div class="col-sm-12">
                                                                                            <div class="form-group">
                                                                                                <label>Imagen Poste:</label>
                                                                                                <div style="border: 1px dashed #ccc; padding: 10px; text-align: center; border-radius: 8px;">
                                                                                                <input type="file" id="inputImagenPoste" name="inputImagenPoste" accept="image/*" style="display: none;">
                                                                                                    <!-- Este es un input oculto para almacenar el nombre de la imagen actual -->
                                                                                                    <input type="hidden" id="previewImagenPosteHidden" name="previewImagenPoste">

                                                                                                    <!-- Vista previa de la imagen -->
                                                                                                    <img id="previewImagenPoste" 
                                                                                                        src="../../files/no_disponible.jpg"
                                                                                                        alt="Imagen del Poste"
                                                                                                        style="cursor: pointer; width: 50%; height: 50%; object-fit: cover; border-radius: 5px;">
                                                                                                </div>
                                                                                            </div>
                                                                                        </div>
                                                                                        <div class="col-sm-12">
                                                                                            <div class="form-group">
                                                                                                <button class="btn btn-warning btn-flat" type="button" onclick="capturarUbicacion()">
                                                                                                    <i class="fa-solid fa-location-dot"></i> Capturar Ubicación
                                                                                                </button>
                                                                                            </div>
                                                                                                <input type="hidden" class="form-control" id="latitud" name="latitud" readonly placeholder="Latitud" >
                                                                                                <input type="hidden" class="form-control" id="longitud" name="longitud" readonly placeholder="Longitud" >
                                                                                                <input type="text" class="form-control" id="direccion_capturada" name="direccion_capturada" readonly placeholder="Dirección" >
                                                                                        </div>
                                                                                        <div class="col-sm-12">
                                                                                            <div class="form-group">
                                                                                                <br>
                                                                                                <button type="submit" id="btnGuardar" class="btn btn-primary btn-flat" onclick="guardarCaja(event)"> <i class="fas fa-save"> </i> Guardar Imagen
                                                                                                </button>
                                                                                            </div>
                                                                                        </div>
                                                                                    </div>
                                                                                </form>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                    <div class="card">
                                                                        <div class="card-header" id="headingTwo">
                                                                            <h5 class="mb-0">
                                                                                <button class="btn btn-success btn-block text-left collapsed" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                                                                                    <i class="fas fa-info-circle mr-2"></i> Información General
                                                                                </button>
                                                                            </h5>
                                                                        </div>
                                                                        <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion">
                                                                            <div class="card-body">
                                                                                <form id="formInformacion">
                                                                                    <input type="hidden" name="idcaja_informacion" id="idcaja_informacion">
                                                                                    <div class="row">
                                                                                        <div class="col-sm-12">
                                                                                            <div class="form-group">
                                                                                                <label>Zona:</label>
                                                                                                    <input type="text" class="form-control" id="zona" name="zona" placeholder="Zona">
                                                                                            </div>
                                                                                        </div>
                                                                                        <div class="col-sm-12">
                                                                                            <div class="form-group">
                                                                                                <label>Nombre:</label>
                                                                                                    <input type="text" class="form-control" id="nombre" name="nombre" placeholder="Nombre">
                                                                                            </div>
                                                                                        </div>
                                                                                        <div class="col-sm-12">
                                                                                            <div class="form-group">
                                                                                                <label>Capacidad:</label>
                                                                                                    <input type="number" class="form-control" id="capacidad" name="capacidad" placeholder="Capacidad">
                                                                                            </div>
                                                                                        </div>
                                                                                        <div class="col-sm-12">
                                                                                            <div class="form-group">
                                                                                                <label>Olt:</label>
                                                                                                <select id="idolt" name="idolt" class="form-control select2" data-live-search="true" >
                                                                                                </select>
                                                                                            </div>
                                                                                        </div>
                                                                                        <div class="col-sm-6">
                                                                                            <div class="form-group">
                                                                                                <label>Tarjeta:</label>
                                                                                                <input type="number" class="form-control" id="tarjeta" name="tarjeta" placeholder="Tarjeta">
                                                                                            </div>
                                                                                        </div>
                                                                                        <div class="col-sm-6">
                                                                                            <div class="form-group">
                                                                                                <label>Puerto:</label>
                                                                                                <input type="number" class="form-control" id="puerto" name="puerto" placeholder="Puerto">
                                                                                            </div>
                                                                                        </div>
                                                                                        <div class="col-sm-12">
                                                                                            <div class="form-group">
                                                                                                <label>Autorizacion:</label>
                                                                                                    <select  name="autorizacion" id="autorizacion" class="form-control"  data-live-search="true" data-style="btn-default" required>
                                                                                                        <option value="">Seleccione Autorizacion</option>
                                                                                                        <option value="1">Si requiere</option>
                                                                                                        <option value="2">No requiere</option>      
                                                                                                    </select>
                                                                                            </div>
                                                                                        </div>
                                                                                        <div class="col-sm-12">
                                                                                            <div class="form-group">
                                                                                                <label>Descripcion:</label>
                                                                                                    <input type="text" class="form-control" id="descripcion" name="descripcion" placeholder="Descripcion">
                                                                                            </div>
                                                                                        </div>
                                                                                        <div class="col-sm-12">
                                                                                            <div class="form-group">
                                                                                                <label>Codigo:</label>
                                                                                                    <input type="text" class="form-control" id="codigo" name="codigo" placeholder="Codigo">
                                                                                            </div>
                                                                                        </div>
                                                                                        <div class="col-sm-12">
                                                                                            <div class="form-group">
                                                                                                <br>
                                                                                                <button type="submit" id="btnInformacion" class="btn btn-primary btn-flat" onclick="guardarInformacion(event)"> <i class="fas fa-save"> </i> Guardar Informacion
                                                                                                </button>
                                                                                            </div>
                                                                                        </div>
                                                                                    </div>
                                                                                </form>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                    <div class="card">
                                                                        <div class="card-header" id="headingThree">
                                                                            <h5 class="mb-0">
                                                                                <button class="btn btn-dark btn-block text-left collapsed" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                                                                                    <i class="fas fa-users mr-2"></i> Abonados Registrados
                                                                                </button>
                                                                            </h5>
                                                                        </div>
                                                                        <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordion">
                                                                            <div class="card-body">
                                                                               <div class="table-responsive">
                                                                                    <table class="table table-bordered" id="punto" style="width:100%;">
                                                                                        <thead>
                                                                                            <tr>
                                                                                                <th>#</th>
                                                                                                <th>Nro Contrato</th>
                                                                                                <th>Dni</th>
                                                                                                <th>Estado</th>
                                                                                                <th>Opciones</th>
                                                                                            </tr>
                                                                                        </thead>
                                                                                        <tbody>
                                                                                        </tbody>
                                                                                    </table>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <strong id="latitudd"></strong>  <strong id="longitudd"></strong>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>                
            </div>
            

            <!-- Modal -->
            <div class="modal fade" id="modalContrato" tabindex="-1" role="dialog" aria-labelledby="modalEditarLabel" aria-hidden="true">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="modalEditarLabel">Registrar Clientes</h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Cerrar">
                            <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body">
                            <form id="formInsert">
                                <!-- Aquí van los campos que quieras editar -->
                                <input type="hidden" id="detalle_id" name="detalle_id">
                                <input type="hidden" id="idcaja_cliente" name="idcaja_cliente">
                                <input type="hidden" id="nombre_caja_cliente" name="nombre_caja_cliente">
                                <div class="form-group">
                                <label>Consulta ingresando su DNI/RUC</label>
                                <input type="number" class="form-control" id="inputDNI" maxlength="15" placeholder="Ingrese su DNI/RUC" required>
                                 <input type="hidden" class="form-control" id="idcontrato">
                                </div>
                                <div id="resultadoDNI" class="text-danger fw-bold"></div>
                            </form>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary btn-flat" data-dismiss="modal" > <i class="fas fa-times"></i> Cerrar</button>
                            <button type="button" class="btn btn-success btn-flat" onclick="consultarCliente()"><i class="fa-solid fa-arrows-rotate"></i> Consultar</button>
                             <button type="button" class="btn btn-primary btn-flat" onclick="registrarCliente()"> <i class="fas fa-save"></i> Registrar</button>
                        </div>
                    </div>
                </div>
            </div>

<?php
}
require '../footer.php';
?>
<script type="text/javascript" src="../../scripts/ubicacion.js"></script>
<?php 
}
ob_end_flush();
?>