@extends('panel.layouts.app')
@section('page-title')
<title>
{{ LaraCore::setting('html_prefix') }} {{ (LaraCore::setting('html_prefix') != '') ? '|' : '' }} Manage Accounts</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="box-header with-border">
            <i class="fa fa-inr"></i>
            <h3 class="box-title">Manage Accounts</h3>
            <div class="box-tools box-tools-common pull-right">
              <a href="javascript:void(0)" class="btn btn-box-tool show-tooltip" onclick="ToggleDataTable('accountbill-grid')" title="Search"><i class="fa fa-search"></i></a>
            </div>
          </div>
          <div class="box-body">
            <div class="table-responsive">
              <table id="accountbill-grid" class="table table-bordered table-hover display">
                <thead>
                  <th>&nbsp;</th>
                  <th>Client</th>
                  <th>Email</th>
                  <th>Balance</th>
                </thead>
                <tbody>
                </tbody>
              </table>
            </div>
          </div>
        </div>
        <script id="details-template" type="text/x-handlebars-template">
          <div class="control-label"><h4><i class="fa fa-inr"></i>&nbsp;Bills</h4></div>
          <div class="table-responsive">
            <table class='table table-bordered table-hover details-table' id='posts-@{{id}}' width="100%">
              <thead>
                <tr>
                  <th style="height:30px">Month</th>
                  <th style="height:30px">Amount</th>
                  <th style="height:30px">&nbsp;</th>
                </tr>
              </thead>
              <tfoot>
                <tr>
                  <th> <b>Total :</b></th>
                  <th></th>
                  <th></th>
                </tr>
              </tfoot>
            </table>
          </div>
        </script>
        <div class="incomes_modal_div">
          <div class="edit_modal">
          </div>
          {{-- @include('panel.accountbill.create', [@$data]) --}}
        </div>
        @include('common.modal.delete_confirm_modal',['entity' =>  'accountbill'])
      </section>
    </div>
    <div class="col-md-1"></div>
  </div>
</div>
@stop
@section('custom-scripts')
<script src="{{ laracore_assets('dist/js/handlebars.js') }}"></script>
<script type="text/javascript">
  var AccountBillTable ='';
  $(document).ready(function () {
    initDate('{{AppHelper::dateFormatJS(LaraCore::setting('date_format'))}}');
    initDateRange('{{AppHelper::dateFormatJS(LaraCore::setting('date_format'))}}');
    AccountBillTable = $('#accountbill-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], [10, 20, 30, 40, 50]],
      "order": [ 0, "desc" ],
      processing: true,
      serverSide: true,
      ajax: {
        url : '{{route("post.bill.payment")}}',
        type: 'POST',
      },
      columns: [
      {
        "className":      'details-control',
        "orderable":      false,
        "searchable":      false,
        "data":           null,
        "defaultContent": '', width: "5%"
      },
      {data: 'name', name: 'name', width: "50%"},
      {data: 'email', name: 'email', width: "20%"},
      {data: 'amount', name: 'amount', className: 'text-right', width: "25%"},
      ],
    });

    $(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) {
          AccountBillTable.draw();
          $('#payment_accountbill_modal').modal('hide');
          DisplayMessages(data['message']);
        },
        error: function (jqXHR, exception) {
          var Response = jqXHR.responseText;          
          Response = $.parseJSON(Response);
          DisplayMessages(Response.message,'error');
        }
      });
    });

    var template = Handlebars.compile($("#details-template").html());
    $('#accountbill-grid tbody').on('click', 'td.details-control', function () {
      var tr = $(this).closest('tr');
      var row = AccountBillTable.row(tr);
      var tableId = 'posts-' + row.data().id;
      
      if (row.child.isShown()) {
        row.child.hide();
        tr.removeClass('shown');
      } else {

        row.child(template(row.data())).show();
        initTable(tableId, row.data());
        tr.addClass('shown');
        tr.next().find('td').addClass('no-padding bg-grey');
      }
    });

    function initTable(tableId, data) {
      $('#' + tableId).DataTable({
        processing: true,
        serverSide: true,
        searching: false,
        bLengthChange: false,
        ajax: data.details_url,
        columns: [
        { data: 'start_date', name: 'start_date' },
        { data: 'grandtotal', name: 'grandtotal', className: 'text-right' },
        { data: 'button', name: 'button', className: 'text-center' }
        ],
        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(1)
          .data()
          .reduce( function (a, b) {
            return intVal(a) + intVal(b);
          }, 0 );

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

  });

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();
  });
}
</script>
@stop