@extends('frontend::layouts.master')

@section('content')
<x-frontend::utility.memberwelcome></x-frontend>
    <div class="container pt-8">
        <div class="flex lg:gap-6 mt-6">
            <div class="lg:w-60 lg:py-6 bg-glass lg:px-2">
                <livewire:frontend::menu.seller-sidebar active='2' />
            </div>
            <div class="flex-1 p-4 lg:p-6 bg-glass ">
                <div class="flex flex-row flex-wrap sm:items-center justify-between relative">
                        <div class="text-16 font-semibold uppercase">
                            <p>
                            Product List
                            </p>
                        </div>
                        <div class="flex flex-col-reverse sm:flex-row items-end sm:items-center space-x-2">
                            <div class="xl:hidden ml-6">
                                <button class="sidebar-more-trigger">
                                    <img src="{{ Module::asset('frontend:img/more.svg') }}" alt="More" class="lg:hidden w-7">
                                </button>
                            </div>
                        </div>
                        
                </div>
                <div class="py-4 md:px-4">
                    <div class="p-4 co-form-basic flex flex-col 2xl:flex-row 2xl:items-center gap-4 input-p-2 transparent-label bg-glass border border-secondary border-opacity-20">
                        <div class="w-full 2xl:w-auto flex-1 flex items-center search-label-fix xl:mr-5">
                            <x-frontend::form.input type='search' id='searchproduct' title='Search Product' class='border-opacity-25 line-style w-full mb-0 2xl:mb-3 '></x-frontend>
                        </div>
                        <div class="flex flex-col md:flex-row w-full 2xl:w-auto">
                            <div class="flex items-center">
                                <p class="whitespace-nowrap">
                                    Price Range : 
                                </p>
                            </div>
                            <div class="w-full md:w-[160px] flex items-center form-style line-style">
                                <input type="text" name="price" id="pricestart" class="pl-4 placeholder-color" placeholder="min">
                            </div>
                            <div class="hidden px-4 md:flex items-center">-</div>
                            <div class="w-full md:w-[160px] flex items-center form-style line-style">
                                <input type="text" name="price" id="priceend" class="pl-4 placeholder-color" placeholder="max">
                            </div>
                        </div>
                    </div>

                    <div class="pb-4">
                        <div class="flex flex-wrap -mx-2 xs:-mx-4">
                            <div class="w-full xtn:w-1/2 md:w-1/3 xl:w-1/4">
                                <div class="p-4 h-full">
                                    <a href="seller-add-product" class="product-card flex flex-col pb-6 items-center justify-center h-full">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-plus"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
                                        <p>Add New Product</p>
                                    </a>
                                </div>
                            </div>
                            @for ($example = 1; $example < 6; $example++)
                                @for ($i = 1; $i < ($example == 5 ? 4 : 6); $i++)
                                    <div class="w-full xtn:w-1/2 md:w-1/3 xl:w-1/4">
                                        <div class="p-4">
                                            <div class="product-card">
                                                    <div class="img-wrapper">
                                                        <img src="{{ Module::asset('frontend:img/pd'.$i.'.jpg') }}" alt="Recommended Product">
                                                    </div>
                                                <div class="product-card-detail">
                                                        <div class="mb-5">
                                                            <p>Product Name</p>
                                                        </div>
                                                        <div class="mb-5">
                                                            <p class="leading-5">1,800 THB</p>
                                                            <p class="leading-5 font-light text-12 opacity-60 line-through">1,800 THB</p>
                                                        </div>
                                                    <a href="seller-add-product" class="button-primary w-full">EDIT</a>
                                                </div>
                                                <div class="bg-dark rounded-full h-[32px] w-[32px] flex items-center justify-center absolute -top-3 -right-3 p-2 cursor-pointer border border-transparent hover:border-white hover:border-opacity-20">
                                                    <img src="{{ Module::asset('frontend:img/icon/close-w.svg') }}" alt="">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                @endfor
                            @endfor
                        </div>
                    </div>

                    <div class="member-wrapper">
                        <div class="mmb-bck">
                            <div class="pt-6 mx-auto">
                                <ul class="pgntn rectangle" role="menubar" aria-label="Pagination">
                                    <li><a href=""><span>
                                                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                                                    <path fill-rule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd"></path>
                                                </svg></span></a></li>
                                    <li class="current"><a href="">1</a></li>
                                    <li><a href="">2</a></li>
                                    <li><a href="">3</a></li>
                                    <li><a href="">4</a></li>
                                    <li><a href=""><span>
                                                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                                                    <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path>
                                                </svg></span></a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection