@extends('layouts.app')

@section('content')
    <div class="card card-outline-info">
        <div class="card-header">
            <h4 class="m-b-0 text-white">Create Payment</h4>
        </div>
    <div class="card-body">
      <div class="form-body control-group">
      @if(strtotime($paymentClosing->end_date) < strtotime($date_now))
        {!! Form::open(['method' => 'POST','id'=> 'register_frm', 'data-parsley-validate'=>'', 'url' => [url('/admin/payments/generatepayout')]]) !!}
        <div>
          <strong>Start Date :</strong><span>{{ $paymentClosing->start_date }}</span>
          <br>
          <strong>End Date :</strong><span>{{ $paymentClosing->end_date }}</span>

        </div>
          <input type="hidden" name="payment_closing_id" id="payment_closing_id" value="{{$paymentClosing->id}}">
        {!! Form::submit('Submit', ['class' => 'btn btn-lg btn-danger']) !!}
        {!! Form::close() !!}
      @else
        <h4>{{$paymentClosing->end_date}} {{Carbon\Carbon::parse($paymentClosing->end_date)->diffForHumans($date_now)}}.</h4>
      @endif
    </div>
    </div>
    <div class="row">
    <div class="card-body">
      <h3 class="card-title">Approved Incomes Affected</h3>
      <h4>Total Amount : {{IND_money_format($totalAmount)}}</h4>
      <h4>Total Amount Credit : {{IND_money_format($totalAmountCredit)}}</h4>
      <h4>Total Amount Debit : {{IND_money_format($totalAmountDebit)}}</h4>
        <div class="x_content">
          <table id="datatable-fixed-header" class="table table-striped table-bordered">
            <thead>
              <tr>
                <th>Amount</th>
                <th>Business Amount</th>
                <th>Income Type</th>
                <th>Username</th>
                <th>Full Name</th>
                <th>Created at</th>
              </tr>
            </thead>


            <tbody>
            @foreach ($incomes as $income)
              <tr>
                <td>{{ IND_money_format($income->income_amount) }}</td>
                <td>{{ IND_money_format($income->orig_amount) }}</td>
                <td>{{ucfirst($income->payment_type)}}</td>
                <td>{{ $income->username }}</td>
                <td>{{ $income->full_name }}</td>
                <td>{{ $income->created_at }}</td>
              </tr>
            @endforeach
            </tbody>
          </table>
        </div>
      </div>
    </div>
</div>
<!-- The Modal -->
<div class="modal fade" id="loadModalAjax" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" style="display: none;" aria-hidden="true">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">

      <!-- Modal Header -->
      <div class="modal-header">
        <h4 class="modal-title">Incomes Cancellation</h4>
        <button type="button" class="close" data-dismiss="modal">&times;</button>
      </div>

      <!-- Modal body -->
      <div class="modal-body">
      </div>

      <!-- Modal footer -->
      <div class="modal-footer">
        <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
      </div>

    </div>
  </div>
</div>

@stop

@section('javascript')
    <!-- Date picker plugins css -->
    <link href="{{ url('assets') }}/plugins/bootstrap-datepicker/bootstrap-datepicker.min.css" rel="stylesheet" type="text/css" />
    <!-- Daterange picker plugins css -->
    <link href="{{ url('assets') }}/plugins/timepicker/bootstrap-timepicker.min.css" rel="stylesheet">
    <link href="{{ url('assets') }}/plugins/bootstrap-daterangepicker/daterangepicker.css" rel="stylesheet">
    <!-- Date Picker Plugin JavaScript -->
    <script src="{{ url('assets') }}/plugins/bootstrap-datepicker/bootstrap-datepicker.min.js"></script>
    <!-- Date range Plugin JavaScript -->
    <script src="{{ url('assets') }}/plugins/timepicker/bootstrap-timepicker.min.js"></script>
    <script src="{{ url('assets') }}/plugins/bootstrap-daterangepicker/daterangepicker.js"></script>
    <script src="{{ url('assets') }}/js/jqBootstrapValidation.js"></script>
    <link href="{{ url('assets') }}/plugins/EasyAutocomplete/easy-autocomplete.min.css" rel="stylesheet">
    <script src="{{ url('assets') }}/plugins/EasyAutocomplete/jquery.easy-autocomplete.min.js"></script>
    <script src="{{ url('assets') }}/js/typeahead.bundle.js"></script>
    <!-- Parsley -->
    <script>
      
      jQuery(document).ready(function() {
      jQuery('.mydatepicker, #datepicker').datepicker({format: 'yyyy-mm-dd'});
       jQuery('#datatable-fixed-header').DataTable({
          fixedHeader: true
        });
        $('button.cancel_payment').click(function(){
          $('form#cancel_payment').attr('action', $(this).attr('data-url'));
          $('#loadModalAjax').modal({show:true});
        });
      });
  </script>
@endsection
