@extends('layouts.portal')

@section('title', 'Select Package')
@section('page_title', 'Choose Your Package')
@section('page_subtitle', 'Select the best package for your needs')

@section('sidebar')
    @include('client.partials.sidebar', ['active' => 'wills'])
@endsection

@section('content')
<!-- DEBUG START -->
<!-- DEBUG END -->

<div class="min-h-screen bg-gradient-to-br from-amber-50 via-white to-orange-50 py-8">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <!-- Header -->
        <div class="mb-8">
            <div class="flex items-center justify-between mb-4">
                <div class="flex items-center space-x-3">
                    <div class="w-10 h-10 bg-amber-600 rounded-full flex items-center justify-center text-white font-semibold">
                        <i class="fas fa-credit-card"></i>
                    </div>
                    <div>
                        <h1 class="text-2xl font-bold text-gray-900">Select Package</h1>
                        <p class="text-sm text-gray-600">Choose the package that best fits your estate planning needs</p>
                    </div>
                </div>
                <div class="text-right">
                    <h2 class="text-lg font-semibold text-gray-800">Octowill</h2>
                    <p class="text-sm text-gray-600">Client Portal</p>
                </div>
            </div>
        </div>

        <!-- Will Information -->
        <div class="bg-white rounded-xl shadow-lg border border-gray-100 p-6 mb-8">
            <div class="flex items-center justify-between">
                <div>
                    <h3 class="text-lg font-semibold text-gray-800 mb-2">Will Information</h3>
                    <div class="space-y-1">
                        <p class="text-sm text-gray-600">Will Type: <span class="font-medium">{{ $will->will_type === 'individual' ? 'Individual Will' : 'Trust Will' }}</span></p>
                        <p class="text-sm text-gray-600">Will ID: <span class="font-medium">#{{ $will->id }}</span></p>
                        <p class="text-sm text-gray-600">Created: <span class="font-medium">{{ $will->created_at ? $will->created_at->format('d M Y') : 'N/A' }}</span></p>
                    </div>
                </div>
                <div class="text-right">
                    <div class="w-16 h-16 bg-amber-100 rounded-full flex items-center justify-center">
                        <i class="fas fa-file-contract text-amber-600 text-2xl"></i>
                    </div>
                </div>
            </div>
        </div>

        <!-- Package Selection -->
        <!-- DEBUG: Package count: {{ $packages->count() }} -->
        <!-- DEBUG: Will ID: {{ $will->id ?? 'NULL' }} -->
        <!-- DEBUG: Will exists: {{ $will ? 'YES' : 'NO' }} -->
        <!-- DEBUG: Client ID: {{ $client->id ?? 'NULL' }} -->
        <!-- DEBUG: Packages variable type: {{ get_class($packages) }} -->
        <!-- DEBUG: First package: {{ $packages->first() ? $packages->first()->name : 'NONE' }} -->
        <!-- DEBUG: SQL Query: {{ App\Models\Package::where('is_active', true)->toSql() }} -->
        @if($packages->count() > 0)
            @if($will && $will->id)
                <form action="{{ route('client.will.payment.process', ['will' => $will->id]) }}" method="POST" class="space-y-6">
                    @csrf
                    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                    @foreach($packages as $package)
                        <div class="bg-white rounded-xl shadow-lg border-2 border-gray-200 overflow-hidden hover:shadow-xl transition-all duration-300 hover:border-amber-300">
                            <!-- Package Header -->
                            <div class="bg-gradient-to-r from-amber-500 to-orange-500 p-4">
                                <h3 class="text-xl font-bold text-white mb-2">{{ $package->name }}</h3>
                                <div class="flex items-baseline">
                                    <span class="text-3xl font-bold text-white">RM{{ number_format($package->price, 2) }}</span>
                                    <span class="text-amber-100 ml-2">{{ $package->type }}</span>
                                </div>
                            </div>
                            
                            <!-- Package Content -->
                            <div class="p-6">
                                <div class="mb-6">
                                    <p class="text-gray-600 text-sm mb-4">{{ $package->description }}</p>
                                    
                                    <!-- Package Features -->
                                    <div class="space-y-3">
                                        @if($package->type === 'simple_will')
                                            <div class="flex items-start">
                                                <i class="fas fa-check text-green-500 mt-1 mr-3"></i>
                                                <span class="text-gray-600">Individual Will Creation</span>
                                            </div>
                                            <div class="flex items-start">
                                                <i class="fas fa-check text-green-500 mt-1 mr-3"></i>
                                                <span class="text-gray-600">Basic Asset Distribution</span>
                                            </div>
                                            <div class="flex items-start">
                                                <i class="fas fa-check text-green-500 mt-1 mr-3"></i>
                                                <span class="text-gray-600">Up to 3 Beneficiaries</span>
                                            </div>
                                        @elseif($package->type === 'will_with_trust')
                                            <div class="flex items-start">
                                                <i class="fas fa-check text-green-500 mt-1 mr-3"></i>
                                                <span class="text-gray-600">Will with Trust Setup</span>
                                            </div>
                                            <div class="flex items-start">
                                                <i class="fas fa-check text-green-500 mt-1 mr-3"></i>
                                                <span class="text-gray-600">Advanced Asset Protection</span>
                                            </div>
                                            <div class="flex items-start">
                                                <i class="fas fa-check text-green-500 mt-1 mr-3"></i>
                                                <span class="text-gray-600">Unlimited Beneficiaries</span>
                                            </div>
                                            <div class="flex items-start">
                                                <i class="fas fa-check text-green-500 mt-1 mr-3"></i>
                                                <span class="text-gray-600">Trust Management</span>
                                            </div>
                                        @endif
                                    </div>
                                </div>
                                
                                <!-- Package Selection -->
                                <div class="space-y-3">
                                    <label class="flex items-center cursor-pointer">
                                        <input type="radio" name="package_id" value="{{ $package->id }}" class="mr-3 text-amber-600 focus:ring-amber-500" required>
                                        <span class="text-gray-700 font-medium">Select this package</span>
                                    </label>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>

                <!-- Payment Method Selection -->
                <div class="bg-white rounded-xl shadow-lg border border-gray-100 p-6">
                    <h3 class="text-lg font-semibold text-gray-800 mb-4">Payment Method</h3>
                    <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                        <label class="flex items-center p-4 border-2 border-gray-200 rounded-lg cursor-pointer hover:border-amber-300 transition-colors">
                            <input type="radio" name="payment_method" value="credit_card" class="mr-3 text-amber-600 focus:ring-amber-500" required>
                            <div>
                                <i class="fas fa-credit-card text-amber-600 mr-2"></i>
                                <span class="text-gray-700">Credit Card</span>
                            </div>
                        </label>
                        <label class="flex items-center p-4 border-2 border-gray-200 rounded-lg cursor-pointer hover:border-amber-300 transition-colors">
                            <input type="radio" name="payment_method" value="bank_transfer" class="mr-3 text-amber-600 focus:ring-amber-500" required>
                            <div>
                                <i class="fas fa-university text-amber-600 mr-2"></i>
                                <span class="text-gray-700">Bank Transfer</span>
                            </div>
                        </label>
                        <label class="flex items-center p-4 border-2 border-gray-200 rounded-lg cursor-pointer hover:border-amber-300 transition-colors">
                            <input type="radio" name="payment_method" value="paypal" class="mr-3 text-amber-600 focus:ring-amber-500" required>
                            <div>
                                <i class="fab fa-paypal text-amber-600 mr-2"></i>
                                <span class="text-gray-700">PayPal</span>
                            </div>
                        </label>
                    </div>
                </div>

                <!-- Submit Button -->
                <div class="text-center">
                    <button type="submit" class="bg-gradient-to-r from-amber-600 to-orange-600 text-white px-8 py-4 rounded-lg font-semibold hover:from-amber-700 hover:to-orange-700 transition-all duration-300 transform hover:scale-105 shadow-lg">
                        <i class="fas fa-lock mr-2"></i>
                        Proceed to Payment
                    </button>
                    <p class="text-sm text-gray-500 mt-3">
                        <i class="fas fa-shield-alt mr-1"></i>
                        Your payment information is secure and encrypted
                    </p>
                </div>
            </form>
        @else
            <div class="text-center py-12">
                <i class="fas fa-box-open text-gray-400 text-5xl mb-4"></i>
                <h3 class="text-xl font-semibold text-gray-800 mb-2">No Packages Available</h3>
                <p class="text-gray-600">Please contact support to set up packages for your account.</p>
            </div>
        @endif
        @endif
    </div>
</div>
@endsection