@extends('layouts.master')
@section('content')
    <!-- Breadcum Start -->
    @include('components.breadcum')
    <!-- Breadcum End -->
    <!-- Shop Start -->
    <section class="shop v1 pt-50 pb-50 pt-md-70 pb-md-70 pt-xl-100 pb-xl-100">
        <div class="container">
            <div class="categories-short">
                <div class="categories-btn-count">
                    <ul class="categories-btns" role="tablist">
                        <li>
                            <button class="active" id="row-card-tab" data-bs-toggle="tab" data-bs-target="#row-card"><i
                                    class="my-icon icon-layout"></i>
                            </button>
                        </li>
                        <li>
                            <button id="list-card-tab" data-bs-toggle="tab" data-bs-target="#list-card"><i
                                    class="my-icon icon-list"></i>
                            </button>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="tab-content mt-50">
                <div class="tab-pane fade show active" id="row-card" tabindex="1">
                    <div class="row justify-content-center">
                        @forelse ($products as $product)
                            <div class="col-md-6 col-lg-4 col-xl-3">
                                <div class="shop-card wow animate__fadeInUp" data-wow-delay="0.1s" data-wow-offset="20"
                                    data-wow-duration="0.8s">
                                    <div class="shop-img">
                                        <img width="300" src="{{ asset('uploads/products/' . $product->image) }}" alt="shop">
                                        <form class="shopping-cart-form">
                                            <input type="hidden" name="product_id" value="{{ $product->id }}">
                                            <input class="d-none" name="qty" type="text" min="1"
                                                max="100" value="1" />
                                            @if (@$settings->enable_cart == 1)
                                                <button type="submit" class="link-anime v2 round-border-small uppercase"><i
                                                        class="my-icon icon-add-to-card"></i>ADD TO CART</button>
                                            @else
                                                <a href="{{ route('contact') }}"
                                                    class="link-anime v2 round-border-small uppercase"><i
                                                        class="my-icon icon-add-to-card"></i>CLICK TO ORDER</a>
                                            @endif
                                        </form>
                                        <a href="@php
if (@$settings->enable_product_detail == 1) {
                                                echo route('products.details', $product->slug);
                                            }else{
                                               echo route('contact');
                                            } @endphp"
                                            class="tag tag-black">{{ productType($product->product_type) }}</a>
                                    </div>
                                    <div class="shop-content">
                                        <h5 class="text-5 text-bold"><a
                                                href="@php
if (@$settings->enable_product_detail == 1) {
                                                echo route('products.details', $product->slug);
                                            }else{
                                               echo route('contact');
                                            } @endphp">{{ $product->name }}</a>
                                        </h5>
                                        <div class="card-pricing">
                                            @if (ifProductHasDiscount($product))
                                                <del
                                                    class="text-para-1 text-bold">{{ formatAmount($product->price, $settings) }}</del>
                                                <p class="text-para-1 text-bold price">
                                                    {{ formatAmount($product->offer_price, $settings) }}
                                                </p>
                                            @else
                                                <p class="text-para-1 text-bold price">
                                                    {{ formatAmount($product->price, $settings) }}
                                                </p>
                                            @endif
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @empty
                            <div class="alert alert-warning text-center"><strong>No products available</strong></div>
                        @endforelse

                    </div>
                </div>
                <div class="tab-pane fade" id="list-card" tabindex="2">
                    <ul class="shop-items-list">
                        @forelse ($products as $product)
                            <li class="wow animate__fadeInUp" data-wow-delay="0.1s" data-wow-offset="20"
                                data-wow-duration="0.8s">
                                <div class="shop-img">
                                    <a
                                        href="@php
if (@$settings->enable_product_detail == 1) {
                                                                                    echo route('products.details', $product->slug);
                                                                                }else{
                                                                                   echo route('contact');
                                                                                } @endphp">
                                        <img src="{{ asset('uploads/products/' . $product->image) }}" alt="shop">
                                    </a><a href="shop.html"
                                        class="tag tag-black">{{ productType($product->product_type) }}</a>
                                </div>
                                <div class="shop-content">
                                    <div class="shop-card-rating">
                                        <div class="card-pricing">
                                            @if (ifProductHasDiscount($product))
                                                <del
                                                    class="text-para-1 text-bold">{{ formatAmount($product->price, $settings) }}</del>
                                                <p class="text-para-1 text-bold price">
                                                    {{ formatAmount($product->offer_price, $settings) }}
                                                </p>
                                            @else
                                                <p class="text-para-1 text-bold price">
                                                    {{ formatAmount($product->price, $settings) }}
                                                </p>
                                            @endif
                                        </div>
                                    </div>
                                    <h5 class="text-5 text-bold"><a
                                            href="@php
if (@$settings->enable_product_detail == 1) {
                                                echo route('products.details', $product->slug);
                                            }else{
                                               echo route('contact');
                                            } @endphp">{{ $product->name }}</a>
                                    </h5>
                                    <p class="text-para-2 text-para-xl-1">{{ $product->short_description }}</p>
                                    <form class="shopping-cart-form">
                                        <input type="hidden" name="product_id" value="{{ $product->id }}">
                                        <input class="d-none" name="qty" type="text" min="1" max="100"
                                            value="1" />
                                        @if (@$settings->enable_cart == 1)
                                            <button type="submit" class="link-anime v2 round-border-small uppercase"><i
                                                    class="my-icon icon-add-to-card"></i>ADD TO CART</button>
                                        @else
                                            <a href="{{ route('contact') }}"
                                                class="link-anime v2 round-border-small uppercase"><i
                                                    class="my-icon icon-add-to-card"></i>CLICK TO ORDER</a>
                                        @endif
                                    </form>
                                </div>
                            </li>
                        @empty
                            <div class="alert alert-warning text-center"><strong>No products available</strong></div>
                        @endforelse

                    </ul>
                </div>
            </div>
            {{-- <ul class="pagination-link mt-50">
                <li class="active"><a href="blog.html">1</a>
                </li>
                <li><a href="blog.html">2</a>
                </li>
                <li><a href="blog.html">3</a>
                </li>
                <li><a href="blog.html">4</a>
                </li>
                <li><a href="blog.html"><i class="my-icon icon-angle-right"></i></a>
                </li>
            </ul> --}}
            {{ $products->links('vendor.pagination.products') }}
        </div>
    </section>
    <!-- Shop End -->
@endsection