@extends('panel.layouts.app')
@section('page-title')
<title>
{{ LaraCore::setting('html_prefix') }} {{ (LaraCore::setting('html_prefix') != '') ? '|' : '' }} Bill Report Status</title>
@stop
@section('content')
<div class="content-wrapper">
  <div class="row">
    <div class="col-md-1"></div>
    <div class="col-md-10">
      <section class="content">
        <div class="box box-default">
          <div class="row box-header with-border">
            <div class="col-md-4">
              <h3 class="box-title"><i class="fa fa-inr"></i> Bill Report Status</h3>
            </div>
            <div class="col-md-4">
              {{ Form::select( "current_month", $month, $current_month, [ 'class' => 'form-control filter', ] ) }}
            </div>
            <div class="col-md-4 text-right">
              <div class="box-tools box-tools-common custom-grid-icon">
                @if(LaraCore::canOrNot('delete_bills'))
                <a href="javascript:void(0)" class="btn btn-box-tool show-tooltip" data-toggle="modal" data-target="#delete_bills_modal"  title="Delete selected items" id="deleteAll" name="remove_bills">
                  <i class="fa fa-trash"></i>
                </a>
                @endif
                <a href="javascript:void(0)" class="btn btn-box-tool show-tooltip" onclick="ToggleDataTable('bills-grid')" title="Search"><i class="fa fa-search"></i></a>
              </div>
            </div>
          </div>
          <div class="box-body">
            <div class="table-responsive">
             <table id="bills-grid" class="table table-bordered table-hover display">
              <thead>
                <th class="text-center">
                  @if(LaraCore::canOrNot('delete_bills'))
                  <input name="select_all" type="checkbox"  class="minimal" id="bulk_delete" data-scope="#bills-grid" /> 
                  @endif
                </th>
                <th>Client Code</th>
                <th>Client Name</th>
                <th class="text-center">Bill Amt Total</th>
                <th>Action</th>
                <th>Pending Amount</th>
                <th>Balance</th>
              </thead>
              <tbody>
              </tbody>
              <tfoot>
                <tr class="bg-color-foot-color">
                  <th colspan="3" class="border-style"> <b>Total Amount:</b></th>
                  <th class="border-style"></th>
                  <th class="border-style"></th>
                  <th class="border-style"></th>
                  <th class="border-style"></th>
                </tr>
              </tfoot>
            </table> 
          </div>
        </div>
      </div>
      <div class="bills_modal_div">
        <div class="edit_modal">
        </div>
        {{-- @include('panel.bills.create', [@$data]) --}}
      </div>
      @include('common.modal.delete_confirm_modal',['entity' =>  'bills'])
      @include('common.modal.multiple_bill_generate_confirm_model')
    </section>
  </div>
  <div class="col-md-1"></div>
</div>
</div>
@stop
@section('custom-scripts')
<script type="text/javascript">
  var rows_selected  = "";
  $(document).ready(function () {
    initDate('{{AppHelper::dateFormatJS(LaraCore::setting('date_format'))}}');
    initDateRange('{{AppHelper::dateFormatJS(LaraCore::setting('date_format'))}}');
    billsTable = $('#bills-grid').DataTable({
      'language': { "emptyTable": '{{LaraCore::setting('no_records')}}', "processing": "<i class='fa fa-spinner fa-spin fa-3x'></i>" },
      "aLengthMenu": [[-1,10, 20, 30, 40, 50], ['All',10, 20, 30, 40, 50]],
      "order": [ 2, "asc" ],
      processing: true,
      serverSide: true,
      ajax: {
        url : '{{route("bill.report.list")}}',
        data: function (d) {
          d._token = $('hidden[name=_token]').val();
          d.current_month = $('select[name=current_month]').val();
        },
        type: 'POST',
      },
      columns: [
      {data: 'bulk_delete', name: 'bulk_delete', orderable: false, searchable: false, width: "4%", className: 'text-center', visible: '{{LaraCore::canOrNot("delete_bills")}}'},
      {data: 'id', name: 'clients.id',visible: true,searchable: false,width: "5%"},
      {data: 'name', name: 'clients.name',width: "25%"},
      {data: 'grandtotal', name: 'bills.grandtotal', width: "10%", className: 'text-right'},
      {data: 'btn', name: 'btn', orderable: false, searchable: false, width: "10%", className: 'text-left'},
      {data: 'pending_amount', name: 'pending_amount', searchable: false, width: "10%", className: 'text-right'},
      {data: 'balance', name: 'balance', searchable: false, width: "10%",className: 'text-right'},
      ],
      'rowCallback': function(row, data, dataIndex){
        var rowId = data['id'];
        if($.inArray(rowId, rows_selected) !== -1){
          $(row).find('.entity_chkbox').prop('checked', true);
          $(row).addClass('selected');
        }
        var paymentStatus = data['paymentStatus'];
        if (paymentStatus == "<label class='text-green'>Paid</label>") {
          $(row).addClass('sendSms');
        }
      },
      footerCallback: function (row, data, start, end, display){
        var api = this.api(), data;
        var intVal = function ( i ) {
          return typeof i === 'string' ?
          i.replace(/[\$,]/g, '')*1 :
          typeof i === 'number' ?
          i : 0;
        };

        grandtotal = api
        .column(3)
        .data()
        .reduce( function (a, b) {
          return intVal(a) + intVal(b);
        }, 0 );

        $( api.column(3).footer() ).html(
          Number(grandtotal).toLocaleString('en')
          );

        pending_amount = api
        .column(5)
        .data()
        .reduce( function (a, b) {
          return intVal(a) + intVal(b);
        }, 0 );

        $( api.column(5).footer() ).html(
          Number(pending_amount).toLocaleString('en')
          );

        balance = api
        .column(6)
        .data()
        .reduce( function (a, b) {
          return intVal(a) + intVal(b);
        }, 0 );

        $( api.column(6).footer() ).html(
          Number(balance).toLocaleString('en')
          );
      },
    });
    initSelectAll('#bills-grid', billsTable);

    $(document).on('click', 'button[name="create_received_amount"]', function (e) {
      e.preventDefault();
      createReceivedAmount();
    });
  });

$( ".filter" ).change(function(e) {
  e.preventDefault();
  billsTable.draw();
});

function createReceivedAmount(){  
  var form = $("#received_amount_save");
  var formData = $(form).serialize();
  var url = $(form).attr('action');
  var id = form.find('input[name="id"]').val();       
  $(form).find('.has-error').removeClass('has-error');
  $(form).find('.help-block').html('');
  var type = "POST";
  var options = {
    target: '',
    url: url,
    type: type,
    success: function(data) {
      $(form)[0].reset();
      $("#received_amount_modal").modal('hide');
      billsTable.draw(true);
      DisplayMessages(data['message']);
      // refreshHeader();
    },
    error: function (jqXHR, exception) {
      var Response = jqXHR.responseText;
      ErrorBlock = $(form);
      Response = $.parseJSON(Response);
      DisplayErrorMessages(Response, ErrorBlock, 'input');
    }
  }
  $(form).ajaxSubmit(options);
}

function openReceivedAmountModel(element){
  var clientId = $(element).attr('client-id');
  var billId = $(element).attr('bill-id');

  $.ajax({
    type: "POST",
    url: '{{route('open.received.amount.model')}}',
    data: {'clientId':clientId, 'billId':billId},
    dataType: "html",
    beforeSend: function(msg){
      $(".master-loader").show();
    },
    success: function(res) {
      $(".master-loader").fadeOut( "slow" );
      $('body').append(res);
    },
    error: function (jqXHR, exception) {
      $(".master-loader").fadeOut( "slow" );
      var Response = jqXHR.responseText;
      ErrorBlock = $(form);
      Response = $.parseJSON(Response);
      DisplayErrorMessages(Response, ErrorBlock, 'input');
    }
  }).done(function(result){
    $('#received_amount_modal').modal({'show':true, 'backdrop': 'static', 'keyboard':false});
    closeReceivedAmountModel();
  });
  return false;
}

function closeReceivedAmountModel(){
  $('#received_amount_modal').on('hidden.bs.modal', function () {
    $('#received_amount_modal').remove();
  });
}

</script>
@stop