@extends('backEnd.layouts.master')
@section('title', 'Expenses')

@push('styles')
@include('backEnd.reports.partials.report-styles')
<style>
.exp-sidebar-card { border-radius: 10px; }
.exp-cat-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #f9fafb;
}
.exp-cat-row.is-inactive { opacity: .55; }
.exp-cat-name { flex: 1; font-size: 13px; font-weight: 600; min-width: 120px; }
.exp-cat-actions { display: flex; gap: 4px; flex-shrink: 0; }
.exp-cat-breakdown { display: flex; flex-wrap: wrap; gap: 8px; }
.exp-cat-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 999px;
    background: #f3f4f6;
    border: 1px solid #e5e7eb;
    font-size: 12px;
    text-decoration: none;
    color: #374151;
}
.exp-cat-chip:hover { background: #eff6ff; border-color: #bfdbfe; color: #1d4ed8; }
.exp-cat-chip.is-active { background: #dbeafe; border-color: #2563eb; color: #1d4ed8; font-weight: 700; }
@media (max-width: 767.98px) {
    .exp-cat-row { flex-wrap: wrap; }
    .exp-cat-actions { width: 100%; justify-content: flex-end; }
}
</style>
@endpush

@section('content')
<div class="container-fluid py-3">
    <div class="d-flex justify-content-between align-items-center mb-3 flex-wrap gap-2">
        <div>
            <h4 class="rp-page-title mb-0">Expenses</h4>
            <small class="text-muted">Track expenses by category — used in Sales Reports</small>
        </div>
        <a href="{{ route('admin.reports.sales') }}" class="btn btn-outline-success btn-sm">
            <i class="fas fa-chart-line me-1"></i> Sales Reports
        </a>
    </div>

    <div class="row g-3 mb-3">
        <div class="col-lg-4">
            <div class="rp-filter-card exp-sidebar-card mb-3">
                <div class="d-flex justify-content-between align-items-center mb-2">
                    <h6 class="fw-bold mb-0"><i class="fas fa-tags me-1"></i> Categories</h6>
                    <span class="badge bg-light text-dark border">{{ $categories->count() }}</span>
                </div>

                <form method="POST" action="{{ route('admin.expenses.categories.store') }}" class="mb-3">
                    @csrf
                    <input type="hidden" name="filter_from" value="{{ $from }}">
                    <input type="hidden" name="filter_to" value="{{ $to }}">
                    <input type="hidden" name="filter_category_id" value="{{ $categoryId }}">
                    <div class="input-group input-group-sm">
                        <input type="text" name="name" class="form-control" placeholder="New category name" value="{{ old('name') }}" required maxlength="100">
                        <button class="btn btn-primary" type="submit"><i class="fas fa-plus"></i></button>
                    </div>
                    @error('name')<small class="text-danger">{{ $message }}</small>@enderror
                </form>

                <div class="d-flex flex-column gap-2">
                    @forelse($categories as $cat)
                    <div class="exp-cat-row {{ $cat->status ? '' : 'is-inactive' }}">
                        <form method="POST" action="{{ route('admin.expenses.categories.update', $cat) }}" class="d-flex align-items-center gap-2 flex-grow-1 flex-wrap">
                            @csrf @method('PUT')
                            <input type="hidden" name="filter_from" value="{{ $from }}">
                            <input type="hidden" name="filter_to" value="{{ $to }}">
                            <input type="hidden" name="filter_category_id" value="{{ $categoryId }}">
                            <input type="text" name="name" class="form-control form-control-sm exp-cat-name" value="{{ $cat->name }}" required maxlength="100">
                            <input type="hidden" name="status" value="0">
                            <label class="small mb-0 text-nowrap">
                                <input type="checkbox" name="status" value="1" class="form-check-input me-1" {{ $cat->status ? 'checked' : '' }}
                                       onchange="this.form.submit()"> Active
                            </label>
                            <button type="submit" class="btn btn-sm btn-outline-secondary py-0 px-2" title="Save"><i class="fas fa-save"></i></button>
                        </form>
                        <div class="exp-cat-actions">
                            <form method="POST" action="{{ route('admin.expenses.categories.destroy', $cat) }}"
                                  onsubmit="return confirm('Delete category &quot;{{ $cat->name }}&quot;? Expenses will stay uncategorized.')">
                                @csrf @method('DELETE')
                                <input type="hidden" name="filter_from" value="{{ $from }}">
                                <input type="hidden" name="filter_to" value="{{ $to }}">
                                <input type="hidden" name="filter_category_id" value="{{ $categoryId }}">
                                <button class="btn btn-sm btn-outline-danger py-0 px-2"><i class="fas fa-trash"></i></button>
                            </form>
                        </div>
                    </div>
                    @empty
                    <div class="text-muted small text-center py-2">No categories yet. Add one above.</div>
                    @endforelse
                </div>
            </div>

            <div class="rp-filter-card exp-sidebar-card">
                <h6 class="fw-bold mb-3"><i class="fas fa-plus-circle me-1"></i> Add Expense</h6>
                <form method="POST" action="{{ route('admin.expenses.store') }}">
                    @csrf
                    <input type="hidden" name="filter_from" value="{{ $from }}">
                    <input type="hidden" name="filter_to" value="{{ $to }}">
                    <input type="hidden" name="filter_category_id" value="{{ $categoryId }}">
                    <div class="mb-2">
                        <label class="form-label small fw-semibold">Category</label>
                        <select name="expense_category_id" class="form-select form-select-sm">
                            <option value="">Uncategorized</option>
                            @foreach($categories->where('status', true) as $cat)
                                <option value="{{ $cat->id }}" {{ (string) old('expense_category_id') === (string) $cat->id ? 'selected' : '' }}>
                                    {{ $cat->name }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                    <div class="mb-2">
                        <label class="form-label small fw-semibold">Title</label>
                        <input type="text" name="title" class="form-control form-control-sm" value="{{ old('title') }}" required>
                    </div>
                    <div class="mb-2">
                        <label class="form-label small fw-semibold">Amount (৳)</label>
                        <input type="number" name="amount" class="form-control form-control-sm" step="0.01" min="0" value="{{ old('amount') }}" required>
                    </div>
                    <div class="mb-2">
                        <label class="form-label small fw-semibold">Date</label>
                        <input type="date" name="expense_date" class="form-control form-control-sm" value="{{ old('expense_date', now()->format('Y-m-d')) }}" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label small fw-semibold">Note</label>
                        <textarea name="note" class="form-control form-control-sm" rows="2">{{ old('note') }}</textarea>
                    </div>
                    <button class="btn btn-success btn-sm w-100"><i class="fas fa-plus me-1"></i> Save Expense</button>
                </form>
            </div>
        </div>

        <div class="col-lg-8">
            <div class="rp-stat-card rp-stat-red mb-3">
                <div class="label">Total Expenses (Filtered)</div>
                <div class="value">{{ number_format($totalAmount, 2) }} ৳</div>
            </div>

            @if($categoryBreakdown->isNotEmpty())
            <div class="rp-filter-card mb-3">
                <div class="small fw-semibold text-muted mb-2">By Category</div>
                <div class="exp-cat-breakdown">
                    <a href="{{ route('admin.expenses.index', ['from_date' => $from, 'to_date' => $to]) }}"
                       class="exp-cat-chip {{ !$categoryId ? 'is-active' : '' }}">All</a>
                    @foreach($categories as $cat)
                        @php $row = $categoryBreakdown->get($cat->id); @endphp
                        @if($row)
                        <a href="{{ route('admin.expenses.index', ['from_date' => $from, 'to_date' => $to, 'category_id' => $cat->id]) }}"
                           class="exp-cat-chip {{ $categoryId === $cat->id ? 'is-active' : '' }}">
                            {{ $cat->name }}
                            <span class="text-muted">{{ $row->total_count }}</span>
                            <strong>৳{{ number_format($row->total_amount, 0) }}</strong>
                        </a>
                        @endif
                    @endforeach
                    @php $uncat = $categoryBreakdown->get(null); @endphp
                    @if($uncat)
                    <a href="{{ route('admin.expenses.index', ['from_date' => $from, 'to_date' => $to, 'category_id' => '0']) }}"
                       class="exp-cat-chip {{ $categoryId === 0 ? 'is-active' : '' }}">
                        Uncategorized
                        <span class="text-muted">{{ $uncat->total_count }}</span>
                        <strong>৳{{ number_format($uncat->total_amount, 0) }}</strong>
                    </a>
                    @endif
                </div>
            </div>
            @endif

            <div class="rp-filter-card mb-3">
                <form method="GET" class="row g-2 align-items-end">
                    <div class="col-md-3">
                        <label class="form-label small fw-semibold mb-1">From Date</label>
                        <input type="date" name="from_date" class="form-control form-control-sm" value="{{ $from }}">
                    </div>
                    <div class="col-md-3">
                        <label class="form-label small fw-semibold mb-1">To Date</label>
                        <input type="date" name="to_date" class="form-control form-control-sm" value="{{ $to }}">
                    </div>
                    <div class="col-md-3">
                        <label class="form-label small fw-semibold mb-1">Category</label>
                        <select name="category_id" class="form-select form-select-sm">
                            <option value="">All Categories</option>
                            <option value="0" {{ $categoryId === 0 ? 'selected' : '' }}>Uncategorized</option>
                            @foreach($categories as $cat)
                                <option value="{{ $cat->id }}" {{ $categoryId === $cat->id ? 'selected' : '' }}>{{ $cat->name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-3 col-auto">
                        <button class="btn btn-primary btn-sm px-4">Filter</button>
                        <a href="{{ route('admin.expenses.index') }}" class="btn btn-secondary btn-sm px-3 ms-1">Reset</a>
                    </div>
                </form>
            </div>

            <div class="rp-panel">
                <div class="table-responsive">
                    <table class="rp-table">
                        <thead>
                            <tr>
                                <th>Date</th>
                                <th>Category</th>
                                <th>Title</th>
                                <th>Note</th>
                                <th class="text-end">Amount</th>
                                <th class="text-end">Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($expenses as $expense)
                            <tr>
                                <td>{{ $expense->expense_date->format('d M Y') }}</td>
                                <td>
                                    @if($expense->category)
                                        <span class="badge bg-light text-dark border">{{ $expense->category->name }}</span>
                                    @else
                                        <span class="text-muted small">—</span>
                                    @endif
                                </td>
                                <td class="fw-semibold">{{ $expense->title }}</td>
                                <td class="text-muted small">{{ $expense->note ?: '—' }}</td>
                                <td class="text-end rp-text-expense">{{ number_format($expense->amount, 2) }} ৳</td>
                                <td class="text-end">
                                    <form method="POST" action="{{ route('admin.expenses.destroy', $expense->id) }}" class="d-inline" onsubmit="return confirm('Delete this expense?')">
                                        @csrf @method('DELETE')
                                        <button class="btn btn-sm btn-outline-danger py-0 px-2"><i class="fas fa-trash"></i></button>
                                    </form>
                                </td>
                            </tr>
                            @empty
                            <tr>
                                <td colspan="6" class="text-center py-4 text-muted">No expenses in this period.</td>
                            </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
                @if($expenses->hasPages())
                <div class="p-3">{{ $expenses->links() }}</div>
                @endif
            </div>
        </div>
    </div>
</div>
@endsection