@extends('layouts.portal')

@section('title', 'Trust Details - ' . $trust->trust_name)
@section('page_title', 'Trust Overview')
@section('page_subtitle', $trust->trust_name)

@section('content')
<div class="bg-gradient-to-r from-blue-600 via-blue-700 to-blue-800 border-b border-blue-800 p-8 relative overflow-hidden">
    <div class="absolute top-0 right-0 w-64 h-64 bg-white rounded-full -mr-32 -mt-32 opacity-10"></div>
    <div class="w-full relative z-10">
        <div class="flex flex-col lg:flex-row justify-between items-start lg:items-center gap-6">
            <div class="flex items-center gap-5">
                <div class="w-16 h-16 bg-gradient-to-br from-blue-500 to-blue-700 rounded-xl flex items-center justify-center shadow-lg">
                    <i class="fas fa-vault text-white text-2xl"></i>
                </div>
                <div>
                    <h1 class="text-3xl font-semibold text-white tracking-wide">{{ $trust->trust_name }}</h1>
                    <p class="text-blue-100 mt-1">Trust Code: {{ $trust->trust_code }}</p>
                </div>
            </div>
            <div class="flex gap-3">
                <a href="{{ route('admin.trusts') }}" class="px-6 py-3 bg-white/20 text-white rounded-xl hover:bg-white/30 transition-all font-medium border border-white/30">
                    <i class="fas fa-arrow-left mr-2"></i>Back to Trusts
                </a>
                <a href="{{ route('admin.trusts.formal-document', $trust) }}" class="px-6 py-3 bg-white/20 text-white rounded-xl hover:bg-white/30 transition-all font-medium border border-white/30">
                    <i class="fas fa-file-pdf mr-2"></i>View Formal Document
                </a>
            </div>
        </div>
    </div>
</div>

<!-- Breadcrumb -->
<div class="px-8 mb-6 pt-8">
    <div class="flex items-center text-sm text-gray-600">
        <a href="{{ route('admin.trusts') }}" class="hover:text-gray-900">Trusts</a>
        <i class="fas fa-chevron-right mx-2 text-xs"></i>
        <span class="text-gray-900">{{ $trust->trust_name }}</span>
    </div>
</div>

<!-- Summary Cards -->
<div class="mx-8 mb-8 grid grid-cols-1 md:grid-cols-4 gap-4">
    <div class="bg-gradient-to-br from-blue-50 to-blue-100 border-l-4 border-blue-600 rounded-lg p-6">
        <div class="text-sm text-gray-600 mb-2">Trust Type</div>
        <div class="text-2xl font-bold text-blue-900">{{ ucfirst(str_replace('_', ' ', $trust->trust_type)) }}</div>
    </div>
    <div class="bg-gradient-to-br from-green-50 to-green-100 border-l-4 border-green-600 rounded-lg p-6">
        <div class="text-sm text-gray-600 mb-2">Status</div>
        <div class="text-2xl font-bold text-green-900">{{ ucfirst($trust->status) }}</div>
    </div>
    <div class="bg-gradient-to-br from-purple-50 to-purple-100 border-l-4 border-purple-600 rounded-lg p-6">
        <div class="text-sm text-gray-600 mb-2">Initial Value</div>
        <div class="text-2xl font-bold text-purple-900">RM {{ number_format($trust->initial_value ?? 0, 2) }}</div>
    </div>
    <div class="bg-gradient-to-br from-amber-50 to-amber-100 border-l-4 border-amber-600 rounded-lg p-6">
        <div class="text-sm text-gray-600 mb-2">Created</div>
        <div class="text-2xl font-bold text-amber-900">{{ \Carbon\Carbon::parse($trust->creation_date)->format('M d, Y') }}</div>
    </div>
</div>

<!-- Tabs for Different Sections -->
<div class="mx-8 mb-8">
    <div class="flex flex-wrap border-b border-gray-300 gap-0">
        <button onclick="showTab('overview')" class="tab-btn active px-6 py-3 font-semibold text-gray-700 border-b-2 border-blue-600">
            <i class="fas fa-info-circle mr-2"></i>Overview
        </button>
        <button onclick="showTab('assets')" class="tab-btn px-6 py-3 font-semibold text-gray-700 hover:text-gray-900 border-b-2 border-transparent hover:border-gray-300">
            <i class="fas fa-home mr-2"></i>Assets
        </button>
        <button onclick="showTab('beneficiaries')" class="tab-btn px-6 py-3 font-semibold text-gray-700 hover:text-gray-900 border-b-2 border-transparent hover:border-gray-300">
            <i class="fas fa-users mr-2"></i>Beneficiaries
        </button>
        <button onclick="showTab('trustees')" class="tab-btn px-6 py-3 font-semibold text-gray-700 hover:text-gray-900 border-b-2 border-transparent hover:border-gray-300">
            <i class="fas fa-user-tie mr-2"></i>Trustees
        </button>
        <button onclick="showTab('allowances')" class="tab-btn px-6 py-3 font-semibold text-gray-700 hover:text-gray-900 border-b-2 border-transparent hover:border-gray-300">
            <i class="fas fa-money-bill mr-2"></i>Allowances
        </button>
        <button onclick="showTab('donations')" class="tab-btn px-6 py-3 font-semibold text-gray-700 hover:text-gray-900 border-b-2 border-transparent hover:border-gray-300">
            <i class="fas fa-donate mr-2"></i>Donations
        </button>
    </div>
</div>

<!-- Tab Content -->
<div class="mx-8">
    <!-- Overview Tab -->
    <div id="overview" class="tab-content bg-white rounded-xl shadow-lg border border-gray-100 p-8">
        <h2 class="text-2xl font-bold text-gray-800 mb-6">Trust Overview</h2>
        
        <!-- Basic Information Table -->
        <h3 class="text-lg font-semibold text-gray-700 mb-4">Basic Information</h3>
        <div class="overflow-x-auto mb-8 border border-gray-200 rounded-lg">
            <table class="w-full">
                <tbody>
                    <tr class="border-b border-gray-200 hover:bg-gray-50">
                        <td class="px-6 py-4 font-semibold text-gray-700 bg-gray-50 w-1/3">Trust Name</td>
                        <td class="px-6 py-4 text-gray-900 font-medium">{{ $trust->trust_name }}</td>
                    </tr>
                    <tr class="border-b border-gray-200 hover:bg-gray-50">
                        <td class="px-6 py-4 font-semibold text-gray-700 bg-gray-50">Trust Code</td>
                        <td class="px-6 py-4 text-gray-900 font-mono">{{ $trust->trust_code }}</td>
                    </tr>
                    <tr class="border-b border-gray-200 hover:bg-gray-50">
                        <td class="px-6 py-4 font-semibold text-gray-700 bg-gray-50">Trust Type</td>
                        <td class="px-6 py-4">
                            <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-semibold bg-blue-100 text-blue-800">
                                <i class="fas fa-vault mr-2"></i>{{ ucfirst(str_replace('_', ' ', $trust->trust_type)) }}
                            </span>
                        </td>
                    </tr>
                    <tr class="border-b border-gray-200 hover:bg-gray-50">
                        <td class="px-6 py-4 font-semibold text-gray-700 bg-gray-50">Trust Purpose</td>
                        <td class="px-6 py-4 text-gray-900">{{ $trust->trust_purpose ?? 'Not specified' }}</td>
                    </tr>
                    <tr class="border-b border-gray-200 hover:bg-gray-50">
                        <td class="px-6 py-4 font-semibold text-gray-700 bg-gray-50">Creation Date</td>
                        <td class="px-6 py-4 text-gray-900">{{ \Carbon\Carbon::parse($trust->creation_date)->format('d M Y') }}</td>
                    </tr>
                    <tr class="border-b border-gray-200 hover:bg-gray-50">
                        <td class="px-6 py-4 font-semibold text-gray-700 bg-gray-50">Initial Value</td>
                        <td class="px-6 py-4 text-gray-900 font-semibold">RM {{ number_format($trust->initial_value ?? 0, 2) }}</td>
                    </tr>
                    <tr class="hover:bg-gray-50">
                        <td class="px-6 py-4 font-semibold text-gray-700 bg-gray-50">Status</td>
                        <td class="px-6 py-4">
                            @php
                                $statusClass = match($trust->status) {
                                    'approved' => 'bg-green-100 text-green-800',
                                    'rejected' => 'bg-red-100 text-red-800',
                                    'pending_approval' => 'bg-yellow-100 text-yellow-800',
                                    'submitted' => 'bg-blue-100 text-blue-800',
                                    default => 'bg-gray-100 text-gray-800'
                                };
                            @endphp
                            <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-semibold {{ $statusClass }}">
                                {{ ucfirst(str_replace('_', ' ', $trust->status)) }}
                            </span>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>

        <!-- Settlor/Creator Information -->
        <h3 class="text-lg font-semibold text-gray-700 mb-4">Settlor/Creator Information</h3>
        <div class="overflow-x-auto mb-8 border border-gray-200 rounded-lg">
            <table class="w-full">
                <tbody>
                    @if($trust->trust_creator)
                        <tr class="border-b border-gray-200 hover:bg-gray-50">
                            <td class="px-6 py-4 font-semibold text-gray-700 bg-gray-50 w-1/3">Full Name</td>
                            <td class="px-6 py-4 text-gray-900">{{ $trust->trust_creator['full_name'] ?? (($trust->trust_creator['first_name'] ?? 'N/A') === ($trust->trust_creator['last_name'] ?? '') ? ($trust->trust_creator['first_name'] ?? '') : (($trust->trust_creator['first_name'] ?? '') . ' ' . ($trust->trust_creator['last_name'] ?? ''))) }}</td>
                        </tr>
                        <tr class="border-b border-gray-200 hover:bg-gray-50">
                            <td class="px-6 py-4 font-semibold text-gray-700 bg-gray-50">NRIC/ID</td>
                            <td class="px-6 py-4 text-gray-900 font-mono">{{ $trust->trust_creator['nric'] ?? 'N/A' }}</td>
                        </tr>
                        <tr class="border-b border-gray-200 hover:bg-gray-50">
                            <td class="px-6 py-4 font-semibold text-gray-700 bg-gray-50">Date of Birth</td>
                            <td class="px-6 py-4 text-gray-900">{{ $trust->trust_creator['date_of_birth'] ? \Carbon\Carbon::parse($trust->trust_creator['date_of_birth'])->format('d M Y') : 'N/A' }}</td>
                        </tr>
                        <tr class="border-b border-gray-200 hover:bg-gray-50">
                            <td class="px-6 py-4 font-semibold text-gray-700 bg-gray-50">Nationality</td>
                            <td class="px-6 py-4 text-gray-900">{{ $trust->trust_creator['nationality'] ?? 'N/A' }}</td>
                        </tr>
                        <tr class="border-b border-gray-200 hover:bg-gray-50">
                            <td class="px-6 py-4 font-semibold text-gray-700 bg-gray-50">Email</td>
                            <td class="px-6 py-4 text-gray-900">{{ $trust->trust_creator['email'] ?? 'N/A' }}</td>
                        </tr>
                        <tr class="border-b border-gray-200 hover:bg-gray-50">
                            <td class="px-6 py-4 font-semibold text-gray-700 bg-gray-50">Phone</td>
                            <td class="px-6 py-4 text-gray-900">{{ $trust->trust_creator['phone'] ?? 'N/A' }}</td>
                        </tr>
                        <tr class="hover:bg-gray-50">
                            <td class="px-6 py-4 font-semibold text-gray-700 bg-gray-50">Address</td>
                            <td class="px-6 py-4 text-gray-900">{{ $trust->trust_creator['address'] ?? 'N/A' }}</td>
                        </tr>
                    @else
                        <tr>
                            <td colspan="2" class="px-6 py-8 text-center text-gray-500 italic">No creator information available</td>
                        </tr>
                    @endif
                </tbody>
            </table>
        </div>

        @if($trust->additional_instructions)
            <div class="bg-amber-50 border-l-4 border-amber-600 rounded-lg p-6">
                <h3 class="text-lg font-semibold text-gray-700 mb-3">Additional Instructions</h3>
                <p class="text-gray-900 whitespace-pre-wrap">{{ $trust->additional_instructions }}</p>
            </div>
        @endif
    </div>

    <!-- Assets Tab -->
    <div id="assets" class="tab-content hidden bg-white rounded-xl shadow-lg border border-gray-100 p-8">
        <h2 class="text-2xl font-bold text-gray-800 mb-6">Trust Assets</h2>
        
        @if($trust->assets && $trust->assets->count() > 0)
            <div class="space-y-4">
                @foreach($trust->assets as $asset)
                    <div class="border border-gray-200 rounded-lg p-6 bg-gradient-to-br from-gray-50 to-white">
                        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
                            <div>
                                <p class="text-sm text-gray-600 font-semibold">Category</p>
                                <p class="text-gray-900">{{ ucfirst(str_replace('_', ' ', $asset->asset_category)) }}</p>
                            </div>
                            <div>
                                <p class="text-sm text-gray-600 font-semibold">Type</p>
                                <p class="text-gray-900">{{ $asset->asset_type }}</p>
                            </div>
                            <div>
                                <p class="text-sm text-gray-600 font-semibold">Current Value</p>
                                <p class="text-gray-900 font-bold text-lg">RM {{ number_format($asset->current_value, 2) }}</p>
                            </div>
                            <div>
                                <p class="text-sm text-gray-600 font-semibold">Transfer Timing</p>
                                <p class="text-gray-900">{{ ucfirst(str_replace('_', ' ', $asset->transfer_timing)) }}</p>
                            </div>
                        </div>
                        <div class="mt-4 pt-4 border-t border-gray-200">
                            <p class="text-sm text-gray-600 font-semibold mb-2">Description</p>
                            <p class="text-gray-900">{{ $asset->description }}</p>
                        </div>
                        @if($asset->address)
                            <div class="mt-3">
                                <p class="text-sm text-gray-600 font-semibold mb-2">Location/Address</p>
                                <p class="text-gray-900">{{ $asset->address }}</p>
                            </div>
                        @endif
                    </div>
                @endforeach
            </div>
        @else
            <p class="text-gray-500 text-center py-8 italic">No assets added yet</p>
        @endif
    </div>

    <!-- Beneficiaries Tab -->
    <div id="beneficiaries" class="tab-content hidden bg-white rounded-xl shadow-lg border border-gray-100 p-8">
        <h2 class="text-2xl font-bold text-gray-800 mb-6">Beneficiaries</h2>
        
        @if($trust->beneficiaries && $trust->beneficiaries->count() > 0)
            <div class="space-y-4">
                @foreach($trust->beneficiaries as $beneficiary)
                    <div class="border border-gray-200 rounded-lg p-6 bg-gradient-to-br from-pink-50 to-white">
                        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                            <div>
                                <p class="text-sm text-gray-600 font-semibold">Name</p>
                                <p class="text-gray-900">{{ $beneficiary->full_name }}</p>
                            </div>
                            <div>
                                <p class="text-sm text-gray-600 font-semibold">Type</p>
                                <p class="text-gray-900">{{ ucfirst($beneficiary->beneficiary_type) }}</p>
                            </div>
                            <div>
                                <p class="text-sm text-gray-600 font-semibold">ID/Registration</p>
                                <p class="text-gray-900">{{ $beneficiary->ic_or_reg_no ?? 'N/A' }}</p>
                            </div>
                            <div>
                                <p class="text-sm text-gray-600 font-semibold">Email</p>
                                <p class="text-gray-900">{{ $beneficiary->email }}</p>
                            </div>
                            <div>
                                <p class="text-sm text-gray-600 font-semibold">Phone</p>
                                <p class="text-gray-900">{{ $beneficiary->phone }}</p>
                            </div>
                            <div>
                                <p class="text-sm text-gray-600 font-semibold">Nationality</p>
                                <p class="text-gray-900">{{ $beneficiary->nationality ?? 'N/A' }}</p>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
        @else
            <p class="text-gray-500 text-center py-8 italic">No beneficiaries added yet</p>
        @endif
    </div>

    <!-- Trustees Tab -->
    <div id="trustees" class="tab-content hidden bg-white rounded-xl shadow-lg border border-gray-100 p-8">
        <h2 class="text-2xl font-bold text-gray-800 mb-6">Trustees & Administrators</h2>
        
        @if($trust->trustees && $trust->trustees->count() > 0)
            <div class="space-y-4">
                @foreach($trust->trustees as $trustee)
                    <div class="border border-gray-200 rounded-lg p-6 bg-gradient-to-br from-purple-50 to-white">
                        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                            <div>
                                <p class="text-sm text-gray-600 font-semibold">Name</p>
                                <p class="text-gray-900">{{ $trustee->full_name }}</p>
                            </div>
                            <div>
                                <p class="text-sm text-gray-600 font-semibold">ID/Registration</p>
                                <p class="text-gray-900">{{ $trustee->ic_or_reg_no ?? 'N/A' }}</p>
                            </div>
                            <div>
                                <p class="text-sm text-gray-600 font-semibold">Email</p>
                                <p class="text-gray-900">{{ $trustee->email }}</p>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
        @else
            <p class="text-gray-500 text-center py-8 italic">No trustees added yet</p>
        @endif
    </div>

    <!-- Allowances Tab -->
    <div id="allowances" class="tab-content hidden bg-white rounded-xl shadow-lg border border-gray-100 p-8">
        <h2 class="text-2xl font-bold text-gray-800 mb-6">Allowances</h2>
        
        <div class="mb-8">
            <h3 class="text-xl font-bold text-gray-700 mb-4">Beneficiary Allowances</h3>
            @if($trust->allowances && $trust->allowances->count() > 0)
                <div class="space-y-3">
                    @foreach($trust->allowances as $allowance)
                        <div class="border border-gray-200 rounded-lg p-4 bg-yellow-50">
                            <div class="grid grid-cols-2 md:grid-cols-5 gap-3 text-sm">
                                <div>
                                    <p class="text-gray-600 font-semibold">Beneficiary</p>
                                    <p class="text-gray-900">{{ $allowance->beneficiary->full_name ?? 'N/A' }}</p>
                                </div>
                                <div>
                                    <p class="text-gray-600 font-semibold">Amount</p>
                                    <p class="text-gray-900 font-bold">{{ $allowance->currency }} {{ number_format($allowance->amount, 2) }}</p>
                                </div>
                                <div>
                                    <p class="text-gray-600 font-semibold">Frequency</p>
                                    <p class="text-gray-900">{{ ucfirst(str_replace('_', ' ', $allowance->frequency)) }}</p>
                                </div>
                                <div>
                                    <p class="text-gray-600 font-semibold">Start Date</p>
                                    <p class="text-gray-900">{{ \Carbon\Carbon::parse($allowance->start_date)->format('M d, Y') }}</p>
                                </div>
                                <div>
                                    <p class="text-gray-600 font-semibold">End Date</p>
                                    <p class="text-gray-900">{{ $allowance->end_date ? \Carbon\Carbon::parse($allowance->end_date)->format('M d, Y') : 'Ongoing' }}</p>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
            @else
                <p class="text-gray-500 italic">No beneficiary allowances</p>
            @endif
        </div>

        <div class="mb-8">
            <h3 class="text-xl font-bold text-gray-700 mb-4">Administrator Allowances</h3>
            @if($trust->administratorAllowances && $trust->administratorAllowances->count() > 0)
                <div class="space-y-3">
                    @foreach($trust->administratorAllowances as $allowance)
                        <div class="border border-gray-200 rounded-lg p-4 bg-purple-50">
                            <div class="grid grid-cols-2 md:grid-cols-5 gap-3 text-sm">
                                <div>
                                    <p class="text-gray-600 font-semibold">Administrator</p>
                                    <p class="text-gray-900">{{ $allowance->trustee->full_name ?? 'N/A' }}</p>
                                </div>
                                <div>
                                    <p class="text-gray-600 font-semibold">Amount</p>
                                    <p class="text-gray-900 font-bold">{{ $allowance->currency }} {{ number_format($allowance->amount, 2) }}</p>
                                </div>
                                <div>
                                    <p class="text-gray-600 font-semibold">Frequency</p>
                                    <p class="text-gray-900">{{ ucfirst(str_replace('_', ' ', $allowance->frequency)) }}</p>
                                </div>
                                <div>
                                    <p class="text-gray-600 font-semibold">Start Date</p>
                                    <p class="text-gray-900">{{ \Carbon\Carbon::parse($allowance->start_date)->format('M d, Y') }}</p>
                                </div>
                                <div>
                                    <p class="text-gray-600 font-semibold">End Date</p>
                                    <p class="text-gray-900">{{ $allowance->end_date ? \Carbon\Carbon::parse($allowance->end_date)->format('M d, Y') : 'Ongoing' }}</p>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
            @else
                <p class="text-gray-500 italic">No administrator allowances</p>
            @endif
        </div>

        <div>
            <h3 class="text-xl font-bold text-gray-700 mb-4">Guardian Allowances</h3>
            @if($trust->guardianAllowances && $trust->guardianAllowances->count() > 0)
                <div class="space-y-3">
                    @foreach($trust->guardianAllowances as $allowance)
                        <div class="border border-gray-200 rounded-lg p-4 bg-indigo-50">
                            <div class="grid grid-cols-2 md:grid-cols-5 gap-3 text-sm">
                                <div>
                                    <p class="text-gray-600 font-semibold">Guardian</p>
                                    <p class="text-gray-900">{{ $allowance->caretaker->full_name ?? 'N/A' }}</p>
                                </div>
                                <div>
                                    <p class="text-gray-600 font-semibold">Amount</p>
                                    <p class="text-gray-900 font-bold">{{ $allowance->currency }} {{ number_format($allowance->amount, 2) }}</p>
                                </div>
                                <div>
                                    <p class="text-gray-600 font-semibold">Frequency</p>
                                    <p class="text-gray-900">{{ ucfirst(str_replace('_', ' ', $allowance->frequency)) }}</p>
                                </div>
                                <div>
                                    <p class="text-gray-600 font-semibold">Start Date</p>
                                    <p class="text-gray-900">{{ \Carbon\Carbon::parse($allowance->start_date)->format('M d, Y') }}</p>
                                </div>
                                <div>
                                    <p class="text-gray-600 font-semibold">End Date</p>
                                    <p class="text-gray-900">{{ $allowance->end_date ? \Carbon\Carbon::parse($allowance->end_date)->format('M d, Y') : 'Ongoing' }}</p>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
            @else
                <p class="text-gray-500 italic">No guardian allowances</p>
            @endif
        </div>
    </div>

    <!-- Donations Tab -->
    <div id="donations" class="tab-content hidden bg-white rounded-xl shadow-lg border border-gray-100 p-8">
        <h2 class="text-2xl font-bold text-gray-800 mb-6">Donations & Special Gifts</h2>
        
        @if($trust->donations && $trust->donations->count() > 0)
            <div class="space-y-4">
                @foreach($trust->donations as $donation)
                    <div class="border border-gray-200 rounded-lg p-6 bg-gradient-to-br from-amber-50 to-white">
                        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
                            <div>
                                <p class="text-sm text-gray-600 font-semibold">Recipient</p>
                                <p class="text-gray-900">{{ $donation->recipient_name }}</p>
                            </div>
                            <div>
                                <p class="text-sm text-gray-600 font-semibold">Amount</p>
                                <p class="text-gray-900 font-bold">{{ $donation->amount ? 'RM ' . number_format($donation->amount, 2) : ($donation->percentage ? $donation->percentage . '%' : 'N/A') }}</p>
                            </div>
                            <div>
                                <p class="text-sm text-gray-600 font-semibold">Purpose</p>
                                <p class="text-gray-900">{{ $donation->purpose }}</p>
                            </div>
                            <div>
                                <p class="text-sm text-gray-600 font-semibold">Start Date</p>
                                <p class="text-gray-900">{{ \Carbon\Carbon::parse($donation->start_date)->format('M d, Y') }}</p>
                            </div>
                        </div>
                        @if($donation->preceding_conditions)
                            <div class="mt-4 pt-4 border-t border-gray-200">
                                <p class="text-sm text-gray-600 font-semibold mb-2">Conditions</p>
                                <p class="text-gray-900">{{ $donation->preceding_conditions }}</p>
                            </div>
                        @endif
                    </div>
                @endforeach
            </div>
        @else
            <p class="text-gray-500 text-center py-8 italic">No donations added yet</p>
        @endif
    </div>
</div>

<script>
    function showTab(tabName) {
        // Hide all tabs
        const tabs = document.querySelectorAll('.tab-content');
        tabs.forEach(tab => tab.classList.add('hidden'));
        
        // Show selected tab
        document.getElementById(tabName).classList.remove('hidden');
        
        // Update button styling
        const buttons = document.querySelectorAll('.tab-btn');
        buttons.forEach(btn => {
            btn.classList.remove('active', 'border-blue-600');
            btn.classList.add('border-transparent');
        });
        event.target.closest('.tab-btn').classList.add('active', 'border-blue-600');
    }
</script>

<style>
.tab-btn.active {
    @apply border-blue-600 text-blue-700 font-bold;
}
</style>
@endsection