@extends('website.layout.master')
@section('content')
    <style>
        .bar {
            background-color: #3081c0 !important;
        }

        .cus_card {
            background-color: #3081c0 !important;
            color: #fff !important;
            display: inline-block !important;
            height: 32px !important;
        }

        .newp {
            display: inline-block !important;
        }

        .cus_card1 {
            width: 80px !important;
        }

        .cus_card2 {
            width: 80px !important;
        }

        .cus_card3 {
            width: 80px !important;
        }

        @media (max-width: 768px) {
            .cus_card1 {
                margin-left: 40px !important;
            }

            .cus_card2 {
                margin: 0px 10px !important;
            }

            .cus_card3 {
                width: 80px !important;
            }
        }

        @media (max-width: 350px) {
            .cus_card1 {
                margin-left: 20px !important;
            }
        }

        @media screen and (max-width: 1440px) and (min-width: 992px) {
            .cus_card1 {
                margin-left: 20px !important;
            }
        }
    </style>
    <div class="container">
        <div class="row ">
            <div class="col-lg-12">
                <h3 class="text-center" id="greeting">We've found <span class="store_qty">{{ $total }}
                    </span>facilities within <span class="distance">{{ $mile }} </span>{{ $address }}</h3>
            </div>
        </div>
    </div>
    @if (!empty($featured_store))
        <section class="py-0  sponsored">
            <div class="container py-4">
                <div class="row">
                    <div class="col-12 text-center">
                        <h3 class="pb-3">Featured Facility</h3>
                    </div>
                </div>
                @forelse ($featured_store as $store)
                    <div id="slider" class="advert rounded">
                        <div class="slide active">
                            <div class="d-lg-none">
                                <div class="collapse show advertResponsive">
                                    <div class="row border-green-n paper-bgnd rounded-top mx-0">
                                        <div class="col-12 py-3 min-h-80"> 
                                            <img
                                                src="{{ './webassets/imgs/2453image1.png' }}" title="storing" alt="logo"
                                                class=" img-fluid-x d-block mx-auto align-top">
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row bar pt-2 mx-0">
                                <div class="col-12 text-center pt-1 pt-lg-0 min-h-75">
                                    <h1 class="white-text"> Find Me Storage - {{ $store->city }} City </h1>
                                </div>
                                <div class="col-6 col-sm-4 mb-3 mb-lg-0"><a
                                        class="btn btn-red btn-sm d-lg-none rounded min-w-100" href="#">View Store</a>
                                </div>
                                <div class="more-btn col-6 col-sm-8 mb-9"><button
                                        class="btn btn-sm btn-blue more_btn rounded d-lg-none float-right min-w-100"
                                        data-toggle="collapse" data-target=".advertResponsive"
                                        aria-controls="navbarResponsive" aria-expanded="false"
                                        aria-label="Toggle navigation"><span>More <i class="fa fa-arrow-down"
                                                aria-hidden="true"></i></span></button></div>
                            </div>
                            {{-- <div class="d-block d-lg-none">
                                <div class="advertResponsive collapse">
                                    <div class="paper-bgnd border-green-u py-0 rounded-bottom">
                                        <div class="slides">
                                            <div class="row">
                                                <div class="col-lg-12 col-md-8 mx-auto pb-md-3 pb-3 pt-3 pt-lg-0 max-h-100">
                                                    <img src="{{ './webassets/imgs/2453image1.png' }}" title="storing"
                                                        alt="logo" class="img-fluid-x mx-auto">
                                                </div>
                                                <div class="col-12">
                                                    <p class="mx-3">Cheap Self Storage *first 4 weeks only £1

                                                        and Free Collection offer! *T &amp; C’s apply</p>
                                                </div>
                                                <div class="col-lg-5 col-md-8 mx-md-auto pb-3">
                                                    <ul class="list-unstyled checkmark">
                                                        <li>Affordable Safe and Secure</li>
                                                        <li>Free Collection for Six</li>
                                                        <li>Months storage period.</li>
                                                        <li>with a two man team</li>
                                                        <li>Domestic and Business</li>
                                                        <li>Try our Move and Save !</li>
                                                    </ul>
                                                </div>
                                                <div class="col-lg-5 col-md-8 mx-3 mx-md-auto py-3"><button type="button"
                                                        name="get_directions"
                                                        class="btn btn-orange btn-block btn-sm slider-pause rounded"
                                                        onclick="myFunction()">Get
                                                        directions!</button> <button type="button" onclick="email()"
                                                        class="btn btn-orange btn-block btn-sm slider-pause rounded">Email
                                                        Store</button> <a href="" target="_blank" id="0"
                                                        class="btn btn-orange btn-block btn-sm visit_website rounded"
                                                        role="button">Visit Website</a> <button type="button"
                                                        onclick="text()"
                                                        class="btn btn-orange btn-block btn-sm slider-pause rounded">Text Me
                                                        Details!</button> <button type="button" onclick="reserve()"
                                                        class="btn btn-orange btn-block btn-sm slider-pause rounded">Reserve
                                                        Now!</button><br>
                                                    <p class="text-center call pt-1"><a href="tel: 0800 161 3603">☎ 0800 161
                                                            3603
                                                        </a></p> <a class="btn btn-red btn-block rounded"
                                                        href="">View
                                                        Store</a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div> --}}
                            <div class="row mx-0 d-none d-lg-block">
                                <div class="col-lg-12 paper-bgnd border-green-u">
                                    <div class="slides pt-3">
                                        <div class="row">
                                            <div class="col-lg-5 col-md-6 pb-3">
                                                <div class="row">
                                                    <div class="col-7 pb-2"> <img
                                                            src="{{ './webassets/imgs/logo.png  ' }}" alt="logo"
                                                            class="img-fluid"> </div>
                                                </div>
                                                <div class="row">
                                                    <div class="col-12">
                                                        <p>Cheap Self Storage *first 4 weeks only £1

                                                            and Free Collection offer! *T &amp; C’s apply</p>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-lg-4 col-md-6">
                                                <ul class="list-unstyled checkmark">
                                                    <li>Affordable Safe and Secure</li>
                                                    <li>Free Collection for Six</li>
                                                    <li>Months storage period.</li>
                                                    <li>with a two man team</li>
                                                    <li>Domestic and Business</li>
                                                    <li>Try our Move and Save !</li>
                                                </ul>
                                            </div>
                                            <div class="col-lg-3 col-md-12 pb-3">
                                                {{-- <button type="button"
                                                    onclick="myFunction()"
                                                    class="btn btn-orange btn-block btn-sm slider-pause
                                            rounded">Get
                                                    directions!</button> --}}
                                                <button type="button" onclick="email()"
                                                    class="btn btn-orange btn-block btn-sm slider-pause rounded">Email
                                                    Store</button>
                                                {{-- <a href="" target="_blank" id="0"
                                                    class="btn btn-orange btn-block btn-sm visit_website rounded"
                                                    role="button">Visit Website</a>
                                                     <button type="button" onclick="text()"
                                                    class="btn btn-orange btn-block btn-sm slider-pause rounded">Text Me
                                                    Details!</button>
                                                     <button type="button" onclick="reserve()"
                                                    class="btn btn-orange btn-block btn-sm slider-pause rounded">Reserve
                                                    Now!</button><br> --}}
                                                <p class="text-center call pt-1"><a href="tel: {{ $store->phone_no }}">☎
                                                        {{ $store->phone_no }}
                                                    </a>
                                                </p> <a class="btn btn-red btn-block rounded" href="{{ route('self_storage_store_finder',['id'=>$store->id]) }}">View
                                                    Store</a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                @empty
                @endforelse
            </div>
        </section>
    @endif

    {{-- get direction --}}
    <section class="paleGrey">
        <div id="myDIV" class="container ad collapse direction" style="">
            <div class="row pt-3">
                <div class="col-lg-6 pb-3">
                    <h3>Map</h3>
                    <div id="map">

                    </div>
                </div>
                <div id="print" class="col-lg-6">
                    <h3>Directions</h3>
                    <div class="pre-scrollable pt-3 px-3" id="directionsPanel">
                        <h5 id="route_title" class="pb-3">Directions to Storing</h5>
                        <ol class="directions" style="font-size: small;">
                            <li>
                                <div class="r_instruct">Head <span class="heading">northwest</span> on <span
                                        class="street">St Johns Lane</span>. <span class="distance-description">Go for
                                        <span class="length">16 m</span>.</span></div>
                            </li>
                            <li>
                                <div class="r_instruct">Turn <span class="direction">left</span> onto <span
                                        class="next-street">St Johns Lane</span>. <span class="distance-description">Go
                                        for <span class="length">48 m</span>.</span></div>
                            </li>
                            <li>
                                <div class="r_instruct">Continue on <span class="next-street">Albion Place</span>. <span
                                        class="distance-description">Go for <span class="length">40 m</span>.</span>
                                </div>
                            </li>
                            <li>
                                <div class="r_instruct">Continue on <span class="next-street">Benjamin Street</span>.
                                    <span class="distance-description">Go for <span class="length">97 m</span>.</span>
                                </div>
                            </li>
                            <li>
                                <div class="r_instruct">Turn <span class="direction">left</span> onto <span
                                        class="next-street">Turnmill Street</span>. <span class="distance-description">Go
                                        for <span class="length">55 m</span>.</span></div>
                            </li>
                            <li>
                                <div class="r_instruct">Turn <span class="direction">left</span> onto <span
                                        class="next-street">Cowcross Street</span>. <span class="distance-description">Go
                                        for <span class="length">189 m</span>.</span></div>
                            </li>
                            <li>
                                <div class="r_instruct">Turn <span class="direction">right</span> onto <span
                                        class="next-street">St John Street</span> <span class="number">(B501)</span>.
                                    <span class="distance-description">Go for <span class="length">22 m</span>.</span>
                                </div>
                            </li>
                            <li>
                                <div class="r_instruct">Turn <span class="direction">left</span> onto <span
                                        class="next-street">Charterhouse Street</span>. <span
                                        class="distance-description">Go for <span class="length">110 m</span>.</span>
                                </div>
                            </li>
                            <li>
                                <div class="r_instruct">Turn <span class="direction">right</span> onto <span
                                        class="next-street">Lindsey Street</span>. <span class="distance-description">Go
                                        for <span class="length">91 m</span>.</span></div>
                            </li>
                            <li>
                                <div class="r_instruct">Turn <span class="direction">right</span> onto <span
                                        class="next-street">Long Lane</span>. <span class="distance-description">Go for
                                        <span class="length">103 m</span>.</span></div>
                            </li>
                            <li>
                                <div class="r_instruct">Continue on <span class="next-street">West Smithfield</span>.
                                    <span class="distance-description">Go for <span class="length">145 m</span>.</span>
                                </div>
                            </li>
                            <li>
                                <div class="r_instruct">Turn <span class="direction">left</span> onto <span
                                        class="next-street">Smithfield Street</span>. <span
                                        class="distance-description">Go
                                        for <span class="length">136 m</span>.</span>
                                </div>
                            </li>
                            <li>
                                <div class="r_instruct">Turn <span class="direction">right</span> onto <span
                                        class="next-street">Snow Hill</span>. <span class="distance-description">Go for
                                        <span class="length">94 m</span>.</span></div>
                            </li>
                            <li>
                                <div class="r_instruct">Turn <span class="direction">slightly left</span> onto <span
                                        class="next-street">West Smithfield</span>. <span class="distance-description">Go
                                        for <span class="length">26 m</span>.</span></div>
                            </li>
                            <li>
                                <div class="r_instruct">Turn <span class="direction">left</span> onto <span
                                        class="next-street">Farringdon Street</span> <span class="number">(A201)</span>.
                                    <span class="distance-description">Go for <span class="length">399 m</span>.</span>
                                </div>
                            </li>
                            <li>
                                <div class="r_instruct">Continue on <span class="next-street">Ludgate Circus</span>
                                    <span class="number">(A201)</span>. <span class="distance-description">Go for <span
                                            class="length">331 m</span>.</span>
                                </div>
                            </li>
                            <li>
                                <div class="r_instruct">Continue on <span class="next-street">Blackfriars Bridge</span>
                                    <span class="number">(A201)</span>. <span class="distance-description">Go for <span
                                            class="length">291 m</span>.</span>
                                </div>
                            </li>
                            <li>
                                <div class="r_instruct">Continue on <span class="next-street">Blackfriars Road</span>
                                    <span class="number">(A201)</span>. <span class="distance-description">Go for <span
                                            class="length">162 m</span>.</span>
                                </div>
                            </li>
                            <li>
                                <div class="r_instruct">Turn <span class="direction">right</span> onto <span
                                        class="next-street">Stamford Street</span> <span class="number">(A3200)</span>.
                                    <span class="distance-description">Go for <span class="length">678 m</span>.</span>
                                </div>
                            </li>
                            <li>
                                <div class="r_instruct">Take the <span class="exit">2nd exit</span> from roundabout
                                    onto
                                    <span class="next-street">York Square</span> <span class="number">(A3200)</span>.
                                    <span class="distance-description">Go for <span class="length">197 m</span>.</span>
                                </div>
                            </li>
                            <li>
                                <div class="r_instruct">Continue on <span class="next-street">York Road</span> <span
                                        class="number">(A3200)</span>. <span class="distance-description">Go for <span
                                            class="length">312 m</span>.</span></div>
                            </li>
                            <li>
                                <div class="r_instruct">Continue on <span class="next-street">Addington Street</span>
                                    <span class="number">(A3200)</span>. <span class="distance-description">Go for <span
                                            class="length">135 m</span>.</span>
                                </div>
                            </li>
                            <li>
                                <div class="r_instruct">Continue on <span class="next-street">Westminster Bridge
                                        Road</span> <span class="number">(A23)</span>. <span
                                        class="distance-description">Go for <span class="length">63 m</span>.</span>
                                </div>
                            </li>
                            <li>
                                <div class="r_instruct">Turn <span class="direction">left</span> onto <span
                                        class="next-street">Lambeth Palace Road</span> <span
                                        class="number">(A3036)</span>. <span class="distance-description">Go for <span
                                            class="length">754 m</span>.</span></div>
                            </li>
                            <li>
                                <div class="r_instruct">Take the <span class="exit">2nd exit</span> from roundabout
                                    onto
                                    <span class="next-street">Albert Embankment</span> <span
                                        class="number">(A3036)</span>. <span class="distance-description">Go for <span
                                            class="length">957 m</span>.</span>
                                </div>
                            </li>
                            <li>
                                <div class="r_instruct">Turn <span class="direction">left</span> onto <span
                                        class="next-street">Kennington Lane</span> <span class="number">(A202)</span>.
                                    <span class="distance-description">Go for <span class="length">83 m</span>.</span>
                                </div>
                            </li>
                            <li>
                                <div class="r_instruct">Keep <span class="direction">right</span> onto <span
                                        class="next-street">South Lambeth Road</span> <span class="number">(A203)</span>.
                                    <span class="distance-description">Go for <span class="length">154 m</span>.</span>
                                </div>
                            </li>
                            <li>
                                <div class="r_instruct">Keep <span class="direction">right</span> onto <span
                                        class="next-street">South Lambeth Road</span>. <span
                                        class="distance-description">Go for <span class="length">86 m</span>.</span>
                                </div>
                            </li>
                            <li>
                                <div class="r_instruct">Continue on <span class="next-street">Parry Street</span> <span
                                        class="number">(A3205)</span>. <span class="distance-description">Go for <span
                                            class="length">170 m</span>.</span></div>
                            </li>
                            <li>
                                <div class="r_instruct">Keep <span class="direction">left</span> onto <span
                                        class="next-street">Wandsworth Road</span> <span class="number">(A3036)</span>.
                                    <span class="distance-description">Go for <span class="length">979 m</span>.</span>
                                </div>
                            </li>
                            <li>
                                <div class="r_instruct">Arrive at <span class="street">Wandsworth Road</span> <span
                                        class="number">(A3036)</span>.</div>
                            </li>
                        </ol>
                        <div class="my-3" style="font-size: small;"><b>Total distance</b>: 4.3 miles. <br><b>Travel
                                Time</b>: 20 minutes 32 seconds. (in current traffic)</div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    {{-- get direction --}}

    {{-- email --}}
    <section class="paleGrey">
        <div class="container" style="display: none" id="emaildiv">
            <div id="ad_email" class="row ad collapse show" style="">
                <div class="col-lg-12 py-5">
                    <div class="row">
                        <div class="col-lg-10">
                            <h3 id="email_str_title">Email - Find Me Storage</h3>
                        </div>
                    </div>
                    <form id="email_store_form" novalidate="novalidate" data-fv-no-icon="true"
                        class="has-validator fv-plugins-bootstrap fv-plugins-framework">
                        <fieldset>
                            <div class="form-group fv-plugins-icon-container">
                                <div class="input-group">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text">
                                            <span class="cts-user" aria-hidden="true"></span>
                                        </span>
                                    </div>
                                    <input id="email_name" name="email_name" type="text" placeholder="Name"
                                        required="" class="form-control" aria-label="Name" autocomplete="off">
                                </div>
                                <div class="fv-plugins-message-container">
                                    <span class="text-danger" id="name_error"></span>
                                </div>
                            </div>
                            <div class="form-group fv-plugins-icon-container">
                                <div class="input-group">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text">
                                            <span class="cts-phone-alt" aria-hidden="true"></span>
                                        </span>
                                    </div>
                                    <input id="email_phone" name="phone" type="number" placeholder="Phone"
                                        data-fv-phone="" data-fv-phone-country="GB"
                                        data-fv-phone-message="Please enter a valid UK phone number" required=""
                                        class="form-control" aria-label="Phone" autocomplete="off">
                                </div>
                                <div class="fv-plugins-message-container">
                                    <span class="text-danger" id="phone_error"></span>
                                </div>
                            </div>
                            <div class="form-group fv-plugins-icon-container">
                                <div class="input-group">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text">
                                            <span class="cts-envelope" aria-hidden="true"></span>
                                        </span>
                                    </div>
                                    <input id="email_store" name="email" type="email" placeholder="E-mail Address"
                                        required="" class="form-control" aria-label="E-mail Address">
                                </div>
                                <div class="fv-plugins-message-container">
                                    <span class="text-danger" id="email_error"></span>
                                </div>
                            </div>
                            <div class="form-group fv-plugins-icon-container">
                                <label for="space" class="form-control-label">How much space? <sup
                                        class="text-danger">* </sup>
                                </label>
                                <select id="email_space" name="space" class="custom-select form-control"
                                    required="">
                                    <option value="25 ft²">25 ft²</option>
                                    <option value="35 ft²">35 ft²</option>
                                    <option value="50 ft²">50 ft²</option>
                                    <option value="75 ft²">75 ft²</option>
                                    <option value="100 ft²">100 ft²</option>
                                    <option value="125 ft²">125 ft²</option>
                                    <option value="150 ft²">150 ft²</option>
                                    <option value="160 ft²">160 ft²</option>
                                </select>
                                <div class="fv-plugins-message-container"></div>
                            </div>
                            <div class="form-group fv-plugins-icon-container">
                                <label for="period" class="form-control-label">How long for? <sup class="text-danger">*
                                    </sup>
                                </label>
                                <select id="email_period" name="period" class="custom-select form-control"
                                    required="">
                                    <option value="1 Month">1 Month</option>
                                    <option value="2 Month">2 Months</option>
                                    <option value="3-6 Month">3-6 Months</option>
                                    <option value="6-12 Month">6-12 Months</option>
                                    <option value="12 Month">12 Months+</option>
                                </select>
                                <div class="fv-plugins-message-container"></div>
                            </div>
                            <div class="form-group fv-plugins-icon-container">
                                <label for="reason" class="form-control-label">What for? <sup class="text-danger">*
                                    </sup>
                                </label>
                                <select id="email_reason" name="reason" class="custom-select form-control"
                                    required="">
                                    <option value="None">None</option>
                                    <option value="Moving home">Moving home</option>
                                    <option value="Moving Abroad">Moving Abroad</option>
                                    <option value="Student">Student</option>
                                    <option value="Extra Space">Extra Space</option>
                                    <option value="Sports Equipment">Sports Equipment</option>
                                    <option value="Moving Business">Moving Business</option>
                                    <option value="Business Stock">Business Stock</option>
                                    <option value="Archiving">Archiving</option>
                                </select>
                                <div class="fv-plugins-message-container"></div>
                            </div>
                            <div class="form-group">
                                <label for="Message" class="form-control-label">Message</label>
                                <textarea id="email_message" name="Message" class="form-control form-control"></textarea>
                            </div>
                            <div class="fv-plugins-message-container">
                                <span class="text-danger" id="message_error"></span>
                            </div>
                            <div class="form-group">
                                <button type="submit" name="submit-btn" value="1"
                                    class="btn btn-green btn-lg rounded send">Submit</button>
                            </div>
                        </fieldset>
                        <div class="fv-plugins-message-container">
                            <span class="text-success" id="message_success"></span>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </section>
    {{-- email --}}
    {{-- text me detail --}}
    <section class="paleGrey">
        <div class="container" id="textdiv" style="display: none;">
            <div class="row ad collapse show" style="">
                <div class="col-lg-12 py-5">
                    <div class="row">
                        <div class="col-lg-10">
                            <h3 id="sms_str_title">Send details for - Storing</h3>
                        </div>
                        <form id="send_sms" class="has-validator fv-plugins-bootstrap fv-plugins-framework">
                            <fieldset>
                                <div class="col-lg-12">
                                    <h4>Send Message to: </h4>
                                </div>
                                <div class="col-lg-12">
                                    <div class="form-group fv-plugins-icon-container">
                                        <div class="input-group">
                                            <div class="input-group-prepend"><span class="input-group-text"><span
                                                        class="cts-phone-alt" aria-hidden="true"></span></span></div>
                                            <input id="phone" name="phone" type="text" placeholder="Phone"
                                                data-fv-phone="" data-fv-phone-country="GB"
                                                data-fv-phone-message="Please enter a valid UK phone number"
                                                required="" class="form-control" aria-label="Phone"
                                                autocomplete="off">
                                        </div>
                                        <div class="fv-plugins-message-container"></div>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <button type="submit" name="submit-btn2" value="1"
                                        class="btn btn-green btn-lg rounded">Send <span
                                            class="glyphicon glyphicon-circle-arrow-right append"></span></button>
                                </div>
                            </fieldset>
                            <div></div><input type="hidden">
                        </form>
                    </div>
                </div>
            </div>
    </section>
    {{-- text me detail --}}
    {{-- reserve --}}
    <section class="paleGrey">
        <div class="container" id="reservediv" style="display: none;">
            <div class="ad collapse show">
                <div class="col-lg-12 py-5">
                    <div class="row">
                        <div class="col-lg-10">
                            <h3 id="reserve_str_title">Reservation for - Storing</h3>
                        </div>
                        <div class="col-lg-2"><button type="button" data-toggle="collapse" data-target="#ad_reserve"
                                class="btn btn-orange btn-lg btn-close slider-resume rounded" aria-expanded="true">close
                                <i class="cts-chevron-up" aria-hidden="true"></i></button></div>
                    </div>
                    <form id="reservation" action="form-handler.php" method="POST" novalidate="novalidate"
                        data-fv-no-icon="true" class="has-validator fv-plugins-bootstrap fv-plugins-framework">
                        <div><input name="reservation-token" type="hidden"
                                value="21459625862b6d48cdf6982.84740782"><input name="reservation" type="hidden"
                                value="1"><input name="vendor_email_2" type="hidden" value="sales@storing.com"
                                class="form-control"><input name="store_id_reserve" type="hidden" value="2453"><input
                                name="return_url" type="hidden" value="/results.php"><input name="page"
                                type="hidden" value="results.php"></div>
                        <fieldset>
                            <div class="form-group fv-plugins-icon-container">
                                <div class="input-group">
                                    <div class="input-group-prepend"><span class="input-group-text"><span
                                                class="cts-user" aria-hidden="true"></span></span></div><input
                                        id="name" name="name" type="text" value="" placeholder="Name"
                                        required="" class="form-control" aria-label="Name" autocomplete="off">
                                </div>
                                <div class="fv-plugins-message-container"></div>
                            </div>
                            <div class="form-group fv-plugins-icon-container">
                                <div class="input-group">
                                    <div class="input-group-prepend"><span class="input-group-text"><span
                                                class="cts-phone-alt" aria-hidden="true"></span></span></div><input
                                        id="phone" name="phone" type="text" value="" placeholder="Phone"
                                        data-fv-phone="" data-fv-phone-country="GB"
                                        data-fv-phone-message="Please enter a valid UK phone number" required=""
                                        class="form-control" aria-label="Phone" autocomplete="off">
                                </div>
                                <div class="fv-plugins-message-container"></div>
                            </div>
                            <div class="form-group fv-plugins-icon-container">
                                <div class="input-group">
                                    <div class="input-group-prepend"><span class="input-group-text"><span
                                                class="cts-envelope" aria-hidden="true"></span></span></div><input
                                        id="email" name="email" type="email" value=""
                                        placeholder="E-mail Address" required="" class="form-control"
                                        aria-label="E-mail Address">
                                </div>
                                <div class="fv-plugins-message-container"></div>
                            </div>
                            <div class="form-group fv-plugins-icon-container"><label for="space"
                                    class="form-control-label">How much space? <sup class="text-danger">*
                                    </sup></label><select id="space" name="space"
                                    class="custom-select form-control" required="">
                                    <option value="25">25 ft²</option>
                                    <option value="35">35 ft²</option>
                                    <option value="50">50 ft²</option>
                                    <option value="75">75 ft²</option>
                                    <option value="100">100 ft²</option>
                                    <option value="125">125 ft²</option>
                                    <option value="150">150 ft²</option>
                                    <option value="160">160 ft²</option>
                                </select>
                                <div class="fv-plugins-message-container"></div>
                            </div>
                            <div class="form-group fv-plugins-icon-container"><label for="period"
                                    class="form-control-label">How long for? <sup class="text-danger">*
                                    </sup></label><select id="period" name="period"
                                    class="custom-select form-control" required="">
                                    <option value="1">1 Month</option>
                                    <option value="2">2 Months</option>
                                    <option value="3">3-6 Months</option>
                                    <option value="6">6-12 Months</option>
                                    <option value="12">12 Months+</option>
                                </select>
                                <div class="fv-plugins-message-container"></div>
                            </div>
                            <div class="form-group fv-plugins-icon-container"><label for="reason"
                                    class="form-control-label">What for? <sup class="text-danger">*
                                    </sup></label><select id="reason" name="reason"
                                    class="custom-select form-control" required="">
                                    <option value="None">None</option>
                                    <option value="Moving home">Moving home</option>
                                    <option value="Moving Abroad">Moving Abroad</option>
                                    <option value="Student">Student</option>
                                    <option value="Extra Space">Extra Space</option>
                                    <option value="Sports Equipment">Sports Equipment</option>
                                    <option value="Moving Business">Moving Business</option>
                                    <option value="Business Stock">Business Stock</option>
                                    <option value="Archiving">Archiving</option>
                                </select>
                                <div class="fv-plugins-message-container"></div>
                            </div>
                            {{-- <div class="form-group fv-plugins-icon-container"><label for="reservation_date"
                                    class="form-control-label">Date <sup class="text-danger">* </sup></label><input
                                    id="reservation_date" name="reservation_date" type="text" value=""
                                    required="" class="form-control picker__input" autocomplete="off" data-value=""
                                    readonly="" aria-haspopup="true" aria-expanded="false" aria-readonly="false"
                                    aria-owns="reservation_date_root">
                                <div class="picker" id="reservation_date_root" aria-hidden="true"
                                    style="min-width: 240px; font-size: 14px;">
                                    <div class="picker__holder" tabindex="-1">
                                        <div class="picker__frame">
                                            <div class="picker__wrap">
                                                <div class="picker__box">
                                                    <div class="picker__header">
                                                        <div class="picker__month">June</div>
                                                        <div class="picker__year">2022</div>
                                                        <div class="picker__nav--prev" data-nav="-1" role="button"
                                                            aria-controls="reservation_date_table" title="Previous month">
                                                        </div>
                                                        <div class="picker__nav--next" data-nav="1" role="button"
                                                            aria-controls="reservation_date_table" title="Next month">
                                                        </div>
                                                    </div>
                                                    <table class="picker__table" id="reservation_date_table"
                                                        role="grid" aria-controls="reservation_date"
                                                        aria-readonly="true">
                                                        <thead>
                                                            <tr>
                                                                <th class="picker__weekday" scope="col"
                                                                    title="Monday">Mon</th>
                                                                <th class="picker__weekday" scope="col"
                                                                    title="Tuesday">Tue</th>
                                                                <th class="picker__weekday" scope="col"
                                                                    title="Wednesday">Wed</th>
                                                                <th class="picker__weekday" scope="col"
                                                                    title="Thursday">Thu</th>
                                                                <th class="picker__weekday" scope="col"
                                                                    title="Friday">Fri</th>
                                                                <th class="picker__weekday" scope="col"
                                                                    title="Saturday">Sat</th>
                                                                <th class="picker__weekday" scope="col"
                                                                    title="Sunday">Sun</th>
                                                            </tr>
                                                        </thead>
                                                        <tbody>
                                                            <tr>
                                                                <td role="presentation">
                                                                    <div class="picker__day picker__day--outfocus"
                                                                        data-pick="1653894000000" role="gridcell"
                                                                        aria-label="May 30, 2022">30</div>
                                                                </td>
                                                                <td role="presentation">
                                                                    <div class="picker__day picker__day--outfocus"
                                                                        data-pick="1653980400000" role="gridcell"
                                                                        aria-label="May 31, 2022">31</div>
                                                                </td>
                                                                <td role="presentation">
                                                                    <div class="picker__day picker__day--infocus"
                                                                        data-pick="1654066800000" role="gridcell"
                                                                        aria-label="Jun 01, 2022">1</div>
                                                                </td>
                                                                <td role="presentation">
                                                                    <div class="picker__day picker__day--infocus"
                                                                        data-pick="1654153200000" role="gridcell"
                                                                        aria-label="Jun 02, 2022">2</div>
                                                                </td>
                                                                <td role="presentation">
                                                                    <div class="picker__day picker__day--infocus"
                                                                        data-pick="1654239600000" role="gridcell"
                                                                        aria-label="Jun 03, 2022">3</div>
                                                                </td>
                                                                <td role="presentation">
                                                                    <div class="picker__day picker__day--infocus"
                                                                        data-pick="1654326000000" role="gridcell"
                                                                        aria-label="Jun 04, 2022">4</div>
                                                                </td>
                                                                <td role="presentation">
                                                                    <div class="picker__day picker__day--infocus"
                                                                        data-pick="1654412400000" role="gridcell"
                                                                        aria-label="Jun 05, 2022">5</div>
                                                                </td>
                                                            </tr>
                                                            <tr>
                                                                <td role="presentation">
                                                                    <div class="picker__day picker__day--infocus"
                                                                        data-pick="1654498800000" role="gridcell"
                                                                        aria-label="Jun 06, 2022">6</div>
                                                                </td>
                                                                <td role="presentation">
                                                                    <div class="picker__day picker__day--infocus"
                                                                        data-pick="1654585200000" role="gridcell"
                                                                        aria-label="Jun 07, 2022">7</div>
                                                                </td>
                                                                <td role="presentation">
                                                                    <div class="picker__day picker__day--infocus"
                                                                        data-pick="1654671600000" role="gridcell"
                                                                        aria-label="Jun 08, 2022">8</div>
                                                                </td>
                                                                <td role="presentation">
                                                                    <div class="picker__day picker__day--infocus"
                                                                        data-pick="1654758000000" role="gridcell"
                                                                        aria-label="Jun 09, 2022">9</div>
                                                                </td>
                                                                <td role="presentation">
                                                                    <div class="picker__day picker__day--infocus"
                                                                        data-pick="1654844400000" role="gridcell"
                                                                        aria-label="Jun 10, 2022">10</div>
                                                                </td>
                                                                <td role="presentation">
                                                                    <div class="picker__day picker__day--infocus"
                                                                        data-pick="1654930800000" role="gridcell"
                                                                        aria-label="Jun 11, 2022">11</div>
                                                                </td>
                                                                <td role="presentation">
                                                                    <div class="picker__day picker__day--infocus"
                                                                        data-pick="1655017200000" role="gridcell"
                                                                        aria-label="Jun 12, 2022">12</div>
                                                                </td>
                                                            </tr>
                                                            <tr>
                                                                <td role="presentation">
                                                                    <div class="picker__day picker__day--infocus"
                                                                        data-pick="1655103600000" role="gridcell"
                                                                        aria-label="Jun 13, 2022">13</div>
                                                                </td>
                                                                <td role="presentation">
                                                                    <div class="picker__day picker__day--infocus"
                                                                        data-pick="1655190000000" role="gridcell"
                                                                        aria-label="Jun 14, 2022">14</div>
                                                                </td>
                                                                <td role="presentation">
                                                                    <div class="picker__day picker__day--infocus"
                                                                        data-pick="1655276400000" role="gridcell"
                                                                        aria-label="Jun 15, 2022">15</div>
                                                                </td>
                                                                <td role="presentation">
                                                                    <div class="picker__day picker__day--infocus"
                                                                        data-pick="1655362800000" role="gridcell"
                                                                        aria-label="Jun 16, 2022">16</div>
                                                                </td>
                                                                <td role="presentation">
                                                                    <div class="picker__day picker__day--infocus"
                                                                        data-pick="1655449200000" role="gridcell"
                                                                        aria-label="Jun 17, 2022">17</div>
                                                                </td>
                                                                <td role="presentation">
                                                                    <div class="picker__day picker__day--infocus"
                                                                        data-pick="1655535600000" role="gridcell"
                                                                        aria-label="Jun 18, 2022">18</div>
                                                                </td>
                                                                <td role="presentation">
                                                                    <div class="picker__day picker__day--infocus"
                                                                        data-pick="1655622000000" role="gridcell"
                                                                        aria-label="Jun 19, 2022">19</div>
                                                                </td>
                                                            </tr>
                                                            <tr>
                                                                <td role="presentation">
                                                                    <div class="picker__day picker__day--infocus"
                                                                        data-pick="1655708400000" role="gridcell"
                                                                        aria-label="Jun 20, 2022">20</div>
                                                                </td>
                                                                <td role="presentation">
                                                                    <div class="picker__day picker__day--infocus"
                                                                        data-pick="1655794800000" role="gridcell"
                                                                        aria-label="Jun 21, 2022">21</div>
                                                                </td>
                                                                <td role="presentation">
                                                                    <div class="picker__day picker__day--infocus"
                                                                        data-pick="1655881200000" role="gridcell"
                                                                        aria-label="Jun 22, 2022">22</div>
                                                                </td>
                                                                <td role="presentation">
                                                                    <div class="picker__day picker__day--infocus"
                                                                        data-pick="1655967600000" role="gridcell"
                                                                        aria-label="Jun 23, 2022">23</div>
                                                                </td>
                                                                <td role="presentation">
                                                                    <div class="picker__day picker__day--infocus"
                                                                        data-pick="1656054000000" role="gridcell"
                                                                        aria-label="Jun 24, 2022">24</div>
                                                                </td>
                                                                <td role="presentation">
                                                                    <div class="picker__day picker__day--infocus picker__day--today picker__day--highlighted"
                                                                        data-pick="1656140400000" role="gridcell"
                                                                        aria-label="Jun 25, 2022"
                                                                        aria-activedescendant="true">25</div>
                                                                </td>
                                                                <td role="presentation">
                                                                    <div class="picker__day picker__day--infocus"
                                                                        data-pick="1656226800000" role="gridcell"
                                                                        aria-label="Jun 26, 2022">26</div>
                                                                </td>
                                                            </tr>
                                                            <tr>
                                                                <td role="presentation">
                                                                    <div class="picker__day picker__day--infocus"
                                                                        data-pick="1656313200000" role="gridcell"
                                                                        aria-label="Jun 27, 2022">27</div>
                                                                </td>
                                                                <td role="presentation">
                                                                    <div class="picker__day picker__day--infocus"
                                                                        data-pick="1656399600000" role="gridcell"
                                                                        aria-label="Jun 28, 2022">28</div>
                                                                </td>
                                                                <td role="presentation">
                                                                    <div class="picker__day picker__day--infocus"
                                                                        data-pick="1656486000000" role="gridcell"
                                                                        aria-label="Jun 29, 2022">29</div>
                                                                </td>
                                                                <td role="presentation">
                                                                    <div class="picker__day picker__day--infocus"
                                                                        data-pick="1656572400000" role="gridcell"
                                                                        aria-label="Jun 30, 2022">30</div>
                                                                </td>
                                                                <td role="presentation">
                                                                    <div class="picker__day picker__day--outfocus"
                                                                        data-pick="1656658800000" role="gridcell"
                                                                        aria-label="Jul 01, 2022">1</div>
                                                                </td>
                                                                <td role="presentation">
                                                                    <div class="picker__day picker__day--outfocus"
                                                                        data-pick="1656745200000" role="gridcell"
                                                                        aria-label="Jul 02, 2022">2</div>
                                                                </td>
                                                                <td role="presentation">
                                                                    <div class="picker__day picker__day--outfocus"
                                                                        data-pick="1656831600000" role="gridcell"
                                                                        aria-label="Jul 03, 2022">3</div>
                                                                </td>
                                                            </tr>
                                                            <tr>
                                                                <td role="presentation">
                                                                    <div class="picker__day picker__day--outfocus"
                                                                        data-pick="1656918000000" role="gridcell"
                                                                        aria-label="Jul 04, 2022">4</div>
                                                                </td>
                                                                <td role="presentation">
                                                                    <div class="picker__day picker__day--outfocus"
                                                                        data-pick="1657004400000" role="gridcell"
                                                                        aria-label="Jul 05, 2022">5</div>
                                                                </td>
                                                                <td role="presentation">
                                                                    <div class="picker__day picker__day--outfocus"
                                                                        data-pick="1657090800000" role="gridcell"
                                                                        aria-label="Jul 06, 2022">6</div>
                                                                </td>
                                                                <td role="presentation">
                                                                    <div class="picker__day picker__day--outfocus"
                                                                        data-pick="1657177200000" role="gridcell"
                                                                        aria-label="Jul 07, 2022">7</div>
                                                                </td>
                                                                <td role="presentation">
                                                                    <div class="picker__day picker__day--outfocus"
                                                                        data-pick="1657263600000" role="gridcell"
                                                                        aria-label="Jul 08, 2022">8</div>
                                                                </td>
                                                                <td role="presentation">
                                                                    <div class="picker__day picker__day--outfocus"
                                                                        data-pick="1657350000000" role="gridcell"
                                                                        aria-label="Jul 09, 2022">9</div>
                                                                </td>
                                                                <td role="presentation">
                                                                    <div class="picker__day picker__day--outfocus"
                                                                        data-pick="1657436400000" role="gridcell"
                                                                        aria-label="Jul 10, 2022">10</div>
                                                                </td>
                                                            </tr>
                                                        </tbody>
                                                    </table>
                                                    <div class="picker__footer"><button class="picker__button--today"
                                                            type="button" data-pick="1656140400000" disabled=""
                                                            aria-controls="reservation_date">Today</button><button
                                                            class="picker__button--clear" type="button" data-clear="1"
                                                            disabled=""
                                                            aria-controls="reservation_date">Clear</button><button
                                                            class="picker__button--close" type="button"
                                                            data-close="true" disabled=""
                                                            aria-controls="reservation_date">Close</button></div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="fv-plugins-message-container"></div>
                            </div> --}}
                            <div class="form-group"><button type="submit" name="submit-btn2" value="1"
                                    class="btn btn-green btn-lg rounded">Save</button></div>
                        </fieldset>
                        <div></div><input type="hidden">
                    </form>
                </div>
            </div>
        </div>
    </section>
    {{-- reserve --}}

    <section class="nearby py-5">
        <div class="container-fluid">
            {{-- <div id="sortbar" class="row justify-content-between sort-filter sticky-top px-3 py-2 mx-lg-0"><button
                    id="sort-btn" class="pull-left btn btn-green rounded mb-0" type="button">Sort <span><i
                            class="cts-sort"></i></span></button>
                <div>
                    <p class="text-white mb-0 mt-1">Stores: <span class="store_qty">55 </span></p>
                </div><button id="filter-btn" class="pull-right btn-green rounded mb-0" type="button">Filter <span><i
                            class="cts-filter" aria-hidden="true"></i></span></button>
            </div>
            <div id="filter-feedback" class="row sticky-top collapse">
                <div class="col px-0 px-lg-3 offset-lg-4 col-lg-8 offset-xl-3 col-xl-9">
                    <div id="filter-feedback-str" class="py-1 pl-5" style="background-color: lightgrey;"></div>
                </div>
            </div> --}}
            <div class="row pb-5">
                <div id="result-cards"
                    class="col-sm-8 offset-sm-2 col-md-6 offset-md-3 col-lg-4 offset-lg-0 col-xl-3 mb-1000"
                    style="">
                    <div id="card">

                    </div>

                    {{-- <h3 class="text-center fs-heading"><strong>Featured Store</strong></h3> --}}
                    <div id="store-subs9" class="details-item">
                        {{-- <div class="card featured  rounded"> --}}
                            {{-- <div id="bs-carousel9" class="featured-carousel carousel slide" ride="carousel"> --}}
                                {{-- <div class="carousel-inner"> --}}
                                    {{-- <div class="carousel-item active"> --}}
                                        {{-- <img class="store-logo mx-auto lazyload"
                                            src="{{ './webassets/imgs/180image1.jpg' }}" height="80" alt="logo"
                                            title="storing"> --}}
                                        {{-- <div class="card-body">
                                            <p class="card-text"><strong>Storing</strong></p>
                                            <p class="card-text">St Johns Lane</p>
                                            <p class="card-text">Clerkenwell</p>
                                            <p class="card-text">London</p>
                                            <p class="card-text">Greater London</p>
                                            <p class="card-text">EC1M 4BH</p>
                                            <p class="card-text"><strong><a href="tel:0800 161 3603">0800 161
                                                        3603</a></strong></p>
                                            <p class="card-text text-center mt-3 mb-2"><strong>Prices per week (inc
                                                    VAT).</strong></p>
                                            <div class="price-slider mb-1 mt-1 mx-3 flickity-enabled is-draggable"
                                                id="price-slider-subs90" tabindex="0">
                                                <div class="flickity-viewport" style="height: 70px; touch-action: pan-y;">
                                                    <div class="flickity-slider"
                                                        style="left: 0px; transform: translateX(-13.23%);">
                                                        <div class="carousel-cell mr-2 rounded" aria-selected="false"
                                                            style="position: absolute; left: 0%;">
                                                            <p class="card-text text-center mb-0 w-100">Box</p>
                                                            <p class="card-text text-center"><span
                                                                    class="cts-phone-alt"></span></p>
                                                        </div>
                                                        <div class="carousel-cell mr-2 rounded is-selected"
                                                            aria-selected="true"
                                                            style="position: absolute; left: 43.23%;">
                                                            <p class="card-text text-center mb-0">25 ft²</p>
                                                            <p class="card-text text-center">£19.80</p>
                                                        </div>
                                                        <div class="carousel-cell mr-2 rounded" aria-selected="false"
                                                            style="position: absolute; left: 86.46%;">
                                                            <p class="card-text text-center mb-0">35 ft²</p>
                                                            <p class="card-text text-center">£21.60</p>
                                                        </div>
                                                        <div class="carousel-cell mr-2 rounded" aria-selected="false"
                                                            style="position: absolute; left: 129.7%;">
                                                            <p class="card-text text-center mb-0">50 ft²</p>
                                                            <p class="card-text text-center">£26.40</p>
                                                        </div>
                                                        <div class="carousel-cell mr-2 rounded" aria-selected="false"
                                                            style="position: absolute; left: 172.93%;">
                                                            <p class="card-text text-center mb-0">75 ft²</p>
                                                            <p class="card-text text-center">£37.80</p>
                                                        </div>
                                                        <div class="carousel-cell mr-2 rounded" aria-selected="false"
                                                            style="position: absolute; left: 216.16%;">
                                                            <p class="card-text text-center mb-0">80 ft²</p>
                                                            <p class="card-text text-center">£30.00</p>
                                                        </div>
                                                        <div class="carousel-cell mr-2 rounded" aria-selected="false"
                                                            style="position: absolute; left: 259.39%;">
                                                            <p class="card-text text-center mb-0">100 ft²</p>
                                                            <p class="card-text text-center">£56.70</p>
                                                        </div>
                                                        <div class="carousel-cell mr-2 rounded" aria-selected="false"
                                                            style="position: absolute; left: 302.62%;">
                                                            <p class="card-text text-center mb-0">125 ft²</p>
                                                            <p class="card-text text-center">£66.60</p>
                                                        </div>
                                                        <div class="carousel-cell mr-2 rounded" aria-selected="false"
                                                            style="position: absolute; left: 345.85%;">
                                                            <p class="card-text text-center mb-0">150 ft²</p>
                                                            <p class="card-text text-center">£75.60</p>
                                                        </div>
                                                        <div class="carousel-cell mr-2 rounded" aria-selected="false"
                                                            style="position: absolute; left: 389.09%;">
                                                            <p class="card-text text-center mb-0">160 ft²</p>
                                                            <p class="card-text text-center">£46.80</p>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="text-center"><span><i
                                                        class="cts-long-arrow-alt-left ml-5"></i></span><span><i
                                                        class="cts-long-arrow-alt-right mr-5"></i></span></div>
                                        </div> --}}
                                        {{-- <div class="card-footer px-3"> --}}
                                            {{-- <p class="card-text text-center mb-2"><strong>Features</strong></p> --}}
                                            {{-- <p class="mb-3 features-sm">  --}}
                                            {{-- </p> --}}
                                            {{-- <a href="#" class="btn btn-orange rounded btn-block mb-1">View
                                                store</a> --}}
                                        {{-- </div> --}}
                                    {{-- </div> --}}
                                {{-- </div> --}}
                            {{-- </div> --}}
                        {{-- </div> --}}
                    </div>
                </div>
                <div class="col-lg-8 col-xl-9">
                    <div class="sticky-top sticky-offset-map z-99 d-none d-lg-block">
                        <div class="mt-5 embed-responsive embed-responsive-16by9">
                            <div id="map2" class="embed-responsive-item store-map">

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

@push('script')
    <script
        src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDXjU5ipIQXdtLhqAjJjB3-s9FWcteb0XA&libraries=places&callback=initMap2"
        async="async" defer="defer"></script>
    <script>
        // direction
        function myFunction() {
            var x = document.getElementById("myDIV");
            if (x.style.display === "none") {
                x.style.display = "block";
            } else {
                x.style.display = "none";
            }
        }
        // direction
        // email
        function email() {
            var x = document.getElementById("emaildiv");
            if (x.style.display === "none") {
                x.style.display = "block";
            } else {
                x.style.display = "none";
            }
        }
        // email
        //  text me detail 
        function text() {
            var x = document.getElementById("textdiv");
            if (x.style.display === "none") {
                x.style.display = "block";
            } else {
                x.style.display = "none";
            }
        }
        //  text me detail

        //  reserve
        function reserve() {
            var x = document.getElementById("reservediv");
            if (x.style.display === "none") {
                x.style.display = "block";
            } else {
                x.style.display = "none";
            }
        }

        function validate() {
            var name = $('#email_name');
            var phone = $('#email_phone');
            var email = $('#email_store');
            var message = $('#email_message');
            let regex = new RegExp('[a-z0-9]+@[a-z]+\.[a-z]{2,3}');

            if (name.val() == "") {
                $('#name_error').text("Please provide your name!")
                name.focus();
                return false;
            }
            if (phone.val() == "" || isNaN(phone.val())) {
                $('#phone_error').text("Please provide your Phone!")
                phone.focus();
                return false;
            }
            if (email.val() == "") {
                $('#email_error').text("Please provide your Email!")
                email.focus();
                return false;
            }
            if (!regex.test(email.val())) {
                $('#email_error').text("Please Enter Valid Email!")
                email.focus();
                return false;
            }

            if (message.val() == "") {
                $('#message_error').text("Message Field is required!")
                message.focus();
                return false;
            }
            return true;
        }

        $('#email_store_form').on('submit', function(e) {
            e.preventDefault();
            $('button.send').attr('disabled', true);
            if (validate()) {
                var name = $('#email_name').val();
                var phone = $('#email_phone').val();
                var email = $('#email_store').val();
                var space = $('#email_space').val();
                var period = $('#email_period').val();
                var reason = $('#email_reason').val();
                var message = $('#email_message').val();
                $.ajax({
                    url: "{{ route('email-store') }}",
                    type: "POST",
                    data: {
                        "_token": "{{ csrf_token() }}",
                        'name': name,
                        'phone': phone,
                        'email': email,
                        'space': space,
                        'period': period,
                        'reason': reason,
                        'message': message,
                    },
                    success: function(response) {
                        $('button.send').removeAttr('disabled');
                        name = '';
                        phone = '';
                        email = '';
                        message = '';
                        $('#name_error').text('');
                        $('#phone_error').text('');
                        $('#email_error').text('');
                        $('#message_error').text('');
                        $('#message_success').text(response.message);
                    },
                    error: err => console.log(err)
                });
            }else{
                $('button.send').removeAttr('disabled');
            }
        });
    </script>


    <script>
        // $('#submit').prop('disabled', true);
        // function fetch_loca(address) {
        //    return fetch("https://maps.googleapis.com/maps/api/geocode/json?address=" + address +
        //             '&key=AIzaSyDXjU5ipIQXdtLhqAjJjB3-s9FWcteb0XA')
        //         .then(response => response.json())
        //         .then(data => {
        //             var add = data.results[0];

        //             // Converts numeric degrees to radians
        //             return add;

        //             // new google.maps.fitBounds(antennasCircle)
        //         })
        // }

        var map3;
        var lat = {{ $latitude }};
        var lng = {{ $longitude }};
        var mile = {{ $mile }};
        // var address = {{ $address }};
        // var users = {{ $users }};
        var users = {!! $users !!};
        console.log(users);
        console.log(mile);
        //Initialise la map
        function initMap2() {
            console.log(lat, lng);
            map2 = new google.maps.Map(document.getElementById('map2'), {
                center: {
                    lat,
                    lng
                },
                scrollwheel: true,
                mapTypeControl: false,
                zoom: 15,
                streetViewControl: false,
                zoomControl: true
            });
            makeCircleOnMap()
            for_each()
            // initialize the map variable
            // console.log(navigator.geolocation, "asdfsad");
            // navigator.geolocation.getCurrentPosition((lox) => {
            //     console.log(lox, "currentLcation")
            //     map.setCenter({
            //         lat: lox.coords.latitude,
            //         lng: lox.coords.longitude
            //     })


            // })
            // const input = document.getElementById("postcode");
            // // alert(input);
            // var options = {
            //     componentRestrictions: {
            //         country: 'uk'
            //     } //Turkey only
            // };
            // const searchBox = new google.maps.places.Autocomplete(input, options);
            // var service = new google.maps.places.AutocompleteService()
            // var placesService = new google.maps.places.PlacesService(map)
            // google.maps.places.ComponentRestrictions("uk")
            // console.log(searchBox)

            // input.addEventListener("change", (e) => {
            //     // console.log(e.target.value);
            //     service.getPlacePredictions({
            //         input: e.target.value,
            //         componentRestrictions: {
            //             country: 'uk'
            //         },
            //     }, async (params)=>{
            //         // console.log(params);
            //             if(Array.isArray(params) && params.length>0){
            //             // console.log(params[0].description);
            //                 var data = await fetch_loca(params[0].description);
            //                 // console.log(data.data.results);
            //                 console.log(data);
            //                 // console.log(data.lat,data.lng);

            //             //   var lat = data.results[0].geometry.location.lat;
            //             //   var lon = data.results[0].geometry.location.lng;
            //             //   console.log(lat,lon);
            //               $("#latitude").val(data.geometry.location.lat);
            //               $("#langitude").val(data.geometry.location.lng);
            //               $("#address").val(data.formatted_address);
            //               $('#submit').prop('disabled', false);
            //             //   $("input:text").val("Glenn Quagmire");
            //             //   document.getElementById('latitude').value=lat;
            //             //   document.getElementById('longitude').value=lon;

            //             }else{
            //                 $('#submit').prop('disabled', true);
            //                 console.log(params);
            //             }

            //         // console.log(params[0].place_id);
            //         // placesService.getDetails({
            //         //     placeId: params[0].place_id
            //         // }, (param2) => {
            //         //     // console.log(param2);
            //         // })
            //     })
            //     // console.log("searchBox", searchBox)
            //     // console.log($(".pac-container .pac-item:eq(0)"))
            //     // const places = searchBox.getPlace();

            //     // if (places.length == 0) {
            //     //     return;
            //     // }
            //     // console.log(places)
            // })
            // searchBox.addListener("place_changed", (e) => {
            //     // console.log(e, this);
            //     const places = searchBox.getPlace();

            //     if (places.length == 0) {
            //         return;
            //     }
            //     console.log(places)
            //     console.log(places.geometry.location.lat(),places.geometry.location.lng())
            //     $("#latitude").val(places.geometry.location.lat(),places.geometry.location.lat());
            //               $("#langitude").val(places.geometry.location.lng());
            //               $('#submit').prop('disabled', false);
            // })
        }

        function calcCrow(lat1, lon1, lat2, lon2) {
            var R = 6371e3; // km
            var dLat = deg2rad(lat2 - lat1);
            // console.log(dLat)
            // dLat = dLat.toRad();
            var dLon = deg2rad(lon2 - lon1);
            // dLon = dLon.toRad();
            var lat1 = deg2rad(lat1);
            // lat1 = lat1.toRad();
            var lat2 = deg2rad(lat2);
            // lat2 = lat2;

            var a = Math.sin(dLat / 2) * Math.sin(dLat / 2) +
                Math.sin(dLon / 2) * Math.sin(dLon / 2) * Math.cos(lat1) * Math.cos(lat2);
            var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
            var d = R * c;
            return d;
        }

        function deg2rad(deg) {
            return deg * (Math.PI / 180)
        }



        // function getCoordinates(address, latitude, longitude, radius) {
        //     fetch("https://maps.googleapis.com/maps/api/geocode/json?address=" + address +
        //             '&key=AIzaSyDXjU5ipIQXdtLhqAjJjB3-s9FWcteb0XA')
        //         .then(response => response.json())
        //         .then(data => {
        //             console.log(data);

        //             // Converts numeric degrees to radians

        //             const lattitude = data.results[0].geometry.location.lat;
        //             const longittude = data.results[0].geometry.location.lng;
        //             // console.log(latitude, longitude)
        //             var rad = calcCrow(latitude, longitude, lattitude, longittude)
        //             console.log(rad, '==>')
        //             radius = mile * 1609.34;
        //             if (radius > rad) {
        //                 new google.maps.Marker({
        //                     position: {
        //                         lat: lattitude,
        //                         lng: longittude
        //                     },
        //                     map2,
        //                     title: address,
        //                 });
        //             }
        //             // new google.maps.fitBounds(antennasCircle)
        //         })
        // }

        function makeCircleOnMap() {
            var antennasCircle2 = new google.maps.Circle({
                strokeColor: "#FF0000",
                strokeOpacity: 0.8,
                strokeWeight: 2,
                fillColor: "transparent",
                fillOpacity: 0.35,
                map: map2,
                center: {
                    lat,
                    lng
                },
                radius: Number(mile) * 1609.34
            });

            map2.fitBounds(antennasCircle2.getBounds(), 0);
            map2.setZoom(map2.getZoom() + 2)
        }

        function for_each() {
            var html = "";
            var arr_user = new Array();
            $.each(users, function(key, index) {
                // if (index.storage != null) {
                // address
                var card = '';
                // var address = index.user_detail.address_line_1 +
                //     '' + index.user_detail.address_line_2;
                var lattitude = index.lat;
                var longittude = index.lng;

                var add = index.address_line_1 + ' ' + index.address_line_2;
                // console.log(add);
                var rad = calcCrow(lat, lng, lattitude, longittude)
                // console.log(rad, '==>')
                radius = mile * 1609.34;
                // console.log(radius);
                // console.log(lattitude, longittude);
                if (radius > rad) {
                    new google.maps.Marker({
                        position: {
                            lat: lattitude,
                            lng: longittude
                        },
                        map: map2,
                        title: add,
                    });


                    var ra = (rad / 1609.34).toFixed(2);
                    var box = '';
                    var ft_25;
                    var ft_35;

                    if (index.pcm) {
                        if (index.pcm.box) {
                            box = index.pcm.box;
                        } else {
                            box = '<span class="fa-solid fa-phone"></span>';
                        }

                        // console.log(box);
                        if (index.pcm.pcm_25_ft2) {
                            ft_25 = '£' + index.pcm.pcm_25_ft2;
                        } else {
                            ft_25 = '<span class="fa-solid fa-phone"></span>';
                        }

                        if (index.pcm.pcm_35_ft2) {
                            ft_35 = index.pcm.pcm_35_ft2;
                        } else {
                            ft_35 = '<span class="fa-solid fa-phone"></span>';
                        }

                    } else {
                        ft_35 = '<span class="fa-solid fa-phone"></span>';
                        ft_25 = '<span class="fa-solid fa-phone"></span>';

                        box = '<span class="fa-solid fa-phone"></span>';
                    }
                    //    var id = ;
                    // console.log(index);

                    //    console.log(rot);

                    //    arr_user[key] = index.id; 
                    // console.log(arr_user); 
                    //    ra = round(ra,3);
                    var img = "";
                    // console.log(index)
                    if (index.store_image) {

                        if (index.store_image.image1) {

                            img = `{{ asset('/storage/${index.store_image.image1}') }}`;
                            console.log(img, 'sadadssad');
                        } else if (index.store_image.image2) {
                            img = `{{ asset('/storage/${index.store_image.image2}') }}`;

                        } else if (index.store_image.image3) {
                            img = `{{ asset('/storage/${index.store_image.image3}') }}`;

                        } else if (index.store_image.image4) {
                            img = `{{ asset('/storage/${index.store_image.image4}') }}`;

                        } else if (index.store_image.image5) {
                            img = `{{ asset('/storage/${index.store_image.image5}') }}`;

                        }
                    }


                    card = `<div id="store0${key}" class="store-result details-item mt-5"> 
                        <div class="card  rounded"><img class="store-logo mx-auto lazyloaded" height="80" alt="Gladiator Removals Ltd Logo" title="null" src="${img}"> 
                            <div class="card-body"> <p class="card-text"><strong>${index.name}</strong></p> <p class="card-text view" id="view1431"><span class="fa-solid fa-phone mr-2"></span>View Number</p> 
                                <div class="wrap" id="wrap1431${key}"> <p class="card-text mt-0"><strong><a href="123456789">123456789</a></strong></p> </div> <p class="card-text green-text"><strong>${ra} Miles Away</strong></p> <p class="card-text text-center mt-3 mb-2"><strong>Prices per week (inc VAT).</strong></p> <div class="price-slider mt-1 mx-3 flickity-enabled is-draggable" id="price-slider0" tabindex="0"> 
                                    <div class="flickity-viewport" style="height: 70px; touch-action: pan-y;"> <div class="flickity-slider" style="left: 0px; transform: translateX(-13.23%);"> 
                        <div class="carousel-cell mr-2 rounded cus_card cus_card1" aria-selected="false" style="position: absolute; left: 0%;">
                        <p class="card-text text-center mb-0 newp">Box</p> 
                        <span class="card-text text-center">
                        ${box} </span> 
                        </div>
                                            <div class="carousel-cell mr-2 rounded is-selected cus_card cus_card2" aria-selected="true"
                                                style="position: absolute; left: 43.23%;">
                                                <p class="card-text text-center mb-0 newp">25 ft²</p>
                                                <span class="card-text text-center">${ft_25}
                                                </span>
                                            </div>
                                            <div class="carousel-cell mr-2 rounded cus_card cus_card3" aria-selected="false"
                                                style="position: absolute; left: 86.46%; margin: 0px;">
                                                <p class="card-text text-center mb-0 newp">35 ft²</p>
                                                <span class="card-text text-center">${ft_35}</span>
                                                </span>
                                            </div>
                                            {{-- <div class="carousel-cell mr-2 rounded" aria-selected="false"
                                                style="position: absolute; left: 129.7%;">
                                                <p class="card-text text-center mb-0">50 ft²</p>
                                                <p class="card-text text-center"><span class="cts-phone-alt"></span></p>
                                            </div>
                                            <div class="carousel-cell mr-2 rounded" aria-selected="false"
                                                style="position: absolute; left: 172.93%;">
                                                <p class="card-text text-center mb-0">75 ft²</p>
                                                <p class="card-text text-center"><span class="cts-phone-alt"></span></p>
                                            </div>
                                            <div class="carousel-cell mr-2 rounded" aria-selected="false"
                                                style="position: absolute; left: 216.16%;">
                                                <p class="card-text text-center mb-0">80 ft²</p>
                                                <p class="card-text text-center"><span class="cts-phone-alt"></span></p>
                                            </div>
                                            <div class="carousel-cell mr-2 rounded" aria-selected="false"
                                                style="position: absolute; left: 259.39%;">
                                                <p class="card-text text-center mb-0">100 ft²</p>
                                                <p class="card-text text-center"><span class="cts-phone-alt"></span></p>
                                            </div>
                                            <div class="carousel-cell mr-2 rounded" aria-selected="false"
                                                style="position: absolute; left: 302.62%;">
                                                <p class="card-text text-center mb-0">125 ft²</p>
                                                <p class="card-text text-center"><span class="cts-phone-alt"></span></p>
                                            </div>
                                            <div class="carousel-cell mr-2 rounded" aria-selected="false"
                                                style="position: absolute; left: 345.85%;">
                                                <p class="card-text text-center mb-0">150 ft²</p>
                                                <p class="card-text text-center"><span class="cts-phone-alt"></span></p>
                                            </div>
                                            <div class="carousel-cell mr-2 rounded" aria-selected="false"
                                                style="position: absolute; left: 389.09%;">
                                                <p class="card-text text-center mb-0">160 ft²</p>
                                                <p class="card-text text-center"><span class="cts-phone-alt"></span></p>
                                            </div> --}}
                                        </div>
                                    </div>
                                </div>
                                {{-- <div class="text-center"><span><i class="cts-long-arrow-alt-left ml-5"></i></span><span><i
                                            class="cts-long-arrow-alt-right mr-5"></i></span></div> --}}
                            </div>
                            <div class="card-footer px-3">
                                <p class="mb-3 features-sm"> <img src="{{ asset('./webassets/imgs/container.png') }}"
                                        alt="Self storage Container" title="Container">
                                    <img alt="Van Hire" title="Van Hire" class="mr-1 mb-1 ls-is-cached lazyloaded"
                                        src="{{ asset('./webassets/imgs/clock.png') }}">
                                    <img alt="Forklift" title="Forklift" class="mr-1 mb-1 ls-is-cached lazyloaded"
                                        src="{{ asset('./webassets/imgs/forklift.png') }}">
                                    <img alt="CCTV" title="CCTV" class="mr-1 mb-1 ls-is-cached lazyloaded"
                                        src="{{ asset('./webassets/imgs/cctv.png') }}">
                                </p><a href="{{ url('self-storage-store-finder/${index.id}') }}" class="btn btn-orange rounded btn-block mb-1">View store</a>
                            </div>
                        </div>
                    </div>`;
                    html = html + card;
                    // console.log('asd')
                    // }


                    // getCoordinates(address, latitude, longitude,
                    //     radius)





                }
                $('#card').html(html);
            });
        }

        // if ($("#visitor_search_2").length > 0) {

        //     // console.log('sda');
        //     $("#visitor_search_1").validate({
        //         rules: {
        //             postcode: {
        //                 required: true,
        //             },
        //             miles: {
        //                 required: true,
        //             },
        //         },
        //         messages: {
        //             postcode_town: {
        //                 required: "Please enter postcode or town",
        //             },
        //             miles: {
        //                 required: "Please select miles",
        //             },

        //         },
        //         submitHandler: function(form) {
        //             //    var data = $(form);
        //             //    console.log(data);
        //             var postcode = $('#postcode').val();
        //             var distance = $('#distance').val();
        //             // console.log(postcode,distance);    

        //             // alert('das');
        //             // $.ajaxSetup({
        //             // headers: {
        //             // 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        //             // }
        //             // });
        //             // $('#submit').html('Please Wait...');
        //             // $("#submit").attr("disabled", true);
        //             $.ajax({
        //                 url: "{{ route('search_distance') }}",
        //                 type: "POST",
        //                 data: {
        //                     "_token": "{{ csrf_token() }}",
        //                     "data": {
        //                         'postcode': postcode,
        //                         'distance': distance
        //                     },
        //                 },
        //                 success: function(response) {

        //                     var latitude = Number(response.latitude);
        //                     var longitude = Number(response.longitude);
        //                     var radius = Number(response.redius);

        //                     // console.log(response.user);

        //                     // console.log({
        //                     //     lat: Number(response.latitude),
        //                     //     lng: Number(response.longitude),
        //                     //     radius: Number(response.redius)
        //                     // });
        //                     // $('#submit').html('Submit');
        //                     // $("#submit").attr("disabled", false);

        //                     if (response.status == true) {
        //                         var antennasCircle = new google.maps.Circle({
        //                             strokeColor: "#FF0000",
        //                             strokeOpacity: 0.8,
        //                             strokeWeight: 2,
        //                             fillColor: "transparent",
        //                             fillOpacity: 0.35,
        //                             map: map,
        //                             center: {
        //                                 lat: Number(response.latitude),
        //                                 lng: Number(response.longitude)
        //                             },
        //                             radius: Number(response.redius) * 1609.34
        //                         });

        //                         map.fitBounds(antennasCircle.getBounds(), 0);
        //                         map.setZoom(map.getZoom() + 2)



        //                     }

        //                 }
        //             });
        //         }
        //     })
        // }
    </script>
@endpush