@extends('layout.basic_front')

@section("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>{{trans("header_footer.Product_btn")}}</h3>
                                </div>
                            </div>
                            
                            <div class="col-lg-6 col-md-6">
                                <ul>
                                    <li><a href="{{URL::to('front')}}"><i class="fa fa-home"></i> {{trans("header_footer.Home_btn")}}</a></li>
                                    <li><i class="fa fa-angle-right"></i></li>
                                    <li class="active">{{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;">{{trans("products.category_product_title")}}</strong></h4>
                                @if($langset == 'en')
                                    @foreach($categories as $category)
                                    <li><a class='sidebar-a' href="{{URL::to('front/products/'.$category->id)}}"><i class="fa fa-angle-double-right"></i>  {{$category->name}}</a></li>
                                    @endforeach
                                @else
                                    @foreach($categories as $category)
                                    <li><a class='sidebar-a'  href="{{URL::to('front/products/'.$category->id)}}"><i class="fa fa-angle-double-right"></i>  {{$category->name_tw}}</a></li>
                                    @endforeach                       
                                @endif
				    <li></li>
				    <li></li>
                          </ul>
                      </div>
                    </div>


{{-- 
                       <div class="side-bar mt-0" style="background-color:#378e3833;">
                           <h2 class="title">{{trans("products.category_title")}}</h2>
                    
                           <div class="border"></div>
                           
                           <div class="categories-2">
                               <ul>
                                @if($langset == 'en')
                                    @foreach($categories as $category)
                                    <li><a href="{{URL::to('front/products/'.$category->id)}}" style="color:#303030;font-size: 18px;"><i class="fa fa-angle-double-right"></i>{{$category->name}}</a></li>
                                    @endforeach
                                @else
                                    @foreach($categories as $category)
                                    <li><a href="{{URL::to('front/products/'.$category->id)}}" style="color:#303030;font-size: 18px;"><i class="fa fa-angle-double-right"></i>{{$category->name_tw}}</a></li>
                                    @endforeach                       
                                @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">                                  
                                  @if(isset($productimgs[$product->id])) 
                                      <div class="col-md-8">
                                          <div class="product-details-large" id="ProductPhoto">
                                            @if(Session::get('set_lang')=='en')
                                              <img id="ProductPhotoImg" style="max-height:500px;display:block;margin:auto;" class="product-zoom" data-image-id="" alt="{{$product->title_en}}" data-zoom-image="{{asset($productimgs[$product->id][0])}}" src="{{asset($productimgs[$product->id][0])}}">
                                            @else
                                              <img id="ProductPhotoImg" style="max-height:500px;display:block;margin:auto;" class="product-zoom" data-image-id="" alt="{{$product->title_tw}}" data-zoom-image="{{asset($productimgs[$product->id][0])}}" src="{{asset($productimgs[$product->id][0])}}">
                                            @endif
                                          </div>
                                          <div id="ProductThumbs" class="product-thumbnail owl-carousel">
                                              <a class="product-single__thumbnail active" href="{{asset($productimgs[$product->id][0])}}" data-image="{{asset($productimgs[$product->id][0])}}" data-image-id="{{$product->id}}">
                                              <img src="{{asset($productimgs[$product->id][0])}}" alt={{$product->title_en}} /></a>

                                            @for($c=1 ; $c < count($productimgs[$product->id]) ; $c++)
                                              <a class="product-single__thumbnail " href="{{asset($productimgs[$product->id][$c])}}" 
                                              data-image="{{asset($productimgs[$product->id][$c])}}" data-zoom-image="{{asset($productimgs[$product->id][$c])}}" data-image-id="{{$product->id}}">
                                              <img src="{{asset($productimgs[$product->id][$c])}}" alt={{$product->title_en}} /></a>
                                            @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">
                                                    @if(Session::get('set_lang')=='en')
                                                      <h1 class="single-product-name">{{$product->title_en}}</h1>
                                                      <div class="product-info">{{$product->description_en}}</div>
                                                    @else
                                                      <h1 class="single-product-name">{{$product->title_tw}}</h1>
                                                      <div class="product-info">{{$product->description_tw}}</div>
                                                    @endif
                                                  </div>
                                              </form> 
                                          </div>
                                      </div>
                                  <!-- !empty($product) -->     
                                  @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>

@stop