@extends('layouts.portal')

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

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




@section('content')
    <!-- Progress Steps -->
    <div class="mb-8">
        <div class="flex items-center justify-between">
            <div class="flex items-center">
                <div class="w-10 h-10 rounded-full bg-gradient-to-r from-[#772B10] to-[#8B3D15] flex items-center justify-center text-white font-bold">1</div>
                <div class="ml-3">
                    <p class="text-sm font-medium text-gray-800">Will Details</p>
                    <p class="text-xs text-gray-500">Current step</p>
                </div>
            </div>
            <div class="flex-1 h-1 bg-gray-200 mx-4"></div>
            <div class="flex items-center opacity-50">
                <div class="w-10 h-10 rounded-full bg-gray-200 flex items-center justify-center text-gray-600 font-bold">2</div>
                <div class="ml-3">
                    <p class="text-sm font-medium text-gray-800">Beneficiaries</p>
                </div>
            </div>
            <div class="flex-1 h-1 bg-gray-200 mx-4"></div>
            <div class="flex items-center opacity-50">
                <div class="w-10 h-10 rounded-full bg-gray-200 flex items-center justify-center text-gray-600 font-bold">3</div>
                <div class="ml-3">
                    <p class="text-sm font-medium text-gray-800">Assets</p>
                </div>
            </div>
            <div class="flex-1 h-1 bg-gray-200 mx-4"></div>
            <div class="flex items-center opacity-50">
                <div class="w-10 h-10 rounded-full bg-gray-200 flex items-center justify-center text-gray-600 font-bold">4</div>
                <div class="ml-3">
                    <p class="text-sm font-medium text-gray-800">Review</p>
                </div>
            </div>
        </div>
    </div>

    <form action="{{ route('agent.wills.type.select', $client) }}" method="POST" class="bg-white rounded-xl shadow-lg border border-gray-100 p-8">
        @csrf
        
        <!-- Agent Information Summary -->
        <div class="mb-8 p-6 bg-gradient-to-r from-[#772B10]/10 to-[#8B3D15]/10 rounded-xl border-2 border-[#772B10]/30">
            <h4 class="text-lg font-semibold text-[#772B10] mb-4 flex items-center">
                <div class="w-8 h-8 bg-gradient-to-r from-[#772B10] to-[#8B3D15] rounded-full flex items-center justify-center mr-3">
                    <i class="fas fa-user-tie text-white text-sm inline"></i>
                </div>
                Agent Information
            </h4>
            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                <div>
                    <label class="text-sm font-medium text-[#772B10]/80">Agent Name</label>
                    <p class="text-[#772B10] font-medium">{{ auth()->user()->name }}</p>
                </div>
                <div>
                    <label class="text-sm font-medium text-[#772B10]/80">Agent Email</label>
                    <p class="text-[#772B10] font-medium">{{ auth()->user()->email }}</p>
                </div>
                <div>
                    <label class="text-sm font-medium text-[#772B10]/80">Contact</label>
                    <p class="text-[#772B10] font-medium">{{ auth()->user()->phone ?? 'N/A' }}</p>
                </div>
            </div>
        </div>

        <!-- Client Information Summary -->
        <div class="mb-8 p-6 bg-gradient-to-r from-gray-50 to-gray-100 rounded-xl border-2 border-gray-200">
            <h4 class="text-lg font-semibold text-gray-800 mb-4 flex items-center">
                <div class="w-8 h-8 bg-gradient-to-r from-gray-600 to-gray-700 rounded-full flex items-center justify-center mr-3">
                    <i class="fas fa-user text-white text-sm inline"></i>
                </div>
                Client Information
            </h4>
            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                <div>
                    <label class="text-sm font-medium text-gray-600">Name</label>
                    <p class="text-gray-900 font-medium">{{ $client->full_name }}</p>
                </div>
                <div>
                    <label class="text-sm font-medium text-gray-600">IC Number</label>
                    <p class="text-gray-900 font-medium">{{ $client->ic_number }}</p>
                </div>
                <div>
                    <label class="text-sm font-medium text-gray-600">Contact</label>
                    <p class="text-gray-900 font-medium">{{ $client->phone }}</p>
                </div>
            </div>
        </div>

        <!-- Will Type Selection -->
        <div class="mb-8">
            <div class="bg-white rounded-lg border border-gray-200 p-4 mb-6 shadow-sm">
                <h4 class="text-lg font-semibold text-gray-800 flex items-center">
                    <span class="w-8 h-8 bg-gradient-to-r from-[#772B10] to-[#8B3D15] text-white rounded-full flex items-center justify-center text-sm font-bold mr-3">1</span>
                    Will Type Selection
                </h4>
                <p class="text-sm text-gray-600 mt-1 ml-11">Choose the type of will to create</p>
            </div>
            
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div class="relative">
                    <input type="radio" id="will_type_individual" name="will_type" value="individual" required class="peer sr-only">
                    <label for="will_type_individual" class="block p-6 border-2 rounded-xl cursor-pointer transition-all peer-checked:border-[#772B10] peer-checked:bg-[#772B10]/5 hover:border-gray-300">
                        <div class="flex items-start">
                            <div class="flex-shrink-0">
                                <div class="w-12 h-12 bg-gradient-to-r from-[#772B10]/20 to-[#8B3D15]/20 rounded-full flex items-center justify-center">
                                    <i class="fas fa-user text-[#772B10] text-xl inline"></i>
                                </div>
                            </div>
                            <div class="ml-4">
                                <h5 class="text-lg font-semibold text-gray-900">Individual Will</h5>
                                <p class="text-sm text-gray-600 mt-1">Standard will for a single person with specific beneficiaries and asset distribution.</p>
                                <div class="mt-3">
                                    <div class="text-xs text-gray-500 mb-2">Flow includes:</div>
                                    <div class="flex flex-wrap gap-1">
                                        <span class="inline-block px-2 py-1 bg-[#772B10]/10 text-[#772B10] rounded text-xs">Testator</span>
                                        <span class="inline-block px-2 py-1 bg-[#772B10]/10 text-[#772B10] rounded text-xs">Beneficiaries</span>
                                        <span class="inline-block px-2 py-1 bg-[#772B10]/10 text-[#772B10] rounded text-xs">Assets</span>
                                        <span class="inline-block px-2 py-1 bg-[#772B10]/10 text-[#772B10] rounded text-xs">Liabilities</span>
                                        <span class="inline-block px-2 py-1 bg-[#772B10]/10 text-[#772B10] rounded text-xs">Gifts</span>
                                        <span class="inline-block px-2 py-1 bg-[#772B10]/10 text-[#772B10] rounded text-xs">Donations</span>
                                        <span class="inline-block px-2 py-1 bg-[#772B10]/10 text-[#772B10] rounded text-xs">Witnesses</span>
                                    </div>
                                </div>
                                <div class="mt-3 flex items-center text-[#772B10]">
                                    <i class="fas fa-check-circle mr-2 text-[#772B10] inline"></i>
                                    <span class="text-sm font-medium">Most Common Choice</span>
                                </div>
                            </div>
                        </div>
                    </label>
                </div>
                
                <div class="relative">
                    <input type="radio" id="will_type_trust" name="will_type" value="trust" required class="peer sr-only">
                    <label for="will_type_trust" class="block p-6 border-2 rounded-xl cursor-pointer transition-all peer-checked:border-teal-500 peer-checked:bg-teal-50 hover:border-gray-300">
                        <div class="flex items-start">
                            <div class="flex-shrink-0">
                                <div class="w-12 h-12 bg-gradient-to-r from-teal-100 to-teal-200 rounded-full flex items-center justify-center">
                                    <i class="fas fa-shield-alt text-teal-700 text-xl inline"></i>
                                </div>
                            </div>
                            <div class="ml-4">
                                <h5 class="text-lg font-semibold text-gray-900">Trust Will</h5>
                                <p class="text-sm text-gray-600 mt-1">Creates a trust to manage assets for beneficiaries, ideal for minor children or special needs.</p>
                                <div class="mt-3">
                                    <div class="text-xs text-gray-500 mb-2">Flow includes:</div>
                                    <div class="flex flex-wrap gap-1">
                                        <span class="inline-block px-2 py-1 bg-teal-100 text-teal-700 rounded text-xs">Testator</span>
                                        <span class="inline-block px-2 py-1 bg-teal-100 text-teal-700 rounded text-xs">Trustees</span>
                                        <span class="inline-block px-2 py-1 bg-teal-100 text-teal-700 rounded text-xs">Beneficiaries</span>
                                        <span class="inline-block px-2 py-1 bg-teal-100 text-teal-700 rounded text-xs">Assets</span>
                                        <span class="inline-block px-2 py-1 bg-teal-100 text-teal-700 rounded text-xs">Liabilities</span>
                                        <span class="inline-block px-2 py-1 bg-teal-100 text-teal-700 rounded text-xs">Allowances</span>
                                        <span class="inline-block px-2 py-1 bg-teal-100 text-teal-700 rounded text-xs">Gifts</span>
                                        <span class="inline-block px-2 py-1 bg-teal-100 text-teal-700 rounded text-xs">Donations</span>
                                        <span class="inline-block px-2 py-1 bg-teal-100 text-teal-700 rounded text-xs">Witnesses</span>
                                    </div>
                                </div>
                                <div class="mt-3 flex items-center text-teal-600">
                                    <i class="fas fa-shield-alt mr-2 text-teal-700 inline"></i>
                                    <span class="text-sm font-medium">Asset Protection</span>
                                </div>
                            </div>
                        </div>
                    </label>
                </div>
            </div>
        </div>

        <!-- Submit Actions -->
        <div class="flex flex-col md:flex-row gap-4 justify-end">
            <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 text-gray-600 inline"></i>Cancel
            </a>
            <button type="submit" class="px-6 py-3 bg-gradient-to-r from-[#772B10] to-[#8B3D15] text-white rounded-xl hover:from-[#8B3D15] hover:to-[#9F4F1A] transition-all font-medium">
                <i class="fas fa-arrow-right mr-2 text-white inline"></i>Continue to Will Creation
            </button>
        </div>
    </form>
@endsection