@extends('layouts.app')

@section('title', $reportTitle)

@section('content')
<div class="container-fluid">

    <div class="row mb-3">
        <div class="col">
            <h4 class="mb-0 fw-bold">Expense Reports</h4>
            <small class="text-muted">{{ $reportTitle }}</small>
        </div>
    </div>

    @if(session('success'))
        <div class="alert alert-success alert-dismissible fade show" role="alert">
            {{ session('success') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    @endif

    <div class="row g-3">

        {{-- Sidebar --}}
        <div class="col-12 col-md-3 col-xl-2">
            <div class="card">
                <div class="card-header fw-semibold small py-2">Report Type</div>
                <div class="list-group list-group-flush">
                    @foreach($reports as $key => $label)
                        <a href="{{ request()->fullUrlWithQuery(['report' => $key]) }}"
                           class="list-group-item list-group-item-action small py-2 {{ $reportType === $key ? 'active' : '' }}">
                            {{ $label }}
                        </a>
                    @endforeach
                </div>
            </div>
        </div>

        {{-- Main --}}
        <div class="col-12 col-md-9 col-xl-10">

            {{-- Filters --}}
            <div class="card mb-3">
                <div class="card-body py-2">
                    <form method="GET" action="{{ route('expense-reports.index') }}" class="row g-2 align-items-end">
                        <input type="hidden" name="report" value="{{ $reportType }}">

                        <div class="col-auto">
                            <label class="form-label small mb-1">From</label>
                            <input type="date" name="date_from" value="{{ $dateFrom }}" class="form-control form-control-sm">
                        </div>

                        <div class="col-auto">
                            <label class="form-label small mb-1">To</label>
                            <input type="date" name="date_to" value="{{ $dateTo }}" class="form-control form-control-sm">
                        </div>

                        <div class="col-auto">
                            <label class="form-label small mb-1">Branch</label>
                            <select name="branch_id" class="form-select form-select-sm" style="min-width:130px">
                                <option value="">All Branches</option>
                                @foreach($branches as $branch)
                                    <option value="{{ $branch->id }}"
                                        {{ request('branch_id') == $branch->id ? 'selected' : '' }}>
                                        {{ $branch->name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>

                        <div class="col-auto">
                            <label class="form-label small mb-1">Expense Item</label>
                            <select name="expense_item_id" class="form-select form-select-sm" style="min-width:150px">
                                <option value="">All Items</option>
                                @foreach($expenseItems as $item)
                                    <option value="{{ $item->id }}"
                                        {{ request('expense_item_id') == $item->id ? 'selected' : '' }}>
                                        {{ $item->name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>

                        @if($reportType === 'trend')
                        <div class="col-auto">
                            <label class="form-label small mb-1">Group By</label>
                            <select name="group_by" class="form-select form-select-sm">
                                <option value="day"   {{ request('group_by', 'day') === 'day'   ? 'selected' : '' }}>Daily</option>
                                <option value="week"  {{ request('group_by', 'day') === 'week'  ? 'selected' : '' }}>Weekly</option>
                                <option value="month" {{ request('group_by', 'day') === 'month' ? 'selected' : '' }}>Monthly</option>
                            </select>
                        </div>
                        @endif

                        @if($reportType === 'top_items')
                        <div class="col-auto">
                            <label class="form-label small mb-1">Show Top</label>
                            <select name="limit" class="form-select form-select-sm">
                                @foreach([5, 10, 20, 50] as $l)
                                    <option value="{{ $l }}" {{ request('limit', 10) == $l ? 'selected' : '' }}>
                                        {{ $l }} items
                                    </option>
                                @endforeach
                            </select>
                        </div>
                        @endif

                        <div class="col-auto">
                            <button type="submit" class="btn btn-primary btn-sm">Apply</button>
                            <a href="{{ route('expense-reports.index', ['report' => $reportType]) }}"
                               class="btn btn-outline-secondary btn-sm ms-1">Reset</a>
                        </div>
                    </form>
                </div>
            </div>

            {{-- Report content --}}
            @include('expense_reports.partials.' . $reportType)

        </div>
    </div>
</div>
@endsection