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

@section('content')
<div class="bg-top-sub-gradient">
    <div class="container pt-5 pb-12 md:pb-16">
        <div class="flex flex-col lg:flex-row lg:gap-6 pt-2 lg:pt-0">
            <x-frontend::member.member-navigation.template active="2"></x-frontend>
            <x-frontend::member.member-content-area.template title="Order history">
                <x-slot:content>
                    <div class="p-4 flex gap-3 flex-wrap">
                        <a href="#" class="bg-secondary block px-2 lg:px-4 py-1 lg:py-2 rounded-md text-12 lg:text-14">
                            ประวัติการสั่งซื้อทั้งหมด
                        </a>
                        <a href="#" class="bg-white block px-2 lg:px-4 py-1 lg:py-2 rounded-md text-12 lg:text-14">
                            ที่ต้องจ่าย
                        </a>
                        <a href="#" class="bg-white block px-2 lg:px-4 py-1 lg:py-2 rounded-md text-12 lg:text-14">
                            ที่ต้องได้รับ
                        </a>
                        <a href="#" class="bg-white block px-2 lg:px-4 py-1 lg:py-2 rounded-md text-12 lg:text-14">
                            สำเร็จ
                        </a>
                        <a href="#" class="bg-white block px-2 lg:px-4 py-1 lg:py-2 rounded-md text-12 lg:text-14">
                            ยกเลิก
                        </a>
                    </div>
                    <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="flex items-center space-x-3 w-full md:pl-[110px] xl:pl-0 xl:justify-end">
                                        <a href="member-order-detail" class="flex items-center gap-x-4">
                                        <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>
                                    </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="flex items-center space-x-3 w-full md:pl-[110px] xl:pl-0 xl:justify-end">
                                        <a href="member-order-detail" class="flex items-center gap-x-4">
                                        <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>
                                    </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="flex items-center space-x-3 w-full md:pl-[110px] xl:pl-0 xl:justify-end">
                                        <a href="member-order-detail" class="flex items-center gap-x-4">
                                        <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>
                                    </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="flex items-center space-x-3 w-full md:pl-[110px] xl:pl-0 xl:justify-end">
                                        <a href="member-order-detail" class="flex items-center gap-x-4">
                                        <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>
                                    </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="flex items-center space-x-3 w-full md:pl-[110px] xl:pl-0 xl:justify-end">
                                        <a href="member-order-detail" class="flex items-center gap-x-4">
                                        <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>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="w-full pt-8 pb-4 text-center">
                            <x-frontend::navigation.pagination.template></x-frontend::navigation.pagination.template>
                        </div>
                    </div>
                </x-slot:content>
            </x-frontend>
        </div>
    </div>
</div>
@endsection