@extends('layouts.app')

@section('content')
<script src="{{ asset('js/jquery.min.js') }}"></script>
<div class="row page-titles">
    <div class="col-md-5 align-self-center">
        <h3 class="text-themecolor">Payment Details</h3>
    </div>
    <div class="col-md-7 align-self-center">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{{ action('HomeController@index') }}">Home</a></li>
            <li class="breadcrumb-item active">Payment Details</li>
        </ol>
    </div>

</div>
    <div class="row">
        <div class="btn btn-block pull-right" style="    margin-right: 30px;">
      <a class="btn btn-success waves-effect waves-light pull-right" href="{{ url('paymentexport') }}" >Export File</a>
      </div>
      </div>
<div class="container-fluid">

    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-body">
                    <div class="row py-4">
                        <div class="col-lg-3">
                        <div class="form-group">
                        <label for="from_date" class="col-sm-12 control-label"> Payment Date </label>
                        <div class="col-sm-12">
                        <input type="text" name="from_date" id="from_date" class="form-control" placeholder="From Date"/>
                        </div>
                        </div>
                        </div>
                        <div class="col-lg-3">
                            <div class="form-group">
                                <label for="to_date" class="col-sm-12 control-label"> Payment Date </label>
                                <div class="col-sm-12">
                                
                        <input type="text" name="to_date" id="to_date" class="form-control" placeholder="To Date"/>
                        </div>
                        </div>
                        </div>
                        
                            <div class="col-lg-3">
                                <div class="form-group">
                                <label for="payment_status" class="col-sm-12 control-label">Payment Status</label>
                                <div class="col-sm-12">
                                <select class="form-control" id="payment_status" name="payment_status">
                                <option value="">-- Select Status --</option>
                                <option value="success">Success</option>
                                <option value="pending">Pending</option>
                                </select>
                            </div>
                            </div>
                            </div>
                            <div class="col-lg-3 py-4">
                                <button type="submit" class="btn btn-primary pull-left" id="filter" value="Apply" style="margin:10px;">Apply</button>
                                <button type="button" name="refresh" id="refresh" class="btn btn-primary pull-left" style="margin:10px;">Refresh</button>
                                </div>
                                </div>
                    <h4 class="card-title"></h4>  


                    <div class="table-responsive">
                        <table class="table table-bordered table-striped" id="paymentdetail" width="100%">
                            <thead>
                                <tr>
                                    <th>#</th>
                                    <th>S.no</th>
                                    <th>Name</th>
                                    <th>Email</th>
                                    <th>Order ID</th>
                                    <th>Transaction ID</th>
                                    <th>Amount</th>
                                    <th>Payment Detail</th>
                                    <th>Status</th>
                                    <th>Date</th>
                                    <th>Source</th>
                                    <th>Action</th>
                                </tr>

                            </thead>
                            
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
$(document).ready( function ()
{
    $('#from_date').datepicker({
      uiLibrary: 'bootstrap4',
      dateFormat: 'dd-mm-yy',
      autoclose: true,
  });
  $('#to_date').datepicker({
      uiLibrary: 'bootstrap4',
      dateFormat: 'dd-mm-yy',
      autoclose: true,
  });
  $('#from_date').val('');
  $('#to_date').val('');
  $('#payment_status').val('');
  
     $.ajaxSetup({
      headers: {
          'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });
        load_data();
        function load_data(from_date = '', to_date = '', payment_status='')
        {
        $('#paymentdetail').DataTable({
         processing: true,
         serverSide: true,
         ajax: {
          url: "{{url('/get-payment-list')}}",
          type: 'GET',
          data: function (d) {
                d.payment_from = $('input[name=from_date]').val();
                d.payment_to = $('input[name=to_date]').val();
                d.payment_status = $('#payment_status option:selected').val();
            }
         },
         columns: [
                  {data: 'pay_id', name: 'pay_id', 'visible': false},
                  {data: 'DT_RowIndex', name: 'DT_RowIndex', orderable: false,searchable: false},
                  { data: 'name', name: 'name' },
                  { data: 'email', name: 'email'},
                  { data: 'orderid', name: 'orderid'},
                  { data: 'transaction_id', name: 'transaction_id'},
                  { data: 'amount', name: 'amount' },
                  { data: 'paymentmode', name: 'paymentmode' },
                  { data: 'payment_status', name: 'payment_status' },
                  { data: 'payment_date', name: 'payment_date' },
                  { data: 'source', name: 'source' },
                  { data: 'action', name: 'action', orderable: false},
               ],
        order: [[1, 'desc']]
      });
        }
        
        /*$('body').on('click', '#delete-payment', function ()
        {
        var payment_id = $(this).data("id");
        if(confirm("Are You sure want to delete !"))
        {
          $.ajax({
              type: "get",
              url: "/get-payment-list/delete/"+payment_id,
              success: function (data)
              {
              $('#paymentdetail').DataTable().ajax.reload()
              var oTable = $('#paymentdetail').dataTable(); 
              oTable.fnDraw(false);
              },
              error: function (data)
              {
                console.log('Error:', data);
              }
          });
        }
    });*/




$('#filter').click(function()
 {
  var from_date = $('#from_date').val();
  var to_date = $('#to_date').val();
  var payment_status = $('#payment_status').val();
  if(from_date !="" && to_date !="" || payment_status!="")
  {
   $('#paymentdetail').DataTable().destroy();
   load_data(from_date, to_date, payment_status);
  }
  else
  {
   alert('Both Date is required');
  }
 });

 $('#refresh').click(function()
 {
  $('#from_date').val('');
  $('#to_date').val('');
  $('#payment_status').val('');
  $('#from_date').val('');
  $('#paymentdetail').DataTable().destroy();
  load_data();
 });


});
</script>
@endsection