@extends('layouts.authenticated')
@section('title','Orders')
@section('action','active')
@section('style')
  <link rel="stylesheet" type="text/css"
        href="{{ asset('/webtemplate/plugins/daterangepicker/daterangepicker.css') }}"/>
  <style>
    .table th {
      white-space: nowrap;
    }
  </style>
  <style>
    /*  Activity Logs*/
    div.settings {
      display: grid;
      grid-template-columns: max-content max-content;
      grid-gap: 5px;
    }

    ul.timeline {
      list-style-type: none;
      position: relative;
    }

    ul.timeline:before {
      content: ' ';
      background: #d4d9df;
      display: inline-block;
      position: absolute;
      left: 29px;
      width: 2px;
      height: 100%;
      z-index: 400;
    }

    ul.timeline > li {
      margin: 20px 0;
      padding-left: 20px;
    }

    ul.timeline > li:before {
      content: ' ';
      background: white;
      display: inline-block;
      position: absolute;
      border-radius: 70%;
      border: 1px solid #A9C6DE;
      left: 20px;
      width: 20px;
      height: 20px;
      z-index: 400;
    }
  </style>

@endsection
@section('content')
  <div class="panel panel-info">
    <div class="panel-heading"><i class="fa fa-shopping-cart"></i> Magento Orders
      <a class="fa pull-right" style="cursor: pointer" id="btn-order-sync"><i class="fa fa-refresh"></i></a></div>
    <div class="panel-body">
      <div class="row">
        <div class="col-xs-12 col-md-5 col-sm-6">

        </div>
      </div>
      <div id="output">
        <div class="dataTable_wrapper table-responsive" id="tablelist">
          <table class="table table-striped  table-hover" id="order-table">
            <thead>
            <tr>
              <th>Order Number</th>
              <th>Entity ID</th>
              <th>Customer Name</th>
              <th><select class="category-drpdwn" style="border:white;">
                  <option value="" hidden>Order Status</option>
                  <option value="">All</option>
                  @foreach($data['status'] as $status)
                    <option value="{{$status->status}}">{{$status->status}}</option>
                  @endforeach
                </select></th>
              <th>Order Created Date</th>
              <th>Last Updated Date</th>
            </tr>
            </thead>
            <tbody>
            <tr>
              <td colspan="6" style="text-align: center">Processing</td>
            </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>

  <div id="modal-order-sync" class="modal fade" role="dialog">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal"><span
              style="color: red;font-size: 25px">&times</span>
          </button>
          <h4 class="modal-title"><i class="fa fa-refresh" style="font-size: 25px; color: green"></i>Order
            Synchronization</h4>
        </div>
        <div class="modal-body">
          <div class="row">
            <form id="form-get-tlogs">
              <input type="hidden" id="_token" name="_token" value="{{ csrf_token() }}">
              <div class="form-group col-sm-12">
                <label for="date">Transaction Date</label>
                <input type="text" name="tlog_transaction_date" id="order-sync-date"
                       class="form-control"
                       placeholder="dd-mm-yyyy" value="{{date('Y-m-d')}}" required
                       value="{{ old('tlog_transaction_date') }}">
              </div>
            </form>
          </div>
        </div>
        <div class="modal-footer">
          <button type="submit" class="btn btn-success btn-order-sync-gen">Generate</button>
          <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
        </div>
      </div>
    </div>
  </div>

@endsection

@section('customjs')
  <script type="text/javascript" src="{{ asset('/webtemplate/plugins/moment/moment.min.js') }}"></script>
  <script type="text/javascript" src="{{ asset('/webtemplate/plugins/daterangepicker/daterangepicker.js') }}"></script>
  <script type="text/javascript">
    var status;
    $(document).ready(function () {
      $('.monthselect').addClass('form-control')
      statuss = $('.category-drpdwn')
      var d = new Date();
      var strDate = (d.getMonth() + 1) + "/" + d.getDate() + "/" + d.getFullYear();
      $('#order-sync-date').daterangepicker({
        "showDropdowns": true,
        "timePicker24Hour": true,
        "autoApply": true,
        ranges: {
          'Today': [moment(), moment()],
          'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
          'Last 7 Days': [moment().subtract(6, 'days'), moment()],
          'Last 30 Days': [moment().subtract(29, 'days'), moment()],
          'This Month': [moment().startOf('month'), moment().endOf('month')],
          'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
        },
        "alwaysShowCalendars": true,
        "startDate": strDate,
        "endDate": strDate,
        "maxDate": strDate,
        "opens": "center",
      }, function (start, end, label) {
        // console.log('New date range selected: ' + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD') + ' (predefined range: ' + label + ')');
      });

      var table = $('#order-table').dataTable({
        mark: true,
        iDisplayLength: 10,
        deferRender: true,
        position: 'fixed',
        scrollY: "500px",
        scrollCollapse: true,
        ajax: {
          url: "{{ url('mgt-status/fetch') }}",
          dataType: "json",
          type: "GET",
        },
        columns: [
          {data: "increment_id"},
          {data: "entity_id"},
          {data: "customer_name"},
          {data: "status"},
          {
            data: "hidden_order_created_date",
            render: function (data, type, row) {
              return type === 'sort' ? data : row['order_created_date'];
            }
          },
          {
            data: "hidden_order_updated_date",
            render: function (data, type, row) {
              return type === 'sort' ? data : row['order_updated_date'];
            }
          },
        ],
        columnDefs: [
          {className: "dt-nowrap", targets: [4, 5]},
          {orderable: false, targets: [3]}
        ],
        order: [[4, 'desc']],

      });

      $.fn.dataTable.ext.search.push(
        function (settings, data, dataIndex) {
          status = statuss.val()
          if (status === data[3] || status === '') {
            return true;
          }
          return false;
        }
      );

      $('.category-drpdwn').on('change', function () {
        $('#order-table').DataTable().draw();
      });

      setInterval(function () {
        table.DataTable().ajax.reload(null, false); // user paging is not reset on reload
      }, 3000);

      $('#btn-order-sync').click(function (e) {
        $('#modal-order-sync').modal('show')
      })

      $('.btn-order-sync-gen').click(function (e) {
        let date = $('#order-sync-date').val();
        const dateSplit = date.split("-");
        $.ajax({
          url: 'action/order-sync',
          type: 'GET',
          data: {
            'dateFrom': dateSplit[0],
            'dateTo': dateSplit[1],
          },
          beforeSend: function () {
            $('.btn-order-sync').addClass('fa-spin')
          },
          success: function (response) {
            if (response != 'false') {
              Command: toastr["info"]("Synchronization is already running in background process!", "Order Sync")
            } else {
              Command: toastr["success"]("Synchronization is now running.", "Order Sync")
            }
          },
          complete: function () {
            // $('.btn-order-sync').removeClass('fa-spin')
            $('#modal-order-sync').modal('hide')
          },
        });
      })

    });
  </script>
@endsection