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

@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 () {

  $('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();
  });

  const urlParams = new URLSearchParams(window.location.search);


  if(urlParams.get('mode')){
    $('select[name="country"]').hide();
  }

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



  $('input[name="dates').val('');
  $('input[name="dates"]').attr("placeholder","Picking Date");
  $('input[name="dates"]').on('change', function () {
      setTimeout(function(){
          $('#dataTable_0').DataTable().ajax.reload();
      }, 100);
      // alert("change date");
      // $(".testing-card > div > p").text("Picking: "+$('input[name="dates').val());
        $(".tab-title").text($('input[name="dates').val());
      // $(".testing-card").attr('title',$(".testing-card").text()+$('input[name="dates').val());
  });
  //
  // $('.dataTable-custom-toolbar--source [name=picking_date]').on('change', function () {
  //     $('#dataTable_0').DataTable().ajax.reload();
  //     $(`#form_export [name=${$(this).attr('name')}]`).val($(this).find('option:selected').val())
  // })

  $(".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 box_60 = 0;
    let box_80 = 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_datatable') }}",
                data: function (d) {
                    // d.picking_date = t.param;


                    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;
                        if(!urlParams.get('mode')){
                            d.platform = $('select[name="country"]').val();
                        }else{
                            d.platform = 0;
                        }

                    }else{
                        if(urlParams.get('ids')){
                            console.log("@@@@@@@22222");
                          d.ids = urlParams.get('ids');
                        }
                    }

                },
                dataSrc: function ( data ) {


                  if(data.data.length != 0){
                    box_60 = 0;
                    box_80 = 0;
                    subTotal = 0;
                    recordsTotal = 0;
                    let ids = [];
                      data.data.forEach((item, i) => {
                        if(!ids.includes(item.order_id)){
                          item.box_type === 0 ?box_60++:box_80++;
                          ids.push(item.order_id);
                        }
                        recordsTotal = ids.length;
                        subTotal = (subTotal + parseInt(item.total_quantity));
                      });

                      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;
                      }
                      console.log('60box=>'+box_60);
                      console.log('80box=>'+box_80);
                    return data.data;

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

                              $(win.document.body).find('h1')
                              .after(`<div style="font-size: 20px;float:right;margin-top:10px;margin-rigth:30px">80cm Box - ${box_80} |  60cm Box - ${box_60} </div>
                              <br><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(`<span style="float:left;font-size:20px">Total order count - ${recordsTotal}</span> <span style="float:right;margin-right:5%;font-size:20px">Sub total - ${subTotal}</span>`)

                          }
                    },
                    {
                        extend: 'excel',
                        text: "{{ __('cms.export') }}",
                        className: 'btn-export',
                      //  key: 'x',
                        title: $(t.selector).data('title'),
                    },
                    {
                        extend: 'excel',
                        text: "{{ __('cms.export_new') }}",
                        className: 'btn-export-new',
                        //  key: 'x',
                        title: $(t.selector).data('title'),
                        customize: function (xlsx) {

                            let sheet = xlsx.xl.worksheets['sheet1.xml'];
                            let numrows = 4;
                            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++) {
                                    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: "80cm box -"},{key: 'B3', value:  `${box_80}`},{ key: 'D3', value: "60cm box -"},{key: 'E3', value: `${box_60}`}]);
                            var k3 = Addrow(4, [{ key: 'A4', value: "Total order count -"},{key: 'B4', value:  `${recordsTotal}`},{ key: 'D4', value: "Sub Total -"},{key: 'E4', value:  `${subTotal}`}]);

                            sheet.childNodes[0].childNodes[1].innerHTML = k1+k2+k3+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: 'reduce_date', name: 'reduce_date', searchable: false},

            ],
        })

    })


    $('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")
{{ __('cms.picking.picking_details') }}
@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="{{ __('cms.picking.stats.today') }}"
                    value="{{ $today_count }}"
                >
                </x-card.stat>
            </div>
            <div class="col col-sm-auto">
                <x-card.stat
                    title="{{ __('cms.picking.stats.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">
                            <div class="input-group">
                              <select name="country">
                                  <option value="0" selected>All Country</option>
                                  <option value="9,10,11">China</option>
                                  <option value="3">Hong Kong</option>
                                  <option value="17,12,13,14,15">Japan</option>
                                  <option value="5,16,7,8,2,4,6">Korea</option>
                                  <option value="1">USA</option>

                              </select>

                            </div>
                        </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">Reduce Date</th>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>
    @endforeach
</div>
@endsection