@extends('shopify-app::layouts.default')
@section('content')

<meta name="csrf-token" content="{{ csrf_token() }}" />
<link rel="stylesheet"  href="https://unpkg.com/@shopify/polaris@4.0.0/styles.min.css"/>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
<link rel="stylesheet"  href="{{ URL::asset('css/custom.css') }}" />

<link rel="stylesheet" href="https://sdks.shopifycdn.com/polaris/2.0.0/polaris.min.css" />


<div class="Polaris-Frame__ContextualSaveBar Polaris-Frame-CSSAnimation--startFade"></div>
<main class="Polaris-Frame__Main" id="AppFrameMain" data-has-global-ribbon="false"><a id="AppFrameMainContent" tabindex="-1"></a>
  <div class="Polaris-Frame__Content">
    <div style="--top-bar-background:#00848e; --top-bar-background-lighter:#1d9ba4; --top-bar-color:#f9fafb;">
      <div class="Polaris-Page">
        <div class="Polaris-Page__Content">

          <form id="formCarrier" action=""  method="post">

            <div style="--top-bar-background:#00848e; --top-bar-background-lighter:#1d9ba4; --top-bar-color:#f9fafb;">
              <div class="Polaris-FormLayout">

                <div class="Polaris-FormLayout__Item">
                  <div style="width:100%">

                    <div class="Polaris-TextContainer">
                      <h2 class="Polaris-Heading">LiquorValet.ca custom carrier service details</h2>
                      <p>Create/Update LiquorValet.ca custom carrier service details </p>
                    </div>

                  </div>
                </div>

                <div id="warning"></div>


                <div class="Polaris-FormLayout__Item">
                  <div class="">
                    <div class="Polaris-Labelled__LabelWrapper">
                      <div class="Polaris-Label"><label id="carrierServiceNameLabel" for="carrierServiceName" class="Polaris-Label__Text">Name of the shipping service</label></div>
                    </div>
                    <div class="Polaris-Connected">
                      <div class="Polaris-Connected__Item Polaris-Connected__Item--primary">
                        <div class="Polaris-TextField">
                          <input name="carrierServiceName" id="carrierServiceName" class="Polaris-TextField__Input basic-details" aria-describedby="carrierServiceNameError" aria-labelledby="carrierServiceNameLabel" aria-invalid="true" aria-multiline="false"
                          value="@if(!empty($carrier_name)){{$carrier_name}}@endif">
                          <div class="Polaris-TextField__Backdrop"></div>
                        </div>
                      </div>
                    </div>
                    <div class="Polaris-Labelled__Error">
                      <div id="carrierServiceNameError" class="Polaris-InlineError" style="display: none">
                        <div class="Polaris-InlineError__Icon"><span class="Polaris-Icon"><svg viewBox="0 0 20 20" class="Polaris-Icon__Svg" focusable="false" aria-hidden="true">
                          <path d="M10 18a8 8 0 1 1 0-16 8 8 0 0 1 0 16zm-1-8h2V6H9v4zm0 4h2v-2H9v2z" fill-rule="evenodd"></path>
                        </svg></span></div>shipping service name is required
                      </div>
                    </div>
                  </div>
                </div>


                <div class="Polaris-FormLayout__Item">
                  <div class="">
                    <div class="Polaris-Labelled__LabelWrapper">
                      <div class="Polaris-Label"><label id="carrierServiceCallBackLabel" for="carrierServiceCallBack" class="Polaris-Label__Text">Callback URL</label></div>
                    </div>
                    <div class="Polaris-Connected">
                      <div class="Polaris-Connected__Item Polaris-Connected__Item--primary">
                        <div class="Polaris-TextField"><input name="carrierServiceCallBack" id="carrierServiceCallBack" class="Polaris-TextField__Input basic-details" aria-describedby="carrierServiceCallBackError" aria-labelledby="carrierServiceCallBackLabel" aria-invalid="true" aria-multiline="false" value="@if(!empty($carrier_call_back_url)){{$carrier_call_back_url}}@endif">
                          <div class="Polaris-TextField__Backdrop"></div>
                        </div>
                      </div>
                    </div>
                    <div class="Polaris-Labelled__Error">
                      <div id="carrierServiceCallBackError" class="Polaris-InlineError" style="display: none">
                        <div class="Polaris-InlineError__Icon"><span class="Polaris-Icon"><svg viewBox="0 0 20 20" class="Polaris-Icon__Svg" focusable="false" aria-hidden="true">
                          <path d="M10 18a8 8 0 1 1 0-16 8 8 0 0 1 0 16zm-1-8h2V6H9v4zm0 4h2v-2H9v2z" fill-rule="evenodd"></path>
                        </svg></span></div>Callback is required
                      </div>
                    </div>
                  </div>
                </div>

                <div class="Polaris-FormLayout__Item">

                  <div class="">
                    <div class="Polaris-Labelled__LabelWrapper">
                      <div class="Polaris-Label"><label id="carrierServiceStatusLabel" for="carrierServiceStatus" class="Polaris-Label__Text">Carrier service status</label></div>
                    </div>
                    <div class="Polaris-Select"><select name="carrierServiceStatus" id="carrierServiceStatus" class="basic-details" aria-invalid="false">

                      <option value="true" @if($carrier_status == '1') selected @endif>Enable</option>

                      <option value="false" @if($carrier_status == '0') selected @endif >Disable</option>
                    </select>

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

              <div class="Polaris-FormLayout__Item">
                  @if(empty($carrier_id))
                  <input type="hidden" name="carrierServiceID" value="">
                    <div class="Polaris-Page-Header__PrimaryActionWrapper">
                      <button type="button" class="Polaris-Button" id="save_button" data-value="create" style="opacity: 1;"><span class="Polaris-Button__Content"><span class="Polaris-Button__Text">Create</span></span></button>
                    </div>
                    @else
                    <input type="hidden" name="carrierServiceID" value="{{$carrier_id}}">
                    <div class="Polaris-Page-Header__PrimaryActionWrapper" >
                      <button type="button" class="Polaris-Button" id="save_button" data-value="update" style="opacity: 1;"><span class="Polaris-Button__Content"><span class="Polaris-Button__Text">Update</span></span></button>
                    </div>
                    @endif
              </div>




              </div>

            </div>
          </div>

        </form>
      </div>
    </div>
  </div>
</div>
</main>
<div id="wait" style="display:none;position:fixed;top:50%;left:50%;z-index: 9999; --top-bar-background:#00848e; --top-bar-background-lighter:#1d9ba4; --top-bar-color:#f9fafb;"><img src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNDQgNDQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTE1LjU0MiAxLjQ4N0EyMS41MDcgMjEuNTA3IDAgMDAuNSAyMmMwIDExLjg3NCA5LjYyNiAyMS41IDIxLjUgMjEuNSA5Ljg0NyAwIDE4LjM2NC02LjY3NSAyMC44MDktMTYuMDcyYTEuNSAxLjUgMCAwMC0yLjkwNC0uNzU2QzM3LjgwMyAzNC43NTUgMzAuNDczIDQwLjUgMjIgNDAuNSAxMS43ODMgNDAuNSAzLjUgMzIuMjE3IDMuNSAyMmMwLTguMTM3IDUuMy0xNS4yNDcgMTIuOTQyLTE3LjY1YTEuNSAxLjUgMCAxMC0uOS0yLjg2M3oiIGZpbGw9IiM5MTlFQUIiLz48L3N2Zz4K" alt="" class="Polaris-Spinner Polaris-Spinner--colorTeal Polaris-Spinner--sizeLarge" draggable="false"><span role="status"><span class="Polaris-VisuallyHidden">Spinner example</span></span></div>
<!-- <div id="wait" style="display:none;position:absolute;top:50%;left:50%;z-index: 9999;"><img src="{{ URL::asset('images/load.gif') }}"" width="75" height="75" /></div> -->
@endsection

@section('scripts')
@parent
<script src="https://unpkg.com/@shopify/app-bridge@1"></script>

<script src="{{ URL::asset('js/jquery-3.1.1.min.js') }}"></script>
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/lazysizes/5.2.0/lazysizes.min.js"></script> -->
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>


<script src="{{ URL::asset('js/custom.js') }}"></script>

<script type="text/javascript">
  $.ajaxSetup({
    headers: {
      'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    }
  });
</script>


<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>

@endsection