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

@section('content')
<div class="page-header-wrapper mt-12">
    <h1 class='page-header'>
            Welcome
    </h1>
    <div class="img-wrapper">
        <img src="{{ Module::asset('frontend:img/welcome.svg') }}" alt="Account">
    </div>
</div>
    <div class="container pt-8">
        <div class="flex gap-6 mt-6">
            <div class="lg:w-60 lg:py-6 bg-glass lg:px-2">
                <livewire:frontend::menu.member-sidebar active='2' />
            </div>
            <div class="flex-1 p-4 lg:p-6 bg-glass ">

                <div class="text-16 font-semibold uppercase flex items-center justify-between">
                    <p>
                        Package Detail
                    </p>
                    <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="bg-primary 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 class="package-item">
                        คุณยังไม่ได้สมัครแพ็คเกจ
                    </div>
                    <span class="hidden md:inline-block font-light mx-2">
                        |
                    </span>
                    <a href="#" class="text-13 font-semibold">
                        Buy Package
                    </a>
                </div>

                <div class="bg-primary px-4 pt-5 pb-3 mt-4">

                    <div class="flex flex-col md:flex-row items-center justify-between">
                        <div class="package-information">
                            <div class="package-img">
                                <img src="{{ Module::asset('frontend:img/pk1.jpg') }}" alt="Package Name">
                            </div>
                            <div class="package-item">
                                Valorant Platinum Pass
                            </div>
                        </div>

                        <div class="mt-3 md:mt-0">
                            <div>
                                <a href="#" class="text-13 font-semibold">
                                    Extend Duration
                                </a>
                                <span class="font-light mx-2">
                                    |
                                </span>
                                <a href="#" class="text-13 font-semibold">
                                    Change Package
                                </a>
                            </div>
                        </div>
                    </div>
                    <p class="text-[9px] mt-4 md:-mt-1 text-right">
                        Your package will expire on 12 Dec 2022 , 23 : 32
                    </p>
                </div>

                <div class="bg-primary px-4 py-4 mt-4">
                    <div class="member-wrapper">
                        <div class="cart-row cart-title">
                            <div class="cart-item">IDs</div>
                            <div class="cart-price">Order Date</div>
                            <div class="cart-quantity">Expire Date</div>
                            <div class="cart-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/game1.jpg') }}" alt="Game Name">
                                    </div>
                                </div>
                                <div class="cart-item-detail flex flex-col items-start">
                                    <div class="package-item mb-2 text-[9px]">
                                        Valorant Platinum Pass
                                    </div>
                                    <x-frontend::modal.basicmodal modalName="gameViews">
                                            <x-slot:modalButton>
                                                <p class="leading-4 text-13 max-h-[34px] text-left">Product BGMARRR lName That Title have a long text Lorem Ipsum</p>
                                            </x-slot>
                                            <x-slot:modalContent>
                                                <p class="font-medium text-center mb-4">Valorant Platinum ID</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-primary text-white mt-2 mx-auto pvwt">View</button>
                                            </x-slot>
                                    </x-frontend>
                                    <div class="flex items-center">
                                        <p class="text-[10px] mr-[.5rem] 2xl:!pb-0">Valorant Category Name</p>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="cart-price hidden xl:flex">
                                <p class="cart-date"> 12 Dec 2022 , 20 : 32</p>
                            </div>
                            <div class="cart-quantity py-[.5rem] xs:py-0">
                                <p class="cart-date xl:hidden"><span>Form </span> 12 Dec 2022 , 20 : 32</p>
                                <p class="cart-date"><span class="xl:hidden">Exp. </span> 12 Dec 2022 , 23 : 32</p>
                            </div>
                            <div class="cart-total">
                                <div class="extend-button">
                                    <a href="#">Cancel</a>
                                </div>
                            </div>
                        </div>

                        @for ($example = 0; $example < 2; $example++)
                            <div class="cart-row">
                                <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">
                                        <x-frontend::modal.basicmodal modalName="gameViews{{$example}}">
                                            <x-slot:modalButton>
                                                <p class="leading-4 text-13 max-h-[34px] text-left">Product BGMARRR lName That Title have a long text Lorem Ipsum</p>
                                            </x-slot>
                                            <x-slot:modalContent>
                                                <p class="font-medium text-center mb-4">Valorant Platinum ID</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-primary text-white mt-2 mx-auto pvwt">View</button>
                                            </x-slot>
                                        </x-frontend>

                                        <div class="flex items-center">
                                            <p class="text-[10px] mr-[.5rem] 2xl:!pb-0">Valorant Category Name</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="cart-price hidden xl:flex">
                                    <p class="cart-date"> 12 Dec 2022 , 20 : 32</p>
                                </div>
                                <div class="cart-quantity py-[.5rem] xs:py-0">
                                    <p class="cart-date xl:hidden"><span>Form </span> 12 Dec 2022 , 20 : 32</p>
                                    <p class="cart-date"><span class="xl:hidden">Exp. </span> 12 Dec 2022 , 23 : 32</p>
                                </div>
                                <div class="cart-total">
                                    <div class="extend-button">
                                        <a href="#">Extend Duration</a>
                                    </div>
                                </div>
                            </div>
                        @endfor
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection