@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="flex flex-wrap -mx-2 xs:-mx-4">
            @for ($example = 1; $example < 3; $example++)
                @for ($i = 1; $i < 5; $i++)
                    <div class="w-full tn:w-1/2 lg:w-1/3 2xl:w-1/4 p-2 xs:p-4">
                        {{-- Slide Item --}}
                        <div class="package-card">
                            <a href="checkout">
                                <div class="img-wrapper">
                                    <img src="{{ Module::asset('frontend:img/pk'.$i.'.jpg') }}" alt="Package Name">
                                </div>
                            </a>
                            <div class="package-card-content">
                                <a href="checkout">
                                    <div class="package-card-title">
                                        <p>Package Name</p>
                                    </div>
                                    <div class="package-card-price">
                                        <p>1,800 THB</p>
                                        <p>/ mo</p>
                                    </div>
                                    <div class="package-card-detail">
                                        <p>
                                            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>
                                </a>
                            </div>
                        </div>
                    </div>

                @endfor
            @endfor
        </div>

    </div>
@endsection