@extends('layouts.finance')

@section('title', $category->name)
@section('subtitle', 'Expense entries for '.$category->name)

@section('content')
    @php
        $dateFilter = $dateFilter ?? ['active' => false, 'from' => null, 'to' => null, 'label' => now()->startOfMonth()->format('d M Y').' to '.now()->endOfMonth()->format('d M Y')];
        $expenseRouteParams = ($dateFilter['active'] ?? false) ? ['from' => $dateFilter['from'], 'to' => $dateFilter['to']] : [];
    @endphp
    {{-- Breadcrumb --}}
    <div class="flex items-center gap-3 mb-4">
        <a class="btn" href="{{ route('finance.expenses', $expenseRouteParams) }}">
            <span style="display:inline-flex;align-items:center;gap:6px">
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="15 18 9 12 15 6"/></svg>
                Expenses
            </span>
        </a>
        <div class="text-sm" style="color:var(--muted)">
            Expenses / <span style="color:var(--text);font-weight:600">{{ $category->name }}</span>
        </div>
    </div>

    @include('dashboard.cards._date-filter', ['dateFilter' => $dateFilter, 'filterRoute' => 'finance.expenses.category', 'filterRouteParams' => ['category' => $category]])

    <div class="grid grid-4 mb">
        @include('partials.kpi', ['label' => ($dateFilter['active'] ?? false) ? 'Filtered Total (PKR)' : 'Month Total (PKR)', 'value' => $metrics->money($monthTotal, 'PKR'), 'color' => '#ef4444'])
        @include('partials.kpi', ['label' => 'Total Entries', 'value' => $expenses->total()])
        @include('partials.kpi', ['label' => 'Category', 'value' => $category->name])
        @include('partials.kpi', ['label' => 'Period', 'value' => ($dateFilter['active'] ?? false) ? $dateFilter['label'] : now()->format('M Y')])
    </div>

    {{-- Subcategories section --}}
    <section class="card mb">
        <div class="section-head">
            <h2>Subcategories</h2>
            <span class="pill">{{ $subcategories->count() }} active</span>
        </div>
        <div class="card-pad">
            @if($subcategories->isNotEmpty())
                <div style="margin-bottom:14px">
                    @foreach($subcategories as $sub)
                        <div class="flex items-center justify-between" style="padding:6px 0;border-bottom:1px solid var(--border-2)">
                            <span style="font-weight:600;font-size:13.5px">{{ $sub->name }}</span>
                            <form method="POST"
                                  action="{{ route('finance.expenses.subcategories.destroy', [$category, $sub]) }}"
                                  style="display:inline-block">
                                @csrf
                                @method('DELETE')
                                <button class="btn btn-sm btn-danger"
                                        onclick="return confirm('Delete subcategory &quot;{{ addslashes($sub->name) }}&quot;? This is only possible if no expense entries reference it.')">
                                    Delete
                                </button>
                            </form>
                        </div>
                    @endforeach
                </div>
            @endif

            <details id="addSubcategoryDetails">
                <summary style="cursor:pointer;font-weight:600;font-size:13px;color:var(--primary);user-select:none;list-style:none;display:inline-flex;align-items:center;gap:6px">
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
                    Add Subcategory
                </summary>
                <form method="POST"
                      action="{{ route('finance.expenses.subcategories.store', $category) }}"
                      style="margin-top:12px;display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap">
                    @csrf
                    <div style="flex:1;min-width:200px">
                        <label class="label">Subcategory Name</label>
                        <input class="field" name="name" placeholder="e.g. Office Bill" required maxlength="80"
                               value="{{ old('name') }}">
                    </div>
                    <div>
                        <button class="btn btn-primary">Save</button>
                    </div>
                </form>
            </details>

            @error('subcategory')
                <div class="text-sm" style="color:#ef4444;margin-top:8px">{{ $message }}</div>
            @enderror
        </div>
    </section>

    {{-- Expense payment entry point has moved to Transactions → Debit.
         This section is intentionally a read-only CTA rather than an entry form.
         To record a payment: go to Transactions, pick the bank account, open a
         Debit Transaction, select "Expense" as the type, choose this category
         and the relevant subcategory, enter the amount, and save. --}}
    <section class="card mb" style="background:linear-gradient(135deg,#fafbff,#ffffff);border-color:#c7d2fe">
        <div class="card-pad" style="display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:14px;padding:20px">
            <div>
                <div class="font-bold" style="font-size:15px;margin-bottom:4px">Record a {{ $category->name }} Payment</div>
                <div class="text-sm" style="color:var(--muted);max-width:480px">
                    Expense payments are recorded from <strong>Transactions &rarr; Debit</strong>.
                    Select your bank account, choose <em>Expense</em> as the type, pick this category
                    and a subcategory, enter the amount, and save — the entry will appear in the list below.
                </div>
            </div>
            <a href="{{ route('finance.transactions') }}" class="btn btn-primary" style="white-space:nowrap">
                Go to Transactions &rarr; Debit
            </a>
        </div>
    </section>

    <section class="card">
        <div class="section-head">
            <h2>{{ $category->name }} Entries</h2>
            <span class="pill">{{ $expenses->total() }} total</span>
        </div>
        <table>
            <thead>
                <tr>
                    <th>Date</th>
                    @if($subcategories->isNotEmpty())
                        <th>Subcategory</th>
                    @endif
                    <th>Description</th>
                    <th>Amount</th>
                    <th>Cur.</th>
                    <th>PKR Eq.</th>
                    <th>Bank Account</th>
                    <th>Reference</th>
                    <th></th>
                </tr>
            </thead>
            <tbody>
            @forelse($expenses as $expense)
                <tr class="row-hover">
                    <td style="white-space:nowrap">
                        {{ $expense->expense_date?->format('d M Y') ?? '-' }}
                    </td>
                    @if($subcategories->isNotEmpty())
                        <td>{{ $expense->subcategory?->name ?? '— None —' }}</td>
                    @endif
                    <td>{{ $expense->description }}</td>
                    <td class="right" style="white-space:nowrap">
                        {{ $metrics->money($expense->amount, $expense->currency) }}
                    </td>
                    <td>{{ $expense->currency }}</td>
                    <td style="white-space:nowrap">
                        {{ $metrics->money($metrics->convert($expense->amount, $expense->currency, 'PKR'), 'PKR') }}
                    </td>
                    <td>{{ $expense->bankAccount?->name ?? '— None —' }}</td>
                    <td>{{ $expense->reference }}</td>
                    <td class="actions" style="white-space:nowrap">
                        <a href="{{ route('finance.expenses.edit', [$category, $expense]) }}" class="btn btn-sm">Edit</a>
                        <form method="POST" action="{{ route('finance.expenses.destroy', [$category, $expense]) }}"
                              style="display:inline-block">
                            @csrf
                            <button class="btn btn-sm btn-danger"
                                    onclick="return confirm('Delete this entry?')">Delete</button>
                        </form>
                    </td>
                </tr>
            @empty
                <tr>
                    <td colspan="{{ $subcategories->isNotEmpty() ? 9 : 8 }}" class="muted" style="text-align:center;padding:24px">
                        No entries yet for {{ $category->name }}.
                    </td>
                </tr>
            @endforelse
            </tbody>
        </table>
        <div class="card-pad">{{ $expenses->links() }}</div>
    </section>
@endsection

@push('scripts')
<script>
    // Re-open the add-subcategory form when the page reloads with a validation error on name.
    @if($errors->has('name'))
        document.addEventListener('DOMContentLoaded', function () {
            var details = document.getElementById('addSubcategoryDetails');
            if (details) { details.open = true; }
        });
    @endif
</script>
@endpush