@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.onboarding-sidebar', ['step' => 6, 'client' => $client])
@endsection

@section('content')
    <div class="mb-8">
        <h2 class="text-2xl font-bold text-gray-800 mb-2">Select Your Package</h2>
        <p class="text-gray-600">Choose the package that best fits your estate planning needs</p>
    </div>

    <!-- Package Selection -->
    <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
        <!-- Basic Package -->
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden hover:shadow-lg transition-shadow">
            <div class="p-6">
                <h3 class="text-xl font-bold text-gray-800 mb-2">Basic</h3>
                <div class="mb-4">
                    <span class="text-3xl font-bold text-gray-800">$99</span>
                    <span class="text-gray-500">/will</span>
                </div>
                <ul class="space-y-3 mb-6">
                    <li class="flex items-start">
                        <i class="fas fa-check text-green-500 mt-1 mr-3"></i>
                        <span class="text-gray-600">Individual Will</span>
                    </li>
                    <li 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>
                    </li>
                    <li 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>
                    </li>
                    <li class="flex items-start">
                        <i class="fas fa-check text-green-500 mt-1 mr-3"></i>
                        <span class="text-gray-600">Standard Review</span>
                    </li>
                    <li class="flex items-start">
                        <i class="fas fa-times text-gray-300 mt-1 mr-3"></i>
                        <span class="text-gray-400">Trust Setup</span>
                    </li>
                    <li class="flex items-start">
                        <i class="fas fa-times text-gray-300 mt-1 mr-3"></i>
                        <span class="text-gray-400">Priority Support</span>
                    </li>
                </ul>
                <button onclick="selectPackage('basic', 99)" class="w-full py-3 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 font-medium">
                    Select Basic
                </button>
            </div>
        </div>

        <!-- Standard Package -->
        <div class="bg-white rounded-xl shadow-sm border-2 border-blue-500 overflow-hidden hover:shadow-lg transition-shadow relative">
            <div class="absolute top-0 right-0 bg-blue-500 text-white px-3 py-1 text-sm font-medium">
                Most Popular
            </div>
            <div class="p-6">
                <h3 class="text-xl font-bold text-gray-800 mb-2">Standard</h3>
                <div class="mb-4">
                    <span class="text-3xl font-bold text-blue-600">$299</span>
                    <span class="text-gray-500">/will</span>
                </div>
                <ul class="space-y-3 mb-6">
                    <li class="flex items-start">
                        <i class="fas fa-check text-green-500 mt-1 mr-3"></i>
                        <span class="text-gray-600">Individual Will</span>
                    </li>
                    <li class="flex items-start">
                        <i class="fas fa-check text-green-500 mt-1 mr-3"></i>
                        <span class="text-gray-600">Advanced Asset Distribution</span>
                    </li>
                    <li class="flex items-start">
                        <i class="fas fa-check text-green-500 mt-1 mr-3"></i>
                        <span class="text-gray-600">Up to 10 Beneficiaries</span>
                    </li>
                    <li class="flex items-start">
                        <i class="fas fa-check text-green-500 mt-1 mr-3"></i>
                        <span class="text-gray-600">Professional Review</span>
                    </li>
                    <li class="flex items-start">
                        <i class="fas fa-check text-green-500 mt-1 mr-3"></i>
                        <span class="text-gray-600">Basic Trust Setup</span>
                    </li>
                    <li class="flex items-start">
                        <i class="fas fa-check text-green-500 mt-1 mr-3"></i>
                        <span class="text-gray-600">Email Support</span>
                    </li>
                </ul>
                <button onclick="selectPackage('standard', 299)" class="w-full octowill-btn text-white py-3 rounded-lg font-medium">
                    Select Standard
                </button>
            </div>
        </div>

        <!-- Premium Package -->
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden hover:shadow-lg transition-shadow">
            <div class="p-6">
                <h3 class="text-xl font-bold text-gray-800 mb-2">Premium</h3>
                <div class="mb-4">
                    <span class="text-3xl font-bold text-gray-800">$599</span>
                    <span class="text-gray-500">/will</span>
                </div>
                <ul class="space-y-3 mb-6">
                    <li class="flex items-start">
                        <i class="fas fa-check text-green-500 mt-1 mr-3"></i>
                        <span class="text-gray-600">Individual & Trust Will</span>
                    </li>
                    <li class="flex items-start">
                        <i class="fas fa-check text-green-500 mt-1 mr-3"></i>
                        <span class="text-gray-600">Complex Asset Planning</span>
                    </li>
                    <li 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>
                    </li>
                    <li class="flex items-start">
                        <i class="fas fa-check text-green-500 mt-1 mr-3"></i>
                        <span class="text-gray-600">Expert Legal Review</span>
                    </li>
                    <li class="flex items-start">
                        <i class="fas fa-check text-green-500 mt-1 mr-3"></i>
                        <span class="text-gray-600">Advanced Trust Setup</span>
                    </li>
                    <li class="flex items-start">
                        <i class="fas fa-check text-green-500 mt-1 mr-3"></i>
                        <span class="text-gray-600">Priority Phone Support</span>
                    </li>
                </ul>
                <button onclick="selectPackage('premium', 599)" class="w-full py-3 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 font-medium">
                    Select Premium
                </button>
            </div>
        </div>
    </div>

    <!-- Payment Form (Hidden by default) -->
    <div id="paymentForm" class="hidden bg-white rounded-xl shadow-sm p-6">
        <h3 class="text-lg font-semibold text-gray-800 mb-4">Complete Your Payment</h3>
        
        <form id="paymentFormElement" action="{{ route('client.will.payment.process', $will) }}" method="POST">
            @csrf
            <input type="hidden" id="selectedPackage" name="package" value="">
            <input type="hidden" id="selectedAmount" name="amount" value="">
            
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">Package Selected</label>
                    <input type="text" id="packageDisplay" class="w-full px-4 py-2 border border-gray-300 rounded-lg bg-gray-50" readonly>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">Amount</label>
                    <input type="text" id="amountDisplay" class="w-full px-4 py-2 border border-gray-300 rounded-lg bg-gray-50" readonly>
                </div>
            </div>
            
            <div class="mb-4">
                <label class="block text-sm font-medium text-gray-700 mb-2">Payment Method</label>
                <div class="space-y-2">
                    <label class="flex items-center">
                        <input type="radio" name="payment_method" value="credit_card" class="mr-2" checked>
                        <span>Credit/Debit Card</span>
                    </label>
                    <label class="flex items-center">
                        <input type="radio" name="payment_method" value="bank_transfer" class="mr-2">
                        <span>Bank Transfer</span>
                    </label>
                    <label class="flex items-center">
                        <input type="radio" name="payment_method" value="paypal" class="mr-2">
                        <span>PayPal</span>
                    </label>
                </div>
            </div>
            
            <div class="flex gap-3">
                <button type="button" onclick="cancelPayment()" class="px-6 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50">
                    Cancel
                </button>
                <button type="submit" class="octowill-btn text-white px-6 py-2 rounded-lg">
                    Proceed to Payment
                </button>
            </div>
        </form>
    </div>
@endsection

@section('scripts')
<script>
function selectPackage(packageType, amount) {
    document.getElementById('selectedPackage').value = packageType;
    document.getElementById('selectedAmount').value = amount;
    document.getElementById('packageDisplay').value = packageType.charAt(0).toUpperCase() + packageType.slice(1) + ' Package';
    document.getElementById('amountDisplay').value = '$' + amount;
    document.getElementById('paymentForm').classList.remove('hidden');
    
    // Scroll to payment form
    document.getElementById('paymentForm').scrollIntoView({ behavior: 'smooth' });
}

function cancelPayment() {
    document.getElementById('paymentForm').classList.add('hidden');
    document.getElementById('selectedPackage').value = '';
    document.getElementById('selectedAmount').value = '';
}
</script>
@endsection