@extends('layouts.portal')

@section('title', 'Add Allowances - Dummy Will')

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

@section('content')
<div class="max-w-4xl mx-auto">
    <div class="bg-white rounded-xl shadow-md p-4">
        <div class="mb-4">
            <div class="bg-gradient-to-r from-green-600 to-green-700 rounded-xl p-4 mb-4 shadow-md">
                <div class="flex items-center">
                    <div class="w-8 h-8 bg-white bg-opacity-20 rounded-full flex items-center justify-center mr-3">
                        <i class="fas fa-hand-holding-usd text-white text-sm"></i>
                    </div>
                    <div>
                        <h2 class="text-lg font-bold text-white">🧾 Allowances</h2>
                        <p class="text-green-100 text-xs">Set allowances for beneficiaries, guardian, and trustees</p>
                    </div>
                </div>
            </div>
        </div>

        @if(session('success'))
            <div class="bg-green-100 border border-green-400 text-green-700 px-3 py-2 rounded mb-4 text-sm">
                {{ session('success') }}
            </div>
        @endif

        <form action="{{ route('client.dummy.will.allowances.store', $will->id) }}" method="POST">
            @csrf
            
            <div class="space-y-4">
                <!-- Beneficiary Allowances -->
                <div class="bg-gradient-to-r from-green-50 to-green-100 rounded-xl border-2 border-gray-100 p-3 shadow-md">
                    <div class="flex justify-between items-center mb-3">
                        <h3 class="text-sm font-bold text-gray-800 flex items-center">
                            <span class="w-6 h-6 bg-white border-2 border-gray-300 rounded-full flex items-center justify-center text-gray-800 text-xs font-bold mr-2">1</span>
                            Beneficiary Allowances
                        </h3>
                        <button type="button" onclick="addBeneficiaryAllowance()" class="px-3 py-1 bg-green-600 text-white rounded-lg hover:bg-green-700 text-xs font-medium flex items-center">
                            <i class="fas fa-plus mr-1"></i> Add Beneficiary
                        </button>
                    </div>
                    
                    <div id="beneficiary-allowances-container" class="space-y-4">
                        <!-- First Beneficiary Allowance -->
                        <div class="beneficiary-allowance-item bg-white p-4 rounded-lg border border-gray-200" data-index="0">
                            <div class="flex justify-between items-center mb-3">
                                <h4 class="font-medium text-gray-900">Beneficiary 1</h4>
                                <button type="button" onclick="removeBeneficiaryAllowance(0)" class="text-red-500 hover:text-red-700 text-sm">
                                    <i class="fas fa-trash"></i> Remove
                                </button>
                            </div>
                            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                                <div>
                                    <label class="block text-sm font-medium text-gray-900 mb-2">Beneficiary Name</label>
                                    <input type="text" name="beneficiary_allowances[0][name]" class="w-full border border-gray-300 rounded px-3 py-2 text-gray-900" placeholder="Enter beneficiary name">
                                </div>
                                <div>
                                    <label class="block text-sm font-medium text-gray-900 mb-2">Monthly Allowance Amount</label>
                                    <input type="text" name="beneficiary_allowances[0][amount]" class="w-full border border-gray-300 rounded px-3 py-2 text-gray-900" placeholder="Enter amount">
                                </div>
                                <div>
                                    <label class="block text-sm font-medium text-gray-900 mb-2">Frequency</label>
                                    <input type="text" name="beneficiary_allowances[0][frequency]" class="w-full border border-gray-300 rounded px-3 py-2 text-gray-900" placeholder="Enter frequency">
                                </div>
                                <div>
                                    <label class="block text-sm font-medium text-gray-900 mb-2">Conditions</label>
                                    <input type="text" name="beneficiary_allowances[0][conditions]" class="w-full border border-gray-300 rounded px-3 py-2 text-gray-900" placeholder="Enter conditions">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- Guardian Allowances -->
                <div class="bg-gradient-to-r from-green-50 to-emerald-50 rounded-xl border-2 border-green-200 p-6 shadow-lg">
                    <div class="flex justify-between items-center mb-4">
                        <h3 class="text-lg font-bold text-gray-800 flex items-center">
                            <span class="w-8 h-8 bg-green-600 text-white rounded-full flex items-center justify-center text-sm font-bold mr-3">2</span>
                            Guardian Allowances
                        </h3>
                        <button type="button" onclick="addGuardianAllowance()" class="px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 text-sm font-medium flex items-center">
                            <i class="fas fa-plus mr-2"></i> Add Guardian
                        </button>
                    </div>
                    
                    <div id="guardian-allowances-container" class="space-y-4">
                        <!-- First Guardian Allowance -->
                        <div class="guardian-allowance-item bg-white p-4 rounded-lg border border-gray-200" data-guardian-index="0">
                            <div class="flex justify-between items-center mb-3">
                                <h4 class="font-medium text-gray-900">Guardian 1</h4>
                                <button type="button" onclick="removeGuardianAllowance(0)" class="text-red-500 hover:text-red-700 text-sm">
                                    <i class="fas fa-trash"></i> Remove
                                </button>
                            </div>
                            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                                <div>
                                    <label class="block text-sm font-medium text-gray-900 mb-2">Guardian Name</label>
                                    <input type="text" name="guardian_allowances[0][name]" class="w-full border border-gray-300 rounded px-3 py-2 text-gray-900" placeholder="Enter guardian name">
                                </div>
                                <div>
                                    <label class="block text-sm font-medium text-gray-900 mb-2">Monthly Allowance Amount</label>
                                    <input type="text" name="guardian_allowances[0][amount]" class="w-full border border-gray-300 rounded px-3 py-2 text-gray-900" placeholder="Enter amount">
                                </div>
                                <div>
                                    <label class="block text-sm font-medium text-gray-900 mb-2">Frequency</label>
                                    <input type="text" name="guardian_allowances[0][frequency]" class="w-full border border-gray-300 rounded px-3 py-2 text-gray-900" placeholder="Enter frequency">
                                </div>
                                <div>
                                    <label class="block text-sm font-medium text-gray-900 mb-2">Conditions</label>
                                    <input type="text" name="guardian_allowances[0][conditions]" class="w-full border border-gray-300 rounded px-3 py-2 text-gray-900" placeholder="Enter conditions">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- Trustee Allowances -->
                <div class="bg-gradient-to-r from-purple-50 to-pink-50 rounded-xl border-2 border-purple-200 p-6 shadow-lg">
                    <div class="flex justify-between items-center mb-4">
                        <h3 class="text-lg font-bold text-gray-800 flex items-center">
                            <span class="w-8 h-8 bg-purple-600 text-white rounded-full flex items-center justify-center text-sm font-bold mr-3">3</span>
                            Trustee Allowances
                        </h3>
                        <button type="button" onclick="addTrusteeAllowance()" class="px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 text-sm font-medium flex items-center">
                            <i class="fas fa-plus mr-2"></i> Add Trustee
                        </button>
                    </div>
                    
                    <div id="trustee-allowances-container" class="space-y-4">
                        <!-- First Trustee Allowance -->
                        <div class="trustee-allowance-item bg-white p-4 rounded-lg border border-gray-200" data-trustee-index="0">
                            <div class="flex justify-between items-center mb-3">
                                <h4 class="font-medium text-gray-900">Trustee 1</h4>
                                <button type="button" onclick="removeTrusteeAllowance(0)" class="text-red-500 hover:text-red-700 text-sm">
                                    <i class="fas fa-trash"></i> Remove
                                </button>
                            </div>
                            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                                <div>
                                    <label class="block text-sm font-medium text-gray-900 mb-2">Trustee Name</label>
                                    <input type="text" name="trustee_allowances[0][name]" class="w-full border border-gray-300 rounded px-3 py-2 text-gray-900" placeholder="Enter trustee name">
                                </div>
                                <div>
                                    <label class="block text-sm font-medium text-gray-900 mb-2">Amount</label>
                                    <input type="text" name="trustee_allowances[0][amount]" class="w-full border border-gray-300 rounded px-3 py-2 text-gray-900" placeholder="Enter amount">
                                </div>
                                <div>
                                    <label class="block text-sm font-medium text-gray-900 mb-2">Frequency</label>
                                    <input type="text" name="trustee_allowances[0][frequency]" class="w-full border border-gray-300 rounded px-3 py-2 text-gray-900" placeholder="Enter frequency">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="mt-8 flex justify-between">
                <a href="{{ route('client.dummy.will.trustees', $will->id) }}" class="bg-gray-500 text-white px-6 py-2 rounded hover:bg-gray-600">
                    Back
                </a>
                <button type="submit" class="bg-blue-600 text-white px-6 py-2 rounded hover:bg-blue-700">
                    Continue to Gifts
                </button>
            </div>
        </form>
    </div>
</div>

<script>
let beneficiaryAllowanceCount = 1; // Start with 1 beneficiary allowance
let guardianAllowanceCount = 1; // Start with 1 guardian allowance
let trusteeAllowanceCount = 1; // Start with 1 trustee allowance

function addBeneficiaryAllowance() {
    const container = document.getElementById('beneficiary-allowances-container');
    const newIndex = beneficiaryAllowanceCount;
    
    const newBeneficiaryAllowance = document.createElement('div');
    newBeneficiaryAllowance.className = 'beneficiary-allowance-item bg-white p-4 rounded-lg border border-gray-200';
    newBeneficiaryAllowance.dataset.index = newIndex;
    
    newBeneficiaryAllowance.innerHTML = `
        <div class="flex justify-between items-center mb-3">
            <h4 class="font-medium text-gray-900">Beneficiary ${newIndex + 1}</h4>
            <button type="button" onclick="removeBeneficiaryAllowance(${newIndex})" class="text-red-500 hover:text-red-700 text-sm">
                <i class="fas fa-trash"></i> Remove
            </button>
        </div>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div>
                <label class="block text-sm font-medium text-gray-900 mb-2">Beneficiary Name</label>
                <input type="text" name="beneficiary_allowances[${newIndex}][name]" class="w-full border border-gray-300 rounded px-3 py-2 text-gray-900" placeholder="Enter beneficiary name">
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-900 mb-2">Monthly Allowance Amount</label>
                <input type="text" name="beneficiary_allowances[${newIndex}][amount]" class="w-full border border-gray-300 rounded px-3 py-2 text-gray-900" placeholder="Enter amount">
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-900 mb-2">Frequency</label>
                <input type="text" name="beneficiary_allowances[${newIndex}][frequency]" class="w-full border border-gray-300 rounded px-3 py-2 text-gray-900" placeholder="Enter frequency">
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-900 mb-2">Conditions</label>
                <input type="text" name="beneficiary_allowances[${newIndex}][conditions]" class="w-full border border-gray-300 rounded px-3 py-2 text-gray-900" placeholder="Enter conditions">
            </div>
        </div>
    `;
    
    container.appendChild(newBeneficiaryAllowance);
    beneficiaryAllowanceCount++;
    
    // Add animation
    newBeneficiaryAllowance.style.opacity = '0';
    newBeneficiaryAllowance.style.transform = 'translateY(-20px)';
    setTimeout(() => {
        newBeneficiaryAllowance.style.transition = 'all 0.3s ease';
        newBeneficiaryAllowance.style.opacity = '1';
        newBeneficiaryAllowance.style.transform = 'translateY(0)';
    }, 10);
}

function removeBeneficiaryAllowance(index) {
    const item = document.querySelector(`[data-index="${index}"]`);
    if (item) {
        // Add removal animation
        item.style.transition = 'all 0.3s ease';
        item.style.opacity = '0';
        item.style.transform = 'translateX(-20px)';
        
        setTimeout(() => {
            item.remove();
            // Update beneficiary numbers
            updateBeneficiaryNumbers();
        }, 300);
    }
}

function updateBeneficiaryNumbers() {
    const items = document.querySelectorAll('.beneficiary-allowance-item');
    items.forEach((item, index) => {
        const header = item.querySelector('h4');
        if (header) {
            header.textContent = `Beneficiary ${index + 1}`;
        }
        item.dataset.index = index;
    });
}

// Guardian Allowance Functions
function addGuardianAllowance() {
    const container = document.getElementById('guardian-allowances-container');
    const newIndex = guardianAllowanceCount;
    
    const newGuardianAllowance = document.createElement('div');
    newGuardianAllowance.className = 'guardian-allowance-item bg-white p-4 rounded-lg border border-gray-200';
    newGuardianAllowance.dataset.guardianIndex = newIndex;
    
    newGuardianAllowance.innerHTML = `
        <div class="flex justify-between items-center mb-3">
            <h4 class="font-medium text-gray-900">Guardian ${newIndex + 1}</h4>
            <button type="button" onclick="removeGuardianAllowance(${newIndex})" class="text-red-500 hover:text-red-700 text-sm">
                <i class="fas fa-trash"></i> Remove
            </button>
        </div>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div>
                <label class="block text-sm font-medium text-gray-900 mb-2">Guardian Name</label>
                <input type="text" name="guardian_allowances[${newIndex}][name]" class="w-full border border-gray-300 rounded px-3 py-2 text-gray-900" placeholder="Enter guardian name">
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-900 mb-2">Monthly Allowance Amount</label>
                <input type="text" name="guardian_allowances[${newIndex}][amount]" class="w-full border border-gray-300 rounded px-3 py-2 text-gray-900" placeholder="Enter amount">
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-900 mb-2">Frequency</label>
                <input type="text" name="guardian_allowances[${newIndex}][frequency]" class="w-full border border-gray-300 rounded px-3 py-2 text-gray-900" placeholder="Enter frequency">
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-900 mb-2">Conditions</label>
                <input type="text" name="guardian_allowances[${newIndex}][conditions]" class="w-full border border-gray-300 rounded px-3 py-2 text-gray-900" placeholder="Enter conditions">
            </div>
        </div>
    `;
    
    container.appendChild(newGuardianAllowance);
    guardianAllowanceCount++;
    
    // Add animation
    newGuardianAllowance.style.opacity = '0';
    newGuardianAllowance.style.transform = 'translateY(-20px)';
    setTimeout(() => {
        newGuardianAllowance.style.transition = 'all 0.3s ease';
        newGuardianAllowance.style.opacity = '1';
        newGuardianAllowance.style.transform = 'translateY(0)';
    }, 10);
}

function removeGuardianAllowance(index) {
    const item = document.querySelector(`[data-guardian-index="${index}"]`);
    if (item) {
        // Add removal animation
        item.style.transition = 'all 0.3s ease';
        item.style.opacity = '0';
        item.style.transform = 'translateX(-20px)';
        
        setTimeout(() => {
            item.remove();
            // Update guardian numbers
            updateGuardianNumbers();
        }, 300);
    }
}

function updateGuardianNumbers() {
    const items = document.querySelectorAll('.guardian-allowance-item');
    items.forEach((item, index) => {
        const header = item.querySelector('h4');
        if (header) {
            header.textContent = `Guardian ${index + 1}`;
        }
        item.dataset.guardianIndex = index;
    });
}

// Trustee Allowance Functions
function addTrusteeAllowance() {
    const container = document.getElementById('trustee-allowances-container');
    const newIndex = trusteeAllowanceCount;
    
    const newTrusteeAllowance = document.createElement('div');
    newTrusteeAllowance.className = 'trustee-allowance-item bg-white p-4 rounded-lg border border-gray-200';
    newTrusteeAllowance.dataset.trusteeIndex = newIndex;
    
    newTrusteeAllowance.innerHTML = `
        <div class="flex justify-between items-center mb-3">
            <h4 class="font-medium text-gray-900">Trustee ${newIndex + 1}</h4>
            <button type="button" onclick="removeTrusteeAllowance(${newIndex})" class="text-red-500 hover:text-red-700 text-sm">
                <i class="fas fa-trash"></i> Remove
            </button>
        </div>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div>
                <label class="block text-sm font-medium text-gray-900 mb-2">Trustee Name</label>
                <input type="text" name="trustee_allowances[${newIndex}][name]" class="w-full border border-gray-300 rounded px-3 py-2 text-gray-900" placeholder="Enter trustee name">
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-900 mb-2">Amount</label>
                <input type="text" name="trustee_allowances[${newIndex}][amount]" class="w-full border border-gray-300 rounded px-3 py-2 text-gray-900" placeholder="Enter amount">
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-900 mb-2">Frequency</label>
                <input type="text" name="trustee_allowances[${newIndex}][frequency]" class="w-full border border-gray-300 rounded px-3 py-2 text-gray-900" placeholder="Enter frequency">
            </div>
        </div>
    `;
    
    container.appendChild(newTrusteeAllowance);
    trusteeAllowanceCount++;
    
    // Add animation
    newTrusteeAllowance.style.opacity = '0';
    newTrusteeAllowance.style.transform = 'translateY(-20px)';
    setTimeout(() => {
        newTrusteeAllowance.style.transition = 'all 0.3s ease';
        newTrusteeAllowance.style.opacity = '1';
        newTrusteeAllowance.style.transform = 'translateY(0)';
    }, 10);
}

function removeTrusteeAllowance(index) {
    const item = document.querySelector(`[data-trustee-index="${index}"]`);
    if (item) {
        // Add removal animation
        item.style.transition = 'all 0.3s ease';
        item.style.opacity = '0';
        item.style.transform = 'translateX(-20px)';
        
        setTimeout(() => {
            item.remove();
            // Update trustee numbers
            updateTrusteeNumbers();
        }, 300);
    }
}

function updateTrusteeNumbers() {
    const items = document.querySelectorAll('.trustee-allowance-item');
    items.forEach((item, index) => {
        const header = item.querySelector('h4');
        if (header) {
            header.textContent = `Trustee ${index + 1}`;
        }
        item.dataset.trusteeIndex = index;
    });
}
</script>
@endsection