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

@section('content')
    <div class="container py-6 xs:py-12 md:py-16">
        <div class="text-center mx-auto relative">
            <h2 class="font-bold text-32 md:text-[40px] text-dark dark:text-white leading-7">
                Order History
            </h2>
        </div>
    </div>
        <div class="container pb-12 md:pb-16">
            <div class="flex lg:gap-6">
            <div class="lg:w-60 lg:py-6 bg-glass lg:px-2">
                <livewire:frontend::menu.member-company-sidebar active='2' />
            </div>
            <div class="flex-1 p-4 lg:p-6 bg-glass">
                <div class="flex flex-row items-center justify-between relative">
                       
                        <div class="flex flex-col-reverse sm:flex-row items-end sm:items-center space-x-2">
                            <div class="xl:hidden">
                                <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-6 lg:mr-0 max-w-[200px] flex items-center ">
                                <p class="text-13 font-bold">
                                    Sort by : 
                                </p>
                                <div class="form-style  border-gray-200 ml-2">
                                    <select name="sort" id="sort" class="co-form-basic ">
                                        <option class="text-black" value="0">Latest</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 User</p>
                                        <p class="font-semibold text-14 md:text-16"><a href="member-company-order-detail">Mekha Fahwapwap</a></p>
                                    </div>
                                    <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-company-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="#000" stroke-width="2"></path>
                                            </svg>
                                            <a href="member-company-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 User</p>
                                        <p class="font-semibold text-14 md:text-16"><a href="member-company-order-detail">Mekha Fahwapwap</a></p>
                                    </div>
                                    <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-company-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">Credit</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="#000" stroke-width="2"></path>
                                            </svg>
                                            <a href="member-company-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 User</p>
                                        <p class="font-semibold text-14 md:text-16"><a href="member-company-order-detail">Mekha Fahwapwap</a></p>
                                    </div>
                                    <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-company-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="#000" stroke-width="2"></path>
                                            </svg>
                                            <a href="member-company-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 User</p>
                                        <p class="font-semibold text-14 md:text-16"><a href="member-company-order-detail">Mekha Fahwapwap</a></p>
                                    </div>
                                    <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-company-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">Canceled</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="#000" stroke-width="2"></path>
                                            </svg>
                                            <a href="member-company-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 User</p>
                                        <p class="font-semibold text-14 md:text-16"><a href="member-company-order-detail">Mekha Fahwapwap</a></p>
                                    </div>
                                    <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-company-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="#000" stroke-width="2"></path>
                                            </svg>
                                            <a href="member-company-order-detail"></a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="pt-6 mx-auto">
                                <ol class="flex justify-center gap-1 text-13 my-4">
                                    <li>
                                    <a href="#" class="pagination-navigator">
                                        <svg
                                        xmlns="http://www.w3.org/2000/svg"
                                        class="h-6 w-6"
                                        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"
                                        />
                                        </svg>
                                    </a>
                                    </li>
                                
                                    <li>
                                    <a href="#" class="pagination-number">
                                        1
                                    </a>
                                        <li class="pagination-number pagination-active">   2
                                    </li>
                                
                                    <li>
                                    <a href="#" class="pagination-number">
                                        3
                                    </a>
                                    </li>
                                
                                    <li>
                                    <a href="#" class="pagination-number">
                                        4
                                    </a>
                                    </li>
                                
                                    <li>
                                    <a href="#" class="pagination-navigator">
                                        <svg
                                        xmlns="http://www.w3.org/2000/svg"
                                        class="h-6 w-6"
                                        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"
                                        />
                                        </svg>
                                    </a>
                                    </li>
                                </ol>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
@endsection