@extends('shopify-app::layouts.default')
@section ('styles')
<link
  rel="stylesheet"
  href="https://unpkg.com/@shopify/polaris@5.2.1/dist/styles.css"
/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/material-design-iconic-font/2.2.0/css/material-design-iconic-font.min.css">
<style>
  .setupinst h3.Polaris-Subheading {
    letter-spacing: .5px;
    font-size: 15px;
    font-weight: 600;
    text-transform: none;
}
h3.Polaris-Subheading {
    margin-bottom: 10px;
}
.Polaris-Navigation__Section {
    display: inline-flex;
    width: 100%;
}
.Polaris-Navigation {
    max-width: 100%;
}
.Polaris-Navigation {
    border-bottom: 1px solid #c1bdbddd;
    width: 100%;
}
</style>
@endsection
@section('content')
  @include('header')
  <div class="Polaris-Page">
    <div class="Polaris-Page-Header">
      <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">SetUp Instructions</h1>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="Polaris-Page__Content">
      <div class="Polaris-Card setupinst">
        <div class="Polaris-Card__Section">
          <h3 aria-label="Accounts" class="Polaris-Subheading">Add the Api key And Suplier ID and click on Save button.</h3>
          <h3 aria-label="Accounts" class="Polaris-Subheading">Create an order from the frontend.</h3>
          <h3 aria-label="Accounts" class="Polaris-Subheading">After order create click on View Details button.</h3>
          <h3 aria-label="Accounts" class="Polaris-Subheading">Shows every created orders in the table.</h3>
        </div>
      </div>
    </div>  
  </div>
@endsection

@section('scripts')
    @parent
    <script type="text/javascript">
        window.data ="Doing window";
        var AppBridge = window['app-bridge'];
        var actions = AppBridge.actions;
        var TitleBar = actions.TitleBar;
        var Button = actions.Button;
        var Redirect = actions.Redirect;
        var titleBarOptions = {
            title: 'SetUp Instructions',
        };
        var myTitleBar = TitleBar.create(app, titleBarOptions);
    </script>
    <script type="text/javascript">
      /*  document.onreadystatechange = function () {
          var state = document.readyState;
          if (state == 'interactive') {
               document.getElementById('app').style.visibility="hidden";
          } else if (state == 'complete') {
              setTimeout(function(){
                 document.getElementById('interactive');
                 document.getElementById('load').style.visibility="hidden";
                 document.getElementById('app').style.visibility="visible";
              },1000);
          }
        }
        $('.setup').addClass('header_active');
        $('.home').removeClass('header_active');*/
        </script>
@endsection