@extends('website.layouts.app')

@section('content')


    @include('website.layouts.crumb')

    <!-- product tab start -->
    <div class="product-tab bg-white pt-80 pb-50">
        <div class="container">
            <div class="row">

                @include('website.layouts.sidebar')



                <div class="col-lg-9 mb-30">
                    <div class="grid-nav-wraper bg-lighten2 mb-30">
                        <div class="row align-items-center">
                            <div class="col-12 col-md-6 mb-3 mb-md-0">
                                <nav class="shop-grid-nav">
                                    <ul class="nav nav-pills align-items-center" id="pills-tab" role="tablist">
                                        <li class="nav-item">
                                            <a class="nav-link active" id="pills-home-tab" data-toggle="pill"
                                                href="#pills-home" role="tab" aria-controls="pills-home"
                                                aria-selected="true">
                                                <i class="fa fa-th"></i>

                                            </a>
                                        </li>
                                        <li class="nav-item mr-0">
                                            <a class="nav-link" id="pills-profile-tab" data-toggle="pill"
                                                href="#pills-profile" role="tab" aria-controls="pills-profile"
                                                aria-selected="false"><i class="fa fa-list"></i></a>
                                        </li>
                                    </ul>
                                </nav>
                            </div>
                            {{-- <div class="col-12 col-md-6 position-relative">
                                <div class="shop-grid-button d-flex align-items-center">
                                    <span class="sort-by">Sort by:</span>
                                    <button class="btn-dropdown rounded d-flex justify-content-between" type="button"
                                        id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true"
                                        aria-expanded="false">
                                        Relevance <span class="ion-android-arrow-dropdown"></span>
                                    </button>
                                    <div class="dropdown-menu shop-grid-menu" aria-labelledby="dropdownMenuButton">
                                        <a class="dropdown-item" href="#">Relevance</a>
                                        <a class="dropdown-item" href="#"> Name, A to Z</a>
                                        <a class="dropdown-item" href="#"> Name, Z to A</a>
                                        <a class="dropdown-item" href="#"> Price, low to high</a>
                                        <a class="dropdown-item" href="#"> Price, high to low</a>
                                    </div>
                                </div>
                            </div> --}}
                        </div>
                    </div>
                    @if (count($products) > 0)

                        <!-- product-tab-nav end -->
                        <div class="tab-content" id="pills-tabContent">
                            <!-- first tab-pane -->
                            <div class="tab-pane fade show active" id="pills-home" role="tabpanel"
                                aria-labelledby="pills-home-tab">
                                <div class="row grid-view theme1">

                                    @foreach ($products as $product)
                                        <div class="col-sm-6 col-lg-4 col-xl-3 mb-30">
                                            <div class="card product-card">
                                                <div class="card-body p-0">
                                                    <div class="media flex-column">
                                                        <div class="product-thumbnail position-relative">
                                                            {{-- <span
                                                                class="badge badge-danger top-right">New</span>
                                                            --}}
                                                            <span
                                                                class="badge badge-success top-left">{{ $product->offer() }}</span>
                                                            <a href="{{ $product->url }}">
                                                                <img class="first-img"
                                                                    src="{{ getImage('products', $product->image) }}"
                                                                    alt="thumbnail">
                                                            </a>
                                                            <!-- product links -->
                                                            <ul class="product-links d-flex justify-content-center">
                                                                <li>
                                                                    <a href="{{ route('set.Wishlist', $product->id) }}">
                                                                        <span data-toggle="tooltip" data-placement="bottom"
                                                                            title="add to wishlist" class="icon-heart">
                                                                        </span>
                                                                    </a>
                                                                </li>
                                                                {{-- <li>
                                                                    <a href="#" data-toggle="modal" data-target="#compare">
                                                                        <span data-toggle="tooltip" data-placement="bottom"
                                                                            title="Add to compare"
                                                                            class="icon-shuffle"></span>
                                                                    </a>
                                                                </li> --}}
                                                                <li>
                                                                    <a href="#" data-toggle="modal" class="quick_button"
                                                                        data-target="#quick-view"
                                                                        data-url="{{ route('get.productView', $product->id) }}">
                                                                        <span data-toggle="tooltip" data-placement="bottom"
                                                                            title="Quick view"
                                                                            class="icon-magnifier"></span>
                                                                    </a>
                                                                </li>
                                                            </ul>
                                                            <!-- product links end-->
                                                        </div>
                                                        <div class="media-body">
                                                            <div class="product-desc">
                                                                <h3 class="title">
                                                                    <a
                                                                        href="{{ $product->url }}">{{ $product['name_' . getLang()] }}</a>

                                                                </h3>
                                                                <div class="star-rating">
                                                                    @for ($i = 1; $i <= 5; $i++)
                                                                        <span
                                                                            class="ion-ios-star{{ $i > $product->avgrate ? '-o' : '' }} "></span>
                                                                    @endfor
                                                                </div>

                                                                <div
                                                                    class="d-flex align-items-center justify-content-between">
                                                                    <h6 class="product-price">{{ $product->price }}
                                                                    </h6>
                                                                    <button class="pro-btn add_to_cart">
                                                                        <i class="icon-basket" data-id="{{ $product->id }}"
                                                                            data-url="{{ route('setToCart', $product->id) }}"></i></button>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <!-- product-list End -->
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                            <!-- second tab-pane -->
                            <div class="tab-pane fade" id="pills-profile" role="tabpanel"
                                aria-labelledby="pills-profile-tab">
                                <div class="row grid-view-list theme1">
                                    @foreach ($products as $product)

                                        <div class="col-12 mb-30">
                                            <div class="card product-card">
                                                <div class="card-body">
                                                    <div class="media flex-column flex-md-row">
                                                        <div class="product-thumbnail position-relative">
                                                            <span
                                                                class="badge badge-success top-left">{{ $product->offer() }}</span>
                                                            <a href="{{ $product->url }}">
                                                                <img class="first-img"
                                                                    src="{{ getImage('products', $product->image) }}"
                                                                    alt="thumbnail">
                                                            </a>
                                                            <!-- product links -->
                                                            <ul class="product-links d-flex justify-content-center">
                                                                <li>
                                                                    <a href="{{ route('set.Wishlist', $product->id) }}">
                                                                        <span data-toggle="tooltip" data-placement="bottom"
                                                                            title="add to wishlist" class="icon-heart">
                                                                        </span>
                                                                    </a>
                                                                </li>
                                                                {{-- <li>
                                                                    <a href="#" data-toggle="modal" data-target="#compare">
                                                                        <span data-toggle="tooltip" data-placement="bottom"
                                                                            title="Add to compare"
                                                                            class="icon-shuffle"></span>
                                                                    </a>
                                                                </li> --}}
                                                                <li>
                                                                    <a href="#" data-toggle="modal" class="quick_button"
                                                                        data-target="#quick-view"
                                                                        data-url="{{ route('get.productView', $product->id) }}">
                                                                        <span data-toggle="tooltip" data-placement="bottom"
                                                                            title="Quick view"
                                                                            class="icon-magnifier"></span>
                                                                    </a>
                                                                </li>
                                                            </ul>
                                                            <!-- product links end-->
                                                        </div>
                                                        <div class="media-body pl-30">
                                                            <div class="product-desc py-0">
                                                                <h3 class="title"><a
                                                                        href="{{ $product->url }}">{{ $product['name_' . getLang()] }}</a>
                                                                </h3>
                                                                <div class="star-rating mb-10">
                                                                    @for ($i = 1; $i <= 5; $i++)
                                                                        <span
                                                                            class="ion-ios-star{{ $i > $product->avgrate ? '-o' : '' }} "></span>
                                                                    @endfor
                                                                </div>
                                                                <h6 class="product-price">{{ $product->price }}</h6>
                                                            </div>
                                                            <ul class="product-list-des">
                                                                <li>
                                                                    {{ $product['description_' . getLang()] }}
                                                                </li>

                                                            </ul>
                                                            {{-- <div
                                                                class="availability-list mb-30">
                                                                <p>Availability: <span>1200 In Stock</span></p>
                                                            </div> --}}

                                                            <button
                                                                class="btn theme-btn--dark1 btn--xl rounded-5 add_to_cart">
                                                                <i class="icon-basket" data-id="{{ $product->id }}"
                                                                    data-url="{{ route('setToCart', $product->id) }}"></i></button>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <!-- product-list End -->
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                        </div>
                    @else
                        <p class="alert alert-info col-12">{{ trans('admin.noData') }}</p>
                    @endif

                    <div class="row">
                        <div class="col-12">
                            <nav class="pagination-section mt-30">
                                <div class="row align-items-center">
                                    <div class="col-12">
                                        {{ $products->links() }}
                                    </div>
                                </div>
                            </nav>
                        </div>
                    </div>


                </div>





            </div>
        </div>
    </div>
    <!--shop  area end-->

@endsection