@extends('panel.layouts.app')
@section('page-title')
<title>
{{ LaraCore::setting('html_prefix') }} {{ (LaraCore::setting('html_prefix') != '') ? '|' : '' }} Parcel Summary</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">Parcel Summary</h3>
            <div class="pull-right"></div>
          </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>Client</label>
                {{ Form::select('clients', $clients,'',["class"=>'form-control filter select2','autofocus' => 'true', 'id' => 'clients']) }}
              </div>
            </div> --}}

            <div class="col-md-3">
              <div class="form-group has-feedback">
                <label>Booking Date</label>
                <div class="input-group ">
                  {{Form::text( 'booking_date', $bookingDate, [ "class" => "form-control", "id" => 'bookingDate' ]) }}
                  <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>&nbsp;</label>
                <div class="input-group ">
                  <div class="">
                    <button value="Reset" class="btn btn-sm btn-default btn-block reset-report-filter">Reset</button>
                  </div>
                </div>
              </div>
            </div>

            <div class="col-md-6">
              <div class="opt-btn pull-right">
                {{-- <div class="new-btn1" style="margin-right: 10px; float: left;">
                  <button class="btn btn-sm btn-default btn-block" data-toggle="modal" data-target="#send_parcel_summary_mail_modal"><i class="fa fa-envelope"></i> Mail</button>
                </div> --}}
                <div class="box-tools box-tools-common pull-right">
                  <a href="javascript:void(0)" class="btn btn-box-tool show-tooltip" data-toggle="modal" data-target="#send_parcel_summary_mail_modal"  title="Send Mail" id="sendMsgAll" name="">
                    <i class="fa fa-envelope"></i>
                  </a>
                  <a href="javascript:void(0)" class="btn btn-box-tool show-tooltip" onclick="ToggleDataTable('booking-grid')" title="Search"><i class="fa fa-search"></i></a>
                </div>
              </div>
            </div>
          </div>
          <div class="box-body">
            <div class="table-responsive">
              <table id="booking-grid" class="table table-bordered table-hover display">
                <thead>
                  <th>Id</th>
                  <th class="text-center">
                    <input name="select_all" type="checkbox"  class="minimal" id="bulk_delete" data-scope="#booking-grid" />
                  </th>
                  <th>Client</th>
                  <th>Email</th>
                  <th>Bookings</th>
                </thead>
                <tbody>
                </tbody>
                <tfoot>
                  <tr class="bg-color-foot-color">
                    <th colspan="4" class="border-style"> <b>Total Booking:</b></th>
                    <th 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_delivery_report_mail_confirm_model',['entity' =>  'parcel_summary_mail'])
      </section>
    </div>
    <div class="col-md-1"></div>
  </div>
</div>
@stop
@section('custom-scripts')
<script type="text/javascript">
  var rows_selected  = "";
  $(document).ready(function () {
    $('#bookingDate').daterangepicker({
      singleDatePicker: true,
      autoUpdateInput: true,
      drops: "down",
      locale: {
        format: '{{AppHelper::dateFormatJS(LaraCore::setting('date_format'))}}',
      },
    }).on('change', function(e) {
      BookingTable.draw();
    });
    $('#clients').select2({
      placeholder: "Select Client"
    });
    initDate('{{AppHelper::dateFormatJS(LaraCore::setting('date_format'))}}');
    initDateRange('{{AppHelper::dateFormatJS(LaraCore::setting('date_format'))}}');
    initRichText();
    BookingTable = $('#booking-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, "desc" ],
      processing: true,
      serverSide: true,
      ajax: {
        url : '{{route("post.parcel.summary")}}',
        type: 'POST',
        data: function (d) {
          d._token = $('hidden[name=_token]').val();
          d.client = $('select[name=clients]').val();
          d.booking_date = $('input[name=booking_date]').val();
        },
      },
      columns: [
      {data: 'id', name: 'client.id',visible: false,searchable: false, width: 'auto'},
      {data: 'bulk_delete', name: 'bulk_delete',orderable: false,searchable: false, width: '5%', className: 'text-center', visible: '{{LaraCore::canOrNot("delete_parcelentry")}}'},
      {data: 'client_id', name: 'client.name', width: 'auto'},
      {data: 'client_email', name: 'client.email', width: 'auto'},
      {data: 'total_booking', name: 'total_booking', width: 'auto',searchable: 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;
        };

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

        $( api.column(4).footer() ).html(
          Number(net_amt).toLocaleString('en')
          );
      },
    });
    initSelectAll('#booking-grid', BookingTable);

    $(document).on('click', '#send_parcel_summary_mail', function(e){
      var client_ids = rows_selected;
      var booking_Date = $('input[name=booking_date]').val();
      var formData = { client_ids : client_ids, booking_Date : booking_Date };
      var url = APP_URL+"/send-parcel-summary-mail";
      $.ajax({
        type: "POST",
        url: url,
        data: formData,
        dataType: 'json',
        beforeSend: function(msg){
          $(".master-loader").show();
        },
        success: function (data) {
          $(".master-loader").fadeOut();
          BookingTable.draw();
          if (data.status == 'success') {
            $('#send_parcel_summary_mail_modal').modal('hide');
            DisplayMessages(data['message']);
          } else {
            $('#send_parcel_summary_mail_modal').modal('hide');
            toastr.error(data['message'], 'Error !', { onHidden: function() { }});
          }
        },
        error: function (jqXHR, exception) {
          $(".master-loader").fadeOut();
          var Response = jqXHR.responseText;
          Response = $.parseJSON(Response);
          DisplayMessages(Response.message,'error');
        }
      });
    });
  });

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

$( ".reset-report-filter" ).click(function(e) {
  $('select[name=clients]').val('').change();
  var bookingDate = '{{$bookingDate}}';
  $('input[name=booking_date]').val(bookingDate);
  BookingTable.draw();
});
</script>
@stop