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

@section('content')
<div class="splynx_top_nav">
    <div style="float: left">
        <ul class="splynx_breadcrumbs">
            <li><span>Report</span></li>
        </ul>
    </div>
    <div class="clearfix"></div>
</div>
<div class="spl-page-panel">   
    <div class="row">
        <div class="col-md-12">
       @include('admin.customer.report.report-partial')
        <div class="tab-content">
            <div class="tab-pane active" id="cashout" role="tabpanel">
                    <h5>Cash Out
                    <button class="btn btn-success btn-xs margin-bottom-sm pull-right" id="cashout_pdf_btn"><i class="fa fa-fw fa-file-pdf"></i>PDF</button>
                    </h5>
                    <div class="p-3">
                        <table id="custom_table1" class="table table-striped table-bordered dttable">
                            <thead>
                                <th>#</th>
                                <th>Description</th>
                                <th>Cash Out Type</th>
                                <th>Amount</th>
                                <th>Date</th>
                            </thead>
                            <tbody>
                                                                @foreach($cashouts as $cashout)
                                <tr>
                                    <td>{{++$index}}</td>
                                    <td>{{ $cashout->description }}</td> 
                                    <td>{{ $cashout->cash_out_type }}</td> 
                                    <td>{{ $cashout->amount }}</td> 
                                    <td>{{ formatYmd($cashout->created_at) }}</td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>            
            <div class="tab-pane" id="extension" role="tabpanel">
                    <h5>Extension</h5>
                    <div class="p-3">
                        <table id="custom_table1" class="table table-striped table-bordered dttable">
                            <thead>
                                <th>#</th>
                                <th>userName</th>
                                <th>Origin Expiration</th>
                                <th>New Expiration</th>
                                <th>Extension</th>
                                <th>Ext Type</th>
                                <th>Paid Status</th>
                                <th>Paid At</th>
                            </thead>
                            <tbody>
                                                                @foreach($extensions as $extension)
                                    @if ($extension->payment_ext == 'true') @continue @endif
                                <tr>
                                    <td>{{++$index1}}</td>
                                    <td>{{ $extension->username }}</td> 
                                    <td>{{ $extension->old_expiration != null ? formatYmd($extension->old_expiration) : '-'}}</td>
                                    <td>{{ $extension->new_expiration != null ? formatYmd($extension->new_expiration) : '-'}}</td>
                                    <td>{{ $extension->extension }}</td>
                                            
                                    <td><label class="status-label label-ticket-status-2">normal</label></td>     
                                    <td>{{ $extension->paid_status }}</td>
                                    <td>{{ $extension->paid_status == 'paid' ? formatYmd($extension->updated_at) : '----' }}</td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
            </div>
            <div class="tab-pane" id="payment_ext" role="tabpanel">
                    <h5>Payment Extension</h5>
                    <div class="p-3">
                        <table id="custom_table1" class="table table-striped table-bordered dttable">
                            <thead>
                                <th>#</th>
                                <th>userName</th>
                                <th>Origin Expiration</th>
                                <th>New Expiration</th>
                                <th>Extension</th>
                                <th>Ext Type</th>
                                <th>Paid Status</th>
                                <th>Paid At</th>
                            </thead>
                            <tbody>
                                                                @foreach($extensions as $extension)
                                    @if ($extension->payment_ext == 'false') @continue @endif
                                <tr>
                                    <td>{{++$index2}}</td>
                                    <td>{{ $extension->username }}</td> 
                                    <td>{{ formatYmd($extension->old_expiration) }}</td>
                                    <td>{{ formatYmd($extension->new_expiration) }}</td>
                                    <td>{{ $extension->extension }}</td>
                                            
                                    <td><label class="status-label label-ticket-status-3">payment</label></td>     
                                    <td>{{ $extension->paid_status }}</td>
                                    <td>{{ $extension->paid_status == 'paid' ? formatYmd($extension->updated_at) : '----' }}</td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
            </div>
            <div class="tab-pane" id="payments" role="tabpanel">
                    <h5>Payments</h5>
                    <div class="p-3">
                        <table id="inv_table" class="table table-striped table-bordered" style="width:100%;">
                            <thead>
                                <th>#</th>
                                <th>userName</th>
                                <th>Receipt No</th>
                                <th>Price</th>
                                <th>Expiration</th>
                                <th>Paid On</th>
                                <th>Remark</th>
                                <th>Comment</th>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>
                    </div>
            </div>
            <div class="tab-pane" id="allpayments" role="tabpanel">
                <div class="row">
                    <div class="col-lg-6"><h5>All Payments</h5></div>
                    @if(\Auth::check() && \Auth::user()->role && \Auth::user()->role->roleName->role == 'admin')
                    <div class="col-lg-6 text-right"><button type="button" class="btn btn-info" data-toggle="modal" data-target="#bulk_edit"><i class="fa fa-edit"></i> Update Free Extension</button></div>
                    @endif
                </div>
                <div id="bulk_edit" class="edit-modal modal fade" role="dialog">
                    <div class="modal-dialog modal-sm">
                    <!-- Modal content-->
                    <div class="modal-content">
                      <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                        <div class="delete-icon"></div>
                      </div>
                      <div class="modal-body text-center">
                        <h4 class="modal-heading">Are You Sure ?</h4>
                        <p>Do you really want to proceed with these records?</p>
                      </div>
                      <div class="modal-footer">
                        <form class="form-horizontal" role="form" action="{{route('customer.report.updatefreeext')}}" method="POST" id = "bulk_edit_form">
                            @csrf
                          <button type="reset" class="btn btn-info" data-dismiss="modal">No</button>
                          <button type="submit" class="btn btn-danger">Yes</button>
                        </form>
                      </div>
                    </div>
                  </div>
                </div>
                <br>
                <table id="pay_table" class="table table-striped table-bordered" style="width:100%;">
                    <thead>
                        <th><div class="inline" style="display:inline-block;">
                          <input id="checkboxAll" type="checkbox" class="custom-checkbox filled-in" name="checked[]" value="all">
                          <label for="checkboxAll"></label>
                        </div>#</th>
                        <th>ID</th>
                        <th>Actual ID</th>
                        <th>User Name</th>
                        <th>Old Expiration</th>
                        <th>Ext Date</th>
                        <th>Ext</th>
                        <th>Free Ext</th>
                        <th>Ext Expiry</th>
                        <th>Quantity</th>
                        <th>New Expiration</th>
                        <th>Paid At</th>
                        <th>Status</th>
                        <th>Action</th>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
</div>
<div id="ext_list" title="Extension List">
    
</div>
<div id="download-form" title="Download as PDF">
  <form>
    <fieldset>
        <div class="form-group">
            <label for="download_date_from">From</label>
            <input type="text" name="download_date_from" id="download_date_from" class="text ui-widget-content ui-corner-all download_date" style="width:100%;">
            <span class="fa fa-fw fa-calendar input-suff-span"></span>
        </div>

        <div class="form-group">
            <label for="download_date_to">To</label>
            <input type="text" name="download_date_to" id="download_date_to" class="text ui-widget-content ui-corner-all download_date" style="width:100%;">
            <span class="fa fa-fw fa-calendar input-suff-span"></span>
        </div>
        <div class="form-group">
            <label for="category_type">Category Type</label>
            <select name="category_type" id="category_type" class="select2 ui-widget-content ui-corner-all" style="width:100%;">
                    <option value="all">All</option>
                    <option value="Subs">Subs</option>
                    @foreach($cateogory_types as $t)
                    <option value="{{$t->type}}">{{$t->type}}</option>
                    @endforeach
            </select>
        </div>
        <div class="form-group">
            <label for="payment_type">Payment Type</label>
            <select name="payment_type" class="select2 ui-widget-content ui-corner-all" style="width:100%;" id="payment_type">
                    <option value="all">All</option>
                    @foreach($paymethods as $p)
                    <option value="{{$p->paymethod}}">{{$p->paymethod}}</option>
                    @endforeach
            </select>
        </div>

      <!-- Allow form submission with keyboard without duplicating the dialog button -->
      <input type="submit" tabindex="-1" style="position:absolute; top:-1000px">
    </fieldset>
  </form>
</div>
<div id="editpaymentForm" title="Payment Edit">
  <form method="POST" action="{{ route('customer.updatepayment') }}">
      @csrf
    <fieldset>
        <input type="hidden" name="id" value="">
        <div class="form-group">
            <label for="ext_date">Extension Date</label>
            <input type="text" name="ext_date" class="text ui-widget-content ui-corner-all ext_date extfield" autocomplete="off" style="width:100%;">
            <span class="fa fa-fw fa-calendar input-suff-span"></span>
        </div>
        <div class="form-group">
            <label for="extension">Extension Days</label>
            <input type="number" name="extension" class="text ui-widget-content ui-corner-all extdays" style="width:100%;">
        </div>
        <div class="form-group">
            <label for="free_extension">Free Extension Days</label>
            <input type="number" name="free_extension" class="text ui-widget-content ui-corner-all extdays" style="width:100%;">
        </div>
        <div class="form-group">
            <label for="ext_expiry_date">Extension Expiry Date</label>
            <input type="text" name="ext_expiry_date" class="text ui-widget-content ui-corner-all ext_date extfield" autocomplete="off"  style="width:100%;">
            <span class="fa fa-fw fa-calendar input-suff-span"></span>
        </div>
        <div class="form-group">
            <label for="new_expiration">New Expiration</label>
            <input type="text" name="new_expiration" class="text ui-widget-content ui-corner-all ext_date" autocomplete="off" style="width:100%;">
            <span class="fa fa-fw fa-calendar input-suff-span"></span>
        </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

@push('js')
<script>
   $(document).ready(function(){
      var table = $('#pay_table').DataTable({
          processing: true,
          serverSide: true,
          stateSave: true,
          pageLength: 50,
          ajax: '{{ route("customer.allpayments") }}',
          language: {
            searchPlaceholder: "Search..."
          },
          columns: [
              {data: 'id', name: 'id', searchable : false,orderable : false},
              {data: 'DT_RowIndex', name: 'DT_RowIndex', searchable : false,orderable : false},
              {data : 'allpaymentid', name : 'allpaymentid'},
              {data : 'username', name : 'all_payments.username'},
              {data : 'oldexpiry', name : 'all_payments.old_expiration'},
              {data : 'extdate', name : 'all_payments.ext_date'},
              {data : 'ext', name : 'all_payments.extension'},
              {data : 'freeext', name : 'all_payments.free_extension'},
              {data : 'extexpiry', name : 'all_payments.ext_expiry_date'},
              {data : 'quantity', name : 'all_payments.quantity'},
              {data : 'newexpiry', name : 'all_payments.new_expiration'},
              {data : 'paid', name : 'all_payments.paid_date'},
              {data : 'status', name : 'status'},
              {data : 'action', name : 'action', searchable : false, orderable : false}
          ],
          dom : 'lBfrtip',
          buttons : [
            'csv','excel','pdf','print','colvis'
          ],
          order : [[0,'ASC']]
      });
      var durl = $(location).attr('href');
      var table1 = $('#inv_table').DataTable({
          processing: true,
          serverSide: true,
          stateSave: true,
          pageLength: 50,
          ajax: durl,
          language: {
            searchPlaceholder: "Search..."
          },
          columns: [
              {data: 'DT_RowIndex', name: 'DT_RowIndex', searchable : false,orderable : false},
              {data : 'username', name : 'username'},
              {data : 'receipt', name : 'receipt'},
              {data : 'price', name : 'price'},
              {data : 'expiry', name : 'expiry'},
              {data : 'paid', name : 'paid'},
              {data : 'remark', name : 'remark'},
              {data : 'comment', name : 'comment'},
          ],
          dom : 'lBfrtip',
          buttons : [
            'csv','excel','pdf','print','colvis'
          ],
          order : [[0,'ASC']]
      });
    var dialog;
    var dialog1;
    var dialog2;

       $('.select2').select2();

       $('.dttable').dataTable({
             "pageLength": 50, 
             'stateSave': true      
       });

       $('#cashout_pdf_btn').click(function(){
        dialog.dialog( "open" );
            
       });

       $( ".download_date" ).datepicker({
            dateFormat : 'yy-mm-dd'
        }).datepicker("setDate", 'd');
        
         $( ".ext_date" ).datepicker({
            dateFormat : 'yy-mm-dd'
        });
   });
   function download(){
        var date_from = dialog.find('input#download_date_from').val();
        var date_to = dialog.find('input#download_date_to').val();
        var type = dialog.find('select#category_type').val();
        var paymethod = dialog.find('select#payment_type').val();
        var data = '?date_from=' + date_from + '&date_to=' + date_to +'&type=' + type + '&paymethod=' + paymethod;
        var url = "{{route('customer.report.download')}}" + data;
        dialog.dialog( "close" );
        window.open(url);
   }
   dialog2 = $( "#ext_list" ).dialog({
      autoOpen: false,
      height: 300,
      width: 350,
      modal: true,
      buttons: {
      },
      close: function() {
      }
    });
   dialog = $( "#download-form" ).dialog({
      autoOpen: false,
      height: 300,
      width: 350,
      modal: true,
      buttons: {
        "Download": download,
        Cancel: function() {
          dialog.dialog( "close" );
        }
      },
      close: function() {
      }
    });
    dialog1 = $( "#editpaymentForm" ).dialog({
      autoOpen: false,
      height: 300,
      width: 350,
      modal: true,
      buttons: {
        
      },
      close: function() {
      }
    });
    
    $('body').on('click','.pay-edit-btn', function(){
        var ext = $(this).data('ext');
        dialog1.find('input[name=extension]').val(ext);
        var freeext = $(this).data('freeext');
        dialog1.find('input[name=free_extension]').val(freeext);
        var extdate = $(this).data('extdate');
        dialog1.find('input[name=ext_date]').val(extdate);
        var extexpiry = $(this).data('extexpiry');
        dialog1.find('input[name=ext_expiry_date]').val(extexpiry);
        var id = $(this).data('id');
        dialog1.find('input[name=id]').val(id);
        var id = $(this).data('id');
        dialog1.find('input[name=id]').val(id);
        var newexp = $(this).data('newexp');
        dialog1.find('input[name=new_expiration]').val(newexp);
        dialog1.dialog( "open" );
    });
    // $('body').on('change','.extfield', function(){
    //     var extdate = dialog1.find('input[name=ext_date]').val();
    //     var extexpiry = dialog1.find('input[name=ext_expiry_date]').val();
    //     var freeext = dialog1.find('input[name=free_extension]').val();
    //     // console.log(extdate);
    //     if(extdate && extexpiry){
    //         // console.log(1);
    //         var days = new Date(Date.parse(extexpiry) - Date.parse(extdate)) / (1000 * 60 * 60 * 24);
    //         var actual = Math.round(days);
    //         if(parseInt(freeext)){
    //             actual = Math.round(days)-parseInt(freeext);
    //         }
    //         dialog1.find('input[name=extension]').val(actual);
    //         dialog1.find('input[name=new_expiration]').val('');
    //     }
    // });
    //  $('body').on('change','.extdays',function(){
    //     var extdate = dialog1.find('input[name=ext_date]').val();
    //     var ext = dialog1.find('input[name=extension]').val();
    //     var freeext = dialog1.find('input[name=free_extension]').val();
    //     var extexpiry = dialog1.find('input[name=ext_expiry_date]').val();
    //     if(extdate){
    //         var days = 0;
    //         if(ext){
    //           days = parseInt(ext);
    //         }
    //         if(freeext){
    //           days = parseInt(freeext);
    //         }
    //         if(ext && freeext){
    //          days = parseInt(ext)+parseInt(freeext);
    //         }
    //         // console.log(days);
    //         var newdate = extdate;
    //         if(days && days != 0 && days != ''){
    //             newdate = new Date(new Date(extdate).getTime()+(days*86400000));
    //             var dd = ("0" + newdate.getDate()).slice(-2);
    //             var mm = ("0" + (newdate.getMonth() + 1)).slice(-2)
    //             var y = newdate.getFullYear();
                
    //             var newdate = y + '-'+ mm + '-'+ dd;
    //         }
    //         dialog1.find('input[name=ext_expiry_date]').val(newdate);
    //         dialog1.find('input[name=new_expiration]').val('');
    //     }
    // });
    function removeAllpayExt(link){
        $.confirm({
            title: "Remove Extension",
            content: 'Are you sure to delete this extension?',
            buttons: {
                OK: {
                    text: 'OK',
                    action: function() {
                        axios.post(link).then((res) => {
                            if (res.status == 200) {
                            toastr.success('Extension removed successfully');
                            }
                            else {
                                toastr.error('Error in deletion');
                            }
                            location.reload();
                        }).catch(function (error) {
                              console.log(error);
                        });
                    },
                },
                close: {
                    text: 'Cancel',
                },
            }
        });
    }
     function removePayment(link,ext){
        if(ext > 0){
          toastr.warning('Delete extension first.');
          return 1;
        }
        $.confirm({
            title: "Remove Payment",
            content: 'Are you sure to delete this item?',
            buttons: {
                OK: {
                    text: 'OK',
                    action: function() {
                        axios.post(link).then((res) => {
                            if (res.status == 200) {
                            toastr.success('Payment removed successfully');
                            }
                            else {
                                toastr.error('Error in deletion');
                            }
                            location.reload();
                        }).catch(function (error) {
                              console.log(error);
                        });
                    },
                },
                close: {
                    text: 'Cancel',
                },
            }
        });
    }
    $('body').on('click','.ext-list',function(){
	  var up = $('#ext_list').empty();
        var id = $(this).data('id');
        console.log(id);
        var url = "report/fetch-extlist/"+id;
        axios.get(url).then((res)=>{
            console.log(res);
            up.html(res.data);
            dialog2.dialog( "open" );
        });
    });
</script>
    
@endpush