@extends('index')
@section('title', Helper::getSiteTitle(isset($title) && !empty($title) ? $title : 'Store Details'))

@section('content')
<section class="hours-section">
    <div class="container">
        <h2>Hours & Store Details</h2>
        <div class="hours-content">
            <div class="store-maps" id="map"></div>
            <div class="hours-col">
                <div class="store-hours">
                    <h4>Store Hours</h4>
                    <div class="singleTime">
                        <span style="color:#080808"><strong>Monday - Saturday</strong></span>
                        <span>9:00 AM - 9:00 PM</span>
                    </div>
                    <div class="singleTime">
                        <span style="color:#080808"><strong>Sunday</strong></span>
                        <span>9:00 AM - 9:00 PM</span>
                    </div>
                </div>
                <div class="store-hours">
                    <h4>Curbside Pickup Hours</h4>
                    <div class="singleTime">
                        <span style="color:#080808"><strong>Monday - Saturday</strong></span>
                        <span>8:00 AM - 9:30 PM</span>
                    </div>
                    <div class="singleTime">
                        <span style="color:#080808"><strong>Sunday</strong></span>
                        <span>9:00 AM - 8:30 PM</span>
                    </div>
                </div>
                {{--<div class="store-hours">
                    <h4>Delivery Hours</h4>
                    <div class="singleTime">
                        <span style="color:#080808"><strong>Monday - Saturday</strong></span>
                        <span>10:00 AM - 9:00 PM</span>
                    </div>
                    <div class="singleTime">
                        <span style="color:#080808"><strong>Sunday</strong></span>
                        <span>10:00 AM - 8:00 PM</span>
                    </div>
                </div>
                --}}
            </div>
            
            {{--
            <div class="store-tabs">
                <div class="storeTabs">
                    <div class="single-feature selection">
                        <span>Palm Desert</span>
                        <div class="hours_list">
                            <p>78010 Country Club Dr Palm Desert, </p>
                            <a href="https://goo.gl/maps/KhXx6WoaeBmSHbh68" target="_blank" class="btn cta-primary" style="color: #6f8c5e;">Directions</a>
                        </div>
                    </div>
                    <div class="single-feature selection">
                        <span>Cathedral City</span>
                        <div class="hours_list">
                            <p>68945 Vista Chino Cathedral City, CA</p>
                            <a href="https://goo.gl/maps/2UP6tFXARptba8gz6" target="_blank" class="btn cta-primary" style="color: #6f8c5e;">Directions</a>
                        </div>
                    </div>
                    
                    <div class="single-feature selection">
                        <span>Hollywood</span>
                        <div class="hours_list">
                            <p>4439 Sunset Blvd, Los Angeles, CA 90027</p>
                            <a href="https://goo.gl/maps/4wzMWCaPRCFY2t486" target="_blank" class="btn cta-primary" style="color: #6f8c5e;">Directions</a>
                        </div>
                    </div>
                    <div class="single-feature selection no-selection">
                        <span>Crenshaw (Coming Soon)</span>
                    </div>
                    <div class="single-feature selection no-selection">
                        <span>Delivery</span>
                    </div>
                    
                </div>
            </div>
            --}}
        </div>
    </div>
</section>
{{--
<section class="hours-section business-prodile-sections" style="margin-top: 30px;">
    <div class="container">
        <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3317.084879072551!2d-116.30568348442254!3d33.75847244060044!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x80dafb1f0547e7f5%3A0x861572580ea068e0!2sLibra%20-%20Palm%20Desert!5e0!3m2!1sen!2s!4v1653470350936!5m2!1sen!2s" width="400" height="400" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
        <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3313.744466285826!2d-116.459578!3d33.844699999999996!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x80db1dae14abcc05%3A0x9debea110ef0649c!2sLibra%20-%20Cathedral%20City!5e0!3m2!1sen!2s!4v1653470061202!5m2!1sen!2s" width="400" height="400" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
        <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3303.8982761247876!2d-118.2859993!3d34.0977463!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x80c2c7b4f0533851%3A0x443f64da54a22df2!2sLibra%20Cannabis%20Co!5e0!3m2!1sen!2s!4v1653470224960!5m2!1sen!2s" width="400" height="400" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
    </div>
</section>
--}}
@endsection

@section('js-lib')
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBIL6CCktDbmvAEU30MHsOah1VrYJ4-D68&callback=initMap&libraries=places"></script>
@endsection

@section('css-lib')

<style type="text/css">
    #map {
        width: 100%;
        height: 500px;
    }
    .store-maps .infowindow-container{
        max-width: 260px;
    }
    .store-maps .gm-style-iw-tc {
        display: none;
    }
    .store-maps .gm-style-iw {
        padding: 0;
        max-height: 400px !important;
        max-width: none !important;
        width: 260px;
    }
    .store-maps .gm-style-iw-d {
        overflow: auto !important;
        max-height: 400px !important;
    }
    .store-maps .infowindow-container .inner {
        padding: 15px;
    }
    .store-maps .owl-carousel .owl-stage-outer {
        height: 160px !important;
    }
    .store-maps .owl-carousel .owl-item {
        width: 260px !important;
    }
    .store-maps .owl-carousel .owl-item img {
        width: 100%;
        height: 160px !important;
        object-fit: cover;
        object-position: center;
    }
    .store-maps .owl-nav {
        right: 0;
        top: 34%;
    }
    .store-maps .owl-carousel .owl-nav button.owl-prev{
        position: absolute;
        right: 245px;
    }
    .store-maps .owl-carousel .owl-nav button.owl-next{
        position: absolute;
        right: 5px;
    }
    .store-maps .owl-carousel .owl-nav button.owl-prev,
    .store-maps .owl-carousel .owl-nav button.owl-next{
        font-size: 30px;
        color: #fff;
        text-shadow: 1px 0 #000, -1px 0 #000, 0 1px #000, 0 -1px #000, 1px 1px #000, -1px -1px #000, 1px -1px #000, -1px 1px #000;
    }
    .store-maps .map-photo-quantity{
        position: absolute;
        top: 133px;
        right: 5px;
        z-index: 999;
        color: #fff;
        background: rgba(0,0,0,0.7);
        padding: 4px 8px;
        border-radius: 5px;
    }
    .store-maps .map-photo-attributions{
        position: absolute;
        bottom: 5px;
        left: 5px;
        background: rgba(255,255,255, 0.7);
        font-size: 10px;
        padding: 0 4px;
        border-radius: 5px;
        max-width: 160px;
        color: #000;
    }
    .store-maps .map-photo-attributions a{
        display: inline;
    }
    .store-maps .place-short-address{
        font-size: 15px;
        font-weight: bold;
        color: #333333;
    }
    .store-maps .place-full-address a{
        font-size: 10px;
        text-decoration: underline;
        color: #666666;
    }
    .store-maps .place-description{
        margin-top: 14px;
    }
    .store-maps .place-shop-now{
        margin-top: 14px;
    }
    .store-maps .place-shop-now a{
        text-decoration: underline;
    }
    .store-maps .place-directions{
        margin-top: 28px;
    }
    .store-maps .place-directions a{
        text-align: center;
        font-size: 13px;
        width: 100%;
        border: 1px solid #DDD;
        border-radius: 5px;
        padding: 4px;
    }
    .store-maps .place-directions a:hover{
        border: 1px solid #333;
    }
    .hours-col {
        display: flex;
        flex-direction: row;
        width: 100% !important;
        justify-content: center;
        margin-top: 30px;
    }
    .hours-col .store-hours:last-child {
        margin-left: 100px;
    }
    @media (max-width: 522px){
        .hours-col {
            flex-direction: column;
            text-align: center;
        }
        .hours-col .store-hours:last-child {
            margin-left: 0px;
        }   
    }
    @media (max-width: 920px){
        .store-maps .place-description{
            margin-bottom: 18px;
        }
        .store-maps .place-shop-now,
        .store-maps .place-shop-now a,
        .store-maps .place-directions,
        .store-maps .place-directions a {
            margin: 0;
            display: inline;
        }
        .store-maps .place-directions {
            float: right;
        }
    }
</style>

<meta name="map-center-lat" content="34.235">
<meta name="map-center-lng" content="-116.3">
<meta name="map-center-zoom" content="9">
<meta name="map-center-lat-mobile" content="34.5">
<meta name="map-center-lng-mobile" content="-116.3">
<meta name="map-center-zoom-mobile" content="8">
<meta name="map-center-lat-mobile-xs" content="35.6">
<meta name="map-center-lng-mobile-xs" content="-116.3">
<meta name="map-center-zoom-mobile-xs" content="7">

<meta name="map-place" data-pid="ChIJ9edHBR_72oAR4GigDlhyFYY" data-title="Libra Shop Store At Palm Desert" data-is-open="true">
<meta name="map-place" data-pid="ChIJBcyrFK4d24ARnGTwDhHq650" data-title="Libra Shop Store At Cathedral City">

<meta name="map-pin-url" content="{{ url('images/libra-cannabis-pin.png') }}">
<meta name="map-pin-url-mobile" content="{{ url('images/libra-cannabis-pin.png') }}">
@endsection