<?php
$asl_wc_ad_url = 'https://agilelogix.com/product/multi-store-addons-for-woocommerce/?utm_source=WordPress&utm_medium=Banner&utm_campaign=WP.org&utm_term=ASL&utm_content=';
?>
<div id="sl-wc" class="tab-pane">
  <div class="col-12">
    <div class="p-0 mb-4">
      <div class="card-body">
        <div class="top-title text-center mb-3">
          <b><?php echo esc_attr__('Are you using WooCommerce? Great, try our WooCommerce extension that is compatible with this free version of the Agile Store Locator.','asl_locator') ?></b>
        </div>
        <div class="row">
          <div class="col-md-12 mb-3 text-center">
            <a target="_blank" href="<?php echo $asl_wc_ad_url; ?>" class="btn btn-xl btn-success">WooCommerce Extension ($49)</a>
          </div>
        </div>
        <div class="row">
          <div class="pro-item col-lg-6">
            <a target="_blank" href="<?php echo $asl_wc_ad_url; ?>" class="pro-item__link">
              <div class="pro-item__content">
                <h3 class="pro-item__title">
                  <span class="text-primary mr-1">Dropdown</span><span class="text-black">Store Control</span>
                </h3>
                  <div class="pro-item__preview-text">It will allow users to select the store from the product page, the store selection will proceed with cart and checkout, the pricing for the product can be added for each store separately.</div>
              </div>
              <div class="pro-item__image ">
                <div class="pro-item__shadow">
                  <video preload="none" autoplay="autoplay" loop="" muted="mutd">
                      <source data-src="https://cdn.agilestorelocator.com/asl-wc/drop-down.mp4" type="video/mp4">
                  </video>
                </div>
              </div>
            </a>
          </div>
          <div class="pro-item col-lg-6 ">
            <a target="_blank" href="<?php echo $asl_wc_ad_url; ?>" class="pro-item__link">
              <div class="pro-item__content">
                <h3 class="pro-item__title">
                  <span class="text-primary mr-1">Radio List</span> of Stores
                </h3>
                  <div class="pro-item__preview-text">Radio list is just another type of control that can appear on the product page that shows the available stores for that product, and user can select the store of his choice.</div>
              </div>
              <div class="pro-item__image ">
                  <div class="pro-item__shadow">
                    <video preload="none" autoplay="autoplay" loop="" muted="mutd">
                      <source data-src="https://cdn.agilestorelocator.com/asl-wc/radio.mp4" type="video/mp4">
                    </video>
                  </div>
              </div>
            </a>
          </div>
          <div class="pro-item col-lg-6">
            <a target="_blank" href="<?php echo $asl_wc_ad_url; ?>" class="pro-item__link">
              <div class="pro-item__content">
                <h3 class="pro-item__title">
                  <span class="text-primary mr-1">Search Widget</span><span class="text-black"> for Stores</span>
                </h3>
                  <div class="pro-item__preview-text">Search Widget uses the Google Place API using which the nearest store can be searched that has the association with the product, once the address is searched the closest once will appear.</div>
              </div>
              <div class="pro-item__image ">
                  <div class="pro-item__shadow">
                    <video preload="none" autoplay="autoplay" loop="" muted="mutd">
                      <source data-src="https://cdn.agilestorelocator.com/asl-wc/search-widget.mp4" type="video/mp4">
                    </video>
                  </div>
              </div>
            </a>
          </div>
          <div class="pro-item col-lg-6 ">
            <a target="_blank" href="<?php echo $asl_wc_ad_url; ?>" class="pro-item__link">
              <div class="pro-item__content">
                <h3 class="pro-item__title">
                  <span class="text-primary mr-1">Local Pickup</span> using Store Locator
                </h3>
                  <div class="pro-item__preview-text">On the WooCommmerce checkout page your local pickup will have an option to select the store using a store locator out of which user will be able to select from which store he would like to pickup.</div>
              </div>
              <div class="pro-item__image ">
                  <div class="pro-item__shadow">
                    <video preload="none" autoplay="autoplay" loop="" muted="mutd">
                      <source data-src="https://cdn.agilestorelocator.com/asl-wc/local-pickup.mp4" type="video/mp4">
                    </video>
                  </div>
              </div>
            </a>
          </div>
          <div class="pro-item col-lg-6 ">
            <a target="_blank" href="<?php echo $asl_wc_ad_url; ?>" class="pro-item__link">
              <div class="pro-item__content">
                <h3 class="pro-item__title">
                  <span class="text-primary mr-1">Distance Rate Shipping</span> using Store Locator
                </h3>
                  <div class="pro-item__preview-text">Distance rate shipping is a new shipping method that calculates the shipping cost based on the defined shipping rules by the admin on attributes like shipping distance, product weight.</div>
              </div>
              <div class="pro-item__image ">
                  <div class="pro-item__shadow">
                    <video preload="none" autoplay="autoplay" loop="" muted="mutd">
                      <source data-src="https://cdn.agilestorelocator.com/asl-wc/distance-rate.mp4" type="video/mp4">
                    </video>
                  </div>
              </div>
            </a>
          </div>
          <div class="pro-item col-lg-6 ">
            <a target="_blank" href="<?php echo $asl_wc_ad_url; ?>" class="pro-item__link">
              <div class="pro-item__content">
                <h3 class="pro-item__title">
                  <span class="text-primary mr-1">Location Picker</span> on checkout
                </h3>
                  <div class="pro-item__preview-text">User don't needs to fillup his checkout address details, he can just select his location over the map and the widget will fill out the form, geolocation can also be used to pinpoint.</div>
              </div>
              <div class="pro-item__image ">
                  <div class="pro-item__shadow">
                    <video preload="none" autoplay="autoplay" loop="" muted="mutd">
                      <source data-src="https://cdn.agilestorelocator.com/asl-wc/location-picker.mp4" type="video/mp4">
                    </video>
                  </div>
              </div>
            </a>
          </div>
        </div>
        <div class="row">
          <div class="col-md-12 mb-3 text-center">
            <a target="_blank" href="<?php echo $asl_wc_ad_url; ?>" class="btn btn-xl btn-success">WooCommerce Extension ($49)</a>
          </div>
        </div>
      </div>
    </div>  
    <div class="mb-4">
      <div class="row">
        <div class="col-md-12 justify-content-md-center text-center">
          <a href="<?php echo $asl_wc_ad_url; ?>?ref=wordpress.org" target="_blank" class="figure">
            <img src="<?php echo ASL_URL_PATH ?>admin/images/asl-wc-addon.png" alt="Agile Stores Addons for WooCommerce" class="figure-img img-fluid rounded">
          </a>
        </div>
      </div>
    </div>
  </div>
</div>