@extends('layouts.app')

@section('content')
    <!-- Button to Open the Modal -->


    <!-- The Modal -->
    <div class="modal" id="myModalMapa" style="z-index: 9999">
        <div class="modal-dialog modal-xl">
            <div class="modal-content">

                <!-- Modal Header -->
                <div class="modal-header">
                    <h4 class="modal-title">Mapa</h4>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>

                <!-- Modal body -->
                <div class="modal-body">

                    {{-- <div class="image-container" style="text-align: center"> --}}

                        {{-- <img src="{{ asset('img/mapa.png') }}" class="icono-logo-mapa" alt="Imagen" id="main-image"> --}}
                        <div id="map" style="height: 20%"></div>
                    {{-- </div> --}}

                </div>

                <!-- Modal footer -->
                <div class="modal-footer">
                    <button type="button" class="btn btn-success" onclick="GuardarmodalMapa()">Guardar</button>

                    <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Cerrar</button>
                </div>

            </div>
        </div>
    </div>
    {{-- <script>
    $(document).ready(function() {
        const imageContainer = $('.image-container');
        const marker = $('<div class="marker"></div>');
        const offsetX = 551;
        const offsetY = 269.953125;

        marker.css({
            left: offsetX + 'px',
            top: offsetY + 'px'
        });

        marker.on('click', function() {
            // Acción que deseas realizar cuando se hace clic en un marcador
            console.log('Marcador clickeado');
        });

        imageContainer.append(marker);
    });
</script> --}}

    <script>
        var xGlobal = 0;
        var yGlobal = 0;
        var idEmpresa = "";
        var dataCoordenadas = "";

        $(document).ready(function() {
            $('.image-container').on('click', function(event) {
                console.log($(this));
                const imageContainer = $(this);
                // $("div").remove(".marker");

                const marker = $('<div class="marker"></div>');

                const offsetX = event.pageX - imageContainer.offset().left;
                const offsetY = event.pageY - imageContainer.offset().top;

                // const offsetX = "551";
                // const offsetY = "269.953125";

                console.log(offsetX);
                console.log(offsetY);
                xGlobal = offsetX;
                yGlobal = offsetY;

                marker.css({
                    left: offsetX + 'px',
                    top: offsetY + 'px'
                });

                marker.on('click', function() {


                    // Acción que deseas realizar cuando se hace clic en un marcador
                    console.log('Marcador clickeado');
                });

                imageContainer.append(marker);
            });
        });


        function crearMarket(data) {
            // $("div").remove(".marker");


            // if (dataCoordenadas != "") {

            //     var dataArrayCoorde = dataCoordenadas.split('/');


            //     const imageContainer = $('.image-container');

            //     const marker = $('<div class="marker"></div>');
            //     const offsetX = dataArrayCoorde[0];
            //     const offsetY = dataArrayCoorde[1];
            //     marker.css({
            //         left: offsetX + 'px',
            //         top: offsetY + 'px'
            //     });
            //     imageContainer.append(marker);

            // }


        }
    </script>
    <style>
        .image-container {
            position: relative;
            display: inline-block;
        }

        .marker {
            position: absolute;
            background-color: red;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            cursor: pointer;
        }

        /* Estilos para los botones */
        .boton-redondo {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            font-size: 16px;
            margin: 5px;
            cursor: pointer;
            outline: none;
        }
        .boton-ovalado {
            width: 60px;
            height: 30px;
            border-radius: 50%;
            font-size: 16px;
            margin: 5px;
            cursor: pointer;
            outline: none;
        }
        .azul {
            background-color: #3C9600;
            color: white;
        }

        /* Estilo para el botón seleccionado */
        .seleccionado {
            background-color: darkblue;
        }
    </style>

    <div class="container">
        @if (session('mensaje'))
            <div class="alert alert-success">{{ session('mensaje') }}</div>
        @endif
        <div class="row justify-content-center">
            {{-- {{$empresas}} --}}
            <div class="container">

                <div style="text-align: left">
                    {{-- <button type="button" class="btn btn-success" >Nuevo</button> --}}
                    <a class="btn btn-success" onclick="crear()" style="cursor: pointer">Nuevo</a>



                </div>
                <br>




                <div class="form-group">
                  <input type="button" class="col-1 boton-ovalado azul" value="Todos" id=""
                  onclick="buscarLetra('')">
                    <input type="button" class="col-1 boton-redondo azul" value="A" id="A"
                        onclick="buscarLetra('A')">
                    <input type="button" class="col-1 boton-redondo azul" value="B" id="B"
                        onclick="buscarLetra('B')">
                    <input type="button" class="col-1 boton-redondo azul" value="c" id="c"
                        onclick="buscarLetra('c')">
                    <input type="button" class="col-1 boton-redondo azul" value="D" id="D"
                        onclick="buscarLetra('D')">
                    <input type="button" class="col-1 boton-redondo azul" value="E" id="E"
                        onclick="buscarLetra('E')">
                    <input type="button" class="col-1 boton-redondo azul" value="F" id="F"
                        onclick="buscarLetra('F')">
                    <input type="button" class="col-1 boton-redondo azul" value="G" id="G"
                        onclick="buscarLetra('G')">
                    <input type="button" class="col-1 boton-redondo azul" value="H" id="H"
                        onclick="buscarLetra('H')">
                    <input type="button" class="col-1 boton-redondo azul" value="I" id="I"
                        onclick="buscarLetra('I')">
                    <input type="button" class="col-1 boton-redondo azul" value="J" id="J"
                        onclick="buscarLetra('J')">
                    <input type="button" class="col-1 boton-redondo azul" value="K" id="K"
                        onclick="buscarLetra('K')">
                    <input type="button" class="col-1 boton-redondo azul" value="L" id="L"
                        onclick="buscarLetra('L')">
                    <input type="button" class="col-1 boton-redondo azul" value="M" id="M"
                        onclick="buscarLetra('M')">
                    <input type="button" class="col-1 boton-redondo azul" value="N" id="N"
                        onclick="buscarLetra('N')">
                    <input type="button" class="col-1 boton-redondo azul" value="O" id="O"
                        onclick="buscarLetra('O')">
                    <input type="button" class="col-1 boton-redondo azul" value="P" id="P"
                        onclick="buscarLetra('P')">
                    <input type="button" class="col-1 boton-redondo azul" value="Q" id="Q"
                        onclick="buscarLetra('Q')">
                    <input type="button" class="col-1 boton-redondo azul" value="R" id="R"
                        onclick="buscarLetra('R')">
                    <input type="button" class="col-1 boton-redondo azul" value="S" id="S"
                        onclick="buscarLetra('S')">
                    <input type="button" class="col-1 boton-redondo azul" value="T" id="T"
                        onclick="buscarLetra('T')">
                    <input type="button" class="col-1 boton-redondo azul" value="U" id="U"
                        onclick="buscarLetra('U')">
                    <input type="button" class="col-1 boton-redondo azul" value="V" id="V"
                        onclick="buscarLetra('V')">
                    <input type="button" class="col-1 boton-redondo azul" value="W" id="W"
                        onclick="buscarLetra('W')">
                    <input type="button" class="col-1 boton-redondo azul" value="X" id="X"
                        onclick="buscarLetra('X')">
                    <input type="button" class="col-1 boton-redondo azul" value="Y" id="Y"
                        onclick="buscarLetra('Y')">
                    <input type="button" class="col-1 boton-redondo azul" value="Z" id="Z"
                        onclick="buscarLetra('Z')">
                </div>

               

                <div class="form-group">
                    <input type="text" class="form-control " id="search" placeholder="Buscar...">
                </div>
                <div style="display: flex; justify-content: space-between;">
                    <div>Empresas Totales: {{ count($empresas) }}</div>
                    <div> <a>Exportar</a> </div>
                </div>
                <table class="table table-striped table-hover" id="mitable">
                    <thead class="color-head">
                        <tr>
                            <th class="th-subhead border-th">Razón Social </th>
                            {{-- <th class="th-subhead border-th separador-v">Categoria Principal</th> --}}
                            <th class="th-subhead border-th">Telefóno</th>
                            <th class="th-subhead border-th separador-v">Correo</th>
                            <th class="th-subhead border-th separador-v">Categoria</th>
                            <th class="th-subhead border-th separador-v"> Sub Categoria</th>

                            <th class="th-subhead border-th">Comuna</th>

                            <th><span class="material-symbols-outlined">
                                    settings
                                </span></th>

                        </tr>
                    </thead>
                    <tbody>
                        @if (!empty($empresas))
                            @foreach ($empresas as $los_datos)
                                <tr>
                                    <td class="td-val">{{ $los_datos->razon_social }} </td>
                                    {{-- <td class="td-val">{{$los_datos->telefono}}</td> --}}
                                    <td class="td-val">{{ $los_datos->telefono }}</td>
                                    <td class="td-val">{{ $los_datos->correo }}</td>

                                    <td class="td-val">{{ $los_datos->nombre_categoria }}</td>

                                    <td class="td-val">{{\App\Models\categorias::getCategoriasIdSegunda($los_datos->id_empresa)}} </td>

                                    <td class="td-val">{{ $los_datos->descripcion }}</td>
                                    <td class="td-val" style="text-align: center;">
                                        <div style="display: flex; gap: 10px;">
                                            <a onclick="editar({{ $los_datos }})">
                                                <span class="material-symbols-outlined" style="cursor: pointer;">
                                                    visibility
                                                </span>
                                            </a>

                                            <a onclick="eliminar({{ $los_datos }})">
                                                <span class="material-symbols-outlined" style="cursor: pointer;">
                                                    delete
                                                </span>
                                            </a>
                                        </div>
                                    </td>




                                    </td>
                                </tr>
                            @endforeach
                        @endif
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    {{-- *************** --}}
    <!-- The Modal -->
    <div class="modal" id="modalCrear">
        {{-- <div class="modal-dialog modal-fullscreen"> --}}

        <div class="modal-dialog modal-xl">

            <div class="modal-content">

                <!-- Modal Header -->
                <div class="modal-header">
                    <h4 class="modal-title">Datos Empresa</h4>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>

                <!-- Modal body -->
                <div class="modal-body">
                    <form action="{{ route('create.empresa') }} " method="POST">

                        <input type="text" name="id_empresa" style="display:none" id="id_empresa">
                        {{-- Datos personales --}}
                        <div class="card">
                            <div class="card-header">Datos representante</div>
                            <div class="card-body">

                                <div class="container">

                                    <div class="row">
                                        <div class="col-md-6">
                                            <label for="">Nombre</label>
                                            <input type="text" required name="nombre" id="nombre"
                                                class="form-control">
                                        </div>
                                        <div class="col-md-6">
                                            <label for="">Apellido</label>
                                            <input type="text" required name="apellido" id="apellido"
                                                class="form-control">
                                        </div>
                                        <div class="col-md-6">
                                            <label for="">Cargo</label>
                                            <input type="text" required name="cargo" id="cargo"
                                                class="form-control">
                                        </div>
                                    </div>
                                </div>

                            </div>
                            {{-- <div class="card-footer">Footer</div> --}}
                        </div><br>


                        {{-- Datos de la empresa --}}
                        <div class="card">
                            <div class="card-header">Datos de la empresa</div>
                            <div class="card-body">

                                <div class="container">
                                    @csrf
                                    {{-- A --}}
                                    <div class="row">
                                        <div class="col-md-4">
                                            <label for="">Razon social</label>
                                            <input type="text" id="razon_social" required name="razon_social"
                                                class="form-control">
                                        </div>
                                        <div class="col-md-4">
                                            <label for=""> Categoria</label>
                                            <select class="custom-select form-control" id="categorias" name="categorias"
                                                required>
                                                <option value="" selected disabled>Seleccionar</option>
                                                @if (!empty($categorias))
                                                    @foreach ($categorias as $data)
                                                        <option value="{{ $data->id }}">
                                                            {{ ucfirst(strtolower($data->descripcion)) }}
                                                        </option>
                                                    @endforeach
                                                @endif
                                            </select>
                                        </div>
                                        <div class="col-md-4">
                                          <label for="">Sub Categoria</label>
                                          <select class="custom-select form-control" id="segunda_categorias" name="segunda_categorias"
                                              required>

                                              {{-- @PHP
                                              {{\App\Models\categorias::getCategoriasIdSegunda($los_datos->id_empresa)}}
                                              @endphp --}}

                                              <option value="" selected disabled>Seleccionar</option>
                                              @if (!empty($categorias))
                                                  @foreach ($categorias as $data)
                                                      <option value="{{ $data->id }}">
                                                          {{ ucfirst(strtolower($data->descripcion)) }}
                                                      </option>
                                                  @endforeach
                                              @endif
                                          </select>
                                      </div>
                                    </div>
                                    {{-- B --}}

                                    <div class="row">
                                        <div class="col-md">
                                            <label for="">Comuna</label>
                                            <select class="custom-select form-control" id="ciudades" name="ciudades"
                                                required>
                                                <option value="" selected disabled>Seleccionar</option>
                                                @if (!empty($ciudades))
                                                    @foreach ($ciudades as $data)
                                                        <option value="{{ $data->id }}">
                                                            {{ ucfirst(strtolower($data->descripcion)) }}
                                                        </option>
                                                    @endforeach
                                                @endif
                                            </select>
                                        </div>
                                        <div class="col-md">
                                            <label for="">Direccion</label>
                                            <input type="text" id="direccion" required name="direccion"
                                                class="form-control">
                                        </div>
                                        <div class="col-md">
                                            <label for="">Market</label>
                                            {{-- <button type="button" class="btn btn-primary" onclick="abrirmap()">
                                  Open modal
                                </button> --}}

                                            <a onclick="abrirmap()" style="cursor:pointer">
                                                <span class="material-symbols-outlined">
                                                    search
                                                </span>
                                            </a>



                                            <input type="text" id="coordenadas" name="coordenadas"
                                                class="form-control">
                                        </div>
                                    </div>
                                    {{-- C --}}

                                    <div class="row">
                                        <div class="col-md">
                                            <label for="">Telefono</label>
                                            <input type="text" id="telefono" required name="telefono"
                                                class="form-control">
                                        </div>
                                        <div class="col-md">
                                            <label for="">Correo</label>
                                            <input type="text" id="correo" required name="correo"
                                                class="form-control">
                                        </div>
                                        <div class="col-md">
                                            <label for="">Web</label>
                                            <input type="text" id="web" name="web" class="form-control">
                                        </div>
                                    </div>

                                    {{-- d --}}

                                    <div class="row">
                                        <div class="col-md">
                                            <label for="">Nota</label>
                                            <textarea name="nota" class="form-control" name="" id="" cols="15" rows="5"
                                                id="nota"></textarea>
                                        </div>

                                    </div>
                                </div>

                            </div>
                            {{-- <div class="card-footer">Footer</div> --}}
                        </div>
                        <!-- Modal footer -->
                        <div class="modal-footer">
                            {{-- <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Close</button> --}}
                            <button class="btn btn-success" style="margin-right:10px;" style="background-color:#3C9600"
                                type="submit">GUARDAR</button>

                        </div>
                    </form>
                </div>



            </div>
        </div>
    </div>

    {{-- *************** --}}
    <!-- The Modal -->
    <div class="modal" id="modalEdit">
        {{-- <div class="modal-dialog modal-fullscreen"> --}}

        <div class="modal-dialog modal-xl">

            <div class="modal-content">

                <!-- Modal Header -->
                <div class="modal-header">
                    <h4 class="modal-title">Editar</h4>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>

                <!-- Modal body -->
                <div class="modal-body">

                </div>

                <!-- Modal footer -->
                <div class="modal-footer">
                    <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Close</button>
                </div>

            </div>
        </div>
    </div>


    <!-- The Modal -->
<div class="modal" id="myModalEliminar">
  <div class="modal-dialog">
   
    <form action="{{ route('eliminarempresa') }} " method="POST">
   
    <div class="modal-content">
      @csrf
      <!-- Modal Header -->
      <div class="modal-header">
        <h4 class="modal-title">Eliminar</h4>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>

      <!-- Modal body -->
      <div class="modal-body">
        <div style="text-align: center">
            <h4>        ¿está seguro que desea eliminar registro empresa? 
            </h4>
            <input type="text" style="display:none"  name="idempresa" id="valorDelet">
        </div>
      </div>

      <!-- Modal footer -->
      <div class="modal-footer">
        <button type="submit" class="btn btn-success"   data-bs-dismiss="modal">Aceptar</button>

        <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Cerrar</button>
      </div>

    </div>
    <form>
  </div>
</div>


    <script>
        var xGlobal = 0;
        var yGlobal = 0;

        function eliminar(data) {
          idEmpresa = data.id_empresa;
            // alert("eliminar");
            // console.log(data);
            $("#valorDelet").val(idEmpresa);
            $("#myModalEliminar").modal("show");

        }




        function abrirmap() {
alert(1);


            $("#modalCrear").modal("hide");

            $("#myModalMapa").modal("show");


            if (idEmpresa == "") {

            } else {

                crearMarket();
                // alert("editar");
            }


        }

        function GuardarmodalMapa() {

            $("#modalCrear").modal("show");

            $("#myModalMapa").modal("hide");



            $("#coordenadas").val(xGlobal + "/" + yGlobal);

        }


        function crear() {
            // $("div").remove(".marker");
            idEmpresa = "";
            dataCoordenadas = "";
            $("#nombre").val("");
            $("#apellido").val("");
            $("#cargo").val("");
            $('#ciudades').val("");
            $('#categorias').val("");

            $('#telefono').val("");
            $('#correo').val("");
            $('#web').val("");
            $('#direccion').val("");
            $('#coordenadas').val("");

            $('#razon_social').val("");
            $('#nota').text("");
            $('#id_empresa').val("");
            $("#modalCrear").modal("show");

        }

        function editar(data) {
            // alert("hola");

            $("#nombre").val(data.nombre);
            $("#apellido").val(data.apellido);
            $("#cargo").val(data.cargo);
            $('#ciudades').val(data.ciudades_id);
            $('#categorias').val(data.categorias_id);

            $('#telefono').val(data.telefono);
            $('#correo').val(data.correo);
            $('#web').val(data.web);
            $('#direccion').val(data.direccion);
            $('#coordenadas').val(data.coordenadas);

            $('#razon_social').val(data.razon_social);
            $('#nota').text(data.nota);
            $('#id_empresa').val(data.id_empresa);

            idEmpresa = data.id_empresa;

            dataCoordenadas = data.coordenadas;
            console.log(data);

            console.log(data.nombre);
            $("#modalCrear").modal("show");


        }
    </script>


<script>
    // Define un estilo para colorear las características por dentro
var myStyle = {
    "fillColor": "#ff7800", // Color de relleno
    "color": "#000", // Color del borde
    "weight": 2, // Grosor del borde
    "opacity": 0.65 // Opacidad
};
var map = L.map('map', {
    center: [-35.6594, -71.6595],
    zoom: 8,
    zoomControl: false, // Deshabilita los controles de zoom
    doubleClickZoom: false, // Deshabilita el zoom al hacer doble clic
    scrollWheelZoom: false, // Deshabilita el zoom con la rueda del ratón
    dragging: false, // Deshabilita la capacidad de arrastrar el mapa
    tap: false, // Deshabilita la interacción táctil (si es aplicable)
    boxZoom: false, // Deshabilita el zoom en caja
    keyboard: false, // Deshabilita la navegación mediante teclado

});

map.on('click', function(event) {
    var latlng = event.latlng; // Obtiene las coordenadas del evento
    var lat = latlng.lat;
    var lng = latlng.lng;
    
    // Crea un marcador en las coordenadas del clic y agrégalo al mapa
    var marker = L.marker(latlng).addTo(map);
    
    // Abre un pop-up en el marcador mostrando las coordenadas
    marker.bindPopup('Latitud: ' + lat + '<br>Longitud: ' + lng).openPopup();
});


// // Agrega un controlador de eventos para el clic en el mapa
// map.on('click', function(event) {
//     var latlng = event.latlng; // Obtiene las coordenadas del evento
//     var lat = latlng.lat;
//     var lng = latlng.lng;
    
//     // Puedes usar las variables lat y lng como desees
//     console.log('Coordenadas del clic - Latitud: ' + lat + ', Longitud: ' + lng);
// });

fetch('http://127.0.0.1:8000/js/mauleGeoson.json')
    .then(function(response) {
        return response.json();
    })
    .then(function(data) {
        // Crea una capa de GeoJSON con el estilo definido y añádela al mapa
        L.geoJSON(data, {
            style: myStyle
        }).addTo(map);
    });


//     // Crear un marcador en las coordenadas [lat, lng]
// var marker = L.marker([-35.423587, -71.711966]);

// // Agregar el marcador al mapa
// marker.addTo(map);

// // Puedes personalizar el marcador con un icono personalizado si lo deseas
// var customIcon = L.icon({
//     iconUrl: 'marker-icon.png', // URL de la imagen del icono
//     iconSize: [32, 32], // Tamaño del icono en píxeles
//     iconAnchor: [16, 32], // Punto de anclaje del icono
//     popupAnchor: [0, -32] // Punto de anclaje del mensaje emergente
// });

// // Reemplaza el icono predeterminado del marcador con el icono personalizado
// marker.setIcon(customIcon);

// // Agregar un mensaje emergente (popup) al marcador
// marker.bindPopup("Este es un marcador personalizado.").openPopup();
</script>

    <script>
        // Write on keyup event of keyword input element
        $(document).ready(function() {

            // var demoMap = L.map('map').setView([40.453191, -3.509236], 6);
            // @-35.6111831,-72.2081913
            // var map = L.map('map').setView([-35.6111831, -72.2081913], 8); // Centered at [latitude, longitude] with zoom level
            // L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            //     maxZoom: 19,
            // }).addTo(map);
            //     var imageUrl = 'http://127.0.0.1:8000/img/mapa.png'; // Replace with the path to your image
            //     var imageBounds = [[51.49, -0.14], [51.5, -0.07]]; // Define the geographical bounds of your image
            //     L.imageOverlay(imageUrl, imageBounds).addTo(map);
          //  var map = L.map('map').setView([51.505, -0.09], 13);

// L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
//     attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
// }).addTo(map);

// L.marker([51.5, -0.09]).addTo(map)
//     .bindPopup('A pretty CSS popup.<br> Easily customizable.')
//     .openPopup();





            $("#search").keyup(function() {
                _this = this;
                // Show only matching TR, hide rest of them
                $.each($("#mitable tbody tr"), function() {
                    if ($(this).text().toLowerCase().indexOf($(_this).val().toLowerCase()) === -1)
                        $(this).hide();
                    else
                        $(this).show();
                });
            });
        });



        function buscarLetra(letra) {
            $.each($("#mitable tbody tr"), function() {
                // Obtén el texto de la primera columna dentro de la fila actual
                var firstColumnText = $(this).find("td:first").text().toLowerCase();

                if (firstColumnText.startsWith(letra.toLowerCase())) {
                    $(this).show();
                } else {
                    $(this).hide();
                }
            });
            var elementosAzules = $(".boton-redondo");
            elementosAzules.removeClass("seleccionado");

            $("#" + letra).addClass('seleccionado');

        }
    </script>
    {{-- *************** --}}

    <style>
        .table .thead-dark th {
            color: inherit;
            border-color: #dee2e6;
            background-color: #002859;
        }

        .color-head thead {
            background-color: #002859;
            color: #ffffff;
        }
    </style>
@endsection

<style>
    .icono-logo-menu {
        width: 800;
        height: 600;
    }
 
    .icono-logo-mapa {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
    max-height: 80vh; /* Limita la altura máxima al 80% de la altura de la ventana */
}
    
</style>