@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 Detail
                </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="text-14 sm:text-16 font-semibold capitalize flex items-center justify-between">
                    <a href="member-company-order" class="flex space-x-2">
                        <img src="{{ Module::asset('frontend:img/back.svg') }}" alt="Back to Order">
                        <h4 class="font-semibold capitalize">
                            Order History
                        </h4>
                    </a>
                    <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="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 mb-2 md:mb-0 px-2">
                            Wait to Recieve
                        </div>
                        <div class="stat-payment canceled-bg  mx-3 mb-2 md:mb-0 px-2">
                            Canceled
                        </div>
                        <div class="stat-payment success-bg  mx-3 mb-2 md:mb-0 px-2">
                            Success
                        </div>
                    </div>
                    <div class="p-4">
                        <a href="checkout-credit" class="flex items-center gap-2 px-3 py-1 rounded-sm bg-primary ">
                            <p class="text-12 text-white">Proceed to Payment</p>
                            <img src="{{ Module::asset('frontend:img/pay.svg') }}" alt="Download PDF" class="w-5 h-5">
                        </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 User
                                <span class="hidden sm:inline-block">:</span>
                            </p>
                        </div>
                        <div class="member-profile-detail">
                            <p>
                                Mekha Fahwapwap
                            </p>
                        </div>
                        <div class="member-profile-action">
                        </div>
                    </div>
                    <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-center 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 order-detail-table">
                
                        <div class="cart-row cart-title">
                            <div class="cart-item">Product</div>
                            <div class="cart-quantity">Quantity</div>
                            <div class="cart-price">Price</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/prod1.png') }}" alt="Game Name">
                                    </div>
                                </div>
                                <div class="cart-item-detail">
                                    <div>
                                        <p class="inline-block text-[10px] px-1 py-[2px] rounded-sm item-success text-white">
                                            Success
                                        </p>
                                    </div>
                                    <p class="leading-4 text-14 max-h-[34px] font-bold">Product Title Have a Long Text</p>
                                    <div class="flex flex-col justify-center">
                                        <p class="text-[10px] mr-[.5rem] 2xl:!pb-0">LEVEL SWITCHES | YASKAWA</p>
                                    </div>
                                    <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>
                                    <p class="block text-[10px] rounded-sm tracking-delivering ">
                                        AR No. : 042348723987492384
                                    </p>
                                    <a href="#" class="block text-[10px] -mt-[3px] rounded-sm tracking-delivering ">
                                        Tracking No. : 042348723987492384
                                    </a>
                                </div>
                            </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-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-total text-right"><p>
                                <span class="xl:hidden">
                                    Total :&nbsp;
                                </span>
                                <span class="font-bold">
                                900 THB
                                </span>
                            </p></div>
                            
                        </div>
                        <div class="cart-row">
                            <div class="cart-item">
                                <div class="cart-item-img">
                                    <div class="aspcov">
                                        <img src="{{ Module::asset('frontend:img/prod1.png') }}" alt="Game Name">
                                    </div>
                                </div>
                                <div class="cart-item-detail">
                                    
                                    <div class="flex items-center gap-2 mb-2">
                                        <p class="inline-block text-[10px] px-1 py-[2px] rounded-sm item-pending text-white">
                                            Delivering
                                        </p>
                                    </div>
                                    <p class="leading-4 text-14 max-h-[34px] font-bold">Product Title Have a Long Text</p>
                                    <div class="flex flex-col justify-center">
                                        <p class="text-[10px] mr-[.5rem] 2xl:!pb-0">LEVEL SWITCHES | YASKAWA</p>
                                        <p class="block text-[10px] rounded-sm tracking-delivering ">
                                            AR No. : 042348723987492384
                                        </p>
                                        <a href="#" class="block font-bold text-12 rounded-sm text-[#f29100] tracking-delivering ">
                                            Tracking No. : 042348723987492384
                                        </a>
                                    </div>
                                    <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-quantity text-14 xl:text-16 flex items-center">
                                <span class="xl:hidden">
                                    QTY :&nbsp;
                                </span>
                                <span>
                                    2
                                </span>
                            </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-total text-right"><p>
                                <span class="xl:hidden">
                                    Total :&nbsp;
                                </span>
                                <span class="font-bold">
                                900 THB
                                </span>
                            </p></div>
                        </div>

                        {{-- Pre-order Item --}}
                        <div class="cart-row pre-order-row">
                            <div class="cart-item">
                                <div class="cart-item-img">
                                    <div class="aspcov">
                                        <img src="{{ Module::asset('frontend:img/prod1.png') }}" alt="Game Name">
                                    </div>
                                </div>
                                <div class="cart-item-detail">
                                    <div class="flex items-center gap-2 mb-2">
                                        <p class="inline-block text-[10px] px-1 py-[2px] rounded-sm bg-primary text-white">
                                            Pre-Order
                                        </p>
                                        <p class="inline-block text-[10px] pt-1">(2 of 6)</p>
                                    </div>
                                    <p class="leading-4 text-14 max-h-[34px] font-bold">Product Title Have a Long Text</p>
                                    <div class="flex flex-col justify-center">
                                        <p class="text-[10px] mr-[.5rem] 2xl:!pb-0">LEVEL SWITCHES | YASKAWA</p>
                                    </div>
                                    <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-quantity text-14 xl:text-16 flex items-center">
                                <span class="xl:hidden">
                                    QTY :&nbsp;
                                </span>
                                <span>
                                    6
                                </span>
                            </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-total text-right"><p>
                                <span class="xl:hidden">
                                    Total :&nbsp;
                                </span>
                                <span class="font-bold">
                                900 THB
                                </span>
                            </p></div>
                        </div>
                        <div class="cart-row pre-order-deliver">
                            <div class="cart-item flex-[initial]">
                                <div class="cart-item-img">
                                </div>
                                <div class="cart-item">
                                    <div class="cart-item-detail">
                                        <div>
                                            <p class="inline-block text-[10px] px-1 py-[2px] rounded-sm item-pending text-white">
                                                2 items Delivering
                                            </p>
                                        </div>
                                        <div class="cart-price xl:hidden">
                                        </div>
                                        <p class="block font-bold text-[10px] rounded-sm tracking-delivering ">
                                            AR No. : 04234872398749
                                        </p>
                                        <a href="#" class="block font-bold text-12 pt-[3px] -mt-2 rounded-sm text-[#f29100] tracking-delivering ">
                                            Tracking No. : 04234872398749
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="cart-row pre-order-deliver">
                            <div class="cart-item flex-[initial]">
                                <div class="cart-item-img">
                                </div>
                                <div class="cart-item ">
                                    <div class="cart-item-detail">
                                        <div>
                                            <p class="inline-block text-[10px] px-1 py-[2px] rounded-sm item-success text-white">
                                                2 items Delivered
                                            </p>
                                        </div>
                                        <div class="cart-price xl:hidden">
                                        </div>
                                        <p class="block font-bold text-[10px] rounded-sm tracking-delivering ">
                                            AR No. : 04234872398749
                                        </p>
                                        <a href="#" class="block text-[10px] -mt-[3px] rounded-sm tracking-delivering ">
                                            Tracking No. : 042348723987492384
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="cart-row py-0"></div>

                            {{-- Pre-order Item --}}
                        <div class="cart-row pre-order-row">
                            <div class="cart-item">
                                <div class="cart-item-img">
                                    <div class="aspcov">
                                        <img src="{{ Module::asset('frontend:img/prod1.png') }}" alt="Game Name">
                                    </div>
                                </div>
                                <div class="cart-item-detail">
                                    <div class="flex items-center gap-2 mb-2">
                                        <p class="inline-block text-[10px] px-1 py-[2px] rounded-sm item-success text-white">
                                            Success
                                        </p>
                                    </div>
                                    <p class="leading-4 text-14 max-h-[34px] font-bold">Product Title Have a Long Text</p>
                                    <div class="flex flex-col justify-center">
                                        <p class="text-[10px] mr-[.5rem] 2xl:!pb-0">LEVEL SWITCHES | YASKAWA</p>
                                    </div>
                                    <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-quantity text-14 xl:text-16 flex items-center">
                                <span class="xl:hidden">
                                    QTY :&nbsp;
                                </span>
                                <span>
                                    6
                                </span>
                            </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-total text-right"><p>
                                <span class="xl:hidden">
                                    Total :&nbsp;
                                </span>
                                <span class="font-bold">
                                900 THB
                                </span>
                            </p></div>
                        </div>
                        <div class="cart-row pre-order-deliver">
                            <div class="cart-item flex-[initial]">
                                <div class="cart-item-img">
                                </div>
                                <div class="cart-item">
                                    <div class="cart-item-detail">
                                        <div>
                                            <p class="inline-block text-[10px] px-1 py-[2px] rounded-sm item-success text-white">
                                                4 items Delivered
                                            </p>
                                        </div>
                                        <div class="cart-price xl:hidden">
                                        </div>
                                        <p class="block font-bold text-[10px] rounded-sm tracking-delivering ">
                                            AR No. : 04234872398749
                                        </p>
                                        <a href="#" class="block text-[10px] -mt-[3px] rounded-sm tracking-delivering ">
                                            Tracking No. : 042348723987492384
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="cart-row pre-order-deliver">
                            <div class="cart-item flex-[initial]">
                                <div class="cart-item-img">
                                </div>
                                <div class="cart-item ">
                                    <div class="cart-item-detail">
                                        <div>
                                            <p class="inline-block text-[10px] px-1 py-[2px] rounded-sm item-success text-white">
                                                2 items Delivered
                                            </p>
                                        </div>
                                        <div class="cart-price xl:hidden">
                                        </div>
                                        <p class="block font-bold text-[10px] rounded-sm tracking-delivering ">
                                            AR No. : 04234872398749
                                        </p>
                                        <a href="#" class="block text-[10px] -mt-[3px] rounded-sm tracking-delivering ">
                                            Tracking No. : 042348723987492384
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="cart-row py-0"></div>
                    </div>
                </div>
                <div class="lg:px-4 lg: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">Discount/Coupon</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>
            </div>
        </div>
    </div>
@endsection