@extends('layouts/master_hf')

@php
    $pagename = 'dovesiamo';
    $imgpath = "images/background/tronchi02.jpg";
@endphp


@section('body')
    <div class="">
        {{-- <div class="tm-preload tm-rotate-circle">
    <div class="spinner"></div>
</div> --}}


        <div class="tm-sidebars-1 tm-isblog tm-header-wrapper">


            @include("components.breadcrumb")

            <div class="tm-page-corners"></div>

            <div id="tm-main" class="tm-block-main uk-block uk-block-default">
                <div class="tm-page-padding">

                    <!-- Map Section -->
                    <div class="container px-4 py-5">
                        <div class="row">
                            <div class="col-12 pb-4">
                                <div class="card" style="background-color: #EEEEEE;">
                                    <div class="card-body">
                                        <div class="container">
                                            <div class="row">
                                                <div class="col-12 mb-3">
                                                    <div class="d-flex align-items-center">
                                                        <i class="bi bi-building fa-2x me-3 big-icon"></i>
                                                        <div>
                                                            <h3 class="tm-caps tm-weight-regular mb-0">Interlam s.r.l.</h3>
                                                            <p class="mb-0">Via A. De Gasperi 28/30</p>
                                                            <p class="mb-0">25010 Remedello Sopra (BS)</p>
                                                            <p class="mb-0">Italia</p>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-12 pb-4">
                                <div id="map" style="height: 400px;" class="w-100 rounded shadow"></div>
                            </div>
                            <div class="container mt-3 pb-4">
                                <div class="row justify-content-center">
                                    <div class="col-auto">
                                        <a href="https://www.google.com/maps?q=Interlam+s.r.l." target="_blank"
                                            class="btn btn-primary me-2">
                                            <i class="bi bi-geo-alt-fill"></i> Google Maps
                                        </a>
                                        <a href="http://maps.apple.com/?q=Interlam+s.r.l." target="_blank"
                                            class="btn btn-secondary">
                                            <i class="bi bi-apple mr-1"></i> Apple Maps
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- OpenStreetMap Script -->
                    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
                    <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
                    <script>
                        var map = L.map('map', {
                            scrollWheelZoom: false
                        }).setView([45.28260790182006, 10.36854247596552], 15);
                        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                            attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
                            className: 'map-tiles'
                        }).addTo(map);

                        var customIcon = L.icon({
                            iconUrl: 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNSIgaGVpZ2h0PSI0MSIgdmlld0JveD0iMCAwIDI1IDQxIj48cGF0aCBmaWxsPSIjZmZkNzAwIiBzdHJva2U9IiMwMDAiIHN0cm9rZS13aWR0aD0iMS41IiBkPSJNMTIuNSAxLjVDNi4yIDEuNSAxLjUgNi4yIDEuNSAxMi41YzAgNi4zIDExIDI2IDExIDI2czExLTE5LjcgMTEtMjZjMC02LjMtNC43LTExLTExLTExem0wIDE3LjNjLTMuMSAwLTUuNi0yLjUtNS42LTUuNnMyLjUtNS42IDUuNi01LjYgNS42IDIuNSA1LjYgNS42LTIuNSA1LjYtNS42IDUuNnoiIHN0eWxlPSJmaWxsOiNmZmQ3MDAiLz48cGF0aCBkPSJNMTIuNSA2LjljMy4xIDAgNS42IDIuNSA1LjYgNS42cy0yLjUgNS42LTUuNiA1LjYtNS42LTIuNS01LjYtNS42IDIuNS01LjYgNS42LTUuNnoiIHN0eWxlPSJmaWxsOiMwMDAwMDAiLz48L3N2Zz4=',
                            shadowUrl: 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0MSIgaGVpZ2h0PSI0MSIgdmlld0JveD0iMCAwIDQxIDQxIj48cGF0aCBmaWxsPSJyZ2JhKDAsIDAsIDAsIDAuMikiIGQ9Ik0xMi41IDQxTDQxIDEyLjVIMjUuNUwxMi41IDB2NDF6Ii8+PC9zdmc+',
                            iconSize: [25, 41],
                            iconAnchor: [12, 41],
                            popupAnchor: [1, -34],
                            shadowSize: [41, 41]
                        });

                        var marker = L.marker([45.28260790182006, 10.36854247596552], {
                                icon: customIcon
                            }).addTo(map)
                            .bindPopup('<div style="color: #2c3e50; font-weight: bold;">Interlam</div>')
                            .openPopup();

                        // Add click event to open Google Maps for both map and marker
                        function openGoogleMaps() {
                            window.open('https://www.google.com/maps?q=Interlam+s.r.l.', '_blank');
                        }
                        marker.on('click', openGoogleMaps);
                        map.on('click', openGoogleMaps);

                        // Custom styles
                        var style = document.createElement('style');
                        style.textContent = `
                            .map-tiles {
                                filter: grayscale(0) sepia(0);
                            }
                            .leaflet-popup-content-wrapper {
                                background: #ffffff;
                                border-radius: 8px;
                                box-shadow: 0 3px 14px rgba(0,0,0,0.2);
                            }
                            .leaflet-popup-tip {
                                background: #ffffff;
                            }
                        `;
                        document.head.appendChild(style);
                    </script>


                </div>


            </div>
        </div>
    </div>
@endsection