@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-SettingAction__Action {
    position: absolute;
    float: right;
    right: 22%;
    z-index: 99;
}
  .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" id="blank">
   <div class="Polaris-Page-Header Polaris-Page-Header--separator 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">
                        <h3 class="Polaris-DisplayText Polaris-DisplayText--sizeLarge"><span class="Polaris-TextStyle--variationStrong">Enter Credentials</span></h3>
                        <div class="Polaris-SettingAction__Action" style="margin-right:-204px;margin-top: -3.4rem;" >
                         <!--  <div class="Polaris-ButtonGroup">
                   <div class="Polaris-ButtonGroup__Item"><a href="details" class="Polaris-Button Polaris-Button--primary" type="button"><span class="Polaris-Button__Content"><span class="Polaris-Button__Text">View Details</span></span></a></div>
                </div> -->
                <!-- 
                    <nav class="crumbs"style="margin-top: -2rem;font-size: 1.2em;">
                      <ol>
                        <li class="crumb"><a href="" style="text-decoration: none;color: black;">View Details</a></li>
                      </ol>
                    </nav> -->
               </div>
                     </div>
                  </div>
               </div>
            </div>
         </div>
      </div>
    </div>
    <form method="post" action="createPost" id="myform" enctype="multipart/form-data">
    @csrf
       <div class="Polaris-Page__Content">
          <div class="Polaris-Card">
             <div class="Polaris-Card__Section">
                <div class="Polaris-FormLayout">
                   <div class="Polaris-FormLayout__Item">
                      <div class="">
                         <div class="Polaris-Labelled__LabelWrapper">
                            <div class="Polaris-Label"><label id="PolarisTextField11Label4" for="api_key" class="Polaris-Label__Text">Enter Api Key</label></div>
                         </div>

                         <div class="Polaris-Connected">
                            <div class="Polaris-Connected__Item Polaris-Connected__Item--primary">
                               <div class="Polaris-TextField">
                                  <input id="api_key" class="Polaris-TextField__Input" aria-labelledby="PolarisTextField11Label4" aria-invalid="false" aria-multiline="false" name="api_key" value="@if($address){{$address->api_key}}@endif">
                                  <div class="Polaris-TextField__Backdrop"></div>
                               </div>
                            </div>
                         </div>
                      </div>
                   </div>
                   <div class="Polaris-FormLayout__Item">
                      <div class="">
                         <div class="Polaris-Labelled__LabelWrapper">
                            <div class="Polaris-Label"><label id="PolarisTextField12Label3" for="supplier_id" class="Polaris-Label__Text">Supplier ID</label></div>
                         </div>
                         <div class="Polaris-Connected">
                            <div class="Polaris-Connected__Item Polaris-Connected__Item--primary">
                               <div class="Polaris-TextField">
                                  <input id="supplier_id" class="Polaris-TextField__Input" type="text" aria-labelledby="PolarisTextField12Label3" aria-invalid="false" aria-multiline="false" value="@if($address){{$address->supplier_id}}@endif" name="supplier_id">
                                  <div class="Polaris-TextField__Backdrop"></div>
                               </div>
                            </div>
                         </div>
                      </div>
                   </div>
                 <!--    <div class="Polaris-FormLayout__Item">
                      <div class="">
                         <div class="Polaris-Labelled__LabelWrapper">
                            <div class="Polaris-Label"><label id="PolarisTextField12Label2" for="store" class="Polaris-Label__Text">Store</label></div>
                         </div>
                         <div class="Polaris-Connected">
                            <div class="Polaris-Connected__Item Polaris-Connected__Item--primary">
                               <div class="Polaris-TextField">
                                  <input id="store" class="Polaris-TextField__Input" type="text" aria-labelledby="PolarisTextField12Label2" name="store" aria-invalid="false" aria-multiline="false" value="">
                                  <div class="Polaris-TextField__Backdrop"></div>
                               </div>
                            </div>
                         </div>
                      </div>
                   </div> -->
                </div>
             </div>
             <div class="Polaris-Card__Footer">
                <div class="Polaris-ButtonGroup">
                   <div class="Polaris-ButtonGroup__Item"><button class="Polaris-Button Polaris-Button--primary" type="submit"><span class="Polaris-Button__Content"><span class="Polaris-Button__Text">Save</span></span></button></div>
                </div>
             </div>
          </div>
       </div>
    </form>
</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: 'Home',
   };
   var myTitleBar = TitleBar.create(app, titleBarOptions);
</script>
<script type="text/javascript">
$( "#myform" ).submit(function( event ) {
  event.preventDefault();
  setTimeout(function(){
    window.location.reload();
  },1000)
});
</script>
@endsection