@extends('layouts.master')

@section('css')
<link rel="stylesheet" href="{{ asset('js/plugins/datatables/dataTables.bootstrap4.min.css') }}">
@endsection


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

@section('content.header.title')
{{ $user->first_name }} {{ $user->last_name }}
@endsection

@section('content.header.info')
<ul class="nav">
  <li class="nav-item">
    <a class="nav-link active" href="{{ url('users') }}">Back to Users</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="{{ route('new-user-tran', $user->id)}}">New Transaction</a>
  </li>
</ul>
@endsection

@section('content')
<section class="content">
  <div class="container-fluid">
    <div class="row">
      <div class="col-12">
        <!-- Main content -->
        <div class="invoice p-3 mb-3">
          <!-- title row -->
          <div class="row">
            <div class="col-12">
              <h4>
                {{ $user->first_name }} {{ $user->last_name }} ({{ $user->vsid }})
              </h4>
            </div>
            <!-- /.col -->
          </div>
          <!-- info row -->
          <div class="row">
            <div class="col-sm-4 ">
              <strong>First Name: </strong>{{ $user->first_name }}<br>
              <strong>Last Name: </strong>{{ $user->last_name }}<br>
              <strong>Email: </strong>{{ $user->email }}<br>
              <strong>Phone Number: </strong>{{ $user->phone_num }}<br>
              <strong>Company : </strong>{{ $user->company_name }}<br><br>
            </div>
            <!-- /.col -->
            <div class="col-sm-4">
              <strong>Account Type : </strong>{{ $user->account_type }}<br>
              <strong>Renewal Date:
              </strong>{{ \Carbon\Carbon::parse($user->renewal_date)->format('m/d/Y') }}<br>
              <strong>Expiration Date :
              </strong>{{ \Carbon\Carbon::parse($user->expiration_date)->format('m/d/Y') }}<br>
              <strong>Service Type: </strong>{{ $user->service_type }}<br>

              <strong>Created On:
              </strong>{{ \Carbon\Carbon::parse($user->created_at)->format('m/d/Y') }}<br>
            </div>
            <!-- /.col -->
            <div class="col-sm-4">
              <strong>Referral VSID : </strong><a
                href="{{ url('users')}}/{{ $user->referral_user_id }}">{{$user->referral_id}}</a>
              <button type="button" class="btn btn-primary btn-sm" data-toggle="modal"
                data-target="#editRef" data-name="{{$user->first_name}} {{$user->last_name}}"
                data-id="{{ $user->id }}" data-refid="{{ $user->referral_id}}">
                Edit
              </button><br>
              <strong>Referral Email : </strong>{{ $user->referral_email }}<br><br><br>
              <strong>Account Balance : $</strong>{{ number_format($balance, 2) }}<br>
            </div>
            <!-- /.col -->
          </div>
          <!-- /.row -->
          <div class="row"></div>
          <div class="row">
            <div class="col-12">
              <h4>
                Transactions
              </h4>
            </div>
            <!-- /.col -->
          </div>
          <!-- Table row -->
          <div class="row">
            <table id="trans" class="table table-bordered table-striped">
              <thead>
                <tr>
                  <th>Date</th>
                  <th>Reference #</th>
                  <th>Tran Type</th>
                  <th>Info</th>
                  <th>Approved?</th>
                  <th>Amount ($)</th>
                </tr>
              </thead>
              <tbody>
                @foreach($trans as $tran)
                <tr>
                  <td>{{ \Carbon\Carbon::parse($tran->processed_date)->format('m/d/Y')}}</td>
                  <td>{{$tran->reference}}</td>
                  <td>{{$tran->tran_type_name}}</td>
                  <td>{{$tran->internal_note}}</td>
                  <td>@if($tran->approved_by > 0)
                    <span class="badge badge-primary">
                      <i class="fas fa-check"></i>
                    </span>
                    @else

                    <span>
                      <button type="button" class="btn btn-danger btn-sm" data-toggle="modal"
                        data-target="#confirm" data-id="{{ $tran->id }}"
                        data-pymt="{{ $tran->amount}}" data-ref="{{ $tran->reference}}">
                        Approve
                      </button>
                    </span>
                    @endif</td>
                  <td>{{ $tran->amount}}</td>
                </tr>
                @endforeach
              </tbody>
              <tfoot>
                <tr>
                  <th></th>
                  <th></th>
                  <th></th>
                  <th></th>
                  <th></th>
                  <th></th>
                </tr>
              </tfoot>
            </table>
          </div>
          <!-- /.col -->
        </div>
        <!-- /.row -->
      </div>
      <!-- /.invoice -->
    </div><!-- /.col -->
  </div>
  <!-- /.row -->
  </div><!-- /.container-fluid -->

  <div class="modal fade" id="confirm" tabindex="-1" role="dialog" aria-labelledby="title"
    aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="title" id="title">Approve Transaction</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          Are you sure you wish to approve this transaction for <strong>$<span
              class="amt"></span></strong>? This action
          is irreversible.
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
          <a class="btn btn-primary" href="#" role="button" id="id">Approve</a>
        </div>
      </div>
    </div>
  </div>
  <div class="modal fade" id="editRef" tabindex="-1" role="dialog" aria-labelledby="title"
    aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="title" id="title">Change Referral's #</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <form role="form" method="POST" action="{{url('users')}}">
          @method('PUT')
          @csrf
          <div class="modal-body">
            <input type="hidden" name="id" id="id" value="{{ $user->id }}">
            <div class="form-group">
              <label for="recipient-name" class="col-form-label" id="user"></label>
              <input type="text" class="form-control" id="referral_id" name="referral_id">
            </div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
            <button type="submit" class="btn btn-primary">Save</button>
          </div>
        </form>
      </div>
    </div>
  </div>
</section>
@endsection


@section('javascript')
<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>
@endsection

@section('page_script')
<script>
  $(document).ready(function () {
    $('#confirm').on('show.bs.modal', function (event) {
      var button = $(event.relatedTarget) // Button that triggered the modal
      var pymt = button.data('pymt');
      var ref = button.data('ref');
      var id = button.data('id');
      var url = '{{url('transactions')}}/'+id;
      var modal = $(this);
      modal.find('.amt').text(pymt);
      modal.find('.title').text('Approve Ref #' + ref);
      $('#id').attr('href', url);
    });

    $('#editRef').on('show.bs.modal', function (event) {
      var button = $(event.relatedTarget) // Button that triggered the modal
      var id = button.data('id')
      var ref = button.data('refid')
      var name = button.data('name')
      var modal = $(this)
      modal.find('#user').text(name)
      modal.find('#referral_id').val(ref)
      modal.find('#id').val(id)
    });

    $('#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(5, {
            page: 'current'
          })
          .data()
          .reduce(function (a, b) {
            return intVal(a) + intVal(b);
          }, 0);

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

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