<?php defined('BASEPATH') or exit('No direct script access allowed'); ?>
<?php
$this->session->unset_userdata('current_viewed_brand');
$this->session->unset_userdata('current_viewed_category');
?>
<div id="content">
  <div class="container">
    <div class="title clearfix">

      <h2><?= ucwords($product->title) ?></h2><br><br>

      <?php
      $this->db
        ->select('brand, alias')
        ->from('brands')
        ->where('id_brands', $product->brand_id);
      $brand = $this->db->get()->row();
      ?>

      <h3><a style="color:#282727;" href="<?= base_url() .
        'brand/' .
        $brand->alias ?>"><?= ucwords($brand->brand) ?></a></h3>

      <div class="title_right">

     <?php if ($this->session->userdata('current_viewed_category')): ?>

        <a href="<?= base_url() .
          'category/' .
          $category_alias ?>" class="backtocate"><span class="fa fa-arrow-circle-left"></span>Back to catalog</a>

      <?php endif; ?>

      <?php if ($this->session->userdata('current_viewed_brand')): ?>

        <a href="<?= base_url() .
          'brand/' .
          $brand_alias ?>" class="backtocate"><span class="fa fa-arrow-circle-left"></span>Back to catalog</a>

      <?php endif; ?>

      </div>
    </div>
    <div class="pro_main_c">
      <div class="row">
        <div class="col-lg-6 col-md-7 col-sm-6 col-xs-12 animated  animation-done fadeIn" data-animation="fadeIn">
          <div class="slider_1 clearfix">

            <div class="clearfix" id="image-block">

            <img id="zoom_03" src="<?= base_url() .
              'uploads/product/large/' .
              $product->image1 ?>" data-zoom-image="<?= base_url() .
  'uploads/product/' .
  $product->image1 ?>"/>

            <div id="thumbs_list" style="margin-top:8px; margin-left: 5px;">

              <ul id="thumbs_list_frame">

                <?php if ($product->image1 != null): ?>

                  <li style="float: left; border:1px solid #e8e8e9; margin-right: 8px; position:relative; z-index:1000;">
                   <a  href="#" class="elevatezoom-gallery active" data-update="" data-image="<?= base_url() .
                     'uploads/product/large/' .
                     $product->image1 ?>"
                      data-zoom-image="<?= base_url() .
                        'uploads/product/' .
                        $product->image1 ?>">
                      <img style="width: 90px; height:auto;" src="<?= base_url() .
                        'uploads/product/thumbnail/' .
                        $product->image1 ?>" /></a>
                  </li>

                <?php endif; ?>

                <?php if ($product->image2 != null): ?>
                 <li style="float: left; border:1px solid #e8e8e9; margin-right: 8px; position:relative; z-index:1000;">
                 <a  href="#" class="elevatezoom-gallery" data-update="" data-image="<?= base_url() .
                   'uploads/product/large/' .
                   $product->image2 ?>"
                    data-zoom-image="<?= base_url() .
                      'uploads/product/' .
                      $product->image2 ?>">
                    <img style="width: 90px; height:auto;" src="<?= base_url() .
                      'uploads/product/thumbnail/' .
                      $product->image2 ?>"   /></a>
                </li>
                <?php endif; ?>

                <?php if ($product->image3 != null): ?>
                <li style="float: left; border:1px solid #e8e8e9; margin-right: 8px; position:relative; z-index:1000;">
                 <a  href="#" class="elevatezoom-gallery" data-update="" data-image="<?= base_url() .
                   'uploads/product/large/' .
                   $product->image3 ?>"
                    data-zoom-image="<?= base_url() .
                      'uploads/product/' .
                      $product->image3 ?>">
                    <img style="width: 90px; height:auto;" src="<?= base_url() .
                      'uploads/product/thumbnail/' .
                      $product->image3 ?>"  /></a>
                </li>
                <?php endif; ?>

                <?php if ($product->image4 != null): ?>
                <li style="float: left; border:1px solid #e8e8e9; margin-right: 8px; position:relative; z-index:1000;">
                 <a  href="#" class="elevatezoom-gallery" data-update="" data-image="<?= base_url() .
                   'uploads/product/large/' .
                   $product->image4 ?>"
                    data-zoom-image="<?= base_url() .
                      'uploads/product/' .
                      $product->image4 ?>">
                    <img style="width: 90px; height:auto;" src="<?= base_url() .
                      'uploads/product/thumbnail/' .
                      $product->image4 ?>"  /></a>
                </li>
                <?php endif; ?>

                <?php if ($product->image5 != null): ?>
                <li style="float: left; border:1px solid #e8e8e9; margin-right: 8px; position:relative; z-index:1000;">
                 <a  href="#" class="elevatezoom-gallery" data-update="" data-image="<?= base_url() .
                   'uploads/product/large/' .
                   $product->image5 ?>"
                    data-zoom-image="<?= base_url() .
                      'uploads/product/' .
                      $product->image5 ?>">
                    <img style="width: 90px; height:auto;" src="<?= base_url() .
                      'uploads/product/thumbnail/' .
                      $product->image5 ?>"  /></a>
                </li>
                <?php endif; ?>

              </ul>

             </div><!-- end thumbs list-->

            </div>

          </div>
        </div>
        <div class="col-lg-6 col-md-5 col-sm-6 col-xs-12 animated animation-done  fadeIn" data-animation="fadeIn">
          <div class="desc_blk">
            <div class="desc_blk_new">
              <?php
              $this->db
                ->select('stock')
                ->from('stocks')
                ->where('product_id', $product->id_products)
                ->where('stock !=', 0);
              $count_product_stock = $this->db->get()->num_rows();
              $this->db
                ->select('preorder')
                ->from('products')
                ->where('id_products', $product->id_products);
              $preorder = $this->db->get()->row()->preorder;
              ?>    

              <?php
              if ($count_product_stock == 0 && $preorder == '1') {
                echo $product->preorder
                  ? '<strong>[ PRE - ORDER ]</strong>'
                  : '';
              }
              echo ucfirst($product->description);
              ?>

              <!-- <hr>
              <strong>EDITOR NOTES</strong>
              <br />
              <?= ucfirst($product->editor_notes) ?>
              <hr>

              <strong>DIMENSIONS</strong>
              <br />
              <?= ucfirst($product->dimensions) ?>
              <hr>

              <strong>MATERIAL</strong>
              <br />
              <?= ucfirst($product->material) ?>
              <hr>

              <strong>GOOD TO KNOW</strong>
              <br />
              <?= ucfirst($product->good_to_know) ?>
              <hr> -->
            </div>
            <hr>
            <div class="desc_blk_new">
              <strong>EDITOR NOTES</strong>
              <br />
              <?= ucfirst($product->editor_notes) ?>
            </div>
            <hr>
            <div class="desc_blk_new">
              <strong>DIMENSIONS</strong>
              <br />
              <?= ucfirst($product->dimensions) ?>
            </div>
            <hr>
            <div class="desc_blk_new">
              <strong>MATERIAL</strong>
              <br />
              <?= ucfirst($product->material) ?>
            </div>
            <hr>
            <div class="desc_blk_new">
              <strong>GOOD TO KNOW</strong>
              <br />
              <?= ucfirst($product->good_to_know) ?>
            </div>


            <div class="desc_blk_bot clearfix">

            <form action="<?= base_url('cart/add') ?>" method="post">

            <input type="hidden" name="product_id" value="<?= $product->id_products ?>">
            <input type="hidden" name="product_name" value="<?= $product->title ?>">

            <?php if ($product->is_voucher == 'yes'): ?>
                <input type="hidden" name="qty" value="1">
                <br>
                <p><strong>INPUT GIFT CARD DETAIL</strong></p>
                <br>
                <p><input class="form-control" type="email" name="voucher_email" placeholder="Recipient Email" required></p>
                <br>
                <p><input class="form-control" type="text" name="voucher_message" placeholder="Your Message"></p>
                <br>
            <?php endif; ?>

               <?php
               $this->db
                 ->select('stock')
                 ->from('stocks')
                 ->where('product_id', $product->id_products)
                 ->where('stock !=', 0);
               $count_product_stock = $this->db->get()->num_rows();
               $this->db
                 ->select('preorder')
                 ->from('products')
                 ->where('id_products', $product->id_products);
               $preorder = $this->db->get()->row()->preorder;
               ?>

                <?php if ($count_product_stock != 0 || $preorder == '1'): ?>

                <p><span style="float:left; position:relative; top:3px; font-size:15px; margin-right:10px; ">Select Option:</span></p>

                <select id="select_product_size" class="form-control" name="product_size" style="width:180px; font-size: 13px;">
                  <?php foreach ($size_details as $size): ?>
                     <option  value="<?= $size->id_product_size ?>"><?= strtoupper(
  $size->product_size
) ?></option>
                  <?php endforeach; ?>
                </select>

                <p><?= $this->session->flashdata('no_stock') ?></p><br>

                <?php if ($product->is_voucher == 'no'): ?>
                    <div class="qty"> <a class="minus_btn" ></a>
                    <input type="text" placeholder="1" class="txtbox" name="qty" value="1">
                    <a class="plus_btn" ></a> </div>
                <?php endif; ?>

              <div id="headingPrice" class="price">

                <?php if ($product->discount_price != 0): ?>

                    <span class="new-price">IDR <?= number_format(
                      $product->discount_price
                    ) ?></span>
                    <span class="old-price" style="color:grey; font-size: 15px; text-decoration:line-through;">IDR <?= number_format(
                      $product->price
                    ) ?></span>

                    <input type="hidden" name="price" value="<?= $product->discount_price ?>">

                <?php else: ?>
                    <?php
                    $this->db
                      ->select('price')
                      ->from('stocks')
                      ->where('product_id', $product->id_products)
                      ->where('stock !=', 0)
                      ->limit(1);
                    $price = $this->db->get()->row()->price;
                    ?>
                    <span class="new-price">IDR <?= number_format(
                      $price
                    ) ?></span>
                     <input type="hidden" name="price" value="<?= $price ?>">
                <?php endif; ?>

              </div>

              <br><br><br>
              <button id="addToCart" style="float: left; color:white; margin-top: 0px;" type="submit" name="Submit" class="btn_c btn_c2">Add to cart</button>
              </div>

              <script>
                  $(document).ready(function() {

                      $('#select_product_size').change(function() {
                          var id_product_details = $(this).val();
                          ajax_get_price(id_product_details);
                      });

                      var controller = 'ajax';
                      var base_url = '<?php echo base_url(); ?>';

                      function ajax_get_price(id_product_details) {

                          $.ajax({
                              'url'       : '<?php echo base_url(); ?>' + 'ajax' + '/ajax_get_price',
                              'type'      : 'POST',
                              'data'      : {

                                              'id_product_details' : id_product_details,
                                              'product_id' : <?= $product->id_products ?>
                                            },
                              'success'   : function(result) {
                                  var container = $('#headingPrice');
                                  if (result) {
                                      container.html(result);
                                  };
                              }
                          });
                      }
                  }); /*----end document ready -----*/
              </script>

              <?php else: ?>

                <p>Product out of stock</p>

              <?php endif; ?>


            </div>

            </form>
            <div class="addsharethisinner" style="margin-left: 27px; margin-top: 10px; margin-bottom: 10px">
                  <span class="st_twitter_hcount sharebtn" displayText="Tweet"></span>
                  <span class="st_googleplus_hcount" displayText="Google +"></span>
                  <span class="st_pinterest_hcount sharebtn" displayText="Pinterest"></span>
                  <span class="st_facebook_hcount sharebtn" displayText="Facebook"></span>
            </div>
            <br>

            <script type="text/javascript">/* <![CDATA[ */$(function(){$(".addsharethis").addClass("loader");$(window).load(function(){$(".addsharethis").removeClass("loader");$(".addsharethisinner").show(400);});});$(function(){$(".addsharethis .sharebtn").click(function(){$(this).find("img").show("medium");})});/* ]]> */</script><script type="text/javascript">/* <![CDATA[ */var switchTo5x=true;/* ]]> */</script><script type="text/javascript" src="http://w.sharethis.com/button/buttons.js">/* <![CDATA[ *//* ]]> */</script><script type="text/javascript">/* <![CDATA[ */stLight.options({publisher:"ea22d519-9f98-4018-99a9-5b5f1b100fa8",doNotHash:false,doNotCopy:false,hashAddressBar:false});/* ]]> */</script>


          </div>
        </div>
      </div>

      <div class="tabing animated  animation-done fadeIn "  data-animation="fadeIn">
        <ul class="nav nav-tabs">
          <!-- <li><a href="product.html#information" data-toggle="tab">MORE INFORMATION</a></li> -->
          <li><a href="product.html#review" data-toggle="tab">REVIEW</a></li>
        </ul>

        <!-- Tab panes -->
        <div class="tab-content">
          <div class="tab-pane active" id="review">
            <div class="row">
            <!-- lol -->
              <?php
              $this->db
                ->select('*')
                ->from('comments')
                ->where('id_product', $product->id_products)
                ->order_by('id_comment', 'desc')
                ->limit(5);
              $comments = $this->db->get()->result();
              ?>
                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                  <?php foreach ($comments as $comment): ?>
                  <div class="rew_blk clearfix">
                    <div class="top_row clearfix">
                      <div class="date"><span class="fa fa-calendar"></span><?= date(
                        "d M Y",
                        strtotime($comment->date)
                      ) ?></div>
                      <a href="#" class="user"><span class="fa fa-user"></span><?= $comment->username ?></a>
                      <ul class="start_list">
                        <?php echo str_repeat(
                          '<li class="fa fa-star active"></li>',
                          $comment->rating
                        ); ?>
                      </ul>
                    </div>
                    <p> <?= $comment->comment ?> </p>
                  </div>
                  <?php endforeach; ?>
                </div>

                <?php if ($login_status): ?>
                <!-- add review -->
                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                  <div class="frm rew_frm">
                    <h4>Write a review</h4>
                    <form action="<?= base_url(
                      'comment/add'
                    ) ?>" method="post" id="comment_form">
                    <input type="hidden" name="product_id" value="<?= $product->id_products ?>">
                    <input type="hidden" name="username" value="<?= $this->session->userdata(
                      'customer'
                    )['customer_name'] ?>">
                    <input type="hidden" name="email" value="<?= $this->session->userdata(
                      'customer'
                    )['customer_email'] ?>">

                      <div class="row first_row">
                        <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
                          <div class="lbltxt">Your Name: <span class="req">*</span></div>
                          <input disabled type="text" class="txtbox" name="username" value="<?= $this->session->userdata(
                            'customer'
                          )['customer_name'] ?>">
                        </div>
                        <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
                          <div class="lbltxt">E-mail:<span class="req">*</span></div>
                          <input disabled type="email" class="txtbox" name="email" value="<?= $this->session->userdata(
                            'customer'
                          )['customer_email'] ?>">
                        </div>
                      </div>

                      <div class="row">
                        <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
                          <div class="lbltxt">Rate on a scale:<span class="req">*</span> </div>
                          <!-- <ul class="start_list">
                            <li class="fa fa-star"></li>
                            <li class="fa fa-star"></li>
                            <li class="fa fa-star"></li>
                            <li class="fa fa-star"></li>
                            <li class="fa fa-star"></li>
                          </ul> -->
                          <div class="rating">
                            <span><input type="radio" name="rating" id="str5" value="5" required ><label for="str5" class="fa fa-star"></label></span>
                            <span><input type="radio" name="rating" id="str4" value="4" ><label for="str4" class="fa fa-star"></label></span>
                            <span><input type="radio" name="rating" id="str3" value="3" ><label for="str3" class="fa fa-star"></label></span>
                            <span><input type="radio" name="rating" id="str2" value="2" ><label for="str2" class="fa fa-star"></label></span>
                            <span><input type="radio" name="rating" id="str1" value="1" ><label for="str1" class="fa fa-star"></label></span>
                        </div>
                        </div>
                      </div>

                      <div class="lbltxt">Message: <span class="req">*</span></div>
                      <textarea name="comment" form="comment_form" required></textarea>
                      <div class="clearfix frm_bot">
                        <input type="submit" class="btn_c" value="Submit">
                        <input type="reset" class="clear_btn" value="Clear">
                        <span class="reqired">* Required Fields</span> </div>
                    </form>
                  </div>
                </div>
                <!-- end add review -->
                <?php else: ?>
                      <a href="<?= base_url() .
                        'register/index' ?>"> <strong>LOGIN TO REVIEW</strong> </a>
                <?php endif; ?>


            </div>
          </div>
          <div class="tab-pane active" id="information">
           <?= ucfirst($product->long_description) ?>
          </div>
          <div class="tab-pane" id="protags">
            <p>Etiam pretium, arcu id mattis aliquet, est neque sagittis quam, id mollis leo urna non dui. Phasellus lacinia facilisis ipsum, a tempor nibh. Aliquam nec interdum mi. Nunc laoreet molestie massa, at euismod ipsum fringilla id. Vivamus vehicula metus velit, sit amet congue turpis suscipit in. Etiam interdum felis sed consequat varius. Aliquam erat volutpat. </p>
          </div>
        </div>
      </div>


      <div class=" animated  fadeInUp" data-animation="fadeIn">
        <div class="clearfix">
          <h3>You may also like</h3>
        </div>
        <div class="carosel product_c">
          <div class="row">
            <!-- Place somewhere in the <body> of your page -->
            <div >

            <?php
            $this->db
              ->select('id_category')
              ->from('category_product')
              ->where('id_product', $product->id_products)
              ->order_by('id_category_product')
              ->limit(1);
            $related_category_id = $this->db->get()->row()->id_category;
            $this->db
              ->select('id_product')
              ->from('category_product')
              ->where('id_category', $related_category_id)
              ->order_by('id_category_product', 'RANDOM')
              ->limit(8);
            $related_products_id = $this->db->get()->result();
            ?>

              <ul class="bxcarousel" >

                <?php foreach ($related_products_id as $related_product_id): ?>

                     <?php
                     $this->db
                       ->select(
                         'alias, image1, title, brand_id, price, discount_price, product_status'
                       )
                       ->from('products')
                       ->where('id_products', $related_product_id->id_product);
                     $item = $this->db->get()->row();
                     ?>
                     <?php if ($item->product_status == '1'): ?> 
                      <li>
                          <div class="main_box">
                            <div class="box_1"> <a id="productImage" href="<?= base_url() .
                              'product/' .
                              $item->alias ?>"><img src="<?= base_url() .
  'uploads/product/small/' .
  $item->image1 ?>" width="259" height="200"></a>
                            </div>
                          <div class="desc">
                            <h5><a href="<?= base_url() .
                              'product/' .
                              $item->alias ?>"><?= ucwords(
  $item->title
) ?></a></h5>
                            <p>
                            <?php
                            $this->db
                              ->select('brand, alias')
                              ->from('brands')
                              ->where('id_brands', $item->brand_id);
                            $brand = $this->db->get()->row();
                            ?>

                          <a style="color:#282727;" href="<?= base_url() .
                            'brand/' .
                            $brand->alias ?>"><?= ucwords(
  $brand->brand
) ?></a></p>

                            <div class="price">

                            <?php if ($item->discount_price != 0): ?>

                                    <span class="amount">IDR <?= number_format(
                                      $item->discount_price
                                    ) ?></span>

                                    <del style="color:grey;"><span class="amount" style="color:grey; font-size: 14px;">IDR <?= number_format(
                                      $item->price
                                    ) ?></span></del>

                                  <?php else: ?>

                                    <span class="amount">IDR <?= number_format(
                                      $item->price
                                    ) ?></span>

                                  <?php endif; ?>
                          </div>
                          </div>
                          </div>
                      </li>
                    <?php endif; ?>
               <?php endforeach; ?>
              </ul>
            </div>
          </div>
        </div>
      </div>



    </div>
  </div>
</div>
<div id="footer" >





<script>
window.addEventListener('DOMContentLoaded', (event) => {

  fbq('track', 'ViewContent',{ content_ids: ['<?= $product->alias ?>'], content_type: 'product', });

  document.getElementById('addToCart').addEventListener('click', function() {
    fbq('track', 'AddToCart',{ content_ids: ['<?= $product->alias ?>'], content_type: 'product', });
  });

});

$(document).ready(function(){
    // Check Radio-box
    $(".rating input:radio").attr("checked", false);

    $('.rating input').click(function () {
        $(".rating span").removeClass('checked');
        $(this).parent().addClass('checked');
    });

    $('input:radio').change(
      function(){
        var userRating = this.value;
        // alert(userRating);
    });
});
</script>