@extends('layouts.portal')

@section('title', 'Approved Wills')
@section('page_title', 'Approved Wills')
@section('page_subtitle', 'View all approved client wills')

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

@section('content')
<div class="min-h-screen bg-gradient-to-br from-green-50 via-white to-emerald-50 py-8">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <!-- Header -->
        <div class="mb-8">
            <div class="flex items-center justify-between mb-4">
                <div class="flex items-center space-x-3">
                    <div class="w-10 h-10 bg-green-600 rounded-full flex items-center justify-center text-white font-semibold">
                        <i class="fas fa-check-circle"></i>
                    </div>
                    <div>
                        <h1 class="text-2xl font-bold text-gray-900">Approved Wills</h1>
                        <p class="text-sm text-gray-600">View all approved client wills</p>
                    </div>
                </div>
                <div class="text-right">
                    <h2 class="text-lg font-semibold text-gray-800">Octowill</h2>
                    <p class="text-sm text-gray-600">Agent Dashboard</p>
                </div>
            </div>
        </div>

        <!-- Stats Cards -->
        <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
            <div class="bg-white rounded-xl shadow-lg border border-gray-100 p-6">
                <div class="flex items-center">
                    <div class="w-12 h-12 bg-green-100 rounded-full flex items-center justify-center mr-4">
                        <i class="fas fa-check-circle text-green-600 text-xl"></i>
                    </div>
                    <div>
                        <p class="text-sm text-gray-600">Total Approved</p>
                        <p class="text-2xl font-bold text-gray-800">{{ $approvedWills->total() }}</p>
                    </div>
                </div>
            </div>
            
            <div class="bg-white rounded-xl shadow-lg border border-gray-100 p-6">
                <div class="flex items-center">
                    <div class="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center mr-4">
                        <i class="fas fa-calendar text-blue-600 text-xl"></i>
                    </div>
                    <div>
                        <p class="text-sm text-gray-600">This Month</p>
                        <p class="text-2xl font-bold text-gray-800">{{ $approvedWills->where('updated_at', '>=', now()->startOfMonth())->count() }}</p>
                    </div>
                </div>
            </div>
            
            <div class="bg-white rounded-xl shadow-lg border border-gray-100 p-6">
                <div class="flex items-center">
                    <div class="w-12 h-12 bg-purple-100 rounded-full flex items-center justify-center mr-4">
                        <i class="fas fa-file-alt text-purple-600 text-xl"></i>
                    </div>
                    <div>
                        <p class="text-sm text-gray-600">Individual Wills</p>
                        <p class="text-2xl font-bold text-gray-800">{{ $approvedWills->where('will_type', 'individual')->count() }}</p>
                    </div>
                </div>
            </div>
            
            <div class="bg-white rounded-xl shadow-lg border border-gray-100 p-6">
                <div class="flex items-center">
                    <div class="w-12 h-12 bg-amber-100 rounded-full flex items-center justify-center mr-4">
                        <i class="fas fa-shield-alt text-amber-600 text-xl"></i>
                    </div>
                    <div>
                        <p class="text-sm text-gray-600">Trust Wills</p>
                        <p class="text-2xl font-bold text-gray-800">{{ $approvedWills->where('will_type', 'trust')->count() }}</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- Approved Wills List -->
        <div class="bg-white rounded-2xl shadow-xl border border-gray-100 overflow-hidden">
            <div class="bg-gradient-to-r from-[#772B10] to-[#8B3D15] px-8 py-6">
                <div class="flex items-center justify-between">
                    <div class="flex items-center">
                        <div class="w-12 h-12 bg-white/20 rounded-full flex items-center justify-center mr-4">
                            <i class="fas fa-check-double text-white text-xl"></i>
                        </div>
                        <div>
                            <h3 class="text-xl font-bold text-white">Approved Wills</h3>
                            <p class="text-white/80 text-sm">All legally approved wills</p>
                        </div>
                    </div>
                    <div class="flex items-center space-x-4">
                        <!-- Search -->
                        <div class="relative">
                            <input type="text" placeholder="Search approved wills..." class="bg-white/20 backdrop-blur-sm text-white placeholder-gray-300 px-4 py-2 pr-10 rounded-lg border border-white/30 focus:outline-none focus:ring-2 focus:ring-white/50">
                            <i class="fas fa-search absolute right-3 top-3 text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="overflow-x-auto">
                <table class="w-full">
                    <thead class="bg-gray-50 border-b border-gray-200">
                        <tr>
                            <th class="px-6 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Client</th>
                            <th class="px-6 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Will Type</th>
                            <th class="px-6 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Approved By</th>
                            <th class="px-6 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Approved Date</th>
                            <th class="px-6 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Payment</th>
                            <th class="px-6 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
                        </tr>
                    </thead>
                    <tbody class="bg-white divide-y divide-gray-200">
                        @forelse($approvedWills as $will)
                            <tr class="hover:bg-gray-50 transition-colors">
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <div class="flex items-center">
                                        <div class="w-10 h-10 rounded-full bg-gradient-to-br from-[#772B10] to-[#8B3D15] flex items-center justify-center text-white font-bold text-sm mr-3">
                                            {{ substr($will->client->first_name ?? 'C', 0, 1) }}
                                        </div>
                                        <div>
                                            <div class="text-sm font-medium text-gray-900">{{ $will->client->full_name ?? 'Unknown Client' }}</div>
                                            <div class="text-sm text-gray-500">{{ $will->client->email ?? 'No email' }}</div>
                                        </div>
                                    </div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <span class="px-3 py-1 inline-flex text-xs leading-5 font-semibold rounded-full bg-[#772B10]/10 text-[#772B10] capitalize">
                                        {{ $will->will_type }}
                                    </span>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <div class="flex items-center">
                                        <div class="w-8 h-8 rounded-full bg-purple-100 flex items-center justify-center mr-2">
                                            <i class="fas fa-user text-purple-600 text-xs"></i>
                                        </div>
                                        <span class="text-sm text-gray-600">{{ $will->approved_by ? 'Admin' : 'System' }}</span>
                                    </div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                    {{ $will->updated_at->format('d M Y') }}
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <span class="px-3 py-1 inline-flex text-xs leading-5 font-semibold rounded-full {{ $will->payment_status == 'paid' ? 'bg-green-100 text-green-800' : 'bg-amber-100 text-amber-800' }}">
                                        {{ $will->payment_status == 'paid' ? 'Paid' : 'Pending' }}
                                    </span>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                                    <div class="flex items-center space-x-2">
                                        @if($will->status == 'approved')
                                            <a href="{{ route('agent.wills.testator', $will) }}" class="text-[#772B10] hover:text-[#8B3D15] font-medium">
                                                <i class="fas fa-eye mr-1"></i>View
                                            </a>
                                        @else
                                            <a href="{{ route('agent.wills.testator', $will) }}" class="text-purple-600 hover:text-purple-900 font-medium">
                                                <i class="fas fa-eye mr-1"></i>Review
                                            </a>
                                        @endif
                                        <a href="#" class="text-blue-600 hover:text-blue-900 font-medium">
                                            <i class="fas fa-download mr-1"></i>Download
                                        </a>
                                    </div>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="6" class="px-6 py-12 text-center">
                                    <div class="flex flex-col items-center">
                                        <i class="fas fa-check-circle text-gray-400 text-4xl mb-4"></i>
                                        <p class="text-gray-500 text-lg font-medium">No approved wills found</p>
                                        <p class="text-gray-400 text-sm">No wills have been approved yet.</p>
                                    </div>
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
            
            <!-- Pagination -->
            @if($approvedWills->hasPages())
                <div class="bg-gray-50 px-6 py-3 border-t border-gray-200">
                    <div class="flex items-center justify-between">
                        <div class="text-sm text-gray-700">
                            Showing {{ $approvedWills->firstItem() }} to {{ $approvedWills->lastItem() }} of {{ $approvedWills->total() }} results
                        </div>
                        <div class="flex items-center space-x-2">
                            {{ $approvedWills->links() }}
                        </div>
                    </div>
                </div>
            @endif
        </div>
    </div>
</div>
@endsection