@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">
       @include('admin.customer.report.report-partial')
        <div class="tab-content">
            <div class="tab-pane active" id="cashout" role="tabpanel">
                <div class="col-md-12">
                    <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">
                            <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>            
            <div class="tab-pane" id="extension" role="tabpanel">
                <div class="col-md-12">
                    <h5>Extension</h5>
                    <div class="p-3">
                        <table id="custom_table1" class="table table-striped table-bordered">
                            <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>
            <div class="tab-pane" id="payment_ext" role="tabpanel">
                <div class="col-md-12">
                    <h5>Payment Extension</h5>
                    <div class="p-3">
                        <table id="custom_table1" class="table table-striped table-bordered">
                            <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>
            <div class="tab-pane" id="payments" role="tabpanel">
                <div class="col-md-12">
                    <h5>Payments</h5>
                    <div class="p-3">
                        <table id="custom_table1" class="table table-striped table-bordered">
                            <thead>
                                <th>#</th>
                                <th>userName</th>
                                <th>Receipt No</th>
                                <th>Price</th>
                                <th>Expiration</th>
                                <th>Paid At</th>
                                <th>Remark</th>
                                <th>Comment</th>
                            </thead>
                            <tbody>
                                                                @foreach($invoices as $inv)
                                <tr>
                                    <td>{{ ++$index3 }}</td>
                                    <td>{{ $inv->username }}</td> 
                                    <td>{{ $inv->receipt_no }}</td> 
                                    <td>{{ number_format($inv->price) }}</td> 
                                    <td>{{ formatYmd($inv->expiration) }}</td> 
                                    <td>{{ formatYmd($inv->paid) }}</td>
                                    <td>{{ $inv->remark }}</td>
                                    <td>{{ $inv->comment }}</td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            <div class="tab-pane" id="allpayments" role="tabpanel">
                <div class="col-md-12">
                    <h5>All Payments</h5>
                    <div class="p-3">
                        <table id="custom_table1" class="table table-striped table-bordered">
                            <thead>
                                <th>#</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>
                                                                @foreach($allpayments as $p)
                                <tr>
                                    <td>{{ ++$index3 }}</td>
                                    <td>{{ $p->username }}</td> 
                                    <td>{{ $p->old_expiration != null ? formatYmd($p->old_expiration) : '-'}}</td> 
                                    <td>{{ $p->ext_date != null ? formatYmd($p->ext_date) : '-'}}</td>
                                    <td>{{ $p->extension }}
                                        @if(count($p->extensions) > 1)
                                            <br><small><a href="#" class="ext-list" data-id="{{$p->id}}">Show List</a></small>
                                        @endif
                                    </td> 
                                    <td><span style="{{$p->is_auto == 1 ? 'color:red;' : ''}}">{{ $p->free_extension }}</span></td>
                                    <td>{{ $p->ext_expiry_date != null ? formatYmd($p->ext_expiry_date) : '-'}}</td>
                                    <td>{{ $p->quantity }}</td>
                                    <td>{{ $p->new_expiration != null ? formatYmd($p->new_expiration) : '-'}}</td>
                                    <td>{{ $p->paid_date != null ? formatYmd($p->paid_date) : '-'}}</td>  
                                    <td>{{ $p->paid_status }}</td>
                                    <td>
                                        @if(\Auth::check() && \Auth::user()->role && \Auth::user()->role->roleName->role == 'admin')
                                            <a href="#" title="Edit" class="edit-btn" data-id="{{$p->id}}" data-ext="{{$p->extension}}" data-freeext="{{$p->free_extension}}" data-extdate="{{$p->ext_date}}" data-extexpiry="{{$p->ext_expiry_date}}" data-newexp="{{$p->new_expiration}}"><i class="fa fa-fw fa-edit"></i></a>
                                        @if($p->paid_status == 'unpaid' && $p->ext_date != null)
                                        <a onclick="removeAllpayExt(`{{route('customer.remove.allpayext', $p->id)}}`)" title="Remove Extension" class="a-red"><i class="fa fa-fw fa-wrench"></i></a>
                                        @endif
                                        @if($p->paid_status == 'paid' && $p->isadmin == 1)
                                        <a onclick="removePayment(`{{route('customer.remove.allpayment', $p->id)}}`,`{{$p->ext_date}}`)" title="Remove Payment" class="a-red"><i class="fa fa-fw fa-trash-alt"></i></a>
                                        @endif
                                        @endif
                                    </td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </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>
    var dialog;
    var dialog1;
    var dialog2;
   $(document).ready(function(){

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

       $('.table').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() {
      }
    });
    
    $('.edit-btn').click(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" );
    });
    $('.extfield').on('change',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('');
        }
    });
     $('.extdays').on('change',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',
                },
            }
        });
    }
    $('.ext-list').on('click',function(){
	  var up = $('#ext_list').empty();
        var id = $(this).data('id');
        var url = "report/fetch-extlist/"+id;
        axios.get(url).then((res)=>{
            console.log(res);
            up.html(res.data);
            dialog2.dialog( "open" );
        });
    });
</script>
    
@endpush