@extends('layouts.app')

@section('content')
<style>
    .page-wrap { max-width: 1600px; }
    .topbar {
        align-items: center;
        display: flex;
        gap: 10px;
        justify-content: space-between;
        margin-bottom: 14px;
    }
    .page-title {
        color: #1E4FA8;
        font-size: 24px;
        font-weight: 900;
    }
    .top-actions {
        display: flex;
        gap: 8px;
    }
    .btn {
        background: #1E4FA8;
        border: 1px solid #1E4FA8;
        border-radius: 8px;
        color: #fff;
        cursor: pointer;
        display: inline-block;
        font-weight: 800;
        padding: 10px 14px;
        text-decoration: none;
        white-space: nowrap;
    }
    .btn-light {
        background: #fff3ee;
        border-color: #ffd7c6;
        color: #E84C0D;
    }
    .card {
        background: #fff;
        border: 1px solid #e4ebf3;
        border-radius: 8px;
        box-shadow: 0 4px 14px rgba(0,0,0,0.05);
        margin-bottom: 14px;
        padding: 14px;
    }
    .summary-grid {
        display: grid;
        gap: 10px;
        grid-template-columns: repeat(4, minmax(160px, 1fr));
    }
    .summary-card {
        background: #f0fdf4;
        border: 1px solid #bbf7d0;
        border-radius: 8px;
        padding: 12px;
    }
    .summary-label {
        color: #166534;
        font-size: 12px;
        font-weight: 900;
        text-transform: uppercase;
    }
    .summary-value {
        color: #14532d;
        font-size: 21px;
        font-weight: 900;
        margin-top: 5px;
    }
    .success {
        background: #f0fdf4;
        border: 1px solid #bbf7d0;
        border-radius: 8px;
        color: #166534;
        font-weight: 800;
        margin-bottom: 12px;
        padding: 10px;
    }
    .table-wrap { overflow-x: auto; }
    table {
        border-collapse: collapse;
        min-width: 1100px;
        width: 100%;
    }
    th,
    td {
        border-bottom: 1px solid #edf1f6;
        font-size: 13px;
        padding: 10px 8px;
        text-align: left;
        vertical-align: top;
    }
    th {
        background: #f5f7fb;
        color: #263445;
        font-weight: 900;
    }
    tfoot td {
        background: #f8fafc;
        font-weight: 900;
    }
    .num {
        text-align: right;
        white-space: nowrap;
    }
    .filter-card {
        display: none;
    }
    .filter-card.is-visible {
        display: block;
    }
    .filter-row {
        display: grid;
        gap: 10px;
        grid-template-columns: repeat(4, minmax(150px, 1fr));
        align-items: end;
    }
    .form-group {
        display: flex;
        flex-direction: column;
        gap: 6px;
    }
    .form-group label {
        color: #334155;
        font-size: 13px;
        font-weight: 800;
    }
    .form-control {
        border: 1px solid #d8e1ec;
        border-radius: 8px;
        padding: 10px;
        width: 100%;
    }
    .form-actions {
        display: flex;
        gap: 8px;
        justify-content: flex-end;
        margin-top: 12px;
    }
    .expense-form {
        display: none;
    }
    .expense-form.is-visible {
        display: block;
    }
    .expense-grid {
        display: grid;
        gap: 10px;
        grid-template-columns: repeat(3, minmax(180px, 1fr));
    }
    .muted { color: #7b8794; }
    .danger-btn {
        background: #fff;
        border: 0;
        color: #b42318;
        cursor: pointer;
        font-weight: 800;
        padding: 0;
    }
    @media(max-width: 900px) {
        .summary-grid,
        .filter-row,
        .expense-grid {
            grid-template-columns: 1fr;
        }
        .topbar {
            align-items: stretch;
            flex-direction: column;
        }
    }
</style>

<div class="page-wrap">
    <div class="topbar">
        <div class="page-title">Expenses</div>
        <div class="top-actions">
            <button class="btn btn-light" type="button" id="toggleExpenseFilters">Search Expenses</button>
            <a class="btn btn-light" href="{{ url('/expense-categories') }}">Expense Categories</a>
            <button class="btn" type="button" id="toggleExpenseForm" data-permission="expenses.create">Add Expense</button>
        </div>
    </div>

    @if(session('success'))
        <div class="success">{{ session('success') }}</div>
    @endif
    @if($errors->any())
        <div class="success" style="background:#fff7ed;border-color:#fed7aa;color:#9a3412;">
            {{ $errors->first() }}
        </div>
    @endif

    <div class="card summary-grid">
        <div class="summary-card">
            <div class="summary-label">Total Expenses</div>
            <div class="summary-value">{{ \App\Models\SystemSetting::formatMoney($totals->total_amount ?? 0) }}</div>
        </div>
        <div class="summary-card">
            <div class="summary-label">Entries</div>
            <div class="summary-value">{{ number_format($totals->entries ?? 0) }}</div>
        </div>
        <div class="summary-card">
            <div class="summary-label">Payment Methods</div>
            <div class="summary-value">{{ number_format($paymentSummary->count()) }}</div>
        </div>
        <div class="summary-card">
            <div class="summary-label">Categories</div>
            <div class="summary-value">{{ number_format($categorySummary->count()) }}</div>
        </div>
    </div>

    <div class="card expense-form {{ $errors->any() ? 'is-visible' : '' }}" id="expenseFormCard">
        <form method="POST" action="{{ url('/expenses') }}">
            @csrf
            <div class="expense-grid">
                <div class="form-group">
                    <label>Date</label>
                    <input type="datetime-local" name="expense_date" class="form-control" value="{{ old('expense_date', now()->format('Y-m-d\TH:i')) }}" required>
                </div>
                <div class="form-group">
                    <label>Branch</label>
                    <select name="branch_id" class="form-control">
                        <option value="">User branch</option>
                        @foreach($branches as $branch)
                            <option value="{{ $branch->id }}" {{ old('branch_id') == $branch->id ? 'selected' : '' }}>{{ $branch->name }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="form-group">
                    <label>Payment Method</label>
                    <select name="payment_method_id" class="form-control" required>
                        <option value="">Select payment method</option>
                        @foreach($paymentMethods as $method)
                            <option value="{{ $method->id }}" {{ old('payment_method_id') == $method->id ? 'selected' : '' }}>{{ $method->name }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="form-group">
                    <label>Category</label>
                    <select name="expense_category_id" class="form-control" required>
                        <option value="">Select expense category</option>
                        @foreach($expenseCategories as $category)
                            <option value="{{ $category->id }}" {{ old('expense_category_id') == $category->id ? 'selected' : '' }}>{{ $category->name }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="form-group">
                    <label>Department</label>
                    <select name="department_id" class="form-control" required>
                        <option value="">Select department</option>
                        @foreach($departments as $department)
                            <option value="{{ $department->id }}" {{ old('department_id') == $department->id ? 'selected' : '' }}>{{ $department->name }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="form-group">
                    <label>Paid To</label>
                    <input type="text" name="paid_to" class="form-control" value="{{ old('paid_to') }}" placeholder="Person or company">
                </div>
                <div class="form-group">
                    <label>Amount</label>
                    <input type="number" name="amount" class="form-control" value="{{ old('amount') }}" min="0.01" step="0.01" required>
                </div>
                <div class="form-group">
                    <label>Reference No</label>
                    <input type="text" name="reference_no" class="form-control" value="{{ old('reference_no') }}" placeholder="Optional">
                </div>
                <div class="form-group" style="grid-column: span 2;">
                    <label>Description</label>
                    <input type="text" name="description" class="form-control" value="{{ old('description') }}" placeholder="Optional">
                </div>
            </div>
            <div class="form-actions">
                <button class="btn" type="submit">Save Expense</button>
            </div>
        </form>
    </div>

    <div class="card filter-card {{ request()->hasAny(['search','branch_id','payment_method_id','department_id','expense_category_id','user_id']) ? 'is-visible' : '' }}" id="expenseFilters">
        <form method="GET" action="{{ url('/expenses') }}" class="filter-row" id="expenseFilterForm">
            <div class="form-group">
                <label>Search</label>
                <input type="text" name="search" class="form-control" value="{{ $filters['search'] ?? '' }}" placeholder="No, category, paid to, reference">
            </div>
            <div class="form-group">
                <label>Date Range</label>
                <select name="date_range" class="form-control">
                    <option value="today" {{ ($filters['date_range'] ?? 'today') === 'today' ? 'selected' : '' }}>Today</option>
                    <option value="yesterday" {{ ($filters['date_range'] ?? '') === 'yesterday' ? 'selected' : '' }}>Yesterday</option>
                    <option value="this_month" {{ ($filters['date_range'] ?? '') === 'this_month' ? 'selected' : '' }}>This Month</option>
                    <option value="last_month" {{ ($filters['date_range'] ?? '') === 'last_month' ? 'selected' : '' }}>Last Month</option>
                    <option value="custom" {{ ($filters['date_range'] ?? '') === 'custom' ? 'selected' : '' }}>Custom Date</option>
                    <option value="all" {{ ($filters['date_range'] ?? '') === 'all' ? 'selected' : '' }}>All</option>
                </select>
            </div>
            <div class="form-group custom-date-field">
                <label>From</label>
                <input type="datetime-local" name="custom_from" class="form-control" value="{{ $filters['custom_from'] ?? '' }}">
            </div>
            <div class="form-group custom-date-field">
                <label>To</label>
                <input type="datetime-local" name="custom_to" class="form-control" value="{{ $filters['custom_to'] ?? '' }}">
            </div>
            <div class="form-group">
                <label>Branch</label>
                <select name="branch_id" class="form-control">
                    <option value="">All branches</option>
                    @foreach($branches as $branch)
                        <option value="{{ $branch->id }}" {{ ($filters['branch_id'] ?? '') == $branch->id ? 'selected' : '' }}>{{ $branch->name }}</option>
                    @endforeach
                </select>
            </div>
            <div class="form-group">
                <label>Payment Method</label>
                <select name="payment_method_id" class="form-control">
                    <option value="">All payment methods</option>
                    @foreach($paymentMethods as $method)
                        <option value="{{ $method->id }}" {{ ($filters['payment_method_id'] ?? '') == $method->id ? 'selected' : '' }}>{{ $method->name }}</option>
                    @endforeach
                </select>
            </div>
            <div class="form-group">
                <label>Category</label>
                <select name="expense_category_id" class="form-control">
                    <option value="">All categories</option>
                    @foreach($expenseCategories as $category)
                        <option value="{{ $category->id }}" {{ ($filters['expense_category_id'] ?? '') == $category->id ? 'selected' : '' }}>{{ $category->name }}</option>
                    @endforeach
                </select>
            </div>
            <div class="form-group">
                <label>Department</label>
                <select name="department_id" class="form-control">
                    <option value="">All departments</option>
                    @foreach($departments as $department)
                        <option value="{{ $department->id }}" {{ ($filters['department_id'] ?? '') == $department->id ? 'selected' : '' }}>{{ $department->name }}</option>
                    @endforeach
                </select>
            </div>
            <div class="form-group">
                <label>Added By</label>
                <select name="user_id" class="form-control">
                    <option value="">All users</option>
                    @foreach($users as $user)
                        <option value="{{ $user->id }}" {{ ($filters['user_id'] ?? '') == $user->id ? 'selected' : '' }}>{{ $user->name }}</option>
                    @endforeach
                </select>
            </div>
            <div class="form-group">
                <label>Entries</label>
                <select name="entries" class="form-control">
                    @foreach($entryOptions as $option)
                        <option value="{{ $option }}" {{ $entries === $option ? 'selected' : '' }}>{{ strtoupper($option) }}</option>
                    @endforeach
                </select>
            </div>
            <div class="form-actions" style="grid-column: 1 / -1;">
                <button class="btn" type="submit">Filter</button>
                <a class="btn btn-light" href="{{ url('/expenses') }}">Reset</a>
            </div>
        </form>
    </div>

    <div class="card summary-grid">
        @forelse($paymentSummary as $row)
            <div class="summary-card">
                <div class="summary-label">{{ $row->paymentMethod?->name ?: '-' }}</div>
                <div class="summary-value">{{ \App\Models\SystemSetting::formatMoney($row->total_amount) }}</div>
                <div class="muted">{{ number_format($row->entries) }} entries</div>
            </div>
        @empty
            <div class="muted">No payment method summary yet.</div>
        @endforelse
    </div>

    <div class="card">
        <div class="table-wrap">
            <table>
                <thead>
                    <tr>
                        <th>Date</th>
                        <th>Expense No</th>
                        <th>Category</th>
                        <th>Department</th>
                        <th>Paid To</th>
                        <th>Payment Method</th>
                        <th>Reference</th>
                        <th>Description</th>
                        <th>Branch</th>
                        <th>Added By</th>
                        <th class="num">Amount</th>
                        <th>Action</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($expenses as $expense)
                        <tr>
                            <td>{{ $expense->expense_date?->format('Y-m-d H:i') }}</td>
                            <td>{{ $expense->expense_no }}</td>
                            <td>{{ $expense->expenseCategory?->name ?: ($expense->category ?: '-') }}</td>
                            <td>{{ $expense->department?->name ?: '-' }}</td>
                            <td>{{ $expense->paid_to ?: '-' }}</td>
                            <td>{{ $expense->paymentMethod?->name ?: '-' }}</td>
                            <td>{{ $expense->reference_no ?: '-' }}</td>
                            <td>{{ $expense->description ?: '-' }}</td>
                            <td>{{ $expense->branch?->name ?: '-' }}</td>
                            <td>{{ $expense->user?->name ?: '-' }}</td>
                            <td class="num"><strong>{{ \App\Models\SystemSetting::formatMoney($expense->amount) }}</strong></td>
                            <td>
                                <form method="POST" action="{{ url('/expenses/'.$expense->id) }}" class="delete-expense-form">
                                    @csrf
                                    @method('DELETE')
                                    <button class="danger-btn" type="submit">Delete</button>
                                </form>
                            </td>
                        </tr>
                    @empty
                        <tr><td colspan="12" class="muted">No expenses found.</td></tr>
                    @endforelse
                </tbody>
                <tfoot>
                    <tr>
                        <td colspan="10">Totals</td>
                        <td class="num">{{ \App\Models\SystemSetting::formatMoney($totals->total_amount ?? 0) }}</td>
                        <td></td>
                    </tr>
                </tfoot>
            </table>
        </div>

        <div style="margin-top:12px;">
            @if(method_exists($expenses, 'links'))
                {{ $expenses->links() }}
            @else
                Showing all {{ number_format($expenses->count()) }} entries
            @endif
        </div>
    </div>
</div>

<script>
const expenseFilters = document.getElementById('expenseFilters');
const expenseFormCard = document.getElementById('expenseFormCard');
const expenseFilterForm = document.getElementById('expenseFilterForm');
let filterTimer = null;

document.getElementById('toggleExpenseFilters').addEventListener('click', () => {
    expenseFilters.classList.toggle('is-visible');
});

document.getElementById('toggleExpenseForm').addEventListener('click', () => {
    expenseFormCard.classList.toggle('is-visible');
});

function toggleCustomDates(){
    const show = expenseFilterForm.querySelector('[name="date_range"]').value === 'custom';
    document.querySelectorAll('.custom-date-field').forEach(field => {
        field.style.display = show ? 'flex' : 'none';
    });
}

function autoSubmit(delay = 200){
    clearTimeout(filterTimer);
    filterTimer = setTimeout(() => expenseFilterForm.requestSubmit(), delay);
}

expenseFilterForm.querySelectorAll('select').forEach(select => {
    select.addEventListener('change', () => {
        if (select.name === 'date_range') {
            toggleCustomDates();
            if (select.value === 'custom') {
                return;
            }
        }

        autoSubmit();
    });
});

expenseFilterForm.querySelectorAll('input[type="text"], input[type="datetime-local"]').forEach(input => {
    input.addEventListener('input', () => autoSubmit(input.type === 'datetime-local' ? 300 : 700));
    input.addEventListener('change', () => autoSubmit(150));
});

document.addEventListener('submit', event => {
    if (event.target.matches('.delete-expense-form') && !confirm('Delete this expense?')) {
        event.preventDefault();
    }
});

toggleCustomDates();
</script>
@endsection