@extends('layout')

@section('content')

<div class="product-title container">
    <div class="text" onclick="location.href='/'">Home</div> 
    @foreach($breadcrumbs as $breadcrumb)
      <i class="fa fa-circle aktibo"></i>
      @if(end($breadcrumbs) == $breadcrumb)
        <div class="text aktibo">{{ $breadcrumb['type_name'] }}</div>
      @else
        <div class="text" onclick="location.href='/product?type={{ $breadcrumb['type_id'] }}'">{{ $breadcrumb['type_name'] }}</div> 
      @endif
    @endforeach
</div>

<div class="remodal" data-remodal-id="full">

<!-- <img class="single-product-img" src="" data-zoom-image="" alt = "" id="picturecontainer"/> -->

</div>
@foreach($product["variant"] as $product_variant)
<div class="single-product-content container {{ $ctr != 0 ? 'hide' : '' }}" variant-id="{{ $product_variant['evariant_id'] }}">
   <div class="single-product-container row">
      <input class="variation" type="hidden" name="variation" value=''>
      <input type="hidden" class="variation_id" name="variation_id" value=''>
      <div class="single-product-holder" style="padding: 0; transition: 0.3s all ease;">
         @foreach($product_variant['image'] as $key => $image)
         <img class="single-product-img key-{{$key}} {{ $key == 0 ? '' : 'hide' }} {{$ctr != 0 ? '' : 'first-img'}}" variant-id="{{ $product_variant['evariant_id'] }}" key="{{ $key }}" style="width: 100%;" src="{{ $image['image_path'] }}" data-zoom-image="{{ $image['image_path'] }}" alt = "" id="picturecontainer"/>
         @endforeach
         <div class="thumb">
            @foreach($product_variant['image'] as $key => $image)
             <div class="holder" variant-id="{{ $product_variant['evariant_id'] }}" key="{{ $key }}" style="cursor: pointer;">
              <img class="1-1-ratio" src="{{ $image['image_path'] }}">
             </div>
            @endforeach
         </div>
      </div>
      <div class="single-product-holder border" style="position: relative; transition: 0.3s all ease;">
         <div class="single-order-header">{{ $product["eprod_name"] }}</div>
         <div class="single-order-sub">
            Categories: <a href="/product?type={{ $product['eprod_category_id'] }}">{{ $category['type_name'] }}</a>
         </div>
         <div class="divider"></div>
         <div class="single-order-content">
            <div class="single-order-description">
               <div class="title">DESCRIPTION</div>
               <div>{!! $product_variant['evariant_description'] !!}</div>
            </div>
            <div class="divider"></div>
            <!-- <div class="single-order-description">
               <div class="title">PACKAGE INCLUSION</div>
            </div> -->
            <div class="price-container" style="overflow-x: hidden;">
              @if($product_variant['discounted'] == "true")
              <div class="row clearfix">
                  <div class="col-sm-6">
                      <div  id="single-order-price" class="single-order-price" style="color:red;font-size:17px;text-decoration: line-through;"><span style="color:gray;">PHP {{ number_format($product_variant['evariant_price'], 2) }}</span></div>                    
                  </div>
              </div>
              <div id="single-order-price" class="single-order-price">PHP {{ number_format($product_variant['discounted_price'], 2) }}</div>
              @else
              <div id="single-order-price" class="single-order-price">PHP {{ number_format($product_variant['evariant_price'], 2) }}</div>
              @endif
               <!-- <div id="single-order-price" class="single-order-price">&#8369;&nbsp;{{ number_format($product_variant['evariant_price'], 2) }}</div> -->
               @if($product_variant['item_type_id'] != 2)
                <div class="single-order-availability" style="text-transform: capitalize;">{{ $product_variant['inventory_status'] }}</div>
               @endif
            </div>
            <div class="product-selection">
               <form id="prod-attr-form" method="GET">
                  <input type="text" class="hidden" name="prod_id" value="">
                  <div id="select-variation">
                     @foreach($_variant as $variant)
                     <div class="s-container">
                        <div class="s-label">{{ $variant['option_name'] }}</div>
                        <div class="select">
                           <select class="attribute-variation" variant-label="{{ $variant['option_name'] }}" product-id="{{ $product['eprod_id'] }}" variant-id="{{ $product_variant['evariant_id'] }}" name="attr[{{ $variant['option_name_id'] }}]">
                              <option value="0">Select {{ $variant['option_name'] }}</option>
                              @foreach(explode(",", $variant['variant_value']) as $option)
                              <option value="{{ $option }}">{{ $option }}</option>
                              @endforeach
                           </select>
                        </div>
                     </div>
                     @endforeach
                  </div>
               </form>
            </div>
            <div class="product-selection">
               <input type="text" class="hidden" name="prod_id" value="">
               <div id="select-variation">
                  <div class="s-container">
                     <div class="s-label">
                        Quantity
                     </div>
                     <div class="select">
                        <select class="variation-qty" variant-id="{{ $product_variant['evariant_id'] }}" name="qty">
                           <option>1</option>
                           <option>2</option>
                           <option>3</option>
                           <option>4</option>
                           <option>5</option>
                        </select>
                     </div>
                  </div>
               </div>
            </div>
            <!-- <button class="single-order-button " pid="" vid="" mode="cart" onclick="window.open('','_blank')">BUY NOW</button> 
            <button href="product/#order" class="single-order-button order-button add-cart" mode="reservation">STORE PICK-UP</button> -->
            <button type="button" class="single-order-button add-to-cart {{ isset($product['variant'][1]) ? 'disabled' : ($product_variant['item_type_id'] != 2 ? ($product_variant['inventory_status'] == 'out of stock' ? 'disabled' : '') : '') }}" variant-id="{{ $product_variant['evariant_id'] }}" {{ isset($product['variant'][1]) ? 'disabled' : ($product_variant['item_type_id'] != 2 ? ($product_variant['inventory_status'] == 'out of stock' ? 'disabled' : '') : '') }}>ADD TO CART</button>
            @if($wishlist)
              <button type="button" class="single-order-button" onClick="location.href='/wishlist/add/{{ $product["eprod_id"] }}'">ADD TO WISHLIST</button>
            @endif
            <div class="loader-variation" style="display: none; vertical-align: middle; position: absolute; top: 5px; right: 5px; bottom: 0;"><img style="width: 25px; height: 25px;" src="/resources/assets/frontend/img/loader.gif"></div>
            <div class="divider" style="margin: 35px 0; opacity: 0;"></div>
            <!-- <div class="single-order-rate" id="single-product-rate">
               @for ($i = 1; $i <= 5; $i++)
               <div class="single-order-star active">
               </div>
               @endfor
            </div>
            <g:plus action="share" annotation="bubble"></g:plus>
            <div style="display: inline-block; vertical-align: middle; margin-left: 5px;">
               <div class="single-order-logo ">
                  <a class="google-share-button" href="https://plus.google.com/share?url={{'http://'.$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI']}}">
                  <i class="fa fa-google-plus"></i>
                  </a>
               </div>
               <div class="single-order-logo">
                  <a href="" class="fb-share-btn" title="facebook share">
                  <i class="fa fa-facebook"></i>
                  </a>
               </div>
               <div class="single-order-logo" >
                  <a class="twitter-share-btn" via="{{Config::get('app.twiiter_acct_name')}}" text="" count="horizontal" hashtag="{{Config::get('app.app_name')}},">
                  <i class="fa fa-twitter"></i>
                  </a>
               </div>
            </div> -->
         </div>
      </div>
      <div class="single-detail clear">
         <div class="single-detail-header">
            <div class="single-detail-tab single-tab active" data-id="single-detail-description">DETAILS</div>
            <div class="single-detail-tab single-tab" data-id="single-detail-review">REVIEWS</div>
         </div>
         <div class="single-detail-content">
            <div class="single-detail-review min-300 hide">