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

@section('content')
<div class="page-header-wrapper mt-12">
    <h1 class="page-header">Top Up Coins</h1>
    <div class="img-wrapper">
        <img src="{{ Module::asset('frontend:img/topup.svg') }}" alt="Top Up Coins">
    </div>
</div>
    <div class="container pt-6 lg:pt-10 relative pb-8 flex flex-col md:flex-row gap-8">
            <div class="cart-table">
                <div class="payment-method-list" id="payment-method-list">
                    <p class="text-16 font-semibold">Payment Method</p>
                    @for ($i = 1; $i < 8; $i++)
                        <div class="payment-method-item form-style basic-check-radio">
                            <label for="payment-method-{{$i}}">
                                Payment Method {{$i}}
                            </label>
                            <input type="radio" name="payment-method" id="payment-method-{{$i}}">
                        </div>
                    @endfor
                </div>
            </div>
            <div class="cart-summary bg-primary rounded-none">
                <div class="p-5 flex items-center justify-between">
                    <div class="font-semibold text-18">Summary</div>
                    <div class="font-semibold text-18">1,614 THB</div>
                </div>
                <div class="px-4">
                    <div class="flex flex-col justify-between items-center p-5 border border-gray-300 border-opacity-20 rounded-md">
                        <div class="flex w-full  items-center justify-between">
                            <p class="font-medium">Pay With</p>
                            <p>True Money</p>
                        </div>
                        <hr class="w-full">
                        <div class="text-12 opacity-50 flex w-full  items-center justify-between">
                            <p class="font-medium">Payment Fee</p>
                            <p>200 THB</p>
                        </div>
                    </div>
                </div>
                <div class="px-4 py-6">
                    <div class="w-full mb-5 form-style basic-check-radio">
                        <label class="static text-14 space-x-1 leading-6 " for="service">
                            I agree and accept 
                            <a href="#pdf"><u>Privacy Policy</u></a>
                        </label>
                        <input id="service" type="checkbox" class="bg-transparent mt-[6px]">
                    </div>
                    <button class="button-primary hover:border-opacity-30 px-3 !py-1 flex items-center justify-between w-full -mt-1">
                        <div class="font-medium text-14">
                            Pay Now
                        </div>
                        <div>
                            <span class="font-semibold text-20 text-secondary">
                                1,814.00
                            </span>
                            <span class="text-14 text-secondary">
                                THB
                            </span>
                        </div>
                    </button>
                </div>
            </div>
    </div>
@endsection