@extends('layouts.portal')

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

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

@php
    // Helper function to map package types to will types
    function getWillTypeFromPackageType($packageType) {
        $mapping = [
            'individual_will' => 'individual',
            'trust_will' => 'trust',
            'islamic_will' => 'islamic',
            'joint_will' => 'joint',
            'simple_will' => 'individual',
            'couples_will' => 'joint',
            'will_with_trust' => 'trust',
        ];
        return $mapping[$packageType] ?? 'individual';
    }
    
    // Get the effective will type for the client
    $effectiveWillType = getWillTypeFromPackageType($client->will_type_preference);
@endphp

@section('content')
    <!-- Modern Header with Gradient Colors -->
    <div class="bg-gradient-to-r from-green-600 via-green-700 to-green-800 border-b border-green-700 p-8 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 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-green-200">
                        <i class="fas fa-file-contract text-green-600 text-2xl"></i>
                    </div>
                    <div>
                        <h1 class="text-3xl font-semibold text-white tracking-wide" style="font-family: 'Inter', sans-serif;">Select Will Type</h1>
                        <p class="text-green-100 mt-1" style="font-family: 'Inter', sans-serif;">Choose the appropriate will type for {{ $client->full_name }}</p>
                    </div>
                </div>
                <div class="flex items-center gap-3">
                    <div class="text-right">
                        <p class="text-sm text-green-200" style="font-family: 'Inter', sans-serif;">Progress</p>
                        <p class="text-lg font-bold text-white" style="font-family: 'Inter', sans-serif;">Complete</p>
                    </div>
                    <div class="w-32 bg-green-900 h-2 rounded-full overflow-hidden">
                        <div class="bg-white h-2" style="width: 100%"></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 Will 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

    <!-- Will Type Selection Form -->
    <form action="{{ route('agent.wills.type.select', $client) }}" method="POST" class="bg-white rounded-xl shadow-lg border border-gray-100 p-8 overflow-hidden">
        <!-- Decorative Bubbles -->
        <div class="absolute top-0 right-0 w-32 h-32 bg-gradient-to-br from-green-100 to-green-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-green-50 to-green-100 rounded-full -ml-12 -mb-12 opacity-20"></div>
        
        <div class="z-10">
            @csrf
            
            <div class="mb-8">
                <div class="flex items-center gap-3 mb-6">
                    <div class="w-12 h-12 bg-green-200 rounded-xl flex items-center justify-center">
                        <i class="fas fa-file-contract text-white text-xl"></i>
                    </div>
                    <div>
                        <h3 class="text-2xl font-bold text-gray-700" style="font-family: 'Inter', sans-serif;">Choose Will Type</h3>
                        <p class="text-gray-600 text-lg" style="font-family: 'Inter', sans-serif;">Select the appropriate will type based on the client's needs and circumstances</p>
                        @if($client->will_type_preference)
                            <p class="text-sm text-blue-600 mt-2">Current preference: {{ $client->will_type_preference }} (mapped to: {{ $effectiveWillType }})</p>
                        @endif
                    </div>
                </div>
                
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <!-- Individual Will Option -->
                    <div class="border-2 border-gray-200 rounded-xl p-6 hover:border-green-300 transition-all cursor-pointer group {{ $effectiveWillType === 'individual' ? 'border-green-500 bg-green-50' : '' }}">
                        <label class="cursor-pointer flex items-start">
                            <input type="radio" name="will_type" value="individual" {{ $effectiveWillType === 'individual' ? 'checked' : '' }} required class="mt-1 mr-3">
                            <div class="flex-1 text-center">
                                <div class="w-20 h-20 bg-green-100 rounded-full flex items-center justify-center mb-4 mx-auto group-hover:bg-green-200 transition-colors">
                                    <i class="fas fa-user text-2xl" style="color: #16a34a;"></i>
                                </div>
                                <h4 class="text-lg font-semibold text-gray-900 mb-2">Individual Will</h4>
                                <p class="text-sm text-gray-600 text-center">Standard last will and testament for individuals</p>
                                <div class="mt-4 space-y-2">
                                    <div class="flex items-center text-sm text-gray-500">
                                        <i class="fas fa-check text-green-500 mr-2"></i>
                                        Simple and straightforward
                                    </div>
                                    <div class="flex items-center text-sm text-gray-500">
                                        <i class="fas fa-check text-green-500 mr-2"></i>
                                        Direct asset distribution
                                    </div>
                                    <div class="flex items-center text-sm text-gray-500">
                                        <i class="fas fa-check text-green-500 mr-2"></i>
                                        Most common option
                                    </div>
                                </div>
                            </div>
                        </label>
                    </div>

                    <!-- Trust Will Option -->
                    <div class="border-2 border-gray-200 rounded-xl p-6 hover:border-green-300 transition-all cursor-pointer group {{ $effectiveWillType === 'trust' ? 'border-green-500 bg-green-50' : '' }}">
                        <label class="cursor-pointer flex items-start">
                            <input type="radio" name="will_type" value="trust" {{ $effectiveWillType === 'trust' ? 'checked' : '' }} required class="mt-1 mr-3">
                            <div class="flex-1 text-center">
                                <div class="w-20 h-20 bg-green-100 rounded-full flex items-center justify-center mb-4 mx-auto group-hover:bg-green-200 transition-colors">
                                    <i class="fas fa-shield-alt text-2xl" style="color: #16a34a;"></i>
                                </div>
                                <h4 class="text-lg font-semibold text-gray-900 mb-2">Trust Will</h4>
                                <p class="text-sm text-gray-600 text-center">Will with trust provisions for asset management</p>
                                <div class="mt-4 space-y-2">
                                    <div class="flex items-center text-sm text-gray-500">
                                        <i class="fas fa-check text-green-500 mr-2"></i>
                                        Trust-based asset protection
                                    </div>
                                    <div class="flex items-center text-sm text-gray-500">
                                        <i class="fas fa-check text-green-500 mr-2"></i>
                                        Professional trustee management
                                    </div>
                                    <div class="flex items-center text-sm text-gray-500">
                                        <i class="fas fa-check text-green-500 mr-2"></i>
                                        Long-term asset planning
                                    </div>
                                </div>
                            </div>
                        </label>
                    </div>

                    <!-- Islamic Will (Wasiat) Option -->
                    <div class="border-2 border-gray-200 rounded-xl p-6 hover:border-green-300 transition-all cursor-pointer group {{ $effectiveWillType === 'islamic' ? 'border-green-500 bg-green-50' : '' }}">
                        <label class="cursor-pointer flex items-start">
                            <input type="radio" name="will_type" value="islamic" {{ $effectiveWillType === 'islamic' ? 'checked' : '' }} required class="mt-1 mr-3">
                            <div class="flex-1 text-center">
                                <div class="w-20 h-20 bg-green-100 rounded-full flex items-center justify-center mb-4 mx-auto group-hover:bg-green-200 transition-colors">
                                    <i class="fas fa-mosque text-2xl" style="color: #16a34a;"></i>
                                </div>
                                <h4 class="text-lg font-semibold text-gray-900 mb-2">Islamic Will (Wasiat)</h4>
                                <p class="text-sm text-gray-600 text-center">Compliant with Islamic inheritance law</p>
                                <div class="mt-4 space-y-2">
                                    <div class="flex items-center text-sm text-gray-500">
                                        <i class="fas fa-check text-green-500 mr-2"></i>
                                        Shariah compliant
                                    </div>
                                    <div class="flex items-center text-sm text-gray-500">
                                        <i class="fas fa-check text-green-500 mr-2"></i>
                                        Faraid distribution
                                    </div>
                                    <div class="flex items-center text-sm text-gray-500">
                                        <i class="fas fa-check text-green-500 mr-2"></i>
                                        Religious requirements
                                    </div>
                                </div>
                            </div>
                        </label>
                    </div>

                    <!-- Joint Will Option -->
                    <div class="border-2 border-gray-200 rounded-xl p-6 hover:border-green-300 transition-all cursor-pointer group {{ $effectiveWillType === 'joint' ? 'border-green-500 bg-green-50' : '' }}">
                        <label class="cursor-pointer flex items-start">
                            <input type="radio" name="will_type" value="joint" {{ $effectiveWillType === 'joint' ? 'checked' : '' }} required class="mt-1 mr-3">
                            <div class="flex-1 text-center">
                                <div class="w-20 h-20 bg-green-100 rounded-full flex items-center justify-center mb-4 mx-auto group-hover:bg-green-200 transition-colors">
                                    <i class="fas fa-users text-2xl" style="color: #16a34a;"></i>
                                </div>
                                <h4 class="text-lg font-semibold text-gray-900 mb-2">Joint Will</h4>
                                <p class="text-sm text-gray-600 text-center">For couples with shared assets</p>
                                <div class="mt-4 space-y-2">
                                    <div class="flex items-center text-sm text-gray-500">
                                        <i class="fas fa-check text-green-500 mr-2"></i>
                                        Mirror wills for couples
                                    </div>
                                    <div class="flex items-center text-sm text-gray-500">
                                        <i class="fas fa-check text-green-500 mr-2"></i>
                                        Shared asset planning
                                    </div>
                                    <div class="flex items-center text-sm text-gray-500">
                                        <i class="fas fa-check text-green-500 mr-2"></i>
                                        Mutual beneficiaries
                                    </div>
                                </div>
                            </div>
                        </label>
                    </div>
                </div>
            </div>

            
            <!-- Form Actions -->
            <div class="flex flex-col md:flex-row gap-4 justify-between">
                <a href="{{ route('agent.clients.show', $client) }}" 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
                </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>Back to Clients
                    </a>
                    <button type="submit" class="px-6 py-3 bg-green-600 text-white rounded-xl hover:bg-green-700 transition-colors font-medium">
                        <i class="fas fa-arrow-right mr-2"></i>Continue to Will Creation
                    </button>
                </div>
            </div>
        </div>
    </form>
@endsection