

<?php $__env->startSection("content"); ?>

    <link href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.css" rel="stylesheet" type="text/css"/>
    <script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/elevatezoom/3.0.8/jquery.elevatezoom.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.js"></script>
    <style>
            .breadcrumb-list > li {
            font-size: 14px;
            list-style: none;
            display: inline;
          }
          .breadcrumb-list > li a:after {
            content: "/";
            vertical-align: middle;
            margin: 0 5px;
            color: #7a7a7a;
          }
          .product-thumbnail .owl-nav  {display: none;}
          .breadcrumb-area {
              padding: 30px 0;
              background-color: #f3f3f3;
          }
          .breadmome-name {
              color: #ff6a00;
              font-size: 24px;
              font-weight: 500;
              text-transform: capitalize;
              margin: 0 0 18px;
          }
          .breadcrumb-content > ul > li {
              display: inline-block;
              list-style: none;
              position: relative;
              font-size: 14px;
              color: #333;
          }
          .breadcrumb-content > ul > li.active{
              color: #ff6a00;
          }
          .breadcrumb-content > ul > li:after {
              content: "/";
              vertical-align: middle;
              margin: 0 5px;
              color: #7a7a7a;
          }
          .breadcrumb-content > ul > li:last-child:after{
              display: none;
          }
          .mt-80 { margin-top: 40px }.mb-80 { margin-bottom: 80px }
          .single-product-name {
              font-size: 22px;
              text-transform: capitalize;
              font-weight: 900;
              color: #444;
              line-height: 24px;
              margin-bottom: 15px;
          }
          .single-product-reviews {
              margin-bottom: 10px;
          }
          .single-product-price {
              margin-top: 25px;
          }
          .single-product-action {
              margin-top: 30px;
              padding-bottom: 30px;
              border-top: 1px solid #ebebeb;
              border-bottom: 1px solid #ebebeb;
              float: left;
              width: 100%;
          }
          .product-info {
              color: #333;
              font-size: 14px;
              font-weight: 400;
          }
          .product-info p {
              line-height: 30px;
              font-size: 14px;
              color: #333;
              margin-top: 30px;
          }
	 .product-info > ul >li {
		list-style-type: disc;
	 }
    </style>
<!-- Start Page Title Area -->
        <div class="page-title">
            <div class="d-table">
                <div class="d-table-cell">
                    <div class="container">
                        <div class="row">
                            <div class="col-lg-6 col-md-6">
                                <div class="page-title-text">
                                    <h3><?php echo trans("header_footer.Product_btn"); ?></h3>
                                </div>
                            </div>
                            
                            <div class="col-lg-6 col-md-6">
                                <ul>
                                    <li><a href="<?php echo URL::to('front'); ?>"><i class="fa fa-home"></i> <?php echo trans("header_footer.Home_btn"); ?></a></li>
                                    <li><i class="fa fa-angle-right"></i></li>
                                    <li class="active"><?php echo trans("header_footer.Product_btn"); ?></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- End Page Title Area -->
<!-- Start Mountain Bike Area -->
       <section class="bike-area ptb-80">
           <div class="container">
               <div class="row">
                   <div class="col-lg-3 col-md-4" style="height: fit-content;">
                    <div class="side-bar">
                      <div class="logo">
                          <!--img src="http://lorempixel.com/output/people-q-g-64-64-1.jpg" class="img-responsive center-block" alt="Logo"-->
                      </div>
                      <br>
                      <div class="left-navigation">
                          <ul class="list">
                              <h4><strong style="color:white;"><?php echo trans("products.category_product_title"); ?></strong></h4>
                                <?php if($langset == 'en'): ?>
                                    <?php foreach($categories as $category): ?>
                                    <li><a class='sidebar-a' href="<?php echo URL::to('front/products/'.$category->id); ?>"><i class="fa fa-angle-double-right"></i>  <?php echo $category->name; ?></a></li>
                                    <?php endforeach; ?>
                                <?php else: ?>
                                    <?php foreach($categories as $category): ?>
                                    <li><a class='sidebar-a'  href="<?php echo URL::to('front/products/'.$category->id); ?>"><i class="fa fa-angle-double-right"></i>  <?php echo $category->name_tw; ?></a></li>
                                    <?php endforeach; ?>                       
                                <?php endif; ?>
				    <li></li>
				    <li></li>
                          </ul>
                      </div>
                    </div>


<?php /* 
                       <div class="side-bar mt-0" style="background-color:#378e3833;">
                           <h2 class="title"><?php echo trans("products.category_title"); ?></h2>
                    
                           <div class="border"></div>
                           
                           <div class="categories-2">
                               <ul>
                                <?php if($langset == 'en'): ?>
                                    <?php foreach($categories as $category): ?>
                                    <li><a href="<?php echo URL::to('front/products/'.$category->id); ?>" style="color:#303030;font-size: 18px;"><i class="fa fa-angle-double-right"></i><?php echo $category->name; ?></a></li>
                                    <?php endforeach; ?>
                                <?php else: ?>
                                    <?php foreach($categories as $category): ?>
                                    <li><a href="<?php echo URL::to('front/products/'.$category->id); ?>" style="color:#303030;font-size: 18px;"><i class="fa fa-angle-double-right"></i><?php echo $category->name_tw; ?></a></li>
                                    <?php endforeach; ?>                       
                                <?php endif; ?>
                                </ul>
                           </div>
                       </div>
*/ ?>
                   </div>
                   
                   <div class="col-lg-9 col-md-8">        
                      <div id="shopify-section-product-template" class="shopify-section">
                          <div class="single-product-area mt-80 mb-80">
                              <div class="container">
                                  <div class="row">                                  
                                  <?php if(isset($productimgs[$product->id])): ?> 
                                      <div class="col-md-8">
                                          <div class="product-details-large" id="ProductPhoto">
                                            <?php if(Session::get('set_lang')=='en'): ?>
                                              <img id="ProductPhotoImg" style="max-height:500px;display:block;margin:auto;" class="product-zoom" data-image-id="" alt="<?php echo $product->title_en; ?>" data-zoom-image="<?php echo asset($productimgs[$product->id][0]); ?>" src="<?php echo asset($productimgs[$product->id][0]); ?>">
                                            <?php else: ?>
                                              <img id="ProductPhotoImg" style="max-height:500px;display:block;margin:auto;" class="product-zoom" data-image-id="" alt="<?php echo $product->title_tw; ?>" data-zoom-image="<?php echo asset($productimgs[$product->id][0]); ?>" src="<?php echo asset($productimgs[$product->id][0]); ?>">
                                            <?php endif; ?>
                                          </div>
                                          <div id="ProductThumbs" class="product-thumbnail owl-carousel">
                                              <a class="product-single__thumbnail active" href="<?php echo asset($productimgs[$product->id][0]); ?>" data-image="<?php echo asset($productimgs[$product->id][0]); ?>" data-image-id="<?php echo $product->id; ?>">
                                              <img src="<?php echo asset($productimgs[$product->id][0]); ?>" alt=<?php echo $product->title_en; ?> /></a>

                                            <?php for($c=1 ; $c < count($productimgs[$product->id]) ; $c++): ?>
                                              <a class="product-single__thumbnail " href="<?php echo asset($productimgs[$product->id][$c]); ?>" 
                                              data-image="<?php echo asset($productimgs[$product->id][$c]); ?>" data-zoom-image="<?php echo asset($productimgs[$product->id][$c]); ?>" data-image-id="<?php echo $product->id; ?>">
                                              <img src="<?php echo asset($productimgs[$product->id][$c]); ?>" alt=<?php echo $product->title_en; ?> /></a>
                                            <?php endfor; ?>

                                          </div>
                                      </div>
                                      <div class="col-md-4">
                                          <div class="single-product-content">
                                              <form method="post" id="AddToCartForm" accept-charset="UTF-8" class="shopify-product-form" enctype="multipart/form-data">
                                                  <input type="hidden" name="form_type" value="product" /><input type="hidden" name="utf8" value="✓" />
                                                  <div class="product-details">
                                                    <?php if(Session::get('set_lang')=='en'): ?>
                                                      <h1 class="single-product-name"><?php echo $product->title_en; ?></h1>
                                                      <div class="product-info"><?php echo $product->description_en; ?></div>
                                                    <?php else: ?>
                                                      <h1 class="single-product-name"><?php echo $product->title_tw; ?></h1>
                                                      <div class="product-info"><?php echo $product->description_tw; ?></div>
                                                    <?php endif; ?>
                                                  </div>
                                              </form> 
                                          </div>
                                      </div>
                                  <!-- !empty($product) -->     
                                  <?php endif; ?> 
                                 
                                  </div>
                              </div>
                          </div>
                                                          
                          <script>$(document).ready(function() {$('.fancybox').fancybox();});</script>
                          <script>function productZoom(){
                                  $(".product-zoom").elevateZoom({
                                    gallery: 'ProductThumbs',
                                    galleryActiveClass: "active",
                                    zoomType: "inner",
                                    cursor: "crosshair"
                                  });$(".product-zoom").on("click", function(e) {
                                    var ez = $('.product-zoom').data('elevateZoom');
                                    $.fancybox(ez.getGalleryList());
                                    return false;
                                  });
                                  
                                  };
                                function productZoomDisable(){
                                  if( $(window).width() < 767 ) {
                                    $('.zoomContainer').remove();
                                    $(".product-zoom").removeData('elevateZoom');
                                    $(".product-zoom").removeData('zoomImage');
                                  } else {
                                    productZoom();
                                  }
                                };

                                productZoomDisable();

                                $(window).resize(function() {
                                  productZoomDisable();
                                });
                          </script>
                          <script>
                              $('.product-thumbnail').owlCarousel({
                                  loop: true,
                                  center: true,
                                  nav: true,dots:false,
                                  margin:10,
                                  autoplay: false,
                                  autoplayTimeout: 5000,
                                  navText: ['<i class="fa fa-angle-left"></i>', '<i class="fa fa-angle-right"></i>'],
                                  item: 3,
                                  responsive: {
                                      0: {
                                          items: 2
                                      },
                                      480: {
                                          items: 3
                                      },
                                      992: {
                                          items: 3,
                                      },
                                      1170: {
                                          items: 3,
                                      },
                                      1200: {
                                          items: 3
                                      }
                                  }
                              });
                          </script>
                      </div>
                   </div>
               </div>
           </div>
       </section>
       <!-- End Mountain Bike Area -->
       

                                                
                <script>$(document).ready(function() {$('.fancybox').fancybox();});</script>
                <script>function productZoom(){
                        $(".product-zoom").elevateZoom({
                          gallery: 'ProductThumbs',
                          galleryActiveClass: "active",
                          zoomType: "inner",
                          cursor: "crosshair"
                        });$(".product-zoom").on("click", function(e) {
                          var ez = $('.product-zoom').data('elevateZoom');
                          $.fancybox(ez.getGalleryList());
                          return false;
                        });
                        
                        };
                      function productZoomDisable(){
                        if( $(window).width() < 767 ) {
                          $('.zoomContainer').remove();
                          $(".product-zoom").removeData('elevateZoom');
                          $(".product-zoom").removeData('zoomImage');
                        } else {
                          productZoom();
                        }
                      };

                      productZoomDisable();

                      $(window).resize(function() {
                        productZoomDisable();
                      });
                </script>
                <script>
                    $('.product-thumbnail').owlCarousel({
                        loop: true,
                        center: true,
                        nav: true,dots:false,
                        margin:10,
                        autoplay: false,
                        autoplayTimeout: 5000,
                        navText: ['<i class="fa fa-angle-left"></i>', '<i class="fa fa-angle-right"></i>'],
                        item: 3,
                        responsive: {
                            0: {
                                items: 2
                            },
                            480: {
                                items: 3
                            },
                            992: {
                                items: 3,
                            },
                            1170: {
                                items: 3,
                            },
                            1200: {
                                items: 3
                            }
                        }
                    });
                </script>

<?php $__env->stopSection(); ?>

<?php echo $__env->make('layout.basic_front', array_except(get_defined_vars(), array('__data', '__path')))->render(); ?>