
<?php 
include "common/header.php";
include "common/navbar.php";
?> 
<style type="text/css">
 .value-button {
  display: initial;
  margin: 0px;
  width: 40px;
  height: 20px;
  text-align: center;
  vertical-align: middle;
  padding: 8px 10px;
  background: #565252c4;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.value-button:hover {
  cursor: pointer;
}

#decrease {
  margin-right: -3px;
}

#increase {
  margin-left: -4px;
}

#input-wrap {
  margin: 0px;
  padding: 0px;
}

input#input-quantity {
  text-align: center;
  border: none;
  margin: 0px;
  width: 40px;
  height: 40px;
}

input[type=input-quantity]::-webkit-inner-spin-button,
input[type=input-quantity]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
</style>


<!-- Main Container Starts -->
<div class="main-container" >
  <!-- Product Container Starts -->
  <div id="product-product" class="container" style="background-image: url(image/bg.jpg); ">
      <!-- <ul class="breadcrumb">
        <li><a href="index.php"><i class="fa fa-home"></i></a></li>
        <li><a href="#"><?php //echo $row_dtl['item_name']; ?></a></li>
      </ul> -->
      <!-- Row Starts -->  
      <div class="row">

        <!-- <?php //include "common/sidebar.php"; ?>  -->

        <!-- Content Area Starts -->
        <div id="content" class="col-sm-9">

          <!-- Nested Row Starts -->
          <div class="row"> 
            <!-- Product Image Area Starts -->
            <div class="col-sm-5 product-image-wrap">        
              <!-- Product Image Starts -->
              <div class="product-image">
                <a href="backend/upload/item/<?php echo $row_dtl['item_code']; ?>/<?php echo $row_dtl['f_img']; ?>" title="<?php echo $row_dtl['item_name']; ?>"><img src="backend/upload/item/<?php echo $row_dtl['item_code']; ?>/<?php echo $row_dtl['f_img']; ?>" title="<?php echo $row_dtl['item_name']; ?>" alt="<?php echo $row_dtl['item_name']; ?>" class="img-responsive img-center" /></a>
              </div>
              <!-- Product Image Ends -->
              <!-- Additional Images Starts -->
              <ul class="list-unstyled list-inline product-image-additional">   

                <?php
                $sql_img  = mysqli_query($conn,"SELECT * FROM item_imgs WHERE item_code = '$itm_code' ");
                while($row_img = mysqli_fetch_array($sql_img)){
                 ?>         

                 <li><a href="image/images/<?php echo $row_dtl['img']; ?>" title="<?php echo $row_dtl['item_code']; ?>"> <img src="image/images/<?php echo $row_dtl['img']; ?>" title="<?php echo $row_dtl['item_code']; ?>" alt="<?php echo $row_dtl['item_code']; ?>" class="img-responsive img-center" /></a></li>

               <?php } ?>

             </ul>
             <!-- Additional Images Ends -->          
           </div>
           <!-- Product Image Area Ends -->   
           <!-- Product Info Starts -->  
           <div id="product" class="col-sm-7 product-info">
            <!-- Product Title Starts -->
            <h3 class="product-info-title"><?php echo $row_dtl['item_name']; ?></h3>
            <!-- Product Title Ends -->
            <!-- Reviews Starts -->
            <div class="product-info-rating">
              <ul class="list-unstyled list-inline product-info-rating-list">
               <li class="product-info-rating-list-star"><span class="fa fa-stack"><i class="fa fa-star-o fa-stack-1x"></i></span></li>
               <li class="product-info-rating-list-star"><span class="fa fa-stack"><i class="fa fa-star-o fa-stack-1x"></i></span></li>
               <li class="product-info-rating-list-star"><span class="fa fa-stack"><i class="fa fa-star-o fa-stack-1x"></i></span></li>
               <li class="product-info-rating-list-star"><span class="fa fa-stack"><i class="fa fa-star-o fa-stack-1x"></i></span></li>
               <li class="product-info-rating-list-star"><span class="fa fa-stack"><i class="fa fa-star-o fa-stack-1x"></i></span></li>
               <li class="product-info-rating-list-review">
                <a href="#" onclick="$('a[href=\'#tab-review\']').trigger('click'); return false;">
                  0 reviews
                </a>
              </li>
              <li class="product-info-rating-list-review">
                <a href="#" onclick="$('a[href=\'#tab-review\']').trigger('click'); return false;">
                 <i class="fa fa-edit"></i>Write a review
               </a>
             </li>
           </ul>
         </div>

         <?php
         $cat_id =  $row_dtl['cat_id'];
         $check =  mysqli_query($conn,"SELECT menu_id FROM cat WHERE cat_id = $cat_id");
         $row_val = mysqli_fetch_array($check);
         $val = $row_val['menu_id'];
         if ($val == '1') {
           $hidden = '';
         } else {
          $hidden = 'hidden';
        }

        $qty = $row_dtl['qty'];

        if(($qty < 10) && ($qty >= 5) ){
          $stk = "Less than 10 available";
          $color  =  "#22ace9";
          $display = "";
        }
        else if(($qty < 5) && ($qty >= 1)){
          $stk = "Less than 5 available";
          $color  =  "#22ace9";
          $display = "";
        }
        else if($qty == 0){
          $stk = "No stock available";
          $color  =  "red";
          $display ="display:none;";
        }
        else{
          $stk = "More than 10 available";
          $color  =  "#22ace9";
          $display = "";
        }
        ?>


        <!-- Reviews Ends -->
        <!-- Product Details Starts -->
        <ul class="list-unstyled product-info-details">
          <li <?php echo $hidden; ?>>AUTHOR(S)&nbsp; <a href="#"><?php echo $row_dtl['author']; ?></a></li>
          <li <?php echo $hidden; ?>>PUBLISHER(S)&nbsp; <a href="#"><?php echo $row_dtl['publisher']; ?></a></li>
          <li <?php echo $hidden; ?>>IBSN:&nbsp; <span><?php echo $row_dtl['isbn']; ?></span></li>
          <li>Reward Points:&nbsp; <span>700</span></li>
          <li>Availability:&nbsp; <span style=" color: <?php echo $color; ?>; " id="stk_qty" data-value="<?php echo $qty;?>" ><?php echo $stk; ?></span></li>
        </ul>
        <!-- Product Details Ends -->
        <!-- Price Starts -->
        <div class="product-info-price clearfix">
          <span class="price-new">Rs.<?php echo $row_dtl['price']; ?></span>
        </div>
        <!-- Price Ends -->
        <!-- Qty & Product Add Buttons Starts -->
        <div class="product-info-cart">
          <div class="form-group" style="">
            <div class="value-button" id="decrease" onclick="decreaseValue()"  style="font-weight: bold; font-size: 18px;">-</div>
            <input  id="input-quantity" class="qty" title="Quantity" maxlength="5" name="quantity" value="1" style="padding-bottom: 3px; color: black;" />
            <div class="value-button increase" id="increase" onclick="increaseValue()"  style="font-weight: bold;  font-size: 18px;">+</div>
          </div>            
          <div class="button-group product-info-cart-btns-wrap">
            <button type="button" id="button-cart" data-loading-text="Loading..." class="btn btn_cart" value="<?php echo $row_dtl['id']; ?>" style="<?php echo $display; ?>"><i class="fa fa-shopping-cart"></i><span>Add to Cart</span></button>
            <!-- <button type="button" data-toggle="tooltip" class="btn" title="Add to Wish List" onclick="wishlist.add('44');"><i class="fa fa-heart"></i></button>
              <button type="button" data-toggle="tooltip" class="btn" title="Compare this Product" onclick="compare.add('44');"><i class="fa fa-exchange"></i></button> -->
            </div>
          </div>
          <!-- Qty & Product Add Buttons Ends -->
          <!-- AddThis Button BEGIN -->
          <div class="addthis_toolbox addthis_default_style" data-url="indexd94c.html?route=product/product&amp;product_id=44"><a class="addthis_button_facebook_like" fb:like:layout="button_count"></a> <a class="addthis_button_tweet"></a> <a class="addthis_button_pinterest_pinit"></a> <a class="addthis_counter addthis_pill_style"></a></div>
          <!-- AddThis Button END --> 
        </div>
        <!-- Product Info Ends -->   
      </div>
      <!-- Nested Row Ends -->
      <!-- Product Tabs Wrap Starts -->
      <div class="product-tabs-wrap">
        <!-- Product Tabs Starts -->
        <ul class="nav nav-tabs">
          <li class="active"><a href="#tab-description" data-toggle="tab">Description</a></li>
          <li><a href="#tab-review" data-toggle="tab">Reviews (0)</a></li>
        </ul>
        <!-- Product Tabs Ends -->
        <!-- Product Tab Content Starts -->
        <div class="tab-content">
          <!-- Product Description Starts -->
          <div class="tab-pane active" id="tab-description">
            <div>
              <?php echo $row_dtl['description_more']; ?></div>

            </div>
            <!-- Product Description Ends -->
            <!-- Product Review Starts -->
            <div class="tab-pane" id="tab-review">
              <form class="form-horizontal" id="form-review">
                <div id="review"></div><br>
                <h4>Write a review</h4><hr>
                <div class="form-group required">
                  <div class="col-sm-12">
                    <label class="control-label" for="input-name">Your Name</label>
                    <input type="text" name="name" value="" id="input-name" class="form-control" />
                  </div>
                </div>
                <div class="form-group required">
                  <div class="col-sm-12">
                    <label class="control-label" for="input-review">Your Review</label>
                    <textarea name="text" rows="5" id="input-review" class="form-control"></textarea>
                    <div class="help-block"><span class="text-danger">Note:</span> HTML is not translated!</div>
                  </div>
                </div>
                <div class="form-group required">
                  <div class="col-sm-12">
                    <label class="control-label">Rating</label>
                    &nbsp;&nbsp;&nbsp; Bad&nbsp;
                    <input type="radio" name="rating" value="1" />
                    &nbsp;
                    <input type="radio" name="rating" value="2" />
                    &nbsp;
                    <input type="radio" name="rating" value="3" />
                    &nbsp;
                    <input type="radio" name="rating" value="4" />
                    &nbsp;
                    <input type="radio" name="rating" value="5" />
                  &nbsp;Good</div>
                </div>

                <div class="buttons clearfix">
                  <div class="pull-right">
                    <button type="button" id="button-review" data-loading-text="Loading..." class="btn btn-primary">Continue</button>
                  </div>
                </div>
              </form>
            </div>
            <!-- Product Review Ends -->
          </div>
          <!-- Product Tab Content Ends -->
        </div>
        <!-- Product Tabs Wrap Ends -->

      </div>
      <!-- Content Area Ends -->    
    </div>
    <!-- Row Ends -->  
  </div>
  <!-- Product Container Ends -->

</div>
<!-- Main Container Ends -->
<script>
  function increaseValue() {

    var value = parseInt(document.getElementById('input-quantity').value, 10);
    value = isNaN(value) ? 0 : value;
    value++;
    document.getElementById('input-quantity').value = value;

    var req_qty = value;
    var avl_qty = $('#stk_qty').attr("data-value");

    if(req_qty > avl_qty){
      alert("The requested quantity exceeds the available quantity.\n The maximum available stock is " +avl_qty);
      $('#input-quantity').val(avl_qty);
      
    }else{
    }
  }

  function decreaseValue() {
    var value = parseInt(document.getElementById('input-quantity').value, 10);
    if((value <= 1) || (value == "")){
      ($('#decrease'). val(1));
    }else{
      var value = parseInt(document.getElementById('input-quantity').value, 10);
      value = isNaN(value) ? 1 : value;
      value--;
      // value > 1 ? value : value = 1;
      document.getElementById('input-quantity').value = value;
    }
  }
</script>
<!-- Footer Starts -->
<?php include "common/footer.php"; ?> 
<!-- Footer Ends -->