@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"]').attr("placeholder","Picking Date");
  $('input[name="dates"]').on('change', function () {
      setTimeout(function(){
        //  $('#dataTable_0').DataTable().ajax.reload();
      }, 100);
  });
 



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


function getShopByPlatform(p){
        const xmlhttp = new XMLHttpRequest();
        xmlhttp.onload = function() {
            //$("select[name='shop_id']").empty();
            if(this.response !=='[]'){
                $("select[name='store_option']").empty();
                let selector = document.getElementsByName('store_option');
                let ZeroOption = document.createElement("option");
                    ZeroOption.text = 'All Stores';
                    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='store_option']").parent().show();
            }else {
 		$("select[name='store_option']").empty();
                let selector = document.getElementsByName('store_option');
                let ZeroOption = document.createElement("option");
                    ZeroOption.text = 'All Stores';
                    ZeroOption.value = 0;
                    selector[0].add(ZeroOption);
                $("select[name='store_option']").parent().show();
            }
		//getShopByPlatform($("#platform-option").val());
        }
	c = $("#country-option").val();
        xmlhttp.open("GET", "/cms/stores/get_store?platform=" + p +"&country=" + c);
        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();
}

getShopByPlatform($("#platform-option").val());

$("#country-option").on('change', function(){
	getPlatformByCountry($("#country-option").val());
getShopByPlatform($("#platform-option").val());
});

$("#platform-option").on('change', function(){
	getShopByPlatform($("#platform-option").val());
});

$("#platform-option").val('0');

 setTimeout(function(){
          $('.record-table').DataTable().ajax.reload();
      }, 500);


$('.apply-btn').on('click', function () {
         $('.record-table').DataTable().ajax.reload();
      
     });

    @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,
	    deferLoading: 0,
            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(urlParams.get('ids')){
                          
                          d.ids = urlParams.get('ids');
                        }
                    if ($('input[name="dates"]').val() && !urlParams.get('ids')) {
                        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;
                        }

                    }


d.country = $('#country-option').val();

d.store = $('#store-option').val();
                

                 if($('input[name="product_name"]').val()){
                    d.product_name = $('input[name="product_name"]').val();
                }

                if($('input[name="buyer_id"]').val()){
                    d.buyer_id = $('input[name="buyer_id"]').val();
                }

                if($('input[name="phone_number"]').val()){
                    d.phone_number = $('input[name="phone_number"]').val();
                }

                if($('input[name="address"]').val()){
                    d.address = $('input[name="address"]').val();
                }

 		if($('input[name="buyer_name"]').val()){
                    d.buyer_name = $('input[name="buyer_name"]').val();
                }

		if($('input[name="receiver_name"]').val()){
                    d.receiver_name = $('input[name="receiver_name"]').val();
                }

		if($('input[name="tracking_no"]').val()){
                    d.tracking_no = $('input[name="tracking_no"]').val();
                }

		if($('input[name="order_no"]').val()){
                   d.order_no = $('input[name="order_no"]').val();
                }

               



                },
                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">
                @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('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">
                    {{
                        Form::select('date_option', [
                            '1' => 'Order Date',
                            '2' => 'Import Date',
                        ], null, ['id' => 'date-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 class="col-sm-auto">
                    @if (!isset($status))
                        {{
                            Form::select('status', [
                                '0' => __('cms.all_statuses'),
                                '1' => __('cms.order.status.1'),
                                '2' => __('cms.order.status.2'),
                                '3' => __('cms.order.status.3'),
                                '4' => __('cms.order.status.4'),
                                '5' => __('cms.order.status.5'),
                                '6' => __('cms.order.status.6'),
                                '7' => __('cms.order.status.7'),
                            ], null, ['id'=> 'status-option','class' => "text-status font-weight-600 form-control form-control-sm", 'style' => 'min-width: 200px;', 'plcaeholder' => __('cms.all_statuses')])
                        }}
                    @endif
                </div>

            </div>

<div class="mt-2 row justify-content-end align-items-center">


<div class="col-sm-auto">
                    <div class="input-group">
                        <input type="text" name="order_no" placeholder="Search Order Number" class="form-control pull-right form-control-sm order-no" style="min-width:150px;">
                    </div>
                </div>



<div class="col-sm-auto">
                    <div class="input-group">
                        <input type="text" name="buyer_name" placeholder="Search Buyer Name" class="form-control pull-right form-control-sm buyer_name" style="min-width:150px;">
                    </div>
                </div>


<div class="col-sm-auto">
                    <div class="input-group">
                        <input type="text" name="receiver_name" placeholder="Search Receiver Name" class="form-control pull-right form-control-sm receiver_name" style="min-width:150px;">
                    </div>
                </div>



                <div class="col-sm-auto">
                    <div class="input-group">
                        <input type="text" name="buyer_id" placeholder="Search Buyer ID" class="form-control pull-right form-control-sm order-products" style="min-width:150px;">
                    </div>
                </div>



                <div class="col-sm-auto">
                    <div class="input-group">
                        <input type="text" name="phone_number" placeholder="Search Phone Number" class="form-control pull-right form-control-sm order-products" style="min-width:150px;">
                    </div>
                </div>



                <div class="col-sm-auto">
                    <div class="input-group">
                        <input type="text" name="address" placeholder="Search Address" class="form-control pull-right form-control-sm order-products" style="min-width:150px;">
                    </div>
                </div>




<div class="col-sm-auto">
                    <div class="input-group">
                        <input type="text" name="tracking_no" placeholder="Search Tracking No. " class="form-control pull-right form-control-sm tracking_no" style="min-width:150px;">
                    </div>
                </div>


<div class="col-sm-auto">
                    <div class="input-group">
                        <input type="text" name="product_name" placeholder="Search Product Name" class="form-control pull-right form-control-sm order-products" style="min-width:150px;">
                    </div>
                </div>





    		<div class="col-sm-auto">
                    <div class="input-group">
                        <button type="button" class="text-green border  apply-btn form-control pull-right form-control-sm btn-light-green">Apply</button>
                    </div>
                 </div>
</div>
        </div>


                    <table id="{{ 'dataTable_' . $i }}" class="record-table 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