@extends('panel.layouts.app')
@section('page-title')
<title>
{{ LaraCore::setting('html_prefix') }} {{ (LaraCore::setting('html_prefix') != '') ? '|' : '' }} Cargo 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">Cargo Report</h3>
          </div>
          <div class="box-header with-border head-design">
            <div class="col-md-2 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-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-4">
              <div class="new-btn">
                <button value="Reset" class="btn btn-sm btn-default btn-block reset-report-filter">Reset</button>
              </div>
              {{-- <div class="new-btn">
                <button class="btn btn-sm btn-default btn-block" onclick="excelParcelReport(this)"><i class="fa fa-file-excel-o"></i> Excel</button>
              </div> --}}
              <div class="new-btn">
                <button class="btn btn-sm btn-default btn-block" onclick="printCargoReport(this)"><i class="fa fa-print"></i> Print</button>
              </div>
              <div class="new-btn">
                <button class="btn btn-sm btn-default btn-block" onclick="printCargoReportNoCharges(this)"><i class="fa fa-print"></i> No Charges</button>
              </div>
              <div class="new-btn">
                <button class="btn btn-sm btn-default btn-block" data-toggle="modal" data-target="#send_cargo_report_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('cargoes-grid')" title="Search"><i class="fa fa-search"></i></a>
                </div>
              </div>
            </div>

            {{ Form::open(["url"=>route('print.cargo.record'),"method"=>"POST","target"=>"_blank"]) }}
            {{ Form::hidden('client','',['id'=>'client']) }}
            {{ Form::hidden('sdate','',['id'=>'sdate']) }}
            {{ Form::hidden('edate','',['id'=>'edate']) }}
            {{ Form::hidden('carrier','',['id'=>'carrier']) }}
            {{ Form::hidden('nocharges','',['id'=>'nocharges']) }}
            {{ Form::close() }}

            {{ Form::open(["url"=>route('excel.parcels.report'),"method"=>"POST"]) }}
            {{ Form::hidden('client','',['id'=>'excel_client']) }}
            {{ Form::hidden('sdate','',['id'=>'excel_sdate']) }}
            {{ Form::hidden('edate','',['id'=>'excel_edate']) }}
            {{ Form::hidden('carrier','',['id'=>'excel_carrier']) }}
            {{ Form::close() }}

          </div>
          <div class="box-body">
            <div class="table-responsive">
              <table id="cargoes-grid" class="table table-bordered table-hover display">
                <thead>
                  <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>Gross Amt</th>
                  <th>Amount</th>
                  <th>Consignment No</th>
                  <th>Remark</th>
                </thead>
                <tbody>
                </tbody>
                <tfoot>
                  <tr class="bg-color-foot-color">
                    <th colspan="8" class="border-style"> <b>Total Amount:</b></th>
                    <th class="border-style"></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>
</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();
    });
    $('#clients').select2({
      placeholder: "Select Client"
    });
    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": [[-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: 'Cargo Report',
        filename: 'cargo_report',
        orientation: 'landscape',
        pageSize: 'LETTER',
      },{
        extend: 'excel',
        title: 'Cargo Report',
        filename: 'cargo_report',
      }
      ],
      ajax: {
        url : '{{route("post.cargo.records")}}',
        type: 'POST',
        data: function (d) {
          d._token = $('hidden[name=_token]').val();
          d.client = $('select[name=clients]').val();
          d.start_date = $('input[name=start_date]').val();
          d.end_date = $('input[name=end_date]').val();
          d.center = $('select[name=centers]').val();
          d.carrier = $('select[name=carriers]').val();
        },
      },
      columns: [
      {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: 'gross_amount', name: 'gross_amount', className: 'text-right', 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'},
      ],
       rowCallback: function (row, data) {
        if (data.charge_titles) {
              const charges = data.charge_titles.split(',');
              charges.forEach(charge => {
                  const [title, amount] = charge.split(':');
                  $(row).after(`
                      <tr class="charge-row">
                          <td colspan="13" style="text-indent: 20px; background-color: #f9f9f9;">
                              <strong>Title:</strong> ${title} &nbsp; | &nbsp; <strong>Amount:</strong> ${amount}
                          </td>
                      </tr>
                  `);
              });
          }
      },
      drawCallback: function (settings) {
          $('#cargoes-grid tbody tr').each(function () {
              const row = this;
              const rowData = $('#cargoes-grid').DataTable().row(row).data();

              if (rowData && Array.isArray(rowData.cargoothercharge) && rowData.cargoothercharge.length > 0) {
                  $(row).after(
                    rowData.cargoothercharge.map(charge => {
                    const amount = charge.amount != null && !isNaN(charge.amount) ? charge.amount.toFixed(2) : '0.00';
                    return `
                        <tr class="sub-row">
                            <td colspan="8" style="background: #f9f9f9; text-align: left;">
                                <strong>${charge.chargetype.title}:</strong>
                            </td>
                            <td style="background: #f9f9f9; text-align: right;">
                                ${amount}
                            </td>
                            <td colspan="3" style="background: #f9f9f9;"></td>
                        </tr>
                    `;
                }).join('')
                  );
              }
          });
      },
      // drawCallback: function (settings) {
      //     const api = this.api();
      //     api.rows().every(function () {
      //         const data = this.data();
      //         if (data.charge_titles) {
      //             const charges = data.charge_titles.split(',');
      //             const currentRow = this.node();
      //             charges.forEach(charge => {
      //                 const [title, amount] = charge.split(':');
      //                 $(currentRow).after(`
      //                 <tr class="charge-row">
      //                   <td></td>
      //                     <td colspan="7">
      //                         ${title}
      //                     </td>
      //                     <td style="text-align:right;">
      //                         ${parseFloat(amount).toFixed(2)}
      //                     </td>
      //                     <td></td>
      //                     <td></td>
      //                     <td></td>
      //                 </tr>
      //             `);
      //             });
      //         }
      //     });
      // },
      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(8)
          .data()
          .reduce(function (a, b) {
          let extractNumber = function (val) {
            if (typeof val === 'string') {
                return parseFloat(val.split(/<br|\n|\r|\(|\s/)[0]) || 0;
            }
              return typeof val === 'number' ? val : 0;
            };
            return extractNumber(a) + extractNumber(b);
          }, 0);
          $(api.column(8).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)' );
    
    $(document).on('click', '#send_cargo_report', function(e){
      var client_id = $('select[name=clients]').val();
      var start_date = $('input[name=start_date]').val();
      var end_date = $('input[name=end_date]').val();
      var carrier = $('select[name=carriers]').val();
      
      if(client_id == '' || client_id == null){
        $('#send_cargo_report_modal').modal('hide');
        toastr.error('Please select client !', 'Error !', { onHidden: function() {          
        }});
        $('.rmv-padd-left').addClass('has-error');
      }else{
        $('.err, .rmv-padd-left').removeClass('has-error');
        $('#send_cargo_report').attr('disabled',true).html('Yes, Sure <i class="fa fa-spin fa-spinner"></i>');
        var url = APP_URL+"/send-cargo-report-mail";
        $.ajax({
          type: "POST",
          url: url,
          data: {'client_id' : client_id, 'start_date' : start_date, 'end_date' : end_date, 'carrier' : carrier,},
          dataType: 'json',
          success: function (data) {
            $('#send_cargo_report').attr('disabled',false).html('Yes, Sure');
            $('#send_cargo_report').html('Yes, Sure');
            if (data.status == 'success') {
              $('#send_cargo_report_modal').modal('hide');
              DisplayMessages(data['message']);
            } else {
              $('#send_cargo_report_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');
          }
        });  
      }
    });

  });

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

function excelParcelReport(element){
  var client = $('select[name=clients]').val();
  var carrier = $('select[name=carriers]').val();
  var start_date = $('input[name=start_date]').val();
  var end_date = $('input[name=end_date]').val();
  $('#excel_client').val(client);
  $('#excel_sdate').val(start_date);
  $('#excel_edate').val(end_date);
  $('#excel_carrier').val(carrier);
  $('#excel_sdate').parents('form').submit();
}

function printCargoReport(element){
  var client = $('select[name=clients]').val();
  var carrier = $('select[name=carriers]').val();
  if(client == '' && carrier == ''){
    toastr.error('Please select client !', 'Error !', { onHidden: function() {          
    }});
    $('.err').addClass('has-error');
  }else{
    $('.err, .rmv-padd-left').removeClass('has-error');
    var start_date = $('input[name=start_date]').val();
    var end_date = $('input[name=end_date]').val();
    $('#client').val(client);
    $('#sdate').val(start_date);
    $('#edate').val(end_date);
    $('#carrier').val(carrier);
    $('#nocharges').val('no');
    $('#sdate').parents('form').submit();
  }
}

function printCargoReportNoCharges(element){
  var client = $('select[name=clients]').val();
  var carrier = $('select[name=carriers]').val();
  if(client == '' && carrier == ''){
    toastr.error('Please select client !', 'Error !', { onHidden: function() {          
    }});
    $('.err').addClass('has-error');
  }else{
    $('.err, .rmv-padd-left').removeClass('has-error');
    var start_date = $('input[name=start_date]').val();
    var end_date = $('input[name=end_date]').val();
    $('#client').val(client);
    $('#sdate').val(start_date);
    $('#edate').val(end_date);
    $('#carrier').val(carrier);
    $('#nocharges').val('yes');
    $('#sdate').parents('form').submit();
  }
}
</script>
@stop