@extends('panel.layouts.app')
@section('page-title')
<title>
{{ LaraCore::setting('html_prefix') }} {{ (LaraCore::setting('html_prefix') != '') ? '|' : '' }} Booking 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="box-header with-border">
            <i class="fa fa-list-alt"></i>
            <h3 class="box-title">Booking Report</h3>
          </div>
          <div class="box-header with-border">
            <div class="row">
              <div class="col-md-2">
                <div class="form-group has-feedback">
                  <label>Branch</label>
                  {{ Form::select('branches', $branches,'',["class"=>'form-control filter select2','autofocus' => 'true', 'id' => 'branches']) }}
                </div>
              </div>

              <div class="col-md-2">
                <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-2">
                <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-2">
                <div class="form-group has-feedback">
                  <label>Carriers</label>
                  {{ Form::select('carriers', $carriers,'',["class"=>'form-control filter select2', 'id' => 'carriers']) }}
                </div>
              </div>

              <div class="col-md-2">
                <div class="form-group has-feedback">
                  <label>&nbsp;</label>
                  <button value="Reset" class="btn btn-sm btn-default btn-block reset-report-filter">Reset</button>
                </div>
              </div>

              <div class="col-md-2">
                <div class="form-group has-feedback">
                  <label>&nbsp;</label>
                  <button class="btn btn-sm btn-default btn-block" onclick="printParcelReport(this)"><i class="fa fa-print"></i> Print</button>
                </div>
              </div>
            </div>

            {{ Form::open(["url"=>route('branch.print.parcels.report'),"method"=>"POST","target"=>"_blank"]) }}
            {{ Form::hidden('branch','',['id'=>'branch']) }}
            {{ Form::hidden('sdate','',['id'=>'sdate']) }}
            {{ Form::hidden('edate','',['id'=>'edate']) }}
            {{ Form::hidden('carrier','',['id'=>'carrier']) }}
            {{ Form::close() }}
          </div>
          <div class="box-body">
            <div class="table-responsive">
              <table id="parcels-grid" class="table table-bordered table-hover display">
                <thead>
                  <th>Id</th> 
                  <th>Date</th>
                  <th>Branch</th>
                  <th>Client</th>
                  <th>Center</th>
                  <th>Receiver</th>
                  <th>Carrier</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="7" class="border-style"> <b>Total Amount:</b></th>
                    <th class="border-style"></th>
                    <th class="border-style"></th>
                    <th class="border-style"></th>
                    <th class="border-style"></th>
                  </tr>
                </tfoot>
              </table>
            </div>
          </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 () {
    var startDatePicker = $('#startDate').daterangepicker({
        singleDatePicker: true,
        autoUpdateInput: true,
        drops: "down",
        locale: {
            format: '{{AppHelper::dateFormatJS(LaraCore::setting('date_format'))}}',
        }
    });

    var endDatePicker = $('#endDate').daterangepicker({
        singleDatePicker: true,
        autoUpdateInput: true,
        drops: "down",
        locale: {
            format: '{{AppHelper::dateFormatJS(LaraCore::setting('date_format'))}}',
        }
    });

    startDatePicker.on('apply.daterangepicker', function(ev, picker) {
        var startDate = picker.startDate;
        $('#endDate').data('daterangepicker').minDate = startDate;
        ParcelsTable.draw(); // Assuming ParcelsTable is your DataTable instance
    });

    endDatePicker.on('apply.daterangepicker', function(ev, picker) {
        var endDate = picker.startDate;
        $('#startDate').data('daterangepicker').maxDate = endDate;
        ParcelsTable.draw(); // Assuming ParcelsTable is your DataTable instance
    });

    $('#branches').select2({
      placeholder: "Select Branch"
    });
    $('#carriers').select2({
      placeholder: "Select Carrier"
    });

    initDate('{{AppHelper::dateFormatJS(LaraCore::setting('date_format'))}}');
    initDateRange('{{AppHelper::dateFormatJS(LaraCore::setting('date_format'))}}');
    initRichText();
    ParcelsTable = $('#parcels-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,
      dom: 'Bftip',
      buttons: [{
        extend: 'pdf',
        title: 'Booking Report',
        filename: 'booking_report',
        orientation: 'landscape',
        pageSize: 'LETTER',
        customize: function(doc) {
            // Remove the ID column from the PDF
            doc.content[1].table.body.forEach(function(row) {
                row.splice(0, 1); // Assuming ID column is the first column
            });
        }
      },{
        extend: 'excel',
        title: 'Booking Report',
        filename: 'booking_report',
        customize: function(xlsx) {
            // Get the index of the column to remove
            var columnIndex = 0; // Change this to the index of your ID column

            // Iterate over all rows (excluding the header) and remove the cell from the specified column
            $('row:not(:first)', xlsx.xl.worksheets['sheet1.xml']).each(function() {
                $('c[r^="' + String.fromCharCode(65 + columnIndex) + '"]', this).remove();
            });
        }
      }
      ],
      ajax: {
        url : '{{route("post.branch.parcel.report")}}',
        type: 'POST',
        data: function (d) {
          d._token = $('hidden[name=_token]').val();
          d.branch = $('select[name=branches]').val();
          d.start_date = $('input[name=start_date]').val();
          d.end_date = $('input[name=end_date]').val();
          d.carrier = $('select[name=carriers]').val();
        },
      },
      columns: [
      {data: 'id', name: 'parcels.id',visible: false,searchable: false, width: 'auto'},
      {data: 'date', name: 'date', width: 'auto'},
      {data: 'branch_name', name: 'br.name', width: 'auto'},
      {data: 'client_id', name: 'client.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: 'weight', name: 'weight', width: 'auto%'},
      {data: 'net_amt', name: 'net_amt', className: 'text-right', width: 'auto%'},
      {data: 'consignment_no', name: 'consignment_no', width: 'auto'},
      {data: 'remakrs', name: 'remakrs', 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(7)
        .data()
        .reduce( function (a, b) {
          return intVal(a) + intVal(b);
        }, 0 );

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

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

        $( api.column(8).footer() ).html(
          Number(net_amt).toLocaleString('en')
          );
      },
    });
    initSelectAll('#parcels-grid', ParcelsTable);
    $('#parcels-grid_filter').css({"display":"inline-block", "float":"right"});
    $('.dt-buttons').css({"display":"inline-flex", "align-items":"flex-start", "gap":"10px"});
  });

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

$( ".reset-report-filter" ).click(function(e) {
  $('select[name=branches]').val('').change();
  var startDate = '{{$startDate}}';
  var endDate = '{{$endDate}}';
  $('input[name=start_date]').val(startDate);
  $('input[name=end_date]').val(endDate);
  $('select[name=carriers]').val('').change();
  // Reset the daterangepicker instances
  $('#startDate').data('daterangepicker').setStartDate(startDate);
  $('#startDate').data('daterangepicker').setEndDate(startDate);

  $('#endDate').data('daterangepicker').setStartDate(endDate);
  $('#endDate').data('daterangepicker').setEndDate(endDate);
  ParcelsTable.draw();
});

function printParcelReport(element){
  var branch = $('select[name=branches]').val();
  var carrier = $('select[name=carriers]').val();
  var start_date = $('input[name=start_date]').val();
  var end_date = $('input[name=end_date]').val();
  $('#branch').val(branch);
  $('#sdate').val(start_date);
  $('#edate').val(end_date);
  $('#carrier').val(carrier);
  $('#sdate').parents('form').submit();
}
</script>
@stop