@extends('admin.layouts.app')

@section('title', 'Expense List')

@section('content')
<div class="container-fluid">
    <div class="mx-auto" style="max-width: 1200px;">
        <h1 class="fw-bold mb-4" style="font-size: 42px; line-height: 1.05; color: #0f172a;">Expense List</h1>

        <div class="card border-0 shadow-sm rounded-4 mb-3">
            <div class="card-body p-4">
                <form action="{{ route('admin.expenses.index') }}" method="GET">
                    <div class="row g-3 align-items-end">
                        <div class="col-md-3">
                            <label class="form-label fw-semibold">Search</label>
                            <input type="text" name="search" class="form-control form-control-lg rounded-3" placeholder="নাম / উদ্দেশ্য / নোট">
                        </div>

                        <div class="col-md-3">
                            <label class="form-label fw-semibold">From</label>
                            <input type="date" name="from" class="form-control form-control-lg rounded-3">
                        </div>

                        <div class="col-md-3">
                            <label class="form-label fw-semibold">To</label>
                            <input type="date" name="to" class="form-control form-control-lg rounded-3">
                        </div>

                        <div class="col-md-3">
                            <div class="d-flex flex-wrap gap-2">
                                <button type="submit" class="btn btn-dark rounded-3 px-3 fw-semibold">Filter</button>
                                <a href="{{ route('admin.expenses.index') }}" class="btn btn-light border rounded-3 px-3 fw-semibold">Reset</a>
                                <a href="javascript:void(0)" class="btn btn-light border rounded-3 px-3 fw-semibold">Export CSV</a>
                                <a href="{{ route('admin.expenses.create') }}" class="btn btn-light border rounded-3 px-3 fw-semibold">+ Add Expense</a>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>

        <div class="mb-2 fw-semibold" style="color:#111827;">Total Expense: 0.00</div>

        <div class="card border-0 shadow-sm rounded-0 bg-transparent">
            <div class="card-body p-0">
                <div class="table-responsive">
                    <table class="table table-bordered align-middle mb-0 bg-white">
                        <thead>
                            <tr>
                                <th style="width:60px;">ID</th>
                                <th style="width:120px;">Date</th>
                                <th>Name</th>
                                <th>Purpose</th>
                                <th style="width:140px;">Amount</th>
                                <th>Notes</th>
                                <th style="width:180px;">Attachment</th>
                                <th style="width:150px;">Created</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td colspan="8" style="padding:14px 10px; font-size:18px;">কিছু পাওয়া যায়নি।</td>
                            </tr>
                        </tbody>
                    </table>
                </div>

                <div class="mt-3">
                    <a href="javascript:void(0)" class="btn btn-light border rounded-3 px-3 fw-semibold">Next →</a>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
    .table thead th {
        font-size: 16px;
        font-weight: 700;
        color: #111827;
        text-align: center;
        background: #ffffff;
        padding: 12px 10px;
        white-space: nowrap;
    }
    .table tbody td {
        padding: 10px 8px;
        vertical-align: middle;
        font-size: 16px;
        color: #0f172a;
    }
</style>
@endsection
