@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.seller-sidebar active='1' />
            </div>
            <div class="flex-1 p-4 lg:p-6 bg-glass ">
                <div class="text-16 font-semibold uppercase flex items-center justify-between">
                    <a href="seller-order" class="flex space-x-2">
                        <img src="{{ Module::asset('frontend:img/back.svg') }}" alt="Back to Order">
                        <p>
                            Order History
                        </p>
                    </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 flex-col items-center md:flex-row space-y-4 md:space-y-0 px-4 pb-4 pt-5 md:pt-4 mt-4">
                    <div>
                        Order No. : 2394348KFHD
                    </div>
                    <div class="stat-payment pending-bg mx-3">
                        Pending
                    </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 class="cart-total mr-0 ml-auto flex-1 hidden xl:flex max-w-[400px]">
                        <div class="flex items-center justify-end w-full flex-wrap gap-4">
                            <button class="button-secondary w-[170px] h-[42px] text-white ">
                                APPROVE ORDER
                            </button>
                            <button class="button-primary w-[170px]" type="button">
                                REJECT ORDER
                            </button>
                        </div>
                    </div>
                    {{-- <p class="text-13 opacity-40">Order Complete on 12  Dec 2024</p> --}}
                </div>

                <div class="px-4 pt-3 pb-4">
                    <div class="member-profile-wrapper">
                        <div class="member-profile-title">
                            <p>
                                Buyer Name
                                <span class="hidden sm:inline-block">:</span>
                            </p>
                        </div>
                        <div class="member-profile-detail">
                            <p>
                                Mekha Farhwapwap
                            </p>
                        </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>
                    <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">
                            <p>
                                Credit Card
                            </p>
                        </div>
                    </div>
                    <div class="flex flex-wrap items-center justify-center xl:hidden w-full flex-wrap mt-4 gap-4">
                        <button class="button-secondary w-[170px] h-[42px] text-white ">
                            APPROVE ORDER
                        </button>
                        <button class="button-primary w-[170px]" type="button">
                            REJECT ORDER
                        </button>
                    </div>
                </div>

                <div class="px-4 pb-4 mt-2">
                    <div class="member-wrapper member-order-detail-wrapper border-t border-gray-100 border-opacity-20">
                        <div class="border-b border-gray-100 border-opacity-20 py-6">
                            <div class="">
                                @for ($i = 0; $i < 3; $i++)
                                    <div class="cart-row -mx-4">
                                        <div class="cart-item xl:flex-500">
                                            <div class="cart-item-img">
                                                <div class="aspcov">
                                                    <img src="{{ Module::asset('frontend:img/game1.jpg') }}" alt="Game Name">
                                                </div>
                                            </div>
                                            <div class="cart-item-detail">
                                                <p class="leading-4 text-14 max-h-[32px]">Product ID Game NameProduct ID Game NameProduct ID Game NameProduct ID Game Name</p>
                                            </div>
                                        </div>
                                        <div class="cart-price flex">
                                            <div class="flex items-center text-13 ml-auto">
                                                <x-frontend::modal.basicmodal modalName="SendID">
                                                    <x-slot:modalButton>
                                                        <p class="rounded-full text-13 inline-block mt-2 button-primary px-2 py-1 w-[80px] text-center text-white">Send</p>
                                                    </x-slot>
                                                    <x-slot:modalContent>
                                                        <p class="font-bold text-center text-16 mb-4 line-clamp-1">Product ID Game NameProduct Product ID Game NameProduct </p>
                                                        <div class="flex items-baseline mb-2">
                                                            <div class="font-bold text-12 lg:text-16 ppvtt">ID : </div>
                                                            <div class="ppvif">
                                                                <input class=" w-auto flex-1" type="text">
                                                            </div>
                                                        </div>
                                                        <div class="flex items-baseline mb-2">
                                                            <div class="font-bold text-12 lg:text-16 ppvtt">Password : </div>
                                                            <div class="ppvif">
                                                                <input class=" w-auto flex-1" type="password">
                                                            </div>
                                                        </div>
                                                        <button class="button-secondary text-white mt-4 mx-auto pvwt">Submit</button>
                                                    </x-slot>
                                                </x-frontend>
                                            </div>
                                        </div>
                                        <div class="cart-total text-right mr-0">
                                            <p class="mbtol ">1,800 THB</p>
                                        </div>
                                        <div class="cart-action p-0">
                                            <div class="cart-delete">
                                            </div>
                                        </div>
                                    </div>
                                @endfor
                            </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 font-medium 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 mt-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">Fee</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">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-medium">Total</div>
                                <div class="w-full md:w-1/2 text-18 font-medium text-right">10,000 THB</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection