@extends('layouts.app')

@section('content')
    <div class="card card-outline-info">
        <div class="card-header">
            <h4 class="m-b-0 text-white">Print Receipt</h4>
        </div>
    <div class="row">
    <div class="card-body">
      <h3 class="card-title">Payments Approved</h3>
        <div class="x_content">
          <table id="datatable-fixed-header" class="table table-striped table-bordered">
            <thead>
              <tr>
                <th>Amount</th>
                <th>Plot:Block:Sector:Project</th>
                <th>Remark</th>
                <th>Status</th>
                <th>Created at</th>
                <th>Paid at</th>
                <th>Action</th>
              </tr>
            </thead>


            <tbody>
            @foreach ($payments as $payment)
              <tr>
                <td>{{ IND_money_format($payment->amount) }}</td>
                <td>{{ $payment->name }}</td>
                <td>{!! str_replace('/////////////', '<br />', $payment->comment) !!}</td>
                <td>{{ ($payment->status==1)?'Approved':'Pending' }}</td>
                <td>{{ $payment->created_at }}</td>
                <td>{{ $payment->paid_on }}</td>
                <td>
                    <a href="{{url('/admin/payments/printreceipts/').'/'.$payment->id}}" id="print" class="btn btn-default btn-outline" type="button"> 
                        <span><i class="fa fa-print"></i> Print</span> 
                    </a>
                </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">Payment Cancellation</h4>
        <button type="button" class="close" data-dismiss="modal">&times;</button>
      </div>

      <!-- Modal body -->
      <div class="modal-body">
        {!! Form::open(['method' => 'POST','id'=> 'cancel_payment', 'data-parsley-validate'=>'', 'url' => ['']]) !!}
        <div class="row">
          <div class="col-md-12">
              <div class="form-group">
                  <label class="control-label" for="payment_reference">Remark</label>
                  <textarea type="text" id="cancel_comment" name="comment" required="required" class="form-control" value=""></textarea>
              </div>
          </div>
        </div>
        {!! Form::submit('Submit', ['class' => 'btn btn-danger']) !!}
        {!! Form::close() !!}
      </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>
    <script src="{{ url('assets') }}/js/jquery.PrintArea.js" type="text/JavaScript"></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});
        });
        $("#print").click(function() {
            var mode = 'iframe'; //popup
            var close = mode == "popup";
            var options = {
                mode: mode,
                popClose: close
            };
            $("div.printableArea").printArea(options);
        });
      });
  </script>
@endsection
