@extends('web.app')

    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
    <style>
        #map {
            height: 50vh;
            width: 100%;
            z-index: 1;
        }
        /* Custom styling to match the "Google Maps" feel from the screenshot */
        .map-overlay {
            position: absolute;
            top: 20px;
            left: 20px;
            z-index: 1000;
            background: white;
            padding: 10px;
            border-radius: 8px;
            box-shadow: 0 2px 6px rgba(0,0,0,0.3);
        }
        .search-box {
            width: 300px;
            border: none;
            outline: none;
            padding: 8px;
            font-family: sans-serif;
        }
    </style>

@section('title', 'Home - SavvyGX IT Solutions')

@section('content')

    <div class="page-title">
        <div class="tf-container">
            <div class="page-title-content text-center">
                <h1 class="title split-text effect-right">
                    Contact Us
                </h1>
                <div class="breadkcum">
                    <a href="{{ url('/') }}" class="link-breadkcum body-2 fw-7 split-text effect-right">Home</a>
                    <span class="dot"></span>
                    <span class="page-breadkcum body-2 fw-7 split-text effect-right"> Contact Us</span>
                </div>
            </div>
        </div>
    </div>


    <section class="section-contact p-contact tf-spacing-2">
        <div class="tf-container">
            <div class="section-contact-inner flex justify-content-between flex-wrap">

                <div class="left">
                    <div class="heading-section mb-30">
                        <div class="sub-title body-2 fw-7 mb-17 title-animation">
                            Get In Touch
                        </div>
                        <h2 class="title fw-6 mb-10 title-animation">
                            Let’s Talk For
                            <span class="fw-3">Next Projects</span>
                        </h2>
                        <div class="desc text-animation">
                            <p class="lh-30">
                                Sed ut perspiciatis unde omnin natus totam
                                rem aperiam eaque inventore veritatis
                            </p>
                        </div>
                    </div>
                    <div class="contact-list mb-30">
                        <div class="title body-2 fw-7 title-animation">Main Office</div>
                        <div class="contact-item location-item align-items-start title-animation">
                            <i class="icon-location-dot"></i>
                            <a href="#" class="lh-30">55 Main Street, San
                                <br>Francisco, California. USA</a>
                        </div>
                        <div class="contact-item title-animation">
                            <i class="icon-email"></i>
                            <a href="#" class="lh-30">support@gmail.com</a>
                        </div>
                        <div class="contact-item title-animation">
                            <i class="icon-phone"></i>
                            <a href="#" class="lh-30">+1 (123) 456 889</a>
                        </div>
                    </div>
                    <div class="contact-social">
                        <div class="title body-2 fw-7 title-animation">Follow Me</div>
                        <ul class="post-social style-radius-50 style-bg-white g-10 title-animation">
                            <li><a href="#" class="icon-social"><i class="icon-fb"></i></a></li>
                            <li><a href="#" class="icon-social"><i class="icon-X"></i></a></li>
                            <li><a href="#" class="icon-social"><i class="icon-linkedin"></i></a></li>
                            <li><a href="#" class="icon-social"><i class="icon-instagram"></i></a></li>
                        </ul>
                    </div>
                </div>

                <div class="right">
                    <form id="contactform" class="form-contact-us style-bg-dark-2 px-md-15" method="post" action="./contact/contact-process.php">
                        <div class="cols mb-37 g-30">
                            <fieldset class="item">
                                <label for="name" class="sub-title body-2 fw-5">Full Name</label>
                                <fieldset class="position-relative">
                                    <i class="icon-user"></i>
                                    <input type="text" name="name" id="name" placeholder="Name" value="Richard D. Hammond" required>
                                </fieldset>
                            </fieldset>

                            <fieldset class="item">
                                <label for="mail" class="sub-title body-2 fw-5">Email Address</label>
                                <fieldset class="position-relative">
                                    <i class="icon-email"></i>
                                    <input type="email" name="mail" id="mail" placeholder="Email" value="support@gmail.com" required>
                                </fieldset>
                            </fieldset>
                        </div>
                        <div class="cols mb-37 g-30">
                            <fieldset class="item">
                                <label for="phone" class="sub-title body-2 fw-5">Phone Number</label>
                                <fieldset class="position-relative">
                                    <i class="icon-phone"></i>
                                    <input type="number" name="phone" id="phone" placeholder="+1 (123) 456 889" value="" required>
                                </fieldset>
                            </fieldset>

                            <fieldset class="item">
                                <div class="sub-title body-2 fw-5">
                                    Subject
                                </div>
                                <div class="nice-select">
                                    <span class="current caption-1">I would like to discussed</span>
                                    <ul class="list">
                                        <li class="option option-all selected focus">
                                            I would like to discussed
                                        </li>
                                        <li class="option">
                                            Machine Learning
                                        </li>
                                        <li class="option">
                                            Artificial Intelligence
                                        </li>
                                        <li class="option">
                                            Augmented Reality
                                        </li>
                                        <li class="option">
                                            Software Development
                                        </li>
                                    </ul>
                                </div>
                            </fieldset>
                        </div>

                        <fieldset class="mb-40">
                            <label for="message" class="sub-title body-2 fw-5">Message</label>
                            <textarea name="message" id="message" placeholder="Write message" required></textarea>
                        </fieldset>

                        <button type="submit" class="tf-btn">
                            <span>Send Us Message</span>
                            <i class="icon-arrow-right"></i>
                        </button>

                    </form>
                </div>

            </div>
        </div>
    </section>

    <div class="section-map">
        <div class="tf-container">
            <div class="wg-map tf-spacing-2">
                <div class="box-map">
                    <div id="map" class="map map-1"></div>

                    <div class="fixed bottom-8 right-4 z-[1000] flex flex-col gap-2">
                        <div class="bg-white p-2 rounded shadow-md flex flex-col border border-gray-300">
                            <button id="zoom-in" class="p-2 hover:bg-gray-100 border-b font-bold text-xl">+</button>
                            <button id="zoom-out" class="p-2 hover:bg-gray-100 font-bold text-xl">−</button>
                        </div>
                        <div class="bg-white p-2 rounded shadow-md border border-gray-300 cursor-pointer hover:bg-gray-100 text-center text-xs font-bold uppercase">
                            Satellite
                        </div>
                    </div>                    
                </div>
            </div>
        </div>
    </div>    
@endsection

@push('scripts')
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<script>

    document.addEventListener('DOMContentLoaded', function () {
        const swipers = document.querySelectorAll('.tf-swiper');
        swipers.forEach(el => {
            new Swiper(el, {
                slidesPerView: 1,
                spaceBetween: 24,
                speed: 800,
                pagination: {
                    el: el.querySelector('.swiper-pagination'),
                    clickable: true,
                },
                breakpoints: {
                    550: {
                        slidesPerView: 2,
                        slidesPerGroup: 1,
                    },
                    1024: {
                        slidesPerView: 3,
                        slidesPerGroup: 1,
                    }
                }
            });
        });
    });   



{{--     
    mapboxgl.accessToken =
        "pk.eyJ1IjoiaG9hbmdoYW5kbiIsImEiOiJjbTdsbTkydm8wZGpiMmxxcTdvdzVqbHd3In0.HUUli-jvI1ALTBuzSeKTpw";
    const map = new mapboxgl.Map({
        container: "map",
        style: "mapbox://styles/mapbox/light-v11",
        center: [90.3623654, 23.8096612],
        zoom: 15,
        cooperativeGestures: true,
    });

    const geojson = {
        type: "FeatureCollection",
        features: [
            {
                type: "Feature",
                geometry: {
                    type: "Point",
                    coordinates: [90.3623654, 23.8096612],
                },
            },
        ],
    };

    map.addControl(new mapboxgl.NavigationControl(), 'top-right');

    for (const feature of geojson.features) {
        const el = document.createElement("div");
        el.className = "marker";

        new mapboxgl.Marker(el).setLngLat(feature.geometry.coordinates).addTo(map);
    }
    
    

    var markers = [
        { 
            coordinates: [90.3623654, 23.8096612],
            title: "Mirpur Area",
            address: "Dhaka, Bangladesh"
        },
    ];


    markers.forEach(function (marker) { 
        var el = createMarkerElement();
        new mapboxgl.Marker({ element: el })
            .setLngLat(marker.coordinates)
            .setPopup(new mapboxgl.Popup({ offset: 25 }).setHTML('<div class="map-content"><h6>Dhaka Office</h6><p class="text caption-2"> 456 Sunset Boulevard, Los Angeles, California</p></div>'))
            .addTo(map);
    });

    function createMarkerElement() {
        var el = document.createElement('div');
        el.className = 'marker';
        return el;
    }
 --}}
</script>

    <script>
        $(document).ready(function() {
            // Your coordinates: 23.8096612, 90.3623654 (Dhaka Area)
            {{-- 23.80963164646734, 90.3623951666311 --}}
            const lat = 23.80963164646734;
            const lon = 90.3623951666311;
            const zoomLevel = 18;

            // Initialize the map
            const map = L.map('map', {
                zoomControl: true,
                scrollWheelZoom: false // We'll use our custom buttons
            }).setView([lat, lon], zoomLevel);

            // Use OpenStreetMap tiles (standard view)
            L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                attribution: '© OpenStreetMap contributors'
            }).addTo(map);

            // Add a red marker exactly like the screenshot
            const marker = L.marker([lat, lon]).addTo(map);
            marker.bindPopup("<b style='font-size: large;'>SavvyGx</b>").openPopup();

            // jQuery interactions
            $('#zoom-in').on('click', function() {
                map.zoomIn();
            });

            $('#zoom-out').on('click', function() {
                map.zoomOut();
            });

            // Handle window resize for map container
            $(window).on('resize', function() {
                map.invalidateSize();
            });
        });
    </script>
@endpush