@extends("cms.layouts.app", ['page_id' => 'analysts_sale'])

@push("css")
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />

@endpush

@push("js")
<script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
<script type="text/javascript">
$(function () {

  let platforms = [];

  let selectedPlatforms = '';
  let selectedStores = '';
  function getShopByPlatform(platform,country){

    let platforms = '';
    if(platform ==0){
      $("select[name='platforms'] option").each(function()
      {
        if($(this).val() !=0){
          // platforms.push($(this).val());
          platforms = platforms +','+$(this).val();
        }
          // Add $(this).val() to your list
      });
    }
    console.log(platforms);
      const xmlhttp = new XMLHttpRequest();
      xmlhttp.onload = function() {
          $("select[name='stores']").empty();

          let selector = document.getElementsByName('stores');

          let option = document.createElement("option");
          option.text = 'All Stores';
          option.value = 0;
          selector[0].add(option);
          if(this.response !=='[]'){

              JSON.parse(this.response).forEach(e=>{
                  let option = document.createElement("option");
                  option.text = e.name;
                  option.value = e.id;
                  selector[0].add(option);
              });
          }
      }
      if(platform !=0){
          xmlhttp.open("GET", "/cms/stores/get_store?platform=" + platform);
      }else{
            xmlhttp.open("GET", "/cms/stores/get_store_by_platforms?platform=" + platforms);
      }
      xmlhttp.send();
  }

  function getPlatformByCountry(p){
    const xmlhttp = new XMLHttpRequest();
    xmlhttp.onload = function() {
        //$("select[name='shop_id']").empty();
        if(this.response !=='[]'){
            $("select[name='platforms_option']").empty();
            let selector = document.getElementsByName('platforms_option');
            
            let ZeroOption = document.createElement("option");
                ZeroOption.text = 'All Platforms';
                ZeroOption.value = 0;
                selector[0].add(ZeroOption);

            JSON.parse(this.response).forEach(e=>{
                let option = document.createElement("option");
                option.text = e.name;
                option.value = e.id;
                selector[0].add(option);
            });
            $("select[name='platforms_option']").parent().show();
        }else {
            $("select[name='platforms_option']").parent().hide();
        }
    }
    xmlhttp.open("GET", "/cms/analysts/get_platform?country_id=" + p);
    xmlhttp.send();
}

  $('input[name="dates"]').daterangepicker({
      locale: { cancelLabel: 'Clear', format: 'YYYY-MM-DD'}
  }, function(chosen_date) { });
  $('input[name="dates"]').on('cancel.daterangepicker', function(ev, picker) {
      $('input[name="dates"]').val('');
      $('#dataTable_0').DataTable().ajax.reload();
  });

  $('input[name="dates').val('');
  $('input[name="dates"]').attr("placeholder","Order Date");
  $('input[name="dates"]').on('change', function () {
      setTimeout(function(){
          $('#dataTable_0').DataTable().ajax.reload();
      }, 100);
        $(".tab-title").text($('input[name="dates').val());
  });

  $('#country-option').on('change', function () {
        setTimeout(function(){
            $('#dataTable_0').DataTable().ajax.reload();
        }, 100);
        getPlatformByCountry($('#country-option').val());
    });

    $('#platform-option').on('change', function () {
        setTimeout(function(){
            $('#dataTable_0').DataTable().ajax.reload();
        }, 100);
        getShopByPlatform( $('#platform-option').val());
    });

    $('#store-option').on('change', function () {
        setTimeout(function(){
            $('#dataTable_0').DataTable().ajax.reload();
        }, 100);
    });

  $(".has-treeview").eq(2).addClass('menu-open');
  $(".menu-open > ul").show();

    @php
        $no_data_message = __('cms.order.no_data.picking_detail');
    @endphp

    const tables = [
        {selector: '#dataTable_0', param: '+0'},
        {selector: '#dataTable_1', param: '+1'},
        {selector: '#dataTable_2', param: '+2'},
    ]

    let recordsTotal = 0;
    let subTotal = 0;

    let cancellTotal = 0;
    let cancellSubTotal = 0;

    let returnTotal = 0;
    let returnSubTotal = 0;

    let box_60 = 0;
    let box_80 = 0;

    let datas = [];
    let totalCancel = [];
    let totalReturn = [];
    let netOrders = [];
    let totalOrders = [];

    let ids = [];
    let returnData =[];
    let cancellData =[];
    let netData = [];

    let return_deduce = 0;
    tables.forEach(t => {
        const table = window.dataTablesHelper.init({
            language: {
              emptyTable: "{{ $no_data_message }}",
            },
            selector: t.selector,
            serverSide: true,
            pageLength: 200,
            lengthMenu: [100, 200, 300, 400, 500, 600, 700, 800 ,900 ,1000],
            ajax: {
                url: '{!! route('cms.order_products.picking_saledatatable',['platform'=>$platform]) !!}',
                data: function (d) {
                    if ($('input[name="dates"]').val()) {
                        var startDate = $('input[name="dates"]').data('daterangepicker').startDate.format('YYYY-MM-DD');
                        var endDate = $('input[name="dates"]').data('daterangepicker').endDate.format('YYYY-MM-DD');
                        d.date_option = $('[name=date_option] option:selected').val();
                        d.start_date = startDate;
                        d.end_date = endDate;
                        d.type ='today';
                        d.length = 1000000;
                    }
                    d.country = $('[name=country_option] option:selected').val();
                        d.platform_id = $('[name=platforms_option] option:selected').val();
                        d.store_id = $('[name=store_option] option:selected').val();
                },
                dataSrc: function ( data ) {


                  if(data.data.length != 0){
                    datas = data.data;
                    box_60 = data.data[0].DT_RowData["60box"];
                    box_80 = data.data[0].DT_RowData["80box"];
                    ids = [];
                    returnData =[];
                    cancellData =[];
                    netData = [];
                      data.data.forEach((item, i) => {
                        if(!ids.includes(item.order_id)){

                          if(moment($('input[name="dates"]').data('daterangepicker').startDate.format('YYYY-MM-DD')).format('YYYY-MM-DD') <= moment(item.order_datetime).format('YYYY-MM-DD')
                          && moment(item.order_datetime).format('YYYY-MM-DD') <= moment($('input[name="dates"]').data('daterangepicker').endDate.format('YYYY-MM-DD')).format('YYYY-MM-DD')){
                            // item.box_type === 0 ?box_60++:box_80++;
                          }
                          ids.push(item.order_id);
                        }

                        if(moment($('input[name="dates"]').data('daterangepicker').startDate.format('YYYY-MM-DD')).format('YYYY-MM-DD') <= moment(item.order_datetime).format('YYYY-MM-DD')
                        && moment(item.order_datetime).format('YYYY-MM-DD') <= moment($('input[name="dates"]').data('daterangepicker').endDate.format('YYYY-MM-DD')).format('YYYY-MM-DD')){
                          if(!netData.includes(item.order_id)){
                            netData.push(item.order_id);
                          }
                          recordsTotal++;
                          // subTotal = subTotal + parseInt(item.quantity);
                        }

                        if(item.status ==6){
                          if(!cancellData.includes(item.order_id) && (moment($('input[name="dates"]').data('daterangepicker').startDate.format('YYYY-MM-DD')).format('YYYY-MM-DD') <= moment(item.updated_at).format('YYYY-MM-DD')
                          && moment(item.updated_at).format('YYYY-MM-DD') <= moment($('input[name="dates"]').data('daterangepicker').endDate.format('YYYY-MM-DD')).format('YYYY-MM-DD'))){
                            cancellData.push(item.order_id);
                          }
                        }

                        if(item.status ==7){
                          if(!returnData.includes(item.order_id) && (moment($('input[name="dates"]').data('daterangepicker').startDate.format('YYYY-MM-DD')).format('YYYY-MM-DD') <= moment(item.updated_at).format('YYYY-MM-DD')
                          && moment(item.updated_at).format('YYYY-MM-DD') <= moment($('input[name="dates"]').data('daterangepicker').endDate.format('YYYY-MM-DD')).format('YYYY-MM-DD'))){
                            returnData.push(item.order_id);
                          }
                        }

                      });


                      // if(data.data[0].DT_RowData["60box"] !==0 || data.data[0].DT_RowData["80box"] !==0){
                      //   box_60 = data.data[0].DT_RowData["60box"];
                      //   box_80 = data.data[0].DT_RowData["80box"];
                      //   recordsTotal = box_60 + box_80;
                      // }
                    return data.data;

                  }
                    return [];
                }
            },
            order: [[ 2, 'desc' ]],
            buttons: {
                buttons: [
                    {
                        extend: 'print',
                        text: "{{ __('cms.print') }}",
                        className: 'btn-print',
                      //  key: 'p',
                        title: 'OMS Sales Details',
                        exportOptions: {
                            columns: ':visible'
                        },
                          customize: function ( win ) {

                          subTotal = 0;
                          // recordsTotal = 0;
                          cancellSubTotal = 0;
                          cancellTotal = 0;
                          returnedSubTotal = 0;
                          returnedTotal = 0;
                          totalCancel = [];
                          totalReturn = [];
                          netOrders = [];
                          totalOrders = [];

                          return_deduce = 0;

                          for(const [key, value] of Object.entries(datas)){
                                  if(value.status ==6){
                                    if(moment($('input[name="dates"]').data('daterangepicker').startDate.format('YYYY-MM-DD')).format('YYYY-MM-DD') <= moment(value.order_datetime).format('YYYY-MM-DD')
                                    && moment(value.order_datetime).format('YYYY-MM-DD') <= moment($('input[name="dates"]').data('daterangepicker').endDate.format('YYYY-MM-DD')).format('YYYY-MM-DD')){
                                        if(netOrders[value.barcode+'-'+value.code] == undefined){
                                          netOrders[value.barcode+'-'+value.code] = value;
                                        }else{
                                          netOrders[value.barcode+'-'+value.code].total_quantity = parseInt(netOrders[value.barcode+'-'+value.code].total_quantity)+parseInt(value.total_quantity);
                                        }
                                        if(moment($('input[name="dates"]').data('daterangepicker').startDate.format('YYYY-MM-DD')).format('YYYY-MM-DD') <= moment(value.updated_at).format('YYYY-MM-DD')
                                        && moment(value.updated_at).format('YYYY-MM-DD') <= moment($('input[name="dates"]').data('daterangepicker').endDate.format('YYYY-MM-DD')).format('YYYY-MM-DD')){
                                            if(totalCancel[value.barcode+'-'+value.code] !== undefined){
                                              totalCancel[value.barcode+'-'+value.code].return_qty = totalCancel[value.barcode+'-'+value.code].return_qty+parseInt(value.order_count);
                                              cancellSubTotal = cancellSubTotal +parseInt(value.total_quantity);
                                            }else{
                                              totalCancel[value.barcode+'-'+value.code] = value;
                                              cancellTotal = cancellTotal+parseInt(value.order_count);
                                              cancellSubTotal = cancellSubTotal +parseInt(value.total_quantity);
                                            }
                                        }
                                          subTotal = subTotal+parseInt(value.total_quantity);
                                    }else{
                                        totalCancel[value.barcode+'-'+value.code] = value;
                                        cancellTotal = cancellTotal+parseInt(value.order_count);
                                        cancellSubTotal = cancellSubTotal +parseInt(value.total_quantity);
                                    }

                                  }else if (value.status ==7) {
                                    if(moment($('input[name="dates"]').data('daterangepicker').startDate.format('YYYY-MM-DD')).format('YYYY-MM-DD') <= moment(value.order_datetime).format('YYYY-MM-DD')
                                    && moment(value.order_datetime).format('YYYY-MM-DD') <= moment($('input[name="dates"]').data('daterangepicker').endDate.format('YYYY-MM-DD')).format('YYYY-MM-DD')){
                                          if(netOrders[value.barcode+'-'+value.code] == undefined){
                                            netOrders[value.barcode+'-'+value.code] = value;
                                          }else{
                                            netOrders[value.barcode+'-'+value.code].total_quantity = parseInt(netOrders[value.barcode+'-'+value.code].total_quantity)+parseInt(value.total_quantity);
                                          }

                                          if(moment($('input[name="dates"]').data('daterangepicker').startDate.format('YYYY-MM-DD')).format('YYYY-MM-DD') <= moment(value.updated_at).format('YYYY-MM-DD')
                                          && moment(value.updated_at).format('YYYY-MM-DD') <= moment($('input[name="dates"]').data('daterangepicker').endDate.format('YYYY-MM-DD')).format('YYYY-MM-DD')){
                                            return_deduce++;
                                              //2o22-05-30
                                              if(totalReturn[value.barcode+'-'+value.code] !== undefined){
                                                totalReturn[value.barcode+'-'+value.code].return_qty = totalReturn[value.barcode+'-'+value.code].return_qty+parseInt(value.return_qty);
                                                returnedSubTotal = returnedSubTotal+parseInt(value.return_qty);
                                              }else{
                                                totalReturn[value.barcode+'-'+value.code] = value;
                                                returnedTotal = returnedTotal+parseInt(value.order_count);
                                                returnedSubTotal = returnedSubTotal +parseInt(value.return_qty);
                                              }
                                          }
                                            subTotal = subTotal+parseInt(value.total_quantity);
                                    }else{
                                        totalReturn[value.barcode+'-'+value.code] = value;
                                        returnedTotal = returnedTotal+parseInt(value.order_count);
                                        returnedSubTotal = returnedSubTotal +parseInt(value.return_qty);
                                    }
                                  }else{
                                    if(netOrders[value.barcode+'-'+value.code] !== undefined){
                                        netOrders[value.barcode+'-'+value.code].total_quantity = parseInt(netOrders[value.barcode+'-'+value.code].total_quantity)+parseInt(value.total_quantity);
                                        subTotal = subTotal+parseInt(value.total_quantity);
                                    }else{
                                      netOrders[value.barcode+'-'+value.code] = value;
                                      subTotal = subTotal+parseInt(value.total_quantity);
                                    }

                                  }
                              }


                              //total
                              html = `<h1>OMS Sales Details</h1>
                                      <h5>Sales on the period</h5>
                                      <table class="table table-hover w-100 dataTable no-footer main-table">
                                      <thead>
                                          <tr>
                                          	<th>Product Code</th>
                                          	<th>Product SKU</th>
                                          	<th>Product Barcode</th>
                                          	<th>Product Name</th>
                                          	<th>Product Name</th>
                                          	<th>Qty</th>
                                          	<th>Expire Date</th>
                                          </tr>
                                      </thead>
                                      <tbody>
                                      <tr>`;

                                   for(const [k1, value] of Object.entries(netOrders)){
                                     // subTotal = subTotal+value.quantity;
                                     let a = `<td>`+(value.code == null ?'N/A':value.code)+`</td>`+
                                             `<td>`+(value.sku == null ?'N/A':value.sku)+`</td>`+
                                             `<td>`+(value.barcode == null ?'N/A':value.barcode)+`</td>`+
                                             `<td>`+value.name_en+`</td>`+
                                             `<td>`+value.name_ja+`</td>`+
                                             `<td>`+value.total_quantity+`</td>`+
                                             `<td>`+(value.reduce_date== null ?'N/A':value.reduce_date)+`</td></tr>`;

                                             html = html+ a;
                                  }

                              html = html + `</tbody></table><div></div><div style="float:left"><span style="font-size:20px">Total Order count : ${box_80+box_60}</span></div>
                                             <div style="float:right"><span style="float:right;font-size:20px;word-break: keep-all;">Sub total : ${subTotal}</span></div>`;


                              // cancel
                              //                html = html+ `<br><br><h5>Cancellation on the period</h5>
                              //                        <div></div>
                              //                        <table class="table table-hover w-100 dataTable no-footer">
                              //                        <thead>
                              //                            <tr>
                              //                            	<th>Product Code</th>
                              //                            	<th>Product SKU</th>
                              //                            	<th>Product Barcode</th>
                              //                            	<th>Product Name</th>
                              //                            	<th>Product Name</th>
                              //                            	<th>Qty</th>
                              //                            	<th>Expire Date</th>
                              //                            </tr>
                              //                        </thead>
                              //                        <tbody>
                              //                        <tr>`;
                              //
                              //                     for(const [key, value] of Object.entries(totalCancel)){
                              //                    let b = `<td>`+(value.code == null ?'N/A':value.code)+`</td>`+
                              //                            `<td>`+(value.sku == null ?'N/A':value.sku)+`</td>`+
                              //                            `<td>`+(value.barcode == null ?'N/A':value.barcode)+`</td>`+
                              //                            `<td>`+value.name_en+`</td>`+
                              //                            `<td>`+value.name_ja+`</td>`+
                              //                            `<td>`+value.total_quantity+`</td>`+
                              //                            `<td>`+(value.reduce_date== null ?'N/A':value.reduce_date)+`</td></tr>`;
                              //
                              //                    html = html+ b;
                              //                }
                              //
                              //                html = html + `</tbody></table><div></div><div style="float:left"><span style="font-size:20px">Total Order count : ${cancellData.length}</span></div>
                              //                               <div style="float:right"><span style="float:right;font-size:20px;word-break: keep-all;">Sub total : ${cancellSubTotal}</span></div>`;
                              //
                              // //return
                              // html = html+ `<br><br>
                              //         <h5>Returned on the period</h5>
                              //         <table class="table table-hover w-100 dataTable no-footer">
                              //         <thead>
                              //             <tr>
                              //             	<th>Product Code</th>
                              //             	<th>Product SKU</th>
                              //             	<th>Product Barcode</th>
                              //             	<th>Product Name</th>
                              //             	<th>Product Name</th>
                              //             	<th>Qty</th>
                              //             	<th>Expire Date</th>
                              //             </tr>
                              //         </thead>
                              //         <tbody>
                              //         <tr>`;
                              //         console.log(totalReturn);
                              //      for(const [key, value] of Object.entries(totalReturn)){
                              //        if(value.return_qty>0){
                              //            let c = `<td>`+(value.code == null ?'N/A':value.code)+`</td>`+
                              //                    `<td>`+(value.sku == null ?'N/A':value.sku)+`</td>`+
                              //                    `<td>`+(value.barcode == null ?'N/A':value.barcode)+`</td>`+
                              //                    `<td>`+value.name_en+`</td>`+
                              //                    `<td>`+value.name_ja+`</td>`+
                              //                    `<td>`+value.return_qty+`</td>`+
                              //                    `<td>`+(value.reduce_date== null ?'N/A':value.reduce_date)+`</td></tr>`;
                              //
                              //         html = html+ c;
                              //       }
                              // }
                              //
                              // html = html + `</tbody></table><div></div><div style="float:left"><span style="font-size:20px">Total Order count : ${returnData.length}</span></div>
                              //                <div style="float:right"><span style="float:right;font-size:20px;word-break: keep-all;">Sub total : ${returnedSubTotal}</span></div>`;
                              //
                              //
                              // let count =0
                              //
                              // for(const [key3, value3] of Object.entries(netOrders)){
                              //     totalOrders[value3.barcode] = value3;
                              // }
                              //
                              // for(const [key2, value2] of Object.entries(totalCancel)){
                              //   // if(moment($('input[name="dates"]').data('daterangepicker').startDate.format('YYYY-MM-DD')).format('YYYY-MM-DD') <= moment(value2.order_datetime).format('YYYY-MM-DD') && moment(value.order_datetime).format('YYYY-MM-DD') <= moment($('input[name="dates"]').data('daterangepicker').endDate.format('YYYY-MM-DD')).format('YYYY-MM-DD')){
                              //       if(totalOrders[value2.barcode] != null){
                              //             // totalOrders[value2.barcode].quantity = '-'+ value2.quantity;
                              //             totalOrders[value2.barcode].total_quantity = parseInt(totalOrders[value2.barcode].total_quantity) - parseInt(value2.total_quantity !==null ? value2.total_quantity:0);
                              //       }else{
                              //             totalOrders[value2.barcode] = value2;
                              //             totalOrders[value2.barcode].total_quantity = value2.total_quantity !==null ? -(value2.total_quantity):0;
                              //       }
                              //    // }
                              // }
                              //
                              //  for(const [key, value] of Object.entries(totalReturn)){
                              //
                              //      if(value.return_qty != null){
                              //        if(totalOrders[value.barcode] != null){
                              //          totalOrders[value.barcode].total_quantity = parseInt(totalOrders[value.barcode].total_quantity) - parseInt(value.return_qty !==null ? value.return_qty:0);
                              //        }else{
                              //          totalOrders[value.barcode] = value;
                              //          totalOrders[value.barcode].total_quantity = value.return_qty !==null ? -(value.return_qty):0;
                              //      }
                              //   }
                              //  }
                              //
                              // html = html +`<br><br><h5>Net sales on the period (Sales on the period - cancel - returned)</h5>
                              //         <div></div>
                              //         <table class="table table-hover w-100 dataTable no-footer">
                              //         <thead>
                              //             <tr>
                              //             	<th>Product Code</th>
                              //             	<th>Product SKU</th>
                              //             	<th>Product Barcode</th>
                              //             	<th>Product Name</th>
                              //             	<th>Product Name</th>
                              //             	<th>Qty</th>
                              //             	<th>Expire Date</th>
                              //             </tr>
                              //         </thead>
                              //         <tbody>
                              //         <tr>`;
                              //
                              //      for(const [key, value] of Object.entries(totalOrders)){
                              //        count = count+ parseInt(value.total_quantity);
                              //        let d = `<td>`+(value.code == null ?'N/A':value.code)+`</td>`+
                              //                `<td>`+(value.sku == null ?'N/A':value.sku)+`</td>`+
                              //                `<td>`+(value.barcode == null ?'N/A':value.barcode)+`</td>`+
                              //                `<td>`+value.name_en+`</td>`+
                              //                `<td>`+value.name_ja+`</td>`+
                              //                `<td>`+value.total_quantity+`</td>`+
                              //                `<td>`+(value.reduce_date== null ?'N/A':value.reduce_date)+`</td></tr>`;
                              //
                              //     html = html+ d;
                              // }
                              //
                              // html = html + `</tbody></table><div></div><div style="float:left"><span style="font-size:20px">Total Order count : ${recordsTotal-return_deduce}</span></div>
                              //                <div style="float:right"><span style="float:right;font-size:20px;word-break: keep-all;">Sub total : ${count}</span></div>`;

                              $(win.document.body).html(html);
                              // console.log($(win.document.body).html());
                              $(win.document.body).find('h1')
                              .after(`<div style="font-size: 20px;float:right;margin-top:10px;margin-right:30px">80cm Box - ${box_80} |  60cm Box - ${box_60} </div>
                              <br><div style="font-size:20px">Date Range : ${$('input[name="dates"]').data('daterangepicker').startDate.format('YYYY-MM-DD')} - ${$('input[name="dates"]').data('daterangepicker').endDate.format('YYYY-MM-DD')}</div><div style="font-size:20px">Printing date : ${moment().format('YYYY-MM-DD hh:mm:ss')} (${moment().format('ddd')})</div>
                              `)
                              //
                              // $(win.document.body).find('table')
                              // .after(`<div style="float:left"><span style="font-size:20px">Cancel Order Count : ${cancellTotal}</span><br><span style="font-size:20px">Returned Order Count : ${returnedTotal}</span><br><span style="font-size:20px">Net Order count : ${recordsTotal}</span></div>
                              // <div style="float:right"><span style="float:right;margin-right:5%;font-size:20px;word-break: keep-all;">Cancel Sub total :${cancellSubTotal}</span><br><span style="float:right;word-break: keep-all;margin-right:10px;font-size:20px">Returned Sub total :${returnedSubTotal}</span><br><span style="float:right;margin-right:5%;font-size:20px">Net Sub total :${subTotal}</span></div>`)


                          }

                    },
                    {
                        extend: 'excel',
                        text: "{{ __('cms.export') }}",
                        className: 'btn-export',
                      //  key: 'x',
                        title: "OMS Sales Details",
                    },
                    {
                        extend: 'excel',
                        text: "{{ __('cms.export_new') }}",
                        className: 'btn-export-new',
                        //  key: 'x',
                        title:  "OMS Sales Details",
                        customize: function (xlsx) {
                          let sheet = xlsx.xl.worksheets['sheet1.xml'];
                          let numrows = 8;
                          let clR = $('row', sheet);

                          //update Row
                          clR.each(function () {
                              let attr = $(this).attr('r');
                              let ind = parseInt(attr);
                              ind = ind + numrows;
                              $(this).attr("r", ind);
                          });

                          // Create row before data
                          $('row c ', sheet).each(function () {
                              let attr = $(this).attr('r');
                              let pre = attr.substring(0, 1);
                              let ind = parseInt(attr.substring(1, attr.length));
                              ind = ind + numrows;
                              $(this).attr("r", pre + ind);
                          });

                          function Addrow(index, data) {
                              var msg = '<row r="' + index + '">'
                              for (var i = 0; i < data.length; i++) {
                                console.log(data[i].value);
                                  var key = data[i].key;
                                  var value = data[i].value;
                                  msg += '<c t="inlineStr" r="' + key  + '">';
                                  msg += '<is>';
                                  msg += '<t>' + value + '</t>';
                                  msg += '</is>';
                                  msg += '</c>';
                              }
                              msg += '</row>';
                              return msg;
                          }

                          //insert
                          // var title = Addrow(1,[{key:'A1',value: $(t.selector).data('title')}]);
                          var k1 = Addrow(2, [{ key: 'A2', value: "Printing date"},{ key: 'B2', value: `${moment().format('YYYY-MM-DD hh:mm:ss')}`}]);
                          var k2 = Addrow(3, [{ key: 'A3', value: "Date Range"},{ key: 'B3', value: `${$('input[name="dates"]').data('daterangepicker').startDate.format('YYYY-MM-DD')} - ${$('input[name="dates"]').data('daterangepicker').endDate.format('YYYY-MM-DD')}`}]);
                          var k3 = Addrow(4, [{ key: 'A4', value: "80cm box -"},{key: 'B4', value:  `${box_80}`},{ key: 'D4', value: "60cm box -"},{key: 'E4', value: `${box_60}`}]);
                          var k4 = Addrow(5, [{ key: 'A5', value: "Total Order count -"},{key: 'B5', value:  `${box_80+box_60}`},{ key: 'D5', value: "Total Sub Total -"},{key: 'E5', value:  `${subTotal}`}]);
                          // var k5 = Addrow(6, [{ key: 'A6', value: "Cancelled Order count -"},{key: 'B6', value:  `${cancellTotal}`},{ key: 'D6', value: "Cancelled Sub Total -"},{key: 'E6', value:  `${cancellSubTotal}`}]);
                          // var k6 = Addrow(7, [{ key: 'A7', value: "Returned Order count -"},{key: 'B7', value:  `${returnedTotal}`},{ key: 'D7', value: "Returned Sub Total -"},{key: 'E7', value:  `${returnedSubTotal}`}]);
                          // var k7 = Addrow(8, [{ key: 'A8', value: "Net Order count -"},{key: 'B8', value:  `${recordsTotal}`},{ key: 'D8', value: "Net Sub Total -"},{key: 'E8', value:  `${subTotal}`}]);

                          sheet.childNodes[0].childNodes[1].innerHTML = k1+k2+k3+k4+sheet.childNodes[0].childNodes[1].innerHTML ;

                        }
                    },
                ],
            },
            columns: [
                {
                    data: 'code', name: 'order_products.code',
                    render: function ( data, type, row, meta ) {
                        return data ? data : '{{ __('cms.na') }}';
                    },
                },
                {
                    data: 'sku', name: 'order_products.sku',
                    render: function ( data, type, row, meta ) {
                        return data ? data : '{{ __('cms.na') }}';
                    },
                },
                {
                    data: 'barcode', name: 'order_products.barcode',
                    render: function ( data, type, row, meta ) {
                        return data ? data : '{{ __('cms.na') }}';
                    },
                },
                // { data: 'name', name: 'order_products.name', width: '55%'},
                {
                    data: 'name_en', name: 'products.name_en', width: '25%',
                    render: function ( data, type, row, meta ) {
                        return data ? data : '{{ __('cms.na') }}';
                    },
                },
                {
                    data: 'name_ja', name: 'products.name_ja', width: '25%',
                    render: function ( data, type, row, meta ) {
                        return data ? data : '{{ __('cms.na') }}';
                    },
                },
                { data: 'total_quantity', name: 'total_quantity', searchable: false},
                { data: 'return_qty', name: 'return_quantity', searchable: false},
                { data: 'reduce_date', name: 'reduce_date', searchable: false},
                { data: 'status', name: 'status',
                    render: function ( data, type, row, meta ) {
                      $status = '';
                      switch (data) {
                        case 6:
                            $status = 'Cancel';
                            break;
                        case 7:
                            $status = 'Returned';
                            break;
                        default:
                            $status = '';
                      }
                      return $status;
                    },
                }
            ],
        })

    })


    $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
        const tableId = '#dataTable_' + $(e.target).data('tab-index')
        const instance = window.dataTablesHelper.instance[tableId]
        if (instance) {
            //to fix distored table header
            instance.draw()
        }
    })
});
</script>
@endpush

@section("title")
Sales Today
@endsection
@section("content")
<div class="row mb-5">
    <div class="col-md-auto mb-2 mb-md-0">
        <div class="row">
            <div class="col-auto">
                <x-card.stat
                class="testing-card"
                    title="Sales Today"
                    value="{{ $today_count }}"
                >
                </x-card.stat>
            </div>
            <div class="col col-sm-auto">
                <x-card.stat
                    title="Sales This Month"
                    value="{{ $this_month_count }}"
                />
            </div>
        </div>
    </div>
</div>

<ul class="nav nav-tabs border-0 nav-tabs--dataTables" role="tablist">
    @php
        $tables = [
            __('cms.today'),
          //  __('cms.tomorrow'),
          //  __('cms.2_days_later')
        ];
    @endphp
    @foreach ($tables as $table)
        @php
            $i = $loop->index;
            $class = $i == 0? 'active' : '';
            $selected = $i == 0? 'true' : 'false';
            $table_title = $table;
            if ($table == __('cms.today')) {

                if($date){
                  $table_title = $table.'('.$date.')';
                }else{
                  echo now()->toDateString();
                  $table_title = $table.'('.now()->toDateString().')';
                }
                //$table_title = $table.'('.now()->toDateString().')';
            }
            else if ($table == __('cms.tomorrow')) {
                $table_title = $table.'('.now()->addDays(1)->toDateString().')';
            }
            else if ($table == __('cms.2_days_later')) {
                $table_title = $table.'('.now()->addDays(2)->toDateString().')';
            }
        @endphp
        <li class="nav-item">
        <a class="nav-link border-0 rounded-0 font-weight-medium text-body-color {{ $class }} tab-title" data-toggle="tab" href="{{ '#tab_' . $i }}" role="tab" aria-selected="{{ $selected }}" data-tab-index="{{ $i }}">{{ $table_title }}</a>
        </li>
    @endforeach
</ul>
<div class="tab-content">
    @foreach ($tables as $table)
        @php
            $i = $loop->index;
            $class = $i == 0? 'show active' : '';
        @endphp
        <div class="tab-pane fade {{ $class }}" id="{{ 'tab_' . $i }}" role="tabpanel">
            <div class="card">
                <div class="card-body table-dataTable table-responsive">
                  <div class="dataTable-custom-toolbar--source">

                      <div class="row justify-content-end align-items-center">
                      <div class="col-sm-auto">
                @php
                    $country_options = ['1'=>'China','2'=>'Hong Kong','3' => 'Japan','4'=>'Korea','5'=>'USA'];

                @endphp
                {{
                    Form::select('country_option',  array_merge(['0' =>'All Country'], $country_options), null, ['id' => 'country-option', 'class' => "text-status font-weight-600 form-control form-control-sm", 'style' => 'min-width: 100px;'])
                }}

              </div>
              <div class="col-sm-auto">
                @php
                    $platforms_options = \App\Platform::all()->pluck('name', 'id')->toArray();

                @endphp
                {{
                    Form::select('platforms_option',  array_merge(['0' =>'All Platforms'], $platforms_options), null, ['id' => 'platform-option', 'class' => "text-status font-weight-600 form-control form-control-sm", 'style' => 'min-width: 100px;'])
                }}

              </div>
              <div class="col-sm-auto">
                @php
                    $stores_options = \App\Store::where('platform_id',$platform)->where('status',1)->pluck('name', 'id')->toArray();

                @endphp
                {{
                    Form::select('store_option',  array_merge(['0' =>'All Stores'], $stores_options), null, ['id' => 'store-option', 'class' => "text-status font-weight-600 form-control form-control-sm", 'style' => 'min-width: 100px;'])
                }}

              </div>
                        <div class="col-sm-auto">
                            <div class="input-group">
                                <div class="input-group-prepend"> <span class="input-group-text"><i class="far fa-calendar"></i></span> </div>
                                <input type="text" name="dates" class="form-control pull-right form-control-sm order-daterangepicker" style="min-width:150px;">
                            </div>
                        </div>
                      </div>
                  </div>
                    <table id="{{ 'dataTable_' . $i }}" class="table table-hover w-100" data-title="{{ __('cms.site_title') . ' ' . __('cms.picking.picking_details') . ' - ' . $table }}">
                        <thead>
                            <tr>
                                <th scope="col">{{ __('cms.picking.product_code')}}</th>
                                <th scope="col">{{ __('cms.picking.product_sku')}}</th>
                                <th scope="col">{{ __('cms.picking.product_barcode')}}</th>
                                <th scope="col">{{ __('cms.picking.product_name')}}</th>
                                <th scope="col">{{ __('cms.picking.product_name')}}</th>
                                <th scope="col">{{ __('cms.order.qty')}}</th>
                                <th scope="col">Return Qty</th>
                                <th scope="col">Reduce Date</th>
                                <th scope="col">Status</th>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>
    @endforeach
</div>
@endsection