@extends('layouts.app', ['pageSlug' => 'listofpayment'])

@section('content')
<div class="splynx_top_nav">
    <div style="float: left">
        <ul class="splynx_breadcrumbs">
            <li><span>List of payments</span></li>
        </ul>
    </div>
    <div class="clearfix"></div>
</div>
<div class="spl-page-panel">
    <div class="row">
        <div class="col-lg-6">
            <div class="card">
                <div class="card-header">
                    <div class="card-title">
                        Import Data
                    </div>
                </div>
                
                <div class="card-body">
                    <form action="{{ route('import.file.excel') }}" method="POST" enctype="multipart/form-data">
                        @csrf
                        <div class="form-group">
                            <label>Choose File:</label>
                            <input type="file" name="file" required/>
                        </div>
                        
                        <div class="form-group">
                            <input type="submit" name="submit" value="Import"/>
                        </div>
                        
                    </form>
                </div>
            </div>
        </div>
        <div class="col-lg-6 text-right">
            <a href="{{route("pay-extension.listpayment.add")}}" class="btn btn-default" ><i class="fa fa-plus"></i> Add Payment</a>  
    	</div> 
    </div>
    <div class="row">
        <div class="col-lg-12">
            <div class="p-3"> 
            <form>
                    <div class="row">
                        <div class="col-md-3">		
                            <div class="form-group">
    							<input type="text" name="min_date" id="min" class="form-control datepicker" placeholder="Min Date" autocomplete="off" value="">
    						</div>
    					</div>
                        <div class="col-md-3">	
    						<div class="form-group">
    							<input type="text" name="max_date" id="max" class="form-control datepicker" placeholder="Max Date" autocomplete="off" value="">
    						</div>
    					</div>
                        <div class="col-md-3">
        				    <button type="submit" class="search-btn btn btn-primary" title="Search">Search</button>
        				</div>
        			</div>
        		</form>
                <table id="payment_list" class="table table-striped dttable dttable1">
                    
                    <thead>
                        <th>#</th>
                        <th>ID</th>
                        <th>Date</th>
                        <th>Amount</th>
                        <th>Reference</th>
                        <th>Assigned User</th>
                        <th>Delete</th>
                    </thead>
                    
                    <tbody>
                       
                    </tbody>
                
                </table>
            </div>
        </div>
    </div>
</div>
<div id="editpaymentForm" title="Payment Edit">
  <form method="POST" action="{{ route('pay-extension.listpayment.update') }}">
      @csrf
    <fieldset>
        <input type="hidden" name="id" value="">
        <div class="form-group">
            <label for="date">Date</label>
            <input type="text" name="date" class="text ui-widget-content ui-corner-all download_date" autocomplete="off" style="width:100%;">
            <span class="fa fa-fw fa-calendar input-suff-span"></span>
        </div>
        <div class="form-group">
            <label for="amount">Amount</label>
            <input type="number" name="amount" min="0" class="text ui-widget-content ui-corner-all amountfield" style="width:100%;">
        </div>
        <div class="form-group">
            <label for="ref">Reference</label>
            <input type="text" name="ref" class="text ui-widget-content ui-corner-all reffield" autocomplete="off" style="width:100%;">
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
      <!-- Allow form submission with keyboard without duplicating the dialog button -->
      <input type="submit" tabindex="-1" style="position:absolute; top:-1000px">
    </fieldset>
  </form>
</div>
@endsection
@section('script')
<script>
    $(function () {
          "use strict";
            var times = {!!json_encode($data2)!!};
            console.log(times);
            var table = $('#payment_list').DataTable({
              processing: true,
              serverSide: true,
                deferLoading: 0,
              pageLength: 25,
                ajax: {
                url: '{{ route("import.excellist") }}',
                    data: function(d) {
                        d.min = $('input[name=min_date]').val();
                        d.max = $('input[name=max_date]').val();
                    }
                },
              language: {
                searchPlaceholder: "Search records..."
              },
              columns: [
                  {data: 'DT_RowIndex', name: 'DT_RowIndex', searchable : false, orderable : false},
                  {data : 'id', name : 'payments_excel.id'},
                  {data : 'date', name : 'payments_excel.date'},
                  {data : 'amount', name : 'payments_excel.amount'},
                  {data : 'reference', name : 'payments_excel.ref'},
                  {data : 'action', name : 'payments_excel.action',searchable : false, orderable : false
                 },
                  {data : 'delete', name : 'delete',searchable : false, orderable : false},
              ],
              dom : 'lBfrtip',
              buttons : [
                'csv','excel','pdf','print','copy'
              ],
              drawCallback: function() {
                 $('.selectuser').select2();
              }
          });
            $('.selectuser').select2({
                    width : '100%'
             });
          // Event listener to the two range filtering inputs to redraw on input
            $('.search-btn').on("click", function(e) {
                e.preventDefault();
                $('input[name=min_date]').attr('required',true);
                $('input[name=max_date]').attr('required',true);
                if($('input[name=min_date]').val() != '' && $('input[name=max_date]').val() != ''){
                    table.draw();
                }
                else{
                    toastr.error('Min & Max date both are required.');
                }
            });
        //   $('.dataTables_filter input').unbind().on("keyup click", function() {
        //     var value = $(this).val();
        //     console.log(value);
        //     if (value.length>2 || ($('input[name=min_date]').val() != '' && $('input[name=max_date]').val() != '')) {
        //         table.search(value).draw();
        //     } 
        //   });
    //       $(".dttable").on('change','.selectuser',function(){
    //         var row = $(this).closest("tr");
    //         var rowid = +row.find("input.excelrow").val();
    //         var userid = $(this).val();
                
    //         if(userid == ''){
    //             // alert('Please select user');
    //             return false;
    //         }else{
    //             if (!confirm("Confirm this payment for this user?")) {
                    
    //                 $(this).val('');
    //                 $(this).select2({
    //                     height: '50px !important',
    //                     width: '100%'
    //                 }).trigger('change');
                    
    //                 return false;
    //                 //abort!
    //             }else{
    //                 $.ajax({
    //                     type : 'GET',
    //                     dataType : 'json',
    //                     url : '{{ route("update.user") }}',
    //                     data : {rowid : rowid, userid : userid},
    //                     success : function(response){
    //                         alert(response);
    //                         return false;
    //                     }
    //                 });
    //             }
    //         }
    //  });
     
    $('body').on("click",".listpay-delete",function (event) {
        var id = $(this).data('id');
        console.log(id);
        if (confirm('Are you sure you want to delete this?')) {
            $.ajax({
                headers: {
                  'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                  },
                url: "pay-extenion-mng/listpayment/" + id,
                type: "DELETE",
                success: function () {
                    toastr.success('Successfully deleted');
                    location.reload();
                },
                error: function(jqXHR, textStatus, errorThrown) {
                    toastr.error('Error in deletion');
                  console.log(textStatus, errorThrown);
                }
            });
        }
    });
     $( ".download_date" ).datepicker({
            dateFormat : 'yy-mm-dd'
    });
    var dialog1;
    dialog1 = $( "#editpaymentForm" ).dialog({
      autoOpen: false,
      height: 300,
      width: 350,
      modal: true,
      buttons: {
        
      },
      close: function() {
      }
    });
    
    $('body').on("click", ".listpayedit-btn", function(){
        var id = $(this).data('id');
        dialog1.find('input[name=id]').val(id);
        var date = $(this).data('date');
        dialog1.find('input[name=date]').val(date);
        var ref = $(this).data('ref');
        dialog1.find('input[name=ref]').val(ref);
        var amount = $(this).data('amount');
        dialog1.find('input[name=amount]').val(amount);
        dialog1.dialog( "open" );
    });     
});
    
   
</script>
@endsection