@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">
                Order Payment
            </h2>
        </div>
    </div>
    <div class="lg:container px-4 lg:px-0 pb-12 md:pb-16">
        {{-- <div class="container relative"> --}}
        <form class="flex flex-col md:flex-row gap-4 md:gap-8" action="{{ url('complete') }}">
            <div class="cart-table">
                <div class="cart-row">
                    <div class="">
                        <h2 class="text-18 font-bold">Order No. 323948DSSDU8834</h2>
                        <h2 class="text-16 font-medium">Order User : Mekha Fahwapwap</h2>
                        <h2 class="text-16 font-medium">Order Date : 19 Jan 2022</h2>
                    </div>
                </div>
                    <div class="cart-row">
                        <div class="relative w-full">
                            <div class="com-tax-request">
                                <div class="font-semibold text-18 mb-2">Delivery Address</div>
                                <p>1776228838490</p>
                                <p><span class="mr-2 font-semibold tracking-wide">Company Name</span> (099-222-4445)</p>
                                <div class="flex">
                                    <div>
                                        <p>1 SE 282nd Rd. Vital Avenue Oregon Bangkok 11220</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="cart-row">
                    <div class="com-tax-request">
                            <div class="font-semibold text-18 mb-2">Tax Invoice Address</div>
                            <p>1776228838490</p>
                            <p><span class="mr-2 font-semibold tracking-wide">Company Name</span> (099-222-4445)</p>
                            <div class="flex">
                                <div>
                                    <p>1 SE 282nd Rd. Vital Avenue Oregon Bangkok 11220</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="cart-row">
                        <div class="relative w-full">
                            <div class="font-semibold text-18 mb-2">Payment Method</div>
                            @for ($i = 1; $i < 4; $i++)
                                <div class="payment-method-item form-style basic-check-radio">
                                    <label for="payment-method-{{ $i }}">
                                        <div class="flex">
                                            @switch($i)
                                                @case(1)
                                                    <p>
                                                        QR Payment
                                                    </p>
                                                @break
    
                                                @case(2)
                                                    <p>
                                                        Bank Transfer
                                                    </p>
                                                @break
                                                @case(3)
                                                    <p>
                                                        Credit/Debit Card
                                                    </p>
                                                @break
                                            @endswitch
                                        </div>
                                    </label>
                                    <input type="radio" name="payment-method" id="payment-method-{{ $i }}">
                                </div>
                            @endfor
                        </div>
                    </div>
                </div>
                <div class="cart-summary mx-auto rounded-none">
                    <div class="bg-glass">
                        <div class="px-1">
                            <div class="smry-space">
                                <div class="smry-wrapper">
                                    <div class="smry-sm">
                                        <h4 class="font-semibold">Summary</h4>
                                    </div>
                                </div>
                                <div class="smry-wrapper">
                                    <div class="smry-sm">3 items</div>
                                    <div class="smry-sm">8,064 THB</div>
                                </div>
                                <div class="smry-wrapper opacity-60">
                                    <div class="smry-sm text-12"><i>Delivery Fee</i></div>
                                    <div class="smry-sm">90 THB</div>
                                </div>
                                <div class="smry-wrapper opacity-60">
                                    <div class="smry-sm text-12"><i>Discount</i></div>
                                    <div class="smry-sm text-12"><i>-90 THB</i></div>
                                </div>
                            </div>
                        </div>
    
                        <div class="smry-space -mt-4">
                            <div class="flex mt-2 flex-col justify-between items-center">
                                <div class="smry-wrapper w-full">
                                    <div class="smry-xl font-bold text-20">Total :</div>
                                    <div class="smry-xl ">
                                        <span class="font-bold text-24">18,000 </span> <span class="font-bold">THB</span>
                                    </div>
                                </div>
                            </div>
                        </div>
    
                        <div class="px-3 pb-6">
                            <button type="submit" class="button-primary w-full -mt-1 font-bold hover:shadow-md">Pay Now</button>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>
@endsection