@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="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
/>
<link
  rel="stylesheet"
  href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css"
/>
<style>

  .hidden {
    display: none;
  }
  .astyle {
    cursor: pointer;

  }
  .active a{
      color :dimgray;
    }

    .Polaris-TextContainer{
      text-align:center;
    }
    .Polaris-TextContainer .pagination li{
      display:inline-block;
    }
    .Polaris-TextContainer .pagination li a{
      background: #fff;
      border: 1px solid #ddd;
      padding: 5px;
      border-radius: 5px;
      color: #232062;
    }
    .Polaris-TextContainer .pagination li a:hover{
      text-decoration:none;
      color:#000;
      background: #e0dfdf;
    }
    .loaderBackground {
      position:relative;
    }
    .overlay {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0%;
      left: 0%;
      padding: 2px;
      background: rgba(0, 0, 0, 0.20);
      text-align: center;
      padding-top: 27%;
      z-index: 99999;
    }
    .loader {
      position:fixed;
      left: 50%;
      height: auto;
      margin-left: -25px;
      width: 50px;
      top: 40%;
    }
    .clear { clear:both;}
    .float_left{ float:left;}
    .input-textarea-deco{
        width:90%;
        height:90%;
        background-color:#F9FAFB;
        border:1px solid #DFE3E8;
    }
    .input-texbox-deco{
        width:90%;
        background-color:#F9FAFB;
        border:1px solid #DFE3E8;
    }
</style>
<div style="--top-bar-background:#00848e; --top-bar-background-lighter:#1d9ba4; --top-bar-color:#f9fafb;">
  <div class="Polaris-Page">

  <div class="Polaris-Card">
    <div>
      <ul role="tablist" class="Polaris-Tabs">
        <li class="Polaris-Tabs__TabContainer"><a href="loadproducts" id="all-customers" tabindex="0" class="Polaris-Tabs__Tab" aria-selected="false" ><span class="Polaris-Tabs__Title">Products</span></a></li>
        <li class="Polaris-Tabs__TabContainer"><a href="loadvariants" id="accepts-marketing" tabindex="-1" class="Polaris-Tabs__Tab Polaris-Tabs__Tab--selected" aria-selected="true" ><span class="Polaris-Tabs__Title">Variants</span></a></li>
      </ul>

      <div class="Polaris-FormLayout" style="float:right;">
        <div role="group" class="Polaris-FormLayout--grouped" style="padding-right:15px;">
          <div class="Polaris-FormLayout__Items">
            <div class="Polaris-FormLayout__Item">
              <div class="Polaris-TextField">
                <input placeholder="Search by SKU" class="Polaris-TextField__Input txt-search" min="-Infinity" max="Infinity" step="1" type="text" aria-describedby="PolarisTextField10HelpText" aria-labelledby="PolarisTextField10Label" aria-invalid="false" aria-multiline="false" value="">
                <button type="button" class="btn-search-variant Polaris-Button Polaris-Button--primary"><span class="Polaris-Button__Content"><span class="Polaris-Button__Text">Search</span></span></button>
              </div>
            </div>
          </div>
        </div>
      </div>

    </div>
  </div>

    <div class="loaderBackground">
      <div class="Polaris-Page__Content">
        <div class="Polaris-Card">
          <div class="">
            <div class="Polaris-DataTable__Navigation"><button type="button" class="Polaris-Button Polaris-Button--disabled Polaris-Button--plain Polaris-Button--iconOnly" disabled="" aria-label="Scroll table left one column"><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 16" fill-rule="evenodd"></path>
                      </svg></span></span></span></button><button type="button" class="Polaris-Button Polaris-Button--plain Polaris-Button--iconOnly" aria-label="Scroll table right one column"><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 16" fill-rule="evenodd"></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"></th>
                      <th data-polaris-header-cell="true" class="Polaris-DataTable__Cell Polaris-DataTable__Cell--verticalAlignTop Polaris-DataTable__Cell--firstColumn Polaris-DataTable__Cell--header" scope="col">SKU</th>
                      <th data-polaris-header-cell="true" class="Polaris-DataTable__Cell--firstColumn Polaris-DataTable__Cell Polaris-DataTable__Cell--verticalAlignTop Polaris-DataTable__Cell--header" scope="col">Title</th>
                    </tr>

                  </thead>
                  <tbody>
                    @foreach( $products as $product)
                    <tr class="Polaris-DataTable__TableRow">
                      <td scope="row"><a style="padding-left:10px;" class="addnewDataVariant" variant_id="{{$product['variant_id']}}" product_id="{{$product['product_id']}}" href="#0"><i title="expand" class="fa fa-plus"></i></a></td>
                      <td class="Polaris-DataTable__Cell Polaris-DataTable__Cell--firstColumn" scope="row">{{$product['sku']}}</td>
                      <td class="Polaris-DataTable__Cell--verticalAlignTop Polaris-DataTable__Cell Polaris-DataTable__Cell--firstColumn">{{$product['title']}}</td>


                    </tr>
                    @endforeach
                  </tbody>
                </table>
              </div>
            </div>
          </div>
        </div>
        <div class="Polaris-TextContainer">

          <p>
          <ul style="list-style:none" class='pagination text-center' id="pagination">
                    </ul></p>
        </div><br>
      </div>
      <div id="wait" class="overlay"><img class="loader" src="{{ URL::asset('images/load.gif') }}" width="50" height="50" /></div>
    </div>
  </div>
</div>
<div class="Polaris-TextContainer">
  <p> </p>
</div>
<div class="Polaris-TextContainer">
<p> </p>
</div>
<div style="display:none;" id="dialog" title="Confirmation Required">
  Confirm, do you want to delete the metafield?
</div>

<div>
  <div id="addVariantModal" style="display:none;" class="Polaris-Modal-Dialog__Container undefined modal" data-polaris-layer="true" data-polaris-overlay="true">
    <div>
      <div class="Polaris-Modal-Dialog__Modal" role="dialog" aria-labelledby="modal-header10" tabindex="-1">
        <div class="Polaris-Modal-Header">
          <div id="modal-header10" class="Polaris-Modal-Header__Title">
            <h2 class="Polaris-DisplayText Polaris-DisplayText--sizeSmall">Add Metafield</h2>
          </div><button class="Polaris-Modal-CloseButton close"  aria-label="Close"><span class="Polaris-Icon Polaris-Icon--colorInkLighter Polaris-Icon--isColored"><svg viewBox="0 0 20 20" class="Polaris-Icon__Svg" focusable="false" aria-hidden="true">
                <path d="M11.414 10l6.293-6.293a.999.999 0 1 0-1.414-1.414L10 8.586 3.707 2.293a.999.999 0 1 0-1.414 1.414L8.586 10l-6.293 6.293a.999.999 0 1 0 1.414 1.414L10 11.414l6.293 6.293a.997.997 0 0 0 1.414 0 .999.999 0 0 0 0-1.414L11.414 10z" fill-rule="evenodd"></path>
              </svg></span></button>
        </div>
        <div class="Polaris-Modal__BodyWrapper">
          <div class="Polaris-Modal__Body Polaris-Scrollable Polaris-Scrollable--vertical" data-polaris-scrollable="true">
            <section class="Polaris-Modal-Section">
              <div class="Polaris-TextContainer">
                <p><div class="Polaris-TextField"><input onchange="return trim(this)" placeholder="Name Space" class="input-texbox-deco Polaris-TextField__Input add-input add-variant-meta-name" min="-Infinity" max="Infinity" step="1" type="text" aria-describedby="PolarisTextField10HelpText" aria-labelledby="PolarisTextField10Label" aria-invalid="false" aria-multiline="false" value="">

              </div></p>
              <p><div class="Polaris-TextField"><input onchange="return trim(this)" placeholder="Key" class="input-texbox-deco Polaris-TextField__Input add-input add-variant-meta-key" min="-Infinity" max="Infinity" step="1" type="text" aria-describedby="PolarisTextField10HelpText" aria-labelledby="PolarisTextField10Label" aria-invalid="false" aria-multiline="false" value="">

              </div></p>
              <p><div class="Polaris-TextField"><textarea placeholder="Value" class="Polaris-TextField__Input add-input add-variant-meta-value input-textarea-deco" min="-Infinity" max="Infinity" step="1" type="text" aria-describedby="PolarisTextField10HelpText" aria-labelledby="PolarisTextField10Label" aria-invalid="false" aria-multiline="false" value=""> </textarea>

              </div></p>

              <!--Error message when adding the Metafield add-->
              <div id="variant-add_error_message" class="error hidden">
                  <div style="--top-bar-background:#00848e; --top-bar-background-lighter:#1d9ba4; --top-bar-color:#f9fafb; --p-frame-offset:0px;">
                  <div class="Polaris-Banner Polaris-Banner--statusWarning Polaris-Banner--withinPage" tabindex="0" role="alert" aria-live="polite" aria-labelledby="Banner6Heading" aria-describedby="Banner6Content">
                    <div class="Polaris-Banner__Ribbon"><span class="Polaris-Icon Polaris-Icon--colorYellowDark Polaris-Icon--isColored Polaris-Icon--hasBackdrop"><svg viewBox="0 0 20 20" class="Polaris-Icon__Svg" focusable="false" aria-hidden="true">
                          <circle fill="currentColor" cx="10" cy="10" r="9"></circle>
                          <path d="M10 0C4.486 0 0 4.486 0 10s4.486 10 10 10 10-4.486 10-10S15.514 0 10 0m0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8m0-13a1 1 0 0 0-1 1v4a1 1 0 1 0 2 0V6a1 1 0 0 0-1-1m0 8a1 1 0 1 0 0 2 1 1 0 0 0 0-2"></path>
                        </svg></span></div>
                    <div class="Polaris-Banner__ContentWrapper">
                      <div class="Polaris-Banner__Heading" id="Banner6Heading">
                        <p class="Polaris-Heading">Please check the fields</p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <!--Error message when adding the Metafield add-->

            </section>
          </div>
        </div>
        <div class="Polaris-Modal-Footer">
          <div class="Polaris-Modal-Footer__FooterContent">
            <div class="Polaris-Stack Polaris-Stack--alignmentCenter">
              <div class="Polaris-Stack__Item Polaris-Stack__Item--fill"></div>
              <div class="Polaris-Stack__Item">
                <div class="Polaris-ButtonGroup">

                  <div class="Polaris-ButtonGroup__Item"><button type="button" class="save-variant-meta-add Polaris-Button Polaris-Button--primary"><span class="Polaris-Button__Content"><span class="Polaris-Button__Text">Save</span></span></button></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<div>
  <div id="editModal" style="display:none;" class="Polaris-Modal-Dialog__Container undefined modal" data-polaris-layer="true" data-polaris-overlay="true">
    <div>
      <div class="Polaris-Modal-Dialog__Modal" role="dialog" aria-labelledby="modal-header10" tabindex="-1">
        <div class="Polaris-Modal-Header">
          <div id="modal-header10" class="Polaris-Modal-Header__Title">
            <h2 class="Polaris-DisplayText Polaris-DisplayText--sizeSmall">Edit Metafield</h2>
          </div><button class="Polaris-Modal-CloseButton close"  aria-label="Close"><span class="Polaris-Icon Polaris-Icon--colorInkLighter Polaris-Icon--isColored"><svg viewBox="0 0 20 20" class="Polaris-Icon__Svg" focusable="false" aria-hidden="true">
                <path d="M11.414 10l6.293-6.293a.999.999 0 1 0-1.414-1.414L10 8.586 3.707 2.293a.999.999 0 1 0-1.414 1.414L8.586 10l-6.293 6.293a.999.999 0 1 0 1.414 1.414L10 11.414l6.293 6.293a.997.997 0 0 0 1.414 0 .999.999 0 0 0 0-1.414L11.414 10z" fill-rule="evenodd"></path>
              </svg></span></button>
        </div>
        <div class="Polaris-Modal__BodyWrapper">
          <div class="Polaris-Modal__Body Polaris-Scrollable Polaris-Scrollable--vertical" data-polaris-scrollable="true">
            <section class="Polaris-Modal-Section">
              <div class="Polaris-TextContainer">
                <div style="width:100%">
                    <div class="float_left" style="text-align:right;width: 25%;">Name Space   :&nbsp;&nbsp;</div>
                    <div class="float_left edit-meta-name" style="text-align:left;width: 75%;"></div>
                    <div class="clear"></div>
                </div>
                <div style="width:100%">
                    <div class="float_left" style="text-align:right;width: 25%;">Key   :&nbsp;&nbsp;</div>
                    <div class="float_left edit-meta-key" style="text-align:left;width: 75%;"></div>
                    <div class="clear"></div>
                </div>
                <div style="width:100%">
                    <div class="float_left" style="text-align:right;width: 25%;">value   :&nbsp;&nbsp;</div>
                    <div class="float_left" style="text-align:left;width: 75%;">
                        <textarea placeholder="Value" class="Polaris-TextField__Input edit-input edit-meta-value input-textarea-deco" min="-Infinity" max="Infinity" step="1" type="text" aria-describedby="PolarisTextField10HelpText" aria-labelledby="PolarisTextField10Label" aria-invalid="false" aria-multiline="false" value=""> </textarea>
                    </div>
                    <div class="clear"></div>
                </div>
              <!--Error message when editing the Metafield-->
              <div id="edit_error_message" class="error hidden">
                  <div style="--top-bar-background:#00848e; --top-bar-background-lighter:#1d9ba4; --top-bar-color:#f9fafb; --p-frame-offset:0px;">
                  <div class="Polaris-Banner Polaris-Banner--statusWarning Polaris-Banner--withinPage" tabindex="0" role="alert" aria-live="polite" aria-labelledby="Banner6Heading" aria-describedby="Banner6Content">
                    <div class="Polaris-Banner__Ribbon"><span class="Polaris-Icon Polaris-Icon--colorYellowDark Polaris-Icon--isColored Polaris-Icon--hasBackdrop"><svg viewBox="0 0 20 20" class="Polaris-Icon__Svg" focusable="false" aria-hidden="true">
                          <circle fill="currentColor" cx="10" cy="10" r="9"></circle>
                          <path d="M10 0C4.486 0 0 4.486 0 10s4.486 10 10 10 10-4.486 10-10S15.514 0 10 0m0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8m0-13a1 1 0 0 0-1 1v4a1 1 0 1 0 2 0V6a1 1 0 0 0-1-1m0 8a1 1 0 1 0 0 2 1 1 0 0 0 0-2"></path>
                        </svg></span></div>
                    <div class="Polaris-Banner__ContentWrapper">
                      <div class="Polaris-Banner__Heading" id="Banner6Heading">
                        <p class="Polaris-Heading">Please check the fields:</p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <!--Error message when editing the Metafield-->

              </div>
            </section>
          </div>
        </div>
        <div class="Polaris-Modal-Footer">
          <div class="Polaris-Modal-Footer__FooterContent">
            <div class="Polaris-Stack Polaris-Stack--alignmentCenter">
              <div class="Polaris-Stack__Item Polaris-Stack__Item--fill"></div>
              <div class="Polaris-Stack__Item">
                <div class="Polaris-ButtonGroup">
                  <div class="Polaris-ButtonGroup__Item"><button attr_meta_id="" type="button" class="save-meta-edit Polaris-Button Polaris-Button--primary"><span class="Polaris-Button__Content"><span class="Polaris-Button__Text">Save</span></span></button></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</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 src="{{ URL::asset('js/jquery-3.1.1.min.js') }}"></script>
    <script src="{{ URL::asset('js/core.js') }}"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
      $("#wait").css("display", "none");
    });

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