@extends('layouts.portal')

@section('title', 'Trust Final Setup - Admin Allowances, Guardian Allowances & Donations')
@section('page_title', 'Complete Trust Setup')
@section('page_subtitle', 'Administrator Allowances, Guardian Allowances & Donations')

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

@section('content')
<!-- <div class="bg-gradient-to-r from-[#8B008B] via-[#9932CC] to-[#BA55D3] border-b border-[#8B008B] p-6 md: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-4 lg:gap-6">
            <div class="flex items-center gap-4 flex-1">
                
                    <div class="w-14 h-14 flex-shrink-0 bg-white/20 backdrop-blur-sm rounded-xl flex items-center justify-center shadow-lg border border-white/30">
                        <i class="fas fa-check-double text-white text-xl"></i>
                    </div>
                <div class="flex-1">
                    <h1 class="text-xl md:text-2xl lg:text-3xl font-semibold text-white tracking-wide">Complete Trust Setup</h1>
                    <p class="text-white/90 mt-1 text-sm md:text-base">Administrator Allowances, Guardian Allowances & Donations</p>
                </div>
            </div>
            <a href="{{ route('agent.trusts.allowances.index', $trust->id) }}" class="px-4 py-2 md:px-6 md:py-3 bg-white/20 text-white rounded-xl hover:bg-white/30 transition-all font-medium border border-white/30 text-sm md:text-base whitespace-nowrap flex-shrink-0 backdrop-blur-sm">
                <i class="fas fa-arrow-left mr-2"></i>Back
            </a>
        </div>
    </div>
</div> -->

<div class="bg-gradient-to-r from-[#8B008B] via-[#9932CC] to-[#BA55D3] border-b border-[#8B008B] p-6 md:p-8  overflow-hidden">
    <!-- Background Circle -->
    <div class="absolute top-0 right-0 w-64 h-64 bg-white rounded-full -mr-32 -mt-32 opacity-10 pointer-events-none"></div>
    <div class="w-full  z-10">
        <div class="flex flex-col lg:flex-row justify-between items-start lg:items-center gap-4 lg:gap-6">
            <!-- Left Side -->
            <div class="flex items-center gap-4 flex-1">
                <!-- Icon -->
                <div class=" w-14 h-14 flex-shrink-0 bg-white/20 backdrop-blur-sm rounded-xl flex items-center justify-center shadow-lg border border-white/30">
                    <i class="fas fa-check-double text-white text-xl"></i>
                </div>
                <!-- Title -->
                <div class="flex-1">
                    <h1 class="text-xl md:text-2xl lg:text-3xl font-semibold text-white tracking-wide">
                        Complete Trust Setup
                    </h1>
                    <p class="text-white/90 mt-1 text-sm md:text-base">
                        Administrator Allowances, Guardian Allowances & Donations
                    </p>
                </div>
            </div>
            <!-- Back Button -->
            <a href="{{ route('agent.trusts.allowances.index', $trust->id) }}"
               class="px-4 py-2 md:px-6 md:py-3 bg-white/20 text-white rounded-xl hover:bg-white/30 transition-all font-medium border border-white/30 text-sm md:text-base whitespace-nowrap flex-shrink-0 backdrop-blur-sm">
                <i class="fas fa-arrow-left mr-2"></i>
                Back
            </a>
        </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('agent.trusts.index') }}" class="hover:text-gray-900">Trusts</a>
        <i class="fas fa-chevron-right mx-2 text-xs"></i>
        <a href="{{ route('agent.trusts.show', $trust->id) }}" class="hover:text-gray-900">{{ $trust->trust_name }}</a>
        <i class="fas fa-chevron-right mx-2 text-xs"></i>
        <span class="text-gray-900">Final Setup</span>
    </div>
</div>

<!-- Error Messages -->
@if($errors->any())
    <div class="mx-8 mb-6">
        <div class="bg-red-50 border-l-4 border-red-500 p-4 rounded-lg">
            <div class="flex items-start">
                <i class="fas fa-exclamation-circle text-red-500 mt-1 mr-3"></i>
                <div>
                    <h3 class="text-red-800 font-semibold">Please fix the following errors:</h3>
                    <ul class="list-disc list-inside text-red-700 mt-2">
                        @foreach($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            </div>
        </div>
    </div>
@endif

@if(session('success'))
    <div class="mx-8 mb-6">
        <div class="bg-green-50 border-l-4 border-green-500 p-4 rounded-lg">
            <div class="flex items-center">
                <i class="fas fa-check-circle text-green-500 mr-3"></i>
                <p class="text-green-800">{{ session('success') }}</p>
            </div>
        </div>
    </div>
@endif

<!-- Combined Form -->
<form action="{{ route('agent.trusts.final-setup.store', $trust->id) }}" method="POST" class="bg-white rounded-xl shadow-lg border border-gray-100 p-8 mx-8 mb-8" id="finalSetupForm" onsubmit="return validateForm()">
    @csrf

    <!-- SECTION 1: Administrator Allowances -->
    <div class="mb-12 pb-12 border-b-2 border-gray-200">
        <div class="flex items-center gap-4 mb-8">
            <div class="w-14 h-14 bg-purple-100 rounded-xl flex items-center justify-center">
                <i class="fas fa-user-tie text-purple-700 text-2xl"></i>
            </div>
            <div>
                <h2 class="text-2xl font-bold text-gray-800">Administrator Allowances</h2>
                <p class="text-gray-600">Setup Regular Payments to Trust Administrators/Trustees</p>
            </div>
        </div>

        <div class="space-y-4 mb-6" id="adminAllowancesContainer">
            <!-- Admin allowances will be added here -->
        </div>

        <button type="button" onclick="addAdminAllowance()" class="px-6 py-3 bg-gradient-to-r from-purple-600 to-purple-700 text-white rounded-xl hover:from-purple-700 hover:to-purple-800 transition-all font-medium shadow-lg">
            <i class="fas fa-plus mr-2"></i>Add Administrator Allowance
        </button>
    </div>

    <!-- SECTION 2: Guardian/Caretaker Allowances -->
    <div class="mb-12 pb-12 border-b-2 border-gray-200">
        <div class="flex items-center gap-4 mb-8">
            <div class="w-14 h-14 bg-indigo-100 rounded-xl flex items-center justify-center">
                <i class="fas fa-shield-alt text-indigo-700 text-2xl"></i>
            </div>
            <div>
                <h2 class="text-2xl font-bold text-gray-800">Guardian/Caretaker Allowances</h2>
                <p class="text-gray-600">Setup Regular Payments to Guardians or Caretakers</p>
            </div>
        </div>

        <div class="space-y-4 mb-6" id="guardianAllowancesContainer">
            <!-- Guardian allowances will be added here -->
        </div>

        <button type="button" onclick="addGuardianAllowance()" class="px-6 py-3 bg-gradient-to-r from-indigo-600 to-indigo-700 text-white rounded-xl hover:from-indigo-700 hover:to-indigo-800 transition-all font-medium shadow-lg">
            <i class="fas fa-plus mr-2"></i>Add Guardian Allowance
        </button>
    </div>

    <!-- SECTION 3: Donations & Special Gifts -->
    <div class="mb-8">
        <div class="flex items-center gap-4 mb-8">
            <div class="w-14 h-14 bg-amber-100 rounded-xl flex items-center justify-center">
                <i class="fas fa-hands-helping text-amber-700 text-2xl"></i>
            </div>
            <div>
                <h2 class="text-2xl font-bold text-gray-800">Donations & Special Gifts</h2>
                <p class="text-gray-600">Setup Charitable Donations or Special Gifts</p>
            </div>
        </div>

        <div class="space-y-4 mb-6" id="donationsContainer">
            <!-- Donations will be added here -->
        </div>

        <button type="button" onclick="addDonation()" class="px-6 py-3 bg-gradient-to-r from-amber-600 to-amber-700 text-white rounded-xl hover:from-amber-700 hover:to-amber-800 transition-all font-medium shadow-lg">
            <i class="fas fa-plus mr-2"></i>Add Donation/Gift
        </button>
    </div>

    <!-- Additional Instructions -->
    <div class="bg-blue-50 border-2 border-blue-200 rounded-xl p-8 mb-8">
        <label class="block text-lg font-semibold text-gray-800 mb-3">
            <i class="fas fa-sticky-note text-blue-600 mr-2"></i>Additional Instructions
        </label>
        <textarea name="additional_instructions" rows="4"
                  class="w-full px-4 py-3 border-2 border-gray-300 rounded-lg focus:border-blue-500 focus:ring-2 focus:ring-blue-200 outline-none bg-white text-gray-900 font-medium"
                  placeholder="Any additional instructions, notes, or special conditions for the entire trust...">{{ is_string($trust->additional_instructions) && json_decode($trust->additional_instructions) ? (json_decode($trust->additional_instructions)->text ?? '') : ($trust->additional_instructions ?? '') }}</textarea>
    </div>

    <!-- Form Actions -->
    <div class="flex flex-col md:flex-row gap-4 justify-between border-t pt-6">
        <a href="{{ route('agent.trusts.gifts.index', $trust->id) }}" class="px-6 py-3 border border-gray-300 text-gray-700 rounded-xl hover:bg-gray-50 transition-colors font-medium">
            <i class="fas fa-arrow-left mr-2"></i>Back
        </a>
        <div class="flex gap-3">
            <a href="{{ route('agent.trusts.index') }}" class="px-6 py-3 border border-gray-300 text-gray-700 rounded-xl hover:bg-gray-50 transition-colors font-medium">
                Skip
            </a>
            <button type="submit" class="px-6 py-3 bg-gradient-to-r from-green-600 to-green-700 text-white rounded-xl hover:from-green-700 hover:to-green-800 transition-colors font-medium shadow-lg">
                <i class="fas fa-check mr-2"></i>Complete Trust Setup
            </button>
        </div>
    </div>
</form>

<script>
    let adminCounter = 1;
    let guardianCounter = 1;
    let donationCounter = 1;

    document.addEventListener('DOMContentLoaded', function() {
        loadExistingData();
    });

    function loadExistingData() {
        const trustees = @json($trust->trustees ?? []);
        const caretakers = @json($trust->caretakers ?? []);
        const adminAllowances = @json($trust->administratorAllowances ?? []);
        const guardianAllowances = @json($trust->guardianAllowances ?? []);
        const donations = @json($trust->donations ?? []);

        // Load admin allowances - start counter from 1
        if (adminAllowances.length > 0) {
            adminAllowances.forEach((allowance, index) => {
                createAdminAllowanceCard(trustees, allowance, index);
            });
            adminCounter = adminAllowances.length + 1;
        } else {
            createAdminAllowanceCard(trustees, null, 0);
            adminCounter = 1;
        }

        // Load guardian allowances - start counter from 1
        if (guardianAllowances.length > 0) {
            guardianAllowances.forEach((allowance, index) => {
                createGuardianAllowanceCard(caretakers, allowance, index);
            });
            guardianCounter = guardianAllowances.length + 1;
        } else {
            createGuardianAllowanceCard(caretakers, null, 0);
            guardianCounter = 1;
        }

        // Load donations - start counter from 1
        if (donations.length > 0) {
            donations.forEach((donation, index) => {
                createDonationCard(donation, index);
            });
            donationCounter = donations.length + 1;
        } else {
            createDonationCard(null, 0);
            donationCounter = 1;
        }
    }

    function addAdminAllowance() {
        const trustees = @json($trust->trustees ?? []);
        createAdminAllowanceCard(trustees, null, adminCounter);
        adminCounter++;
    }

    function createAdminAllowanceCard(trustees, allowance, index) {
        const container = document.getElementById('adminAllowancesContainer');
        const card = document.createElement('div');
        card.className = 'bg-gradient-to-br from-white to-purple-50 border-2 border-gray-200 rounded-xl p-6 admin-allowance-card';
        card.setAttribute('data-index', index);

        let trusteeOptions = '<option value="">Select Trustee/Administrator</option>';
        trustees.forEach(t => {
            const selected = allowance && allowance.trust_trustee_id === t.id ? 'selected' : '';
            trusteeOptions += `<option value="${t.id}" ${selected}>${t.full_name}</option>`;
        });


         // Format dates if they exist (handle both date strings and date objects)
        let startDateValue = '';
        if (allowance?.start_date) {
            try {
                const dateObj = new Date(allowance.start_date);
                if (!isNaN(dateObj.getTime())) {
                    startDateValue = dateObj.toISOString().split('T')[0];
                }
            } catch (e) {
                startDateValue = allowance.start_date;
            }
        }
        
        let endDateValue = '';
        if (allowance?.end_date) {
            try {
                const dateObj = new Date(allowance.end_date);
                if (!isNaN(dateObj.getTime())) {
                    endDateValue = dateObj.toISOString().split('T')[0];
                }
            } catch (e) {
                endDateValue = allowance.end_date;
            }
        }

        const currency = allowance?.currency || 'MYR';
        const amount = allowance?.amount || '';
        const frequency = allowance?.frequency || '';
        const startDate = allowance?.start_date || '';
        const endDate = allowance?.end_date || '';
        const conditions = allowance?.preceding_conditions || '';

        card.innerHTML = `
            <div class="flex justify-between items-center mb-4">
                <h4 class="text-lg font-bold text-purple-900">Admin Allowance ${index + 1}</h4>
                <button type="button" onclick="removeCard(this)" class="px-3 py-1 bg-red-600 text-white rounded text-sm hover:bg-red-700">
                    <i class="fas fa-trash mr-1"></i>Remove
                </button>
            </div>
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                <div>
                    <label class="block text-sm font-semibold text-gray-700 mb-2">Administrator Name *</label>
                    <select name="admin_allowances[${index}][trustee_id]" required
                            class="w-full px-3 py-2 border-2 border-gray-300 rounded-lg focus:border-purple-500 focus:ring-2 focus:ring-purple-200 outline-none">
                        ${trusteeOptions}
                    </select>
                </div>
                <div>
                    <label class="block text-sm font-semibold text-gray-700 mb-2">Currency *</label>
                    <select name="admin_allowances[${index}][currency]" required
                            class="w-full px-3 py-2 border-2 border-gray-300 rounded-lg focus:border-purple-500 focus:ring-2 focus:ring-purple-200 outline-none">
                        <option value="MYR" ${currency === 'MYR' ? 'selected' : ''}>RM (MYR)</option>
                        <option value="USD" ${currency === 'USD' ? 'selected' : ''}>USD</option>
                        <option value="SGD" ${currency === 'SGD' ? 'selected' : ''}>SGD</option>
                        <option value="GBP" ${currency === 'GBP' ? 'selected' : ''}>GBP</option>
                    </select>
                </div>
                <div>
                    <label class="block text-sm font-semibold text-gray-700 mb-2">Amount *</label>
                    <input type="number" name="admin_allowances[${index}][amount]" step="0.01" required value="${amount}"
                           class="w-full px-3 py-2 border-2 border-gray-300 rounded-lg focus:border-purple-500 focus:ring-2 focus:ring-purple-200 outline-none"
                           placeholder="0.00">
                </div>
                <div>
                    <label class="block text-sm font-semibold text-gray-700 mb-2">Start Date *</label>
                    <input type="date" name="admin_allowances[${index}][start_date]" required value="${startDateValue}"
                           class="w-full px-3 py-2 border-2 border-gray-300 rounded-lg focus:border-purple-500 focus:ring-2 focus:ring-purple-200 outline-none">
                </div>
                <div>
                    <label class="block text-sm font-semibold text-gray-700 mb-2">End Date (Optional)</label>
                    <input type="date" name="admin_allowances[${index}][end_date]" value="${endDateValue}"
                           class="w-full px-3 py-2 border-2 border-gray-300 rounded-lg focus:border-purple-500 focus:ring-2 focus:ring-purple-200 outline-none">
                </div>
                <div>
                    <label class="block text-sm font-semibold text-gray-700 mb-2">Frequency *</label>
                    <select name="admin_allowances[${index}][frequency]" required
                            class="w-full px-3 py-2 border-2 border-gray-300 rounded-lg focus:border-purple-500 focus:ring-2 focus:ring-purple-200 outline-none">
                        <option value="">Select Frequency</option>
                        <option value="monthly" ${frequency === 'monthly' ? 'selected' : ''}>Monthly</option>
                        <option value="quarterly" ${frequency === 'quarterly' ? 'selected' : ''}>Quarterly</option>
                        <option value="semi_annual" ${frequency === 'semi_annual' ? 'selected' : ''}>Semi-Annual</option>
                        <option value="annual" ${frequency === 'annual' ? 'selected' : ''}>Annual</option>
                    </select>
                </div>
                <div class="lg:col-span-3">
                    <label class="block text-sm font-semibold text-gray-700 mb-2">Preceding Conditions</label>
                    <textarea name="admin_allowances[${index}][preceding_conditions]" rows="2"
                              class="w-full px-3 py-2 border-2 border-gray-300 rounded-lg focus:border-purple-500 focus:ring-2 focus:ring-purple-200 outline-none resize-none"
                              placeholder="Any conditions or special instructions...">${conditions}</textarea>
                </div>
            </div>
        `;
        container.appendChild(card);
    }

    function addGuardianAllowance() {
        const caretakers = @json($trust->caretakers ?? []);
        createGuardianAllowanceCard(caretakers, null, guardianCounter);
        guardianCounter++;
    }

    function createGuardianAllowanceCard(caretakers, allowance, index) {
        const container = document.getElementById('guardianAllowancesContainer');
        const card = document.createElement('div');
        card.className = 'bg-gradient-to-br from-white to-indigo-50 border-2 border-gray-200 rounded-xl p-6 guardian-allowance-card';
        card.setAttribute('data-index', index);

        let caretakerOptions = '<option value="">Select Guardian/Caretaker</option>';
        caretakers.forEach(c => {
            const selected = allowance && allowance.trust_caretaker_id === c.id ? 'selected' : '';
            caretakerOptions += `<option value="${c.id}" ${selected}>${c.full_name}</option>`;
        });

         // Format dates if they exist (handle both date strings and date objects)
        let startDateValue = '';
        if (allowance?.start_date) {
            try {
                const dateObj = new Date(allowance.start_date);
                if (!isNaN(dateObj.getTime())) {
                    startDateValue = dateObj.toISOString().split('T')[0];
                }
            } catch (e) {
                startDateValue = allowance.start_date;
            }
        }
        
        let endDateValue = '';
        if (allowance?.end_date) {
            try {
                const dateObj = new Date(allowance.end_date);
                if (!isNaN(dateObj.getTime())) {
                    endDateValue = dateObj.toISOString().split('T')[0];
                }
            } catch (e) {
                endDateValue = allowance.end_date;
            }
        }

        const currency = allowance?.currency || 'MYR';
        const amount = allowance?.amount || '';
        const frequency = allowance?.frequency || '';
        const startDate = allowance?.start_date || '';
        const endDate = allowance?.end_date || '';
        const conditions = allowance?.preceding_conditions || '';

        card.innerHTML = `
            <div class="flex justify-between items-center mb-4">
                <h4 class="text-lg font-bold text-indigo-900">Guardian Allowance ${index + 1}</h4>
                <button type="button" onclick="removeCard(this)" class="px-3 py-1 bg-red-600 text-white rounded text-sm hover:bg-red-700">
                    <i class="fas fa-trash mr-1"></i>Remove
                </button>
            </div>
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                <div>
                    <label class="block text-sm font-semibold text-gray-700 mb-2">Guardian/Caretaker Name *</label>
                    <select name="guardian_allowances[${index}][caretaker_id]" required
                            class="w-full px-3 py-2 border-2 border-gray-300 rounded-lg focus:border-indigo-500 focus:ring-2 focus:ring-indigo-200 outline-none">
                        ${caretakerOptions}
                    </select>
                </div>
                <div>
                    <label class="block text-sm font-semibold text-gray-700 mb-2">Currency *</label>
                    <select name="guardian_allowances[${index}][currency]" required
                            class="w-full px-3 py-2 border-2 border-gray-300 rounded-lg focus:border-indigo-500 focus:ring-2 focus:ring-indigo-200 outline-none">
                        <option value="MYR" ${currency === 'MYR' ? 'selected' : ''}>RM (MYR)</option>
                        <option value="USD" ${currency === 'USD' ? 'selected' : ''}>USD</option>
                        <option value="SGD" ${currency === 'SGD' ? 'selected' : ''}>SGD</option>
                        <option value="GBP" ${currency === 'GBP' ? 'selected' : ''}>GBP</option>
                    </select>
                </div>
                <div>
                    <label class="block text-sm font-semibold text-gray-700 mb-2">Amount *</label>
                    <input type="number" name="guardian_allowances[${index}][amount]" step="0.01" required value="${amount}"
                           class="w-full px-3 py-2 border-2 border-gray-300 rounded-lg focus:border-indigo-500 focus:ring-2 focus:ring-indigo-200 outline-none"
                           placeholder="0.00">
                </div>
                <div>
                    <label class="block text-sm font-semibold text-gray-700 mb-2">Start Date *</label>
                    <input type="date" name="guardian_allowances[${index}][start_date]" required value="${startDateValue}"
                           class="w-full px-3 py-2 border-2 border-gray-300 rounded-lg focus:border-indigo-500 focus:ring-2 focus:ring-indigo-200 outline-none">
                </div>
                <div>
                    <label class="block text-sm font-semibold text-gray-700 mb-2">End Date (Optional)</label>
                    <input type="date" name="guardian_allowances[${index}][end_date]" value="${endDateValue}"
                           class="w-full px-3 py-2 border-2 border-gray-300 rounded-lg focus:border-indigo-500 focus:ring-2 focus:ring-indigo-200 outline-none">
                </div>
                <div>
                    <label class="block text-sm font-semibold text-gray-700 mb-2">Frequency *</label>
                    <select name="guardian_allowances[${index}][frequency]" required
                            class="w-full px-3 py-2 border-2 border-gray-300 rounded-lg focus:border-indigo-500 focus:ring-2 focus:ring-indigo-200 outline-none">
                        <option value="">Select Frequency</option>
                        <option value="monthly" ${frequency === 'monthly' ? 'selected' : ''}>Monthly</option>
                        <option value="quarterly" ${frequency === 'quarterly' ? 'selected' : ''}>Quarterly</option>
                        <option value="semi_annual" ${frequency === 'semi_annual' ? 'selected' : ''}>Semi-Annual</option>
                        <option value="annual" ${frequency === 'annual' ? 'selected' : ''}>Annual</option>
                    </select>
                </div>
                <div class="lg:col-span-3">
                    <label class="block text-sm font-semibold text-gray-700 mb-2">Preceding Conditions</label>
                    <textarea name="guardian_allowances[${index}][preceding_conditions]" rows="2"
                              class="w-full px-3 py-2 border-2 border-gray-300 rounded-lg focus:border-indigo-500 focus:ring-2 focus:ring-indigo-200 outline-none resize-none"
                              placeholder="Any conditions or special instructions...">${conditions}</textarea>
                </div>
            </div>
        `;
        container.appendChild(card);
    }

    function addDonation() {
        createDonationCard(null, donationCounter);
        donationCounter++;
    }

    function createDonationCard(donation, index) {
        const container = document.getElementById('donationsContainer');
        const card = document.createElement('div');
        card.className = 'bg-gradient-to-br from-white to-amber-50 border-2 border-gray-200 rounded-xl p-6 donation-card';
        card.setAttribute('data-index', index);

          // Format dates if they exist (handle both date strings and date objects)
        let startDateValue = '';
        if (donation?.start_date) {
            try {
                const dateObj = new Date(donation.start_date);
                if (!isNaN(dateObj.getTime())) {
                    startDateValue = dateObj.toISOString().split('T')[0];
                }
            } catch (e) {
                startDateValue = donation.start_date;
            }
        }
        
        let endDateValue = '';
        if (donation?.end_date) {
            try {
                const dateObj = new Date(donation.end_date);
                if (!isNaN(dateObj.getTime())) {
                    endDateValue = dateObj.toISOString().split('T')[0];
                }
            } catch (e) {
                endDateValue = donation.end_date;
            }
        }

        const recipientName = donation?.recipient_name || '';
        const amount = donation?.amount || '';
        const percentage = donation?.percentage || '';
        const startDate = donation?.start_date || '';
        const endDate = donation?.end_date || '';
        const purpose = donation?.purpose || '';
        const conditions = donation?.preceding_conditions || '';

        card.innerHTML = `
            <div class="flex justify-between items-center mb-4">
                <h4 class="text-lg font-bold text-amber-900">Donation/Gift ${index + 1}</h4>
                <button type="button" onclick="removeCard(this)" class="px-3 py-1 bg-red-600 text-white rounded text-sm hover:bg-red-700">
                    <i class="fas fa-trash mr-1"></i>Remove
                </button>
            </div>
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                <div>
                    <label class="block text-sm font-semibold text-gray-700 mb-2">Recipient Name *</label>
                    <input type="text" name="donations[${index}][recipient_name]" required value="${recipientName}"
                           class="w-full px-3 py-2 border-2 border-gray-300 rounded-lg focus:border-amber-500 focus:ring-2 focus:ring-amber-200 outline-none"
                           placeholder="Organization or Person Name">
                </div>
                <div>
                    <label class="block text-sm font-semibold text-gray-700 mb-2">Amount (RM) (Optional)</label>
                    <input type="number" name="donations[${index}][amount]" step="0.01" value="${amount}"
                           class="w-full px-3 py-2 border-2 border-gray-300 rounded-lg focus:border-amber-500 focus:ring-2 focus:ring-amber-200 outline-none"
                           placeholder="0.00">
                </div>
                <div>
                    <label class="block text-sm font-semibold text-gray-700 mb-2">Percentage of Estate (Optional)</label>
                    <input type="number" name="donations[${index}][percentage]" step="0.01" value="${percentage}"
                           class="w-full px-3 py-2 border-2 border-gray-300 rounded-lg focus:border-amber-500 focus:ring-2 focus:ring-amber-200 outline-none"
                           placeholder="e.g., 5">
                </div>
                <div>
                    <label class="block text-sm font-semibold text-gray-700 mb-2">Start Date *</label>
                    <input type="date" name="donations[${index}][start_date]" required value="${startDateValue}"
                           class="w-full px-3 py-2 border-2 border-gray-300 rounded-lg focus:border-amber-500 focus:ring-2 focus:ring-amber-200 outline-none">
                </div>
                <div>
                    <label class="block text-sm font-semibold text-gray-700 mb-2">End Date (Optional)</label>
                    <input type="date" name="donations[${index}][end_date]" value="${endDateValue}"
                           class="w-full px-3 py-2 border-2 border-gray-300 rounded-lg focus:border-amber-500 focus:ring-2 focus:ring-amber-200 outline-none">
                </div>
                <div>
                    <label class="block text-sm font-semibold text-gray-700 mb-2">Purpose *</label>
                    <input type="text" name="donations[${index}][purpose]" required value="${purpose}"
                           class="w-full px-3 py-2 border-2 border-gray-300 rounded-lg focus:border-amber-500 focus:ring-2 focus:ring-amber-200 outline-none"
                           placeholder="e.g., Charity, Religious, Educational">
                </div>
                <div class="lg:col-span-3">
                    <label class="block text-sm font-semibold text-gray-700 mb-2">Preceding Conditions</label>
                    <textarea name="donations[${index}][preceding_conditions]" rows="2"
                              class="w-full px-3 py-2 border-2 border-gray-300 rounded-lg focus:border-amber-500 focus:ring-2 focus:ring-amber-200 outline-none resize-none"
                              placeholder="Any conditions or special instructions...">${conditions}</textarea>
                </div>
            </div>
        `;
        container.appendChild(card);
    }

    function removeCard(button) {
        button.closest('[class*="-card"]').remove();
    }

    function validateForm() {
        // Remove the confirm dialog that might be causing issues
        // Simply return true to allow form submission
        return true;
    }
</script>
@endsection