@extends('layouts.portal')

@section('title', 'Will Overview - ' . (is_string($will->testator_details) ? (json_decode($will->testator_details, true)['primary']['full_name'] ?? 'Will') : (is_array($will->testator_details) ? ($will->testator_details['primary']['full_name'] ?? 'Will') : 'Will')))
@section('page_title', 'Will Overview')
@section('page_subtitle', 'Your Will Document')

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

@section('content')
    <!-- Gradient Header -->
    <div class="bg-gradient-to-br from-emerald-600 via-emerald-700 to-emerald-800 rounded-2xl p-8 mb-8 relative overflow-hidden shadow-2xl">
        <!-- Decorative Bubbles -->
        <div class="absolute top-0 right-0 w-32 h-32 bg-white rounded-full -mr-16 -mt-16 opacity-10"></div>
        <div class="absolute bottom-0 left-0 w-24 h-24 bg-white rounded-full -ml-12 -mb-12 opacity-10"></div>
        
        <div class="relative z-10">
            <div class="flex items-center justify-between mb-6">
                <div class="flex items-center gap-4">
                    <div class="w-16 h-16 bg-white/20 backdrop-blur-sm rounded-xl flex items-center justify-center">
                        <i class="fas fa-file-contract text-white text-2xl"></i>
                    </div>
                    <div>
                        <h1 class="text-3xl font-bold text-white mb-2" style="font-family: 'Inter', sans-serif;">
                            {{ $will->testator_details['primary']['full_name'] ?? 'My Will' }}
                        </h1>
                        <p class="text-emerald-100 text-lg" style="font-family: 'Inter', sans-serif;">
                            {{ $will->status ?? 'Draft' }}
                        </p>
                    </div>
                </div>
            </div>
            
            <!-- Progress Overview -->
            <div class="bg-white/20 backdrop-blur-sm rounded-full p-1">
                <div class="flex items-center justify-between text-white text-xs mb-2 px-2">
                    <span>Will Progress</span>
                    <span>{{ $completedCount ?? 0 }}/{{ 11 }} sections ({{ $willProgress ?? 0 }}%)</span>
                </div>
                <div class="bg-white/30 rounded-full h-3">
                    <div class="bg-white rounded-full h-3 transition-all duration-500" style="width: {{ $willProgress ?? 0 }}%"></div>
                </div>
            </div>
        </div>
    </div>

    <!-- Will Sections Grid -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-8">
        <!-- Testator Details -->
        <div class="bg-white rounded-xl shadow-lg border border-gray-100 p-6 hover:shadow-xl transition-all duration-300">
            <div class="flex items-center justify-between mb-4">
                <div class="flex items-center gap-3">
                    <div class="w-12 h-12 {{ $testatorStatus['completed'] ? 'bg-green-100' : 'bg-yellow-100' }} rounded-xl flex items-center justify-center">
                        <i class="fas fa-user {{ $testatorStatus['completed'] ? 'text-green-600' : 'text-yellow-600' }} text-xl"></i>
                    </div>
                    <div>
                        <h3 class="text-lg font-semibold text-gray-800">Testator Details</h3>
                        <p class="text-sm {{ $testatorStatus['completed'] ? 'text-green-600' : 'text-yellow-600' }}">
                            {{ $testatorStatus['completed'] ? 'Completed' : 'Pending' }}
                        </p>
                    </div>
                </div>
                @if($testatorStatus['completed'])
                    <i class="fas fa-check-circle text-green-500 text-xl"></i>
                @else
                    <i class="fas fa-exclamation-circle text-yellow-500 text-xl"></i>
                @endif
            </div>
            
            <a href="{{ route('client.will.view', $will) }}" 
               class="block w-full px-4 py-3 bg-gradient-to-r {{ $testatorStatus['completed'] ? 'from-green-500 to-green-600' : 'from-yellow-500 to-yellow-600' }} text-white rounded-xl hover:opacity-90 transition-opacity font-medium text-center">
                {{ $testatorStatus['completed'] ? 'View Details' : 'Complete Testator' }}
            </a>
        </div>

        <!-- Beneficiaries -->
        <div class="bg-white rounded-xl shadow-lg border border-gray-100 p-6 hover:shadow-xl transition-all duration-300">
            <div class="flex items-center justify-between mb-4">
                <div class="flex items-center gap-3">
                    <div class="w-12 h-12 {{ $beneficiariesStatus['completed'] ? 'bg-green-100' : 'bg-yellow-100' }} rounded-xl flex items-center justify-center">
                        <i class="fas fa-users {{ $beneficiariesStatus['completed'] ? 'text-green-600' : 'text-yellow-600' }} text-xl"></i>
                    </div>
                    <div>
                        <h3 class="text-lg font-semibold text-gray-800">Beneficiaries</h3>
                        <p class="text-sm {{ $beneficiariesStatus['completed'] ? 'text-green-600' : 'text-yellow-600' }}">
                            {{ $beneficiariesStatus['completed'] ? 'Completed' : 'Pending' }}
                        </p>
                    </div>
                </div>
                @if($beneficiariesStatus['completed'])
                    <i class="fas fa-check-circle text-green-500 text-xl"></i>
                @else
                    <i class="fas fa-exclamation-circle text-yellow-500 text-xl"></i>
                @endif
            </div>
            
            <a href="{{ route('client.will.view', $will) }}" 
               class="block w-full px-4 py-3 bg-gradient-to-r {{ $beneficiariesStatus['completed'] ? 'from-green-500 to-green-600' : 'from-yellow-500 to-yellow-600' }} text-white rounded-xl hover:opacity-90 transition-opacity font-medium text-center">
                {{ $beneficiariesStatus['completed'] ? 'View Details' : 'Add Beneficiaries' }}
            </a>
        </div>

        <!-- Assets (Merged) -->
        <div class="bg-white rounded-xl shadow-lg border border-gray-100 p-6 hover:shadow-xl transition-all duration-300">
            <div class="flex items-center justify-between mb-4">
                <div class="flex items-center gap-3">
                    <div class="w-12 h-12 {{ $assetsStatus['completed'] ? 'bg-green-100' : 'bg-yellow-100' }} rounded-xl flex items-center justify-center">
                        <i class="fas fa-coins {{ $assetsStatus['completed'] ? 'text-green-600' : 'text-yellow-600' }} text-xl"></i>
                    </div>
                    <div>
                        <h3 class="text-lg font-semibold text-gray-800">Assets</h3>
                        <p class="text-sm {{ $assetsStatus['completed'] ? 'text-green-600' : 'text-yellow-600' }}">
                            {{ $assetsStatus['completed'] ? 'Completed' : 'Pending' }}
                        </p>
                    </div>
                </div>
                @if($assetsStatus['completed'])
                    <i class="fas fa-check-circle text-green-500 text-xl"></i>
                @else
                    <i class="fas fa-exclamation-circle text-yellow-500 text-xl"></i>
                @endif
            </div>
            
            <a href="{{ route('client.will.view', $will) }}" 
               class="block w-full px-4 py-3 bg-gradient-to-r {{ $assetsStatus['completed'] ? 'from-green-500 to-green-600' : 'from-yellow-500 to-yellow-600' }} text-white rounded-xl hover:opacity-90 transition-opacity font-medium text-center">
                {{ $assetsStatus['completed'] ? 'View Details' : 'Add Assets' }}
            </a>
        </div>

        <!-- Liabilities -->
        <div class="bg-white rounded-xl shadow-lg border border-gray-100 p-6 hover:shadow-xl transition-all duration-300">
            <div class="flex items-center justify-between mb-4">
                <div class="flex items-center gap-3">
                    <div class="w-12 h-12 {{ $liabilitiesStatus['completed'] ? 'bg-green-100' : 'bg-yellow-100' }} rounded-xl flex items-center justify-center">
                        <i class="fas fa-file-invoice-dollar {{ $liabilitiesStatus['completed'] ? 'text-green-600' : 'text-yellow-600' }} text-xl"></i>
                    </div>
                    <div>
                        <h3 class="text-lg font-semibold text-gray-800">Liabilities</h3>
                        <p class="text-sm {{ $liabilitiesStatus['completed'] ? 'text-green-600' : 'text-yellow-600' }}">
                            {{ $liabilitiesStatus['completed'] ? 'Completed' : 'Pending' }}
                        </p>
                    </div>
                </div>
                @if($liabilitiesStatus['completed'])
                    <i class="fas fa-check-circle text-green-500 text-xl"></i>
                @else
                    <i class="fas fa-exclamation-circle text-yellow-500 text-xl"></i>
                @endif
            </div>
            
            <a href="{{ route('client.will.view', $will) }}" 
               class="block w-full px-4 py-3 bg-gradient-to-r {{ $liabilitiesStatus['completed'] ? 'from-green-500 to-green-600' : 'from-yellow-500 to-yellow-600' }} text-white rounded-xl hover:opacity-90 transition-opacity font-medium text-center">
                {{ $liabilitiesStatus['completed'] ? 'View Details' : 'Add Liabilities' }}
            </a>
        </div>

        <!-- Executors -->
        <div class="bg-white rounded-xl shadow-lg border border-gray-100 p-6 hover:shadow-xl transition-all duration-300">
            <div class="flex items-center justify-between mb-4">
                <div class="flex items-center gap-3">
                    <div class="w-12 h-12 {{ $executorsStatus['completed'] ? 'bg-green-100' : 'bg-yellow-100' }} rounded-xl flex items-center justify-center">
                        <i class="fas fa-user-tie {{ $executorsStatus['completed'] ? 'text-green-600' : 'text-yellow-600' }} text-xl"></i>
                    </div>
                    <div>
                        <h3 class="text-lg font-semibold text-gray-800">Executors</h3>
                        <p class="text-sm {{ $executorsStatus['completed'] ? 'text-green-600' : 'text-yellow-600' }}">
                            {{ $executorsStatus['completed'] ? 'Completed' : 'Pending' }}
                        </p>
                    </div>
                </div>
                @if($executorsStatus['completed'])
                    <i class="fas fa-check-circle text-green-500 text-xl"></i>
                @else
                    <i class="fas fa-exclamation-circle text-yellow-500 text-xl"></i>
                @endif
            </div>
            
            <a href="{{ route('client.will.view', $will) }}" 
               class="block w-full px-4 py-3 bg-gradient-to-r {{ $executorsStatus['completed'] ? 'from-green-500 to-green-600' : 'from-yellow-500 to-yellow-600' }} text-white rounded-xl hover:opacity-90 transition-opacity font-medium text-center">
                {{ $executorsStatus['completed'] ? 'View Details' : 'Add Executors' }}
            </a>
        </div>

        <!-- Guardians -->
        <div class="bg-white rounded-xl shadow-lg border border-gray-100 p-6 hover:shadow-xl transition-all duration-300">
            <div class="flex items-center justify-between mb-4">
                <div class="flex items-center gap-3">
                    <div class="w-12 h-12 {{ $guardiansStatus['completed'] ? 'bg-green-100' : 'bg-yellow-100' }} rounded-xl flex items-center justify-center">
                        <i class="fas fa-shield-alt {{ $guardiansStatus['completed'] ? 'text-green-600' : 'text-yellow-600' }} text-xl"></i>
                    </div>
                    <div>
                        <h3 class="text-lg font-semibold text-gray-800">Guardians</h3>
                        <p class="text-sm {{ $guardiansStatus['completed'] ? 'text-green-600' : 'text-yellow-600' }}">
                            {{ $guardiansStatus['completed'] ? 'Completed' : 'Pending' }}
                        </p>
                    </div>
                </div>
                @if($guardiansStatus['completed'])
                    <i class="fas fa-check-circle text-green-500 text-xl"></i>
                @else
                    <i class="fas fa-exclamation-circle text-yellow-500 text-xl"></i>
                @endif
            </div>
            
            <a href="{{ route('client.will.view', $will) }}" 
               class="block w-full px-4 py-3 bg-gradient-to-r {{ $guardiansStatus['completed'] ? 'from-green-500 to-green-600' : 'from-yellow-500 to-yellow-600' }} text-white rounded-xl hover:opacity-90 transition-opacity font-medium text-center">
                {{ $guardiansStatus['completed'] ? 'View Details' : 'Add Guardians' }}
            </a>
        </div>

        <!-- Allowances -->
        <div class="bg-white rounded-xl shadow-lg border border-gray-100 p-6 hover:shadow-xl transition-all duration-300">
            <div class="flex items-center justify-between mb-4">
                <div class="flex items-center gap-3">
                    <div class="w-12 h-12 {{ $allowancesStatus['completed'] ? 'bg-green-100' : 'bg-yellow-100' }} rounded-xl flex items-center justify-center">
                        <i class="fas fa-hand-holding-usd {{ $allowancesStatus['completed'] ? 'text-green-600' : 'text-yellow-600' }} text-xl"></i>
                    </div>
                    <div>
                        <h3 class="text-lg font-semibold text-gray-800">Allowances</h3>
                        <p class="text-sm {{ $allowancesStatus['completed'] ? 'text-green-600' : 'text-yellow-600' }}">
                            {{ $allowancesStatus['completed'] ? 'Completed' : 'Pending' }}
                        </p>
                    </div>
                </div>
                @if($allowancesStatus['completed'])
                    <i class="fas fa-check-circle text-green-500 text-xl"></i>
                @else
                    <i class="fas fa-exclamation-circle text-yellow-500 text-xl"></i>
                @endif
            </div>
            
            <a href="{{ route('client.will.view', $will) }}" 
               class="block w-full px-4 py-3 bg-gradient-to-r {{ $allowancesStatus['completed'] ? 'from-green-500 to-green-600' : 'from-yellow-500 to-yellow-600' }} text-white rounded-xl hover:opacity-90 transition-opacity font-medium text-center">
                {{ $allowancesStatus['completed'] ? 'View Details' : 'Add Allowances' }}
            </a>
        </div>

        <!-- Gifts -->
        <div class="bg-white rounded-xl shadow-lg border border-gray-100 p-6 hover:shadow-xl transition-all duration-300">
            <div class="flex items-center justify-between mb-4">
                <div class="flex items-center gap-3">
                    <div class="w-12 h-12 {{ $giftsStatus['completed'] ? 'bg-green-100' : 'bg-yellow-100' }} rounded-xl flex items-center justify-center">
                        <i class="fas fa-gift {{ $giftsStatus['completed'] ? 'text-green-600' : 'text-yellow-600' }} text-xl"></i>
                    </div>
                    <div>
                        <h3 class="text-lg font-semibold text-gray-800">Gifts</h3>
                        <p class="text-sm {{ $giftsStatus['completed'] ? 'text-green-600' : 'text-yellow-600' }}">
                            {{ $giftsStatus['completed'] ? 'Completed' : 'Pending' }}
                        </p>
                    </div>
                </div>
                @if($giftsStatus['completed'])
                    <i class="fas fa-check-circle text-green-500 text-xl"></i>
                @else
                    <i class="fas fa-exclamation-circle text-yellow-500 text-xl"></i>
                @endif
            </div>
            
            <a href="{{ route('client.will.view', $will) }}" 
               class="block w-full px-4 py-3 bg-gradient-to-r {{ $giftsStatus['completed'] ? 'from-green-500 to-green-600' : 'from-yellow-500 to-yellow-600' }} text-white rounded-xl hover:opacity-90 transition-opacity font-medium text-center">
                {{ $giftsStatus['completed'] ? 'View Details' : 'Add Gifts' }}
            </a>
        </div>

        <!-- Donations -->
        <div class="bg-white rounded-xl shadow-lg border border-gray-100 p-6 hover:shadow-xl transition-all duration-300">
            <div class="flex items-center justify-between mb-4">
                <div class="flex items-center gap-3">
                    <div class="w-12 h-12 {{ $donationsStatus['completed'] ? 'bg-green-100' : 'bg-yellow-100' }} rounded-xl flex items-center justify-center">
                        <i class="fas fa-hand-holding-heart {{ $donationsStatus['completed'] ? 'text-green-600' : 'text-yellow-600' }} text-xl"></i>
                    </div>
                    <div>
                        <h3 class="text-lg font-semibold text-gray-800">Donations</h3>
                        <p class="text-sm {{ $donationsStatus['completed'] ? 'text-green-600' : 'text-yellow-600' }}">
                            {{ $donationsStatus['completed'] ? 'Completed' : 'Pending' }}
                        </p>
                    </div>
                </div>
                @if($donationsStatus['completed'])
                    <i class="fas fa-check-circle text-green-500 text-xl"></i>
                @else
                    <i class="fas fa-exclamation-circle text-yellow-500 text-xl"></i>
                @endif
            </div>
            
            <a href="{{ route('client.will.view', $will) }}" 
               class="block w-full px-4 py-3 bg-gradient-to-r {{ $donationsStatus['completed'] ? 'from-green-500 to-green-600' : 'from-yellow-500 to-yellow-600' }} text-white rounded-xl hover:opacity-90 transition-opacity font-medium text-center">
                {{ $donationsStatus['completed'] ? 'View Details' : 'Add Donations' }}
            </a>
        </div>

        <!-- Trustees -->
        <div class="bg-white rounded-xl shadow-lg border border-gray-100 p-6 hover:shadow-xl transition-all duration-300">
            <div class="flex items-center justify-between mb-4">
                <div class="flex items-center gap-3">
                    <div class="w-12 h-12 {{ $trusteesStatus['completed'] ? 'bg-green-100' : 'bg-yellow-100' }} rounded-xl flex items-center justify-center">
                        <i class="fas fa-user-shield {{ $trusteesStatus['completed'] ? 'text-green-600' : 'text-yellow-600' }} text-xl"></i>
                    </div>
                    <div>
                        <h3 class="text-lg font-semibold text-gray-800">Trustees</h3>
                        <p class="text-sm {{ $trusteesStatus['completed'] ? 'text-green-600' : 'text-yellow-600' }}">
                            {{ $trusteesStatus['completed'] ? 'Completed' : 'Pending' }}
                        </p>
                    </div>
                </div>
                @if($trusteesStatus['completed'])
                    <i class="fas fa-check-circle text-green-500 text-xl"></i>
                @else
                    <i class="fas fa-exclamation-circle text-yellow-500 text-xl"></i>
                @endif
            </div>
            
            <a href="{{ route('client.will.view', $will) }}" 
               class="block w-full px-4 py-3 bg-gradient-to-r {{ $trusteesStatus['completed'] ? 'from-green-500 to-green-600' : 'from-yellow-500 to-yellow-600' }} text-white rounded-xl hover:opacity-90 transition-opacity font-medium text-center">
                {{ $trusteesStatus['completed'] ? 'View Details' : 'Add Trustees' }}
            </a>
        </div>

        <!-- Witnesses -->
        <div class="bg-white rounded-xl shadow-lg border border-gray-100 p-6 hover:shadow-xl transition-all duration-300">
            <div class="flex items-center justify-between mb-4">
                <div class="flex items-center gap-3">
                    <div class="w-12 h-12 {{ $witnessesStatus['completed'] ? 'bg-green-100' : 'bg-yellow-100' }} rounded-xl flex items-center justify-center">
                        <i class="fas fa-eye {{ $witnessesStatus['completed'] ? 'text-green-600' : 'text-yellow-600' }} text-xl"></i>
                    </div>
                    <div>
                        <h3 class="text-lg font-semibold text-gray-800">Witnesses</h3>
                        <p class="text-sm {{ $witnessesStatus['completed'] ? 'text-green-600' : 'text-yellow-600' }}">
                            {{ $witnessesStatus['completed'] ? 'Completed' : 'Pending' }}
                        </p>
                    </div>
                </div>
                @if($witnessesStatus['completed'])
                    <i class="fas fa-check-circle text-green-500 text-xl"></i>
                @else
                    <i class="fas fa-exclamation-circle text-yellow-500 text-xl"></i>
                @endif
            </div>
            
            <a href="{{ route('client.will.view', $will) }}" 
               class="block w-full px-4 py-3 bg-gradient-to-r {{ $witnessesStatus['completed'] ? 'from-green-500 to-green-600' : 'from-yellow-500 to-yellow-600' }} text-white rounded-xl hover:opacity-90 transition-opacity font-medium text-center">
                {{ $witnessesStatus['completed'] ? 'View Details' : 'Add Witnesses' }}
            </a>
        </div>

        <!-- Witness Signatures -->
        <div class="bg-white rounded-xl shadow-lg border border-gray-100 p-6 hover:shadow-xl transition-all duration-300">
            <div class="flex items-center justify-between mb-4">
                <div class="flex items-center gap-3">
                    <div class="w-12 h-12 {{ $witnessSignaturesStatus['completed'] ?? false ? 'bg-green-100' : 'bg-yellow-100' }} rounded-xl flex items-center justify-center">
                        <i class="fas fa-signature {{ $witnessSignaturesStatus['completed'] ?? false ? 'text-green-600' : 'text-yellow-600' }} text-xl"></i>
                    </div>
                    <div>
                        <h3 class="text-lg font-semibold text-gray-800">Witness Signatures</h3>
                        <p class="text-sm {{ $witnessSignaturesStatus['completed'] ?? false ? 'text-green-600' : 'text-yellow-600' }}">
                            {{ $witnessSignaturesStatus['completed'] ?? false ? 'Completed' : 'Pending' }}
                        </p>
                    </div>
                </div>
                @if($witnessSignaturesStatus['completed'] ?? false)
                    <i class="fas fa-check-circle text-green-500 text-xl"></i>
                @else
                    <i class="fas fa-exclamation-circle text-yellow-500 text-xl"></i>
                @endif
            </div>
            
            <a href="{{ route('client.will.view', $will) }}" 
               class="block w-full px-4 py-3 bg-gradient-to-r {{ $witnessSignaturesStatus['completed'] ?? false ? 'from-green-500 to-green-600' : 'from-yellow-500 to-yellow-600' }} text-white rounded-xl hover:opacity-90 transition-opacity font-medium text-center">
                {{ $witnessSignaturesStatus['completed'] ?? false ? 'View Signatures' : 'Add Signatures' }}
            </a>
        </div>
    </div>

    <!-- Quick Actions -->
    <div class="bg-white rounded-xl shadow-lg border border-gray-100 p-6 mb-8">
        <h3 class="text-xl font-semibold text-gray-800 mb-4">Quick Actions</h3>
        <div class="flex flex-wrap gap-4">
            <a href="{{ route('client.will.view', $will) }}" 
               class="px-6 py-3 bg-emerald-600 text-white rounded-xl hover:bg-emerald-700 transition-colors font-medium">
                <i class="fas fa-eye mr-2"></i>View Document
            </a>
            <button onclick="window.print()" 
                    class="px-6 py-3 bg-gray-600 text-white rounded-xl hover:bg-gray-700 transition-colors font-medium">
                <i class="fas fa-print mr-2"></i>Print Document
            </button>
        </div>
    </div>
@endsection