@extends('layouts.app')

@section('content')

<div class="bg-white rounded-lg">

    <!-- HEADER -->
    <div class="text-center max-w-5xl mx-auto mb-8">
        <h1 class="text-2xl md:text-3xl font-extrabold text-gray-900 tracking-tight">
            Pengurusan Pelan Langganan
        </h1>

        <p class="text-gray-600 mt-2 text-base">
            Lihat pelan semasa dan tukar kepada pelan yang lebih sesuai untuk koperasi anda.
        </p>

        @if(!empty($subscription))
            <div class="mt-4 inline-flex items-center gap-3 bg-white border px-4 py-2 rounded-lg shadow-sm text-sm">
                <span class="text-gray-500">
                    Pelan Semasa:
                </span>

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

                <span class="text-gray-400">•</span>

                <span class="text-gray-600">
                    Tamat pada
                    <strong>{{ $subscription->ends_at->format('d M Y') }}</strong>
                </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


    <!-- PLAN CARDS -->
    <div class="flex flex-wrap items-stretch justify-center gap-8 max-w-6xl mx-auto">

        <!-- TRIAL -->
        <div class="w-72 bg-white border border-gray-300 rounded-xl p-6 text-center shadow-lg">
            <p class="font-semibold text-lg mt-3">
                Trial
            </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-7 w-full py-2 rounded-lg bg-gray-200 text-gray-500 font-semibold cursor-not-allowed">
                Pelan Percubaan
            </button>
        </div>

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

        @php
            $isCurrent = $subscription && $subscription->package->name == $package->name;
        @endphp

        <div class="relative w-72 
            {{ $package->name == 'Gold'
                ? 'bg-yellow-600 text-white border-yellow-600 shadow-xl'
                : 'bg-gray-800 text-white border-gray-200 shadow-xl' }}
            border rounded-xl p-6 text-center transition">

            @if($package->name == 'Gold')
                <span class="absolute top-4 left-4 px-3 py-1 text-xs font-semibold bg-yellow-800 rounded-full text-white">
                    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-white-100' : 'text-white' }}">
                    / tahun
                </span>
            </h2>

            @if($package->name == 'Gold')
                <ul class="mt-6 space-y-2 text-sm text-left {{ $package->name == 'Gold' ? 'text-white' : 'text-white' }}">
                    <li class="flex items-center gap-2">✔ Anggota tanpa had</li>
                    <li class="flex items-center gap-2">✔ Semua modul utama</li>
                    <li class="flex items-center gap-2">✔ Export PDF </li>
                    <li class="flex items-center gap-2">✔ Sokongan sistem</li>
                </ul>
            @else
                <ul class="mt-6 space-y-2 text-sm text-left {{ $package->name == 'Gold' ? 'text-white' : 'text-white' }}">
                    <li class="flex items-center gap-2">✔ Anggota tanpa had</li>
                    <li class="flex items-center gap-2">✔ Modul Anggota Sahaja</li>
                    <li class="flex items-center gap-2">✔ Export PDF (Anggota sahaja)</li>
                    <li class="flex items-center gap-2">✔ Sokongan sistem</li>
                </ul>
            @endif

            @if($isCurrent)
                <button
                    disabled
                    class="mt-6 w-full py-2 rounded-lg bg-gray-200 text-gray-500 font-semibold cursor-not-allowed">
                    Pelan Semasa
                </button>
            @else
                <a href="{{ route('payment.start', ['package' => $package->name]) }}"
                    class="mt-6 block w-full py-2 rounded-lg font-semibold
                    {{ $package->name == 'Gold'
                            ? 'bg-white text-yellow-800 hover:bg-gray-100'
                            : 'bg-indigo-500 text-white hover:bg-indigo-600' }}
                    hover:scale-[1.02] active:scale-95 transition-all">
                    Tukar Pelan
                </a>
            @endif
        </div>
        @endforeach
    </div>
</div>
@endsection