@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">
                    Quotation 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='4' />
            </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-quotation" class="flex space-x-2">
                        <img src="{{ Module::asset('frontend:img/back.svg') }}" alt="Back to Order">
                        <h4 class="font-semibold capitalize">
                            Quotation 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>
                            Quotation 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">
                            Wait to Recieve
                        </div>
                        <div class="stat-payment canceled-bg mx-3">
                            Canceled
                        </div>
                        <div class="stat-payment success-bg mx-3">
                            Success
                        </div> --}}
                    </div>
                    <div class="p-4 sm:py-2 flex flex-col items-end gap-2">
                        <div class="flex flex-col sm:flex-row items-center gap-2">
                            <div class="flex items-center gap-2">
                                <button type="button" class="flex items-center gap-2 px-3 py-1 rounded-sm bg-primary ">
                                    <p class="text-12 text-white">Download PDF</p>
                                    <img src="{{ Module::asset('frontend:img/dow.svg') }}" alt="Download PDF" class="w-5 h-5">
                                </button>
                                <button type="button" class="flex items-center gap-2 px-3 py-1 rounded-sm bg-primary ">
                                    <p class="text-12 text-white">Attach PO</p>
                                    <img src="{{ Module::asset('frontend:img/att.svg') }}" alt="Attach PO" class="w-5 h-5">
                                </button>
                            </div>
                            <p class="hidden sm:block">|</p>
                            <button type="button" class="mt-2 sm:mt-0 text-12 px-3 py-1 rounded-sm bg-white text-primary border-primary border">Cancel Quotation</button>
                        </div>
                        <p class="text-[10px] sm:mr-[150px]">companypo-filesname.pdf</p>
                    </div>
                </div>

                <div class="pb-3 mt-4 flex flex-col gap-1">
                    <div class="member-profile-wrapper">
                        <div class="member-profile-title">
                            <p>
                                Quotation 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>
                                Quotation 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>
                                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">
                                        <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</p>
                                            <p class="text-[10px] mr-[.5rem] 2xl:!pb-0">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>
                                        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>
                </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