@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='1' />
            </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>
                            Order History
                            </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 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">
                            <x-frontend::form.input type='search' id='searchorder' title='Search Order' class='border-opacity-25 line-style w-full mb-0 2xl:mb-3 '></x-frontend>
                        </div>
                        <div class="w-full 2xl:w-[160px] flex items-center">
                            <div class="form-style w-full line-style border-b border-white border-opacity-25">
                                <select name="sort" id="sort" class="co-form-basic border-0">
                                    <option class="text-black" value="0">Buy Date</option>
                                    <option class="text-black" value="1">Send Date</option>
                                </select>
                            </div>
                        </div>
                        <div class="w-full 2xl:w-[160px] flex items-center form-style line-style">
                            <input type="date" name="date" id="datestart" class="">
                        </div>
                        <div class="hidden 2xl:block">-</div>
                        <div class="w-full 2xl:w-[160px] flex items-center form-style line-style">
                            <input type="date" name="date" id="dateend" class="">
                        </div>
                        <div class="w-full 2xl:w-[160px] flex items-center">
                            <div class="form-style w-full line-style border-b border-white border-opacity-25">
                                <select name="sort" id="sort" class="co-form-basic border-0">
                                    <option class="text-black" value="0">All Status</option>
                                    <option class="text-black" value="1">Wait for Payment</option>
                                    <option class="text-black" value="2">Expired</option>
                                    <option class="text-black" value="3">Success</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="member-wrapper mt-4">

                        <div class="mmb-bck">
                            <div class="order-wrapper">
                                <div class="order-item">
                                    <div class="order-colm colm-nm">
                                        <p class="font-light text-[11px] sm:text-13">Order No.</p>
                                        <p class="font-semibold text-14 md:text-16"><a href="seller-order-detail">0001021021234</a></p>
                                    </div>
                                    <div class="order-colm colm-nm">
                                        <p class="font-light text-[11px] sm:text-13">Order Date</p>
                                        <p class="text-13 md:fs-16">19 Jan 2022</p>
                                    </div>
                                    <div class="order-colm colm-nm">
                                        <p class="font-light text-[11px] sm:text-13">Status</p>
                                        <div class="stat-list">
                                            <p class="stat-payment pending">Wait for Payment </p>
                                        </div>
                                    </div>
                                    <div class="order-colm colm-sm">
                                        <p class="font-light text-[11px] sm:text-13">Total</p>
                                        <p class="text-13 md:fs-16">1,064.00 THB</p>
                                    </div>
                                    <div class="order-colm items-center flex">
                                        <div class="full-url flex items-center space-x-3 w-full md:pl-[110px] xl:pl-0 xl:justify-end">
                                            <p class="text-13">View Detail</p><svg width="10" height="15" viewBox="0 0 10 15" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                <path d="M1 1L8 7.5L1 14" stroke="#fff" stroke-width="2"></path>
                                            </svg>
                                            <a href="seller-order-detail"></a>
                                        </div>
                                    </div>
                                </div>
                                <div class="order-item">
                                    <div class="order-colm colm-nm">
                                        <p class="font-light text-[11px] sm:text-13">Order No.</p>
                                        <p class="font-semibold text-14 md:text-16"><a href="seller-order-detail">0001021021234</a></p>
                                    </div>
                                    <div class="order-colm colm-nm">
                                        <p class="font-light text-[11px] sm:text-13">Order Date</p>
                                        <p class="text-13 md:fs-16">19 Jan 2022</p>
                                    </div>
                                    <div class="order-colm colm-nm">
                                        <p class="font-light text-[11px] sm:text-13">Status</p>
                                        <div class="stat-list">
                                            <p class="stat-payment canceled">Expired</p>
                                        </div>
                                    </div>
                                    <div class="order-colm colm-sm">
                                        <p class="font-light text-[11px] sm:text-13">Total</p>
                                        <p class="text-13 md:fs-16">1,064.00 THB</p>
                                    </div>
                                    <div class="order-colm items-center flex">
                                        <div class="full-url flex items-center space-x-3 w-full md:pl-[110px] xl:pl-0 xl:justify-end">
                                            <p class="text-13">View Detail</p><svg width="10" height="15" viewBox="0 0 10 15" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                <path d="M1 1L8 7.5L1 14" stroke="#fff" stroke-width="2"></path>
                                            </svg>
                                            <a href="seller-order-detail"></a>
                                        </div>
                                    </div>
                                </div>
                                <div class="order-item">
                                    <div class="order-colm colm-nm">
                                        <p class="font-light text-[11px] sm:text-13">Order No.</p>
                                        <p class="font-semibold text-14 md:text-16"><a href="seller-order-detail">0001021021234</a></p>
                                    </div>
                                    <div class="order-colm colm-nm">
                                        <p class="font-light text-[11px] sm:text-13">Order Date</p>
                                        <p class="text-13 md:fs-16">19 Jan 2022</p>
                                    </div>
                                    <div class="order-colm colm-nm">
                                        <p class="font-light text-[11px] sm:text-13">Status</p>
                                        <div class="stat-list">
                                            <p class="stat-payment success">Success</p>
                                        </div>
                                    </div>
                                    <div class="order-colm colm-sm">
                                        <p class="font-light text-[11px] sm:text-13">Total</p>
                                        <p class="text-13 md:fs-16">1,064.00 Coins</p>
                                    </div>
                                    <div class="order-colm items-center flex">
                                        <div class="full-url flex items-center space-x-3 w-full md:pl-[110px] xl:pl-0 xl:justify-end">
                                            <p class="text-13">View Detail</p><svg width="10" height="15" viewBox="0 0 10 15" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                <path d="M1 1L8 7.5L1 14" stroke="#fff" stroke-width="2"></path>
                                            </svg>
                                            <a href="seller-order-detail"></a>
                                        </div>
                                    </div>
                                </div>
                                <div class="order-item">
                                    <div class="order-colm colm-nm">
                                        <p class="font-light text-[11px] sm:text-13">Order No.</p>
                                        <p class="font-semibold text-14 md:text-16"><a href="seller-order-detail">0001021021234</a></p>
                                    </div>
                                    <div class="order-colm colm-nm">
                                        <p class="font-light text-[11px] sm:text-13">Order Date</p>
                                        <p class="text-13 md:fs-16">19 Jan 2022</p>
                                    </div>
                                    <div class="order-colm colm-nm">
                                        <p class="font-light text-[11px] sm:text-13">Status</p>
                                        <div class="stat-list">
                                            <p class="stat-payment canceled">Expired</p>
                                        </div>
                                    </div>
                                    <div class="order-colm colm-sm">
                                        <p class="font-light text-[11px] sm:text-13">Total</p>
                                        <p class="text-13 md:fs-16">1,064.00 THB</p>
                                    </div>
                                    <div class="order-colm items-center flex">
                                        <div class="full-url flex items-center space-x-3 w-full md:pl-[110px] xl:pl-0 xl:justify-end">
                                            <p class="text-13">View Detail</p><svg width="10" height="15" viewBox="0 0 10 15" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                <path d="M1 1L8 7.5L1 14" stroke="#fff" stroke-width="2"></path>
                                            </svg>
                                            <a href="seller-order-detail"></a>
                                        </div>
                                    </div>
                                </div>
                                <div class="order-item">
                                    <div class="order-colm colm-nm">
                                        <p class="font-light text-[11px] sm:text-13">Order No.</p>
                                        <p class="font-semibold text-14 md:text-16"><a href="seller-order-detail">0001021021234</a></p>
                                    </div>
                                    <div class="order-colm colm-nm">
                                        <p class="font-light text-[11px] sm:text-13">Order Date</p>
                                        <p class="text-13 md:fs-16">19 Jan 2022</p>
                                    </div>
                                    <div class="order-colm colm-nm">
                                        <p class="font-light text-[11px] sm:text-13">Status</p>
                                        <div class="stat-list">
                                            <p class="stat-payment success">Success</p>
                                        </div>
                                    </div>
                                    <div class="order-colm colm-sm">
                                        <p class="font-light text-[11px] sm:text-13">Total</p>
                                        <p class="text-13 md:fs-16">1,064.00 THB</p>
                                    </div>
                                    <div class="order-colm items-center flex">
                                        <div class="full-url flex items-center space-x-3 w-full md:pl-[110px] xl:pl-0 xl:justify-end">
                                            <p class="text-13">View Detail</p><svg width="10" height="15" viewBox="0 0 10 15" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                <path d="M1 1L8 7.5L1 14" stroke="#fff" stroke-width="2"></path>
                                            </svg>
                                            <a href="seller-order-detail"></a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <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