@extends('layouts.portal')

@section('title', 'Select Trust Type')
@section('page_title', 'Select Trust Type')
@section('page_subtitle', 'for ' . $client->full_name)

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

@section('content')
    <!-- Modern Header with Gradient Colors -->
    <div class="bg-gradient-to-r from-blue-600 via-blue-700 to-blue-800 border-b border-blue-700 p-8 relative overflow-hidden">
        <!-- Decorative Bubbles -->
        <div class="absolute top-0 right-0 w-64 h-64 bg-white rounded-full -mr-32 -mt-32 opacity-10"></div>
        
        <div class="w-full relative z-10">
            <div class="flex flex-col lg:flex-row justify-between items-start lg:items-center gap-6">
                <div class="flex items-center gap-5">
                    <div class="w-16 h-16 bg-white rounded-xl flex items-center justify-center shadow-lg border border-blue-200">
                        <i class="fas fa-shield-alt text-blue-600 text-2xl"></i>
                    </div>
                    <div>
                        <h1 class="text-3xl font-semibold text-white tracking-wide" style="font-family: 'Inter', sans-serif;">Select Trust Type</h1>
                        <p class="text-blue-100 mt-1" style="font-family: 'Inter', sans-serif;">Choose the appropriate trust type for {{ $client->full_name }}</p>
                    </div>
                </div>
                <div class="flex items-center gap-3">
                    <div class="text-right">
                        <p class="text-sm text-blue-200" style="font-family: 'Inter', sans-serif;">Step</p>
                        <p class="text-lg font-bold text-white" style="font-family: 'Inter', sans-serif;">1 of 3</p>
                    </div>
                    <div class="w-32 bg-blue-900 h-2 rounded-full overflow-hidden">
                        <div class="bg-white h-2" style="width: 33%"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Breadcrumb -->
    <div class="w-full px-8 mb-6 pt-8">
        <div class="flex items-center text-sm text-gray-600" style="font-family: 'Inter', sans-serif;">
            <a href="{{ route('agent.clients.index') }}" class="hover:text-gray-900">My Clients</a>
            <i class="fas fa-chevron-right mx-2 text-xs"></i>
            <a href="{{ route('agent.clients.show', $client) }}" class="hover:text-gray-900">{{ $client->full_name }}</a>
            <i class="fas fa-chevron-right mx-2 text-xs"></i>
            <span class="text-gray-900">Select Trust Type</span>
        </div>
    </div>
    
    @if(session('error'))
        <div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded mb-4 flex items-center">
            <i class="fas fa-exclamation-triangle mr-2"></i>
            {{ session('error') }}
        </div>
    @endif

    <!-- Trust Type Selection Form -->
    <form action="{{ route('agent.trusts.details-form', $client) }}" method="GET" class="bg-white rounded-xl shadow-lg border border-gray-100 p-8 relative overflow-hidden">
        <!-- Decorative Bubbles -->
        <div class="absolute top-0 right-0 w-32 h-32 bg-gradient-to-br from-blue-100 to-blue-200 rounded-full -mr-16 -mt-16 opacity-30"></div>
        <div class="absolute bottom-0 left-0 w-24 h-24 bg-gradient-to-br from-blue-50 to-blue-100 rounded-full -ml-12 -mb-12 opacity-20"></div>
        
        <div class="relative z-10">
            <div class="mb-8">
                <div class="flex items-center gap-3 mb-6">
                    <div class="w-12 h-12 bg-blue-200 rounded-xl flex items-center justify-center">
                        <i class="fas fa-shield-alt text-white text-xl"></i>
                    </div>
                    <div>
                        <h3 class="text-2xl font-bold text-gray-700" style="font-family: 'Inter', sans-serif;">Choose Trust Type</h3>
                        <p class="text-gray-600 text-lg" style="font-family: 'Inter', sans-serif;">Select the appropriate trust type based on the client's needs and circumstances</p>
                    </div>
                </div>
                
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <!-- Testamentary Trust -->
                    <div class="border-2 border-gray-200 rounded-xl p-6 hover:border-blue-300 transition-all cursor-pointer group">
                        <label class="cursor-pointer flex items-start">
                            <input type="radio" name="trust_type" value="testamentary" required class="mt-1 mr-3">
                            <div class="flex-1 text-center">
                                <div class="w-20 h-20 bg-blue-100 rounded-full flex items-center justify-center mb-4 mx-auto group-hover:bg-blue-200 transition-colors">
                                    <i class="fas fa-file-contract text-2xl" style="color: #2563eb;"></i>
                                </div>
                                <h4 class="text-lg font-semibold text-gray-900 mb-2">Testamentary Trust</h4>
                                <p class="text-sm text-gray-600 text-center">Created through a will, takes effect after death</p>
                                <div class="mt-4 space-y-2">
                                    <div class="flex items-center text-sm text-gray-500">
                                        <i class="fas fa-check text-blue-500 mr-2"></i>
                                        Created via will
                                    </div>
                                    <div class="flex items-center text-sm text-gray-500">
                                        <i class="fas fa-check text-blue-500 mr-2"></i>
                                        Post-death activation
                                    </div>
                                    <div class="flex items-center text-sm text-gray-500">
                                        <i class="fas fa-check text-blue-500 mr-2"></i>
                                        Cost-effective
                                    </div>
                                </div>
                            </div>
                        </label>
                    </div>

                    <!-- Living Trust -->
                    <div class="border-2 border-gray-200 rounded-xl p-6 hover:border-blue-300 transition-all cursor-pointer group">
                        <label class="cursor-pointer flex items-start">
                            <input type="radio" name="trust_type" value="living_trust" required class="mt-1 mr-3">
                            <div class="flex-1 text-center">
                                <div class="w-20 h-20 bg-blue-100 rounded-full flex items-center justify-center mb-4 mx-auto group-hover:bg-blue-200 transition-colors">
                                    <i class="fas fa-heart text-2xl" style="color: #2563eb;"></i>
                                </div>
                                <h4 class="text-lg font-semibold text-gray-900 mb-2">Living Trust</h4>
                                <p class="text-sm text-gray-600 text-center">Active during lifetime of grantor</p>
                                <div class="mt-4 space-y-2">
                                    <div class="flex items-center text-sm text-gray-500">
                                        <i class="fas fa-check text-blue-500 mr-2"></i>
                                        Active immediately
                                    </div>
                                    <div class="flex items-center text-sm text-gray-500">
                                        <i class="fas fa-check text-blue-500 mr-2"></i>
                                        Avoid probate
                                    </div>
                                    <div class="flex items-center text-sm text-gray-500">
                                        <i class="fas fa-check text-blue-500 mr-2"></i>
                                        Privacy protection
                                    </div>
                                </div>
                            </div>
                        </label>
                    </div>

                    <!-- Family Legacy Trust -->
                    <div class="border-2 border-gray-200 rounded-xl p-6 hover:border-blue-300 transition-all cursor-pointer group">
                        <label class="cursor-pointer flex items-start">
                            <input type="radio" name="trust_type" value="family_legacy" required class="mt-1 mr-3">
                            <div class="flex-1 text-center">
                                <div class="w-20 h-20 bg-blue-100 rounded-full flex items-center justify-center mb-4 mx-auto group-hover:bg-blue-200 transition-colors">
                                    <i class="fas fa-home text-2xl" style="color: #2563eb;"></i>
                                </div>
                                <h4 class="text-lg font-semibold text-gray-900 mb-2">Family Legacy Trust</h4>
                                <p class="text-sm text-gray-600 text-center">Preserve and grow family wealth</p>
                                <div class="mt-4 space-y-2">
                                    <div class="flex items-center text-sm text-gray-500">
                                        <i class="fas fa-check text-blue-500 mr-2"></i>
                                        Multi-generational
                                    </div>
                                    <div class="flex items-center text-sm text-gray-500">
                                        <i class="fas fa-check text-blue-500 mr-2"></i>
                                        Tax efficient
                                    </div>
                                    <div class="flex items-center text-sm text-gray-500">
                                        <i class="fas fa-check text-blue-500 mr-2"></i>
                                        Long-term wealth
                                    </div>
                                </div>
                            </div>
                        </label>
                    </div>

                    <!-- Retirement Trust -->
                    <div class="border-2 border-gray-200 rounded-xl p-6 hover:border-blue-300 transition-all cursor-pointer group">
                        <label class="cursor-pointer flex items-start">
                            <input type="radio" name="trust_type" value="retirement" required class="mt-1 mr-3">
                            <div class="flex-1 text-center">
                                <div class="w-20 h-20 bg-blue-100 rounded-full flex items-center justify-center mb-4 mx-auto group-hover:bg-blue-200 transition-colors">
                                    <i class="fas fa-piggy-bank text-2xl" style="color: #2563eb;"></i>
                                </div>
                                <h4 class="text-lg font-semibold text-gray-900 mb-2">Retirement Trust</h4>
                                <p class="text-sm text-gray-600 text-center">Plan for retirement income</p>
                                <div class="mt-4 space-y-2">
                                    <div class="flex items-center text-sm text-gray-500">
                                        <i class="fas fa-check text-blue-500 mr-2"></i>
                                        Income planning
                                    </div>
                                    <div class="flex items-center text-sm text-gray-500">
                                        <i class="fas fa-check text-blue-500 mr-2"></i>
                                        Tax benefits
                                    </div>
                                    <div class="flex items-center text-sm text-gray-500">
                                        <i class="fas fa-check text-blue-500 mr-2"></i>
                                        Longevity protection
                                    </div>
                                </div>
                            </div>
                        </label>
                    </div>

                    <!-- Business Trust -->
                    <div class="border-2 border-gray-200 rounded-xl p-6 hover:border-blue-300 transition-all cursor-pointer group">
                        <label class="cursor-pointer flex items-start">
                            <input type="radio" name="trust_type" value="business" required class="mt-1 mr-3">
                            <div class="flex-1 text-center">
                                <div class="w-20 h-20 bg-blue-100 rounded-full flex items-center justify-center mb-4 mx-auto group-hover:bg-blue-200 transition-colors">
                                    <i class="fas fa-briefcase text-2xl" style="color: #2563eb;"></i>
                                </div>
                                <h4 class="text-lg font-semibold text-gray-900 mb-2">Business Trust</h4>
                                <p class="text-sm text-gray-600 text-center">Manage business succession</p>
                                <div class="mt-4 space-y-2">
                                    <div class="flex items-center text-sm text-gray-500">
                                        <i class="fas fa-check text-blue-500 mr-2"></i>
                                        Business succession
                                    </div>
                                    <div class="flex items-center text-sm text-gray-500">
                                        <i class="fas fa-check text-blue-500 mr-2"></i>
                                        Liability protection
                                    </div>
                                    <div class="flex items-center text-sm text-gray-500">
                                        <i class="fas fa-check text-blue-500 mr-2"></i>
                                        Continuity planning
                                    </div>
                                </div>
                            </div>
                        </label>
                    </div>
                </div>
            </div>

            <!-- Form Actions -->
            <div class="flex flex-col md:flex-row gap-4 justify-between mt-8">
                <a href="{{ route('agent.trusts.create') }}" class="px-6 py-3 border border-gray-300 text-gray-700 rounded-xl hover:bg-gray-50 transition-colors font-medium">
                    <i class="fas fa-arrow-left mr-2"></i>Back to Client Selection
                </a>
                <div class="flex gap-3">
                    <a href="{{ route('agent.clients.index') }}" class="px-6 py-3 border border-gray-300 text-gray-700 rounded-xl hover:bg-gray-50 transition-colors font-medium">
                        <i class="fas fa-users mr-2"></i>My Clients
                    </a>
                    <button type="submit" class="px-6 py-3 bg-blue-600 text-white rounded-xl hover:bg-blue-700 transition-colors font-medium">
                        <i class="fas fa-arrow-right mr-2"></i>Add Trustee Details
                    </button>
                </div>
            </div>
        </div>
    </form>
@endsection