@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="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
<link rel="stylesheet"  href="{{ URL::asset('css/custom.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">

          <!---------------------------->
          <div class="Polaris-Layout">
            <div class="Polaris-Layout__AnnotatedSection">

              <div class="Polaris-Layout__AnnotationWrapper" style="margin-left: 0rem">
                

                <!--- add photo --->
                <div style="--top-bar-background:#00848e; --top-bar-background-lighter:#1d9ba4; --top-bar-color:#f9fafb;" id="add_photo" class="container_content hide">
                  <!--- image saved banner --->
                  <div id="image_saved_banner" class="hide">
                    <div class="Polaris-Banner Polaris-Banner--statusSuccess Polaris-Banner--hasDismiss Polaris-Banner--withinPage" tabindex="0" role="status" aria-live="polite" aria-labelledby="Banner4Heading" aria-describedby="Banner4Content">
                      <div class="Polaris-Banner__Dismiss"><button type="button" class="Polaris-Button Polaris-Button--plain Polaris-Button--iconOnly" aria-label="Dismiss notification" id="close_image_saved_banner"><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="M11.414 10l4.293-4.293a.999.999 0 1 0-1.414-1.414L10 8.586 5.707 4.293a.999.999 0 1 0-1.414 1.414L8.586 10l-4.293 4.293a.999.999 0 1 0 1.414 1.414L10 11.414l4.293 4.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></span></span></button></div>
                      <div class="Polaris-Banner__Ribbon"><span class="Polaris-Icon Polaris-Icon--colorGreenDark 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 8m2.293-10.707L9 10.586 7.707 9.293a1 1 0 1 0-1.414 1.414l2 2a.997.997 0 0 0 1.414 0l4-4a1 1 0 1 0-1.414-1.414"></path>
                      </svg></span></div>
                      <div>
                        <div class="Polaris-Banner__Heading" id="Banner4Heading">
                          <p class="Polaris-Heading">Image assigned</p>
                        </div>
                        <div class="Polaris-Banner__Content" id="Banner4Content">
                          <p class="desc">
                            Image has been assigned to product “<span id='product_title_success'></span>”
                          </p>
                          <div class="Polaris-Banner__Actions">
                            <div class="Polaris-ButtonGroup">
                              <div class="Polaris-ButtonGroup__Item">
                                <div class="Polaris-Banner__PrimaryAction"><a target="_blank" rel="noopener noreferrer" href="" id="viewUpdatedProduct" type="button" class="Polaris-Button Polaris-Button--outline"><span class="Polaris-Button__Content"><span class="Polaris-Button__Text">View Product</span></span></a></div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <!--- modal --->
                <!--  <div id="preview_image" class="hide">-->
                <!--    <div style="--top-bar-background:#00848e; --top-bar-background-lighter:#1d9ba4; --top-bar-color:#f9fafb;">-->
                <!--      <div style="height: 964px;"><button type="button" class="Polaris-Button"><span class="Polaris-Button__Content"><span class="Polaris-Button__Text">Open</span></span></button></div>-->
                <!--    </div>-->
                <!--    <div>-->
                <!--      <div class="Polaris-Modal-Dialog__Container undefined" data-polaris-layer="true" data-polaris-overlay="true">-->
                <!--        <div>-->
                <!--          <div role="dialog" aria-labelledby="modal-header12" tabindex="-1" class="Polaris-Modal-Dialog">-->
                <!--            <div class="Polaris-Modal-Dialog__Modal Polaris-Modal-Dialog--sizeLarge">-->
                <!--              <div class="Polaris-Modal-Header">-->
                <!--                <div id="modal-header12" class="Polaris-Modal-Header__Title">-->
                <!--                  <h2 class="Polaris-DisplayText Polaris-DisplayText--sizeSmall"></h2>-->
                <!--                </div><button id="close_preview" class="Polaris-Modal-CloseButton" 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">-->
                <!--                  <section class="Polaris-Modal-Section">-->
                <!--                    <div class="Polaris-Stack Polaris-Stack--vertical">-->
                <!--                      <div class="Polaris-Stack__Item">-->
                <!--                        <div class="Polaris-Labelled--hidden">-->
                <!--                          <div class="Polaris-Labelled__LabelWrapper">-->
                <!--                            <div class="Polaris-Label"><label id="PolarisDropZone2Label" for="PolarisDropZone2" class="Polaris-Label__Text">Upload file</label></div>-->
                <!--                          </div>-->

                <!--                          <img src="" id="large_size_preview">-->
                <!--                        </div>-->
                <!--                      </div>-->
                <!--                    </div>-->
                <!--                  </section>-->
                <!--                </div>-->
                <!--              </div>-->
                <!--              <div class="Polaris-Modal-Footer">-->
                <!--                <div class="Polaris-Modal-Footer__FooterContent">-->
                                  <!-- <div class="Polaris-Card">
                <!--                    <div class="Polaris-Card__Header">-->
                <!--                      <h2 class="Polaris-Heading">Image source</h2>-->
                <!--                    </div>-->
                <!--                    <div class="Polaris-Card__Section">-->
                <!--                      <p>More details about this image you can find <a href="#" target="_blank">here <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">-->
                <!--                        <path fill="#006FBB" fill-rule="evenodd" d="M13 12a1 1 0 0 1 1 1v1a1 1 0 0 1-1 1H6c-.575 0-1-.484-1-1V7a1 1 0 0 1 1-1h1a1 1 0 0 1 0 2v5h5a1 1 0 0 1 1-1zm-2-7h4v4a1 1 0 1 1-2 0v-.586l-2.293 2.293a.999.999 0 1 1-1.414-1.414L11.586 7H11a1 1 0 0 1 0-2z"/>-->
                <!--                      </svg></a>-->
                <!--                    </p>-->
                <!--                  </div>-->
                <!--                </div> -->-->
                <!--                <div style="text-align:center;"><img src="{{ URL::asset('images/zoom_out_icon.jpg') }}" id="close_preview2"></div>-->
                <!--              </div>-->
                <!--            </div>-->
                <!--          </div>-->
                <!--        </div>-->
                <!--      </div>-->
                <!--    </div>-->
                <!--  </div>-->
                <!--  <div class="Polaris-Backdrop"></div>-->
                <!--</div>-->
                <!--- add photo --->

                <div class="Polaris-Page">
                  <div class="Polaris-Page-Header">
                    <div class="Polaris-Page-Header__MainContent">
                      <div class="Polaris-Page-Header__TitleActionMenuWrapper">
                        <div class="float_left">
                          <div class="Polaris-Header-Title__TitleAndSubtitleWrapper">
                            <div class="Polaris-Header-Title">
                              <h1 class="Polaris-DisplayText Polaris-DisplayText--sizeLarge" id="asign_product_title"></h1>
                            </div>
                          </div>
                        </div>
                        <div class="float_left" style="margin-left: 30px;">
                          <div class="Polaris-ButtonGroup">
                              <div class="Polaris-ButtonGroup__Item"><a target="_blank" id="editProduct" href="" class="Polaris-Button"><span class="Polaris-Button__Content"><span class="Polaris-Button__Text">Edit product</span></span></a></div>                              
                            </div>
                        </div>
                        <div class="float_left" style="margin-left: 30px;">
                          <div class="Polaris-ButtonGroup">
                              <div class="Polaris-ButtonGroup__Item"><a target="_blank" id="viewProduct" href="" class="Polaris-Button"><span class="Polaris-Button__Content"><span class="Polaris-Button__Text">View product</span></span></a></div>                              
                            </div>
                        </div>
                        <div class="indicator float_right">
                            <div id="indicator_state" class="hide">
                              <div class="Polaris-Banner Polaris-Banner--statusSuccess Polaris-Banner--hasDismiss Polaris-Banner--withinPage" tabindex="0" role="status" aria-live="polite" aria-labelledby="Banner17Heading" aria-describedby="Banner17Content">
                                <div class="Polaris-Banner__Dismiss"><button type="button" id="close_indicator_state" class="Polaris-Button Polaris-Button--plain Polaris-Button--iconOnly" aria-label="Dismiss notification"><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="M11.414 10l4.293-4.293a.999.999 0 1 0-1.414-1.414L10 8.586 5.707 4.293a.999.999 0 1 0-1.414 1.414L8.586 10l-4.293 4.293a.999.999 0 1 0 1.414 1.414L10 11.414l4.293 4.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></span></span></button></div>
                                <div class="Polaris-Banner__Ribbon"><span class="Polaris-Icon Polaris-Icon--colorGreenDark 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 8m2.293-10.707L9 10.586 7.707 9.293a1 1 0 1 0-1.414 1.414l2 2a.997.997 0 0 0 1.414 0l4-4a1 1 0 1 0-1.414-1.414"></path>
                                </svg></span></div>
                                <div>
                                  <div class="Polaris-Banner__Heading" id="Banner17Heading">
                                    <p class="Polaris-Heading" id="photoCount">Photo selected</p>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                          <div class="float_clear"></div>
                      </div>
                    </div>
                  </div>
                  <div class="Polaris-Page__Content">
                   <div class="Polaris-Card" id="div-to-disable">
                    <div class="Polaris-Card__Header">
                      <h2 class="Polaris-Heading">
                        <div class="heading_add_photo">

                          <div class="float_left">
                            <div class="Polaris-ButtonGroup">
                              <div class="Polaris-ButtonGroup__Item"><button onclick="viewAllProducts(event, 'no_photo')" type="button" class="Polaris-Button"><span class="Polaris-Button__Content"><span class="Polaris-Button__Text">View all products</span></span></button></div>                              
                            </div>
                           
                          </div>


                          <div class="float_right">
                            <div class="Polaris-ButtonGroup">
                              <div class="Polaris-ButtonGroup__Item"><button type="button" class="Polaris-Button" id="skip_add_photo"><span class="Polaris-Button__Content"><span class="Polaris-Button__Text">Skip</span></span></button></div>
                              <div class="Polaris-ButtonGroup__Item" style="text-align:right;"><button type="button" class="Polaris-Button Polaris-Button--primary" id="save_add_photo" style="opacity: 0.6;"  disabled><span class="Polaris-Button__Content"><span class="Polaris-Button__Text">Save</span></span></button></div>
                            </div>
                          </div>

                          <div class="float_right" style="margin-right: 50px; ">
                            <nav class="Polaris-Pagination" aria-label="Pagination">
                              <button type="button" id="previousButton" 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-2" fill-rule="evenodd"></path>
                              </svg></span></button><button type="button" id="nextButton" class="Polaris-Pagination__Button Polaris-Pagination__NextButton" aria-label="Next"><span class="Polaris-Icon"><svg viewBox="0 0 20 20" class="Polaris-Icon__Svg" focusable="false" aria-hidden="true">
                                <path d="M17.707 9.293l-5-5a.999.999 0 1 0-1.414 1.414L14.586 9H3a1 1 0 1 0 0 2h11.586l-3.293 3.293a.999.999 0 1 0 1.414 1.414l5-5a.999.999 0 0 0 0-1.414" fill-rule="evenodd"></path>
                              </svg></span></button>
                            </nav>
                          </div>
			<div class="float_right" style="margin-right: 50px; ">
                            <div class="Polaris-ButtonGroup">
				<div class="Polaris-ButtonGroup__Item"><button type="button" class="Polaris-Button" id="no_public_image"><span class="Polaris-Button__Content"><span class="Polaris-Button__Text">No Public Image</span></span></button></div>
			    </div>
			</div>
                          <div class="float_clear"></div>
                          <!-- <div class="photo1">

                            <div class="Polaris-SkeletonThumbnail Polaris-SkeletonThumbnail--sizeLarge" style="width: 50px;  height: 50px;  background-color: #ebedf0;"></div>

                          </div>
                          <div class="product_title">
                            <div class="title"></div>
                            <div class="price">$28.99</div>
                          </div> -->

                          <!-- <div class="indicator">
                            <div id="indicator_state" class="hide">
                              <div class="Polaris-Banner Polaris-Banner--statusSuccess Polaris-Banner--hasDismiss Polaris-Banner--withinPage" tabindex="0" role="status" aria-live="polite" aria-labelledby="Banner17Heading" aria-describedby="Banner17Content">
                                <div class="Polaris-Banner__Dismiss"><button type="button" id="close_indicator_state" class="Polaris-Button Polaris-Button--plain Polaris-Button--iconOnly" aria-label="Dismiss notification"><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="M11.414 10l4.293-4.293a.999.999 0 1 0-1.414-1.414L10 8.586 5.707 4.293a.999.999 0 1 0-1.414 1.414L8.586 10l-4.293 4.293a.999.999 0 1 0 1.414 1.414L10 11.414l4.293 4.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></span></span></button></div>
                                <div class="Polaris-Banner__Ribbon"><span class="Polaris-Icon Polaris-Icon--colorGreenDark 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 8m2.293-10.707L9 10.586 7.707 9.293a1 1 0 1 0-1.414 1.414l2 2a.997.997 0 0 0 1.414 0l4-4a1 1 0 1 0-1.414-1.414"></path>
                                </svg></span></div>
                                <div>
                                  <div class="Polaris-Banner__Heading" id="Banner17Heading">
                                    <p class="Polaris-Heading" id="photoCount">Photo selected</p>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div> -->

                        </div>
                      </h2>
                    </div>
                    <div class="Polaris-Card__Section">
                      <div class="Polaris-Scrollable Polaris-Scrollable--vertical Polaris-Scrollable--hasTopShadow Polaris-Scrollable--hasBottomShadow Polaris-Scrollable--verticalHasScrolling" data-polaris-scrollable="true" style="height: 652px;">
                        <div class="image_blox_content" id="search_results">

                        </div>
                      </div>
                    </div>
                    <div class="Polaris-Card__Footer">
                      <!-- <div class="Polaris-ButtonGroup">
                        <div class="Polaris-ButtonGroup__Item"><button type="button" class="Polaris-Button" id="skip_add_photo"><span class="Polaris-Button__Content"><span class="Polaris-Button__Text">Skip</span></span></button></div>
                        <div class="Polaris-ButtonGroup__Item" style="text-align:right;"><button type="button" class="Polaris-Button Polaris-Button--primary" id="save_add_photo" style="opacity: 0.6;"  disabled><span class="Polaris-Button__Content"><span class="Polaris-Button__Text">Save</span></span></button></div>
                      </div> -->
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div style="--top-bar-background:#00848e; --top-bar-background-lighter:#1d9ba4; --top-bar-color:#f9fafb;" id="list_no_photo" class="full-width">
            <div>
              <div>
                <div class="border_shadow">
                  <div class="container_content">
                    <ul role="tablist" class="Polaris-Tabs">
                      <li class="Polaris-Tabs__TabContainer">
                        <button onclick="opentab(event, 'no_photo')" role="tab" type="button" tabindex="0" class="tablinks Polaris-Tabs__Tab Polaris-Tabs__Tab--selected" aria-selected="true" aria-controls="all-customers-content" aria-label="All customers">
                          <span class="Polaris-Tabs__Title1">All products</span>
                        </button>
                      </li>
                      <li class="Polaris-Tabs__TabContainer">
                        <button onclick="opentab(event, 'product_with_no_photo')" id="shoSingleProduct" role="tab" type="button" tabindex="-1" class="tablinks Polaris-Tabs__Tab" aria-selected="false" aria-controls="accepts-marketing-content" disabled="disabled">
                          <span class="Polaris-Tabs__Title1">Image assignment tool</span>
                        </button>
                      </li>
                      <!-- <li class="last_final Polaris-Tabs__TabContainer">
                        <button class="Polaris-Button Polaris-Button--primary">
                          <span class="Polaris-Tabs__Title1">Add Photo to Product</span>
                        </button>
                      </li> -->
                    </ul>
                    <!-- <div class="Polaris-Tabs Polaris-Tabs__TabMeasurer">
                      <li class="Polaris-Tabs__TabContainer"><button onclick="opentab(event, 'no_photo')"  role="tab" type="button" tabindex="-1" class="Polaris-Tabs__Tab Polaris-Tabs__Tab--selected" aria-selected="true"><span class="Polaris-Tabs__Title">Products with no photo</span></button></li>
                      <li class="Polaris-Tabs__TabContainer"><button onclick="opentab(event, 'all_products')"  role="tab" type="button" tabindex="-1" class="Polaris-Tabs__Tab" aria-selected="false"><span class="Polaris-Tabs__Title">All products</span></button></li>
                    </div> -->
                  </div>
                </div>

                <!-- all products with no_photo  -->
                @if($total_products > 0)
                <div class="Polaris-Tabs__Panel container_content tabcontent" id="no_photo" role="tabpanel" aria-labelledby="Products with no photo" tabindex="-1" style="display:block;">
                  <form method="post">
                    <div style="--top-bar-background:#00848e; --top-bar-background-lighter:#1d9ba4; --top-bar-color:#f9fafb;">

                      <div class="Polaris-Page">
                        <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" colspan="5">Showing {{$total_products}} products of {{$total_products}}</th>
                                      </tr>
                                    </thead>
                                    <tbody>

                                       @foreach( $products as $product)
                                        <tr class="Polaris-DataTable__TableRow" id="product-{{$product['id']}}">
                                          <th class="Polaris-DataTable__Cell Polaris-DataTable__Cell--verticalAlignTop Polaris-DataTable__Cell--firstColumn" scope="row" colspan="5">

                                            <label class="Polaris-Choice" for="PolarisCheckbox1">
                                              <span class="Polaris-Choice__Control">
                                                <span class="Polaris-Thumbnail Polaris-Thumbnail--sizeSmall">
                                                  <div class="Polaris-SkeletonThumbnail Polaris-SkeletonThumbnail--sizeLarge" style="width: 32px;  height: 32px;  background-color: #ebedf0;"></div>

                                                </span>
                                              </span>
                                              <span class="Polaris-Choice__Label" product_id="{{$product['id']}}" product_handle="{{$product['handle']}}">{{$product['title']}}</span>
                                            </label>

                                          </th>
                                        </tr>
                                        @endforeach

                                      
                                    </tbody>
                                  </table>
                                </div>
                                <div class="Polaris-DataTable__Footer">
                                  <!-- <nav class="Polaris-Pagination" aria-label="Pagination">
                                    <button 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-2" fill-rule="evenodd"></path>
                                    </svg></span></button><button type="button" class="Polaris-Pagination__Button Polaris-Pagination__NextButton" aria-label="Next"><span class="Polaris-Icon"><svg viewBox="0 0 20 20" class="Polaris-Icon__Svg" focusable="false" aria-hidden="true">
                                      <path d="M17.707 9.293l-5-5a.999.999 0 1 0-1.414 1.414L14.586 9H3a1 1 0 1 0 0 2h11.586l-3.293 3.293a.999.999 0 1 0 1.414 1.414l5-5a.999.999 0 0 0 0-1.414" fill-rule="evenodd"></path>
                                    </svg></span></button>
                                  </nav> -->
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </form>
                  <div class="Polaris-FooterHelp">
                    <div class="Polaris-FooterHelp__Content">
                      <div class="Polaris-FooterHelp__Icon"><span class="Polaris-Icon Polaris-Icon--colorTeal Polaris-Icon--isColored Polaris-Icon--hasBackdrop"><svg viewBox="0 0 20 20" class="Polaris-Icon__Svg" focusable="false" aria-hidden="true">
                        <circle cx="10" cy="10" r="9" fill="currentColor"></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.411 0-8-3.589-8-8s3.589-8 8-8 8 3.589 8 8-3.589 8-8 8m0-4a1 1 0 1 0 0 2 1 1 0 1 0 0-2m0-10C8.346 4 7 5.346 7 7a1 1 0 1 0 2 0 1.001 1.001 0 1 1 1.591.808C9.58 8.548 9 9.616 9 10.737V11a1 1 0 1 0 2 0v-.263c0-.653.484-1.105.773-1.317A3.013 3.013 0 0 0 13 7c0-1.654-1.346-3-3-3"></path>
                      </svg></span></div>
                      <div class="Polaris-FooterHelp__Text">Learn more about <a class="Polaris-Link" href="#" data-polaris-unstyled="true">Sample App</a></div>
                    </div>
                  </div>
                </div>
                @else
                <!-- all products with no_photo  -->

                <div class="Polaris-Tabs__Panel container_content tabcontent" id="no_photo" role="tabpanel" aria-labelledby="Products with no photo" tabindex="-1" style="display:block;">                  
                  <div style="--top-bar-background:#00848e; --top-bar-background-lighter:#1d9ba4; --top-bar-color:#f9fafb;">
                    <div class="Polaris-Page">
                      <div class="Polaris-Page__Content">
                        <div class="Polaris-Card">
                          <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" colspan="5" style=" padding: 16px 57px 16px 57px; text-align: center;font-size: 21px;">No products found.</th>
                              </tr>
                            </thead>
                          </table>
                        </div>
                      </div>
                    </div>
                  </div>                 
                </div>
                @endif


                <!-- product with no_photo  -->                
                <div class="Polaris-Tabs__Panel container_content tabcontent" id="product_with_no_photo" role="tabpanel" aria-labelledby="All products" tabindex="-1">
                  
                </div>
                <!-- product with no_photo  -->


              </div>
            </div>
            <div class="Polaris-Tabs__Panel Polaris-Tabs__Panel--hidden" id="accepts-marketing-content" role="tabpanel" aria-labelledby="accepts-marketing" tabindex="-1"></div>
          </div>

        </div>
      </div>

      <!---------------------------->


    </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="{{ 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/core.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">  

  /*used in custom js*/
  var allProducts = @json($productsForImageAssign);  
  if(allProducts.length > 0){
    $( "#wait" ).css( "display", "block" );
    getAllProductImages(); 
  }
   
  // console.log(allProducts,'-----allProducts');
  var baseUrl = "{{ asset('images/') }}";
  /*used in custom js*/

  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