@extends('teamstore-layout.main')
@section('content')
<style>
    h2 {
        width: 100%;
        margin: 0;
        padding: 0;
        text-align: center;
        margin-top: 40px;
        margin-bottom: 40px;
        
    }
    /* h2:after {
        display: inline-block;
        margin: 0 0 8px 20px;
        height: 3px;
        content: " ";
        text-shadow: none;
        background-color: #000;
        width: 140px;
    }
    h2:before {
        display: inline-block;
        margin: 0 20px 8px 0;
        height: 3px;
        content: " ";
        text-shadow: none;
        background-color: #000;
        width: 140px;
    } */
    h4{
        font-weight: 600;
    }
    p{
        font-size: 12px;
        margin-top: 5px;
    }
    .price{
        font-size: 25px;
        margin: 0 auto;
        color: #333;
    }
    .right{
        float:right;
        border-bottom: 2px solid #4B8E4B;
    }
    .thumbnail{
        /* opacity:0.70; */
        -webkit-transition: all 0.5s; 
        transition: all 0.5s;
    }
    .thumbnail:hover{
        opacity:1.00;
        box-shadow: 0px 0px 10px #4bc6ff;
    }
    .line{
        margin-bottom: 5px;
    }
    .thumbnail>img{
        height:201.84px;
    }
    @media screen and (max-width: 770px) {
        .right{
            float:left;
            width: 100%;
        }
    }
    @media screen and (min-width: 768px){
        .container .jumbotron, .container-fluid .jumbotron {
            padding-right: 15px;
            padding-left: 15px;
        }
    }
    .container .jumbotron, .container-fluid .jumbotron{
        border-radius: 0px;
    }

 
    .jumbotron {
        padding-top: 20px;
        padding-bottom: 20px;
        background-image: url("{{asset('public/images/teamstore') . '/' . $store_array[0]->StoreUrl . '/' . $store_array[0]->StoreBanner }}");
        background-color: #f3f3f3;
        height: 128px;
    }
    
    .store-name{
        
        background-color: #ffffff;
        position: absolute;
        padding: 10px;

    }
</style>

<div class="container">
    <div class="row">
        <div class="col-md-12">
            <div class="jumbotron">
                <!-- <div class="store-name">
                    <h4><img src="https://img.icons8.com/ios/40/000000/online-store-filled.png"> {{ $store_array[0]->StoreName }}</h4>
                </div> -->
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <h2>FEATURED PRODUCT</h2>
        </div>
    </div>
    <div class="row">
        <!-- BEGIN PRODUCTS -->
       
        @foreach($product_array as $i => $product)
            @if($product->PrivacyStatus == "public")
                @foreach($thumbnails as $t => $thumb)
                    @if($thumb['product_id'] == $product->Id)
                        @define $storeFolder = $thumb['folder']
                        @define $filename = $thumb['thumb']
                    @endif
                @endforeach
            
                <div class="col-md-3 col-sm-6">
                    <span class="thumbnail">
                        <img src="http://{{ config('site_config.prod_private_server_ip')  }}/images/{{ $filename }}" alt="{{ $product->ProductName }}" >
                        <h4>{{ $product->ProductName }}</h4>
                        <!-- (w/ Shorts) -->
                        <!-- <div class="ratings">
                            <span class="glyphicon glyphicon-star"></span>
                            <span class="glyphicon glyphicon-star"></span>
                            <span class="glyphicon glyphicon-star"></span>
                            <span class="glyphicon glyphicon-star"></span>
                            <span class="glyphicon glyphicon-star-empty"></span>
                        </div> -->
                        
                        <!-- <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p> -->
                        <hr class="line">
                        <div class="row">
                            <div class="col-md-6 col-sm-6">
                                <p class="price">$ {{ $product->ProductPrice }}</p>
                            </div>
                            <div class="col-md-6 col-sm-6">
                                <a href="{{ url('teamstore') }}/{{ $store_array[0]->StoreUrl }}/product/{{ $product->ProductURL }}" class="btn btn-success right" > View Details</a>
                            </div>
                            
                        </div>
                    </span>
                </div>
            @endif
        @endforeach
        <!-- END PRODUCTS -->
        
    </div>
</div> <!-- cotainer -->
@endsection