@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.member-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 class="w-full lg:w-auto ">
                            <div class="ml-auto -mr-5 lg:mr-0 xl:pt-2 xl:pb-4 max-w-[200px] flex items-center xl:absolute xl:top-1/2 xl:-translate-y-1/2 right-0 z-[3]">
                                <p class="text-13 font-bold">
                                    SORT BY : 
                                </p>
                                <div class="form-style line-style lg:border-b border-white border-opacity-25">
                                    <select name="sort" id="sort" class="co-form-basic border-0">
                                        <option class="text-black" value="0">Lastest</option>
                                        <option class="text-black" value="1">Low Price</option>
                                        <option class="text-black" value="2">High Price</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                </div>
                <div class="pt-4 xl:mt-2">

                    <div class="member-wrapper">

                        <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="member-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="#ffffff" stroke-width="2"></path>
                                            </svg>
                                            <a href="member-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="member-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="#ffffff" stroke-width="2"></path>
                                            </svg>
                                            <a href="member-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="member-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="#ffffff" stroke-width="2"></path>
                                            </svg>
                                            <a href="member-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="member-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="#ffffff" stroke-width="2"></path>
                                            </svg>
                                            <a href="member-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="member-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="#ffffff" stroke-width="2"></path>
                                            </svg>
                                            <a href="member-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