@extends('layouts.master')

@section('css')
<link rel="stylesheet" href="{{ asset('js/plugins/daterangepicker/daterangepicker-bs3.css') }}">
@endsection

@section('title')
Transactions
@endsection

@section('content.header.title')

@endsection

@section('content.header.info')

@endsection

@section('content')
<section class="content">
  <div class="container-fluid">
    <div class="row">
      <!-- left column -->
      <div class="col-md-12">
        <div class="card">
          <div class="card-header">
            <h3 class="card-title">Transactions</h3>
            <div class="card-tools">
              <div class="form-group">


                <div class="input-group mb-3">
                  <div class="input-group-prepend">
                    <span class="input-group-text">
                      <i class="fa fa-calendar"></i>
                    </span>
                  </div>
                  <input type="text" class="form-control" placeholder="Recipient's username"
                    aria-label="Recipient's username" aria-describedby="button-addon2"
                    id="reservation">
                  <div class="input-group-append">
                    <button class="btn btn-outline-secondary" type="button"
                      id="button-addon2">Button</button>
                  </div>
                </div>
                <!-- /.input group -->

              </div>
            </div>
          </div>
          <div class="card-body table-responsive p-0">
            <table class="table table-hover">
              <tr>
                <th>User</th>
                <th>Reference #</th>
                <th>Amount</th>
                <th>Processed On</th>
                <th>Note</th>
                <th>Approved?</th>
                <th>
                  <a href="/trans/create" class="btn btn-warning" role="button"
                    aria-pressed="true"><i
                      class="fa fa-plus"></i> Add New</a>
                </th>
              </tr>
              @foreach($trans as $tran)
              <tr>
                <td>{{ $tran->first_name }} {{ $tran->last_name }}</td>
                <td>{{$tran->reference}}</td>
                <td>{{ number_format($tran->amount, 2)}}</td>
                <td>{{ \Carbon\Carbon::parse($tran->processed_date)->format('m/d/Y')}}</td>
                <td>{{$tran->tran_info}}</td>
                <td>@if($tran->approved_by > 0)
                  <span class="badge badge-primary">Approved</span>
                  @else
                  <span class="badge badge-secondary">Not Approved</span>
                  @endif</td>
                <td>
                </td>
              </tr>
              @endforeach
            </table>
          </div>
          <!-- /.card-body -->
        </div>
      </div>
    </div>
    <!-- /.row -->
  </div><!-- /.container-fluid -->
</section>
@endsection('content')

@section('javascript')
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.2/moment.min.js"></script>
<script src="{{ asset('js/plugins/timepicker/bootstrap-timepicker.min.js') }}"></script>
<script src="{{ asset('js/plugins/daterangepicker/daterangepicker.js') }}"></script>
<script>
  $(function () {
    //Date range picker
    $('#reservation').daterangepicker()
  })
</script>
@endsection