@extends('layouts.app')

@section('content')
    <div class="container">
        <h4>Mapa con Leaflet</h4>
        <div id="map" style="height: 400px; width: 100%;"></div>
    </div>
@endsection

@section('js')
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            var map = L.map('map').setView([-16.5, -68.15], 13); // La Paz

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

            L.marker([-16.5, -68.15])
                .addTo(map)
                .bindPopup('¡Hola desde La Paz!')
                .openPopup();
        });
    </script>
@endsection