@extends('layouts.setup')

@section('content')

<div class="bg-gradient-to-b from-indigo-50 to-white py-6 rounded-lg shadow-xl">

    <!-- HEADER -->
    <div class="text-center max-w-6xl mx-auto mb-3">

        <h1 class="text-2xl md:text-3xl font-extrabold text-gray-900 tracking-tight">
            Tempoh Percubaan Telah Tamat
        </h1>

        <p class="text-gray-600 mt-1 text-base">
            Untuk terus menggunakan sistem Koop Compliance System, sila pilih pakej
            langganan yang sesuai dengan keperluan koperasi anda.
        </p>

        @if(!empty($subscription))
        <div class="mt-3 text-sm text-gray-600">

            Pakej semasa:

            <span class="font-semibold text-indigo-600">
                {{ ucfirst($subscription->package->name) }}
            </span>

            • Tamat pada

            <span class="font-semibold">
                {{ $subscription->ends_at->format('d M Y') }}
            </span>

        </div>
        @endif

    </div>


    @if(session('info'))
        <div class="max-w-4xl mx-auto mb-6 p-4 bg-blue-50 text-blue-700 rounded-lg text-sm">
            {{ session('info') }}
        </div>
    @endif


    <!-- PRICING CARDS -->
    <div class="flex flex-wrap items-stretch justify-center gap-8">

        <!-- TRIAL CARD -->
        <div class="w-72 bg-white text-gray-800 border border-gray-200
                    rounded-xl p-6 pb-14 text-center shadow-sm">

            <p class="font-semibold text-lg mt-4">
                Trial (Percubaan)
            </p>

            <h2 class="text-3xl font-bold mt-2">
                RM0
                <span class="text-gray-500 text-sm font-normal">/ percubaan</span>
            </h2>

            <ul class="mt-6 space-y-2 text-sm text-gray-600 text-left">

                <li class="flex items-center gap-2">
                    ✔ Pengurusan asas koperasi
                </li>

                <li class="flex items-center gap-2">
                    ✔ Maksimum 20 anggota
                </li>

                <li class="flex items-center gap-2">
                    ✖ Export PDF
                </li>

                <li class="flex items-center gap-2">
                    ✖ Ciri lanjutan
                </li>

            </ul>

            <button
                disabled
                class="mt-8 w-full py-2 rounded-lg bg-gray-200 text-gray-500
                       font-semibold cursor-not-allowed">

                Pakej Percubaan

            </button>

        </div>



        <!-- PACKAGES FROM DATABASE -->
        @foreach($packages as $package)

        <div class="w-72 
            {{ $package->name == 'gold' ? 'bg-indigo-500 text-white border-indigo-600 shadow-xl' : 'bg-white text-gray-800 border-gray-200 shadow-sm hover:shadow-md' }}
            border rounded-xl p-6 pb-14 text-center transition">

            @if($package->name == 'gold')

            <span class="absolute top-4 left-4 px-3 py-1 text-xs font-semibold
                         bg-indigo-700 rounded-full">

                Disyorkan

            </span>

            @endif


            <p class="font-semibold text-lg mt-4">
                {{ ucfirst($package->name) }}
            </p>


            <h2 class="text-3xl font-bold mt-2">

                RM {{ number_format($package->price) }}

                <span class="text-sm font-normal
                    {{ $package->name == 'gold' ? 'text-indigo-100' : 'text-gray-500' }}">
                    / tahun
                </span>

            </h2>


            <ul class="mt-6 space-y-2 text-sm text-left
                {{ $package->name == 'gold' ? 'text-white' : 'text-gray-600' }}">

                <li class="flex items-center gap-2">
                    ✔ Anggota tanpa had
                </li>

                <li class="flex items-center gap-2">
                    ✔ Export PDF
                </li>

                <li class="flex items-center gap-2">
                    ✔ Semua modul utama
                </li>

                <li class="flex items-center gap-2">
                    ✔ Sokongan sistem
                </li>

            </ul>


            <a href="{{ route('payment.start', ['package' => $package->name]) }}"
               class="mt-8 block w-full py-2 rounded-lg font-semibold
               {{ $package->name == 'gold'
                    ? 'bg-white text-indigo-600 hover:bg-gray-100'
                    : 'bg-indigo-500 text-white hover:bg-indigo-600' }}
               hover:scale-[1.02] active:scale-95 transition-all">

                Naik Taraf

            </a>

        </div>

        @endforeach

    </div>

</div>

@endsection