@extends('layouts.portal')

@section('title', 'Will Templates')
@section('page_title', 'Will Template Engine')
@section('page_subtitle', 'Choose a will format for your client')

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

@section('content')
<div class="p-4">
    <!-- Header -->
    <div class="flex justify-between items-center mb-6">
        <div>
            <h1 class="text-2xl font-bold text-gray-800">Will Template Engine</h1>
            <p class="text-gray-500">Select a template format for your client</p>
        </div>
        <button onclick="openTemplateModal()" class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition flex items-center">
            <i class="fas fa-plus mr-2"></i>Create New Will
        </button>
    </div>

    <!-- Template Cards -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
        <!-- Individual Template -->
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden hover:shadow-lg transition cursor-pointer" onclick="selectTemplate('individual')">
            <div class="h-32 bg-gradient-to-br from-blue-500 to-blue-700 flex items-center justify-center">
                <i class="fas fa-user text-white text-4xl"></i>
            </div>
            <div class="p-4">
                <h3 class="font-semibold text-gray-800 mb-2">Individual Will</h3>
                <p class="text-sm text-gray-500 mb-3">Standard single person will for personal assets and beneficiaries.</p>
                <div class="flex items-center justify-between">
                    <span class="px-2 py-1 bg-blue-100 text-blue-800 rounded text-xs">Most Popular</span>
                    <i class="fas fa-arrow-right text-gray-400"></i>
                </div>
            </div>
        </div>

        <!-- Trust Template -->
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden hover:shadow-lg transition cursor-pointer" onclick="selectTemplate('trust')">
            <div class="h-32 bg-gradient-to-br from-purple-500 to-purple-700 flex items-center justify-center">
                <i class="fas fa-shield-alt text-white text-4xl"></i>
            </div>
            <div class="p-4">
                <h3 class="font-semibold text-gray-800 mb-2">Trust Will</h3>
                <p class="text-sm text-gray-500 mb-3">Create a testamentary trust for complex asset management and protection.</p>
                <div class="flex items-center justify-between">
                    <span class="px-2 py-1 bg-purple-100 text-purple-800 rounded text-xs">Advanced</span>
                    <i class="fas fa-arrow-right text-gray-400"></i>
                </div>
            </div>
        </div>

        <!-- Islamic Template -->
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden hover:shadow-lg transition cursor-pointer" onclick="selectTemplate('islamic')">
            <div class="h-32 bg-gradient-to-br from-green-500 to-green-700 flex items-center justify-center">
                <i class="fas fa-mosque text-white text-4xl"></i>
            </div>
            <div class="p-4">
                <h3 class="font-semibold text-gray-800 mb-2">Islamic Wasiat</h3>
                <p class="text-sm text-gray-500 mb-3">Shariah-compliant will following Faraid distribution rules.</p>
                <div class="flex items-center justify-between">
                    <span class="px-2 py-1 bg-green-100 text-green-800 rounded text-xs">Religious</span>
                    <i class="fas fa-arrow-right text-gray-400"></i>
                </div>
            </div>
        </div>

        <!-- Joint Template -->
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden hover:shadow-lg transition cursor-pointer" onclick="selectTemplate('joint')">
            <div class="h-32 bg-gradient-to-br from-orange-500 to-orange-700 flex items-center justify-center">
                <i class="fas fa-users text-white text-4xl"></i>
            </div>
            <div class="p-4">
                <h3 class="font-semibold text-gray-800 mb-2">Joint Will</h3>
                <p class="text-sm text-gray-500 mb-3">Combined will for married couples with mutual provisions.</p>
                <div class="flex items-center justify-between">
                    <span class="px-2 py-1 bg-orange-100 text-orange-800 rounded text-xs">Couples</span>
                    <i class="fas fa-arrow-right text-gray-400"></i>
                </div>
            </div>
        </div>
    </div>

    <!-- Recent Wills Table -->
    <div class="bg-white rounded-xl shadow-sm border border-gray-200">
        <div class="p-4 border-b border-gray-200">
            <h3 class="font-semibold text-gray-800">Recent Wills Created</h3>
        </div>
        <div class="p-4">
            <div class="overflow-x-auto">
                <table class="w-full text-sm">
                    <thead class="bg-gray-50">
                        <tr>
                            <th class="p-3 text-left">ID</th>
                            <th class="p-3 text-left">Client</th>
                            <th class="p-3 text-left">Template Type</th>
                            <th class="p-3 text-left">Created By</th>
                            <th class="p-3 text-left">Status</th>
                            <th class="p-3 text-left">Date</th>
                            <th class="p-3 text-left">Action</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($recentWills ?? [] as $will)
                            <tr class="border-b border-gray-100">
                                <td class="p-3">#{{ $will->id }}</td>
                                <td class="p-3">{{ $will->client->full_name ?? 'N/A' }}</td>
                                <td class="p-3">
                                    <span class="px-2 py-1 rounded-full text-xs font-semibold
                                        {{ $will->is_joint ? 'bg-pink-100 text-pink-800' :
                                           ($will->will_type === 'individual' ? 'bg-blue-100 text-blue-800' :
                                           ($will->will_type === 'trust' ? 'bg-purple-100 text-purple-800' :
                                           ($will->will_type === 'islamic' ? 'bg-green-100 text-green-800' : 'bg-orange-100 text-orange-800'))) }}">
                                        {{ $will->is_joint ? 'Joint' : ucfirst($will->will_type) }}
                                    </span>
                                </td>
                                <td class="p-3">{{ $will->createdBy->name ?? 'N/A' }}</td>
                                <td class="p-3">
                                    <span class="px-2 py-1 rounded-full text-xs font-semibold 
                                        {{ $will->status === 'completed' ? 'bg-green-100 text-green-800' : 
                                           ($will->status === 'pending_approval' ? 'bg-yellow-100 text-yellow-800' : 'bg-gray-100 text-gray-800') }}">
                                        {{ ucfirst(str_replace('_', ' ', $will->status)) }}
                                    </span>
                                </td>
                                <td class="p-3 text-gray-500">{{ $will->created_at->format('M d, Y') }}</td>
                                <td class="p-3">
                                    <a href="{{ route('admin.wills.show', $will) }}" class="text-blue-600 hover:underline">View</a>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="7" class="p-8 text-center text-gray-500">
                                    <i class="fas fa-file-alt text-4xl text-gray-300 mb-3"></i>
                                    <p>No wills created yet.</p>
                                    <button onclick="openTemplateModal()" class="text-blue-600 hover:underline mt-2">Create your first will</button>
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<!-- Template Selection Modal -->
<div id="templateModal" class="fixed inset-0 bg-black bg-opacity-50 hidden items-center justify-center z-50">
    <div class="bg-white rounded-xl shadow-lg max-w-4xl w-full mx-4 max-h-[90vh] overflow-y-auto">
        <div class="p-6 border-b border-gray-200 flex justify-between items-center">
            <div>
                <h2 class="text-xl font-bold text-gray-800">Select Will Template</h2>
                <p class="text-sm text-gray-500">Choose the appropriate format for your client</p>
            </div>
            <button onclick="closeTemplateModal()" class="text-gray-400 hover:text-gray-600">
                <i class="fas fa-times text-xl"></i>
            </button>
        </div>
        <div class="p-6">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <!-- Individual -->
                <div class="border-2 border-gray-200 rounded-lg p-4 hover:border-blue-500 cursor-pointer transition" onclick="createWill('individual')">
                    <div class="flex items-center gap-3 mb-3">
                        <div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center">
                            <i class="fas fa-user text-blue-600 text-xl"></i>
                        </div>
                        <div>
                            <h3 class="font-semibold text-gray-800">Individual Will</h3>
                            <p class="text-xs text-gray-500">Single person standard will</p>
                        </div>
                    </div>
                    <ul class="text-sm text-gray-600 space-y-1">
                        <li><i class="fas fa-check text-green-500 mr-2"></i>Personal assets distribution</li>
                        <li><i class="fas fa-check text-green-500 mr-2"></i>Beneficiary designation</li>
                        <li><i class="fas fa-check text-green-500 mr-2"></i>Executor appointment</li>
                    </ul>
                </div>

                <!-- Trust -->
                <div class="border-2 border-gray-200 rounded-lg p-4 hover:border-purple-500 cursor-pointer transition" onclick="createWill('trust')">
                    <div class="flex items-center gap-3 mb-3">
                        <div class="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center">
                            <i class="fas fa-shield-alt text-purple-600 text-xl"></i>
                        </div>
                        <div>
                            <h3 class="font-semibold text-gray-800">Trust Will</h3>
                            <p class="text-xs text-gray-500">Testamentary trust structure</p>
                        </div>
                    </div>
                    <ul class="text-sm text-gray-600 space-y-1">
                        <li><i class="fas fa-check text-green-500 mr-2"></i>Asset protection</li>
                        <li><i class="fas fa-check text-green-500 mr-2"></i>Trustee appointment</li>
                        <li><i class="fas fa-check text-green-500 mr-2"></i>Complex distributions</li>
                    </ul>
                </div>

                <!-- Islamic -->
                <div class="border-2 border-gray-200 rounded-lg p-4 hover:border-green-500 cursor-pointer transition" onclick="createWill('islamic')">
                    <div class="flex items-center gap-3 mb-3">
                        <div class="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center">
                            <i class="fas fa-mosque text-green-600 text-xl"></i>
                        </div>
                        <div>
                            <h3 class="font-semibold text-gray-800">Islamic Wasiat</h3>
                            <p class="text-xs text-gray-500">Shariah-compliant will</p>
                        </div>
                    </div>
                    <ul class="text-sm text-gray-600 space-y-1">
                        <li><i class="fas fa-check text-green-500 mr-2"></i>Faraid distribution</li>
                        <li><i class="fas fa-check text-green-500 mr-2"></i>Wasiat rules</li>
                        <li><i class="fas fa-check text-green-500 mr-2"></i>Religious compliance</li>
                    </ul>
                </div>

                <!-- Joint -->
                <div class="border-2 border-gray-200 rounded-lg p-4 hover:border-orange-500 cursor-pointer transition" onclick="createWill('joint')">
                    <div class="flex items-center gap-3 mb-3">
                        <div class="w-12 h-12 bg-orange-100 rounded-lg flex items-center justify-center">
                            <i class="fas fa-users text-orange-600 text-xl"></i>
                        </div>
                        <div>
                            <h3 class="font-semibold text-gray-800">Joint Will</h3>
                            <p class="text-xs text-gray-500">For married couples</p>
                        </div>
                    </div>
                    <ul class="text-sm text-gray-600 space-y-1">
                        <li><i class="fas fa-check text-green-500 mr-2"></i>Mutual provisions</li>
                        <li><i class="fas fa-check text-green-500 mr-2"></i>Survivor clauses</li>
                        <li><i class="fas fa-check text-green-500 mr-2"></i>Combined assets</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    function openTemplateModal() {
        document.getElementById('templateModal').classList.remove('hidden');
        document.getElementById('templateModal').classList.add('flex');
    }

    function closeTemplateModal() {
        document.getElementById('templateModal').classList.add('hidden');
        document.getElementById('templateModal').classList.remove('flex');
    }

    function selectTemplate(type) {
        window.location.href = "{{ route('admin.wills.select-type') }}?template=" + type;
    }

    function createWill(type) {
        window.location.href = "{{ route('admin.wills.select-type') }}?template=" + type;
    }

    // Close modal on outside click
    document.getElementById('templateModal').addEventListener('click', function(e) {
        if (e.target === this) {
            closeTemplateModal();
        }
    });
</script>
@endsection