@extends('panel.layouts.app')
@section('page-title')
<title>
{{ LaraCore::setting('html_prefix') }} {{ (LaraCore::setting('html_prefix') != '') ? '|' : '' }} Client Ledger</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-list-alt"></i>
            <h3 class="box-title">Client Ledger</h3>
          </div>
          <div class="box-header with-border head-design">
            <div class="col-md-3 rmv-padd-left">
              <div class="form-group has-feedback clinet-err">
                <label>Client</label>
                {{ Form::select('clients', $clients,'',["class"=>'form-control filter select2', 'autofocus'=>'false', 'id'=>'clients']) }}
              </div>
            </div>

            <div class="col-md-3">
              <div class="form-group has-feedback fyear-err">
                <label>Financial Year</label>
                {{ Form::select('financial_year', $financial_year,'',["class"=>'form-control filter select2','autofocus'=>'false', 'id'=>'financial_year']) }}
              </div>
            </div>

            <div class="col-md-6">
              <div class="client-ledger-btn new-btn">
                <button value="Reset" class="btn btn-sm btn-default btn-block reset-client-ledger">Reset</button>
              </div>
              <div class="client-ledger-btn new-btn">
                <button class="btn btn-sm btn-default btn-block" onclick="printClientLedgerReport(this)"><i class="fa fa-print"></i> Print</button>
              </div>
              <div class="client-ledger-btn new-btn">
                <button class="btn btn-sm btn-default btn-block" data-toggle="modal" data-target="#send_client_ledger_modal"><i class="fa fa-envelope"></i> Mail</button>
              </div>
              {{-- <div class="opt-btn pull-right">
                <div class="box-tools box-tools-common pull-right">
                  <a href="javascript:void(0)" class="btn btn-box-tool show-tooltip" onclick="ToggleDataTable('client-ledger-grid')" title="Search"><i class="fa fa-search"></i></a>
                </div>
              </div> --}}
            </div>

            {{ Form::open(["url"=>route('print-client-ledger-report'),"method"=>"POST","target"=>"_blank"]) }}
            {{ Form::hidden('client','',['id'=>'client']) }}
            {{ Form::hidden('financial_year','',['id'=>'fyear']) }}
            {{ Form::close() }}
          </div>
          <div class="box-body">
            <div class="table-responsive">
              <table id="client-ledger-grid" class="table table-bordered table-hover display">
                <thead>
                  <th>Date</th>
                  <th>Remarks</th>
                  <th>Db.Amt.</th>
                  <th>Cr.Amt.</th>
                  <th>Balance</th>
                </thead>
                <tbody>
                </tbody>
                <tfoot>
                  <tr class="bg-color-foot-color">
                    <th colspan="2" class="border-style"> <b>Total Amount:</b></th>
                    <th class="border-style"></th>
                    <th class="border-style"></th>
                    <th class="border-style"></th>
                  </tr>
                </tfoot>
              </table>
            </div>
          </div>
        </div>
        <div class="clientledger_modal_div">
          <div class="edit_modal">
          </div>
        </div>
        @include('common.modal.send_client_ledger_mail_confirm_model',['entity' =>  'client_ledger'])
      </section>
    </div>
    <div class="col-md-1"></div>
  </div>
</div>
@stop
@section('custom-scripts')
<script type="text/javascript">
  var rows_selected  = "";
  $(document).ready(function () {
    $('#clients').select2({
      placeholder: "Select Client"
    });
    $('#financial_year').select2({
      placeholder: "Select Financial Year"
    });
    initDate('{{AppHelper::dateFormatJS(LaraCore::setting('date_format'))}}');
    initDateRange('{{AppHelper::dateFormatJS(LaraCore::setting('date_format'))}}');
    initFileInput();
    initRichText();
    ClientLedgerTable = $('#client-ledger-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": [ 0, "asc" ],
      processing: true,
      serverSide: true,
      ajax: {
        url : '{{route("client.ledger.list")}}',
        data: function (d) {
          d._token = $('hidden[name=_token]').val();
          d.clients = $('select[name=clients]').val();
          d.financial_year = $('select[name=financial_year]').val();
        },
        type: 'POST',
      },
      columns: [
      {data: 'created_at', name: 'created_at'},
      {data: 'description', name: 'description', orderable: false},
      {data: 'db_amount', name: 'db_amount', class: 'text-right', orderable: false},
      {data: 'cr_amount', name: 'cr_amount', class: 'text-right', orderable: false},
      {data: 'balance', name: 'balance', class: 'text-right', orderable: false},
      ],'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');
        }
      },
      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;
        };

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

        $( api.column(2).footer() ).html(
          Number(db_amount).toLocaleString('en')
          );

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

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

        balance = db_amount - cr_amount;
        if (balance > 0) {
          var t = ' D';
        } else if (balance < 0) {
          var t = ' C';
        } else if (balance == 0 || balance == 0.00) {
          var t = '';
        }
        $( api.column(4).footer() ).html(
          String(balance.toFixed(2)+t).toLocaleString('en')
          );
      },
    });

    $(document).on('click', '#send_client_ledger', function(e){
      var client = $('select[name=clients]').val();
      var financial_year = $('select[name=financial_year]').val();
      if (client == '') {
        $('#send_client_ledger_modal').modal('hide');
        toastr.error('Please select client!', 'Error!', { onHidden: function() {}});
        $('.clinet-err').addClass('has-error');
      } else {
        $('.clinet-err').removeClass('has-error');
      }
      if (financial_year == '') {
        $('#send_client_ledger_modal').modal('hide');
        toastr.error('Please select financial year!', 'Error!', { onHidden: function() {}});
        $('.fyear-err').addClass('has-error');
      } else {
        $('.fyear-err').removeClass('has-error');
      }

      if (client != '' && financial_year != '') {
        $('.clinet-err, .fyear-err').removeClass('has-error');
        var url = APP_URL+"/send-client-ledger-mail";
        $.ajax({
          type: "POST",
          url: url,
          data: {'client' : client, 'financial_year' : financial_year},
          dataType: 'json',
          success: function (data) {
            if (data.status == 'success') {
              $('#send_client_ledger_modal').modal('hide');
              DisplayMessages(data['message']);
            } else {
              $('#send_client_ledger_modal').modal('hide');
              toastr.error('Please first add email from client!', 'Error !', { onHidden: function() { }});
            }
            
          },
          error: function (jqXHR, exception) {
            var Response = jqXHR.responseText;
            Response = $.parseJSON(Response);
            DisplayMessages(Response.message,'error');
          }
        }); 
      }
    });
  });

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/complaints/'+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 printClientLedgerReport(element) {
  var client = $('select[name=clients]').val();
  var financial_year = $('select[name=financial_year]').val();
  if (client == '') {
    toastr.error('Please select client!', 'Error!', { onHidden: function() {}});
    $('.clinet-err').addClass('has-error');
  } else {
    $('.clinet-err').removeClass('has-error');
  }
  if (financial_year == '') {
    toastr.error('Please select financial year!', 'Error!', { onHidden: function() {}});
    $('.fyear-err').addClass('has-error');
  } else {
    $('.fyear-err').removeClass('has-error');
  }

  if (client != '' && financial_year != '') {
    $('.clinet-err, .fyear-err').removeClass('has-error');
    $('#client').val(client);
    $('#fyear').val(financial_year);
    $('#client').parents('form').submit();
  }
}

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

$(".reset-client-ledger").click(function(e) {
  $('.err, .rmv-padd-left').removeClass('has-error');
  $('select[name=clients]').val('').change();
  $('select[name=financial_year]').val('').change();
  ClientLedgerTable.draw();
});

</script>
@stop