@php
    use App\Helpers\PriceHelper;
@endphp
<x-app-layout>
    <x-slot name="header">
        <h2 class="text-3xl font-bold text-gray-800">Payment for Subscription Plan</h2>
    </x-slot>

    <div class="max-w-5xl mx-auto px-4 py-8">
        <div class="grid md:grid-cols-2 gap-8">
            <!-- Plan Details -->
            <div class="bg-white shadow-lg rounded-lg overflow-hidden">
                <div class="bg-blue-600 text-white py-4 px-6">
                    <h3 class="text-2xl font-semibold">Selected Plan: {{ $plan->name }}</h3>
                </div>
                <div class="flex-col justify-end">
                    <div class="p-6">
                        <div class="flex justify-between items-center mb-4">
                            <span class="text-gray-600">Price:</span>
                            <span class="text-2xl font-bold {{ $discountAmount > 0 ? 'line-through text-gray-500' : 'text-blue-600' }}">
                                ${{ number_format($originalPrice, 2) }}
                            </span>
                        </div>
                        @if($discountAmount > 0)
                            <div class="flex justify-between items-center mb-4">
                                <span class="text-gray-600">Discounted Price:</span>
                                <span class="text-2xl font-bold text-green-600">
                                    ${{ PriceHelper::formatPrice($discountedPrice) }}
                                </span>
                            </div>
                            <div class="flex justify-between items-center mb-4">
                                <span class="text-gray-600">You Save:</span>
                                <span class="text-lg font-semibold text-green-600">
                                    ${{ number_format($discountAmount, 2) }}
                                </span>
                            </div>
                            @if($discount)
                                <div class="bg-green-100 border-l-4 border-green-500 text-green-700 p-4 mb-4" role="alert">
                                    <p class="font-bold">Applied Discount: {{ $discount->name }}</p>
                                    <p>{{ $discount->description }}</p>
                                </div>
                            @endif
                        @endif
                        <div class="flex justify-between items-center mb-4">
                            <span class="text-gray-600">Duration:</span>
                            <span class="text-lg font-semibold">
                                @if ($plan->duration_months > 0)
                                {{ $plan->duration_months }} month(s)
                                @else
                                7 days
                                @endif
                            </span>
                        </div>
                        <div class="flex justify-between items-center">
                            <span class="text-gray-600">Services:</span>
                            <span class="text-lg font-semibold">{{ $plan->service_limit ? $plan->service_limit : 'Unlimited' }}</span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Payment Form -->
            <div class="bg-white shadow-lg rounded-lg overflow-hidden">
                <div class="bg-gray-100 py-4 px-6">
                    <h3 class="text-2xl font-semibold text-gray-800">Payment Details</h3>
                </div>
                <x-splade-form action="{{ route('patient.process-payment', $plan) }}" class="p-6" :default="['expiration_month' => date('m'), 'expiration_year' => date('Y')]">
                    <x-splade-input 
                        id="card_number" 
                        name="card_number" 
                        label="Card Number" 
                        placeholder="1234 5678 9012 3456"
                        required 
                        class="mb-4" 
                    />
                    <div class="grid grid-cols-4 gap-4 mb-4">
                        <div class="col-span-3">
                            <label for="expiration_month" class="block text-sm font-medium text-gray-700 mb-1">Expiration Date</label>
                            <div class="grid grid-cols-5 gap-2">
                                <div class="col-span-2">
                                <x-splade-select 
                                    id="expiration_month" 
                                    name="expiration_month" 
                                    required
                                    placeholder="Month"
                                >
                                    @for ($i = 1; $i <= 12; $i++)
                                        <option value="{{ sprintf('%02d', $i) }}">{{ sprintf('%02d', $i) }}</option>
                                    @endfor
                                </x-splade-select>
                                </div>
                                <div class="col-span-3">
                                <x-splade-select 
                                    id="expiration_year" 
                                    name="expiration_year" 
                                    required
                                    placeholder="Year"
                                >
                                    @for ($i = date('Y'); $i <= date('Y') + 10; $i++)
                                        <option value="{{ $i }}">{{ $i }}</option>
                                    @endfor
                                </x-splade-select>
                                </div>
                            </div>
                        </div>
                        <div>
                            <label for="expiration_month" class="block text-sm font-medium text-gray-700 mb-1">CVV</label>
                            <x-splade-input 
                                id="cvv" 
                                name="cvv" 
                                :label="false" 
                                placeholder="123"
                                required 
                            />
                        </div>
                    </div>
                    <x-splade-submit label="Complete Payment" class="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded transition duration-200" />
                </x-splade-form>
            </div>
        </div>

        <!-- Additional Information -->
        <div class="mt-8 bg-gray-100 rounded-lg p-6">
            <h4 class="text-lg font-semibold mb-2">Secure Payment</h4>
            <p class="text-gray-600">Your payment information is encrypted and secure. We do not store your full credit card details.</p>
        </div>
    </div>
</x-app-layout>