@extends('layouts.customer')

@section('content')
<div class="page-content flex justify-center items-center min-h-screen bg-gray-100 p-4">
    <div class="paywall-container w-full max-w-lg">
        <div class="paywall-card bg-white rounded-2xl shadow-lg overflow-hidden">
            
            <!-- Header -->
            <div class="text-center bg-gradient-to-r from-purple-600 to-blue-500 text-white py-8 px-6">
                <div class="text-6xl mb-4 animate-pulse">⭐</div>
                <h1 class="text-2xl font-bold mb-2">Unlock Premium Shipping Benefits</h1>
                <p class="text-gray-200 text-sm">Enjoy exclusive benefits and save money on every shipment</p>
            </div>

            @php
                $prices = [
                    'monthly' => setting('premium_fee_monthly', 20),
                    'quarterly' => setting('premium_fee_quarterly', 50),
                    'annual' => setting('premium_fee_yearly', 150),
                ];
                $currentPlan = $subscription->plan ?? 'monthly';
            @endphp

            <!-- Plan Selection Form -->
            <form action="{{ route('customer.subscription.upgrade.store') }}" method="POST" class="p-6 space-y-6">
                @csrf
                
                <div>
                    <label class="block text-sm font-semibold mb-2 text-gray-700">Select Your Plan</label>
                    <select name="plan" id="plan-select"
                        class="w-full border border-gray-300 rounded-lg p-3 text-gray-700 focus:ring-2 focus:ring-blue-400 focus:border-transparent"
                        onchange="updatePrice(this.value)">
                        @foreach($prices as $plan => $price)
                            <option value="{{ $plan }}" @if($currentPlan === $plan) selected @endif>
                                {{ ucfirst($plan) }} (£{{ $price }})
                            </option>
                        @endforeach
                    </select>
                </div>

                <!-- Price Display -->
                <div class="text-center">
                    <div id="plan-price" class="text-3xl font-extrabold text-gray-900 mb-1">
                        £{{ $prices[$currentPlan] }}
                    </div>
                    <div class="text-gray-500 text-sm">Plan Cost</div>
                </div>

                <!-- Action Buttons -->
                <div class="flex flex-col md:flex-row gap-4">
                    <button type="submit"
                        class="bg-gradient-to-r from-purple-600 to-blue-500 text-white font-semibold rounded-lg py-3 flex-1 hover:opacity-90 transition">
                        Continue to Payment
                    </button>
                    <a href="{{ route('customer.dashboard') }}"
                        class="bg-gray-200 text-gray-800 font-semibold rounded-lg py-3 flex-1 hover:bg-gray-300 text-center transition">
                        Continue as Normal User
                    </a>
                </div>

                <p class="text-center text-gray-400 text-sm mt-4">
                    Dashboard access is limited until premium subscription is activated
                </p>

            </form>
        </div>
    </div>
</div>

<script>
    const planPrices = @json($prices);

    function updatePrice(plan) {
        document.getElementById('plan-price').textContent = '£' + planPrices[plan].toLocaleString();
    }

    // Ensure the price is correct on page load
    document.addEventListener('DOMContentLoaded', function() {
        const selectedPlan = document.getElementById('plan-select').value;
        updatePrice(selectedPlan);
    });
</script>
@endsection