@extends("layouts.members")
@section('page_title')
    EXPENSES
@endsection
@section('page_category')
    All Expenses
@endsection
<!-- HEADER -->
@section('page_action')
    <!-- Button -->
    <a href="{{ route('member_new_expense') }}" class="btn btn-primary lift">
        New Expense
    </a>
@endsection

@section('content')
    <div class="container">
        {{--<div class="row">--}}
        <div class="row">
            <div class="col-12">
                <!-- Goals -->
                <div class="card">
                    <div class="card-header">
                        <div class="row align-items-center">
                            <div class="col">
                                <!-- Title -->
                                <h4 class="card-header-title">
                                    Expenses
                                </h4>

                            </div>
                            <div class="col-auto">
                                <!-- Button -->
                                <a href="#!" class="btn btn-sm btn-white">
                                    Today
                                </a>
                                <!-- Button -->
                                <a href="#!" class="btn btn-sm btn-white">
                                    Last 7 Days
                                </a>
                                <!-- Button -->
                                <a href="#!" class="btn btn-sm btn-white">
                                    All
                                </a>
                                <!-- Button -->
                                <a href="#!" class="btn btn-sm btn-white">
                                    Export
                                </a>
                            </div>
                        </div> <!-- / .row -->
                    </div>
                    <div class="table-responsive mb-0"
                         data-list="{&quot;valueNames&quot;: [&quot;goal-project&quot;, &quot;goal-status&quot;, &quot;goal-progress&quot;, &quot;goal-date&quot;]}">
                        <table class="table table-sm table-nowrap card-table">
                            <thead>
                            <tr>
                                <th>
                                    <a href="#" class="text-muted list-sort" data-sort="goal-project">
                                        SN
                                    </a>
                                </th>
                                <th>
                                    <a href="#" class="text-muted list-sort" data-sort="goal-project">
                                        Item
                                    </a>
                                </th>
                                <th>
                                    <a href="#" class="text-muted list-sort" data-sort="goal-project">
                                        Cost
                                    </a>
                                </th>
                                <th>
                                    <a href="#" class="text-muted list-sort" data-sort="goal-project">
                                        Description
                                    </a>
                                </th>
                                <th>
                                    <a href="#" class="text-muted list-sort" data-sort="goal-project">
                                        Reciept
                                    </a>
                                </th>
                                <th>
                                    <a href="#" class="text-muted list-sort" data-sort="goal-progress">
                                        Expense Date
                                    </a>
                                </th>
                                <th>
                                    <a href="#" class="text-muted list-sort" data-sort="goal-progress">
                                        Entry Date
                                    </a>
                                </th>
                                <th>
                                    <a href="#" class="text-muted list-sort" data-sort="goal-progress">
                                        Status
                                    </a>
                                </th>
                            </tr>
                            </thead>
                            <tbody class="list">
                            <?php $n=1; ?>
                            @forelse($expenses as $expense)
                                <tr>
                                    <td class="goal-project">
                                        {{$n++}}
                                    </td>
                                    <td class="goal-project">
                                        {{$expense->item}}
                                    </td>
                                    <td class="goal-project">
                                        {{$expense->cost}}
                                    </td>
                                    <td class="goal-project">
                                        {{$expense->description}}
                                    </td>
                                    <td class="goal-project">
                                        <img src="{{asset('uploads/expenses/thumbReceipt/'.$expense->receipt)}}" style="max-width:50px" alt="" class="img img-responsive">
                                    </td>
                                    <td class="goal-project">
                                        {{$expense->created_at}}
                                    </td>
                                    <td class="goal-project">
                                        {{$expense->expense_date}}
                                    </td>
                                    <td class="goal-project">
                                        {{$expense->status}}
                                    </td>
                                    <td class="tsext-right">
                                        <div class="dropdown">
                                            <a href="#" class="dropdown-ellipses dropdown-toggle" role="button"
                                               data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                <i class="fe fe-more-vertical"></i>
                                            </a>
                                            <div class="dropdown-menu dropdown-menu-right">
                                                <a href="#!" class="dropdown-item">
                                                    Details
                                                </a>
                                                <a href="#!" class="dropdown-item">
                                                    Edit
                                                </a>
                                                <a href="#!" class="dropdown-item">
                                                    Delete
                                                </a>
                                            </div>
                                        </div>
                                    </td>
                                </tr>
                            @empty
                                <h6>No Expense Record Available</h6>
                            @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>

            </div>
        </div> <!-- / .row -->
    </div>

@endsection