@extends('layouts.app')
@section('titulo','Detalles del Lugar '.$lugar->nombre)
@section('contenido')
<div class="container">
    <div class="row">
        <div class="col-md-6">
            <h2>{{ $lugar->nombre }}</h2>
            <p><strong>Dirección:</strong> {{ $lugar->direccion }}</p>
            <p><strong>Provincia:</strong> {{ getNombreProvincia($lugar->provincia) }}</p>
            <p><strong>Código Postal:</strong> {{ $lugar->codigo_postal }}</p>
            <p><strong>Teléfono:</strong> {{ $lugar->telefono }}</p>
            <p><strong>Sitio Web:</strong> <a href="{{ $lugar->sitio_web }}" target="_blank">{{ $lugar->sitio_web }}</a></p>
            <p><strong>Descripción:</strong> {{ $lugar->descripcion }}</p>
            <p><strong>Tipo:</strong> {{ getNombreTipoLugar($lugar->tipo) }}</p>
            <p><strong>Estado:</strong> {{ $lugar->estado == 1 ? 'Activo' : 'Inactivo' }}</p>
            <p><strong>Latitud:</strong> {{ $lugar->latitud }}</p>
            <p><strong>Longitud:</strong> {{ $lugar->longitud }}</p>
        </div>

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

    <a href="{{ route('lugares.edit', $lugar->id) }}" class="btn btn-warning">Editar</a>
    <a href="{{ route('lugares.index') }}" class="btn btn-secondary">Regresar</a>
</div>

@endsection

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

@section('scripts')
<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
<script>
    // Inicializar el mapa
    var map = L.map('map').setView([{{ $lugar->latitud }}, {{ $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 en la posición del lugar
    L.marker([{{ $lugar->latitud }}, {{ $lugar->longitud }}]).addTo(map);
</script>
@endsection