@extends('layouts.app')
@section('page_title','Savings & Goals')
@section('content')
<div class="space-y-5">
    <div class="grid md:grid-cols-2 xl:grid-cols-4 gap-4">
        <div class="fp-card p-5">
            <div class="fp-muted text-[10px] uppercase">Current Savings</div>
            <div class="text-[24px] font-semibold mt-2">৳ {{number_format($totalSavings,2)}}</div>
            <div class="text-[10px] fp-muted mt-1">Available across savings categories</div>
        </div>
        <div class="fp-card p-5">
            <div class="fp-muted text-[10px] uppercase">Total Added</div>
            <div class="text-[24px] font-semibold mt-2">৳ {{number_format($totalAdded,2)}}</div>
            <div class="text-[10px] fp-muted mt-1">All savings deposits</div>
        </div>
        <div class="fp-card p-5">
            <div class="fp-muted text-[10px] uppercase">Total Withdrawn</div>
            <div class="text-[24px] font-semibold mt-2">৳ {{number_format($totalWithdrawn,2)}}</div>
            <div class="text-[10px] fp-muted mt-1">Money taken back from savings</div>
        </div>
        <div class="fp-card p-5">
            <div class="fp-muted text-[10px] uppercase">Goals</div>
            <div class="text-[24px] font-semibold mt-2">{{$goals->count()}}</div>
            <div class="text-[10px] fp-muted mt-1">Track your savings targets</div>
        </div>
    </div>

    {{-- Goal setup and goal tracking use equal-width panels. --}}
    <div class="grid xl:grid-cols-5 gap-4 items-stretch">
        <form method="post" action="{{route('goals.store')}}" class="fp-card p-5 h-full xl:col-span-2">
            @csrf
            <div class="flex items-start justify-between gap-3">
                <div>
                    <h2 class="font-semibold text-[14px]">Set Savings Goal</h2>
                    <p class="fp-muted text-[10px] mt-1">Choose a savings category and set the amount you want to reach.</p>
                </div>
            </div>
            <div class="space-y-3 mt-4">
                <select name="category_id" id="goalCategory" class="fp-input" required>
                    <option value="">Choose savings category</option>
                    @foreach($savingsCategories as $category)
                        <option value="{{$category->id}}" data-category-name="{{e($category->name)}}">{{$category->name}}</option>
                    @endforeach
                </select>
                <input name="name" id="goalName" class="fp-input" placeholder="Emergency Fund / Car / Home" required>
                <input name="target_amount" type="number" step="0.01" min="0.01" class="fp-input" placeholder="Target amount" required>
                <input name="target_date" type="date" class="fp-input">
                <textarea name="notes" class="fp-input" rows="3" placeholder="Notes"></textarea>
                <button class="fp-btn fp-primary w-full">Create Goal</button>
            </div>
        </form>

        <div class="fp-card p-5 h-full xl:col-span-3">
            <div class="flex items-center justify-between gap-3 mb-4">
                <div>
                    <h2 class="font-semibold text-[14px]">Goals</h2>
                    <p class="fp-muted text-[10px] mt-1">Progress is calculated from the live savings balance of each linked category.</p>
                </div>
                <span class="fp-soft px-2 py-1 rounded text-[9px]">{{$goals->count()}} goals</span>
            </div>

            <div class="space-y-3">
                @forelse($goals as $g)
                    <div class="border border-slate-200 dark:border-slate-700 rounded-xl p-4">
                        <div class="flex items-start gap-3">
                            <div class="min-w-0 flex-1">
                                <div class="flex items-center gap-2">
                                    <div class="font-semibold text-[13px]">{{$g->name}}</div>
                                </div>
                                <div class="fp-muted text-[10px] mt-1">
                                    Linked: {{$g->category?->name ?? '—'}}
                                    · {{$g->target_date?->format('d M Y') ?? 'No deadline'}}
                                </div>
                            </div>

                            <div class="flex items-center gap-2 shrink-0">
                                <span class="fp-soft px-2.5 py-1.5 rounded-lg text-[11px] font-semibold" title="Savings progress">
                                    {{$g->progress_percent}}%
                                </span>
                                @if($g->progress_percent >= 100)
                                    <span class="w-8 h-8 rounded-full bg-emerald-500 border-2 border-emerald-400 flex items-center justify-center text-white shadow-sm" title="Goal completed automatically">
                                        <i data-lucide="check" class="w-4 h-4"></i>
                                    </span>
                                @endif
                            </div>
                        </div>

                        <div class="progress mt-4"><span style="width:{{$g->progress_percent}}%;background:#6246e8"></span></div>
                        <div class="flex justify-between mt-2 text-[11px]">
                            <span>৳ {{number_format((float)$g->current_amount,2)}}</span>
                            <span>৳ {{number_format((float)$g->target_amount,2)}}</span>
                        </div>

                        @if($g->notes)<div class="text-[10px] fp-muted mt-3">{{$g->notes}}</div>@endif

                        <form method="post" action="{{route('goals.destroy',$g)}}" class="mt-3" onsubmit="return confirm('Delete this goal?')">
                            @csrf @method('DELETE')
                            <button class="text-[10px] text-red-500 hover:text-red-600">Delete</button>
                        </form>
                    </div>
                @empty
                    <div class="fp-muted text-sm py-12 text-center">No goals yet.</div>
                @endforelse
            </div>
        </div>
    </div>

    {{-- Savings withdrawal and category overview use equal-width panels. --}}
    <div class="grid xl:grid-cols-5 gap-4 items-stretch">
        <form method="post" action="{{route('goals.withdraw')}}" class="fp-card p-5 h-full xl:col-span-2">
            @csrf
            <h2 class="font-semibold text-[14px]">Withdraw Savings</h2>
            <p class="fp-muted text-[10px] mt-1">Choose the savings category, amount, receiving account and purpose.</p>
            <div class="space-y-3 mt-4">
                <select name="category_id" class="fp-input" required>
                    <option value="">From savings category</option>
                    @foreach($savingsCategories as $category)
                        @php($available=$savingsByCategory[$category->id]['current']??0)
                        <option value="{{$category->id}}">{{$category->name}} — ৳ {{number_format($available,2)}}</option>
                    @endforeach
                </select>
                <input name="amount" type="number" step="0.01" min="0.01" class="fp-input" placeholder="Withdrawal amount" required>
                <select name="account_id" class="fp-input" required>
                    <option value="">Receive into account</option>
                    @foreach($accounts as $account)
                        <option value="{{$account->id}}">{{$account->name}} — ৳ {{number_format($account->current_balance,2)}}</option>
                    @endforeach
                </select>
                <input name="purpose" class="fp-input" placeholder="Purpose (e.g. Car repair)" required>
                <input name="transaction_date" type="date" value="{{today()->toDateString()}}" class="fp-input" required>
                <textarea name="notes" class="fp-input" rows="3" placeholder="Optional notes"></textarea>
                <button class="fp-btn fp-primary w-full">Withdraw Savings</button>
            </div>
        </form>

        <div class="fp-card p-5 h-full xl:col-span-3">
            <div class="flex items-center justify-between gap-3 mb-4">
                <div>
                    <h2 class="font-semibold text-[14px]">Savings by Category</h2>
                    <p class="fp-muted text-[10px] mt-1">Each balance is deposits minus withdrawals.</p>
                </div>
                <span class="fp-soft px-2 py-1 rounded text-[9px]">{{$savingsCategories->count()}} categories</span>
            </div>
            <div class="overflow-x-auto">
                <table class="fp-table fp-mobile-nowrap-table w-full">
                    <thead><tr><th>Category</th><th>Added</th><th>Withdrawn</th><th>Current Savings</th><th>History</th></tr></thead>
                    <tbody>
                    @forelse($savingsCategories as $category)
                        @php($row=$savingsByCategory[$category->id]??['added'=>0,'withdrawn'=>0,'current'=>0])
                        @php($historyId='savings-history-'.$category->id)
                        @php($categoryHistory=$savingsWithdrawals->where('category_id',$category->id))
                        <tr>
                            <td><div class="font-semibold">{{$category->name}}</div></td>
                            <td>৳ {{number_format($row['added'],2)}}</td>
                            <td>৳ {{number_format($row['withdrawn'],2)}}</td>
                            <td class="money font-semibold">৳ {{number_format($row['current'],2)}}</td>
                            <td>
                                <button type="button"
                                        class="w-8 h-8 inline-flex items-center justify-center rounded-lg fp-soft hover:bg-violet-500/10 hover:text-violet-400 transition"
                                        data-history-toggle="{{$historyId}}"
                                        aria-expanded="false"
                                        aria-label="Show {{$category->name}} history"
                                        title="Show history">
                                    <i data-lucide="eye" class="w-4 h-4"></i>
                                </button>
                            </td>
                        </tr>
                        <tr id="{{$historyId}}" class="hidden">
                            <td colspan="5" class="!p-0">
                                <div class="px-3 py-3 bg-slate-950/20 border-t border-slate-800/70">
                                    @if($categoryHistory->count())
                                        <div class="text-[9px] uppercase fp-muted mb-2">{{$category->name}} withdrawal history</div>
                                        <div class="space-y-2">
                                            @foreach($categoryHistory as $history)
                                                <div class="flex items-center justify-between gap-3 text-[10px] border border-slate-800/70 rounded-lg px-3 py-2">
                                                    <div class="min-w-0">
                                                        <div class="font-semibold truncate">{{$history->description ?? 'Savings withdrawal'}}</div>
                                                        <div class="fp-muted mt-0.5">{{$history->transaction_date->format('d M Y')}} · {{$history->account?->name ?? '—'}}</div>
                                                    </div>
                                                    <div class="font-semibold shrink-0">৳ {{number_format($history->amount,2)}}</div>
                                                </div>
                                            @endforeach
                                        </div>
                                    @else
                                        <div class="fp-muted text-[10px] py-2">No withdrawals from this category yet.</div>
                                    @endif
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr><td colspan="5" class="text-center fp-muted py-10">No savings categories yet. Add one from Categories.</td></tr>
                    @endforelse
                    @if($uncategorizedSavings > 0)
                        <tr>
                            <td><div class="font-semibold">Uncategorized Savings</div><div class="text-[9px] fp-muted">Older savings without a category</div></td>
                            <td>—</td><td>—</td><td class="money font-semibold">৳ {{number_format($uncategorizedSavings,2)}}</td><td>—</td>
                        </tr>
                    @endif
                    </tbody>
                </table>
            </div>
        </div>
    </div>

</div>
@endsection
@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function () {
    const category = document.getElementById('goalCategory');
    const name = document.getElementById('goalName');
    if (category && name) {
        category.addEventListener('change', function () {
            const selected = category.options[category.selectedIndex];
            if (category.value && selected.dataset.categoryName && !name.value.trim()) {
                name.value = selected.dataset.categoryName + ' Goal';
            }
        });
    }

    document.querySelectorAll('[data-history-toggle]').forEach(function (button) {
        button.addEventListener('click', function () {
            const target = document.getElementById(button.dataset.historyToggle);
            if (!target) return;
            const isHidden = target.classList.toggle('hidden');
            button.setAttribute('aria-expanded', String(!isHidden));
            const icon = button.querySelector('[data-lucide]');
            if (icon) {
                icon.setAttribute('data-lucide', isHidden ? 'eye' : 'eye-off');
                if (window.lucide) window.lucide.createIcons();
            }
            button.setAttribute('aria-label', isHidden ? 'Show history' : 'Hide history');
            button.setAttribute('title', isHidden ? 'Show history' : 'Hide history');
        });
    });
});
</script>
@endpush