@extends('layouts.usermaster')

@section('title')
Voice Sync: {{ $user->first_name }} {{ $user->last_name }}
@endsection

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

@section('css')
<link rel="stylesheet" type="text/css"
  href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
<link rel="stylesheet" href="{{ asset('js/plugins/datatables/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('user/history') }}" 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->flag == '1') checked
                      @endif>
                      <label class="form-check-label"
                        for="{{ $tt->id}}">{{ $tt->tran_type }}</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>
                    <input type="hidden" name="download" value="0" id="download">
                    <a class="btn btn-danger mb-2" href="javascript:;" role="button"
                      id="download-button">Download
                      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>Transaction Date</th>
                  <th>Reference #</th>
                  <th>Transaction Type</th>
                  <th>Amount</th>
                  <th>Notes</th>
                </tr>
              </thead>
              <tbody>
                @isset($trans)
                @foreach($trans as $tran)
                <tr>
                  <td>{{ \Carbon\Carbon::parse($tran->tran_date)->format('m/d/Y')}}</td>
                  <td>{{ $tran->reference }}</td>
                  <td>{{ $tran->tran_type_name }}</td>
                  <td>{{ $tran->amount }}</td>
                  <td>{{ $tran->tran_info }}</td>
                </tr>
                @endforeach
                @endisset
              </tbody>
              <tfoot>
                <tr>
                  <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(3, {
              page: 'current'
            })
            .data()
            .reduce(function (a, b) {
              return intVal(a) + intVal(b);
            }, 0);
  
          $(api.column(3).footer()).html(
            '$' + fmt(parseFloat(Math.round(pageTotal * 100) / 100).toFixed(2))
          );
        },
  
        "columnDefs": [ {
        "targets": 3,
        "data": "amount",
        "render": $.fn.dataTable.render.number( ',', '.', 2, '$' )
        } ]
      });
    });
  </script>
@endsection
@section('page_script')
<script>
    $(function () {
      //$('.res').daterangepicker();
      @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);

     $('#trans').DataTable();

     $("#download-button").click(function () {
        $('#download').val(1);
        $('#reportform').submit();
    });
    
    $("#report-button").click(function () {
        $('#download').val(0);
        $('#reportform').submit();
    });

    
    });
  </script>
@endsection