@extends('layouts.portal')

@section('title', 'Trust Details')
@section('page_title', 'Trust Details')
@section('page_subtitle', 'Complete trust information and management')

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

@section('content')
<div class="min-h-screen bg-gray-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">
                <div>
                    <a href="{{ route('admin.trusts') }}" class="text-blue-600 hover:text-blue-700 flex items-center mb-3">
                        <i class="fas fa-arrow-left mr-2"></i>Back to Trusts
                    </a>
                    <h1 class="text-3xl font-bold text-gray-900">{{ $trust->trust_name }}</h1>
                    <p class="text-gray-600 mt-2">Trust #{{ $trust->id }} - Created {{ $trust->created_at->format('d M Y') }}</p>
                </div>
                <div class="text-right">
                    <span class="px-4 py-2 text-sm font-semibold rounded-full 
                        @if($trust->status === 'pending_review') bg-yellow-100 text-yellow-800
                        @elseif($trust->status === 'approved') bg-green-100 text-green-800
                        @else bg-gray-100 text-gray-800
                        @endif">
                        <i class="fas {{ $trust->status === 'approved' ? 'fa-check-circle' : 'fa-clock' }} mr-2"></i>
                        {{ ucfirst(str_replace('_', ' ', $trust->status)) }}
                    </span>
                </div>
            </div>
        </div>

        <!-- Stats Cards -->
        <div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-8">
            <div class="bg-white rounded-xl shadow-lg p-6 border border-gray-100">
                <div class="flex items-center">
                    <div class="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center">
                        <i class="fas fa-lock text-blue-600 text-xl"></i>
                    </div>
                    <div class="ml-4">
                        <p class="text-xs text-gray-600 font-semibold uppercase">Trust Type</p>
                        <p class="text-lg font-bold text-gray-900">{{ ucfirst($trust->trust_type) }}</p>
                    </div>
                </div>
            </div>

            <div class="bg-white rounded-xl shadow-lg p-6 border border-gray-100">
                <div class="flex items-center">
                    <div class="w-12 h-12 bg-green-100 rounded-full flex items-center justify-center">
                        <i class="fas fa-dollar-sign text-green-600 text-xl"></i>
                    </div>
                    <div class="ml-4">
                        <p class="text-xs text-gray-600 font-semibold uppercase">Initial Value</p>
                        <p class="text-lg font-bold text-gray-900">RM {{ number_format($trust->initial_value ?? 0, 2) }}</p>
                    </div>
                </div>
            </div>

            <div class="bg-white rounded-xl shadow-lg p-6 border border-gray-100">
                <div class="flex items-center">
                    <div class="w-12 h-12 bg-purple-100 rounded-full flex items-center justify-center">
                        <i class="fas fa-building text-purple-600 text-xl"></i>
                    </div>
                    <div class="ml-4">
                        <p class="text-xs text-gray-600 font-semibold uppercase">Trustee Company</p>
                        <p class="text-lg font-bold text-gray-900">{{ $trust->trustee_company ?? 'N/A' }}</p>
                    </div>
                </div>
            </div>

            <div class="bg-white rounded-xl shadow-lg p-6 border border-gray-100">
                <div class="flex items-center">
                    <div class="w-12 h-12 bg-orange-100 rounded-full flex items-center justify-center">
                        <i class="fas fa-calendar text-orange-600 text-xl"></i>
                    </div>
                    <div class="ml-4">
                        <p class="text-xs text-gray-600 font-semibold uppercase">Created</p>
                        <p class="text-lg font-bold text-gray-900">{{ $trust->created_at->format('d M Y') }}</p>
                    </div>
                </div>
            </div>
        </div>
        <!-- Main Content Grid -->
        <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
            
            <!-- Main Content Area -->
            <div class="lg:col-span-2 space-y-6">
                
                <!-- Trust Information Card -->
                <div class="bg-white rounded-xl shadow-lg p-6 border border-gray-100">
                    <div class="flex items-center mb-6 pb-4 border-b border-gray-200">
                        <div class="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center mr-4">
                            <i class="fas fa-file-contract text-blue-600 text-xl"></i>
                        </div>
                        <h2 class="text-2xl font-bold text-gray-900">Trust Information</h2>
                    </div>

                    <div class="space-y-4">
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                            <div class="p-4 bg-gray-50 rounded-lg border border-gray-200">
                                <p class="text-xs font-semibold text-gray-600 uppercase mb-2">Trust Name</p>
                                <p class="text-lg font-bold text-gray-900">{{ $trust->trust_name }}</p>
                            </div>
                            <div class="p-4 bg-gray-50 rounded-lg border border-gray-200">
                                <p class="text-xs font-semibold text-gray-600 uppercase mb-2">Trust Type</p>
                                <span class="inline-block px-3 py-1 text-sm font-semibold rounded-full bg-blue-100 text-blue-800">
                                    {{ ucfirst($trust->trust_type) }}
                                </span>
                            </div>
                        </div>

                        @if($trust->trust_deed_summary)
                            <div class="p-4 bg-blue-50 rounded-lg border border-blue-200">
                                <p class="text-xs font-semibold text-gray-600 uppercase mb-2">Trust Deed Summary</p>
                                <p class="text-gray-700">{{ $trust->trust_deed_summary }}</p>
                            </div>
                        @endif

                        @if($trust->distribution_terms)
                            <div class="p-4 bg-purple-50 rounded-lg border border-purple-200">
                                <p class="text-xs font-semibold text-gray-600 uppercase mb-2">Distribution Terms</p>
                                <p class="text-gray-700">{{ $trust->distribution_terms }}</p>
                            </div>
                        @endif
                    </div>
                </div>

                <!-- Client Information Card -->
                @if($trust->client)
                <div class="bg-white rounded-xl shadow-lg p-6 border border-gray-100">
                    <div class="flex items-center mb-6 pb-4 border-b border-gray-200">
                        <div class="w-12 h-12 bg-green-100 rounded-full flex items-center justify-center mr-4">
                            <i class="fas fa-user text-green-600 text-xl"></i>
                        </div>
                        <h2 class="text-2xl font-bold text-gray-900">Client Information</h2>
                    </div>

                    <div class="space-y-4">
                        <div class="flex items-start p-3 bg-gray-50 rounded-lg border border-gray-200">
                            <i class="fas fa-user-circle text-blue-500 mr-4 mt-1 text-xl"></i>
                            <div>
                                <p class="text-xs text-gray-600 font-semibold uppercase">Full Name</p>
                                <p class="text-lg font-semibold text-gray-900">{{ $trust->client->full_name ?? $trust->client->name }}</p>
                            </div>
                        </div>
                        <div class="flex items-start p-3 bg-gray-50 rounded-lg border border-gray-200">
                            <i class="fas fa-envelope text-orange-500 mr-4 mt-1 text-xl"></i>
                            <div>
                                <p class="text-xs text-gray-600 font-semibold uppercase">Email</p>
                                <p class="text-lg font-semibold text-gray-900">{{ $trust->client->email }}</p>
                            </div>
                        </div>
                        <div class="flex items-start p-3 bg-gray-50 rounded-lg border border-gray-200">
                            <i class="fas fa-phone text-purple-500 mr-4 mt-1 text-xl"></i>
                            <div>
                                <p class="text-xs text-gray-600 font-semibold uppercase">Phone</p>
                                <p class="text-lg font-semibold text-gray-900">{{ $trust->client->phone ?? 'N/A' }}</p>
                            </div>
                        </div>
                        <div class="flex items-start p-3 bg-gray-50 rounded-lg border border-gray-200">
                            <i class="fas fa-calendar text-red-500 mr-4 mt-1 text-xl"></i>
                            <div>
                                <p class="text-xs text-gray-600 font-semibold uppercase">Registered Date</p>
                                <p class="text-lg font-semibold text-gray-900">{{ $trust->client->created_at->format('d M Y') }}</p>
                            </div>
                        </div>
                    </div>
                </div>
                @endif

                <!-- Transactions Card -->
                <div class="bg-white rounded-xl shadow-lg p-6 border border-gray-100">
                    <div class="flex items-center justify-between mb-6 pb-4 border-b border-gray-200">
                        <div class="flex items-center">
                            <div class="w-12 h-12 bg-orange-100 rounded-full flex items-center justify-center mr-4">
                                <i class="fas fa-exchange-alt text-orange-600 text-xl"></i>
                            </div>
                            <h2 class="text-2xl font-bold text-gray-900">Transactions</h2>
                        </div>
                        <button onclick="document.getElementById('addTransactionModal').classList.remove('hidden')" 
                                class="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg font-medium text-sm">
                            <i class="fas fa-plus mr-2"></i>Add
                        </button>
                    </div>

                    @if($trust->transactions && $trust->transactions->count() > 0)
                        <div class="overflow-x-auto">
                            <table class="w-full text-sm">
                                <thead class="bg-gray-50 border-b border-gray-200">
                                    <tr>
                                        <th class="px-4 py-3 text-left font-semibold text-gray-600 uppercase">Date</th>
                                        <th class="px-4 py-3 text-left font-semibold text-gray-600 uppercase">Type</th>
                                        <th class="px-4 py-3 text-left font-semibold text-gray-600 uppercase">Amount</th>
                                        <th class="px-4 py-3 text-left font-semibold text-gray-600 uppercase">Description</th>
                                    </tr>
                                </thead>
                                <tbody class="divide-y divide-gray-200">
                                    @foreach($trust->transactions as $transaction)
                                        <tr class="hover:bg-gray-50">
                                            <td class="px-4 py-3 text-gray-700">{{ \Carbon\Carbon::parse($transaction->transaction_date)->format('d M Y') }}</td>
                                            <td class="px-4 py-3"><span class="px-3 py-1 text-xs font-semibold rounded-full bg-blue-100 text-blue-800">{{ ucfirst($transaction->type) }}</span></td>
                                            <td class="px-4 py-3 font-semibold text-gray-900">RM {{ number_format($transaction->amount, 2) }}</td>
                                            <td class="px-4 py-3 text-gray-600">{{ $transaction->description }}</td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    @else
                        <div class="text-center py-12">
                            <i class="fas fa-inbox text-gray-300 text-4xl mb-3 block"></i>
                            <p class="text-gray-500">No transactions recorded yet.</p>
                        </div>
                    @endif
                </div>
            </div>

            <!-- Sidebar -->
            <div class="space-y-6">
                
                <!-- Quick Actions -->
                <div class="bg-white rounded-xl shadow-lg p-6 border border-gray-100">
                    <h3 class="text-lg font-bold text-gray-900 mb-4 pb-3 border-b border-gray-200">
                        <i class="fas fa-bolt mr-2 text-yellow-500"></i>Quick Actions
                    </h3>
                    <div class="space-y-3">
                        <button onclick="document.getElementById('addTransactionModal').classList.remove('hidden')" 
                                class="w-full py-2 px-4 bg-blue-600 hover:bg-blue-700 text-white rounded-lg font-medium text-sm">
                            <i class="fas fa-plus-circle mr-2"></i>Add Transaction
                        </button>
                        <a href="{{ route('admin.trusts.statement', $trust) }}" 
                           class="block w-full py-2 px-4 bg-green-600 hover:bg-green-700 text-white rounded-lg font-medium text-center text-sm">
                            <i class="fas fa-download mr-2"></i>Generate Statement
                        </a>
                    </div>
                </div>

                <!-- Trust Summary -->
                <div class="bg-white rounded-xl shadow-lg p-6 border border-gray-100">
                    <h3 class="text-lg font-bold text-gray-900 mb-4 pb-3 border-b border-gray-200">
                        <i class="fas fa-chart-pie mr-2 text-indigo-500"></i>Summary
                    </h3>
                    <div class="space-y-3">
                        <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
                            <span class="text-gray-600 font-medium">Type:</span>
                            <strong class="text-gray-900">{{ ucfirst($trust->trust_type) }}</strong>
                        </div>
                        <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
                            <span class="text-gray-600 font-medium">Status:</span>
                            <span class="px-3 py-1 text-xs font-bold rounded-full {{ $trust->status === 'approved' ? 'bg-green-100 text-green-800' : 'bg-yellow-100 text-yellow-800' }}">
                                {{ ucfirst(str_replace('_', ' ', $trust->status)) }}
                            </span>
                        </div>
                        <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
                            <span class="text-gray-600 font-medium">Created:</span>
                            <strong class="text-gray-900">{{ $trust->created_at->diffForHumans() }}</strong>
                        </div>
                        <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
                            <span class="text-gray-600 font-medium">Updated:</span>
                            <strong class="text-gray-900">{{ $trust->updated_at->diffForHumans() }}</strong>
                        </div>
                        <div class="flex items-center justify-between p-3 bg-blue-50 rounded-lg border border-blue-200 mt-2">
                            <span class="text-gray-600 font-medium">Total Value:</span>
                            <strong class="text-lg text-blue-600">RM {{ number_format($trust->initial_value ?? 0, 2) }}</strong>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Add Transaction Modal -->
<div id="addTransactionModal" class="hidden fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center p-4">
    <div class="bg-white rounded-xl shadow-xl max-w-md w-full">
        <div class="bg-gradient-to-r from-blue-600 to-blue-700 px-6 py-4 flex justify-between items-center rounded-t-xl">
            <h3 class="text-xl font-bold text-white">Add Trust Transaction</h3>
            <button onclick="document.getElementById('addTransactionModal').classList.add('hidden')" class="text-white text-2xl">×</button>
        </div>
        <form action="{{ route('admin.trusts.transaction', $trust) }}" method="POST" class="p-6 space-y-4">
            @csrf
            <div>
                <label class="block text-sm font-semibold text-gray-700 mb-2">Transaction Type *</label>
                <select name="type" required class="w-full px-4 py-2 border-2 border-gray-300 rounded-lg focus:border-blue-500 outline-none">
                    <option value="">-- Select Type --</option>
                    <option value="contribution">Contribution</option>
                    <option value="expense">Expense</option>
                    <option value="distribution">Distribution</option>
                    <option value="fee">Fee</option>
                </select>
            </div>
            <div>
                <label class="block text-sm font-semibold text-gray-700 mb-2">Amount (RM) *</label>
                <input type="number" step="0.01" name="amount" required class="w-full px-4 py-2 border-2 border-gray-300 rounded-lg focus:border-blue-500 outline-none">
            </div>
            <div>
                <label class="block text-sm font-semibold text-gray-700 mb-2">Transaction Date *</label>
                <input type="date" name="transaction_date" value="{{ now()->format('Y-m-d') }}" required class="w-full px-4 py-2 border-2 border-gray-300 rounded-lg focus:border-blue-500 outline-none">
            </div>
            <div>
                <label class="block text-sm font-semibold text-gray-700 mb-2">Description *</label>
                <textarea name="description" rows="3" required class="w-full px-4 py-2 border-2 border-gray-300 rounded-lg focus:border-blue-500 outline-none"></textarea>
            </div>
            <div>
                <label class="block text-sm font-semibold text-gray-700 mb-2">Reference Number</label>
                <input type="text" name="reference_number" class="w-full px-4 py-2 border-2 border-gray-300 rounded-lg focus:border-blue-500 outline-none">
            </div>
            <div>
                <label class="block text-sm font-semibold text-gray-700 mb-2">Notes</label>
                <textarea name="notes" rows="2" class="w-full px-4 py-2 border-2 border-gray-300 rounded-lg focus:border-blue-500 outline-none"></textarea>
            </div>
            <div class="flex gap-3 pt-4">
                <button type="button" onclick="document.getElementById('addTransactionModal').classList.add('hidden')" 
                        class="flex-1 px-4 py-2 bg-gray-300 hover:bg-gray-400 text-gray-800 rounded-lg font-medium">
                    Cancel
                </button>
                <button type="submit" class="flex-1 px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg font-medium">
                    Add Transaction
                </button>
            </div>
        </form>
    </div>
</div>

@endsection