@extends('layouts.authenticated')
@section('title','Orders')
@section('order','active')
@section('style')

  <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> Orders</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>STN Reference</th>
              {{--<th>Entity ID</th>--}}
              <th>Customer Name</th>
              <th>Shipment Status</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 class="modal fade" id="order-modal" tabindex="-1" role="dialog" aria-labelledby="orderModal"
       aria-hidden="true">
    <div class="modal-dialog" role="document" style="width:90%;">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span style="color: red;font-size: 25px">&times;</span>
          </button>
          <h4 class="modal-title" name="modal" id="exampleModalLabel"><i class="fa fa-shopping-cart"
                                                                         style="font-size: 25px; color: lightblue"></i>
            Order Details</h4>
        </div>
        <div class="modal-body" id="modal-content">

        </div>
      </div>
    </div>
  </div>

@endsection

@section('customjs')
  <script type="text/javascript">
    $(document).ready(function () {
      var table = $('#order-table').dataTable({
        mark: true,
        /* processing: true,*/
        //  paging: false,
        iDisplayLength: 10,
        /*stateSave: true,*/
        deferRender: true,
        position: 'fixed',
        /*serverSide: true,*/
        /*destroy: true,*/
        scrollY: "500px",
        scrollCollapse: true,
        ajax: {
          url: "{{ url('order/fetch') }}",
          dataType: "json",
          type: "GET",
        },
        columns: [
          {
            data: "increment_id",
            render: function (data, type, row) {
              return '<a class="btn-submit" data-entity_id=' + row['entity_id'] + ' + data-increment_id=' + data + ' + style="cursor: pointer;">' + data + '</a>';
            }
          },
          {data: "stn_ref"},
          /* {data: "entity_id"},*/
          {data: "customer_name"},
          {
            data: "status",
            render: function (data, type, row) {
              return '<div class="p-3 mb-2 " style="border-radius: 25px;color: ' + row['color'] + ';text-align: left;">' + data.toUpperCase() + '</div>';
            }
          },
          {
            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]}
        ],
        order: [[4, 'desc']],

      });


      $(document).on('click', '.btn-submit', function (e) {
        var increment_id = $(this).data('increment_id');
        var entity_id = $(this).data('entity_id');
        $.ajax({
          url: 'order/order-details',
          type: "GET",
          data: {
            increment_id: increment_id,
            entity_id: entity_id
          },
          dataType: 'html',
          beforeSend: function (response) {
            $('#modal-content').html()
          },
          success: function (response) {
            $('#modal-content').html(response)
          },
          complete: function (response) {
            //$('#modal-content').html(response.responseText)
            $('#order-modal').modal('show')
          },
        });
      });
    });
  </script>
@endsection