@extends('layouts.finance')

@section('title', 'Expenses')
@section('subtitle', 'Monthly running costs and breakdown')

@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
    @include('dashboard.cards._date-filter', ['dateFilter' => $dateFilter, 'filterRoute' => 'finance.expenses'])

    <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' => 'Active Categories', 'value' => $categories->count()])
        @include('partials.kpi', ['label' => 'Period', 'value' => ($dateFilter['active'] ?? false) ? $dateFilter['label'] : now()->format('M Y')])
        @include('partials.kpi', ['label' => 'Click a tile to add entries', 'value' => ''])
    </div>

    @if($errors->any())
        <div class="card mb" style="border-left:3px solid #ef4444">
            <div class="card-pad" style="color:#ef4444;font-size:13px">
                @foreach($errors->all() as $error)
                    <div>{{ $error }}</div>
                @endforeach
            </div>
        </div>
    @endif

    @if(session('status'))
        <div class="card mb" style="border-left:3px solid #10b981">
            <div class="card-pad" style="color:#10b981;font-size:13px">{{ session('status') }}</div>
        </div>
    @endif

    <details class="card mb" @if($errors->any()) open @endif>
        <summary class="section-head" style="display:flex;justify-content:space-between;align-items:center;cursor:pointer;list-style:none">
            <h2 style="margin:0">Categories</h2>
            <span class="btn btn-primary">+ Add Category</span>
        </summary>
        <div class="card-pad">
            <form method="POST" action="{{ route('finance.expenses.categories.store') }}" class="row-form">
                @csrf
                <div style="grid-column:span 2">
                    <label class="label">Category Name</label>
                    <input class="field" name="name" value="{{ old('name') }}" placeholder="e.g. Internet Bill, Office Rent" required maxlength="80">
                </div>
                <div>
                    <label class="label">Type</label>
                    <select class="field" name="type" required>
                        <option value="standard" @selected(old('type') === 'standard')>Standard (date / amount / description)</option>
                        <option value="salary" @selected(old('type') === 'salary')>Salary (employee + payroll)</option>
                    </select>
                </div>
                <div>
                    <label class="label">Icon</label>
                    <select class="field" name="icon">
                        <option value="receipt" @selected(old('icon') === 'receipt')>Receipt</option>
                        <option value="zap" @selected(old('icon') === 'zap')>Bolt (electricity)</option>
                        <option value="flame" @selected(old('icon') === 'flame')>Flame (gas)</option>
                        <option value="home" @selected(old('icon') === 'home')>Home (rent)</option>
                        <option value="users" @selected(old('icon') === 'users')>People (payroll)</option>
                    </select>
                </div>
                <div><button class="btn btn-primary">Save Category</button></div>
            </form>
        </div>
    </details>

    @php
        $categoryIcons = [
            'zap'     => '<svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></svg>',
            'flame'   => '<svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M8.5 14.5A2.5 2.5 0 0 0 11 12c0-1.38-.5-2-1-3-1.072-2.143-.224-4.054 2-6 .5 2.5 2 4.9 4 6.5 2 1.6 3 3.5 3 5.5a7 7 0 1 1-14 0c0-1.153.433-2.294 1-3a2.5 2.5 0 0 0 2.5 2.5z"/></svg>',
            'home'    => '<svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>',
            'users'   => '<svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>',
            'receipt' => '<svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="6 9 6 2 18 2 18 9"/><path d="M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2"/><rect x="6" y="14" width="12" height="8"/></svg>',
        ];
    @endphp

    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
        @forelse($categories as $category)
            @php
                $categoryTotalPkr = (float) ($categoryTotalsPkr[$category->id] ?? 0);
            @endphp
            <div style="position:relative">
                <a class="tx-tile" href="{{ route('finance.expenses.category', array_merge(['category' => $category], $expenseRouteParams)) }}">
                    <div class="kpi-icon {{ $category->icon_bg_style }} tile-icon">
                        {!! $categoryIcons[$category->icon] ?? $categoryIcons['receipt'] !!}
                    </div>
                    <div class="tile-title">{{ $category->name }}</div>
                    <div style="position:relative;z-index:1;margin-top:8px;font-size:15px;font-weight:700;color:#ef4444">
                        {{ $metrics->money($categoryTotalPkr, 'PKR') }}
                    </div>
                    <div class="flex items-center justify-between" style="position:relative;z-index:1;margin-top:8px">
                        <span class="pill {{ $category->pill_style }}" style="font-size:10px">
                            {{ $category->expense_count }} {{ $category->expense_count === 1 ? 'entry' : 'entries' }}
                        </span>
                        @if($category->isSalary())
                            <span class="pill pill-green" style="font-size:10px">Payroll</span>
                        @endif
                    </div>
                    <div class="tile-arrow">
                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="9 18 15 12 9 6"/></svg>
                    </div>
                </a>
                @if($category->expense_count === 0)
                    <form method="POST" action="{{ route('finance.expenses.categories.destroy', $category) }}"
                          onsubmit="return confirm('Delete category &quot;{{ $category->name }}&quot;?');"
                          style="position:absolute;top:8px;right:8px;z-index:3">
                        @csrf @method('DELETE')
                        <button type="submit" title="Delete category"
                                style="background:rgba(239,68,68,0.1);color:#ef4444;border:none;border-radius:6px;width:24px;height:24px;cursor:pointer;font-size:14px;line-height:1;display:flex;align-items:center;justify-content:center">
                            ×
                        </button>
                    </form>
                @endif
            </div>
        @empty
            <div class="card p-5 text-sm" style="color:var(--muted);text-align:center;grid-column:span 4">
                No expense categories yet. Click <strong>+ Add Category</strong> above to create your first one.
            </div>
        @endforelse
    </div>

    <div class="mt-6 text-center text-xs" style="color:var(--muted)">
        Click any category to view entries and add new expenses
    </div>
@endsection