@extends('layouts.portal')

@section('title', 'Will Template Engine')
@section('page_title', 'Will Template Engine')
@section('page_subtitle', 'Generate professional will documents')

@section('sidebar')
    @include('agent.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 to generate professional will documents for your clients</p>
        </div>
        <button onclick="openTemplateModal()" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg transition flex items-center gap-2">
            <i class="fas fa-plus"></i>
            Create New Will
        </button>
    </div>

    <!-- Template Cards -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-8">
        <!-- Individual Will -->
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6 hover:shadow-md transition">
            <div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mb-4">
                <i class="fas fa-user text-blue-600 text-xl"></i>
            </div>
            <h3 class="font-semibold text-gray-800 mb-2">Individual Will</h3>
            <p class="text-sm text-gray-500 mb-4">Standard will for single person with full asset distribution control.</p>
            <div class="flex flex-col gap-2">
                <a href="{{ route('agent.will-template.download', 'individual') }}" class="flex items-center justify-center gap-2 bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg transition text-sm font-medium">
                    <i class="fas fa-file-word"></i>
                    Download Word Template
                </a>
                <button onclick="selectTemplate('individual')" class="flex items-center justify-center gap-2 text-blue-600 hover:text-blue-800 text-sm font-medium py-1">
                    <span>Use Template</span>
                    <i class="fas fa-arrow-right"></i>
                </button>
            </div>
        </div>

        <!-- Trust Will -->
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6 hover:shadow-md transition">
            <div class="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center mb-4">
                <i class="fas fa-shield-alt text-purple-600 text-xl"></i>
            </div>
            <h3 class="font-semibold text-gray-800 mb-2">Trust Will</h3>
            <p class="text-sm text-gray-500 mb-4">Testamentary trust for minor children and asset protection.</p>
            <div class="flex flex-col gap-2">
                <a href="{{ route('agent.will-template.download', 'trust') }}" class="flex items-center justify-center gap-2 bg-purple-600 hover:bg-purple-700 text-white px-4 py-2 rounded-lg transition text-sm font-medium">
                    <i class="fas fa-file-word"></i>
                    Download Word Template
                </a>
                <button onclick="selectTemplate('trust')" class="flex items-center justify-center gap-2 text-purple-600 hover:text-purple-800 text-sm font-medium py-1">
                    <span>Use Template</span>
                    <i class="fas fa-arrow-right"></i>
                </button>
            </div>
        </div>

        <!-- Islamic Wasiat -->
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6 hover:shadow-md transition">
            <div class="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center mb-4">
                <i class="fas fa-mosque text-green-600 text-xl"></i>
            </div>
            <h3 class="font-semibold text-gray-800 mb-2">Islamic Wasiat</h3>
            <p class="text-sm text-gray-500 mb-4">Shariah-compliant will following Faraid distribution rules.</p>
            <div class="flex flex-col gap-2">
                <a href="{{ route('agent.will-template.download', 'islamic') }}" class="flex items-center justify-center gap-2 bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-lg transition text-sm font-medium">
                    <i class="fas fa-file-word"></i>
                    Download Word Template
                </a>
                <button onclick="selectTemplate('islamic')" class="flex items-center justify-center gap-2 text-green-600 hover:text-green-800 text-sm font-medium py-1">
                    <span>Use Template</span>
                    <i class="fas fa-arrow-right"></i>
                </button>
            </div>
        </div>

        <!-- Joint Will -->
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6 hover:shadow-md transition">
            <div class="w-12 h-12 bg-orange-100 rounded-lg flex items-center justify-center mb-4">
                <i class="fas fa-users text-orange-600 text-xl"></i>
            </div>
            <h3 class="font-semibold text-gray-800 mb-2">Joint Will</h3>
            <p class="text-sm text-gray-500 mb-4">Mutual will for married couples with reciprocal provisions.</p>
            <div class="flex flex-col gap-2">
                <a href="{{ route('agent.will-template.download', 'joint') }}" class="flex items-center justify-center gap-2 bg-orange-600 hover:bg-orange-700 text-white px-4 py-2 rounded-lg transition text-sm font-medium">
                    <i class="fas fa-file-word"></i>
                    Download Word Template
                </a>
                <button onclick="selectTemplate('joint')" class="flex items-center justify-center gap-2 text-orange-600 hover:text-orange-800 text-sm font-medium py-1">
                    <span>Use Template</span>
                    <i class="fas fa-arrow-right"></i>
                </button>
            </div>
        </div>
    </div>

    <!-- Recent Wills -->
    <div class="bg-white rounded-xl shadow-sm border border-gray-200">
        <div class="p-6 border-b border-gray-200">
            <h2 class="text-lg font-semibold text-gray-800">Recent Wills Created</h2>
        </div>
        <div class="p-6">
            @if($recentWills->count() > 0)
                <div class="overflow-x-auto">
                    <table class="w-full">
                        <thead>
                            <tr class="text-left text-sm font-medium text-gray-500 border-b">
                                <th class="pb-3">Client</th>
                                <th class="pb-3">Template Type</th>
                                <th class="pb-3">Created By</th>
                                <th class="pb-3">Date</th>
                                <th class="pb-3">Status</th>
                                <th class="pb-3">Actions</th>
                            </tr>
                        </thead>
                        <tbody class="text-sm">
                            @foreach($recentWills as $will)
                                <tr class="border-b border-gray-100">
                                    <td class="py-3">{{ $will->client->first_name }} {{ $will->client->last_name }}</td>
                                    <td class="py-3">
                                        @php
                                            $typeLabels = [
                                                'individual' => ['Individual', 'blue'],
                                                'trust' => ['Trust', 'purple'],
                                                'islamic' => ['Islamic', 'green'],
                                                'joint' => ['Joint', 'orange'],
                                            ];
                                            $type = $typeLabels[$will->template_type] ?? ['Standard', 'gray'];
                                        @endphp
                                        <span class="px-2 py-1 bg-{{ $type[1] }}-100 text-{{ $type[1] }}-800 rounded-full text-xs">{{ $type[0] }}</span>
                                    </td>
                                    <td class="py-3">{{ $will->createdBy->name ?? 'N/A' }}</td>
                                    <td class="py-3 text-gray-500">{{ $will->created_at->format('M d, Y') }}</td>
                                    <td class="py-3">
                                        @php
                                            $statusColors = [
                                                'draft' => 'gray',
                                                'pending' => 'yellow',
                                                'approved' => 'green',
                                                'completed' => 'blue',
                                            ];
                                            $color = $statusColors[$will->status] ?? 'gray';
                                        @endphp
                                        <span class="px-2 py-1 bg-{{ $color }}-100 text-{{ $color }}-800 rounded-full text-xs capitalize">{{ $will->status }}</span>
                                    </td>
                                    <td class="py-3">
                                        <a href="{{ route('agent.wills.edit-document', $will) }}" class="text-blue-600 hover:text-blue-800 mr-3">
                                            <i class="fas fa-eye"></i>
                                        </a>
                                        <a href="{{ route('agent.wills.download', $will) }}" class="text-green-600 hover:text-green-800">
                                            <i class="fas fa-file-word"></i> Word
                                        </a>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            @else
                <div class="text-center py-8 text-gray-500">
                    <i class="fas fa-file-alt text-4xl mb-3 text-gray-300"></i>
                    <p>No wills created yet. Click "Create New Will" to get started.</p>
                </div>
            @endif
        </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-xl max-w-md w-full mx-4">
        <div class="p-6 border-b border-gray-200 flex justify-between items-center">
            <h3 class="text-lg font-semibold text-gray-800">Select Template Type</h3>
            <button onclick="closeTemplateModal()" class="text-gray-400 hover:text-gray-600">
                <i class="fas fa-times"></i>
            </button>
        </div>
        <div class="p-6">
            <p class="text-gray-500 mb-4">Choose the type of will template you want to create:</p>
            <div class="space-y-3">
                <button onclick="createWill('individual')" class="w-full p-4 border-2 border-gray-200 rounded-lg hover:border-blue-500 transition text-left">
                    <div class="flex items-center gap-3">
                        <div class="w-10 h-10 bg-blue-100 rounded-lg flex items-center justify-center">
                            <i class="fas fa-user text-blue-600"></i>
                        </div>
                        <div>
                            <div class="font-medium text-gray-800">Individual Will</div>
                            <div class="text-sm text-gray-500">For single person</div>
                        </div>
                    </div>
                </button>
                <button onclick="createWill('trust')" class="w-full p-4 border-2 border-gray-200 rounded-lg hover:border-purple-500 transition text-left">
                    <div class="flex items-center gap-3">
                        <div class="w-10 h-10 bg-purple-100 rounded-lg flex items-center justify-center">
                            <i class="fas fa-shield-alt text-purple-600"></i>
                        </div>
                        <div>
                            <div class="font-medium text-gray-800">Trust Will</div>
                            <div class="text-sm text-gray-500">With testamentary trust</div>
                        </div>
                    </div>
                </button>
                <button onclick="createWill('islamic')" class="w-full p-4 border-2 border-gray-200 rounded-lg hover:border-green-500 transition text-left">
                    <div class="flex items-center gap-3">
                        <div class="w-10 h-10 bg-green-100 rounded-lg flex items-center justify-center">
                            <i class="fas fa-mosque text-green-600"></i>
                        </div>
                        <div>
                            <div class="font-medium text-gray-800">Islamic Wasiat</div>
                            <div class="text-sm text-gray-500">Shariah-compliant</div>
                        </div>
                    </div>
                </button>
                <button onclick="createWill('joint')" class="w-full p-4 border-2 border-gray-200 rounded-lg hover:border-orange-500 transition text-left">
                    <div class="flex items-center gap-3">
                        <div class="w-10 h-10 bg-orange-100 rounded-lg flex items-center justify-center">
                            <i class="fas fa-users text-orange-600"></i>
                        </div>
                        <div>
                            <div class="font-medium text-gray-800">Joint Will</div>
                            <div class="text-sm text-gray-500">For married couples</div>
                        </div>
                    </div>
                </button>
            </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) {
        // Redirect to client selection with template type
        window.location.href = "/agent/wills/select-type?template=" + type;
    }

    function createWill(type) {
        // Redirect to client selection with template type
        window.location.href = "/agent/wills/select-type?template=" + type;
    }

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