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

@section('content')
    <x-frontend::utility.memberwelcome></x-frontend>
    <div class="container">
        <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='3' />
            </div>
            <div class="flex-1 p-4 lg:p-6 bg-glass ">
                <div class="flex flex-row flex-wrap sm:items-center justify-between relative">
                    <div class="text-16 font-semibold uppercase">
                        <p>
                            Income Overview
                        </p>
                    </div>
                    <div class="flex flex-col-reverse sm:flex-row items-end sm:items-center space-x-2">
                        <div class="xl:hidden ml-6">
                            <button class="sidebar-more-trigger">
                                <img src="{{ Module::asset('frontend:img/more.svg') }}" alt="More" class="lg:hidden w-7">
                            </button>
                        </div>
                    </div>
                </div>
                <div class="px-4 py-4 my-4">

                    <div class="member-wrapper">
                        <div class="flex flex-wrap justify-between gap-6">
                            <div class="flex flex-wrap">
                                <div class="w-[200px]">
                                    <p class="font-semibold opacity-40">Pending</p>
                                    <p class="text-22 font-bold">300 THB</p>
                                </div>
                                <div class="w-[200px] flex flex-col justify-between">
                                    <div class="">
                                        <p class="font-semibold opacity-40">Balance</p>
                                        <p class="text-22 font-bold">4,300 THB</p>
                                    </div>
                                    <button class="button-primary mt-2 h-[32px] w-[100px]">Withdraw</button>
                                </div>
                            </div>
                            <div class="">
                                <p class="text-16 font-semibold opacity-40">My Bank Account</p>
                                <div class="flex flex-wrap mt-2">
                                    <div class="aspect-[1/1] mr-2">
                                        <img src="{{ Module::asset('frontend:img/scb.svg') }}" alt="Siam Commercial Bank" class="w-[42px] h-[42px] object-contain rounded-md">
                                    </div>
                                    <div class="mr-2">
                                        <p>SCB | ****876</p>
                                        <p class="font-light text-12">เมฆา ฟ้าแว๊บแว๊บ | ***** 22 3</p>
                                    </div>
                                    <div class="w-full">
                                        <x-frontend::modal.basicmodal modalName="SendID">
                                            <x-slot:modalButton>
                                                <div class="button-primary mt-3 h-[32px] w-[100px] text-white">Edit</div>
                                            </x-slot>
                                            <x-slot:modalContent>
                                                <p class="font-bold text-center text-16 mb-4 line-clamp-1">Bank Account</p>

                                                <div class="flex flex-wrap -mx-4">
                                                    <div class="w-full px-4">
                                                        <div class="com-form-basic float form-style">
                                                            <input id="name" type="text" placeholder="Name">
                                                            <label for="name">
                                                                Fullname
                                                            </label>
                                                        </div>
                                                    </div>
                                                    <div class="w-full px-4">
                                                        <div class="com-form-basic float form-style">
                                                            <input id="idcard" type="text" placeholder="idcard">
                                                            <label for="idcard">
                                                                ID Card No.
                                                            </label>
                                                        </div>
                                                    </div>
                                                    <div class="w-full px-4">
                                                        <div class="com-form-basic float form-style">
                                                            <input id="account" type="text" placeholder="account">
                                                            <label for="account">
                                                                Bank Account Name
                                                            </label>
                                                        </div>
                                                    </div>
                                                    <div class="w-full px-4">
                                                        <div class="com-form-basic float form-style">
                                                            <select name="Bank" id="Bank">
                                                                <option value="0">Bank 1</option>
                                                                <option value="1">Bank 2</option>
                                                                <option value="2">Bank 3</option>
                                                            </select>
                                                            <label for="Bank">
                                                                Bank
                                                            </label>
                                                        </div>
                                                    </div>

                                                    <div class="w-full px-4">
                                                        <div class="com-form-basic float form-style">
                                                            <input id="accountno" type="text" placeholder="accountno">
                                                            <label for="accountno">
                                                                Bank Account No.
                                                            </label>
                                                        </div>
                                                    </div>
                                                    <div class="w-full px-4">
                                                        <div class="com-form-basic float form-style">
                                                            <input id="phone" type="text" placeholder="phone">
                                                            <label for="phone">
                                                                Phone No.
                                                            </label>
                                                        </div>
                                                    </div>
                                                    <div class="w-full px-4">
                                                        <x-frontend::form.input type='file' id='bankbook' title='Bankbook' class=""></x-frontend>
                                                            <p class="form-invalid-message">Support PDF, JPG, PNG Files maximum at 2MB</p>
                                                    </div>
                                                    <div class="w-full px-4">
                                                        <p class="text-12 leading-4">
                                                            We secures your balance by <span class="text-14 font-semibold"> allowing you to deposit and withdraw THB  to your
                                                                bank account name ONLY. </span> DO NOT use the bank accounts of parents, girlfriends,
                                                            relatives, or other people whose names do not match.
                                                        </p>
                                                    </div>

                                                    <div class="w-full px-4 pt-4 text-right">
                                                        <button type="button" class="button-secondary w-full text-white">
                                                            Submit
                                                        </button>
                                                    </div>
                                                </div>
                                            </x-slot>
                                            </x-frontend>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
                <hr class="opacity-10">
                <div class="flex flex-row flex-wrap sm:items-center justify-between relative pt-6">
                    <div class="text-16 font-semibold uppercase flex items-center">
                        <p>
                            Income Details
                        </p>
                    </div>
                    <div class="ml-auto xl:pt-2 xl:pb-4 max-w-[200px] flex items-center xl:absolute xl:top-1/2 xl:-translate-y-1/2 right-0 z-[3]">
                        <p class="text-13 font-bold">
                            SORT BY :
                        </p>
                        <div class="form-style line-style xl:border-b border-white border-opacity-25">
                            <select name="sort" id="sort" class="co-form-basic border-0">
                                <option class="text-black" value="0">Lastest</option>
                                <option class="text-black" value="1">Low Price</option>
                                <option class="text-black" value="2">High Price</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="px-4 py-4 mt-4">

                    <div class="member-wrapper -mx-4">

                        <div class="mmb-bck">
                            <div class="order-wrapper">
                                <div class="order-item">
                                    <div class="order-colm colm-nm">
                                        <p class="font-light text-[11px] sm:text-13">Order No.</p>
                                        <p class="font-semibold text-14 md:text-16"><a href="member-order-detail">0001021021234</a></p>
                                    </div>
                                    <div class="order-colm colm-nm">
                                        <p class="font-light text-[11px] sm:text-13">Order Date</p>
                                        <p class="text-13 md:fs-16">19 Jan 2022</p>
                                    </div>
                                    <div class="order-colm colm-nm">
                                        <p class="font-light text-[11px] sm:text-13">Status</p>
                                        <div class="stat-list">
                                            <p class="stat-payment pending">Wait for Payment </p>
                                        </div>
                                    </div>
                                    <div class="order-colm colm-sm">
                                        <p class="font-light text-[11px] sm:text-13">Total</p>
                                        <p class="text-13 md:fs-16">1,064.00 THB</p>
                                    </div>
                                    <div class="order-colm items-center flex">
                                        <div class="full-url flex items-center space-x-3 w-full md:pl-[110px] xl:pl-0 xl:justify-end">
                                            <p class="text-13">View Detail</p><svg width="10" height="15" viewBox="0 0 10 15" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                <path d="M1 1L8 7.5L1 14" stroke="#ffffff" stroke-width="2"></path>
                                            </svg>
                                            <a href="member-order-detail"></a>
                                        </div>
                                    </div>
                                </div>
                                <div class="order-item">
                                    <div class="order-colm colm-nm">
                                        <p class="font-light text-[11px] sm:text-13">Order No.</p>
                                        <p class="font-semibold text-14 md:text-16"><a href="member-order-detail">0001021021234</a></p>
                                    </div>
                                    <div class="order-colm colm-nm">
                                        <p class="font-light text-[11px] sm:text-13">Order Date</p>
                                        <p class="text-13 md:fs-16">19 Jan 2022</p>
                                    </div>
                                    <div class="order-colm colm-nm">
                                        <p class="font-light text-[11px] sm:text-13">Status</p>
                                        <div class="stat-list">
                                            <p class="stat-payment canceled">Expired</p>
                                        </div>
                                    </div>
                                    <div class="order-colm colm-sm">
                                        <p class="font-light text-[11px] sm:text-13">Total</p>
                                        <p class="text-13 md:fs-16">1,064.00 THB</p>
                                    </div>
                                    <div class="order-colm items-center flex">
                                        <div class="full-url flex items-center space-x-3 w-full md:pl-[110px] xl:pl-0 xl:justify-end">
                                            <p class="text-13">View Detail</p><svg width="10" height="15" viewBox="0 0 10 15" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                <path d="M1 1L8 7.5L1 14" stroke="#ffffff" stroke-width="2"></path>
                                            </svg>
                                            <a href="member-order-detail"></a>
                                        </div>
                                    </div>
                                </div>
                                <div class="order-item">
                                    <div class="order-colm colm-nm">
                                        <p class="font-light text-[11px] sm:text-13">Order No.</p>
                                        <p class="font-semibold text-14 md:text-16"><a href="member-order-detail">0001021021234</a></p>
                                    </div>
                                    <div class="order-colm colm-nm">
                                        <p class="font-light text-[11px] sm:text-13">Order Date</p>
                                        <p class="text-13 md:fs-16">19 Jan 2022</p>
                                    </div>
                                    <div class="order-colm colm-nm">
                                        <p class="font-light text-[11px] sm:text-13">Status</p>
                                        <div class="stat-list">
                                            <p class="stat-payment success">Success</p>
                                        </div>
                                    </div>
                                    <div class="order-colm colm-sm">
                                        <p class="font-light text-[11px] sm:text-13">Total</p>
                                        <p class="text-13 md:fs-16">1,064.00 Coins</p>
                                    </div>
                                    <div class="order-colm items-center flex">
                                        <div class="full-url flex items-center space-x-3 w-full md:pl-[110px] xl:pl-0 xl:justify-end">
                                            <p class="text-13">View Detail</p><svg width="10" height="15" viewBox="0 0 10 15" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                <path d="M1 1L8 7.5L1 14" stroke="#ffffff" stroke-width="2"></path>
                                            </svg>
                                            <a href="member-order-detail"></a>
                                        </div>
                                    </div>
                                </div>
                                <div class="order-item">
                                    <div class="order-colm colm-nm">
                                        <p class="font-light text-[11px] sm:text-13">Order No.</p>
                                        <p class="font-semibold text-14 md:text-16"><a href="member-order-detail">0001021021234</a></p>
                                    </div>
                                    <div class="order-colm colm-nm">
                                        <p class="font-light text-[11px] sm:text-13">Order Date</p>
                                        <p class="text-13 md:fs-16">19 Jan 2022</p>
                                    </div>
                                    <div class="order-colm colm-nm">
                                        <p class="font-light text-[11px] sm:text-13">Status</p>
                                        <div class="stat-list">
                                            <p class="stat-payment canceled">Expired</p>
                                        </div>
                                    </div>
                                    <div class="order-colm colm-sm">
                                        <p class="font-light text-[11px] sm:text-13">Total</p>
                                        <p class="text-13 md:fs-16">1,064.00 THB</p>
                                    </div>
                                    <div class="order-colm items-center flex">
                                        <div class="full-url flex items-center space-x-3 w-full md:pl-[110px] xl:pl-0 xl:justify-end">
                                            <p class="text-13">View Detail</p><svg width="10" height="15" viewBox="0 0 10 15" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                <path d="M1 1L8 7.5L1 14" stroke="#ffffff" stroke-width="2"></path>
                                            </svg>
                                            <a href="member-order-detail"></a>
                                        </div>
                                    </div>
                                </div>
                                <div class="order-item">
                                    <div class="order-colm colm-nm">
                                        <p class="font-light text-[11px] sm:text-13">Order No.</p>
                                        <p class="font-semibold text-14 md:text-16"><a href="member-order-detail">0001021021234</a></p>
                                    </div>
                                    <div class="order-colm colm-nm">
                                        <p class="font-light text-[11px] sm:text-13">Order Date</p>
                                        <p class="text-13 md:fs-16">19 Jan 2022</p>
                                    </div>
                                    <div class="order-colm colm-nm">
                                        <p class="font-light text-[11px] sm:text-13">Status</p>
                                        <div class="stat-list">
                                            <p class="stat-payment success">Success</p>
                                        </div>
                                    </div>
                                    <div class="order-colm colm-sm">
                                        <p class="font-light text-[11px] sm:text-13">Total</p>
                                        <p class="text-13 md:fs-16">1,064.00 THB</p>
                                    </div>
                                    <div class="order-colm items-center flex">
                                        <div class="full-url flex items-center space-x-3 w-full md:pl-[110px] xl:pl-0 xl:justify-end">
                                            <p class="text-13">View Detail</p><svg width="10" height="15" viewBox="0 0 10 15" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                <path d="M1 1L8 7.5L1 14" stroke="#ffffff" stroke-width="2"></path>
                                            </svg>
                                            <a href="member-order-detail"></a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="pt-6 mx-auto">
                                <ul class="pgntn rectangle" role="menubar" aria-label="Pagination">
                                    <li><a href=""><span>
                                                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                                                    <path fill-rule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd"></path>
                                                </svg></span></a></li>
                                    <li class="current"><a href="">1</a></li>
                                    <li><a href="">2</a></li>
                                    <li><a href="">3</a></li>
                                    <li><a href="">4</a></li>
                                    <li><a href=""><span>
                                                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                                                    <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path>
                                                </svg></span></a></li>
                                </ul>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
@endsection