@extends('panel.layouts.app')
@section('page-title')
<title>
{{ LaraCore::setting('html_prefix') }} {{ (LaraCore::setting('html_prefix') != '') ? '|' : '' }} Detailed Bills Report</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-cube"></i> Detailed Bills Report</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 pull-right">
                {!! Form::open(["url"=>route('print.details.bill'),"method"=>"POST","target"=>"_blank"]) !!}
                {{ Form::hidden('id','',['id'=>'billId']) }}
                {{ Form::hidden('month','',['id'=>'month']) }}
                {{ Form::close() }}
                <a href="javascript:void(0)" class="btn btn-box-tool show-tooltip" onclick="ToggleDataTable('details-bills')" title="Search"><i class="fa fa-search"></i></a>
              </div>
            </div>

          </div>
          <div class="box-body">
            <div class="table-responsive">
              <table id="details-bills" class="table table-bordered table-hover display">
               <thead>
                <th>Client</th>
                <th class="text-center">Amount</th>
                <th>&nbsp;</th>  
              </thead>
              <tbody>
              </tbody>
            </table> 
          </div>
        </div>
      </div>
      <div class="bills_modal_div">
        <div class="edit_modal">
        </div>
      </div>
    </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'))}}');
    initRichText();
    detailsBills = $('#details-bills').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.detailsBills")}}',
        data: function (d) {
          d._token = $('hidden[name=_token]').val();
          d.current_month = $('select[name=current_month]').val();
        },
        type: 'POST',
      },
      columns: [
      {data: 'name', name: 'name'},
      {data: 'amount', name: 'amount',className:'text-right'},
      {data: 'actions', name: 'actions', orderable:false,searchable:false,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');
        }
      },           
    });
  });

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

  function getBillId(element){
    var id = $(element).attr('data-id');
    $('#billId').val(id);
    $('#month').val($('select[name=current_month]').val());
    $('#billId').parents('form').submit();
  }

</script>
@stop