@extends('shopify-app::layouts.default')
@section ('styles')
<link
   rel="stylesheet"
   href="https://unpkg.com/@shopify/polaris@5.2.0/dist/styles.css"
   />
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js'></script>
<style type="text/css">
  .Polaris-Pagination {
  display: inline-flex;
  position: absolute;

}
.text {
  margin-left: 42px;
}
.Polaris-Navigation__Section {
    display: inline-flex;
    width: 100%;
}
.Polaris-Navigation {
    max-width: 100%;
}
.Polaris-Navigation {
    border-bottom: 1px solid #c1bdbddd;
    width: 100%;
}
.paginate{
  text-align: center;
}
.pagination{
    display: inline-flex;
    list-style: none;
}
.pagination li{
    padding: 5px;
    border: 1px solid;
}
.pagination li .page-link{
      font-size: 17px;
    font-weight: 500;
}
</style>
@endsection
@section('content')
<!-- @include('header') -->
<div class="Polaris-Page">
  <div class="Polaris-Page-Header Polaris-Page-Header--separator">
      <div class="Polaris-Page-Header__MainContent">
        <div class="Polaris-Page-Header__TitleActionMenuWrapper">
          <div>
            <div class="Polaris-Header-Title__TitleAndSubtitleWrapper">
              <div class="Polaris-Header-Title">
                <h1 class="Polaris-DisplayText Polaris-DisplayText--sizeLarge">Order Details</h1>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- <div class="Polaris-Page-Header Polaris-Page-Header--isSingleRow Polaris-Page-Header--mobileView Polaris-Page-Header--noBreadcrumbs Polaris-Page-Header--mediumTitle">
      <div class="Polaris-Page-Header__MainContent">
        <div class="Polaris-Page-Header__TitleActionMenuWrapper">
          <div class="Polaris-Page-Header__TitleWrapper">
            <div>
              <div class="Polaris-Header-Title__TitleAndSubtitleWrapper">
                <div class="Polaris-Header-Title">
                  <h1 class="Polaris-DisplayText Polaris-DisplayText--sizeLarge">
                    <nav class="Polaris-Pagination" aria-label="Pagination">
                      <a href="{{env('APP_URL')}}" type="button" class="Polaris-Pagination__Button Polaris-Pagination__PreviousButton" aria-label="Previous">
                        <span class="Polaris-Icon">
                          <svg viewBox="0 0 20 20" class="Polaris-Icon__Svg" focusable="false" aria-hidden="true">
                            <path d="M17 9H5.414l3.293-3.293a.999.999 0 1 0-1.414-1.414l-5 5a.999.999 0 0 0 0 1.414l5 5a.997.997 0 0 0 1.414 0 .999.999 0 0 0 0-1.414L5.414 11H17a1 1 0 1 0 0-2z"></path>
                          </svg>
                        </span>
                      </a>
                    </nav>
                    <span class="Polaris-TextStyle--variationStrong text">Order Details</span></h1>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div> -->
    <div class="Polaris-Page__Content">
      <div class="Polaris-Card">
        <div class="">
          <div class="Polaris-DataTable__Navigation"><button class="Polaris-Button Polaris-Button--disabled Polaris-Button--plain Polaris-Button--iconOnly" aria-label="Scroll table left one column" type="button" disabled=""><span class="Polaris-Button__Content"><span class="Polaris-Button__Icon"><span class="Polaris-Icon"><svg viewBox="0 0 20 20" class="Polaris-Icon__Svg" focusable="false" aria-hidden="true">
                      <path d="M12 16a.997.997 0 0 1-.707-.293l-5-5a.999.999 0 0 1 0-1.414l5-5a.999.999 0 1 1 1.414 1.414L8.414 10l4.293 4.293A.999.999 0 0 1 12 16z"></path>
                    </svg></span></span></span></button><button class="Polaris-Button Polaris-Button--plain Polaris-Button--iconOnly" aria-label="Scroll table right one column" type="button"><span class="Polaris-Button__Content"><span class="Polaris-Button__Icon"><span class="Polaris-Icon"><svg viewBox="0 0 20 20" class="Polaris-Icon__Svg" focusable="false" aria-hidden="true">
                      <path d="M8 16a.999.999 0 0 1-.707-1.707L11.586 10 7.293 5.707a.999.999 0 1 1 1.414-1.414l5 5a.999.999 0 0 1 0 1.414l-5 5A.997.997 0 0 1 8 16z"></path>
                    </svg></span></span></span></button></div>
          <div class="Polaris-DataTable">
            <div class="Polaris-DataTable__ScrollContainer">
              <table class="Polaris-DataTable__Table">
                <thead>
                  <tr>
                    <th data-polaris-header-cell="true" class="Polaris-DataTable__Cell Polaris-DataTable__Cell--verticalAlignTop Polaris-DataTable__Cell--firstColumn Polaris-DataTable__Cell--header" scope="col">Customer ID</th>
                    <th data-polaris-header-cell="true" class="Polaris-DataTable__Cell Polaris-DataTable__Cell--verticalAlignTop Polaris-DataTable__Cell--header Polaris-DataTable__Cell--numeric" scope="col">Supplier ID</th>
                    <th data-polaris-header-cell="true" class="Polaris-DataTable__Cell Polaris-DataTable__Cell--verticalAlignTop Polaris-DataTable__Cell--header Polaris-DataTable__Cell--numeric" scope="col">Delivery Date</th>
                    <th data-polaris-header-cell="true" class="Polaris-DataTable__Cell Polaris-DataTable__Cell--verticalAlignTop Polaris-DataTable__Cell--header Polaris-DataTable__Cell--numeric" scope="col">Delivery Time</th>
                    <th data-polaris-header-cell="true" class="Polaris-DataTable__Cell Polaris-DataTable__Cell--verticalAlignTop Polaris-DataTable__Cell--header Polaris-DataTable__Cell--numeric" scope="col">Delivery Status</th>
                     <th data-polaris-header-cell="true" class="Polaris-DataTable__Cell Polaris-DataTable__Cell--verticalAlignTop Polaris-DataTable__Cell--header Polaris-DataTable__Cell--numeric" scope="col">Delivered Date</th>
                      <th data-polaris-header-cell="true" class="Polaris-DataTable__Cell Polaris-DataTable__Cell--verticalAlignTop Polaris-DataTable__Cell--header Polaris-DataTable__Cell--numeric" scope="col">Delivered Time</th>
                  </tr>
               </thead>
                <tbody>
                  @if(count($orders) > 0)
                  @foreach($orders as $order)
                  <tr class="Polaris-DataTable__TableRow">
                    <td class="Polaris-DataTable__Cell Polaris-DataTable__Cell--verticalAlignTop Polaris-DataTable__Cell--firstColumn" scope="row">{{ $order->customer_id}}</td>
                    <td class="Polaris-DataTable__Cell Polaris-DataTable__Cell--verticalAlignTop Polaris-DataTable__Cell--numeric">{{ $order->supplier_id}}</td>
                    <td class="Polaris-DataTable__Cell Polaris-DataTable__Cell--verticalAlignTop Polaris-DataTable__Cell--numeric">{{ $order->delivery_date}}</td>
                    <td class="Polaris-DataTable__Cell Polaris-DataTable__Cell--verticalAlignTop Polaris-DataTable__Cell--numeric">{{ $order->delivery_time}}</td>
                    <td class="Polaris-DataTable__Cell Polaris-DataTable__Cell--verticalAlignTop Polaris-DataTable__Cell--numeric">{{ $order->delivery_status}}</td>
                    <td class="Polaris-DataTable__Cell Polaris-DataTable__Cell--verticalAlignTop Polaris-DataTable__Cell--numeric">{{ $order->delivered_date}}</td>
                    <td class="Polaris-DataTable__Cell Polaris-DataTable__Cell--verticalAlignTop Polaris-DataTable__Cell--numeric">{{ $order->delivered_time}}</td>
                  </tr>
                 @endforeach 
                 @else
                <tr class="Polaris-DataTable__TableRow">
                    <td class="Polaris-DataTable__Cell Polaris-DataTable__Cell--verticalAlignTop Polaris-DataTable__Cell--firstColumn" scope="row">No Record Found</td>
                  </tr>
                 @endif
                 
                </tbody>
              </table>
            </div>
            <div class="paginate">
            {{ $orders->links() }}
          </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div id="PolarisPortalsContainer"></div>
@endsection
@section('scripts')
@parent
<script type="text/javascript">
   var AppBridge = window['app-bridge'];
   var actions = AppBridge.actions;
   var TitleBar = actions.TitleBar;
   var Button = actions.Button;
   var Redirect = actions.Redirect;
   var titleBarOptions = {
       title: 'Orders',
   };
   var myTitleBar = TitleBar.create(app, titleBarOptions);
</script>
@endsection