@extends("cms.layouts.app", ['page_id' => 'analysts_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 () {

  let datas = [];
  let count = 0;
  let shipping_bundle_no = [];
  let order_count =0;
  let selectedRow = [];

  
    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']").parent().hide();
            }
        }
        xmlhttp.open("GET", "/cms/stores/get_store?platform=" + p);
        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('');
        localStorage.clear();
        $('#dataTable').DataTable().ajax.reload();
    });

    $('input[name="dates').val('');
    $('input[name="dates"],#date-option').on('change', function () {
        setTimeout(function(){
            $('#dataTable').DataTable().ajax.reload();
        }, 100);
    });

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

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

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

    $('.dataTable-custom-toolbar--source [name=status]').on('change', function () {
        $('#dataTable').DataTable().ajax.reload();
        $(`#form_export [name=${$(this).attr('name')}]`).val($(this).find('option:selected').val())
    })

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

            },
            dataSrc:function(data){
                datas = [];
                order_count = data.data.length;
                let bundle = [];
                let shipping_cost = 0;
                data.data.forEach(function(d){
                    
                   d.order_products.forEach(function(p){
                    let array = [];
                        if(bundle.includes(d.bundle_no)){
                            shipping_cost = 0;
                        }else{
                            shipping_cost = d.shipping_cost;
                            bundle.push(d.bundle_no);
                        }
                        // console.log(shipping_cost);
                        array['order_number'] = d.external_order_id;
                        array['product_order_number'] =  p.product.code;
                        array['order_status'] =  d.status_name;
                        array['product_name'] =  p.product_name;
                        array['product_barcode'] =  p.product.barcode;

                        array['unit_price'] =  p.product.unit_price;
                        array['product_qty'] =  p.product.quantity;

                        array['total_product_price'] =  p.product.total_amount;
                        array['shipping_cost'] =  shipping_cost;
                        array['handling_chargre'] =  p.handling_fee;

                        array['vat'] =  p.vat;
                        array['order_date'] =  d.order_datetime;
                        array['import_date'] =  d.created_at;

                        array['platform'] =  d.platform_name;
                        array['courier'] =  d.courier_name;
                        array['tracking_no'] =  d.tracking_number;

                        console.log(array);
                    datas.push(array);
                   })

                   console.log(datas);

                })
                    return data.data;
                // console.log(datas);
            },
        },
        order: [[ 7, 'desc' ]],
        buttons: {
            buttons: [
                {
                    extend: 'selected',
                    text: "{{ __('cms.order.move_to_status', ['status' => __('cms.order.status.' . \App\Order::Picking)]) }}",
                    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::Picking }}"
                            },
                            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: 'excel',
                        text: "{{ __('cms.export_new') }}",
                        className: 'btn-export-new',
                        //  key: 'x',
                        title:  "OMS Order Details",
                        
                        customize: function (xlsx) {
                            let r = "";
                          let sheet = xlsx.xl.worksheets['sheet1.xml'];
                          let numrows = 10;
                          let clR = $('row', sheet);
                          let rows = [];
                          let bundle2 = [];
                            let shipping_cost = 0;

                          selectedRow.forEach(function(d){
                    
                                    d.order_products.forEach(function(p){
                                    let array = [];
                                        if(bundle2.includes(d.bundle_no+'/'+d.external_order_id)){
                                            // shipping_cost = 0;
                                            array['shipping_cost'] =  0;
                                        }else{
                                            // shipping_cost = d.shipping_cost;
                                            array['shipping_cost'] =  p.product.shipping_fee;
                                            bundle2.push(d.bundle_no+'/'+d.external_order_id);
                                        }
                                        // console.log(shipping_cost);
                                        array['order_number'] = d.external_order_id;
                                        array['product_order_number'] =  p.product.code;
                                        array['order_status'] =  d.status_name;
                                        array['product_name'] =  p.product_name;
                                        array['product_barcode'] =  p.product.barcode;
                
                                        array['unit_price'] =  p.product.unit_price;
                                        array['product_qty'] =  p.product.quantity;
                
                                        array['total_product_price'] =  p.product.total_amount;
                                        // array['shipping_cost'] =  d.shipping_cost;

                                     
                                        array['handling_chargre'] =  p.handling_fee;

                                        if(d.platform_id == 18){
                                            array['handling_chargre'] = (p.handling_fee  + array['shipping_cost']*0.03) / p.product.quantity;
                                        }else if(d.platform_id == 6){
                                            array['handling_chargre'] = Math.floor(array['handling_chargre'] * 100) / 100;
                                        }
                
                                        if(d.platform_id == 8){
                                           
                                            if([1,2,3,4,5,6,7,8,11].includes(d.org_store_id) ){
                                                array['vat'] =  ((parseInt(p.product.total_amount) + parseInt(array['shipping_cost'])) / 1.1) *0.1;
                                            }else{
                                                array['vat'] =  0;
                                            }
                                        }else{
                                            array['vat'] =  p.vat;
                                        }
                                        array['order_date'] =  d.order_datetime;
                                        array['import_date'] =  d.created_at;
                
                                        array['platform'] =  d.platform_name;
                                        array['courier'] =  d.courier_name;
                                        array['tracking_no'] =  d.tracking_number;
                
                                        console.log(array);
                                        rows.push(array);
                                })
                            })


                          //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>';
                              r = r +msg;
                              return msg;
                          }

                          //insert
                          // var title = Addrow(1,[{key:'A1',value: $(t.selector).data('title')}]);
                          var k1 = Addrow(2, [{ key: 'A2', value: "Country selected"},{ key: 'B2', value: $('#country-option option:selected').text()}]);
                          var k2 = Addrow(3, [{ key: 'A3', value: "Platform Selected"},{ key: 'B3', value: $('#platform-option option:selected').text()}]);
                          var k3 = Addrow(4, [{ key: 'A4', value: "Store Selected"},{key: 'B4', value: $('#store-option option:selected').text()}]);
                          var k4 = Addrow(5, [{ key: 'A5', value: "Date type [Order date | Import date)"},{key: 'B5', value: $('[name=date_option] option:selected').text()}]);
                          var k5 = Addrow(6, [{ key: 'A6', value: "Date range selected"},{key: 'B6', value:  $('input[name="dates"]').data('daterangepicker').startDate.format('YYYY-MM-DD')+"-"+$('input[name="dates"]').data('daterangepicker').endDate.format('YYYY-MM-DD')}]);
                          var k6 = Addrow(7, [{ key: 'A7', value: "Status selected"},{key: 'B7', value:  $('[name=status] option:selected').text()}]);
                          var k7 = Addrow(8, [{ key: 'A8', value: "Keyword search term"},{key: 'B8', value:  $('input[type="search"]').val()}]);
                          var k8 = Addrow(9, [{ key: 'A9', value: "Number of orders"},{key: 'B9', value: selectedRow.length }]);

                          var k9 = Addrow(11, [
                            {key: 'A11', value: "Order number"},
                            {key: 'B11', value: "Product Order Number" },
                            {key: 'C11', value: "Order Status" },
                            {key: 'D11', value: "Product Name (in English)" },
                            {key: 'E11', value: "Product Barcode" },
                            {key: 'F11', value: "Unit Price" },
                            {key: 'G11', value: "Product Quantity" },
                            {key: 'H11', value: "Total Product Price" },
                            {key: 'I11', value: "Shipping Cost" },
                            {key: 'J11', value: "E-Commerce Handling Charges " },
                            {key: 'K11', value: "VAT" },
                            {key: 'L11', value: "Order Date" },
                            {key: 'M11', value: "Import Date" },
                            {key: 'N11', value: "Platform" },
                            {key: 'O11', value: "Courier" },
                            {key: 'P11', value: "Tracking No / HAWB No." }]);
                         
                             let count = 12;

                             rows.forEach(function(d){
                              
                                Addrow(count, [
                                {key: 'A'+count, value: d.order_number},
                                {key: 'B'+count, value: d.product_order_number },
                                {key: 'C'+count, value: d.order_status },
                                {key: 'D'+count, value: d.product_name },
                                {key: 'E'+count, value: d.product_barcode },
                                {key: 'F'+count, value: d.unit_price},
                                {key: 'G'+count, value: d.product_qty },
                                {key: 'H'+count, value: d.total_product_price },
                                {key: 'I'+count, value: d.shipping_cost },
                                {key: 'J'+count, value: d.handling_chargre },
                                {key: 'K'+count, value: d.vat },
                                {key: 'L'+count, value: d.order_date },
                                {key: 'M'+count, value: d.import_date },
                                {key: 'N'+count, value: d.platform },
                                {key: 'O'+count, value: d.courier},
                                {key: 'P'+count, value: d.tracking_no}]);
                                count++;
                            })
                          
                          sheet.childNodes[0].childNodes[1].innerHTML = r ;

                        }
                },

                // {
                //         extend: 'excel',
                //         text: "{{ __('cms.export_new') }}",
                //         className: 'btn-export-new',
                //         //  key: 'x',
                //         title:  "OMS Picking Details",
                        
                //         customize: function (e, dt, node, config,xlsx) {
                //             let r = "";
                //             const rows = dt.rows( { selected: true } );
                //           let sheet = xlsx.xl.worksheets['sheet1.xml'];
                //           let numrows = 10;
                //           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>';
                //               r = r +msg;
                //               return msg;
                //           }

                //           //insert
                //           // var title = Addrow(1,[{key:'A1',value: $(t.selector).data('title')}]);
                //           var k1 = Addrow(2, [{ key: 'A2', value: "Country selected"},{ key: 'B2', value: $('#country-option option:selected').text()}]);
                //           var k2 = Addrow(3, [{ key: 'A3', value: "Platform Selected"},{ key: 'B3', value: $('#platform-option option:selected').text()}]);
                //           var k3 = Addrow(4, [{ key: 'A4', value: "Store Selected"},{key: 'B4', value: $('#store-option option:selected').text()}]);
                //           var k4 = Addrow(5, [{ key: 'A5', value: "Date type [Order date | Import date)"},{key: 'B5', value: $('[name=date_option] option:selected').text()}]);
                //           var k5 = Addrow(6, [{ key: 'A6', value: "Date range selected"},{key: 'B6', value:  $('input[name="dates"]').data('daterangepicker').startDate.format('YYYY-MM-DD')+"-"+$('input[name="dates"]').data('daterangepicker').endDate.format('YYYY-MM-DD')}]);
                //           var k6 = Addrow(7, [{ key: 'A7', value: "Status selected"},{key: 'B7', value:  $('[name=status] option:selected').text()}]);
                //           var k7 = Addrow(8, [{ key: 'A8', value: "Keyword search term"},{key: 'B8', value:  $('input[type="search"]').val()}]);
                //           var k8 = Addrow(9, [{ key: 'A9', value: "Number of orders"},{key: 'B9', value: order_count }]);

                //           var k9 = Addrow(11, [
                //             {key: 'A11', value: "Order number"},
                //             {key: 'B11', value: "Product Order Number" },
                //             {key: 'C11', value: "Order Status" },
                //             {key: 'D11', value: "Product Name (in English)" },
                //             {key: 'E11', value: "Product Barcode" },
                //             {key: 'F11', value: "Unit Price" },
                //             {key: 'G11', value: "Product Quantity" },
                //             {key: 'H11', value: "Total Product Price" },
                //             {key: 'I11', value: "Shipping Cost" },
                //             {key: 'J11', value: "E-Commerce Handling Charges " },
                //             {key: 'K11', value: "VAT" },
                //             {key: 'L11', value: "Order Date" },
                //             {key: 'M11', value: "Import Date" },
                //             {key: 'N11', value: "Platform" },
                //             {key: 'O11', value: "Courier" },
                //             {key: 'P11', value: "Tracking No / HAWB No." }]);
                         
                //              let count = 12;

                //              const ids = rows.data().toArray().map(item => item.id);


                //             console.log(ids);
                //             datas.forEach(function(d){
                              
                //                 Addrow(count, [
                //                 {key: 'A'+count, value: d.order_number},
                //                 {key: 'B'+count, value: d.product_order_number },
                //                 {key: 'C'+count, value: d.order_status },
                //                 {key: 'D'+count, value: d.product_name },
                //                 {key: 'E'+count, value: d.product_barcode },
                //                 {key: 'F'+count, value: d.unit_price},
                //                 {key: 'G'+count, value: d.product_qty },
                //                 {key: 'H'+count, value: d.total_product_price },
                //                 {key: 'I'+count, value: d.shipping_cost },
                //                 {key: 'J'+count, value: d.handling_chargre },
                //                 {key: 'K'+count, value: d.vat },
                //                 {key: 'L'+count, value: d.order_date },
                //                 {key: 'M'+count, value: d.import_date },
                //                 {key: 'N'+count, value: d.platform },
                //                 {key: 'O'+count, value: d.courier},
                //                 {key: 'P'+count, value: d.tracking_no}]);
                //                 count++;
                //             })
                          
                //           sheet.childNodes[0].childNodes[1].innerHTML = r ;

                //         }
                //     },
            ],
        },
        columns: [
            {
                ...window.dataTablesHelper.selectCheckbox.columnData,
                render: function ( data, type, row, meta ) {
                    return row['status'] == '{{ \App\Order::Pending }}'? window.dataTablesHelper.selectCheckbox.html : `<input type='checkbox' disabled>`;
                    // return row['status'] != '{{ \App\Order::Pending }}'? window.dataTablesHelper.selectCheckbox.html : '';
                },
            },
            {
                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: 'order_datetime', name: 'order_datetime',},
            { data: 'created_at', name: 'created_at',},
            { data: 'platform_name', name: 'platforms.name',
            render: function ( data, type, row, meta ) {
                return data+row.store_id;
              }
            },
            { data: 'invoice_number', name: 'invoice_number',},
            { data: 'courier_name', name: 'couriers.name',
                render: function ( data, type, row, meta ) {
                    var displayName = '{{ __('cms.na') }}';
                    if (data) { displayName = data; }
                    return displayName;
                }
            },
            {
                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: 'created_at', name: 'created_at',"visible": false, "searchable": false},
        ],
        enableSelect: true,
        isSelectableRow: function(row, data, dataIndex) {
            return (data['status'] == '{{ \App\Order::Pending }}')
        },
        onSelectRow: function (count) {
            selectedRow = table.rows({ selected: true }).data().toArray()
          console.log(table.row( $(this).parents('tr') ).data());
            $('.btn-move-to-status span').html(`{{ __('cms.order.move_to_status', ['status' => __('cms.order.status.' . \App\Order::Picking)]) }}${count > 0? ` (${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) {
             // alert("save callback");
               localStorage.setItem( 'clist_DataTables_' + settings.sInstance, JSON.stringify(data) )
           },
        stateLoadCallback: function(settings) {
             // alert("load callback");
             if(performance.navigation.type == 2){
                 return JSON.parse( localStorage.getItem( 'clist_DataTables_' + settings.sInstance ) )
             }else{
               return true;
             }
        }
    })



    window.initFormSubmit({
        selector: '.modal-import form',
        onSubmit: function ({ form }) {
            location.reload()
        }
    })
});
</script>
@endpush

@section("title")

Total {{$status !== null ? __('cms.order.status.' . $status) : 'Orders'}}

@endsection

@section("content")

@php

if($_SERVER['QUERY_STRING'] !=="platform=all") {

@endphp
<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.order.stats.today') }}"
                    value="{{ $today_count }}"
                />
            </div>
            <div class="col col-sm-auto">
                <x-card.stat
                    title="{{ __('cms.order.stats.month') }}"
                    value="{{ $this_month_count }}"
                />
            </div>
            <div class="col col-sm-auto">
                <x-card.stat
                    title="Total {{$status !== null ? __('cms.order.status.' . $status) : ' All'}} Orders"
                    value="{{ $month_status_count }}"
                />
            </div>
            <div class="col col-sm-auto">
                <x-card.stat
                    title="{{ __('cms.shipping.stats.remain_cj_tracking_no') }}"
                    value="{{ \App\CjHwab::get_available_count() }}"
                >
                    <div class="col-auto d-flex align-items-center ml-5">
                        <a href="#" class="badge badge-pill badge-outline-primary badge-details" data-toggle="modal" data-target="#modal_import_cj_old">
                            {{ __('cms.import_cj_number') }}
                            <i class="fas fa-chevron-right ml-2"></i>
                        </a>
                    </div>
                </x-card.stat>
            </div>
        </div>
    </div>
    
</div>


@php

}
@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 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, ['class' => "text-status font-weight-600 form-control form-control-sm", 'style' => 'min-width: 200px;', 'plcaeholder' => __('cms.all_statuses')])
                        }}
                    @endif
                </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>{{ __('cms.order.order_no')}}</th>
                    <th>{{ __('cms.order.order_date')}}</th>
                    <th>{{ __('cms.order.import_date')}}</th>
                    <th>{{ __('cms.order.platform')}}</th>
                    <th>{{ __('cms.order.invoice_no')}}</th>
                    <th>{{ __('cms.order.courier')}}</th>
                    <th>{{ __('cms.status')}}</th>
                </tr>
            </thead>
        </table>
    </div>
</div>

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

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

        @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',
                    'value' => (($platform == 'all')? '' : $platform)
                ],
                [
                    'type' => 'select',
                    'name' => 'shipping_date',
                    'label' => __('cms.order.shipping_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.export') }}
                </button>
            </div>
        </div>
    {{ Form::close() }}
</x-modal.master>



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

        <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_import_cj_new" class="modal-import" title="{{ __('cms.import') . ' - ' . __('cms.new_cj.title') }}" size="lg">
    {{ Form::open(['route' => 'cms.orders.import', 'method' => 'POST', 'id' => 'form_import_cj_new', 'files' => true]) }}
        <x-form.form-group.master
            name="upload_files_new_cj"
            label="{{ __('cms.order.raw_files') }}"
            type="file"
        >
            {{ Form::fileUpload('upload_files_new_cj', null, [
                'multiple' => true,
                'type' => 'document',
                'accept' => '.xlsx, .xls, .csv',
            ]) }}
        </x-form.form-group.master>

        <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>
@endsection