@extends('template.main-template')

@section('content')
    <div class="main-content">
        <div class="container">
            <div class="space-padding-tb-60 row">
                <div class="col-md-4">
                    <div class="feature-box feature-box-v3 feature-box-center space-30">
                        <div class="fbox-icon">
                            <a href="#"><i class="icons fa fa-map-marker"></i></a>
                        </div>
                        <div class="fbox-body">
                            <h4>Our Address</h4>
                            <p>1800 N Powerline Rd #5, Pompano Beach, FL 33069</p>
                        </div>
                    </div>
                </div>
                <!-- End col-md-4 -->
                <div class="col-md-4">
                    <div class="feature-box feature-box-v3 feature-box-center space-30">
                        <div class="fbox-icon">
                            <a href="#"><i class="icons fa fa-envelope-o"></i></a>
                        </div>
                        <div class="fbox-body">
                            <h4>Our Email</h4>
                            <p>sales@zapsupplies.com</p>
                        </div>
                    </div>
                </div>
                <!-- End col-md-4 -->
                <div class="col-md-4">
                    <div class="feature-box feature-box-v3 feature-box-center space-30">
                        <div class="fbox-icon">
                            <a href="#"><i class="icons fa fa-phone"></i></a>
                        </div>
                        <div class="fbox-body">
                            <h4>Our Phone</h4>
                            <p>(754) 222-6982</p>
                        </div>
                    </div>
                </div>
                <!-- End col-md-4 -->
            </div>
            <!-- End padding-tb-60 -->
        </div>
        <!-- End container -->
        <div class="contact-content">
            <div id="googleMap" class="col-md-6"></div>
            <div class="col-md-6 space-padding-50 contact-form contact-form-bg">
                <h3 class="space-50">send us a message</h3>
                <form class="form-horizontal" method="post" action="{{ route('actions.sendContactForm') }}">

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

                    @csrf
                    <div class="form-group col-md-12">
                        <label class=" control-label" for="inputName">Name</label>
                        <input type="text" class="form-control" id="inputName" placeholder="Name" name="name">
                    </div>
                    <div class="form-group col-md-12">
                        <label class=" control-label" for="inputEmail">Email</label>
                        <input type="text" class="form-control" id="inputEmail" placeholder="Email" name="email">
                    </div>
                    <div class="form-group col-md-12">
                        <label class=" control-label" for="message">Message</label>
                        <textarea class="form-control" id="message" name="msg"></textarea>
                        <div class="checkbox space-10">
                            <div class="g-recaptcha"
                                data-sitekey="{{ env('WEBSITE_KEY', '6LcRWLgpAAAAAASQv_KLrARI1KKZIR-fvdSYVP8B') }}">
                            </div>
                        </div>
                        <button class="btn link-button" type="submit">Send</button>
                    </div>
                </form>
            </div>
        </div>
        <!-- End contact content -->
    </div>
@endsection

@push('javascript')
    <script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
    <script defer src="https://www.google.com/recaptcha/api.js" async defer></script>
    {{-- <script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyCX96rRmMEdX-nksNASByYHD3mnki7S-cc&callback=initMap"></script> --}}

    <script>
        (g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})({
          key: "AIzaSyC-q7BoGLV1hVGpn57_c3O9kzv7_YUf2Pc",
          v: "weekly",
          // Use the 'v' parameter to indicate the version to use (weekly, beta, alpha, etc.).
          // Add other bootstrap parameters as needed, using camel case.
        });
      </script>

    <script type="text/javascript">

        let map;

        async function initMap() {
            const { Map } = await google.maps.importLibrary("maps");
            const center = {lat:26.253778, lng: -80.151154}

            map = new Map(document.getElementById("googleMap"), {
                center,
                zoom: 18,
            });

           const marker = new google.maps.Marker({
                position: center,
                map,
                title: 'Zap Supplies Store',
            })

            marker.addListener('click', ({domEvent, latLng}) => {
                const {target} = domEvent;
                window.location.href = 'https://www.google.com/maps/dir//zap+supplies/@26.2537726,-80.1533636,16.25z/data=!3m1!5s0x88d9033ab4fa7305:0x58fe757bc55f7fce!4m8!4m7!1m0!1m5!1m1!1s0x88d903384fd8d0b9:0x5d057601a7607790!2m2!1d-80.1511544!2d26.2537777?entry=ttu'
            });
        }

        initMap();

        // let map;

        // const center = {lat:26.253778, lng: -80.151154}

        // function initMap() {
        //     map = new google.maps.Map(document.guetElementById('googleMap'), {
        //         center,
        //         zoom:1
        //     });

        //     new google.maps.Marker({
        //         position: center,
        //         map,
        //         label: 'Zap Supplies Store'
        //     })

        // }

        // window.initMap = initMap

    </script>

    {{-- <script type="text/javascript" src="{{ asset('template/js/store.js') }}"></script> --}}
@endpush

@push('css')
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
@endpush