@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;
        @if($store_array[0]->StoreBanner == null)
            background-image: url("{{ config('site_config.uploads') . 'teamstore/store-banner-dark.png' }}");
        @else
            background-image: url("{{ config('site_config.uploads') . 'teamstore/' . $store_array[0]->ImageFolder . '/' . $store_array[0]->StoreBanner }}");
        @endif
        background-color: #f3f3f3;
        background-position: center;
        background-size: cover;
        width: 100%;
        height: 128px;
    }
    
    .store-name{
        
        background: rgba(255, 255, 255, 0.9);
        position: absolute;
        padding: 10px;
        min-width: 270px;

    }

    @media (min-width: 200px) {
        .jumbotron { height: 50px; }
    }
    
    @media (min-width: 400px) {
        .jumbotron { height: 57px; }
    }

    @media (min-width: 768px) {
        .jumbotron { height: 100px; }
    }

    @media (min-width: 992px) {
        .jumbotron { height: 128px; }
    }

    .product-name-holder{
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
</style>

<div class="container">
    <div class="row">
        <div class="col-md-12">
            <div class="jumbotron">
                @if($store_array[0]->StoreBanner == null)
                <div class="store-name">
                    <h4>
                        <img src="https://img.icons8.com/ios/40/000000/online-store-filled.png"> 
                        {{ $store_array[0]->StoreName }}<br>
                    </h4>
                    Official Team Store
                </div>
                @endif
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <h2>FEATURED PRODUCTS</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">
                        <a href="{{ url('teamstore') }}/{{ $store_array[0]->StoreUrl }}/product/{{ $product->ProductURL }}">
                            <img style="height: 201.84px;" src="{{ config('site_config.prod_private_server_ip')  }}/images/{{ $filename }}" alt="{{ $product->ProductName }}" >
                        </a>
                        <h4 class="text-center product-name-holder">{{ $product->ProductName }}</h4>
                        <hr class="line">
                        <div class="row">
                            <div class="col-md-7 col-sm-7">
                                <p class="price">{{ $product->ProductPrice }} <small style="font-size: 15px;"> {{ $store_array[0]->StoreCurrency }}</small></p>
                            </div>
                            <div class="col-md-5 col-sm-5">
                                <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