@extends('layouts.site')
@section('content')

    <!-- Slider -->
    <section class="section-slide">
        <div class="wrap-slick1 rs2-slick1">
            <div class="slick1">
                <div class="item-slick1 bg-overlay1" style="background-image: url('{{ asset('site/images/main/slide-1.jpg') }}');" data-thumb="{{ asset('site/images/main/slide-1.jpg') }}" data-caption="HB Sports">
                    <div class="container h-full">
                        <div class="flex-col-c-m h-full p-t-100 p-b-60 respon5">
                            <div class="layer-slick1 animated visible-false scene" data-appear="fadeInDown" data-delay="0">
                                <img src="{{ asset('site/images/main/HBlogo.png') }}" class="rotate-img">
                            </div>

                            <div class="layer-slick1 animated visible-false" data-appear="fadeInUp" data-delay="800">
                                <h4 class="ltext-202 txt-center cl0 p-t-22 p-b-40 respon1">
                                    HB SPORTS FOR THE REAL HEROES
                                </h4>
                            </div>

                            <div class="layer-slick1 animated visible-false" data-appear="zoomIn" data-delay="1600">
                                <a href="{{url('products')}}" class="flex-c-m stext-101 cl0 size-101 bg1 bor1 hov-btn2 p-lr-15 trans-04">
                                    Shop Now
                                </a>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="item-slick1 bg-overlay1" style="background-image: url('{{ asset('site/images/main/slide-2.jpg') }}');" data-thumb="{{ asset('site/images/main/slide-2.jpg') }}" data-caption="HB Sports">
                    <div class="container h-full">
                        <div class="flex-col-c-m h-full p-t-100 p-b-60 respon5">
                            <div class="layer-slick1 animated visible-false scene" data-appear="fadeInDown" data-delay="0">
                                <img src="{{ asset('site/images/main/HBlogo.png') }}" class="rotate-img">
                            </div>

                            <div class="layer-slick1 animated visible-false" data-appear="fadeInUp" data-delay="800">
                                <h4 class="ltext-202 txt-center cl0 p-t-22 p-b-40 respon1">
                                    HB SPORTS FOR THE REAL HEROES
                                </h4>
                            </div>

                            <div class="layer-slick1 animated visible-false" data-appear="zoomIn" data-delay="1600">
                                <a href="{{url('products')}}" class="flex-c-m stext-101 cl0 size-101 bg1 bor1 hov-btn2 p-lr-15 trans-04">
                                    Shop Now
                                </a>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="item-slick1 bg-overlay1" style="background-image: url('{{ asset('site/images/main/slide-3.jpg') }}');" data-thumb="{{ asset('site/images/main/slide-3.jpg') }}" data-caption="HB Sports">
                    <div class="container h-full">
                        <div class="flex-col-c-m h-full p-t-100 p-b-60 respon5">
                            <!--<div class="layer-slick1 animated visible-false" data-appear="rotateInDownLeft" data-delay="0">
								<span class="ltext-202 txt-center cl0 respon2">
									HB Sports for the real heroes
								</span>
                            </div>-->

                            <div class="layer-slick1 animated visible-false scene" data-appear="fadeInDown" data-delay="0">
                                <img src="{{ asset('site/images/main/HBlogo.png') }}" class="rotate-img">
                            </div>
                            
                            <div class="layer-slick1 animated visible-false" data-appear="fadeInUp" data-delay="800">
                                <h2 class="ltext-202 txt-center cl0 p-t-22 p-b-40 respon1">
                                    HB SPORTS FOR THE REAL HEROES
                                </h2>
                            </div>

                            <div class="layer-slick1 animated visible-false" data-appear="zoomIn" data-delay="1600">
                                <a href="{{url('products')}}" class="flex-c-m stext-101 cl0 size-101 bg1 bor1 hov-btn2 p-lr-15 trans-04">
                                    Shop Now
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="wrap-slick1-dots p-lr-10"></div>
        </div>
    </section>


    <!-- Banner -->
    <div class="sec-banner bg0 p-t-95 p-b-55">
        <div class="container">
            <div class="row">
                <div class="col-md-6 p-b-30 m-lr-auto">
                    <!-- Block1 -->
                    <div class="block1 wrap-pic-w">
                        <img src="{{ asset('site/images/main/banner-1.jpg') }}" alt="IMG-BANNER">

                        <a href="{{url('products')}}" class="block1-txt ab-t-l s-full flex-col-l-sb p-lr-38 p-tb-34 trans-03 respon3">
                            <div class="block1-txt-child2 p-b-4 trans-05">
								<span class="block1-name ltext-102 trans-04 p-b-8">
									Sports Items
								</span>
                            </div>

                            <div class="block1-txt-child2 p-b-4 trans-05">
                                <span class="block1-info stext-102 trans-04">
									New Trend
								</span>
                            </div>

                            <div class="block1-txt-child2 p-b-4 trans-05">
                                <div class="block1-link stext-101 cl0 trans-09">
                                    Shop Now
                                </div>
                            </div>
                        </a>
                    </div>
                </div>

                <div class="col-md-6 p-b-30 m-lr-auto">
                    <!-- Block1 -->
                    <div class="block1 wrap-pic-w">
                        <img src="{{ asset('site/images/main/banner-2.jpg') }}" alt="IMG-BANNER">

                        <a href="{{url('products')}}" class="block1-txt ab-t-l s-full flex-col-l-sb p-lr-38 p-tb-34 trans-03 respon3">
                            <div class="block1-txt-child2 p-b-4 trans-05">
								<span class="block1-name ltext-102 trans-04 p-b-8">
									Sports Items
								</span>
                            </div>

                            <div class="block1-txt-child2 p-b-4 trans-05">
                                <span class="block1-info stext-102 trans-04">
									New Trend
								</span>
                            </div>

                            <div class="block1-txt-child2 p-b-4 trans-05">
                                <div class="block1-link stext-101 cl0 trans-09">
                                    Shop Now
                                </div>
                            </div>
                        </a>
                    </div>
                </div>

                <div class="col-md-6 col-lg-4 p-b-30 m-lr-auto">
                    <!-- Block1 -->
                    <div class="block1 wrap-pic-w">
                        <img src="{{ asset('site/images/main/banner-3.png') }}" alt="IMG-BANNER">

                        <a href="{{url('product_category/1')}}" class="block1-txt ab-t-l s-full flex-col-l-sb p-lr-38 p-tb-34 trans-03 respon3">
                            <div class="block1-txt-child1 flex-col-l">
								<span class="block1-name ltext-102 trans-04 p-b-8">
									Bats
								</span>

                                <span class="block1-info stext-102 trans-04">
									New Releases
								</span>
                            </div>

                            <div class="block1-txt-child2 p-b-4 trans-05">
                                <div class="block1-link stext-101 cl0 trans-09">
                                    Shop Now
                                </div>
                            </div>
                        </a>
                    </div>
                </div>

                <div class="col-md-6 col-lg-4 p-b-30 m-lr-auto">
                    <!-- Block1 -->
                    <div class="block1 wrap-pic-w">
                        <img src="{{ asset('site/images/main/banner-4.png') }}" alt="IMG-BANNER">

                        <a href="{{url('product_category/36')}}" class="block1-txt ab-t-l s-full flex-col-l-sb p-lr-38 p-tb-34 trans-03 respon3">
                            <div class="block1-txt-child1 flex-col-l">
								<span class="block1-name ltext-102 trans-04 p-b-8">
									Bags
								</span>

                                <span class="block1-info stext-102 trans-04">
									New Releases
								</span>
                            </div>

                            <div class="block1-txt-child2 p-b-4 trans-05">
                                <div class="block1-link stext-101 cl0 trans-09">
                                    Shop Now
                                </div>
                            </div>
                        </a>
                    </div>
                </div>

                <div class="col-md-6 col-lg-4 p-b-30 m-lr-auto">
                    <!-- Block1 -->
                    <div class="block1 wrap-pic-w">
                        <img src="{{ asset('site/images/main/banner-5.png') }}" alt="IMG-BANNER">

                        <a href="{{url('products')}}" class="block1-txt ab-t-l s-full flex-col-l-sb p-lr-38 p-tb-34 trans-03 respon3">
                            <div class="block1-txt-child1 flex-col-l">
								<span class="block1-name ltext-102 trans-04 p-b-8">
									All Products
								</span>

                                <span class="block1-info stext-102 trans-04">
									Accessories
								</span>
                            </div>

                            <div class="block1-txt-child2 p-b-4 trans-05">
                                <div class="block1-link stext-101 cl0 trans-09">
                                    Shop Now
                                </div>
                            </div>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <!-- Product -->
    <section class="sec-product bg0 p-t-100 p-b-50">
        <div class="container">
            <div class="p-b-32">
                <h3 class="ltext-105 cl5 txt-center respon1">
                    Store Overview
                </h3>
            </div>

            <!-- Tab01 -->
            <div class="tab01">
                <!-- Nav tabs -->
                <ul class="nav nav-tabs" role="tablist">
                    <li class="nav-item p-b-10">
                        <a class="nav-link active" data-toggle="tab" href="#senior" role="tab">Senior</a>
                    </li>

                    <li class="nav-item p-b-10">
                        <a class="nav-link" data-toggle="tab" href="#junior" role="tab">Junior</a>
                    </li>
                </ul>

                <!-- Tab panes -->
                <div class="tab-content p-t-50">
                    
                    <!-- - -->
                    <div class="tab-pane fade show active" id="senior" role="tabpanel">
                        <!-- Slide2 -->
                        <div class="wrap-slick2">
                            <div class="slick2">
                                @foreach($seniorCategory as $items)
                                    @foreach($items['products'] as $products)
                                        @foreach($products['product_items'] as $product_item)
                                            <div class="item-slick2 p-l-15 p-r-15 p-t-15 p-b-15">
                                                <!-- Block2 -->
                                                <div class="block2">
                                                    <div class="block2-pic hov-img0">
                                                        @if(array_key_exists(0,$product_item['product_item_image']))
                                                            <img src="{{ url('/hb-shared-images/'.$product_item['product_id'].'/' . $product_item['product_item_image'][0]['image']) }}" alt="IMG-PRODUCT">
                                                        @endif

                                                        <a href="#" class="block2-btn flex-c-m stext-103 cl2 size-102 bg0 bor2 hov-btn1 p-lr-15 trans-04 js-show-modal1"
                                                           data-id="{{ $product_item['id'] }}"
                                                           data-cat-name="{{ $products['name'] }}"
                                                           data-name="{{ $product_item['item_name'] }}"
                                                           data-price="{{ $product_item['price'] }}"
                                                           data-description="{{ $product_item['short_description'] }}"
                                                           data-asset-path="{{ url('/hb-shared-images/'.$product_item['product_id']) }}"
                                                           data-images='@json($product_item['product_item_image'])'>Quick View
                                                        </a>
                                                    </div>

                                                    <div class="block2-txt flex-w flex-t p-t-14">
                                                        <div class="block2-txt-child1 flex-col-l ">
                                                            <a href="{{url('product_detail/' . $product_item['product_id'] . '/' . $product_item['id'])}}" class="stext-104 cl4 hov-cl1 trans-04 js-name-b2 p-b-6">
                                                                {{$product_item['item_name']}}
                                                            </a>

                                                            <span class="stext-105 cl3">
                                                                <!--{{$product_item['price']}}-->
                                                            </span>
                                                        </div>

                                                        <div class="block2-txt-child2 flex-r p-t-3">
                                                            <a href="#" class="btn-addwish-b2 dis-block pos-relative js-addwish-b2">
                                                                <img class="icon-heart1 dis-block trans-04" src="{{ asset('site/images/icons/icon-heart-01.png') }}" alt="ICON">
                                                                <img class="icon-heart2 dis-block trans-04 ab-t-l" src="{{ asset('site/images/icons/icon-heart-02.png') }}" alt="ICON">
                                                            </a>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        @endforeach
                                    @endforeach
                                @endforeach
                            </div>
                        </div>
                    </div>

                    <!-- - -->
                    <div class="tab-pane fade" id="junior" role="tabpanel">
                        <!-- Slide2 -->
                        <div class="wrap-slick2">
                            <div class="slick2">
                                @foreach($juniorCategory as $items)
                                    @foreach($items['products'] as $products)
                                        @foreach($products['product_items'] as $product_item)
                                            <div class="item-slick2 p-l-15 p-r-15 p-t-15 p-b-15">
                                                <!-- Block2 -->
                                                <div class="block2">
                                                    <div class="block2-pic hov-img0">
                                                        @if(array_key_exists(0,$product_item['product_item_image']))
                                                            <img src="{{ url('/hb-shared-images/'.$product_item['product_id'].'/' . $product_item['product_item_image'][0]['image']) }}" alt="IMG-PRODUCT">
                                                        @endif

                                                        <a href="#" class="block2-btn flex-c-m stext-103 cl2 size-102 bg0 bor2 hov-btn1 p-lr-15 trans-04 js-show-modal1"
                                                           data-id="{{ $product_item['id'] }}"
                                                           data-cat-name="{{ $products['name'] }}"
                                                           data-name="{{ $product_item['item_name'] }}"
                                                           data-price="{{ $product_item['price'] }}"
                                                           data-description="{{ $product_item['short_description'] }}"
                                                           data-asset-path="{{ url('/hb-shared-images/'.$product_item['product_id']) }}"
                                                           data-images='@json($product_item['product_item_image'])'>Quick View
                                                        </a>
                                                    </div>

                                                    <div class="block2-txt flex-w flex-t p-t-14">
                                                        <div class="block2-txt-child1 flex-col-l ">
                                                            <a href="{{url('product_detail/' . $product_item['product_id'] . '/' . $product_item['id'])}}" class="stext-104 cl4 hov-cl1 trans-04 js-name-b2 p-b-6">
                                                                {{$product_item['item_name']}}
                                                            </a>

                                                            <span class="stext-105 cl3">
                                                                {{$product_item['item_name']}}
                                                            </span>
                                                        </div>

                                                        <div class="block2-txt-child2 flex-r p-t-3">
                                                            <a href="#" class="btn-addwish-b2 dis-block pos-relative js-addwish-b2">
                                                                <img class="icon-heart1 dis-block trans-04" src="{{ asset('site/images/icons/icon-heart-01.png') }}" alt="ICON">
                                                                <img class="icon-heart2 dis-block trans-04 ab-t-l" src="{{ asset('site/images/icons/icon-heart-02.png') }}" alt="ICON">
                                                            </a>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        @endforeach
                                    @endforeach
                                @endforeach
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </section>


    <!-- Blog -->
    <section class="sec-blog bg0 p-t-60 p-b-90">
        <div class="container">
            <div class="p-b-66">
                <h3 class="ltext-105 cl5 txt-center respon1">
                    Our Blogs
                </h3>
            </div>

            <div class="row">
                @foreach($blogs as $blog)
                    <div class="col-sm-6 col-md-4 p-b-40">
                        <div class="blog-item">
                            <div class="hov-img0">
                                <a href="{{url('blog')}}">
                                    <img src="{{ url('/hb-shared-images/blog/'. $blog->image) }}" alt="IMG-BLOG">
                                </a>
                            </div>

                            <div class="p-t-15">
                                <div class="stext-107 flex-w p-b-14">
                                    <span class="m-r-3">
                                        <span class="cl4">
                                            By
                                        </span>

                                        <span class="cl5">
                                            {{$blog->created_by}}
                                        </span>
                                    </span>

                                    <span>
                                        <span class="cl4">
                                            on
                                        </span>

                                        <span class="cl5">
                                            {{ \Carbon\Carbon::parse($blog->created_at)->format('F d, Y') }}
                                        </span>
                                    </span>
                                </div>

                                <h4 class="p-b-12">
                                    <a href="{{url('blog')}}" class="mtext-101 cl2 hov-cl1 trans-04">
                                        {{$blog->title}}
                                    </a>
                                </h4>

                                {{--<p class="stext-108 cl6">
                                    Duis ut velit gravida nibh bibendum commodo. Suspendisse pellentesque mattis augue id euismod. Interdum et male-suada fames
                                </p>--}}
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </section>

@endsection