@extends('layouts.user_type.auth')
@section('content')
<div class="d-flex justify-content-end">
<a href="{{ url('expenseform') }}" class="btn bg-gradient-primary btn-sm mb-0" type="button">{{ '+  ADD EXPENSE' }}</a>
                   
<!-- <button type="submit" class="btn bg-gradient-dark btn-md mt-4 mb-4" ><a href="{{ url('donate') }}">{{ 'Add Donation' }}</button></a> -->
                        </div>
 {{-- <main class="main-content position-relative max-height-vh-100 h-100 mt-1 border-radius-lg ">
    <div class="container-fluid py-4">
        <div class="card">
            <div class="card-body pt-4 p-3">
                <form action="{{ route('expense') }}" method="POST" role="form text-left">
                  @csrf 
                  <div class="row">
                      <div class="col-md-4">
                          <div class="form-group">
                              <label for="user-name" class="form-control-label">{{ __('Mode of Payment') }}</label>
                              <select class="form-control" id="payment_mode"name="paymentmode">
                                <option value="" disabled selected>Select Mode of Payment</option>
                                <option value="Cash">Cash</option>
                                <option value="Cheque">Cheque</option>
                                <option value="Online Transfer">Online Transfer</option>
                                <option value="UPI">UPI</option>
                                <option value="Amazon Pay">Amazon Pay</option>
                                <option value="Google Pay">Google Pay</option>
                              </select>
                          </div>
                      </div>
                      <div class="col-md-4">
                          <div class="form-group">
                              <label for="user-email" class="form-control-label">{{ __('Purpose of Payment') }}</label>
                              <select class="form-control" id="payment_mode"name="purpose">
                                <option value="" disabled selected>Select Purpose of Donation</option>
                                <option value="Annadhanam">Anna Dhanam</option>
                                <option value="Birthday">Birthday</option>
                                <option value="Wedding">Wedding Anniversary</option>
                                <option value="Death">Death Anniversary</option>
                              </select>
                          </div>
                      </div>
                      <div class="col-md-4">
                          <div class="form-group">
                              <label for="user-email" class="form-control-label">{{ __('Payment Date') }}</label>
                              <input type="text" class="form-control daterange" placeholder="Select Payment Date" name="paymentdate" />
                          </div>
                      </div>
                  </div>
                  <div class="row">
                  <div class="col-md-4">
                          <div class="form-group">
                              <label for="user-email" class="form-control-label">{{ __('Event Date') }}</label>
                              <input type="text" class="form-control daterange" placeholder="Select Event Date" name="eventdate" />
                          </div>
                      </div>
                      <div class="col-md-4">
                          <div class="form-group">
                              <label for="user-email" class="form-control-label">{{ __('Receipt Date') }}</label>
                              <input type="text" class="form-control daterange" placeholder="Select Receipt Date" name="receiptdate" />
                          </div>
                      </div>
                      <div class="col-md-4">
                        <div class="d-flex justify-content-end">
                          <button type="submit" class="btn bg-gradient-dark btn-md mt-4 mb-4">{{ 'Filter' }}</button>
                        </div>
                      </div>
                  </div>
                </form>

            </div>
        </div>
    </div> 
  </main> --}}

  <main class="main-content position-relative max-height-vh-100 h-100 mt-1 border-radius-lg ">
    <div class="container-fluid py-4">
      <div class="row">
        <div class="col-12">
          @if(session('success'))
              <div class="alert alert-success alert-dismissible fade show" id="alert-success" role="alert">
                  <span class="alert-text text-white">
                  {{ session('success') }}</span>
                  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">
                      <i class="fa fa-close" aria-hidden="true"></i>
                  </button>
              </div>
          @endif
          <div class="card mb-4">
            <div class="card-header pb-0">
              <h6>Expense table</h6>
            </div>
            <div class="card-body px-0 pt-0 pb-2">
              <div class="table-responsive p-0">
                <table class="table display align-items-center mb-0" id="donation">
                  <thead>
                    <tr>
                      <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">S.No</th>
                      <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 ps-2">Name</th>
                      <th class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Amount</th>
                      <th class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">payment Details</th>
                      <th class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Payment mode</th>
                      <th class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">payment date</th>
                      <th class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Action</th>
                    </tr>
                  </thead>
                  <tbody>
                    @php($i = 1)
                    @foreach($expense_data as $expense)
                    <tr>
                      <td class="align-middle text-center">
                        <span class="text-secondary text-xs font-weight-bold">{{ $i++ }}</span>
                      </td>
                      <td>
                        <div class="d-flex px-2 py-1">
                          <div class="d-flex flex-column justify-content-center">
                            <h6 class="mb-0 text-sm">{{ $expense->name }}</h6>
                          </div>
                        </div>
                      </td> 
                      <td class="align-middle text-center text-sm">
                        <span class="badge badge-sm bg-gradient-success">{{ $expense->amount }}</span>
                      </td>
                      <td class="align-middle text-center">
                        <span class="text-secondary text-xs font-weight-bold">{{ $expense->payment_details }}</span>
                      </td>
                      <td class="align-middle text-center">
                        <span class="text-secondary text-xs font-weight-bold">{{ $expense->mode_of_payment }}</span>
                      </td>
                      <td class="align-middle text-center">
                        <span class="text-secondary text-xs font-weight-bold">{{ $expense->payment_date }}</span>
                      </td>
                      <td class="align-middle text-center">
                              <a href="{{ url('expense/delete') }}/{{$expense->id}}"  data-bs-toggle="tooltip" data-bs-original-title="Edit user">
                              <i class="cursor-pointer fas fa-trash text-secondary"></i>
                           </a>
                       </td>
                    </tr>
                    @endforeach
                  
                  </tbody>
                </table>
              </div>
            </div>
          </div>
        </div>
      </div>
    
    </div>

  
  @endsection