@extends('dashboard.layouts.app')

@section('title', __('dashboard.Expenses'))
@section('page_heading', __('dashboard.All Expenses'))

@section('breadcrumb')
    <li class="breadcrumb-item text-muted">
        <a href="{{ route('dashboard.home') }}" class="text-muted text-hover-primary">{{ __('dashboard.Home') }}</a>
    </li>
    <li class="breadcrumb-item text-muted">
        <a href="{{ route('dashboard.expenses.index') }}" class="text-muted text-hover-primary">{{ __('dashboard.Expenses') }}</a>
    </li>
    <li class="breadcrumb-item text-muted">{{ __('dashboard.All Expenses') }}</li>
@endsection

@section('content')
    <div class="row g-7">
        <div class="col-xl-12">
            <div class="card card-flush h-lg-100">
                <div class="card-header pt-7">
                    <div class="card-title">
                        <i class="bi bi-wallet fs-1 me-2"></i>
                        <h2>{{ __('dashboard.All Expenses') }}</h2>
                    </div>
                    <div class="card-toolbar">
                        <div class="me-3">
                            <a href="{{ route('dashboard.expenses.create') }}" class="btn btn-primary">
                                {{ __('dashboard.Add New Expense') }}
                            </a>
                        </div>
                        <div class="me-3">
                            <button type="button" class="btn btn-light-primary" data-bs-toggle="collapse"
                                data-bs-target="#filter_form">
                                <i class="bi bi-filter fs-2"></i>
                                {{ __('dashboard.Filter') }}
                            </button>
                        </div>
                    </div>
                </div>
                <div class="card-body pt-5">
                    <div class="collapse {{ request()->has('category_id') || request()->has('type') || request()->has('from_date') || request()->has('to_date') ? 'show' : '' }}" id="filter_form">
                        <form method="GET" action="{{ route('dashboard.expenses.index') }}" class="row mb-7">
                            <div class="col-md-3 mb-3">
                                <label class="form-label">{{ __('dashboard.Category') }}</label>
                                <select name="category_id" class="form-select form-select-solid" data-control="select2" data-placeholder="{{ __('dashboard.Select Category') }}" data-allow-clear="true">
                                    <option value="">{{ __('dashboard.All') }}</option>
                                    @foreach($categories as $cat)
                                        <option value="{{ $cat->id }}"
                                            @if(request('category_id') == $cat->id) selected @endif>
                                            {{ $cat->name }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-md-3 mb-3">
                                <label class="form-label">{{ __('dashboard.Type') }}</label>
                                <select name="type" class="form-select form-select-solid" data-control="select2" data-placeholder="{{ __('dashboard.Select Type') }}" data-allow-clear="true">
                                    <option value="">{{ __('dashboard.All') }}</option>
                                    <option value="recurring" @if(request('type') == 'recurring') selected @endif>{{ __('dashboard.Recurring') }}</option>
                                    <option value="variable" @if(request('type') == 'variable') selected @endif>{{ __('dashboard.Variable') }}</option>
                                </select>
                            </div>
                            <div class="col-md-3 mb-3">
                                <label class="form-label">{{ __('dashboard.From Date') }}</label>
                                <input type="date" name="from_date" class="form-control form-control-solid" value="{{ request('from_date') }}">
                            </div>
                            <div class="col-md-3 mb-3">
                                <label class="form-label">{{ __('dashboard.To Date') }}</label>
                                <input type="date" name="to_date" class="form-control form-control-solid" value="{{ request('to_date') }}">
                            </div>
                            <div class="col-12 d-flex justify-content-end">
                                <button type="submit" class="btn btn-primary">{{ __('dashboard.Filter') }}</button>
                                <a href="{{ route('dashboard.expenses.index') }}" class="btn btn-secondary ms-3">{{ __('dashboard.Reset') }}</a>
                            </div>
                        </form>
                        <div class="separator separator-dashed my-5"></div>
                    </div>
                    @if($expenses->isEmpty())
                        <div class="alert alert-warning">
                            {{ __('dashboard.No expenses found.') }}
                        </div>
                    @else
                        <table class="table table-striped table-row-bordered gy-5 gs-7">
                            <thead>
                                <tr class="fw-bold fs-6 text-gray-800 px-7">
                                    <th>{{ __('dashboard.ID') }}</th>
                                    <th>{{ __('dashboard.Category') }}</th>
                                    <th>{{ __('dashboard.Amount') }}</th>
                                    <th>{{ __('dashboard.Type') }}</th>
                                    <th>{{ __('dashboard.Date') }}</th>
                                    <th>{{ __('dashboard.Receipt') }}</th>
                                    <th>{{ __('dashboard.Actions') }}</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($expenses as $exp)
                                    <tr>
                                        <td>{{ $exp->id }}</td>
                                        <td>{{ $exp->category->name ?? '-' }}</td>
                                        <td>{{ $exp->amount }}</td>
                                        <td>{{ $exp->category->type }}</td>
                                        <td>{{ $exp->created_at->format('Y-m-d') }}</td>
                                        <td>
                                            @if($exp->receipt_file)
                                                <a href="{{ asset('storage/'.$exp->receipt_file) }}" target="_blank" class="btn btn-sm btn-light-info" data-bs-toggle="tooltip" title="{{ __('dashboard.View Receipt') }}">
                                                    <i class="bi bi-eye-fill fs-4"></i>
                                                </a>
                                            @else
                                            -
                                            @endif
                                        </td>
                                        <td>
                                            <div class="dropdown">
                                                <button class="btn btn-secondary btn-sm dropdown-toggle" type="button"
                                                    id="dropdownMenuButton{{ $exp->id }}" data-bs-toggle="dropdown"
                                                    aria-expanded="false">
                                                    {{ __('dashboard.Actions') }}
                                                </button>
                                                <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton{{ $exp->id }}">
                                                    <li>
                                                        <a href="{{ route('dashboard.expenses.edit',$exp->id) }}" class="dropdown-item">
                                                            <i class="bi bi-pencil-square me-2"></i>{{ __('dashboard.Edit') }}
                                                        </a>
                                                    </li>
                                                    <li>
                                                        <form action="{{ route('dashboard.expenses.destroy',$exp->id) }}" method="POST" style="display:inline;">
                                                            @csrf
                                                            @method('DELETE')
                                                            <button type="submit" class="dropdown-item" onclick="return confirm('{{ __('dashboard.Are you sure you want to delete this expense?') }}')">
                                                                <i class="bi bi-trash-fill me-2"></i>{{ __('dashboard.Delete') }}
                                                            </button>
                                                        </form>
                                                    </li>
                                                </ul>
                                            </div>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                        {{ $expenses->appends(request()->query())->links() }}
                    @endif
                </div>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
    <script>
        $(function () {
            $('[data-bs-toggle="tooltip"]').tooltip();
        });
    </script>
@endsection