@extends('layouts.user')

@section('title')
    {{ $category }} Category
@endsection

@section('content')

 <!-- Start Hero -->
 <section class="relative table w-full py-20 lg:py-24 bg-gray-50 dark:bg-slate-800">
    <div class="container relative">
        <div class="grid grid-cols-1 text-center mt-14">
            <h5 class="text-slate-600 uppercase">{{ $category }} Category</h5>
        </div><!--end grid-->
    </div><!--end container-->

    <div class="absolute text-center z-10 bottom-5 start-0 end-0 mx-3">
        <ul class="tracking-[0.5px] mb-0 inline-block">
            <li class="inline-block uppercase text-[13px] font-bold duration-500 ease-in-out hover:text-orange-500"><a href="{{ url('/') }}">Home</a></li>
            <li class="inline-block text-base text-slate-950 dark:text-white mx-0.5 ltr:rotate-0 rtl:rotate-180"><i class="mdi mdi-chevron-right"></i></li>
            <li class="inline-block uppercase text-[13px] font-bold text-orange-500" aria-current="page">Category</li>
        </ul>
    </div>
</section><!--end section-->
<!-- End Hero -->

        <!-- Start -->
        <section class="relative md:py-24 py-16">
            <div class="container relative">
                <div class="grid md:grid-cols-12 sm:grid-cols-2 grid-cols-1 gap-6"> 
                    <div class="lg:col-span-3 md:col-span-4">
                        <div class="rounded shadow dark:shadow-gray-800 p-4 sticky top-20">
                            <h5 class="text-xl font-medium">Filter</h5>

                            <form class="mt-4" action="{{ route('category', $category) }}" method="get">
                                @csrf
                                <div>
                                    <label for="searchname" class="font-medium">Search:</label>
                                    <div class="relative mt-2">
                                        <i data-feather="search" class="absolute size-4 top-[9px] end-4"></i>
                                        <input type="text" class="h-9 pe-10 rounded px-3 border border-gray-100 dark:border-gray-800 focus:ring-0 outline-none" name="search" id="searchItem" placeholder="Search...">
                                    </div>
                                </div>
                            </form>

                            <div class="mt-4">
                                <h5 class="font-medium">Other Categories:</h5>
                                <ul class="list-none mt-2">
                                    <li><a href="{{ route('category', 'test') }}" class="text-slate-400 dark:text-gray-100"><i class="mdi mdi-shopping-outline text-orange-500 me-2"></i></a></li>
                                </ul>
                            </div>
                        </div>
                    </div><!--end col-->

                    <div class="lg:col-span-9 md:col-span-8">
                        <div class="md:flex justify-between items-center mb-6">
                            <span class="font-semibold">Showing 1-20 of {{ count($products) }} items</span>
        
                            {{--<div class="md:flex items-center">
                                <label class="font-semibold md:me-2">Sort by Price Range:</label>
                                <select class="form-select form-input md:w-36 w-full md:mt-0 mt-1 py-2 px-3 h-10 bg-transparent dark:bg-slate-900 dark:text-slate-200 rounded outline-none border border-gray-100 dark:border-gray-800 focus:ring-0">
                                    <option value="">Featured</option>
                                    <option value="">Sale</option>
                                    <option value="">Alfa A-Z</option>
                                    <option value="">Alfa Z-A</option>
                                    <option value="">Price Low-High</option>
                                    <option value="">Price High-Low</option>
                                </select>
                            </div>--}}  
                        </div>
                        
                        <div class="grid lg:grid-cols-3 md:grid-cols-2 grid-cols-2 gap-6">

                        @foreach($products as $p)
                            <div class="group">
                                <div class="relative overflow-hidden duration-500 rounded-md shadow dark:shadow-gray-800 group-hover:shadow-lg group-hover:dark:shadow-gray-800">
                                    <img src="{{ asset('storage/products/'.$p->image1) }}" class="duration-500 group-hover:scale-110" alt="">
            
                                    <div class="absolute duration-500 -bottom-20 group-hover:bottom-3 start-3 end-3">
                                        <a href="{{ route('product-details', $p->slug) }}" class="inline-block w-full px-5 py-2 text-base font-semibold tracking-wide text-center text-white align-middle duration-500 rounded-md bg-slate-900">Place Bid</a>
                                    </div>
            
                                    <ul class="list-none absolute top-[10px] end-4 opacity-0 group-hover:opacity-100 duration-500 space-y-1">
                                        <li class="mt-1"><a href="{{ route('product-details', $p->slug) }}" class="inline-flex items-center justify-center tracking-wide text-center align-middle duration-500 bg-white rounded-full shadow size-10 text-slate-900 hover:bg-slate-900 hover:text-white"><i data-feather="eye" class="size-4"></i></a></li>
                                    </ul>

                                    <ul class="list-none absolute top-[10px] start-4">
                                        <li><a href="{{ route('product-details', $p->slug) }}" class="bg-orange-600 text-white text-[10px] font-bold px-2.5 py-0.5 rounded h-5 flex items-center">{{ $p->market->name }} <i data-feather="shopping-bag" class="size-4 m-2"></i></a></li>
                                    </ul>
                                </div>

                                <div class="mt-4">
                                    <a href="{{ route('product-details', $p->slug) }}" class="text-lg font-medium hover:text-orange-500">{{ $p->name }}  </a>
                                    <div class="mt-1">
                                        <p class="">Auction Value: ${{ number_format($p->value, 2) }}</p>
                                        <p class="text-red-600"><del>${{ number_format($p->old_value, 2) }}</del></p>
                                        <ul class="font-medium list-none text-amber-400">
                                            @if($p->rating == 1)
                                            <li class="inline"><i class="mdi mdi-star"></i></li>
                                            <li class="inline text-slate-500">{{ number_format($p->rating, 1) }} rating</li>
                                            @elseif($p->rating == 1.5)
                                            <li class="inline"><i class="mdi mdi-star"></i></li>
                                            <li class="inline"><i class="mdi mdi-star-half"></i></li> 
                                            <li class="inline text-slate-500">{{ number_format($p->rating, 1) }} rating</li>
                                            @elseif($p->rating == 2)
                                            <li class="inline"><i class="mdi mdi-star"></i></li>
                                            <li class="inline"><i class="mdi mdi-star"></i></li>
                                            <li class="inline text-slate-500">{{ number_format($p->rating, 1) }} rating</li>
                                            @elseif($p->rating == 2.5)
                                            <li class="inline"><i class="mdi mdi-star"></i></li>
                                            <li class="inline"><i class="mdi mdi-star"></i></li>
                                            <li class="inline"><i class="mdi mdi-star-half"></i></li>
                                            <li class="inline text-slate-500">{{ number_format($p->rating, 1) }} rating</li>
                                            @elseif($p->rating == 3)
                                            <li class="inline"><i class="mdi mdi-star"></i></li>
                                            <li class="inline"><i class="mdi mdi-star"></i></li>
                                            <li class="inline"><i class="mdi mdi-star"></i></li>
                                            <li class="inline text-slate-500">{{ number_format($p->rating, 1) }} rating</li>
                                            @elseif($p->rating == 3.5)
                                            <li class="inline"><i class="mdi mdi-star"></i></li>
                                            <li class="inline"><i class="mdi mdi-star"></i></li>
                                            <li class="inline"><i class="mdi mdi-star"></i></li>
                                            <li class="inline"><i class="mdi mdi-star-half"></i></li>
                                            <li class="inline text-slate-500">{{ number_format($p->rating, 1) }} rating</li>
                                            @elseif($p->rating == 4)
                                            <li class="inline"><i class="mdi mdi-star"></i></li>
                                            <li class="inline"><i class="mdi mdi-star"></i></li>
                                            <li class="inline"><i class="mdi mdi-star"></i></li>
                                            <li class="inline"><i class="mdi mdi-star"></i></li>
                                            <li class="inline text-slate-500">{{ number_format($p->rating, 1) }} rating</li>
                                            @elseif($p->rating == 4.5)
                                            <li class="inline"><i class="mdi mdi-star"></i></li>
                                            <li class="inline"><i class="mdi mdi-star"></i></li>
                                            <li class="inline"><i class="mdi mdi-star"></i></li>
                                            <li class="inline"><i class="mdi mdi-star"></i></li>
                                            <li class="inline"><i class="mdi mdi-star-half"></i></li>
                                            <li class="inline text-slate-500">{{ number_format($p->rating, 1) }} rating</li>
                                            @elseif($p->rating == 5)
                                            <li class="inline"><i class="mdi mdi-star"></i></li>
                                            <li class="inline"><i class="mdi mdi-star"></i></li>
                                            <li class="inline"><i class="mdi mdi-star"></i></li>
                                            <li class="inline"><i class="mdi mdi-star"></i></li>
                                            <li class="inline"><i class="mdi mdi-star"></i></li>
                                            <li class="inline text-slate-500">{{ number_format($p->rating, 1) }} rating</li>
                                            @endif
                                        </ul>
                                    </div>
                                </div>
                            </div><!--end content-->
                        @endforeach 
           
                        </div><!--end grid-->

                        <div class="mt-6">
                            {{ $products->links() }}
                        </div>
        
                        {{--<div class="grid md:grid-cols-12 grid-cols-1 mt-6">
                            <div class="md:col-span-12 text-center">
                                <nav aria-label="Page navigation example">
                                    <ul class="inline-flex items-center -space-x-px">
                                        <li>
                                            <a href="#" class="size-[40px] inline-flex justify-center items-center text-slate-400 bg-white dark:bg-slate-900 rounded-s-3xl hover:text-white border border-gray-100 dark:border-gray-800 hover:border-orange-500 dark:hover:border-orange-500 hover:bg-orange-500 dark:hover:bg-orange-500">
                                                <i data-feather="chevron-left" class="size-5 rtl:rotate-180 rtl:-mt-1"></i>
                                            </a>
                                        </li>
                                        <li>
                                            <a href="#" class="size-[40px] inline-flex justify-center items-center text-slate-400 hover:text-white bg-white dark:bg-slate-900 border border-gray-100 dark:border-gray-800 hover:border-orange-500 dark:hover:border-orange-500 hover:bg-orange-500 dark:hover:bg-orange-500">1</a>
                                        </li>
                                        <li>
                                            <a href="#" class="size-[40px] inline-flex justify-center items-center text-slate-400 hover:text-white bg-white dark:bg-slate-900 border border-gray-100 dark:border-gray-800 hover:border-orange-500 dark:hover:border-orange-500 hover:bg-orange-500 dark:hover:bg-orange-500">2</a>
                                        </li>
                                        <li>
                                            <a href="#" aria-current="page" class="z-10 size-[40px] inline-flex justify-center items-center text-white bg-orange-500 border border-orange-500">3</a>
                                        </li>
                                        <li>
                                            <a href="#" class="size-[40px] inline-flex justify-center items-center text-slate-400 hover:text-white bg-white dark:bg-slate-900 border border-gray-100 dark:border-gray-800 hover:border-orange-500 dark:hover:border-orange-500 hover:bg-orange-500 dark:hover:bg-orange-500">4</a>
                                        </li>
                                        <li>
                                            <a href="#" class="size-[40px] inline-flex justify-center items-center text-slate-400 hover:text-white bg-white dark:bg-slate-900 border border-gray-100 dark:border-gray-800 hover:border-orange-500 dark:hover:border-orange-500 hover:bg-orange-500 dark:hover:bg-orange-500">5</a>
                                        </li>
                                        <li>
                                            <a href="#" class="size-[40px] inline-flex justify-center items-center text-slate-400 bg-white dark:bg-slate-900 rounded-e-3xl hover:text-white border border-gray-100 dark:border-gray-800 hover:border-orange-500 dark:hover:border-orange-500 hover:bg-orange-500 dark:hover:bg-orange-500">
                                                <i data-feather="chevron-right" class="size-5 rtl:rotate-180 rtl:-mt-1"></i>
                                            </a>
                                        </li>
                                    </ul>
                                </nav>
                            </div><!--end col-->
                        </div><!--end grid-->--}}
                    </div><!--end col-->
                </div><!--end grid-->
            </div><!--end container-->
        </section><!--end section-->
        <!-- End -->

@endsection