@extends('website.layout.master')
@section('content')
    <section class="lightGrey py-5">
        <div class="container compare-form">
            <div class="row justify-content-center">
                <div class="col-lg-12 pt-3">
                    <form id="visitor_search_5" action="{{route('search_distance')}}" method="post" class="justify-content-center visitor-search form-inline has-validator"
                        novalidate data-fv-no-icon="true">
                        @csrf
                        {{-- <div><input name="visitor_search_5-token" type="hidden"
                                value="123618100362bfe615c3bf03.85613929"><input name="visitor_search_5" type="hidden"
                                value="1"></div> --}}
                        <fieldset>
                            <legend class="text-white">Enter postcode or town</legend>
                            <div class="form-group"><input id="postcode" name="postcode" type="text" value=""
                                    class="corners-lt postcode form-control fv-group" placeholder="e.g. SW1A" required
                                    aria-label="e.g. SW1A">
                                <div class="test"><select id="distance" name="distance"
                                        class="bootstrap-select btn-white outline distance form-control">
                                        <option value="5">5 Miles</option>
                                        <option value="10">10 Miles</option>
                                        <option value="15">15 Miles</option>
                                        <option value="20">20 Miles</option>
                                    </select></div>
                                    <input type="hidden" name="langitude" id="langitude" value="">
                                <input type="hidden" name="latitude" id="latitude" value="">
                                <input type="hidden" name="address" id="address" value="">
                                <div class="form-group"><button type="submit" name="submit-btn2" id="submit" value="1"
                                        class="btn btn-primary compare outline corners-rb">Compare Now!</button></div>
                        </fieldset>
                    </form>
                </div>
            </div>
        </div>
    </section>
    <div class="store">
        <section class="container py-5">
            <div class="row">
                <div class="col-lg-12 mb-5">
                    <h1 class="text-center">Find Me Storage - {{ $user->city }} City</h1>
                </div>
            </div>
            {{-- <div id="contact-section" class="row">
                <div class="col-12">
                    <h3 class="mb-3 mb-lg-5">Contact</h3>
                </div>
            </div> --}}
            {{-- <div class="row mb-3 mb-lg-5">
                <div class="col-6 col-md-4 offset-md-1 col-lg-3 offset-lg-0 px-3 px-lg-5 mb-3"> <a href="#"
                        target="_blank" id="visit-website2453"
                        class="btn btn-primary btn-sm btn-block rounded visit">Website</a> </div>
                <div class="col-6 col-md-4 offset-md-2 col-lg-3 offset-lg-0 px-3 px-lg-5 mb-3"><button
                        class="btn btn-primary btn-sm btn-block rounded" onclick="reserve()">Reserve</button></div>
                <div class="col-6 col-md-4 offset-md-1 col-lg-3 offset-lg-0 px-3 px-lg-5 mb-3"><button
                        class="btn btn-primary btn-sm btn-block rounded" onclick="email()">Email</button></div>
                <div class="col-6 col-md-4 offset-md-2 col-lg-3 offset-lg-0 px-3 px-lg-5 mb-3"><button
                        class="btn btn-primary btn-sm btn-block rounded" onclick="text()">Text
                        me</button></div>
            </div> --}}
            <div class="row">
                <div id="no_reserve" class="col-12 text-center collapse">
                    <p class="mb-0 alert alert-secondary">We're sorry, Storing does not subscribe to our reserve online
                        service. <span class="ml-3"><button type="button" class="btn btn-orange btn-sm rounded"
                                data-toggle="collapse" data-target="#no_reserve">close <i
                                    class="cts-chevron-up"></i></button></span></p>
                </div>
                <div id="no_email" class="col-12 text-center px-3 collapse">
                    <p class="mb-0 alert alert-secondary">We're sorry, Storing does not subscribe to our email service.
                        <span class="ml-3"><button type="button" class="btn btn-orange btn-sm rounded"
                                data-toggle="collapse" data-target="#no_email">close <i
                                    class="cts-chevron-up"></i></button></span>
                    </p>
                </div>
                <div id="no_website" class="col-12 text-center px-3 collapse">
                    <p class="mb-0 alert alert-secondary">We're sorry, Storing does not subscribe to our weblink
                        service. <span class="ml-3"><button type="button" class="btn btn-orange btn-sm rounded"
                                data-toggle="collapse" data-target="#no_website">close <i
                                    class="cts-chevron-up"></i></button></span></p>
                </div>
                <div id="no_sms" class="col-12 text-center px-3 collapse">
                    <p class="mb-0 alert alert-secondary">We're sorry, Storing does not subscribe to our SMS service.
                        <span class="ml-3"><button type="button" class="btn btn-orange btn-sm rounded"
                                data-toggle="collapse" data-target="#no_sms">close <i
                                    class="cts-chevron-up"></i></button></span>
                    </p>
                </div>
            </div>
            <div class="row mt-3 mt-lg-5">
                <div class="col-lg-5">
                    <div>
                        <dl class="">
                            <dt>Phone:</dt>
                            <dd><a href="tel:{{ $user->phone_no }}">{{ $user->phone_no }}</a>
                            </dd>
                            {{-- @if ($user->user_detail->other_phone_no)
                                <dd><a
                                        href="tel:{{ $user->user_detail->other_phone_no }}">{{ $user->user_detail->other_phone_no }}</a>
                                </dd>
                            @endif --}}
                            <dt class="mt-3">Address:</dt>
                            <dd class="">
                                {{ $user->address_line_1 . ' ' . $user->address_line_2 }}</dd>
                            <dt class=""></dt>
                            <dd class=""></dd>
                            <dt class=""></dt>
                            <dd class="">{{ $user->town }}</dd>
                            <dt class=""></dt>
                            <dd class="">{{ $user->city }}</dd>
                            <dt class=""></dt>
                            <dd class="">{{ $user->postcode }}</dd>
                            <dd class=""></dd>
                        </dl>
                    </div>
                    <div class="d-none d-md-block">
                        <dl>
                            <dt>Get Directions:</dt>
                            <div id="location" class="mt-2">
                                <form id="form_postcode2" action="#" method="Post" name="form_postcode2"
                                    class="visitor-search"><input type="text" name="postcode2" id="postcode2"
                                        class="postcode">
                                    <input type="hidden" name="lat2" id="lat2">
                                    <input type="hidden" name="lng2" id="lng2">
                                    <input type="hidden" name="add2" id="add2">
                                    <button id="find-button" type="button" class="btn btn-orange">Find</button>
                                </form>
                            </div>
                        </dl>
                    </div>
                </div>
                <div class="col-lg-7 d-none d-md-block mt-3">
                    <div id="map3" style="height: 100%" class="store-map"></div>
                </div>
            </div>
            <div class="row d-block d-md-none">
                <div class="col-12">
                    <div id="map-accordion" class="accordion">
                        <div class="card mb-0">
                            <div class="card-header collapsed" data-toggle="collapse" aria-expanded="true"
                                aria-controls="map-collapse1" href="#map-collapse1"><a href="#" class="card-title">Store
                                    Map</a></div>
                            <div id="map-collapse1" class="collapse" data-parent="#map-accordion">
                                <div class="card-body">
                                    <div id="mobile-map" class="store-map"></div>
                                    <div id="location" class="my-3 ml-3">
                                        <p class="pl-0 mb-3 card-text">Get Directions</p>
                                        <form name="form_postcode3" action="#" id="form_postcode3"
                                            class="visitor-search"><input type="text" name="postcode3" id="postcode3"
                                                class="postcode" style="width:60% !important;">
                                            <input type="hidden" name="lat2" id="lat2">
                                            <input type="hidden" name="lng2" id="lng2">
                                            <input type="hidden" name="add2" id="add2">
                                            <button id="find-button-2" type="button" id="submit2"
                                                class="btn btn-orange">Find</button>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        {{-- email --}}
        <section>
            <div class="container">
                <div id="ad_email" class="row collapse ad">
                    <div class="col-lg-12 py-5">
                        <div class="row">
                            <div class="col-7 col-lg-10">
                                <h3>Email</h3>
                            </div>
                        </div>
                        <form id="email_store_3" action="form-handler.php?id=2453" method="POST" novalidate
                            data-fv-no-icon="true" class="has-validator">
                            <div><input name="email_store_3-token" type="hidden"
                                    value="18123216362bfe615c3e8d2.51358346"><input name="email_store_3" type="hidden"
                                    value="1"><input name="store_id" type="hidden" value="2453"><input
                                    name="return_url" type="hidden"
                                    value="/self-storage-store-finder.php?id=2453"><input name="page" type="hidden"
                                    value="self-storage-store-finder.php"></div>
                            <fieldset>
                                <div class="form-group">
                                    <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">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <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">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <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>
                                <div class="form-group"><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="Box">Box</option>
                                        <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="80">80 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>
                                <div class="form-group"><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>
                                <div class="form-group"><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>
                                <div class="form-group"><label for="move_in_date" class="form-control-label">Move in
                                        Date <sup class="text-danger">* </sup></label><input id="move_in_date"
                                        name="move_in_date" type="text" value="" required class="form-control">
                                </div>
                                <div class="form-group"><label for="Message" class="form-control-label">Message</label>
                                    <textarea id="Message" name="Message" class="form-control form-control"></textarea>
                                </div>
                                <div class="form-group">
                                    <div class="recaptcha-wrapper">
                                        <div id="1" class="g-recaptcha"
                                            data-sitekey="6Ld5OEwUAAAAABUkQwOSMzNTPbvxKOOIg2fIP3fE"></div>
                                    </div><br>
                                </div>
                                <div class="form-group"><button type="submit" name="submit-btn" value="1"
                                        class="btn btn-green btn-lg rounded">Send</button></div>
                            </fieldset>
                        </form>
                    </div>
                </div>
            </div>
        </section>
        {{-- email --}}
        {{-- SEND MESSAGE TO: --}}
        <section class="paleGrey">
            <div class="container">
                <div id="ad_sms" class="row collapse ad">
                    <div class="col-lg-12 py-5">
                        <div class="row">
                            <div class="col-8 col-lg-10">
                                <h4>Send Message To:</h4>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-12 col-lg-12">
                                <form id="send_sms_3" action="form-handler.php?id=2453" method="POST" novalidate
                                    data-fv-no-icon="true" class="has-validator">
                                    <div><input name="send_sms_3-token" type="hidden"
                                            value="173557966762bfe615c428c3.07982600"><input name="send_sms_3"
                                            type="hidden" value="1"><input name="store_id" type="hidden"
                                            value="2453"><input name="return_url" type="hidden"
                                            value="/self-storage-store-finder.php?id=2453"><input name="page"
                                            type="hidden" value="self-storage-store-finder.php"></div>
                                    <fieldset>
                                        <div class="form-group">
                                            <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">
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <div class="recaptcha-wrapper">
                                                <div id="3" class="g-recaptcha"
                                                    data-sitekey="6Ld5OEwUAAAAABUkQwOSMzNTPbvxKOOIg2fIP3fE"></div>
                                            </div><br>
                                        </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>
                                </form>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        {{-- SEND MESSAGE TO: --}}

        {{-- reserve --}}
        <section class="paleGrey">
            <div class="container">
                <div id="ad_reserve" class="row collapse ad">
                    <div class="col-lg-12 py-5">
                        <div class="row">
                            <div class="col-6 col-lg-10">
                                <h3>Reservation</h3>
                            </div>
                        </div>
                        <form id="reservation_3" action="form-handler.php?id=2453" method="POST" novalidate
                            data-fv-no-icon="true" class="has-validator">
                            <div><input name="reservation_3-token" type="hidden"
                                    value="988767462bfe615c40db3.80664269"><input name="reservation_3" type="hidden"
                                    value="1"><input name="store_id" type="hidden" value="2453"><input
                                    name="return_url" type="hidden"
                                    value="/self-storage-store-finder.php?id=2453"><input name="page" type="hidden"
                                    value="self-storage-store-finder.php"><input name="page" type="hidden"
                                    value="self-storage-store-finder.php"></div>
                            <fieldset>
                                <div class="form-group">
                                    <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">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <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">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <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>
                                <div class="form-group"><label for="space2" class="form-control-label">How much
                                        space? <sup class="text-danger">* </sup></label><select id="space2"
                                        name="space2" class="custom-select form-control" required>
                                        <option value="Box">Box</option>
                                        <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="80">80 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>
                                <div class="form-group"><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>
                                <div class="form-group"><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" selected>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>
                                <div class="form-group"><label for="user_date" class="form-control-label">Date <sup
                                            class="text-danger">* </sup></label><input id="user_date" name="user_date"
                                        type="date" value="" required class="form-control"></div>

                                <div class="form-group"><button type="submit" name="submit-btn2" value="1"
                                        class="btn btn-green btn-lg rounded">Send</button></div>
                            </fieldset>
                        </form>
                    </div>
                </div>
            </div>
        </section>
        {{-- reserve --}}
        {{-- direction --}}
        <section>

            {{-- <div id="map6" style="height: 50%; width:50%"></div> --}}
            <div id="directions" class="container collapse py-5">
                <div class="row">
                    <div class="col-lg-6 pb-3">
                        <h3>Map</h3>
                        <div id="map6" style="height:100%; width:100%"></div>
                    </div>
                    <div id="print" class="col-lg-6 pb-3">
                        <h3>Directions</h3>
                        <div class="pre-scrollable py-3 px-3" id="directionsPanel"></div>
                    </div>
                </div>
            </div>
          
        </section>
        {{-- direction --}}
        <br>
        <section class="paleGreen py-5 d-none d-md-block">
            <div class="container">
                <div class="row">
                    <div class="col-12">
                        <h3 class="mb-3">Prices & Office Hours</h3>
                    </div>
                </div>
                <div class="row mt-1">
                    <div class="col-lg-4 col-md-6">
                        <div class="px-3 pb-2 pt-2 prices hours rounded">
                            <dl>
                                <dt class="mb-3">Prices:</dt>
                                <div class="btn-group-vertical btn-block" role="group"
                                    aria-label="storage prices by area"> <button id="Box" type="button"
                                        class="btn btn-yellow ps-reserve reserve-lg th px-4 "><span
                                            class="reserve-text white-text d-none">Reserve</span><span
                                            class="d-flex justify-content-between"><span
                                                class="price-detail">Box</span><span class="price-detail">
                                                @if ($user->pcm)
                                                    @if ($user->pcm)
                                                    @else
                                                        <i class="cts-phone-alt"></i>
                                                @endif @else<i class="cts-phone-alt"></i>
                                                @endif
                                            </span>
                                        </span></button><button id="25 ft²" type="button"
                                        class="btn btn-yellow ps-reserve reserve-lg th px-4 "><span
                                            class="reserve-text white-text d-none">Reserve</span><span
                                            class="d-flex justify-content-between"><span class="price-detail">25
                                                ft²</span><span class="price-detail">£@if ($user->pcm)
                                                    @if ($user->pcm->pcm_25_ft2)
                                                    {{ $user->pcm->pcm_25_ft2 }} @else<i class="cts-phone-alt"></i>
                                                @endif @else<i class="cts-phone-alt"></i>
                                                @endif
                                            </span>
                                        </span></button><button id="35 ft²" type="button"
                                        class="btn btn-yellow ps-reserve reserve-lg th px-4 "><span
                                            class="reserve-text white-text d-none">Reserve</span><span
                                            class="d-flex justify-content-between"><span class="price-detail">35
                                                ft²</span><span class="price-detail">£@if ($user->pcm)
                                                    @if ($user->pcm->pcm_35_ft2)
                                                    {{ $user->pcm->pcm_35_ft2 }} @else<i class="cts-phone-alt"></i>
                                                @endif @else<i class="cts-phone-alt"></i>
                                                @endif
                                            </span>
                                        </span></button><button id="50 ft²" type="button"
                                        class="btn btn-yellow ps-reserve reserve-lg th px-4 "><span
                                            class="reserve-text white-text d-none">Reserve</span><span
                                            class="d-flex justify-content-between"><span class="price-detail">50
                                                ft²</span><span class="price-detail">£@if ($user->pcm)
                                                    @if ($user->pcm->pcm_50_ft2)
                                                    {{ $user->pcm->pcm_50_ft2 }} @else<i class="cts-phone-alt"></i>
                                                @endif @else<i class="cts-phone-alt"></i>
                                                @endif
                                            </span>
                                        </span></button><button id="75 ft²" type="button"
                                        class="btn btn-yellow ps-reserve reserve-lg th px-4 "><span
                                            class="reserve-text white-text d-none">Reserve</span><span
                                            class="d-flex justify-content-between"><span class="price-detail">75
                                                ft²</span><span class="price-detail">£@if ($user->pcm)
                                                    @if ($user->pcm->pcm_75_ft2)
                                                    {{ $user->pcm->pcm_75_ft2 }} @else<i class="cts-phone-alt"></i>
                                                @endif @else<i class="cts-phone-alt"></i>
                                                @endif
                                            </span>
                                        </span></button><button id="80 ft²" type="button"
                                        class="btn btn-yellow ps-reserve reserve-lg th px-4 "><span
                                            class="reserve-text white-text d-none">Reserve</span><span
                                            class="d-flex justify-content-between"><span class="price-detail">80
                                                ft²</span><span class="price-detail">£@if ($user->pcm)
                                                    @if ($user->pcm->pcm_80_ft2)
                                                    {{ $user->pcm->pcm_80_ft2 }} @else<i class="cts-phone-alt"></i>
                                                @endif @else<i class="cts-phone-alt"></i>
                                                @endif
                                            </span>
                                        </span></button><button id="100 ft²" type="button"
                                        class="btn btn-yellow ps-reserve reserve-lg th px-4 "><span
                                            class="reserve-text white-text d-none">Reserve</span><span
                                            class="d-flex justify-content-between"><span class="price-detail">100
                                                ft²</span><span class="price-detail">£@if ($user->pcm)
                                                    @if ($user->pcm->pcm_100_ft2)
                                                    {{ $user->pcm->pcm_100_ft2 }} @else<i class="cts-phone-alt"></i>
                                                @endif @else<i class="cts-phone-alt"></i>
                                                @endif
                                            </span>
                                        </span></button><button id="125 ft²" type="button"
                                        class="btn btn-yellow ps-reserve reserve-lg th px-4 "><span
                                            class="reserve-text white-text d-none">Reserve</span><span
                                            class="d-flex justify-content-between"><span class="price-detail">125
                                                ft²</span><span class="price-detail">£@if ($user->pcm)
                                                    @if ($user->pcm->pcm_125_ft2)
                                                    {{ $user->pcm->pcm_125_ft2 }} @else<i class="cts-phone-alt"></i>
                                                @endif @else<i class="cts-phone-alt"></i>
                                                @endif
                                            </span>
                                        </span></button><button id="150 ft²" type="button"
                                        class="btn btn-yellow ps-reserve reserve-lg th px-4 "><span
                                            class="reserve-text white-text d-none">Reserve</span><span
                                            class="d-flex justify-content-between"><span class="price-detail">150
                                                ft²</span><span class="price-detail">£@if ($user->pcm)
                                                    @if ($user->pcm->pcm_150_ft2)
                                                    {{ $user->pcm->pcm_150_ft2 }} @else<i class="cts-phone-alt"></i>
                                                @endif @else<i class="cts-phone-alt"></i>
                                                @endif
                                            </span>
                                        </span></button><button id="160 ft²" type="button"
                                        class="btn btn-yellow ps-reserve reserve-lg th px-4 "><span
                                            class="reserve-text white-text d-none">Reserve</span><span
                                            class="d-flex justify-content-between"><span class="price-detail">160
                                                ft²</span><span class="price-detail">£@if ($user->pcm)
                                                    @if ($user->pcm->pcm_160_ft2)
                                                    {{ $user->pcm->pcm_160_ft2 }} @else<i class="cts-phone-alt"></i>
                                                @endif @else<i class="cts-phone-alt"></i>
                                                @endif
                                            </span>
                                        </span></button>
                                    @if ($user->pcm && $user->pcm->custom_size_1)
                                        <button id="12 sqft" type="button"
                                            class="btn btn-yellow ps-reserve reserve-lg th px-4 "><span
                                                class="reserve-text white-text d-none">Reserve</span><span
                                                class="d-flex justify-content-between"><span
                                                    class="price-detail">{{ $user->pcm->custom_size_1 }}
                                                    sqft</span><span class="price-detail">£@if ($user->pcm->custom_price_1)
                                                    {{ $user->pcm->custom_price_1 }} @else<i
                                                            class="cts-phone-alt"></i>
                                                    @endif
                                                </span>
                                            </span></button>
                                    @endif
                                    @if ($user->pcm && $user->pcm->custom_size_2)
                                        <button id="12 sqft" type="button"
                                            class="btn btn-yellow ps-reserve reserve-lg th px-4 "><span
                                                class="reserve-text white-text d-none">Reserve</span><span
                                                class="d-flex justify-content-between"><span
                                                    class="price-detail">{{ $user->pcm->custom_size_2 }}
                                                    sqft</span><span class="price-detail">£@if ($user->pcm->custom_price_2)
                                                    {{ $user->pcm->custom_price_2 }} @else<i
                                                            class="cts-phone-alt"></i>
                                                    @endif
                                                </span>
                                            </span></button>
                                    @endif
                                    @if ($user->pcm && $user->pcm->custom_size_3)
                                        <button id="12 sqft" type="button"
                                            class="btn btn-yellow ps-reserve reserve-lg th px-4 "><span
                                                class="reserve-text white-text d-none">Reserve</span><span
                                                class="d-flex justify-content-between"><span
                                                    class="price-detail">{{ $user->pcm->custom_size_3 }}
                                                    sqft</span><span class="price-detail">£@if ($user->pcm->custom_price_3)
                                                    {{ $user->pcm->custom_price_3 }} @else<i
                                                            class="cts-phone-alt"></i>
                                                    @endif
                                                </span>
                                            </span></button>
                                    @endif
                                </div>
                            </dl>
                        </div>
                        <div class="mt-3 ml-3"><i>Prices shown are per week (inc. VAT if applicable)</i></div>
                    </div>
                    <div class="col-lg-4 col-md-6 mb-md-5">
                        <div class="p-3 paleGreyGreen hours">
                            <dl class="lined">
                                <dt class="mb-2">Office Hours:</dt>
                                <dd class="">Monday <span class="setWidth">
                                        @if ($user->office_hour)
                                            @if ($user->office_hour->monday_start == 'Closed')
                                                {{ $user->office_hour->monday_start }}
                                            @else
                                                {{ $user->office_hour->monday_start . ' - ' . $user->office_hour->monday_end }}
                                            @endif
                                        @else
                                            {{ 'Closed' }}
                                        @endif
                                    </span></dd>
                                <dd class="">Tuesday <span class="setWidth">
                                        @if ($user->office_hour)
                                            @if ($user->office_hour->tuesday_start == 'Closed')
                                                {{ $user->office_hour->tuesday_start }}
                                            @else
                                                {{ $user->office_hour->tuesday_start . ' - ' . $user->office_hour->tuesday_end }}
                                            @endif
                                        @else
                                            {{ 'Closed' }}
                                        @endif
                                    </span>
                                </dd>
                                <dd class="">Wednesday <span class="setWidth">
                                        @if ($user->office_hour)
                                            @if ($user->office_hour->wednesday_start == 'Closed')
                                                {{ $user->office_hour->wednesday_start }}
                                            @else
                                                {{ $user->office_hour->wednesday_start . ' - ' . $user->office_hour->wednesday_end }}
                                            @endif
                                        @else
                                            {{ 'Closed' }}
                                        @endif
                                    </span>
                                </dd>
                                <dd class="">Thursday <span class="setWidth">
                                        @if ($user->office_hour)
                                            @if ($user->office_hour->thursday_start == 'Closed')
                                                {{ $user->office_hour->thursday_start }}
                                            @else
                                                {{ $user->office_hour->thursday_start . ' - ' . $user->office_hour->thursday_end }}
                                            @endif
                                        @else
                                            {{ 'Closed' }}
                                        @endif
                                    </span>
                                </dd>
                                <dd class="">Friday <span class="setWidth">
                                        @if ($user->office_hour)
                                            @if ($user->office_hour->friday_start == 'Closed')
                                                {{ $user->office_hour->friday_start }}
                                            @else
                                                {{ $user->office_hour->friday_start . ' - ' . $user->office_hour->friday_end }}
                                            @endif
                                        @else
                                            {{ 'Closed' }}
                                        @endif
                                    </span></dd>
                                <dd class="">Saturday <span class="setWidth">
                                        @if ($user->office_hour)
                                            @if ($user->office_hour->saturday_start == 'Closed')
                                                {{ $user->office_hour->saturday_start }}
                                            @else
                                                {{ $user->office_hour->saturday_start . ' - ' . $user->office_hour->saturday_end }}
                                            @endif
                                        @else
                                            {{ 'Closed' }}
                                        @endif
                                    </span></dd>
                                <dd class="">Sunday <span class="setWidth">
                                        @if ($user->office_hour)
                                            @if ($user->office_hour->sunday_start == 'Closed')
                                                {{ $user->office_hour->sunday_start }}
                                            @else
                                                {{ $user->office_hour->sunday_start . ' - ' . $user->office_hour->sunday_end }}
                                            @endif
                                        @else
                                            {{ 'Closed' }}
                                        @endif
                                    </span></dd>
                                <dd class="">Public Hol <span class="setWidth">
                                        @if ($user->office_hour)
                                            @if ($user->office_hour->public_start == 'Closed')
                                                {{ $user->office_hour->public_start }}
                                            @else
                                                {{ $user->office_hour->public_start . ' - ' . $user->office_hour->public_end }}
                                            @endif
                                        @else
                                            {{ 'Closed' }}
                                        @endif
                                    </span></dd>
                            </dl>
                        </div>
                        <div class="p-3 paleGreyGreen hours mt-3">
                            <dl class="lined">
                                <dt class="mb-2">Access Times:</dt>
                                <dd class="">Monday <span class="setWidth">
                                        @if ($user->access_time)
                                            @if ($user->access_time->monday_start == 'Closed')
                                                {{ $user->access_time->monday_start }}
                                            @else
                                                {{ $user->access_time->monday_start . ' - ' . $user->access_time->monday_end }}
                                            @endif
                                        @else
                                            {{ 'Closed' }}
                                        @endif
                                    </span></dd>
                                <dd class="">Tuesday <span class="setWidth">
                                        @if ($user->access_time)
                                            @if ($user->access_time->tuesday_start == 'Closed')
                                                {{ $user->access_time->tuesday_start }}
                                            @else
                                                {{ $user->access_time->tuesday_start . ' - ' . $user->access_time->tuesday_end }}
                                            @endif
                                        @else
                                            {{ 'Closed' }}
                                        @endif
                                    </span>
                                </dd>
                                <dd class="">Wednesday <span class="setWidth">
                                        @if ($user->access_time)
                                            @if ($user->access_time->wednesday_start == 'Closed')
                                                {{ $user->access_time->wednesday_start }}
                                            @else
                                                {{ $user->access_time->wednesday_start . ' - ' . $user->access_time->wednesday_end }}
                                            @endif
                                        @else
                                            {{ 'Closed' }}
                                        @endif
                                    </span>
                                </dd>
                                <dd class="">Thursday <span class="setWidth">
                                        @if ($user->access_time)
                                            @if ($user->access_time->thursday_start == 'Closed')
                                                {{ $user->access_time->thursday_start }}
                                            @else
                                                {{ $user->access_time->thursday_start . ' - ' . $user->access_time->thursday_end }}
                                            @endif
                                        @else
                                            {{ 'Closed' }}
                                        @endif
                                    </span>
                                </dd>
                                <dd class="">Friday <span class="setWidth">
                                        @if ($user->access_time)
                                            @if ($user->access_time->friday_start == 'Closed')
                                                {{ $user->access_time->friday_start }}
                                            @else
                                                {{ $user->access_time->friday_start . ' - ' . $user->access_time->friday_end }}
                                            @endif
                                        @else
                                            {{ 'Closed' }}
                                        @endif
                                    </span></dd>
                                <dd class="">Saturday <span class="setWidth">
                                        @if ($user->access_time)
                                            @if ($user->access_time->saturday_start == 'Closed')
                                                {{ $user->access_time->saturday_start }}
                                            @else
                                                {{ $user->access_time->saturday_start . ' - ' . $user->access_time->saturday_end }}
                                            @endif
                                        @else
                                            {{ 'Closed' }}
                                        @endif
                                    </span></dd>
                                <dd class="">Sunday <span class="setWidth">
                                        @if ($user->access_time)
                                            @if ($user->access_time->sunday_start == 'Closed')
                                                {{ $user->access_time->sunday_start }}
                                            @else
                                                {{ $user->access_time->sunday_start . ' - ' . $user->access_time->sunday_end }}
                                            @endif
                                        @else
                                            {{ 'Closed' }}
                                        @endif
                                    </span></dd>
                                <dd class="">Public Hol <span class="setWidth">
                                        @if ($user->access_time)
                                            @if ($user->access_time->public_start == 'Closed')
                                                {{ $user->access_time->public_start }}
                                            @else
                                                {{ $user->access_time->public_start . ' - ' . $user->access_time->public_end }}
                                            @endif
                                        @else
                                            {{ 'Closed' }}
                                        @endif
                                    </span></dd>
                            </dl>
                        </div>
                    </div>
                    <div class="col-lg-4">
                        <div class="p-3 features">
                            {{-- <dl>
                                <dt class="mb-2">Features:</dt>
                                <dd><img src="{{ asset('./webassets/imgs/Features/container.png') }}"
                                        alt="Self storage Container" title="Container"><span
                                        class="ml-3">Containers</span></dd>
                                <dd><img src="{{ asset('./webassets/imgs/Features/cctv.png') }}" alt="CCTV"
                                        title="CCTV"><span class="ml-3">CCTV</span></dd>
                                <dd><img src="{{ asset('./webassets/imgs/Features/insurance.png') }}"
                                        alt="Free pick up" title="Free pick up service"><span class="ml-3">Free
                                        Pick-up</span></dd>
                                <dd><img src="{{ asset('./webassets/imgs/Features/packaging.png') }}"
                                        alt="storage Packaging" title="Packaging"><span class="ml-3">Packaging
                                        Available</span></dd>
                                <dd><img src="{{ asset('./webassets/imgs/Features/insurance.png') }}"
                                        alt="storage Insurance" title="Insurance"><span class="ml-3">Insurance
                                        Available</span></dd>
                                <dd><img src="{{ asset('./webassets/imgs/Features/security-lighting.png') }}"
                                        alt="Security lightning" title="Security lightning"><span class="ml-3">Security
                                        Lightning</span></dd>
                                <dd><img src="{{ asset('./webassets/imgs/Features/security-fencing.png') }}"
                                        alt="Security fencing" title="Security fencing"><span class="ml-3">Security
                                        Fencing</span></dd>
                                <dd><img src="{{ asset('./webassets/imgs/Features/security-alarm.png') }}"
                                        alt="Security alarm" title="Security Alarm"><span class="ml-3">Security
                                        Alarm</span></dd>
                                <dd><img src="{{ asset('./webassets/imgs/Features/security-gates.png') }}"
                                        alt="Security gates" title="Security Gates"><span class="ml-3">Security
                                        Gates</span></dd>
                                <dd><img src="{{ asset('./webassets/imgs/Features/Security-guard.png') }}"
                                        alt="Securityg guard" title="Security Guard"><span class="ml-3">Security
                                        Guard</span></dd>
                            </dl> --}}
                            <dl>
                                @if($user->feature)
                                    @if($user->feature->hour)
                                        <dd><img src="{{ asset('./webassets/imgs/Features/24-hour.png') }}" alt="24 24 Hour" title="24 24 Hour"><span class="ml-3">24 24 Hour</span></dd>
                                    @endif
                                    @if($user->feature->hire)
                                        <dd><img src="{{ asset('./webassets/imgs/Features/Van-Hire.jpg') }}" alt="Van Hire" title="Van Hire"><span class="ml-3">Van Hire</span></dd>
                                    @endif
                                    @if($user->feature->cctv)
                                        <dd><img src="{{ asset('./webassets/imgs/Features/cctv.png') }}" alt="CCTV" title="CCTV"><span class="ml-3">CCTV</span></dd>
                                    @endif
                                    @if($user->feature->forklift)
                                        <dd><img src="{{ asset('./webassets/imgs/Features/Forklift.png') }}" alt="Forklift" title="Forklift"><span class="ml-3">Forklift</span></dd>
                                    @endif
                                    @if($user->feature->climate_control)
                                        <dd><img src="{{ asset('./webassets/imgs/Features/Climate-Control.jpg') }}" alt="Climate Control" title="Climate Control"><span class="ml-3">Climate Control</span></dd>
                                    @endif
                                    @if($user->feature->container)
                                        <dd><img src="{{ asset('./webassets/imgs/Features/Container.png') }}" alt="Containers" title="Containers"><span class="ml-3">Containers</span></dd>
                                    @endif
                                    @if($user->feature->assistance_at_store)
                                        <dd><img src="{{ asset('./webassets/imgs/Features/Assistance.png') }}" alt="Assistance at store" title="Assistance at store"><span class="ml-3">Assistance at store</span></dd>
                                    @endif
                                    @if($user->feature->free_pick_up)
                                        <dd><img src="{{ asset('./webassets/imgs/Features/pick-up.png') }}" alt="Free pick-up" title="Free pick-up"><span class="ml-3">Free pick-up</span></dd>
                                    @endif
                                    @if($user->feature->packaging)    
                                        <dd><img src="{{ asset('./webassets/imgs/Features/packaging.png') }}" alt="Packaging Available" title="Packaging Available"><span class="ml-3">Packaging Available</span></dd>
                                        @endif
                                        @if($user->feature->insurance)
                                        <dd><img src="{{ asset('./webassets/imgs/Features/insurance.png') }}" alt="Insurance Available" title="Insurance Available"><span class="ml-3">Insurance Available</span></dd>
                                        @endif
                                        @if($user->feature->truck)
                                        <dd><img src="{{ asset('./webassets/imgs/Features/Pallet-Trucks.png') }}" alt="Pallet Trucks" title="Pallet Trucks"><span class="ml-3">Pallet Trucks</span></dd>
                                        @endif
                                        @if($user->feature->box)
                                        <dd><img src="{{ asset('./webassets/imgs/Features/box.png') }}" alt="Box Storage" title="Box Storage"><span class="ml-3">Box Storage</span></dd>
                                        @endif
                                        @if($user->feature->electricity)
                                        <dd><img src="{{ asset('./webassets/imgs/Features/Electricity.png') }}" alt="Electricity" title="Electricity"><span class="ml-3">Electricity</span></dd>
                                        @endif
                                        @if($user->feature->lockable)
                                        <dd><img src="{{ asset('./webassets/imgs/Features/Lockable-Door.png') }}" alt="Lockable Door" title="Lockable Door"><span class="ml-3">Lockable Door</span></dd>
                                        @endif
                                        @if($user->feature->drive_up_access)
                                        <dd><img src="{{ asset('./webassets/imgs/Features/Drive.png') }}" alt="Drive Up Access" title="Drive Up Access"><span class="ml-3">Drive Up Access</span></dd>
                                        @endif
                                        @if($user->feature->drive_in_loading_unloading)
                                        <dd><img src="{{ asset('./webassets/imgs/Features/Drive-in-Loading-Unloading.jpg') }}" alt="Drive-in Loading/Unloading" title="Drive-in Loading/Unloading"><span class="ml-3">Drive-in Loading/Unloading</span></dd>
                                        @endif
                                        @if($user->feature->valet)
                                        <dd><img src="{{ asset('./webassets/imgs/Features/Service-Valet.png') }}" alt="Service/Valet" title="Service/Valet"><span class="ml-3">Service/Valet</span></dd>
                                        @endif
                                        @if($user->feature->lightning)
                                        <dd><img src="{{ asset('./webassets/imgs/Features/security-lighting.png') }}" alt="Security Lightning" title="Security Lightning"><span class="ml-3">Security Lightning</span></dd>
                                        @endif
                                        @if($user->feature->pin_access)
                                        <dd><img src="{{ asset('./webassets/imgs/Features/Pin-Access.jpg') }}" alt="Pin Access" title="Pin Access"><span class="ml-3">Pin Access</span></dd>
                                        @endif
                                        @if($user->feature->fencing)
                                        <dd><img src="{{ asset('./webassets/imgs/Features/security-fencing.png') }}" alt="Security Fencing" title="Security Fencing"><span class="ml-3">Security Fencing</span></dd>
                                        @endif
                                        @if($user->feature->anpr)
                                        <dd><img src="{{ asset('./webassets/imgs/Features/ANPR.png') }}" alt="ANPR" title="ANPR"><span class="ml-3">ANPR</span></dd>
                                        @endif
                                        @if($user->feature->vermin)
                                        <dd><img src="{{ asset('./webassets/imgs/Features/Vermin-Control.png') }}" alt="Vermin Control" title="Vermin Control"><span class="ml-3">Vermin Control</span></dd>
                                        @endif
                                        @if($user->feature->padlock)
                                        <dd><img src="{{ asset('./webassets/imgs/Features/Padlock.png') }}" alt="Padlock" title="Padlock"><span class="ml-3">Padlock</span></dd>
                                        @endif
                                        @if($user->feature->alarm)
                                        <dd><img src="{{ asset('./webassets/imgs/Features/security-alarm.png') }}" alt="Security Alarm" title="Security Alarm"><span class="ml-3">Security Alarm</span></dd>
                                        @endif
                                        @if($user->feature->cover)
                                        <dd><img src="{{ asset('./webassets/imgs/Features/Under-Cover.png') }}" alt="Under Cover" title="Under Cover"><span class="ml-3">Under Cover</span></dd>
                                        @endif
                                        @if($user->feature->lift)
                                        <dd><img src="{{ asset('./webassets/imgs/Features/Lift.png') }}" alt="Lift" title="Lift"><span class="ml-3">Lift</span></dd>
                                        @endif
                                        @if($user->feature->standing)
                                        <dd><img src="{{ asset('./webassets/imgs/Features/Hard-Standing.jpg') }}" alt="Hard Standing" title="Hard Standing"><span class="ml-3">Hard Standing</span></dd>
                                        @endif
                                        @if($user->feature->cassoa)
                                        <dd><img src="{{ asset('./webassets/imgs/Features/CaSSOA.png') }}" alt="CaSSOA" title="CaSSOA"><span class="ml-3">CaSSOA</span></dd>
                                        @endif
                                        @if($user->feature->shelving)
                                        <dd><img src="{{ asset('./webassets/imgs/Features/Shelving.jpg') }}" alt="Shelving" title="Shelving"><span class="ml-3">Shelving</span></dd>
                                        @endif
                                        @if($user->feature->gates)
                                        <dd><img src="{{ asset('./webassets/imgs/Features/security-gates.png') }}" alt="Security Gates" title="Security Gates"><span class="ml-3">Security Gates</span></dd>
                                        @endif
                                        @if($user->feature->patrol)
                                        
                                        <dd><img src="{{ asset('./webassets/imgs/Features/Security-guard.png') }}" alt="Security Guard/Patrol" title="Security Guard/Patrol"><span class="ml-3">Security Guard/Patrol</span></dd>
                                        @endif
                                        
                                @endif
                            </dl>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <section class="pb-5 d-block d-md-none">
            <div class="container">
                <div class="row">
                    <div class="col-12">
                        <h3 class="mb-3">Prices & Office Hours</h3>
                    </div>
                </div>
                <div id="accordion" class="accordion">
                    <div class="card mb-0">
                        <div class="card-header collapsed" data-toggle="collapse" aria-expanded="true"
                            aria-controls="collapse1" href="#collapse1"><a href="#" class="card-title">Prices</a></div>
                        <div id="collapse1" class="collapse" data-parent="#accordion">
                            <div class="card-body">
                                <p class="card-text text-center mt-3"><i>Prices shown are per week (inc VAT).</i></p>
                                <div class="price-slider-2 mt-3 mb-3 mx-3" id="price-slider">
                                    <div class="carousel-cell mr-2">
                                        <div class="price-detail rounded">
                                            <p class="text-center mb-0 pt-2">Box</p>
                                            <p class="card-text text-center">
                                                @if ($user->pcm)
                                                    @if ($user->pcm)
                                                    @else
                                                        <i class="cts-phone-alt"></i>
                                                @endif @else<i class="cts-phone-alt"></i>
                                                @endif
                                            </p>
                                        </div>
                                        <div class="slider-reserve text-center">
                                            <button id="Box" type="button"
                                                class="btn btn-primary rounded ps-reserve">Reserve</button>
                                        </div>
                                    </div>
                                    <div class="carousel-cell mr-2">
                                        <div class="price-detail rounded">
                                            <p class="text-center mb-0 pt-2">25 ft²</p>
                                            <p class="card-text text-center">£@if ($user->pcm)
                                                    @if ($user->pcm->pcm_25_ft2)
                                                    {{ $user->pcm->pcm_25_ft2 }} @else<i class="cts-phone-alt"></i>
                                                @endif @else<i class="cts-phone-alt"></i>
                                                @endif
                                            </p>
                                        </div>
                                        <div class="slider-reserve text-center">
                                            <button id="25 ft²" type="button"
                                                class="btn btn-primary rounded ps-reserve">Reserve</button>
                                        </div>
                                    </div>
                                    <div class="carousel-cell mr-2">
                                        <div class="price-detail rounded">
                                            <p class="text-center mb-0 pt-2">35 ft²</p>
                                            <p class="card-text text-center">£@if ($user->pcm)
                                                    @if ($user->pcm->pcm_35_ft2)
                                                    {{ $user->pcm->pcm_35_ft2 }} @else<i class="cts-phone-alt"></i>
                                                @endif @else<i class="cts-phone-alt"></i>
                                                @endif
                                            </p>
                                        </div>
                                        <div class="slider-reserve text-center">
                                            <button id="35 ft²" type="button"
                                                class="btn btn-primary rounded ps-reserve">Reserve</button>
                                        </div>
                                    </div>
                                    <div class="carousel-cell mr-2">
                                        <div class="price-detail rounded">
                                            <p class="text-center mb-0 pt-2">50 ft²</p>
                                            <p class="card-text text-center">£@if ($user->pcm)
                                                    @if ($user->pcm->pcm_50_ft2)
                                                    {{ $user->pcm->pcm_50_ft2 }} @else<i class="cts-phone-alt"></i>
                                                @endif @else<i class="cts-phone-alt"></i>
                                                @endif
                                            </p>
                                        </div>
                                        <div class="slider-reserve text-center">
                                            <button id="50 ft²" type="button"
                                                class="btn btn-primary rounded ps-reserve">Reserve</button>
                                        </div>
                                    </div>
                                    <div class="carousel-cell mr-2">
                                        <div class="price-detail rounded">
                                            <p class="text-center mb-0 pt-2">75 ft²</p>
                                            <p class="card-text text-center">£@if ($user->pcm)
                                                    @if ($user->pcm->pcm_75_ft2)
                                                    {{ $user->pcm->pcm_75_ft2 }} @else<i class="cts-phone-alt"></i>
                                                @endif @else<i class="cts-phone-alt"></i>
                                                @endif
                                            </p>
                                        </div>
                                        <div class="slider-reserve text-center">
                                            <button id="75 ft²" type="button"
                                                class="btn btn-primary rounded ps-reserve">Reserve</button>
                                        </div>
                                    </div>
                                    <div class="carousel-cell mr-2">
                                        <div class="price-detail rounded">
                                            <p class="text-center mb-0 pt-2">80 ft²</p>
                                            <p class="card-text text-center">£@if ($user->pcm)
                                                    @if ($user->pcm->pcm_80_ft2)
                                                    {{ $user->pcm->pcm_80_ft2 }} @else<i class="cts-phone-alt"></i>
                                                @endif @else<i class="cts-phone-alt"></i>
                                                @endif
                                            </p>
                                        </div>
                                        <div class="slider-reserve text-center">
                                            <button id="80 ft²" type="button"
                                                class="btn btn-primary rounded ps-reserve">Reserve</button>
                                        </div>
                                    </div>
                                    <div class="carousel-cell mr-2">
                                        <div class="price-detail rounded">
                                            <p class="text-center mb-0 pt-2">100 ft²</p>
                                            <p class="card-text text-center">£@if ($user->pcm)
                                                    @if ($user->pcm->pcm_100_ft2)
                                                    {{ $user->pcm->pcm_100_ft2 }} @else<i class="cts-phone-alt"></i>
                                                @endif @else<i class="cts-phone-alt"></i>
                                                @endif
                                            </p>
                                        </div>
                                        <div class="slider-reserve text-center">
                                            <button id="100 ft²" type="button"
                                                class="btn btn-primary rounded ps-reserve">Reserve</button>
                                        </div>
                                    </div>
                                    <div class="carousel-cell mr-2">
                                        <div class="price-detail rounded">
                                            <p class="text-center mb-0 pt-2">125 ft²</p>
                                            <p class="card-text text-center">£@if ($user->pcm)
                                                    @if ($user->pcm->pcm_125_ft2)
                                                    {{ $user->pcm->pcm_125_ft2 }} @else<i class="cts-phone-alt"></i>
                                                @endif @else<i class="cts-phone-alt"></i>
                                                @endif
                                            </p>
                                        </div>
                                        <div class="slider-reserve text-center">
                                            <button id="125 ft²" type="button"
                                                class="btn btn-primary rounded ps-reserve">Reserve</button>
                                        </div>
                                    </div>
                                    <div class="carousel-cell mr-2">
                                        <div class="price-detail rounded">
                                            <p class="text-center mb-0 pt-2">150 ft²</p>
                                            <p class="card-text text-center">£@if ($user->pcm)
                                                    @if ($user->pcm->pcm_150_ft2)
                                                    {{ $user->pcm->pcm_150_ft2 }} @else<i class="cts-phone-alt"></i>
                                                @endif @else<i class="cts-phone-alt"></i>
                                                @endif
                                            </p>
                                        </div>
                                        <div class="slider-reserve text-center">
                                            <button id="150 ft²" type="button"
                                                class="btn btn-primary rounded ps-reserve">Reserve</button>
                                        </div>
                                    </div>
                                    <div class="carousel-cell mr-2">
                                        <div class="price-detail rounded">
                                            <p class="text-center mb-0 pt-2">160 ft²</p>
                                            <p class="card-text text-center">£@if ($user->pcm)
                                                    @if ($user->pcm->pcm_160_ft2)
                                                    {{ $user->pcm->pcm_160_ft2 }} @else<i class="cts-phone-alt"></i>
                                                @endif @else<i class="cts-phone-alt"></i>
                                                @endif
                                            </p>
                                        </div>
                                        <div class="slider-reserve text-center">
                                            <button id="160 ft²" type="button"
                                                class="btn btn-primary rounded ps-reserve">Reserve</button>
                                        </div>
                                    </div>
                                    @if ($user->pcm && $user->pcm->custom_size_1)
                                        <div class="carousel-cell mr-2">
                                            <div class="price-detail rounded">
                                                <p class="text-center mb-0 pt-2">{{ $user->pcm->custom_size_1 }} sqft
                                                </p>
                                                <p class="card-text text-center">£@if ($user->pcm->custom_price_1)
                                                    {{ $user->pcm->custom_price_1 }} @else<i
                                                            class="cts-phone-alt"></i>
                                                    @endif
                                                </p>
                                            </div>
                                            <div class="slider-reserve text-center">
                                                <button id="12 sqft" type="button"
                                                    class="btn btn-primary rounded ps-reserve">Reserve</button>
                                            </div>
                                        </div>
                                    @endif
                                    @if ($user->pcm && $user->pcm->custom_size_2)
                                        <div class="carousel-cell mr-2">
                                            <div class="price-detail rounded">
                                                <p class="text-center mb-0 pt-2">{{ $user->pcm->custom_size_2 }}sqft</p>
                                                <p class="card-text text-center">£@if ($user->pcm->custom_price_2)
                                                    {{ $user->pcm->custom_price_2 }} @else<i
                                                            class="cts-phone-alt"></i>
                                                    @endif
                                                </p>
                                            </div>
                                            <div class="slider-reserve text-center">
                                                <button id="28sqft" type="button"
                                                    class="btn btn-primary rounded ps-reserve">Reserve</button>
                                            </div>
                                        </div>
                                    @endif
                                    @if ($user->pcm && $user->pcm->custom_size_3)
                                        <div class="carousel-cell mr-2">
                                            <div class="price-detail rounded">
                                                <p class="text-center mb-0 pt-2">{{ $user->pcm->custom_size_3 }}sqft</p>
                                                <p class="card-text text-center">£@if ($user->pcm->custom_price_3)
                                                    {{ $user->pcm->custom_price_3 }} @else<i
                                                            class="cts-phone-alt"></i>
                                                    @endif
                                                </p>
                                            </div>
                                            <div class="slider-reserve text-center">
                                                <button id="28sqft" type="button"
                                                    class="btn btn-primary rounded ps-reserve">Reserve</button>
                                            </div>
                                        </div>
                                    @endif
                                </div>
                            </div>
                        </div>
                        <div class="card mb-0">
                            <div class="card-header collapsed" data-toggle="collapse" aria-expanded="false"
                                aria-controls="collapse2" href="#collapse2"><a href="#" class="card-title">Office Hours</a>
                            </div>
                            <div id="collapse2" class="collapse" data-parent="#accordion">
                                <div class="card-body">
                                    <div class="p-3">
                                        {{-- @dd($user) --}}
                                        <dl class="lined">
                                            <dd class="">Monday <span class="setWidth">
                                                    @if ($user->office_hour)
                                                        @if ($user->office_hour->monday_start == 'Closed')
                                                            {{ $user->office_hour->monday_start }}
                                                        @else
                                                            {{ $user->office_hour->monday_start . ' - ' . $user->office_hour->monday_end }}
                                                        @endif
                                                    @else
                                                        {{ 'Closed' }}
                                                    @endif
                                                </span></dd>
                                            <dd class="">Tuesday <span class="setWidth">
                                                    @if ($user->office_hour)
                                                        @if ($user->office_hour->tuesday_start == 'Closed')
                                                            {{ $user->office_hour->tuesday_start }}
                                                        @else
                                                            {{ $user->office_hour->tuesday_start . ' - ' . $user->office_hour->tuesday_end }}
                                                        @endif
                                                    @else
                                                        {{ 'Closed' }}
                                                    @endif
                                                </span>
                                            </dd>
                                            <dd class="">Wednesday <span class="setWidth">
                                                    @if ($user->office_hour)
                                                        @if ($user->office_hour->wednesday_start == 'Closed')
                                                            {{ $user->office_hour->wednesday_start }}
                                                        @else
                                                            {{ $user->office_hour->wednesday_start . ' - ' . $user->office_hour->wednesday_end }}
                                                        @endif
                                                    @else
                                                        {{ 'Closed' }}
                                                    @endif
                                                </span>
                                            </dd>
                                            <dd class="">Thursday <span class="setWidth">
                                                    @if ($user->office_hour)
                                                        @if ($user->office_hour->thursday_start == 'Closed')
                                                            {{ $user->office_hour->thursday_start }}
                                                        @else
                                                            {{ $user->office_hour->thursday_start . ' - ' . $user->office_hour->thursday_end }}
                                                        @endif
                                                    @else
                                                        {{ 'Closed' }}
                                                    @endif
                                                </span>
                                            </dd>
                                            <dd class="">Friday <span class="setWidth">
                                                    @if ($user->office_hour)
                                                        @if ($user->office_hour->friday_start == 'Closed')
                                                            {{ $user->office_hour->friday_start }}
                                                        @else
                                                            {{ $user->office_hour->friday_start . ' - ' . $user->office_hour->friday_end }}
                                                        @endif
                                                    @else
                                                        {{ 'Closed' }}
                                                    @endif
                                                </span></dd>
                                            <dd class="">Saturday <span class="setWidth">
                                                    @if ($user->office_hour)
                                                        @if ($user->office_hour->saturday_start == 'Closed')
                                                            {{ $user->office_hour->saturday_start }}
                                                        @else
                                                            {{ $user->office_hour->saturday_start . ' - ' . $user->office_hour->saturday_end }}
                                                        @endif
                                                    @else
                                                        {{ 'Closed' }}
                                                    @endif
                                                </span></dd>
                                            <dd class="">Sunday <span class="setWidth">
                                                    @if ($user->office_hour)
                                                        @if ($user->office_hour->sunday_start == 'Closed')
                                                            {{ $user->office_hour->sunday_start }}
                                                        @else
                                                            {{ $user->office_hour->sunday_start . ' - ' . $user->office_hour->sunday_end }}
                                                        @endif
                                                    @else
                                                        {{ 'Closed' }}
                                                    @endif
                                                </span></dd>
                                            <dd class="">Public Hol <span class="setWidth">
                                                    @if ($user->office_hour)
                                                        @if ($user->office_hour->public_start == 'Closed')
                                                            {{ $user->office_hour->public_start }}
                                                        @else
                                                            {{ $user->office_hour->public_start . ' - ' . $user->office_hour->public_end }}
                                                        @endif
                                                    @else
                                                        {{ 'Closed' }}
                                                    @endif
                                                </span></dd>
                                        </dl>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="card mb-0">
                            <div class="card-header collapsed" data-toggle="collapse" aria-expanded="false"
                                aria-controls="collapse3" href="#collapse3"><a href="#" class="card-title">Access Hours</a>
                            </div>
                            <div id="collapse3" class="collapse" data-parent="#accordion">
                                <div class="card-body">
                                    <div class="p-3">
                                        <dl class="lined">
                                            <dd class="">Monday <span class="setWidth">00:00 - 00:00</span></dd>
                                            <dd class="">Tuesday <span class="setWidth">00:00 - 00:00</span>
                                            </dd>
                                            <dd class="">Wednesday <span class="setWidth">00:00 - 00:00</span>
                                            </dd>
                                            <dd class="">Thursday <span class="setWidth">00:00 - 00:00</span>
                                            </dd>
                                            <dd class="">Friday <span class="setWidth">00:00 - 00:00</span></dd>
                                            <dd class="">Saturday <span class="setWidth">00:00 - 00:00</span>
                                            </dd>
                                            <dd class="">Sunday <span class="setWidth">00:00 - 00:00</span></dd>
                                            <dd class="">Public Hol <span class="setWidth">00:00 - 00:00</span>
                                            </dd>
                                        </dl>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
        </section>
        {{-- <section class="py-5">
            <div class="container">
                <div class="row">
                    <div class="col-12">
                        <h3 class="mb-3">About</h3>
                    </div>
                </div>
                <div class="row">
                    <div class="col-lg-6">
                        <dl>
                            <dt>Storing</dt>
                            <dd class="">
                                <p>With our service there is no need to hire a van; we collect from 7am daily Monday to
                                    Friday with our two-man team. Why not move from your existing self storage facility.
                                    Take the hassle out of Storing your possession ensuring your possessions are in save
                                    hands.</p>
                            </dd>
                        </dl>
                    </div>
                    <div class="col-lg-6">
                        <dl>
                            <dt> How it works</dt>
                            <dd>
                                <div class="embed-responsive embed-responsive-16by9 mt-2 mb-3 yt-lazyload"
                                    data-id="7XVhLV58HLM" data-thumb="7XVhLV58HLM" data-logo="3"></div>
                            </dd>
                        </dl>
                    </div>
                </div>
            </div>
        </section> --}}
        {{-- <section class="pt-5 sponsored">
            <div class="container py-4">
                <div class="row">
                    <div class="col-12 text-center">
                        <h3 class="pb-3">Featured Store</h3>
                    </div>
                </div>
                <div id="slider" class="col-lg-12 rounded advert">
                    <div class="slide active">
                        <div class="row bar pt-2 pb-0 rounded-top">
                            <div class="col-12 text-center pt-3 pt-lg-0 min-h-55">
                                <h3 class="white-text" style="font-size: 1.5rem; font-weight: 600; line-height: 1;">
                                    Storing - Oxford </h3>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-lg-12 paper-bgnd border-green-u rounded-bottom">
                                <div class="slides pt-3">
                                    <div class="row">
                                        <div class="col-lg-3 mx-auto pb-3 d-none d-lg-block"> <img
                                                src="{{ asset('./webassets/imgs/2453image1.png') }}" title="Storing"
                                                alt="Logo" class="img-fluid mx-auto lazyload"> </div>
                                        <div class="col-lg-3 col-md-8 mx-auto pb-md-3 pb-3 max-h-80 d-block d-lg-none">
                                            <img src="{{ asset('./webassets/imgs/2453image1.png') }}" title="Storing"
                                                alt="Logo" class="img-fluid-x mx-auto lazyload">
                                        </div>
                                        <div class="col-lg-4 col-md-8 mx-auto pt-lg-0 pt-md-3">
                                            <div class="embed-responsive embed-responsive-16by9 yt-lazyload mt-1 video-ad"
                                                data-id="7XVhLV58HLM" data-thumb="7XVhLV58HLM" data-logo="3">
                                            </div>
                                        </div>
                                        <div class="col-lg-5 col-md-8 mx-auto pt-3 pt-lg-0 pb-1">
                                            <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>
                                            <p class="text-center call pt-1"><a href="tel: 01865 565 344">&#9742
                                                    01865 565 344 </a></p>
                                            <div class="row">
                                                <div class="col-lg-6"><a id="visit2473"
                                                        class="btn btn-orange btn-block rounded mb-3 mb-lg-0 visit"
                                                        href="#" target="_blank">Visit
                                                        Website</a></div>
                                                <div class="col-lg-6"><a class="btn btn-primary btn-block mb-2 rounded"
                                                        href="#">View Store</a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="slide">
                        <div class="row bar pt-2 pb-0 rounded-top">
                            <div class="col-12 text-center pt-3 pt-lg-0 min-h-55">
                                <h3 class="white-text" style="font-size: 1.5rem; font-weight: 600; line-height: 1;">
                                    Storing - London City </h3>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-lg-12 paper-bgnd border-green-u rounded-bottom">
                                <div class="slides pt-3">
                                    <div class="row">
                                        <div class="col-lg-3 mx-auto pb-3 d-none d-lg-block"> <img
                                                {{ asset('./webassets/imgs/2453image1.png') }} title="storing"
                                                alt="logo" class="img-fluid mx-auto lazyload"> </div>
                                        <div class="col-lg-3 col-md-8 mx-auto pb-md-3 pb-3 max-h-80 d-block d-lg-none">
                                            <img {{ asset('./webassets/imgs/2453image1.png') }} title="storing"
                                                alt="logo" class="img-fluid-x mx-auto lazyload">
                                        </div>
                                        <div class="col-lg-4 col-md-8 mx-auto pt-lg-0 pt-md-3">
                                            <div class="embed-responsive embed-responsive-16by9 yt-lazyload mt-1 video-ad"
                                                data-id="7XVhLV58HLM" data-thumb="7XVhLV58HLM" data-logo="3">
                                            </div>
                                        </div>
                                        <div class="col-lg-5 col-md-8 mx-auto pt-3 pt-lg-0 pb-1">
                                            <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>
                                            <p class="text-center call pt-1"><a href="tel: 0800 161 3603">&#9742
                                                    0800 161 3603 </a></p>
                                            <div class="row">
                                                <div class="col-lg-6"><a id="visit2453"
                                                        class="btn btn-orange btn-block rounded mb-3 mb-lg-0 visit"
                                                        href="#" target="_blank">Visit
                                                        Website</a></div>
                                                <div class="col-lg-6"><a href="#" class="btn btn-primary btn-block mb-2 rounded"
                                                        href="self-storage-store-finder.php?id=2453">View Store</a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="slide">
                        <div class="row bar pt-2 pb-0 rounded-top">
                            <div class="col-12 text-center pt-3 pt-lg-0 min-h-55">
                                <h3 class="white-text" style="font-size: 1.5rem; font-weight: 600; line-height: 1;">
                                    Storing - London City </h3>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-lg-12 paper-bgnd border-green-u rounded-bottom">
                                <div class="slides pt-3">
                                    <div class="row">
                                        <div class="col-lg-3 mx-auto pb-3 d-none d-lg-block"> <img
                                                {{ asset('./webassets/imgs/2453image1.png') }} title="storing"
                                                alt="logo" class="img-fluid mx-auto lazyload"> </div>
                                        <div class="col-lg-3 col-md-8 mx-auto pb-md-3 pb-3 max-h-80 d-block d-lg-none">
                                            <img {{ asset('./webassets/imgs/2453image1.png') }} title="storing"
                                                alt="logo" class="img-fluid-x mx-auto lazyload">
                                        </div>
                                        <div class="col-lg-4 col-md-8 mx-auto pt-lg-0 pt-md-3">
                                            <div class="embed-responsive embed-responsive-16by9 yt-lazyload mt-1 video-ad"
                                                data-id="7XVhLV58HLM" data-thumb="7XVhLV58HLM" data-logo="3">
                                            </div>
                                        </div>
                                        <div class="col-lg-5 col-md-8 mx-auto pt-3 pt-lg-0 pb-1">
                                            <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>
                                            <p class="text-center call pt-1"><a href="tel: 0800 161 3603">&#9742
                                                    0800 161 3603 </a></p>
                                            <div class="row">
                                                <div class="col-lg-6"><a id="visit2453"
                                                        class="btn btn-orange btn-block rounded mb-3 mb-lg-0 visit"
                                                        href="#" target="_blank">Visit
                                                        Website</a></div>
                                                <div class="col-lg-6"><a href="#" class="btn btn-primary btn-block mb-2 rounded"
                                                        href="self-storage-store-finder.php?id=2453">View Store</a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section> --}}
        <section class="nearby pb-5">
            <div class="container">
                <h3 class="my-4 text-center">More Nearby Self Storage Facilities</h3>
                <div class="row">
                    @foreach($users as $us)
                    <div class="col-lg-4 col-sm-6 details-item">
                        <div class="card h-100 rounded"> 
                            @if($us->storeImage)
                            @if($us->storeImage->image1)
                                <img class="store-logo mx-auto lazyload" src="{{ asset('/storage/'.$us->storeImage->image1) }}"
                                height="80" alt="">
                            @elseif($us->storeImage->image2)
                                <img class="store-logo mx-auto lazyload" src="{{ asset('/storage/'.$us->storeImage->image2) }}"
                                height="80" alt="">
                            @elseif($us->storeImage->image3)
                                <img class="store-logo mx-auto lazyload" src="{{ asset('/storage/'.$us->storeImage->image3) }}"
                                height="80" alt="">
                            @elseif($us->storeImage->image4)
                                <img class="store-logo mx-auto lazyload" src="{{ asset('/storage/'.$us->storeImage->image4) }}"
                                height="80" alt="">
                            @elseif($us->storeImage->image5)
                                <img class="store-logo mx-auto lazyload" src="{{ asset('/storage/'.$us->storeImage->image5) }}"
                                height="80" alt="">
                            @else
                                <img class="store-logo mx-auto lazyload" src="{{ asset('./assets/img/image-placeholder.png') }}" height="80"
                                alt="">
                            @endif
                            @else
                            <img class="store-logo mx-auto lazyload" src="{{ asset('./assets/img/image-placeholder.png') }}" height="80"
                            alt="">
                            @endif
                            {{-- <img class="store-logo mx-auto lazyload"
                                src="{{ asset('./webassets/imgs/2453image1.png') }}" height="80"
                                alt="Urban Locker Self Storage Logo" title=""> --}}
                            <div class="card-body">
                                <p class="card-text"><strong>{{$us->user->user_detail->company??''}}</strong></p>
                                <p class="card-text">{{$us->address_line_1}}</p>
                                <p class="card-text">{{$us->address_line_2}}</p>
                                <p class="card-text">{{$us->town}}</p>
                                <p class="card-text">{{$us->city}}</p>
                                <p class="card-text">{{$us->county}}</p>
                                <p class="card-text">{{$us->postcode}}</p>
                                <p class="card-text view" id="view1121"><span class="cts-phone-alt mr-2"></span>View
                                    Number</p>
                                <div class="wrap" id="wrap1121">
                                    <p class="card-text mt-0"><a href="tel:{{$us->phone_no}}">{{$us->phone_no}}</a></p>
                                </div>
                                <p class="card-text">Contact store for price.</p>
                                <p class="card-text"><strong>0.63 Miles Away</strong></p>
                            </div>
                            <div class="card-footer text-right"> <a href="{{route('self_storage_store_finder',['id'=>$us->id])}}"
                                    class="btn btn-orange rounded">View store</a> </div>
                        </div>
                    </div>
                    @endforeach
                    {{-- <div class="col-lg-4 col-sm-6 details-item">
                        <div class="card h-100 rounded"> <img class="store-logo mx-auto lazyload"
                                src="{{ asset('./webassets/imgs/2453image1.png') }}" height="80" alt=""
                                title="">
                            <div class="card-body">
                                <p class="card-text"><strong>Smartbox Self Storage</strong></p>
                                <p class="card-text">86- 90 Paul Street,</p>
                                <p class="card-text">Shoreditch,</p>
                                <p class="card-text">London,</p>
                                <p class="card-text">Greater London.</p>
                                <p class="card-text">EC2A 4NE</p>
                                <p class="card-text view" id="view1969"><span class="cts-phone-alt mr-2"></span>View
                                    Number</p>
                                <div class="wrap" id="wrap1969">
                                    <p class="card-text mt-0"><a href="tel:0800 533 5677">0800 533 5677</a></p>
                                </div>
                                <p class="card-text">Contact store for price.</p>
                                <p class="card-text"><strong>0.84 Miles Away</strong></p>
                            </div>
                            <div class="card-footer text-right"> <a href="self-storage-store-finder.php?id=1969"
                                    class="btn btn-orange rounded">View store</a> </div>
                        </div>
                    </div>
                    <div class="col-lg-4 col-sm-6 details-item">
                        <div class="card h-100 rounded"> <img class="store-logo mx-auto lazyload"
                                src="{{ asset('./webassets/imgs/2453image1.png') }}" height="80" alt=""
                                title="">
                            <div class="card-body">
                                <p class="card-text"><strong>CitySpace</strong></p>
                                <p class="card-text">3 -16 Woburn Place,</p>
                                <p class="card-text">Bloomsbury,</p>
                                <p class="card-text">London,</p>
                                <p class="card-text">WC1H 0N</p>
                                <p class="card-text view" id="view2127"><span class="cts-phone-alt mr-2"></span>View
                                    Number</p>
                                <div class="wrap" id="wrap2127">
                                    <p class="card-text mt-0"><a href="tel:0203 893 4530">0203 893 4530</a></p>
                                </div>
                                <p class="card-text">Contact store for price.</p>
                                <p class="card-text"><strong>1.07 Miles Away</strong></p>
                            </div>
                            <div class="card-footer text-right"> <a href="self-storage-store-finder.php?id=2127"
                                    class="btn btn-orange rounded">View store</a> </div>
                        </div>
                    </div>
                    <div class="col-lg-4 col-sm-6 details-item">
                        <div class="card h-100 rounded"> <img class="store-logo mx-auto lazyload"
                                src="{{ asset('./webassets/imgs/2453image1.png') }}" height="80" alt="Logo"
                                title="Metro Storage">
                            <div class="card-body">
                                <p class="card-text"><strong>Metro Storage N1</strong></p>
                                <p class="card-text">27 Maryland Walk,</p>
                                <p class="card-text">Islington,</p>
                                <p class="card-text">London,</p>
                                <p class="card-text">Greater London.</p>
                                <p class="card-text">N1 8QZ</p>
                                <p class="card-text view" id="view2267"><span class="cts-phone-alt mr-2"></span>View
                                    Number</p>
                                <div class="wrap" id="wrap2267">
                                    <p class="card-text mt-0"><a href="tel:0800 999 5881">0800 999 5881</a></p>
                                </div>
                                <p class="card-text">Contact store for price.</p>
                                <p class="card-text"><strong>1.2 Miles Away</strong></p>
                            </div>
                            <div class="card-footer text-right"> <a href="self-storage-store-finder.php?id=2267"
                                    class="btn btn-orange rounded">View store</a> </div>
                        </div>
                    </div>
                    <div class="col-lg-4 col-sm-6 details-item">
                        <div class="card h-100 rounded"> <img class="store-logo mx-auto lazyload"
                                src="{{ asset('./webassets/imgs/2453image1.png') }}" height="80" alt="Logo"
                                title="Vanguard">
                            <div class="card-body">
                                <p class="card-text"><strong>Vanguard Self Storage</strong></p>
                                <p class="card-text">Q Park Chinatown,</p>
                                <p class="card-text">20 Newport Place,</p>
                                <p class="card-text">Soho,</p>
                                <p class="card-text">London,</p>
                                <p class="card-text">Greater London.</p>
                                <p class="card-text">WC2H 7PR</p>
                                <p class="card-text view" id="view2623"><span class="cts-phone-alt mr-2"></span>View
                                    Number</p>
                                <div class="wrap" id="wrap2623">
                                    <p class="card-text mt-0"><a href="tel:0203 981 5445">0203 981 5445</a></p>
                                    <p class="card-text"><a href="tel:"> </a></p>
                                </div>
                                <p class="card-text">Contact store for price.</p>
                                <p class="card-text"><strong>1.32 Miles Away</strong></p>
                            </div>
                            <div class="card-footer text-right"> <a href="self-storage-store-finder.php?id=2623"
                                    class="btn btn-orange rounded">View store</a> </div>
                        </div>
                    </div>
                    <div class="col-lg-4 col-sm-6 details-item">
                        <div class="card h-100 rounded"> <img class="store-logo mx-auto lazyload"
                                src="{{ asset('./webassets/imgs/2453image1.png') }}" height="80" alt=""
                                title="">
                            <div class="card-body">
                                <p class="card-text"><strong>Crispins Removals and Storage</strong></p>
                                <p class="card-text">18-24 Hows Street,</p>
                                <p class="card-text">Hackney,</p>
                                <p class="card-text">London,</p>
                                <p class="card-text">Greater London.</p>
                                <p class="card-text">E2 8EE</p>
                                <p class="card-text view" id="view2112"><span class="cts-phone-alt mr-2"></span>View
                                    Number</p>
                                <div class="wrap" id="wrap2112">
                                    <p class="card-text mt-0"><a href="tel:0207 739 0303">0207 739 0303</a></p>
                                </div>
                                <p class="card-text">Contact store for price.</p>
                                <p class="card-text"><strong>1.45 Miles Away</strong></p>
                            </div>
                            <div class="card-footer text-right"> <a href="self-storage-store-finder.php?id=2112"
                                    class="btn btn-orange rounded">View store</a> </div>
                        </div>
                    </div> --}}
                </div>
                <div class="text-center pt-5">
                    <h3>Self Storage Near Me.</h3>
                </div>
                <div class="row justify-content-center compare-form">
                    <div class="col-lg-12 pt-3">
                        <form id="visitor_search_24" action="{{route('search_distance')}}" method="post" action="/self-storage-store-finder.php?id=2453" method="POST"
                            class="justify-content-center visitor-search form-inline has-validator" novalidate
                            data-fv-no-icon="true">
                            @csrf
                            {{-- <div><input name="visitor_search_24-token" type="hidden"
                                    value="195609712662bfe615c3dc65.91412511"><input name="visitor_search_24"
                                    type="hidden" value="1"></div> --}}
                            <fieldset>
                                <legend>Enter postcode or town</legend>
                                <div class="form-group"><input id="postcode5" name="postcode" type="text"
                                        value="" class="corners-lt postcode form-control fv-group"
                                        placeholder="e.g. SW1A" required aria-label="e.g. SW1A">
                                    <div class="test"><select id="distance5" name="distance"
                                            class="bootstrap-select btn-white outline distance form-control">
                                            <option value="5">5 Miles</option>
                                            <option value="10">10 Miles</option>
                                            <option value="15">15 Miles</option>
                                            <option value="20">20 Miles</option>
                                        </select></div>
                                        <input type="hidden" name="langitude" id="langitude2" value="">
                                        <input type="hidden" name="latitude" id="latitude2" value="">
                                        <input type="hidden" name="address" id="address2" value="">
                                    <div class="form-group"><button type="submit" id="submit3" name="submit-btn2" value="1"
                                            class="btn btn-orange compare outline corners-rb">Compare
                                            Now!</button></div>
                            </fieldset>
                        </form>
                    </div>
                </div>
            </div>
        </section>
    </div>
@endsection
@push('script')
    <script
        src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDXjU5ipIQXdtLhqAjJjB3-s9FWcteb0XA&libraries=places&callback=initMap3"
        async="async" defer="defer"></script>
    <script>
            $('#submit2').prop('disabled', true);
            $('#submit3').prop('disabled', true);
        $('#find-button').prop('disabled', true);

        var map3;
        var lat = {{ $lat }};
        var lng = {{ $lng }};
        var addres = '';
        var map4, infoWindow, markerA, markerB, drag_pos;
        // var addres = {{ $user->address_line_1 }};
        console.log(addres);
        //  reserve
        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)
                })
        }

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

        //  email
        function email() {
            var x = document.getElementById("ad_email");
            if (x.style.display === "none") {
                x.style.display = "block";
            } else {
                x.style.display = "none";
            }
        }
        //  email
        //  MESSAGE
        function text() {
            var x = document.getElementById("ad_sms");
            if (x.style.display === "none") {
                x.style.display = "block";
            } else {
                x.style.display = "none";
            }
        }
        //  MESSAGE
        //  directions
        // function map() {
        var x = document.getElementById("directions");
        if (x.style.display === "none") {
            x.style.display = "block";
        } else {
            x.style.display = "none";
        }
        // }

        function initMap3() {
            console.log(lat, lng);
            map3 = new google.maps.Map(document.getElementById('map3'), {
                center: {
                    lat,
                    lng
                },
                scrollwheel: true,
                mapTypeControl: false,
                zoom: 15,
                streetViewControl: false,
                zoomControl: true
            });

            new google.maps.Marker({
                position: {
                    lat,
                    lng
                },
                map: map3,
                title: addres,
            });

            const input5 = document.getElementById("postcode5");
            // alert(input);
            var options5 = {
                componentRestrictions: {
                    country: 'uk'
                } //Turkey only
            };
            const searchBox5 = new google.maps.places.Autocomplete(input5, options5);
            var service5 = new google.maps.places.AutocompleteService()
            var placesService5 = new google.maps.places.PlacesService(map3)
            // google.maps.places.ComponentRestrictions("uk")
            // console.log(searchBox)

            input5.addEventListener("change", (e) => {
                // console.log(e.target.value);
                service5.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);
                          $("#latitude2").val(data.geometry.location.lat);
                          $("#langitude2").val(data.geometry.location.lng);
                          $("#address2").val(data.formatted_address);
                          $('#submit3').prop('disabled', false);
                        //   $("input:text").val("Glenn Quagmire");
                        //   document.getElementById('latitude').value=lat;
                        //   document.getElementById('longitude').value=lon;
                       
                        }else{
                            $('#submit3').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)
            })
            searchBox5.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());
                          $('#submit3').prop('disabled', false);
            })

            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(map3)
            // 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);
                          $('#submit2').prop('disabled', false);
                        //   $("input:text").val("Glenn Quagmire");
                        //   document.getElementById('latitude').value=lat;
                        //   document.getElementById('longitude').value=lon;
                       
                        }else{
                            $('#submit2').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());
                          $('#submit2').prop('disabled', false);
            })

            map4 = new google.maps.Map(document.getElementById('map6'), {
                center: {
                    lat,
                    lng
                },
                // scrollwheel: true,
                // mapTypeControl: false,
                zoom: 6
                // streetViewControl: false,
                // zoomControl: true
            });

            markerA = new google.maps.Marker({
                map: map4
            });
            markerB = new google.maps.Marker({
                map: map4
            });
            // var mark1 = new google.maps.Marker({
            //     position: {
            //         lat,
            //         lng
            //     },
            //     map: map4,
            //     title: addres,
            // });

            infoWindow = new google.maps.InfoWindow;
            var directionsService = new google.maps.DirectionsService();
            var directionsRenderer1 = new google.maps.DirectionsRenderer({
                map: map4,
                suppressMarkers: true
            });
            var directionsRenderer2 = new google.maps.DirectionsRenderer({
                map: map4,
                suppressMarkers: true,
                polylineOptions: {
                    strokeColor: "gray"
                }
            });
            var pos = {
                lat: lat,
                lng: lng
            };

            map4.setCenter(pos);
            map4.setZoom(15);
            infoWindow.setContent('Your Location');
            markerA.setPosition(pos);
            markerA.setVisible(true);
            markerA.setLabel('A');
            markerA.addListener('click', function() {
                infoWindow.open(map4, markerA);
            });

            const input1 = document.getElementById("postcode2");

            // alert(input);
            var options1 = {
                componentRestrictions: {
                    country: 'uk'
                } //Turkey only
            };
            const searchBox1 = new google.maps.places.Autocomplete(input1, options1);
            var service1 = new google.maps.places.AutocompleteService()
            var placesService1 = new google.maps.places.PlacesService(map4)
            input1.addEventListener("change", (e) => {
                // console.log(e.target.value);
                service1.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);
                        $("#lat2").val(data.geometry.location.lat);
                        $("#lng2").val(data.geometry.location.lng);
                        $("#add2").val(data.formatted_address);
                        $('#find-button').prop('disabled', false);
                        //   $("input:text").val("Glenn Quagmire");
                        //   document.getElementById('latitude').value=lat;
                        //   document.getElementById('longitude').value=lon;

                    } else {
                        $('#find-button').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)
            })
            searchBox1.addListener("place_changed", (e) => {
                // console.log(e, this);
                const places1 = searchBox1.getPlace();

                if (places1.length == 0) {
                    return;
                }
                console.log(places1)
                console.log(places1.geometry.location.lat(), places1.geometry.location.lng())
                $("#lat2").val(places1.geometry.location.lat());
                $("#lng2").val(places1.geometry.location.lng());

                $('#find-button').prop('disabled', false);
            })

            $("#find-button").click(function() {
                var x = document.getElementById("directions");
                if (x.style.display === "none") {
                    x.style.display = "block";
                }
                var lat2 = $("#lat2").val();
                var lng2 = $("#lng2").val();
                var add2 = $("#add2").val();

                console.log(lat2, lng2, 'gfhgghg')
                var new_pos = {
                    lat: Number(lat2),
                    lng: Number(lng2)
                };

                markerB.setPosition(new_pos);
                markerB.setVisible(true);
                markerB.setLabel('B');
                markerB.setDraggable(true);

                // google.maps.event.addListener(markerB, 'dragend', function(evt) {

                var drag_pos1 = {
                    lat: Number(lat2),
                    lng: Number(lng2)
                };
                console.log(drag_pos1);

                directionsService.route({
                        origin: pos,
                        destination: drag_pos1,
                        travelMode: 'DRIVING',
                        provideRouteAlternatives: true
                    },
                    function(response, status) {
                        console.log(response);
                        console.log(status);

                        if (status === 'OK') {
                            var direction_detail = '';
                            for (var i = 0, len = response.routes.length; i < len; i++) {
                                if (i === 0) {
                                    direction_detail += "<p>";
                                    for(var j = 0, le = response.routes[0].legs[0].steps.length; j < le; j++){
                                        direction_detail += `${response.routes[0].legs[0].steps[j].instructions} ${response.routes[0].legs[0].steps[j].distance.text}`;
                                        direction_detail += "<br>";
                                    }
                                    direction_detail += "</p>";
                                    console.log(direction_detail);
                                    $("#directionsPanel").html(direction_detail);
                                    directionsRenderer1.setDirections(response);
                                    directionsRenderer1.setRouteIndex(i);

                                } else {

                                    directionsRenderer2.setDirections(response);
                                    directionsRenderer2.setRouteIndex(i);
                                }
                            }
                            console.log(response);
                        } else {
                            window.alert('Directions request failed due to ' + status);
                        }
                    });
                // });

                // var mark2 = new google.maps.Marker({
                //     position: {
                //         'lat':Number(lat2),
                //         'lng':Number(lng2)
                //     },
                //     map: map4,
                //     title: add2,
                // });
            });

            // {
            // origin: 'Chicago, IL',
            // destination: 'Los Angeles, CA',
            // waypoints: [
            //     {
            //     location: 'Joplin, MO',
            //     stopover: false
            //     },{
            //     location: 'Oklahoma City, OK',
            //     stopover: true
            //     }],
            // provideRouteAlternatives: false,
            // travelMode: 'DRIVING',
            // drivingOptions: {
            //     departureTime: new Date(/* now, or future date */),
            //     trafficModel: 'pessimistic'
            // },
            // unitSystem: google.maps.UnitSystem.IMPERIAL
            // }
            // $("#")
            // 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);
            // })
        }

        // initMap3()
        //  directions
    </script>
@endpush