@extends('panel.layouts.app')
@section('page-title')
<title>
{{ LaraCore::setting('html_prefix') }} {{ (LaraCore::setting('html_prefix') != '') ? '|' : '' }} Period Bill Reports</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-8">
              <h3 class="box-title"><i class="fa fa-inr"></i> Period Bill Reports</h3>
            </div>
            <div class="col-md-4 text-right">
              <div class="box-tools box-tools-common custom-grid-icon">
                {{ Form::open(["url"=>route('wg.print.period.bill'),"method"=>"POST","target"=>"_blank"]) }}
                {{ Form::hidden('id','',['id'=>'billId']) }}
                {{ Form::hidden('template','',['id'=>'billTemplate']) }}
                {{ Form::close() }}
                @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>
                <div class="dropdown"><p href="javascript:void(0)" class="show-tooltip btn-action dropbtn" data-id="" id="printAll" title="Print" />
                  <span class="fa fa-print"></span>
                  <div class="dropdown-content template-default">
                    @foreach ($bill_templates as $key => $template)
                      @if (in_array($template->template_key, $selected_bill_template_array) && $set_templated_by_branch)
                        @if ($template->template_key == 'default')
                          <a class="{{$selected_bill_template_array[0] == $template->template_key ? '' : 'hide-template'}}" href="javascript:void(0)" data-template="{{$template->template_key}}" onclick="PrintSelectedBill(this)" data-id="period-bills-grid"><img src="assets/uploads/billtemplatelogo/print.png" alt="Logo" width="20" height="20"> {{$template->template_name}} Print</a>
                        @else
                          <a class="{{$selected_bill_template_array[0] == $template->template_key ? '' : 'hide-template'}}" href="javascript:void(0)" data-template="{{$template->template_key}}" onclick="PrintSelectedBill(this)" data-id="period-bills-grid"><img src="assets/uploads/billtemplatelogo/print.png" alt="Logo" width="20" height="20"> {{$template->template_name}} Print</a>
                        @endif
                      @elseif (!$set_templated_by_branch)
                        @if ($template->template_key == 'default')
                          <a class="{{$key == 0 ? '' : 'hide-template'}}" href="javascript:void(0)" data-template="{{$template->template_key}}" onclick="PrintSelectedBill(this)" data-id="period-bills-grid"><img src="assets/uploads/billtemplatelogo/print.png" alt="Logo" width="20" height="20"> {{$template->template_name}} Print</a>
                        @else
                          <a class="{{$key == 0 ? '' : 'hide-template'}}" href="javascript:void(0)" data-template="{{$template->template_key}}" onclick="PrintSelectedBill(this)" data-id="period-bills-grid"><img src="assets/uploads/billtemplatelogo/print.png" alt="Logo" width="20" height="20"> {{$template->template_name}} Print</a>
                        @endif
                      @endif
                    @endforeach
                    @if(count($selected_bill_template_array) > 1 && $set_templated_by_branch)
                      <a class="loadMoreButton" href="javascript:void(0)" onclick="loadMoreTemplate(this)" data-id="default">Load More</a>
                    @elseif (!$set_templated_by_branch)
                      <a class="loadMoreButton" href="javascript:void(0)" onclick="loadMoreTemplate(this)" data-id="default">Load More</a>
                    @endif
                  </div>  
                </div>
                @endif
                <a href="javascript:void(0)" class="btn btn-box-tool show-tooltip" onclick="ToggleDataTable('period-bills-grid')" title="Search"><i class="fa fa-search"></i></a>
                <a href="javascript:void(0)" class="btn btn-box-tool show-tooltip" title="Add Period Bill" onclick="openPeriodBillModel()"><i class="fa fa-plus"></i></a>
              </div>
            </div>
          </div>
          <div class="box-body">
            <div class="table-responsive">
             <table id="period-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="#period-bills-grid" /> 
                  @endif
                </th>
                <th>Client Code</th>
                <th>Client Name</th>
                <th>Start Date</th>
                <th>End Date</th>
                <th class="text-center">Bill Amt</th>
                <th class="text-center">Bill Amt Total</th>
                <th>Status</th>
                <th>Actions</th>
                <th class="text-center">Balance</th>
                <th>&nbsp;</th>
                <th>&nbsp;</th>
              </thead>
              <tbody>
              </tbody>
              <tfoot>
                <tr class="bg-color-foot-color">
                  <th colspan='5' class="border-style"> <b>Total Amount:</b></th>
                  <th class="border-style"></th>
                  <th class="border-style"></th>
                  <th colspan='2' class="border-style"></th>
                  <th class="border-style"></th>
                  <th colspan='2' class="border-style"></th>
                </tr>
              </tfoot>
            </table> 
          </div>
        </div>
      </div>
      <div class="bills_modal_div">
        <div class="edit_modal">
        </div>
        {{-- @include('panel.bills.pgenerate-bill', [@$data]) --}}
      </div>
      @include('common.modal.delete_confirm_modal',['entity' =>  'bills'])
    </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'))}}');
    initFileInput();
    initRichText();
    billsTable = $('#period-bills-grid').DataTable({
      'language': { "emptyTable": '{{LaraCore::setting('no_records')}}', "processing": "<i class='fa fa-spinner fa-spin fa-3x'></i>" },
      "aLengthMenu": [[10, 20, 30, 40, 50, -1], [10, 20, 30, 40, 50, 'All']],
      "order": [ 2, "asc" ],
      "stateSave": true,
      processing: true,
      serverSide: true,
      ajax: {
        url : '{{route("wg.post.period.bills")}}',
        data: function (d) {
          d._token = $('hidden[name=_token]').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: "20%"},
      {data: 'start_date', name: 'bills.start_date',width: "10%"},
      {data: 'end_last', name: 'bills.end_last',width: "10%"},
      {data: 'amount', name: 'bills.amount',width: "9%",className: 'text-right'},
      {data: 'grandtotal', name: 'bills.grandtotal',width: "9%",className: 'text-right'},
      {data: 'payment_status', name: 'bills.payment_status',width: "10%",searchable:false,orderable: false},
      {data: 'btn', name: 'btn',width: "15%",className: 'text-left',orderable: false},
      {data: 'balance', name: 'balance.amount',width: "9%",className: 'text-right'},
      {data: 'income', name: 'income', orderable:false,searchable:false,width: "5%",className: 'text-center'},
      {data: 'print', name: 'print', orderable:false,searchable:false,width: "5%",className: 'text-center'},
      ],
      '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['payment_status'];
        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;
        };

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

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

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

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

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

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

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

    $(document).on('click', '#payment_accountbill', function(e){
      var branch_id = $('#payment_accountbill_modal').find('#branch_id').val();
      var bill_id = $('#payment_accountbill_modal').find('#bill_id').val();
      var bill_amount = $('#payment_accountbill_modal').find('#bill_amount').val();
      var client_id = $('#payment_accountbill_modal').find('#client_id').val();

      $.ajax({
        type: "POST",
        url: '{{route('paid.bill.amount')}}',
        data: {'branch_id': branch_id, 'bill_id':bill_id, 'bill_amount':bill_amount, 'client_id':client_id},
        dataType: 'json',
        success: function (data) {
          billsTable.draw();
          $('#payment_accountbill_modal').modal('hide');
          DisplayMessages(data['message']);
        },
        error: function (jqXHR, exception) {
          var Response = jqXHR.responseText;          
          Response = $.parseJSON(Response);
          DisplayMessages(Response.message,'error');
        }
      });
    });

    $(document).on('click', '#delete_bills', function(e){
      var bills_ids = rows_selected;
      var formData = { bills_ids :bills_ids };
      var url = APP_URL+"/bills-delete";
      $.ajax({
        type: "POST",
        url: url,
        data: formData,
        dataType: 'json',
        success: function (data) {
          billsTable.draw();
          $('#delete_bills_modal').modal('hide');
          DisplayMessages(data['message']);
        },
        error: function (jqXHR, exception) {
          var Response = jqXHR.responseText;          
          Response = $.parseJSON(Response);
          DisplayMessages(Response.message,'error');
        }
      });
    });

    $(document).on('ifChanged', 'input[name^="check-item"]', function(event) {
      ele = event.currentTarget;
      var checked = ele.checked;
      var value = ele.value;
      if (value == 'debit_cash_memo' || value == 'text_invoice' || value == 'bill_copy') {
        if (checked == false) {
          $('#clientBillItemPreferenceModal').find('.'+value).css({'visibility':'hidden'});
        } else {
          $('#clientBillItemPreferenceModal').find('.'+value).css({'visibility':'visible'});
        }
      } else if (value == 'receiver' || value == 'center' || value == 'remark' || value == 'package_type' || value == 'carrier' || value == 'weight' || value == 'insurance') {
        var colspanVal = $('#clientBillItemPreferenceModal').find('.cols-class').prop("colspan");
        if (checked == false) {
          updatedColspanVal = colspanVal - 1;
          $('#clientBillItemPreferenceModal').find('.'+value).hide();
          $('#clientBillItemPreferenceModal').find('.cols-class').attr('colspan', updatedColspanVal);
        } else {
          updatedColspanVal = colspanVal + 1;
          $('#clientBillItemPreferenceModal').find('.'+value).show();
          $('#clientBillItemPreferenceModal').find('.cols-class').attr('colspan', updatedColspanVal);
        }
      } else {
        if (checked == false) {
          $('#clientBillItemPreferenceModal').find('.'+value).css({'display':'none'});
          if (value == 'bank_details') {
            $('#clientBillItemPreferenceModal').find('.payment_of_favor, .payment_due_date').addClass('width-100');
          }
        } else {
          $('#clientBillItemPreferenceModal').find('.'+value).css({'display':'block'});
          if (value == 'bank_details') {
            $('#clientBillItemPreferenceModal').find('.payment_of_favor, .payment_due_date').removeClass('width-100');
          }
        }
      }
    });
  });

$(document).on('hidden.bs.modal', '#bills_modal',function (event) { 
  $('.bills_modal_div .edit_modal').html('');
  var form = $("#bills_save");
  $(form)[0].reset();
  form.find('input[name="id"]').val('');
  $(form).find('.has-error').removeClass('has-error');
  $(form).find('.help-block').html('');
});

$(document).on('shown.bs.modal', '#bills_modal',function (event) { 
  var form = $("#bills_save");
  $(form)[0].reset();
  $('#bills_modal input:visible:enabled:first').focus();
  $(form).find('.has-error').removeClass('has-error');
  $(form).find('.help-block').html('');
});

function openPeriodBillModel(element){
  var client_id = $(element).attr('client-id');
  var bill_id = $(element).attr('bill-id');
  $.ajax({
    type: "POST",
    url: '{{route('wg.open.periodbill.model')}}',
    data: {
      'client_id':client_id,
      'bill_id':bill_id,
    },
    dataType: "html",
    success: function(res) {
      $('body').append(res);
      var selector = 'input[type="checkbox"].minimal, input[type="radio"].minimal';
      $('#wg_generate_period_bills_modal').find(selector).iCheck({
        checkboxClass: 'icheckbox_minimal-grey',
        radioClass: 'iradio_minimal-grey'
      });
      initSelect();
      $(".date_input").daterangepicker({
        singleDatePicker: true,
        autoUpdateInput: true,
        drops: "down",
        locale: {
          format: '{{AppHelper::dateFormatJS(LaraCore::setting('date_format'))}}',
        },
      });
    },
  }).done(function(result){
    $('#wg_generate_period_bills_modal').modal('show');
    closePeriodBillModel();
  });
}

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

function getPeriodBillAmount(){
  var client_id = $('#wg_period_bill_save').find('select[name=clientid]').val();
  var start_date = $('#wg_period_bill_save').find('input[name=start_date]').val();
  var end_date = $('#wg_period_bill_save').find('input[name=end_date]').val();
  $.ajax({
    type: "POST",
    url: '{{route('get.period.bill.amount')}}',
    data: {
      "client_id":client_id,
      "start_date":start_date,
      "end_date":end_date,
    },
    dataType: "json",
    success: function(res) {
      var bill_id = $('#wg_period_bill_save').find('input[name=bill_id]').val();
      if (bill_id == 'NULL' || bill_id == "") {
        $('#wg_period_bill_save').find('input[name=amount]').val(res.amount);
        $('#wg_period_bill_save').find('input[name=fchpercent]').val(res.fuel_charge);
      }
    },
  });
  return false;
}

function createIncomes(){  
  var form = $("#incomes_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();
      form.find('input[name="id"]').val('');
      var firstSelectClientVal = $('select[name="client_id"]').find('option:first').val();
      $('select[name="client_id"]').val(firstSelectClientVal).change();
      var firstSelectTypeVal = $('select[name="type"]').find('option:first').val();
      $('select[name="type"]').val(firstSelectTypeVal).change();
      $("#incomes_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 initFileInput(){
  file_inputs = $('input[type="file"]');
  if(file_inputs.length > 0){
    $.each(file_inputs, function(index, element) {
      file_input_name = $(this).attr('name');

      var file_input_src = "";
      var file_input_config = new Array();

      var input_src = $('input[name="'+file_input_name+'"]').data('src');

      if(input_src != "" && input_src !== undefined){
        var file_input_src = input_src.split(",");
        var input_src_names =  $('input[name="'+file_input_name+'"]').data('names');;
        var input_src_names_arr = input_src_names.split(",");
        $.each(file_input_src, function(index, element) {
          file_input_src[index] = APP_URL+'/assets/uploads/bills/'+file_input_src[index];
        });
        $.each(input_src_names_arr, function(i, e) {                                
          file_type = getFileType(file_input_src[i]);
          obj = { type: file_type, caption:  input_src_names_arr[i], showDelete: false, showZoom: true}
          file_input_config.push(obj);
        });
      }else{
        file_input_config.push({});
      }
      var file_input_options = getFileInputOptions();
      $.extend( file_input_options, {
        initialPreview: file_input_src, 
        initialPreviewConfig: file_input_config,
      });
      $(this).fileinput(file_input_options);

      var file_input_name = $(this).attr('name');
      $(this).on('filecleared', function(event) {
        var file_input_src = "";

        var file_input_options = getFileInputOptions();
        $.extend( file_input_options, {
          initialPreview: file_input_src, 
          initialPreviewConfig: [ {caption: "", filename: "", showDelete: false,  showZoom: true} ,]
        });
        $(this).fileinput('refresh',file_input_options);
        var input_name = file_input_name.replace('[]', '');                     
        $('input[name="'+input_name+'_token"]').val('default.jpg');
      });
    });         
  }
}

function getBillId(element){
  var id = $(element).attr('data-id');
  var template = $(element).attr('data-template');
  $('#billId').val(id);
  $('#billTemplate').val(template);
  $('#billId').parents('form').submit();
}

function PrintSelectedBill(element){
  var Id = $(element).attr('data-id');
  var template = $(element).attr('data-template');
  var ListTable = $('#'+Id);
  var ListTbody = $(ListTable).find('tbody'); 
  var CheckBoxes = $(ListTbody).find('input[type="checkbox"]');
  var Selected = $(ListTbody).find("input[type=checkbox]:checked").map(function () {return this.value;}).get().join(",");
  if(Selected==''){
    toastr.error('Please select atleast one receipt', 'Error !', { onHidden: function() {}});
  }else{
    $('#billId').val(Selected);
    $('#billTemplate').val(template);
    $('#billId').parents('form').submit();
  }
}

function saveWithoutGSTGeneratedPeriodBill(form){
  var Data = $(form).serialize();
  $.ajax({
    type: "POST",
    url: $(form).attr('action'),
    data: Data,
    dataType: "json",
    beforeSend: function(msg){
      $(".master-loader").show();
    },
    success: function(res) {
      var checkboxValue = $('#wg_generate_period_bills_modal').find('input[name="send_bill_email"]').prop('checked') == true;
      $("#wg_generate_period_bills_modal").modal('hide');
      $(".master-loader").fadeOut();
      if(res.status == 'success' && res.message == 'created'){
        toastr.success('Bill created successfully !', 'Success !', { onHidden: function() {} });
        if (checkboxValue == true) {
          toastr.success('Mail send successfully !', 'Success !', { onHidden: function() {} });
        }
      }else if(res.status == 'success' && res.message == 'updated'){
        toastr.success('Bill updated successfully !', 'Success !', { onHidden: function() {} });
        if (checkboxValue == true) {
          toastr.success('Mail send successfully !', 'Success !', { onHidden: function() {} });
        }
      }
      billsTable.draw(true);
    },
    error: function (jqXHR, exception) {
      $(".master-loader").fadeOut();
      var Response = jqXHR.responseText;
      ErrorBlock = $(form);
      Response = $.parseJSON(Response);
      DisplayErrorMessages(Response, ErrorBlock, 'input');
    }
  });
  return false;
}

function openIncomeModel(element){
  var clientId = $(element).attr('data-id');
  var billId = $(element).attr('bill-id');
  $.ajax({
    type: "POST",
    url: '{{route('open.income.model')}}',
    data: {'clientId':clientId, 'billId':billId},
    dataType: "html",
    beforeSend: function(msg){
      $(".master-loader").show();
    },
    success: function(res) {
      $(".master-loader").fadeOut( "slow" );
      $('body').append(res);
      initDate('{{AppHelper::dateFormatJS(LaraCore::setting('date_format'))}}');
      initDateRange('{{AppHelper::dateFormatJS(LaraCore::setting('date_format'))}}');
    },
    error: function (jqXHR, exception) {
      $(".master-loader").fadeOut( "slow" );
      var Response = jqXHR.responseText;
      ErrorBlock = $(form);
      Response = $.parseJSON(Response);
      DisplayErrorMessages(Response, ErrorBlock, 'input');
    }
  }).done(function(result){
    $('#incomes_modal').modal('show');
    closeIncomeModel();
  });
  return false;
}

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

function openConfirmModel(element){
  var bill_id = $(element).attr('bill-id');
  var bill_amount = $(element).attr('bill-amount');
  var client_id = $(element).attr('client-id');

  $.ajax({
    type: "POST",
    url: '{{route('open.confirm.model')}}',
    data: {
      "bill_id":bill_id,
      "bill_amount":bill_amount,
      "client_id":client_id
    },
    dataType: "html",
    success: function(res) {
      $('body').append(res);
    },
  }).done(function(result){
    $('#payment_accountbill_modal').modal('show');
    payment_accountbill_modal();
  });
}

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

function setDefaultBillItemPreferences(element){
  var client_id = $(element).attr('client-id');
  var bill_id = $(element).attr('data-id');
  $.ajax({
    type: "POST",
    url: '{{route('set.default.bill.item.preferences')}}',
    data: {
      "client_id":client_id, "bill_id":bill_id, "type":"domestic",
    },
    dataType: "html",
    success: function(res) {
      $('body').append(res);
      var selector = 'input[type="checkbox"].minimal, input[type="radio"].minimal';
      $('#clientBillItemPreferenceModal').find(selector).iCheck({
        checkboxClass: 'icheckbox_minimal-grey',
        radioClass: 'iradio_minimal-grey'
      });
    },
  }).done(function(result){
    $('#clientBillItemPreferenceModal').modal('show');
    clientBillItemPreferenceModal();
  });
}

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

function saveClientBillItemPreferences(form){
  var Selected = $("#client_bill_item_preference_form input[type=checkbox]:checked").map(function () {return this.value;}).get().join(",");
  $('#client_bill_item_preference_form').find('#selected_bill_item').val(Selected);
  var form = $("#client_bill_item_preference_form");
  var formData = $(form).serialize();
  var url = $(form).attr('action');
  
  $.ajax({
    type: "POST",
    url: $(form).attr('action'),
    data: formData,
    dataType: "json",
    success: function(res) {
      if(res.status=='success'){
      }
      DisplayMessages('Bill Item preferences are updated.');
    },
  });
  $('#clientBillItemPreferenceModal').modal('hide');

  var bill_id = $('#client_bill_item_preference_form').find('#bill_id').val();
  $('#billId').val(bill_id);
  $('#billTemplate').val('default');
  $('#billId').parents('form').submit();
  return false;
}

function loadMoreTemplate(element){
  var id = $(element).attr('data-id');
  var loadMoreButton = $('.template-'+id).find('.hide-template').removeClass('hide-template').addClass('.show-template');
  var hideLoadMoreButton = $('.template-'+id).find('.loadMoreButton').addClass('hide-template');
}

function unpaid_confirm_modal() {
    $('#unpaid_confirm_modal').modal({
        backdrop: 'static',
        keyboard: false
    });
}

function openUnpaidModel(element) {
    var bill_id = $(element).attr('bill-id');
    var bill_amount = $(element).attr('bill-amount');
    var client_id = $(element).attr('client-id');
    $.ajax({
        type: "POST",
        url: '{{route('open.wg.period.bills.unpaid.model')}}',
        data: {
            "bill_id": bill_id,
            "bill_amount": bill_amount,
            "client_id": client_id
        },
        dataType: "html",
        success: function (res) {
            $('body').append(res);
        },
    }).done(function (result) {
        $('#unpaid_confirm_modal').modal('show');
        unpaid_confirm_modal();
    });
}

$(document).on('click', '#markAsUnpaid', function (e) {
    var branch_id = $('#unpaid_confirm_modal').find('#branch_id').val();
    var bill_id = $('#unpaid_confirm_modal').find('#bill_id').val();
    var bill_amount = $('#unpaid_confirm_modal').find('#bill_amount').val();
    var client_id = $('#unpaid_confirm_modal').find('#client_id').val();
    $.ajax({
        type: "POST",
        url: '{{ route('unpaid.wg.period.bills.amount') }}',
        data: {
            'branch_id': branch_id,
            'bill_id': bill_id,
            'bill_amount': bill_amount,
            'client_id': client_id
        },
        dataType: 'json',
        success: function (data) {
            billsTable.draw();
            $('#unpaid_confirm_modal').modal('hide');
            DisplayMessages(data['message']);
        },
        error: function (jqXHR, exception) {
            var Response = jqXHR.responseText;
            Response = $.parseJSON(Response);
            DisplayMessages(Response.message, 'error');
        }
    });
});
</script>
@stop