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

    ]])
@endsection
@section('contenido')
<div class="container">
    <form action="{{ route('lugares.store') }}" method="POST">
        @csrf
        <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') }}" 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') }}" 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') }}" 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') }}" 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>
                                <option selected disabled>Selecciona una provincia</option>
                                @foreach(getProvincias() as $provincia => $value)
                                    <option value="{{ $value }}" @if(old('provincia') == $value) selected @endif>{{ $provincia }}</option>
                                @endforeach
                              </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>
                                <option selected disabled>Selecciona el tipo de lugar</option>
                                @foreach(getTiposLugar() as $categoria => $propiedades)
                                    <optgroup label="{{ $categoria }}">
                                        @foreach($propiedades as $tipo => $id)
                                            <option value="{{ $id }}" @if(old('tipo') == $id) selected @endif>{{ $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') }}">
                            <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') }}">
                            <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') }}">
                            <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') }}</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">Crear 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" readonly value="{{ old('latitud') }}" 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" readonly value="{{ old('longitud') }}" 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 en una vista por defecto
    var map = L.map('map').setView([{{old('latitud',"39.6331")}}, {{ old('longitud', '2.9759') }}], {{ old('longitud') !== null ? '15' : '9' }}); // Vista inicial en Mallorca

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

    // Marcador inicial
    var marker = L.marker([{{old('latitud', "39.6331")}}, {{ old('longitud', '2.9759') }}]).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;

        marker.setLatLng([lat, lng]);
        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