@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="1"></x-frontend>
            <x-frontend::member.member-content-area.template title="Address book">
                <x-slot:content>
                    <div class="flex justify-between flex-wrap items-center flex-col md:flex-row -mx-4 ">
                        <div class="flex flex-col-reverse items-center md:flex-row  px-4 pt-5 md:py-4 ">
                            <div>
                                Order No. : 2394348KFHD
                            </div>
                            <div class="stat-payment pending-bg mx-3 mb-2 md:mb-0 px-2">
                                Wait to Payment
                            </div>
                            {{-- <div class="stat-payment pending-bg mx-3">
                                Wait to Recieve
                            </div>
                            <div class="stat-payment canceled-bg mx-3">
                                Canceled
                            </div>
                            <div class="stat-payment canceled-bg mx-3">
                                Expired
                            </div>
                            <div class="stat-payment success-bg mx-3">
                                Success
                            </div> --}}
                        </div>
                        <div class="p-4">
                            <a href="#" class="font-semibold">Tracking No. : 3344HGSDFDU</a>
                        </div>
                    </div>
    
                    <div class="pb-3 mt-4 flex flex-col gap-1">
                        <div class="member-profile-wrapper">
                            <div class="member-profile-title">
                                <p>
                                    Order Date
                                    <span class="hidden sm:inline-block">:</span>
                                </p>
                            </div>
                            <div class="member-profile-detail">
                                <p>
                                    19 Jan 2022
                                </p>
                            </div>
                            <div class="member-profile-action">
                            </div>
                        </div>
                        <div class="member-profile-wrapper">
                            <div class="member-profile-title">
                                <p>
                                    Payment Method
                                    <span class="hidden sm:inline-block">:</span>
                                </p>
                            </div>
                            <div class="member-profile-detail flex items-baseline gap-1 font-medium">
                                <p>
                                    Bank Transfer
                                </p>
                                <p>
                                   |
                                </p>
                                <a href="transfer" class="underline font-semibold">
                                    Attach Payment Slip
                                </a>
                            </div>
                            <div class="member-profile-action">
                            </div>
                        </div>
                        <div class="member-profile-wrapper">
                            <div class="member-profile-title">
                                <p>
                                    Delivery Address
                                    <span class="hidden sm:inline-block">:</span>
                                </p>
                            </div>
                            <div class="member-profile-detail">
                                <span>เมฆา ฟ้าแว๊บแว๊บ</span>
                                <span>(012-3456789)</span>
                                <br>
                                <span class="mt-1 block">22nd Floor, Fortune Town Building, Ratchadapisek Rd. Din Daeng , Bangkok 10400  </span>
                            </div>
                            <div class="member-profile-action">
                            </div>
                        </div>
                    </div>
    
                    <div class="pb-4 mt-2">
                        <div class="cart-table">
                    
                            <div class="cart-row cart-title">
                                <div class="cart-item">Product</div>
                                <div class="cart-price">Price</div>
                                <div class="cart-quantity">Quantity</div>
                                <div class="cart-total !text-right">Total</div>
                            </div>
                                <div class="cart-row">
                                    <div class="cart-item">
                                        <div class="cart-item-img">
                                            <div class="aspcov">
                                                <img src="{{ Module::asset('frontend:img/product1.jpg') }}" alt="Game Name">
                                            </div>
                                        </div>
                                        <div class="cart-item-detail">
                                            <div class="flex flex-col justify-center">
                                                <p class="text-[10px] mr-[.5rem] 2xl:!pb-0">Category name 1</p>
                                            </div>
                                            <p class="leading-4 text-14 max-h-[34px] font-bold">CORSAIR RAM VENGEANCE PRO
                                                SL DDR4(3200) 16GB</p>
                                            <div class="cart-price xl:hidden">
                                                <p class="font-bold">900 THB</p>
                                                <p class="text-[10px] opacity-50 line-through">1,200 THB</p>
                                            </div>
                                        </div>
                                    </div>
                                    
                                    <div class="cart-price hidden xl:flex">
                                        <p class="font-bold">900 THB</p>
                                        <p class="text-[10px] opacity-50 line-through">1,200 THB</p>
                                    </div>
                                    <div class="cart-quantity text-14 xl:text-16 flex items-center">
                                        <span class="xl:hidden">
                                            QTY :&nbsp;
                                        </span>
                                        <span>
                                            2
                                        </span>
                                    </div>
                                    <div class="cart-total !text-right"><p>
                                        <span class="xl:hidden">
                                            Total :&nbsp;
                                        </span>
                                        <span class="font-bold">
                                        900 THB
                                        </span>
                                    </p></div>
                                    
                                </div>
                        </div>
                    </div>
                    <div class="px-4 pb-4">
                        <div class="flex flex-col md:flex-row justify-between">
                            <div class="w-full md:w-2/5 xl:w-1/3">
                                <p class="font-semibold tracking-wider">
                                    Tax Invoice
                                </p>
                                <p class="mt-2 text-13">
                                    1234567890987
                                </p>
                                <div class="flex items-baseline flex-wrap -mx-1">
                                    <p class="px-1 text-14 tracking-wider">
                                        เมฆา ฟ้าแว๊บแว๊บ
                                    </p>
                                    <p class="px-1 text-13">
                                        (012-3456789)
                                    </p>
                                </div>
                                <p class="text-13">
                                    22nd Floor, Fortune Town Building, Ratchadapisek Rd. Din Daeng , Bangkok 10400
                                </p>
                            </div>
                            <div class="w-full md:w-2/5 xl:w-1/3 mt-4 md:mt-0">
                                <div class="flex lg:gap-6">
                                    <div class="w-full md:w-1/2">Subtotal</div>
                                    <div class="w-full md:w-1/2 text-right">1,000 THB</div>
                                </div>
                                <div class="flex opacity-40">
                                    <div class="w-full md:w-1/2 text-12">Code: NEWYEAR2024</div>
                                    <div class="w-full md:w-1/2 text-12 text-right">100 THB</div>
                                </div>
                                <div class="flex opacity-40">
                                    <div class="w-full md:w-1/2 text-12">Vat 7%</div>
                                    <div class="w-full md:w-1/2 text-12 text-right">100 THB</div>
                                </div>
                                <div class="flex mt-4">
                                    <div class="w-full md:w-1/2 text-18 font-bold">Total</div>
                                    <div class="w-full md:w-1/2 text-18 font-bold text-right">10,000 THB</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </x-slot:content>
            </x-frontend>
        </div>
    </div>
</div>
    
@endsection