@extends('layouts.app')
@section('titulo','Editar Lugar '.$lugar->nombre)
@section('ruta')
    @include('layouts.ruta', ['ruta' => [
        [
            'nombre' => 'Listado de Lugares',
            'url' => route('lugares.index')
        ],

    ]])
@endsection
@section('contenido')
<div class="container">
    <form action="{{ route('lugares.update', $lugar->id) }}" method="POST">
        @csrf
        @method('PUT')
        <div class="row">
            <div class="col-md-6">
                <div class="row">
                    <div class="col-md-6">
                        <div class="form-floating mb-3">
                            <input type="text" class="form-control" id="nombre" name="nombre" placeholder="Nombre" value="{{ old('nombre', $lugar->nombre) }}" required>
                            <label for="nombre">Nombre <span class="text-danger">*</span></label>
                        </div>

                        <div class="form-floating mb-3">
                            <input type="text" class="form-control" id="direccion" name="direccion" placeholder="Dirección" value="{{ old('direccion', $lugar->direccion) }}" required>
                            <label for="direccion">Dirección <span class="text-danger">*</span></label>
                        </div>


                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-floating mb-3">
                                    <input type="text" class="form-control" id="poblacion" name="poblacion" placeholder="Población" value="{{ old('poblacion', $lugar->poblacion) }}" required>
                                    <label for="direccion">Población <span class="text-danger">*</span></label>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-floating mb-3">
                                    <input type="text" class="form-control" id="codigo_postal" name="codigo_postal" placeholder="Código Postal" value="{{ old('codigo_postal', $lugar->codigo_postal) }}" required>
                                    <label for="codigo_postal">Código Postal <span class="text-danger">*</span></label>
                                </div>
                            </div>
                        </div>

                        <div class="form-floating mb-3">
                            <select class="form-select" id="provincia" name="provincia" aria-label="Selecciona una provincia" required>

                                <!-- List of provinces (same as the create.blade) -->
                                @foreach(getProvincias() as $provincia => $value)
                                    <option value="{{ $value }}" {{ old('provincia',$lugar->provincia) == $value ? 'selected' : '' }}>{{ $provincia }}</option>
                                @endforeach
                                <!-- Add more provinces as in create.blade -->
                            </select>
                            <label for="provincia">Provincia <span class="text-danger">*</span></label>
                        </div>
                        <div class="form-floating mb-3">
                            <select class="form-select" id="tipo" name="tipo" required>php
                                @foreach(getTiposLugar() as $categoria => $propiedades)
                                    <optgroup label="{{ $categoria }}">
                                        @foreach($propiedades as $tipo => $id)
                                            <option value="{{ $id }}" {{ old('tipo',$lugar->tipo) == $id ? 'selected' : '' }}>{{ $tipo }}</option>
                                        @endforeach
                                    </optgroup>
                                @endforeach
                            </select>
                            <label for="tipo">Tipo <span class="text-danger">*</span></label>
                        </div>


                    </div>

                    <div class="col-md-6">
                        <div class="form-floating mb-3">
                            <input type="text" class="form-control" id="telefono" name="telefono" placeholder="Teléfono" value="{{ old('telefono', $lugar->telefono) }}">
                            <label for="telefono">Teléfono</label>
                        </div>

                        <div class="form-floating mb-3">
                            <input type="email" class="form-control" id="email" name="email" placeholder="Correo Electronico" value="{{ old('email', $lugar->email) }}">
                            <label for="email">Correo Electronico</label>
                        </div>

                        <div class="form-floating mb-3">
                            <input type="text" class="form-control" id="sitio_web" name="sitio_web" placeholder="Sitio Web" value="{{ old('sitio_web', $lugar->sitio_web) }}">
                            <label for="sitio_web">Sitio Web</label>
                        </div>

                        <div class="form-floating mb-3">
                            <textarea class="form-control" id="descripcion" name="descripcion" placeholder="Descripción" style="height: 130px">{{ old('descripcion', $lugar->descripcion) }}</textarea>
                            <label for="descripcion">Descripción</label>
                        </div>


                    </div>
                </div>
                <span class="text-danger small">* Campos obligatorio.</span><br>
                <button type="submit" class="btn btn-primary text-uppercase">Actualizar Lugar</button>
            </div>

            <div class="col-md-6">
                <div id="map" style="height: 360px;"></div>

                <div class="row my-2">
                    <div class="col-md-6">
                        <div class="form-floating mb-3">

                            <input type="text" class="form-control" id="latitud" name="latitud" value="{{ old('latitud', $lugar->latitud) }}" readonly required>
                            <label for="latitud" class="form-label">Latitud <span class="text-danger">*</span></label>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-floating mb-3">

                            <input type="text" class="form-control" id="longitud" name="longitud" value="{{ old('longitud', $lugar->longitud) }}" readonly required>
                            <label for="longitud" class="form-label">Longitud <span class="text-danger">*</span></label>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </form>
</div>

@endsection

@section('css')
<link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
@endsection

@section('scripts')
<script src="https://code.jquery.com/jquery-3.7.1.js" integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4=" crossorigin="anonymous"></script>
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
<script>
    // Inicializar el mapa
    var map = L.map('map').setView([{{old('latitud',$lugar->latitud)}}, {{old('longitud',$lugar->longitud)}}], 15); // Centrar en las coordenadas del lugar

    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        maxZoom: 19,
    }).addTo(map);

    // Marcador inicial en la posición del lugar
    var marker = L.marker([{{old('latitud',$lugar->latitud)}}, {{old('longitud',$lugar->longitud)}}]).addTo(map);

    // Actualizar los campos de latitud y longitud cuando se hace clic en el mapa
    map.on('click', function(e) {
        var lat = e.latlng.lat;
        var lng = e.latlng.lng;

        // Actualiza el marcador en el mapa
        marker.setLatLng([lat, lng]);

        // Actualiza los campos de entrada
        document.getElementById('latitud').value = lat;
        document.getElementById('longitud').value = lng;
    });


        // Captura del campo de código postal
        var codigoPostalInput = document.getElementById('codigo_postal');

if (codigoPostalInput) {
    // Evento 'blur' para ejecutar la búsqueda de coordenadas
    codigoPostalInput.addEventListener('blur', function() {
        var codigoPostal = this.value.trim();

        // Asegurarse de que el código postal no esté vacío
        if (!codigoPostal) {
            alert("Por favor, ingresa un código postal válido.");
            return;
        }

        console.log("Código postal ingresado:", codigoPostal);

        // Construir la URL para la solicitud de geocodificación
        var url = `https://nominatim.openstreetmap.org/search?format=json&postalcode=${codigoPostal}&country=Spain&limit=1`;

        // Realizar la solicitud fetch
        fetch(url)
            .then(response => {
                if (!response.ok) {
                    throw new Error("Error en la respuesta de la API");
                }
                return response.json();
            })
            .then(data => {
                console.log("Datos obtenidos de la API:", data);

                if (data && data.length > 0) {
                    var lat = parseFloat(data[0].lat);
                    var lon = parseFloat(data[0].lon);

                    // Actualizar el mapa y el marcador con la ubicación obtenida
                    map.setView([lat, lon], 13);
                    marker.setLatLng([lat, lon]);

                    // Actualizar los campos de latitud y longitud
                    document.getElementById('latitud').value = lat;
                    document.getElementById('longitud').value = lon;
                } else {
                    alert("No se encontró una ubicación para el código postal ingresado.");
                }
            })
            .catch(error => {
                console.error("Error al buscar el código postal:", error);
                alert("Hubo un problema al intentar obtener la ubicación.");
            });
    });
} else {
    console.error("No se encontró el campo con id 'codigo_postal'. Verifica el HTML.");
}
</script>
@endsection