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

@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 src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2014-11-29/FileSaver.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.12.13/xlsx.full.min.js"></script>
<script type="text/javascript">
$(function () {



$(".download-shipping").click(function () {
    var datas = table.rows({ selected: true }).data();
    var workbook = XLSX.utils.book_new();
    var excelData = [];
    var worksheetData = [];
console.log(datas);
    if (datas.length > 0) {

	if($("select[name='download_platform_id'").val() ==='8'){
		 let orders = [];
        $(".selected").each(function(){
            orders.push($(this).find('.text-green').html());
        });

        const url = "https://oms-dev.vibexpharmaceutical.com/cms/shipping/download_shipping"+"?orders="+orders.join(',')+"&store="+$('select[id="store-option"]').val()+"&platform="+getUrlParameter('platform');
        window.open(url);
	return true;
	}else if($("select[name='download_platform_id'").val() ==='18'){
		for (var i = 0; i < datas.length; i++) {
            var d = [];
            d.push(i + 1); // 번호
            d.push(datas[i]['order_products'][0]['product_order']['Bundle delivery number'] ??datas[i]['order_products'][0]['product_order']['묶음배송번호']); // 묶음배송번호
            d.push(datas[i]['external_order_id'] ?? ''); // 주문번호
         d.push(
    		datas[i]['courier_name'] === 'EMS' ? '우체국 EMS' :
    datas[i]['courier_name'] === 'CJ GLS (New)' ? 'CJ 대한통운' :''
);
// 택배사
            d.push(datas[i]['tracking_number'] ?? ''); // 운송장번호
            d.push('N'); // 분리배송 Y/N
	    d.push('');
	    d.push('');
	    d.push('');
	    d.push('');
	    d.push('');
	    d.push('');
	    d.push('');
	    d.push('');
            d.push(datas[i]['order_products'][0]['product_order']['Option ID'] ??datas[i]['order_products'][0]['product_order']['옵션ID']); // 옵션ID
            excelData.push(d);
        }

 // Header
    var worksheetData = [
        ['번호', '묶음배송번호', '주문번호', '택배사', '운송장번호', '분리배송 Y/N','분리배송 출고예정일','주문시 출고예정일','출고일(발송일)','주문일','등록상품명','등록옵션명','노출상품명(옵션명)','노출상품ID','옵션ID','최초등록옵션명','업체상품코드','바코드','결제액','배송비구분','배송비','도서산간 추가배송비','구매수(수량)','옵션판매가(판매단가)','구매자','구매자전화번호','수취인이름','수취인전화번호','우편번호','수취인 주소','배송메세지','상품별 추가메시지','주문자 추가메시지','배송완료일','구매확정일자','개인통관번호(PCCC)','통관용구매자전화번호','기타','결제위치'],
        ...excelData
    ];
	}else if($("select[name='download_platform_id'").val() ==='19'){




	for (var i = 0; i < datas.length; i++) {
            var d = [];
            d.push(''); // 번호
            d.push(''); // 묶음배송번호
            d.push(datas[i]['external_order_id'] ?? ''); // 주문번호
            d.push('');
            d.push(datas[i]['tracking_number'] ?? ''); // 운송장번호
            d.push(
    		datas[i]['courier_name'] === 'EMS' ? '2' :
    datas[i]['courier_name'] === 'CJ GLS (New)' ? '4' :''
); 
            d.push(''); // 옵션ID
            excelData.push(d);
        }

 // Header
    var worksheetData = [
        ['쇼핑몰', '쇼핑몰번호', '주문번호', '품목별 주문번호', '운송장번호', '배송 업체 번호', '수량'],
        ...excelData
    ];


	}else{
		return false;
	};
        

    // Create worksheet from combined data
    var worksheet = XLSX.utils.aoa_to_sheet(worksheetData);

    // Add to workbook
    XLSX.utils.book_append_sheet(workbook, worksheet, "Shipping");

    // Save file
    XLSX.writeFile(workbook, "shipping-download.xls");

    }

   
});




    $('input[name="dates"]').daterangepicker({
        startDate: moment().subtract(1, 'month'), // 7天前（包括今天共7天）
    endDate: moment(),                      // 今天
    locale: { 
        cancelLabel: 'Clear', 
        format: 'YYYY-MM-DD'
    }
    }, function(chosen_date) { });
    $('input[name="dates"]').on('cancel.daterangepicker', function(ev, picker) {
        $('input[name="dates"]').val('');
        localStorage.clear();
       // $('#dataTable').DataTable().ajax.reload();
    });

   // $('input[name="dates').val('');
    $('input[name="dates"]').attr("placeholder","Picking Date");
    $('input[name="dates"]').on('change', function () {
        setTimeout(function(){
         //   $('#dataTable').DataTable().ajax.reload();
        }, 100);
        // $(".testing-card > div > p").text("Picking: "+$('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').DataTable().ajax.reload();
        $(`#form_export [name=${$(this).attr('name')}]`).val($(this).find('option:selected').val())
    })

    $(".shipping-button").on('click',function(){
        let orders = [];
        $(".selected").each(function(){
            orders.push($(this).find('.text-green').html());
        });

        const url = "{{ route('cms.shipping.download_shipping')}}"+"?orders="+orders.join(',')+"&store="+$('select[id="store-option"]').val()+"&platform="+getUrlParameter('platform');
        window.open(url);
    });

    $(".selected-picking").on('click',function(){
      let ids = '';
      let date = '';
      const selectedRows = Array.from(document.querySelectorAll('#dataTable tbody tr.selected'));

const orderNumbers = selectedRows.map(tr => {
    const cell = tr.querySelector('td:nth-child(3) span.text-green');
    return cell ? cell.textContent.trim() : null;
}).filter(Boolean);

ids = orderNumbers.join(',');

        if($("input[name='dates']").val() === ""){
          date = moment().format('YYYY-MM-DD') +' - '+ moment().format('YYYY-MM-DD');
        }else{
          date = $("input[name='dates']").val();
        }

        let url = window.location.origin+window.location.pathname+"/details?ids="+ids+"&date="+date+"&mode=1";

        $(".selected-picking").attr('href',url);
    })


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






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



    var getUrlParameter = function getUrlParameter(sParam) {
    var sPageURL = window.location.search.substring(1),
        sURLVariables = sPageURL.split('&'),
        sParameterName,
        i;

        for (i = 0; i < sURLVariables.length; i++) {
          sParameterName = sURLVariables[i].split('=');
          if (sParameterName[0] === sParam) {
            return typeof sParameterName[1] === undefined ? true : decodeURIComponent(sParameterName[1]);
          }
      }
      return false;
    };
    if(getUrlParameter('platform') == 8 || getUrlParameter('platform') == 4 || getUrlParameter('platform') == 6){
      $("#store-option").show();
      $(".shipping-button").show();
    }else{
      $("#store-option").hide();
      $(".shipping-button").hide();
    }


let platformVal = getUrlParameter('platform') || '';


let platformArray = Array.isArray(platformVal)
  ? platformVal
  : (platformVal ? platformVal.split(',') : []);

   let jp     = ['17','12','13','14','15','20'];
let china  = ['9','10','11'];
let hk     = ['3'];
let korea  = ['5','16','7','8','2','4','6','18','19','21'];
let usa    = ['1'];

// Check if any values match
let isJp     = jp.some(val => platformArray.includes(val));
let isChina  = china.some(val => platformArray.includes(val));
let isHk     = hk.some(val => platformArray.includes(val));
let isKorea  = korea.some(val => platformArray.includes(val));
let isUsa    = usa.some(val => platformArray.includes(val));

// Apply logic in order of priority
if (isJp) {
  $("#country-option").val(3);   // Japan
} else if (isChina) {
  $("#country-option").val(1);   // China
} else if (isHk) {
  $("#country-option").val(2);   // Hong Kong
} else if (isKorea) {
  $("#country-option").val(4);   // Korea
} else if (isUsa) {
  $("#country-option").val(5);   // USA
}



if (platformVal.includes(',') || platformVal.trim() === '') {
    platformVal = '0';
}

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

getPlatformByCountry($("#country-option").val());
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());
});


    @php
        $no_data_message = __('cms.order.no_data.'.\App\Order::Picking);
    @endphp
    const table = window.dataTablesHelper.init({
        language: {
          emptyTable: "{{ $no_data_message }}"
        },
	serverSide: true,
	deferLoading: 0,
        pageLength: 200,
        lengthMenu: [100, 200, 300, 400, 500, 600, 700, 800 ,900 ,1000],
        stateSave: true,
	scrollX: true,
        ajax: {
            url: '{!! route('cms.orders.datatable', ['status' => \App\Order::Picking, 'platform' => $platform]) !!}',
            data: function (d) {
                d.picking_date = $('[name=picking_date] option:selected').val();
                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 = '3'; // picking_date
                    d.start_date = startDate;
                    d.end_date = endDate;
                }

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

            },
        },
        order: [[ 3, 'desc' ]],
        buttons: {
            buttons: [
                {
                    extend: 'selected',
                    text: "{{ __('cms.order.move_to_status', ['status' => __('cms.order.status.' . \App\Order::Shipping)]) }}",
                    className: 'btn-move-to-status',
                    //key: 'm',
                    action: function ( e, dt, node, config ) {
                        const rows = dt.rows( { selected: true } );
                        const ids = rows.data().toArray().map(item => item.id);

                        $.ajax({
                            url: "{{ route('cms.orders.update_status') }}",
                            method: 'post',
                            dataType:"json",
                            data: {
                                "_token": "{{ csrf_token() }}",
                                "ids": ids,
                                "target_status": "{{ \App\Order::Shipping }}"
                            },
                            beforeSend:function(XMLHttpRequest){

                            },
                            complete:function(jqXHR, textStatus) {

                            },
                            success: function(data){
                                alert("{{ __('cms.success') }}");
                                table.ajax.reload();
                            },
                            error: function (request, status, error) {
                                let json = $.parseJSON(request.responseText);
                                alert(json.message);
                                console.log(json);
                            }
                        });
                    }
                },
                {
                    extend: 'selected',
                    text: "{{ __('cms.order.print_invoice') }}",
                    className: 'btn-print-invoice',
                    //key: 'm',
                    action: function ( e, dt, node, config ) {
                        const rows = dt.rows( { selected: true } );
                        const ids = rows.data().toArray().map(item => item.id);

                        const url = "{{ route('cms.orders.invoice', ['ids' => '__ids__']) }}".replace('__ids__', ids.join(','))
                        window.open(url);
                    }
                },
                {
                    extend: 'selected',
                    text: "Print Dispatch Note",
                    className: 'btn-print-dispatch',
                  //  key: 'm',
                    action: function ( e, dt, node, config ) {
                        const rows = dt.rows( { selected: true } );
                        const ids = rows.data().toArray().map(item => item.id);
                        // const date = $("input[name='dates']").val();

                        const url = "{{route('cms.picking.dispatch_note', ['ids' => '__ids__']) }}".replace('__ids__', ids.join(','))

                        window.open(url);
                    }
                },
                {
                    extend: 'selected',
                    text: "Print Delivery Note",
                    className: 'btn-print-delivery',
                  //  key: 'm',
                    action: function ( e, dt, node, config ) {
                        const rows = dt.rows( { selected: true } );
                        const ids = rows.data().toArray().map(item => item.id);
                        // const date = $("input[name='dates']").val();

                        const url = "{{route('cms.picking.delivery_note', ['ids' => '__ids__']) }}".replace('__ids__', ids.join(','))

                        window.open(url);
                    }
                },
		 {
                    extend: 'selected',
                    text: "{{ __('cms.order.move_to_status', ['status' => __('cms.order.status.' . \App\Order::Pending)]) }}",
                    className: 'btn-move-to-status-pending',
                    //key: 'm',
                    action: function ( e, dt, node, config ) {
                        const rows = dt.rows( { selected: true } );
                        const ids = rows.data().toArray().map(item => item.id);

                        $.ajax({
                            url: "{{ route('cms.orders.update_status') }}",
                            method: 'post',
                            dataType:"json",
                            data: {
                                "_token": "{{ csrf_token() }}",
                                "ids": ids,
                                "target_status": "{{ \App\Order::Pending }}"
                            },
                            beforeSend:function(XMLHttpRequest){

                            },
                            complete:function(jqXHR, textStatus) {

                            },
                            success: function(data){
                                alert("{{ __('cms.success') }}");
                                table.ajax.reload();
                            },
                            error: function (request, status, error) {
                                let json = $.parseJSON(request.responseText);
                                alert(json.message);
                                console.log(json);
                            }
                        });
                    }
                },
            ],
        },
        columns: [
            {
                ...window.dataTablesHelper.selectCheckbox.columnData,
                render: function ( data, type, row, meta ) {
                    return window.dataTablesHelper.selectCheckbox.html;
                },
            },
            { data: 'product_number', name: 'product_number',
              render: function ( data, type, row, meta ) {
                if(row.platform_id == 1){
                  return  row.order_item_id;
                }
                if(row.platform_id ==4){
                  return "N/A"
                }
                return data;
              },
            },
		 {
                data: 'external_order_id', name: 'external_order_id',
                render: function ( data, type, row, meta ) {
                  if(row.platform_id == 1){
                      return `<span class="text-green">${row.order_item_id}</span>`;
                  }
                    return `<span class="text-green">${data}</span>`;
                },
            	},
 		{ data: 'invoice_number', name: 'invoice_number',},
		{ data: 'platform_name', name: 'platforms.name',
            		render: function ( data, type, row, meta ) {
                	return `${data}`+row.store_id;
              		}
            	},

		{ data: 'order_products', name: 'product_name',
            		render: function ( data, type, row, meta ) {
                	return row.order_products.map(p => p.product_name).join('|');;
              		}
            	},
	        { data: 'order_products', name: 'product_qty',
            		render: function ( data, type, row, meta ) {
                	return row.order_products.map(p => p.qty).join('|');;
              		}
            	},

		{ data: 'courier_name', name: 'couriers.name',
                	render: function ( data, type, row, meta ) {
                    	   var displayName = '{{ __('cms.na') }}';
                    	    if (data) { displayName = data; }
                    		return displayName;
                	}
            	},
		{ data: 'tracking_number', name: 'tracking_number',},
		{
                	data: 'status', name: 'status',
                render: function ( data, type, row, meta ) {
                    var displayName = '{{ __('cms.na') }}';
                    switch (data) {
                        case 1:
                            displayName = "{{ __('cms.order.status.1') }}";
                            break;
                        case 2:
                            displayName = "{{ __('cms.order.status.2') }}";
                            break;
                        case 3:
                            displayName = "{{ __('cms.order.status.3') }}";
                            break;
                        case 4:
                            displayName = "{{ __('cms.order.status.4') }}";
                            break;
                        case 5:
                            displayName = "{{ __('cms.order.status.5') }}";
                            break;
                        case 6:
                            displayName = "{{ __('cms.order.status.6') }}";
                            break;
                        case 7:
                            displayName = "{{ __('cms.order.status.7') }}";
                            break;
                        default:
                            break;
                    }
                    return `<span class="badge badge-pill badge-status badge-order-status-${data}">${displayName}</span>`;
                }
            },
		{ data: 'order_datetime', name: 'order_datetime',},
		{ data: 'created_at', name: 'created_at',},
		{ data: 'picking_datetime', name: 'picking_datetime',},
           
            { data: 'shipping_datetime', name: 'shipping_datetime',},
               {
                data: 'action', name: 'action', searchable: false, class: 'action-cell text-center',
                render: function ( data, type, row, meta ) {
                    var isDataOK = true;
                    if (row['shipping_datetime'] && row['tracking_number']) {
                        isDataOK = true;
                    }
                    return isDataOK? `<button type="button" class="btn btn-sm btn-plain btn-info-modal" data-index="${meta['row']}"><i class="px-3 fas fa-pencil-alt"></i></button>` : `<button type="button" class="btn btn-sm btn-outline-primary btn-info-modal" data-index="${meta['row']}">{{ __('cms.fill') }}</button>`
                }
            },
            {
                data: 'aftership_status', name: 'aftership_status', searchable: false, class: 'action-cell text-center',
                render: function ( data, type, row, meta ) {
                    if(data ==0){
                      return `<span> Not Synced</span>`;
                    }else{
                      return `<span>Synced</span>`;
                    }
                }
            },
        ],
        enableSelect: true,
        isSelectableRow: function(row, data, dataIndex) {
            return true;
        },
        onSelectRow: function (count) {
            // $(".testing-card > .card-body > .row > .col > .my-2 > .display-value").text(count);
            $('.btn-move-to-status span').html(`{{ __('cms.order.move_to_status', ['status' => __('cms.order.status.' . \App\Order::Shipping)]) }}${count > 0? ` (${count})` : ''}`)
 $('.btn-move-to-status-pending span').html(`{{ __('cms.order.move_to_status', ['status' => __('cms.order.status.' . \App\Order::Pending)]) }}${count > 0? ` (${count})` : ''}`)
            $('.btn-print-invoice:eq(0) span').html(`{{ __('cms.order.print_invoice') }}${count > 0? ` (${count})` : ''}`)
            $('.btn-print-dispatch span').html(`Print Dispatch Note ${count > 0? ` (${count})` : ''}`)
            $('.btn-print-delivery span').html(`Print Delivery Note ${count > 0? ` (${count})` : ''}`)
            $("#selected-picking > div > .row > div > h2> span").text(count);
        },
        onClickRow: function(id) {
            if (!id) { return; }

            var url = '{{ route('cms.orders.show', '__id__') }}'.replace('__id__', id);
            window.location.href = url;
        },
        stateSaveCallback: function(settings,data) {
               localStorage.setItem( 'clist_DataTables_' + settings.sInstance, JSON.stringify(data) )
           },
        stateLoadCallback: function(settings) {
             if(performance.navigation.type == 2){
                 return JSON.parse( localStorage.getItem( 'clist_DataTables_' + settings.sInstance ) )
             }else{
               return true;
             }
        },
    })


$(document).on('click', '.btn-info-modal', function () {
        $('#modal_info').remove()

        const id = table.row($(this).data('index')).data()['id']

        $.ajax({
            url: "{{ route('cms.shipping.info_modal') }}",
            method: 'get',
            data: {
                "_token": "{{ csrf_token() }}",
                id
            },
            beforeSend:function(XMLHttpRequest){
            },
            complete:function(jqXHR, textStatus) {
            },
            success: function(data){
                $('body').append(data)

                $('#modal_info').on('shown.bs.modal', function (e) {
                    window.initFormSubmit({
                        selector: '#modal_info form',
                        onSubmit: function ({ form }) {
                            $('#modal_info').modal('toggle')
                            table.ajax.reload()
                        }
                    })
                })
                .modal('toggle')

                let shipper = {!! json_encode($shippers) !!};
                window.initShipperDropdownOnChange(shipper)
            },
            error: function (request, status, error) {
                let json = $.parseJSON(request.responseText);
                alert(json.message);
                console.log(json);
            }
        });
    })



});



</script>
@endpush

@section("title")

@if (count(explode(',', $platform))>1)
{{$country}} Total Picking
@endif

@if (count(explode(',', $platform)) == 1)
{{ __('cms.order.platforms.' . $platform) }} {{ __('cms.sidemenu.picking') }}
@endif

@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 }}"
                >
                    <div class="col-auto d-flex align-items-center ml-5">
                        <a href="{{ route('cms.picking.details') }}" class="badge badge-pill badge-outline-primary badge-details">
                            {{ __('cms.picking.details') }}
                            <i class="fas fa-chevron-right ml-2"></i>
                        </a>
                    </div>
                </x-card.stat>
            </div>

            <div class="col-auto">
              <x-card.stat
              class="testing-card"
                  title="Selected Picking"
                  value="0"
                  id="selected-picking"
              >
                  <div class="col-auto d-flex align-items-center ml-5">
                      <a href="{{ route('cms.picking.details') }}" class="badge badge-pill badge-outline-primary badge-details selected-picking" >
                          {{ __('cms.picking.details') }}
                          <i class="fas fa-chevron-right ml-2"></i>
                      </a>
                  </div>
              </x-card.stat>
            </div>

            <div class="col col-sm-auto">
                <x-card.stat
                    title="{{ __('cms.picking.stats.month') }}"
                    value="{{ $this_month_count }}"
                />
            </div>

            <div class="col col-sm-auto">
                <x-card.stat
                    title="Total {{isset($status)? __('cms.order.status.' . $status) : ' All'}} Picking "
                    value="{{ $month_status_count }}"
                />
            </div>

            <div class="col col-sm-auto">
                <x-card.stat
                    title="Sales Today"
                    value="{{ $today_sales_count }}"
                >
                <div class="col-auto d-flex align-items-center ml-5">
                    <a href="{{ route('cms.picking.today')}}" class="badge badge-pill badge-outline-primary badge-details sales-detail" >
                        {{ __('cms.picking.details') }}
                        <i class="fas fa-chevron-right ml-2"></i>
                    </a>
                </div>
                </x-card.stat>
            </div>
        </div>
    </div>

    @if ($platform ==4 || $platform ==8 || $platform ==6)
    <div class="col-md d-flex justify-content-md-end align-items-end">
         <div class="row">
            <div class="col-auto">
                <button type="button" class="btn btn-primary btn-icon shipping-button">
                    <i class="las la-download mr-2"></i>
                    {{ __('cms.shipping.download_shipping') }}
                </button>
          </div>
        </div>
    </div>

    @endif

</div>

<div class="row" style="justify-content:right;margin-bottom:25px;">

<div class="col-auto">
	<button type="button" class="btn btn-primary btn-icon" data-toggle="modal" data-target="#shipping_number_download">
		<i class="las la-download mr-2"></i>
                    Download Shipping No.
                </button>
</div>
 <div class="col-auto">
         <button type="button" class="btn btn-secondary btn-icon" data-toggle="modal" data-target="#tracking_number_import">
                <i class="las la-upload mr-2"></i>
                        Upload Shipping No.
                    </button>
                </div>
</div>

@php
    $dates_options = [
        '+0' => __('cms.today'),
        '+1' => __('cms.tomorrow'),
        '+2' => __('cms.2_days_later'),
        '+7' => __('cms.this_week'),
    ];
@endphp



<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">
                    {{
                        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>

<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" class="table table-hover w-100">
            <thead>
                <tr>
                    <th class="align-middle"><span class="select-checkbox"></span></th>
		    <th>Product Order Number</th>
                    <th>{{ __('cms.order.order_no')}}</th>
                    <th>{{ __('cms.order.invoice_no')}}</th>
                    <th>{{ __('cms.order.platform')}}</th>
		    <th>Product Name</th>
		    <th>Qty</t>
		    <th>{{ __('cms.order.courier')}}</th>
  		    <th>Tracking No. / HAWB No.</th>
		    <th>{{ __('cms.status')}}</th>
		    <th>{{ __('cms.order.order_date')}}</th>
                    <th>{{ __('cms.order.import_date')}}</th>
 		    <th>Picking Date</div>
		    <th>Shipping Date</div>
		    <th>Edit</div>
		    <th>Sync After Ship</th>
                    
                </tr>
            </thead>
        </table>
    </div>
</div>




<x-modal.master id="shipping_number_download" class="modal-import" title="Download Shipping No." size="lg">

@php
    $platforms_options = \App\Platform::all()->pluck('name', 'id');
@endphp

       <div class="mb-3">
    <label for="download_platform_id" class="form-label">Platforms</label>
    <select name="download_platform_id" id="download_platform_id" class="form-select form-control ">
	
        @foreach ($platforms_options as $id => $name)
            <option value="{{ $id }}">{{ $name }}</option>
        @endforeach
    </select>
</div>

<div class="row my-6">
                <div class="col"></div>
                <div class="col-auto">
                    <button class="download-shipping btn btn-primary btn-lg">
                       Download
                    </button>
                </div>
            </div>

    </x-modal.master>



<x-modal.master id="tracking_number_import" class="modal-import" title="{{ __('cms.import') }}" size="lg">
        {{ Form::open(['route' => 'cms.orders.import_tracking', 'method' => 'POST', 'id' => 'upload_tracking', 'files' => true]) }}
            <x-form.form-group.master
                name="upload_tracking"
                label="{{ __('cms.order.raw_files_excel') }}"
                type="file"
            >
                {{ Form::fileUpload('upload_tracking', null, [
                    'multiple' => true,
                    'type' => 'document',
                    'accept' => '.xlsx, .xls, .csv',
                ]) }}
            </x-form.form-group.master>

@php
    $couriers_options = \App\Courier::all()->pluck('name', 'id');
@endphp

<div class="mb-3">
    <label for="courier_id" class="form-label">Apply Courier</label>
    <select name="courier_id" id="courier_id" class="form-select form-control ">
	<option value="0">none</option>
        @foreach ($couriers_options as $id => $name)
            <option value="{{ $id }}">{{ $name }}</option>
        @endforeach
    </select>
</div>

            <div class="row my-6">
                <div class="col"></div>
                <div class="col-auto">
                    <button type="submit" class="btn btn-primary btn-lg">
                        {{ __('cms.import') }}
                    </button>
                </div>
            </div>

        {{ Form::close() }}
    </x-modal.master>


<x-modal.master id="modal_export" title="{{ __('cms.export')}}">

    {{ Form::open(['route' => 'cms.orders.export', 'method' => 'POST', 'id' => 'form_export']) }}

        <input type="hidden" name="status" value="{{ \App\Order::Picking }}">

        @php
            $couriers_options = $couriers->pluck('name', 'id');
            $platforms_options = $platforms->pluck('name', 'id');
            $dates_options = [
                '0' => __('cms.today'),
                '+1' => __('cms.tomorrow'),
                '+2' => __('cms.2_days_later'),
                '+7' => __('cms.this_week'),
            ];

            $fields = [
                [
                    'type' => 'select',
                    'name' => 'courier_id',
                    'label' => __('cms.order.courier'),
                    'options' => $couriers_options,
                    'withAny' => '1'
                ],
                [
                    'type' => 'select',
                    'name' => 'platform_id',
                    'label' => __('cms.order.platform'),
                    'options' => $platforms_options,
                    'withAny' => '1',
                ],
                [
                    'type' => 'select',
                    'name' => 'picking_date',
                    'label' => __('cms.order.picking_date'),
                    'options' => $dates_options,
                    'withAny' => '1'
                ],
            ];

        @endphp
        <x-form.fields field-class="col-12 mb-5" :fields="$fields" editing="1"></x-form.fields>


        <div class="row my-6">
            <div class="col"></div>
            <div class="col-auto">
                <button type="submit" class="btn btn-primary btn-lg">
                    {{ __('cms.picking.export_today_picking_list') }}
                </button>
            </div>
        </div>
    {{ Form::close() }}
</x-modal.master>
@endsection