@extends("cms.layouts.app", ['page_id' => 'shipping_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 type="text/javascript">
$(function () {

    $('input[name="export_dates"]').daterangepicker({
        locale: { cancelLabel: 'Clear', format: 'YYYY-MM-DD'}
    }, function(chosen_date) { });

    $('input[name="export_dates"]').on('cancel.daterangepicker', function(ev, picker) {
        $('input[name="export_dates"]').val('');
    });

    $('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"],input[name="export_dates"]').val('');
    $('input[name="dates"],input[name="export_dates"]').attr("placeholder","Any Date");

    $('input[name="dates"]').on('change', function () {
        setTimeout(function(){
            $('#dataTable').DataTable().ajax.reload();
        }, 100);
    });
    $('.dataTable-custom-toolbar--source [name=shipping_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(){
      var 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);
    });

    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') == 1){
    $("#store-option").show();
    $(".shipping-button").show();
  }else{
    $("#store-option").hide();
    $(".shipping-button").hide();
  }


    @php
        $no_data_message = __('cms.order.no_data.'.\App\Order::Shipping);
    @endphp
    const table = window.dataTablesHelper.init({
        language: {
          emptyTable: "{{ $no_data_message }}"
        },
        serverSide: true,
        pageLength: 200,
        lengthMenu: [100, 200, 300, 400, 500, 600, 700, 800 ,900 ,1000],
        stateSave: true,
        ajax: {
            url: '{!! route('cms.orders.datatable', ['status' => \App\Order::Shipping, 'platform' => $platform]) !!}',
            data: function (d) {

                d.shipping_date = $('[name=shipping_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 = $('[name=date_option] option:selected').val(); // shipping_date
                    d.start_date = startDate;
                    d.end_date = endDate;

                    // localStorage.setItem('date_option', $('[name=date_option] option:selected').val());
                    // localStorage.setItem('start_date', startDate);
                    // localStorage.setItem('end_date', endDate);
                    //
                    // if(getUrlParameter('platform') == 8){
                    //   d.store_id = $('select[id="store-option"]').val();
                    //   d.platform = 8;
                    //
                    //   localStorage.setItem('store_id', $('select[id="store-option"]').val());
                    //   localStorage.setItem('platform', 8);
                    // }
                    //   localStorage.setItem('platform', getUrlParameter('platform'));
                }
                // d.shipping_date !== undefined?localStorage.setItem('shipping_date', $('[name=shipping_date] option:selected').val()):null;
                //
                // if(performance.navigation.type == 2)
                // {
                //       //Do your code here
                //
                //       if(localStorage.getItem('date_option') != null){
                //           d.date_option = localStorage.getItem('date_option'); // shipping_date
                //       }
                //
                //       if(localStorage.getItem('start_date') != null){
                //           d.start_date = localStorage.getItem('start_date');
                //       }
                //
                //       if(localStorage.getItem('end_date') != null){
                //           d.end_date = localStorage.getItem('end_date');
                //             $('input[name="dates"]').val(d.start_date+" - "+d.end_date);
                //       }
                //
                //       if(localStorage.getItem('store_id') != null){
                //         d.store_id = localStorage.getItem('store_id');
                //       }
                //
                //       if(localStorage.getItem('platform') != null){
                //         d.platform = localStorage.getItem('platform');
                //       }
                // }
            },
        },
        order: [[ 3, 'desc' ]],
        buttons: {
            buttons: [
                {
                    extend: 'selected',
                    text: "{{ __('cms.shipping.mark_as_shipped') }}",
                    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::Shipped }}"
                            },
                            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: 'p',
                    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);
                    }
                },
            ],
        },
        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 ) {
                    return `<span class="text-green">${data}</span>`;
                },
            },
            { data: 'shipping_datetime', name: 'shipping_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: 'tracking_number', name: 'tracking_number',},
            { data: 'courier_name', name: 'couriers.name'},
            {
                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;
                        default:
                            break;
                    }
                    return `<span class="badge badge-pill badge-status badge-order-status-${data}">${displayName}</span>`;
                }
            },
            {
                data: 'action', name: 'action', searchable: false, class: 'action-cell text-center',
                render: function ( data, type, row, meta ) {
                    var isDataOK = false;
                    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) {
            $('.btn-move-to-status span').html(`{{ __('cms.shipping.mark_as_shipped') }}${count > 0? ` (${count})` : ''}`)
            $('.btn-print-invoice span').html(`{{ __('cms.order.print_invoice') }}${count > 0? ` (${count})` : ''}`)
            $('.btn-download-shipping span').html(`{{ __('cms.shipping.download_shipping') }}${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;
             }
        },
        dom: "<'row mb-2 dataTables-header-dom'<'col-sm-12 col-lg px-0 px-lg-2 mb-2 mb-lg-0 dataTables-buttons-dom'B><'col col-lg-auto px-0 px-lg-2 d-flex align-items-center mb-2 mb-sm-0 dataTable-custom-toolbar-dom'><'col col-sm-auto d-flex align-items-center px-0 px-md-2 dataTables-search-dom'f>>" +
        "<'row'<'col-sm-12'r>>" +
        "<'row dataTables-table-dom'<'col-sm-12'tr>>" +
        "<'row dataTables-footer-dom'<'col-sm-6 col-md-auto px-0 px-md-2 my-2 my-md-0 dataTables-length-dom'l><'col-sm-12 col-md px-0 px-md-2 dataTables-pagination-dom'p>>",
    })


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

    $(".sync-from-aftership").on('click',function(){
      $.ajax({
          url: "{{ route('cms.shipping.sync') }}",
          method: 'get',
          dataType:"json",
          beforeSend:function(XMLHttpRequest){
              $(".sync-loading").css('display','block');
          },
          complete:function(jqXHR, textStatus) {
                $(".sync-loading").css('display','none');
          },
          success: function(data){
            $(".sync-loading").css('display','none');
              alert("{{ __('cms.success') }}");
              // table.ajax.reload();
          },
          error: function (request, status, error) {
              let json = $.parseJSON(request.responseText);
              alert(json.message);
              console.log(json);
          }
      });
    });
     $(".sync-to-aftership").on('click',function (){

       let tracking_number = [];
       $(".selected").each(function(id,obj){
         // console.log($(obj).find('td').eq(6).text());
           $(obj).find('td').eq(6).text() !== '' ?tracking_number.push($(obj).find('td').eq(6).text()):'';
       });

        $.ajax({
            url: "{{ route('cms.shipping.sync') }}",
            method: 'post',
            dataType:"json",
            data: {
                "_token": "{{ csrf_token() }}",
                "tracking_number":tracking_number,
            },
            beforeSend:function(XMLHttpRequest){
                $(".sync-loading").css('display','block');
            },
            complete:function(jqXHR, textStatus) {
              $(".sync-loading").css('display','none');
            },
            success: function(data){
              $(".sync-loading").css('display','none');
                alert("{{ __('cms.success') }}");
                table.ajax.reload();
            },
            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 {{ __('cms.sidemenu.shipping') }}
    @endif

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


    @endsection

    @section("content")
    <div class="alert alert-success sync-loading" role="alert" style="display:none">
      Processing...
    </div>
    <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.shipping.stats.today') }}"
                        value="{{ $today_count }}"
                    >
                    </x-card.stat>
                </div>
                <div class="col-auto">
                    <x-card.stat
                        title="{{ __('cms.shipping.stats.month') }}"
                        value="{{ $this_month_count }}"
                    />
                </div>

                <div class="col col-sm-auto">
                    <x-card.stat
                        title="Total Shipping 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 class="col-md d-flex justify-content-md-end align-items-end col-lg-12 col-md-12">
        <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 class="col-auto">
                <button type="button" class="btn btn-primary btn-icon sync-from-aftership" >
                    <i class="las la-sync mr-2"></i>
                    {{ __('cms.sync_from_aftership') }}
                </button>
            </div>
                <div class="col-auto">
                    <button type="button" class="btn btn-secondary btn-icon sync-to-aftership" >
                        <i class="las la-sync mr-2"></i>
                        {{ __('cms.sync_to_aftership') }}
                    </button>
                </div>
                <div class="col-auto">
                    <button type="button" class="btn btn-secondary btn-icon" data-toggle="modal" data-target="#cj_to_oms_modal_import">
                        <i class="las la-upload mr-2"></i>
                        {{ __('cms.cj_to_oms') }}
                    </button>
                </div>
                <div class="col-auto">
                    <button type="button" class="btn btn-primary btn-icon" data-toggle="modal" data-target="#modal_export">
                        <i class="las la-download mr-2"></i>
                        {{ __('cms.export') }}
                    </button>
                </div>
            </div>
        </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
                          $stores_options = \App\Store::where('platform_id',$platform)->where('status',1)->pluck('name', 'id')->toArray();

                          $stores_options[0] = 'All Stores';

                          ksort($stores_options);
                      @endphp
                      {{
                    Form::select('store_option',  $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', [
                                '4' => 'Shipping 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" style="min-width:150px;">
                        </div>
                    </div>
                    <!-- <div class="col&#45;sm&#45;auto"> -->
                    <!--     <div class="input&#45;group"> -->
                    <!--         <div class="input&#45;group&#45;prepend"> -->
                    <!--             <span class="input&#45;group&#45;text"><i class="far fa&#45;calendar"></i></span> -->
                    <!--         </div> -->
                    <!--     </div> -->
                    <!-- </div> -->
                    {{-- <div class="col-sm-auto"> --}}
                    {{--     {{ --}}
                    {{--         Form::select('shipping_date', $dates_options, null, ['class' => "text-status font-weight-600 form-control form-control-sm", 'style' => 'min-width: 160px;', 'placeholder' => __('cms.filter_filed', ['field' => __('cms.order.shipping_date')])]) --}}
                    {{--     }} --}}
                    {{-- </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.product_order_number')}}</th>
                        <th>{{ __('cms.order.order_no')}}</th>
                        <th>{{ __('cms.order.shipping_date')}}</th>
                        <th>{{ __('cms.order.import_date')}}</th>
                        <th>{{ __('cms.order.platform')}}</th>
                        <th>{{ __('cms.order.tracking_no')}}</th>
                        <th>{{ __('cms.order.courier')}}</th>
                        <th>{{ __('cms.status')}}</th>
                        <th>{{ __('cms.action')}}</th>
                        <th>Sync AfterShip</th>
                    </tr>
                </thead>
            </table>
        </div>
    </div>

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

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

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

            @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' => '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">
                <div class="col-12 mb-5">
                    <div class="form-group form-group--custom form-group--select editing" formgroupclass="">
                        <label for="platform_id" class="label">Shipping Date Range:</label>
                        <input type="text" name="export_dates" class="form-control pull-right">
                    </div>
                </div>
            </div>

            <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="cj_to_oms_modal_import" class="modal-import" title="{{ __('cms.import') }}" size="lg">
        {{ Form::open(['route' => 'cms.shipping.import', 'method' => 'POST', 'id' => 'form_cj_to_oms', 'files' => true]) }}
            <x-form.form-group.master
                name="upload_files_cj_to_oms"
                label="{{ __('cms.order.raw_files_excel') }}"
                type="file"
            >
                {{ Form::fileUpload('upload_files_cj_to_oms', 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_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>
    @endsection