@extends('panel.layouts.app')
@section('page-title')
<title>
{{ LaraCore::setting('html_prefix') }} {{ (LaraCore::setting('html_prefix') != '') ? '|' : '' }} Other Branch Bookings</title>
@stop
@section('content')
<div class="content-wrapper">
  <section class="content">
    <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">Other Branch Bookings (C)</h3>
            </div>
            <div class="box-header with-border head-design">
              <div class="col-md-3 rmv-padd-left">
                <div class="form-group has-feedback err">
                  <label>Branch</label>
                  {{ Form::select('branches', $branchesOptions,'',["class"=>'form-control filter select2','autofocus' => 'true', 'id' => 'branches']) }}
                </div>
              </div>

              <div class="col-md-3">
                <div class="form-group has-feedback">
                  <label>Start Date</label>
                  <div class="input-group ">
                    {{Form::text( 'start_date', $startDate, [ "class" => "form-control", "id" => 'startDate' ]) }}
                    <div class="input-group-addon"> <i class="fa fa-calendar"></i> </div>
                  </div>
                </div>
              </div>

              <div class="col-md-3">
                <div class="form-group has-feedback">
                  <label>End Date</label>
                  <div class="input-group ">
                    {{Form::text( 'end_date', $endDate, [ "class" => "form-control", "id" => 'endDate' ]) }}
                    <div class="input-group-addon"> <i class="fa fa-calendar"></i> </div>
                  </div>
                </div>
              </div>

              <div class="col-md-3">
                <div class="new-btn">
                  <button value="Reset" class="btn btn-sm btn-default btn-block reset-report-filter">Reset</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('cargoes-grid')" title="Search"><i class="fa fa-search"></i></a>
                  </div>
                </div>
              </div>

            </div>
            <div class="box-body">
              <div class="table-responsive">
                <table id="cargoes-grid" class="table table-bordered table-hover display">
                  <thead>
                    <th>Branch</th>
                    <th>Id</th> 
                    <th>Date</th>
                    <th>Client</th>
                    <th>Origin</th>
                    <th>Destination</th>
                    <th>Receiver</th>
                    <th>Carrier</th>
                    <th>Package Type</th>
                    <th>Weight</th>
                    <th>Amount</th>
                    <th>Consignment No</th>
                    <th>Remark</th>
                  </thead>
                  <tbody>
                  </tbody>
                  <tfoot>
                    <tr class="bg-color-foot-color">
                      <th colspan="9" 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>
                    </tr>
                  </tfoot>
                </table>
              </div>
            </div>
          </div>
          <div class="parcels_modal_div">
            <div class="edit_modal">
            </div>
          </div>
          @include('common.modal.send_report_mail_confirm_model',['entity' =>  'cargo_report'])
        </section>
      </div>
      <div class="col-md-1"></div>
    </div>
  </section>
</div>
@stop
@section('custom-scripts')
<script type="text/javascript">
  var rows_selected  = "";
  $(document).ready(function () {
    $('#endDate, #startDate').daterangepicker({
      singleDatePicker: true,
      autoUpdateInput: true,
      drops: "down",
      locale: {
        format: '{{AppHelper::dateFormatJS(LaraCore::setting('date_format'))}}',
      },
    }).on('change', function(e) {
      CargoesTable.draw();
    });
    $('#branches').select2({
      placeholder: "Select Branch"
    });
    initDate('{{AppHelper::dateFormatJS(LaraCore::setting('date_format'))}}');
    initDateRange('{{AppHelper::dateFormatJS(LaraCore::setting('date_format'))}}');
    initRichText();
    CargoesTable = $('#cargoes-grid').DataTable({
      'language': { "emptyTable": '{{LaraCore::setting('no_records')}}', "processing": "<i class='fa fa-spinner fa-spin fa-3x'></i>" },
      "aLengthMenu": [[50, 100, 250, 500, 1000, -1], [50, 100, 250, 500, 1000, 'All']],
      "order": [ 0, "desc" ],
      processing: true,
      serverSide: true,
      ajax: {
        url : '{{route("post.branch.cargo.bookings")}}',
        type: 'POST',
        data: function (d) {
          d._token = $('hidden[name=_token]').val();
          d.branches = $('select[name=branches]').val();
          d.start_date = $('input[name=start_date]').val();
          d.end_date = $('input[name=end_date]').val();
        },
      },
      columns: [
        {data: 'branch_name', name: 'branch.name', width: 'auto'},
        {data: 'id', name: 'cargos.id',visible: false,searchable: false, width: 'auto'},
        {data: 'date', name: 'date', width: 'auto'},
        {data: 'client_id', name: 'client.name', width: 'auto'},
        {data: 'origin_center_name', name: 'ori_center.name', width: 'auto'},
        {data: 'center_id', name: 'center.name', width: 'auto'},
        {data: 'receiver_id', name: 'receiver.name', width: 'auto'},
        {data: 'carrier_id', name: 'carrier.name', width: 'auto'},
        {data: 'package_type', name: 'pt.name', width: 'auto'},
        {data: 'weight', name: 'weight', width: 'auto%'},
        {data: 'net_amount', name: 'net_amount', className: 'text-right', width: 'auto%'},
        {data: 'consignment_no', name: 'consignment_no', width: 'auto'},
        {data: 'remarks', name: 'remarks', width: 'auto'},
        ],
      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;
        };

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

        $( api.column(9).footer() ).html(
          Number(weight).toLocaleString('en')
          );

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

        $( api.column(10).footer() ).html(
          Number(net_amount).toLocaleString('en')
          );
      },
    });
    initSelectAll('#cargoes-grid', CargoesTable);
    //CargoesTable.buttons().container().appendTo( '#cargoes-grid_wrapper .col-sm-6:eq(0)' );
  });

  $( ".filter" ).change(function(e) {
    e.preventDefault();
    CargoesTable.draw();
  });
  $( ".reset-report-filter" ).click(function(e) {
    $('.err, .rmv-padd-left').removeClass('has-error');
    $('select[name=branches]').val('').change();
    var startDate = '{{$startDate}}';
    var endDate = '{{$endDate}}';
    $('input[name=start_date]').val(startDate);
    $('input[name=end_date]').val(endDate);
    CargoesTable.draw();
  });
</script>
@stop