@extends('layouts.customer')

@section('content')
<div class="max-w-7xl mx-auto py-12 px-4">

    <h2 class="text-4xl font-bold text-center mb-8 text-indigo-700">Premium Dashboard</h2>

    <!-- Subscription Info -->
    @if($subscription)
    <div class="bg-gradient-to-r from-indigo-500 to-purple-600 text-white p-6 rounded-xl shadow-lg mb-8">
        <h3 class="text-2xl font-semibold mb-2">Your Premium Plan</h3>
        <p class="text-lg">Plan: <span class="font-bold">{{ $subscription->plan->name }}</span></p>
        <p class="text-lg">Price: £{{ number_format($subscription->fee, 2) }}</p>
        <p class="text-lg">Expires At:
            <span class="font-semibold">
                {{ \Carbon\Carbon::parse($subscription->expires_at)->format('d M, Y') }}
            </span>
        </p>

        <p class="text-sm mt-2 opacity-80">Enjoy exclusive rewards, shipping perks, and referral bonuses!</p>
    </div>
    @else
    <div class="bg-red-500 text-white p-6 rounded-xl shadow-lg mb-8 text-center">
        <p class="font-semibold">You don’t have an active premium subscription yet.</p>
    </div>
    @endif

    <!-- Points Cards -->
    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
        <!-- Total Points -->
        <div class="bg-indigo-600 text-white rounded-xl shadow-lg p-6 text-center hover:scale-105 transform transition">
            <h3 class="text-xl font-semibold mb-2">Total Points</h3>
            <p class="text-4xl font-bold">{{ $totalPoints }}</p>
        </div>

        <!-- Shipping Points -->
        <div class="bg-green-600 text-white rounded-xl shadow-lg p-6 text-center hover:scale-105 transform transition">
            <h3 class="text-xl font-semibold mb-2">Shipping Points</h3>
            <p class="text-4xl font-bold">{{ $shippingPoints }}</p>
        </div>

        <!-- Referral Points -->
        <div class="bg-yellow-500 text-white rounded-xl shadow-lg p-6 text-center hover:scale-105 transform transition">
            <h3 class="text-xl font-semibold mb-2">Referral Points</h3>
            <p class="text-4xl font-bold">{{ $referralPoints }}</p>
        </div>
    </div>

    <!-- Optional: Progress Bar for points -->
    <div class="mt-10 bg-white rounded-xl shadow p-6">
        <h3 class="text-xl font-semibold mb-3">Points Progress</h3>
        @php
        $nextReward = 1000; // example threshold
        $percent = min(100, ($totalPoints / $nextReward) * 100);
        @endphp
        <div class="w-full bg-gray-200 rounded-full h-6">
            <div class="bg-indigo-500 h-6 rounded-full" style="width: {{ $percent }}%"></div>
        </div>
        <p class="mt-2 text-gray-700 text-sm">You are {{ $totalPoints }} points out of {{ $nextReward }} points for your
            next reward!</p>
    </div>
</div>
@endsection