@extends('layouts.master')

@section('title')
Unapproved Transactions
@endsection

@section('content.header.title')
Unapproved Transactions
@endsection

@section('content.header.info')
View transactions waiting approvals
@endsection

@section('css')
<link rel="stylesheet" type="text/css"
  href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.20/css/dataTables.bootstrap4.min.css">
@endsection


@section('content')
<section class="content">
  <div class="container-fluid">
    <div class="row justify-content-center">
      <div class="col-md-12">
        <div class="card">
          <div class="card-header">
            @isset($trantypes)
            <form method="POST" action="{{ url('approvals') }}" id="reportform">
              @method('POST')
              @csrf
              <div class="container-fluid">
                <div class="row">
                  <div class="col-md-3"><strong>Transaction Types:</strong></div>
                  <div class="col-md-9">
                    @foreach($trantypes as $tt)
                    <div class="form-check form-check-inline">
                      <input class="form-check-input" type="checkbox" id="{{ $tt->id}}"
                        value="{{ $tt->id}}" name="trantypes[]" @if($tt->current_flag == '1')
                      checked
                      @endif>
                      <label class="form-check-label" for="{{ $tt->id}}">{{ $tt->name }}</label>
                    </div>
                    @endforeach
                  </div>
                </div>
                <div class="row">
                  <div class="col-md-3"><strong>Date Range:</strong></div>
                  <div class="col-md-3">
                    <div class="input-group mb-3">
                      <input type="text" class="form-control" placeholder=""
                        aria-label="" aria-describedby="reportrange"
                        id="date_range" name="date_range" readonly>
                      <div class="input-group-append">
                        <button class="btn btn-outline-secondary" type="button"
                          id="reportrange"><i class="fa fa-calendar"></i></button>
                      </div>
                    </div>
                  </div>
                  <div class="col-md-6">
                    <a class="btn btn-primary mb-2" href="javascript:;" role="button"
                      id="report-button">Generate
                      Report</a>
                  </div>
                </div>
              </div>
            </form>
            @endisset
          </div>
          <div class="card-body table-responsive p-0">
            <div class="clearfix">
              <p></p>
            </div>
            <table id="trans" class="table table-bordered table-striped table-hover">
              <thead class="thead-dark">
                <tr>
                  <th>VSID</th>
                  <th>Name</th>
                  <th>Transaction Date</th>
                  <th>Transaction Type</th>
                  <th>Reference #</th>
                  <th>Info</th>
                  <th>Amount</th>
                </tr>
              </thead>
              <tbody>
                @isset($trans)
                @foreach($trans as $tran)
                <tr>
                  <td><a href="{{ url('users')}}/{{ $tran->user_id }}">{{ $tran->vsid }}</a></td>
                  <td>{{ $tran->first_name }} {{ $tran->last_name }}</td>
                  <td>{{ \Carbon\Carbon::parse($tran->tran_date)->format('m/d/Y')}}</td>
                  <td>{{ $tran->tran_type_name }}</td>
                  <td>{{ $tran->reference }}</td>
                  <td>{{ $tran->tran_info }}</td>
                  <td>{{ $tran->amount }}</td>
                </tr>
                @endforeach
                @endisset
              </tbody>
              <tfoot>
                <tr>
                  <th></th>
                  <th></th>
                  <th></th>
                  <th></th>
                  <th></th>
                  <th></th>
                  <th></th>
                </tr>
              </tfoot>
            </table>
          </div>
          <!-- /.card-body -->
        </div>

      </div>
    </div>
    <!-- /.row -->
  </div><!-- /.container-fluid -->
</section>
@endsection('content')

@section('javascript')
<script type="text/javascript" src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script src="{{ asset('js/plugins/datatables/dataTables.bootstrap4.min.js') }}"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>

<script>
    $(document).ready(function () {
        //table = $('#trans').DataTable();
        table = $('#trans').dataTable({
            "footerCallback": function (tfoot, data, start, end, display) {
                var api = this.api();

                // Remove the formatting to get integer data for summation
                var intVal = function (i) {
                    return typeof i === 'string' ?
                        i.replace(/[\$,]/g, '') * 1 :
                        typeof i === 'number' ?
                            i : 0;
                };

                var fmt = function formatNumber(num) {
                    return num.toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1,')
                }

                // Total over this page
                pageTotal = api
                    .column(6, {
                        page: 'current'
                    })
                    .data()
                    .reduce(function (a, b) {
                        return intVal(a) + intVal(b);
                    }, 0);

                $(api.column(6).footer()).html(
                    '$' + fmt(parseFloat(Math.round(pageTotal * 100) / 100).toFixed(2))
                );
            },

            "columnDefs": [ {
                "targets": 6,
                "data": "amount",
                "render": $.fn.dataTable.render.number( ',', '.', 2, '$' )
            } ]
        });
    
    
    });
</script>
@endsection

@section('page_script')
<script>
        $(function () {
            @if (@isset($dt_start))
                var t = '{{ $dt_start}}';
                var start = moment('{{ $dt_start}}');
                var end = moment('{{ $dt_end}}');
            @else
                var start = moment().subtract(1, 'month').startOf('month');
                var end = moment().subtract(1, 'month').endOf('month');
            @endif


            function cb(start, end) {
                $('#date_range').val(start.format('MM/DD/YYYY') + ' - ' + end.format('MM/DD/YYYY'));
            }

            $('#reportrange').daterangepicker({
                "autoApply": true,
                startDate: start,
                endDate: end,
                ranges: {
                    'Today': [moment(), moment()],
                    'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
                    'Last 7 Days': [moment().subtract(6, 'days'), moment()],
                    'Last 30 Days': [moment().subtract(29, 'days'), moment()],
                    'This Month': [moment().startOf('month'), moment().endOf('month')],
                    'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')],
                    'Last 2 Month': [moment().subtract(2, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
                }
            }, cb);

            cb(start, end);

            $("#report-button").click(function () {
                $('#reportform').submit();
            });
        });
    </script>
@endsection