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

@section('content')
<div class="page-header-wrapper mt-12">
    <h1 class="page-header">Package</h1>
    <div class="img-wrapper">
        <img src="{{ Module::asset('frontend:img/package.svg') }}" alt="Package">
    </div>
</div>
    <div class="container relative pt-6 lg:pt-10 flex flex-col md:flex-row gap-8">
            <div class="cart-table">
                <div class="package-detail">
                    <div class="package-card border-none">
                        <div class="img-wrapper">
                            <img src="{{ Module::asset('frontend:img/pk1.jpg') }}" alt="Package Name">
                        </div>
                        <div class="text-editor">
                            <p class="text-16 font-bold">
                                Lorem ipsum dolor sit amet, consectetur
                                consectetur adipiscing elit,
                            </p>
                            <p class="text-13">
                                Lorem ipsum dolor sit amet, consectetur
                                adipiscing elit, Lorem ipsum dolor sit amet,
                                consectetur adipiscing elit, Lorem ipsum dolor sit amet, 
                                consectetur adipiscing elit, Lorem ipsum dolor sit amet,
                                consectetur adipiscing elit,
                            </p>
                            <ul class="text-13">
                                <li>Lorem ipsum dolor sit amet, consectetur</li>
                                <li>adipiscing elit, Lorem ipsum dolor sit amet,</li>
                                <li>consectetur adipiscing elit, Lorem ipsum dolor sit amet, </li>
                                <li>consectetur adipiscing elit, Lorem ipsum dolor sit amet,</li>
                                <li>consectetur adipiscing elit,</li>
                            </ul>
                            <img src="{{ Module::asset('frontend:img/pk2.jpg') }}" alt="Package Name">
                            <p class="text-13">
                                Lorem ipsum dolor sit amet, consectetur
                                adipiscing elit, Lorem ipsum dolor sit amet,
                                consectetur adipiscing elit, Lorem ipsum dolor sit amet, 
                                consectetur adipiscing elit, Lorem ipsum dolor sit amet,
                                consectetur adipiscing elit,
                            </p>
                        </div>
                    </div>
                </div>
                <br>
                <hr>
                <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 text-center">
                    <div class="font-semibold text-18">Choosen Package</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">
                        <p class="font-medium">Package Name</p>
                        <div class="package-card-price ">
                            <p class="text-secondary">1,800 THB</p>
                            <p class="text-secondary">/ mo</p>
                        </div>
                        <div class=" mt-4 text-13">
                            <u>
                                <a href="package">
                                    Change Package
                                </a>
                            </u>
                        </div>
                    </div>
                    <div class="flex mt-2 flex-col justify-between items-center p-5 border border-gray-300 border-opacity-20 rounded-md">
                        <button class="button-primary w-full text-12">
                            <a href="#payment-method-list">
                                Choose Payment Method
                            </a>
                        </button>
                    </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-[5px]">
                    </div>
                    <button class="button-primary w-full bg-white text-black hover:bg-[#912e54] -mt-1">Complete Order</button>
                </div>
            </div>
    </div>
@endsection