@extends('front.layouts.app')
@section('title', isset($category) ? ($category->meta_tag_title ?? 'Shop') : 'Shop')
@section('description', isset($category) ? ($category->meta_tag_description ?? '') : '')
@section('content')
    <style>
        .proCard span i {
            color: #495057;
        }

        .golden:before {
            color: #e0a800;
        }

        .productTabs li a.active {
            /*border-bottom: 1px solid var(--primary);*/
            color: var(--primary);
        }
    </style>

    <!-- Begin: Main Slider -->
    <div id="cursor-follow"></div>
    <div class="main-slider">
        <div id="carouselExampleControls" class="carousel slide carousel-fade" data-ride="carousel">
            <div id="carouselExampleControls" class="carousel slide carousel-fade" data-ride="carousel">
                <div class="carousel-inner">
                    <div class="carousel-item active">
                        <img class="img-fluid w-100" src="{{isset($shop) ? (isset($data) ? asset('front/images/'. $data->banner_image) : asset('front/images/abtBg.jpg') ) : asset('front/images/abtBg.jpg')}}" alt="First slide">
                        <div class="carousel-caption">
                            <div class="container">
                                <div class="row">
                                    <div class="col-md-12">
                                        <h2>{{ isset($category) ? ($category->name ?? 'Our Shop') : (isset($data) ? ($data->banner_title ?? 'Our Shop') : 'Our Shop') }}</h2>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="overlay">
            </div>
        </div>
    </div>
    <!-- END: Main Slider -->

    <section class="productSection shopInner">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    @if(request()->is('shop'))
                        <ul class="productTabs nav" id="categoryTabs" role="tablist">
                            <li class="nav-item" role="presentation">
                                <a class="nav-link active" id="all-tab" data-toggle="tab"
                                   href="#all" role="tab"
                                   aria-controls="home" aria-selected="true">All</a>
                            </li>
                            @foreach($categories as $category)
                                <li class="nav-item" role="presentation">
                                    <a class="nav-link" id="{{ $category->category_slug }}-tab" data-toggle="tab"
                                       href="#{{ $category->category_slug }}" role="tab"
                                       aria-controls="home" aria-selected="true">{{ $category->name }}</a>
                                </li>
                            @endforeach
                        </ul>
                    @endif

                    <div class="tab-content" id="categoryTabContent">
                        <div class="tab-pane fade show active" id="all" role="tabpanel"
                             aria-labelledby="all-tab">
                            <div class="row">
                                @forelse($products as $product)
                                    <div class="col-md-4">
                                        <div class="proCard">
                                            <a href="{{ url('product-details') . '/' . $product->id }}" class="imgWrap">
                                                @forelse($product->product_images as $key => $product_image)
                                                    @if($key == 0)
                                                        <img
                                                            src="{{ asset('uploads/products') . '/' . $product_image->product_images }}"
                                                            alt="product">
                                                    @endif
                                                @empty
                                                    <img src="{{ asset('front/images/prod1.jpg') }}" alt="product">
                                                @endforelse
                                            </a>
                                            <div class="content">
                                                <h3>{{ $product->product_name }}</h3>
                                                <span>
                                                    @php
                                                        $reviews = $product->productReviews;
                                                        if($reviews->count() > 0)
                                                            $avgRating = floor($reviews->sum('rating') / $reviews->count());
                                                        else
                                                            $avgRating = 0;
                                                    @endphp
                                                    @for($x = 1; $x < 6; $x++)
                                                        <i class="fas fa-star {{ ($x <= $avgRating) ? 'golden' : '' }}"></i>
                                                    @endfor
                                                </span>
                                                <p>$ {{ $product->product_current_price }}</p>
                                                <a href="{{ url('product-details') . '/' . $product->id }}"
                                                   data-color="red"
                                                   class="themeBtn">Shop Now</a>
                                            </div>
                                        </div>
                                    </div>
                                @empty
                                    <p>No Products Found</p>
                                @endforelse
                            </div>
                        </div>

                        @foreach($categories as $category)
                            <div class="tab-pane fade" id="{{ $category->category_slug }}" role="tabpanel"
                                 aria-labelledby="{{ $category->category_slug }}-tab">
                                <div class="row">
                                    @forelse($products as $product)
                                        @if($product->category_id == $category->id)
                                            <div class="col-md-4">
                                                <div class="proCard">
                                                    <a href="{{ url('product-details') . '/' . $product->id }}"
                                                       class="imgWrap">
                                                        @forelse($product->product_images as $key => $product_image)
                                                            @if($key == 0)
                                                                <img
                                                                    src="{{ asset('uploads/products') . '/' . $product_image->product_images }}"
                                                                    alt="product">
                                                            @endif
                                                        @empty
                                                            <img src="{{ asset('front/images/prod1.jpg') }}"
                                                                 alt="product">
                                                        @endforelse
                                                    </a>
                                                    <div class="content">
                                                        <h3>{{ $product->product_name }}</h3>
                                                        <span>
                                                    @php
                                                        $reviews = $product->productReviews;
                                                        if($reviews->count() > 0)
                                                            $avgRating = floor($reviews->sum('rating') / $reviews->count());
                                                        else
                                                            $avgRating = 0;
                                                    @endphp
                                                            @for($x = 1; $x < 6; $x++)
                                                                <i class="fas fa-star {{ ($x <= $avgRating) ? 'golden' : '' }}"></i>
                                                            @endfor
                                                </span>
                                                        <p>$ {{ $product->product_current_price }}</p>
                                                        <a href="{{ url('product-details') . '/' . $product->id }}"
                                                           data-color="red"
                                                           class="themeBtn">Shop Now</a>
                                                    </div>
                                                </div>
                                            </div>
                                        @endif
                                    @empty
                                        <p>No Products Found</p>
                                    @endforelse
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection