@extends('template.main-template')

@section('content')
    <section class="custom-hero"></section>
    <div id="content">

        <!--======= CONATACT  =========-->
        <section class="contact padding-top-100 padding-bottom-100">
            <div class="container">
                <div class="contact-form">
                    <h5 class="text-center" style="font-size: 2.3em;">Where To Buy?</h5>
                    <div class="row">
                        <div class="col-md-12">

                            <!--======= Success Msg =========-->
                            @if (session('success'))
                                <div id="" class="success-msg">
                                    <i class="fa fa-paper-plane-o"></i>
                                    {{ session()->get('success') }}
                                </div>
                            @endif

                            @if ($errors->any())
                                <div id="" class="error-msg">
                                    <i class="fa-solid fa-circle-exclamation"></i>
                                    <ul>
                                        @foreach ($errors->all() as $error)
                                            <li>{{ $error }}</li>
                                        @endforeach
                                    </ul>
                                </div>
                            @endif
                        </div>
                    </div>

                    {{-- <div id="map" style="width: 100%; height: 500px;"></div> --}}

                    <div id="storepoint-container" data-map-id="165f2e986c917b"></div>

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

@push('javascript')
    <script>
        (function() {
            var a = document.createElement("script");
            a.type = "text/javascript";
            a.async = !0;
            a.src = "https://cdn.storepoint.co/api/v1/js/165f2e986c917b.js";
            var b = document.getElementsByTagName("script")[0];
            b.parentNode.insertBefore(a, b);
        }());
    </script>

    {{-- <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCX96rRmMEdX-nksNASByYHD3mnki7S-cc&callback=initMap" async
        defer></script>
    <script>
        function initMap() {


            const map = new google.maps.Map(document.querySelector('#map'), {
                center: {
                    lat: 37.4093332,
                    lng: -84.8841669
                },
                zoom: 4,
            })

            const stores = 
            stores.map(item => {
                let marker = new google.maps.Marker({
                    position: {
                        lat: parseInt(item.coord_x),
                        lng: parseInt(item.coord_y)
                    },
                    map: map,
                    title: item.title,
                    icon: {
                        url: (item.type === 'inside') ?
                            "