@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.member-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="member-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">
                        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="px-4 pb-3 mt-4">
                    <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">
                            <p>
                                Credit Card
                            </p>
                        </div>
                        <div class="member-profile-action">
                        </div>
                    </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">
                        @for ($exm = 0; $exm < 3; $exm++)
                            <div class="border-b border-gray-100 border-opacity-20 py-6">
                                <div class="store-info">
                                    <div class="cart-row -mx-4">
                                        <div class="cart-item">
                                            <div class="w-[100px] h-[100px]">
                                                <div class="aspcov">
                                                    <img src="{{ Module::asset('frontend:img/game2.jpg') }}" alt="Game Name">
                                                </div>
                                            </div>
                                            <div class="cart-item-detail">
                                                <p class="text-18 xl:w-[300px]">Orange Game Shop</p>
                                            </div>
                                        </div>
                                        <div class="cart-quantity py-[.5rem] xs:py-0 hidden 2xl:block">
                                        </div>
                                        <div class="cart-total mr-0 flex-1 hidden xl:flex">
                                            <div class="flex items-center justify-end w-full flex-wrap gap-4">
                                                    <button class="button-secondary w-[150px] h-[42px] text-white">
                                                        CONFIRM ORDER
                                                    </button>
                                                    <button class="button-primary w-[150px]" type="button">
                                                        CANCEL ORDER
                                                    </button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="xl:pl-12">
                                    @for ($i = 0; $i < 3; $i++)
                                        <div class="cart-row -mx-4">
                                            <div class="cart-item">
                                                <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">
                                                    {{-- Mobile Status --}}
                                                    <div class="cart-price xl:hidden mb-2">
                                                        <div class="inline-block stat-payment success-text pl-0">
                                                            Success
                                                        </div>
                                                    </div>
                                                    <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>
                                            {{-- Desktop Price --}}
                                            <div class="cart-price flex">
                                                <x-frontend::modal.basicmodal modalName="ViewID">
                                                    <x-slot:modalButton>
                                                        <p class="rounded-full text-12 mt-2 xl:mt-0 inline-block button-primary px-2 py-1 w-[80px] text-center text-white">View ID</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">
                                                                FFES00001
                                                            </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="border-none w-auto flex-1" type="password" disabled value="*************">
                                                            </div>
                                                        </div>
                                                        <button class="button-secondary text-white mt-4 mx-auto pvwt">View</button>
                                                    </x-slot>
                                                </x-frontend>
                                            </div>
                                            <div class="cart-quantity py-[.5rem] xs:py-0">
                                                <div class="hidden xl:flex items-center text-13">
                                                    <div class="inline-block stat-payment success-text">
                                                        Success
                                                    </div>
                                                </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 class="flex xl:hidden items-center justify-center mt-4 w-full flex-wrap gap-4">
                                        <button class="button-primary w-full max-w-[150px] h-[42px] text-black bg-white font-semibold hover:bg-gray-200">
                                            CONFIRM ORDER
                                        </button>
                                        <button class="button-primary w-full max-w-[150px]" type="button">
                                            CANCEL ORDER
                                        </button>
                                    </div>
                                </div>
                            </div>
                        @endfor
                    </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