<?php defined('BASEPATH') or exit('No direct script access allowed'); ?>
<!--SLIDER START-->
<div class="flexslider home-slider">
  <ul class="slides">
    <?php foreach ($home_slideshow as $slideshow): ?>
      <li><a href="<?= $slideshow->banner_link ?>"><img alt="alt" src="<?= base_url() .
  'uploads/banners/' .
  $slideshow->image ?>" ></a></li>
    <?php endforeach; ?>
  </ul>
  <div class="container">
    <div class="banner_nav ">
      <div class="scroll_down">Scroll down <span class="fa fa-arrow-circle-down"></span></div>
    </div>
  </div>
</div>
<!--SLIDER END -->

<!--HOME STATIC BANNERS-->
<div id="content">
  <div class="container">
    <div class="h_row_1 ideas-hover">
      <div class="row staticBanners">
        <div class="col-lg-4 col-md-4 col-sm-4 col-xs-6 animated" data-animation="fadeIn">
          <div>
              <a href="<?= $home_staticbanners->banner1_link ?>"><img alt="alt" src="<?= base_url() .
  'uploads/page/' .
  $home_staticbanners->banner1_image ?>"  ></a>
          </div>
        </div>
        <div class="col-lg-4 col-md-4 col-sm-4 col-xs-6 animated" data-animation="fadeIn">
          <div>
              <a href="<?= $home_staticbanners->banner2_link ?>"><img alt="alt" src="<?= base_url() .
  'uploads/page/' .
  $home_staticbanners->banner2_image ?>"></a>
          </div>
        </div>
        <div class="col-lg-4 col-md-4 col-sm-4 col-xs-6 animated" data-animation="fadeIn">
          <div>
              <a href="<?= $home_staticbanners->banner3_link ?>"><img alt="alt" src="<?= base_url() .
  'uploads/page/' .
  $home_staticbanners->banner3_image ?>"  ></a>
          </div>
        </div>
        <div class="col-lg-4 col-md-4 col-sm-4 col-xs-6 animated" data-animation="fadeIn">
            <div>
                <a href="<?= $home_staticbanners->banner4_link ?>"><img alt="alt" src="<?= base_url() .
  'uploads/page/' .
  $home_staticbanners->banner4_image ?>"  ></a>
            </div>
          </div>
          <div class="col-lg-4 col-md-4 col-sm-4 col-xs-6 animated" data-animation="fadeIn">
            <div>
                <a href="<?= $home_staticbanners->banner5_link ?>"><img alt="alt" src="<?= base_url() .
  'uploads/page/' .
  $home_staticbanners->banner5_image ?>"  ></a>
            </div>
          </div>
          <div class="col-lg-4 col-md-4 col-sm-4 col-xs-6 animated" data-animation="fadeIn">
          <div>
              <a href="<?= $home_staticbanners->banner6_link ?>"><img alt="alt" src="<?= base_url() .
  'uploads/page/' .
  $home_staticbanners->banner6_image ?>"  ></a>
          </div>
        </div>
      </div>
    </div>
    <div class="h_row_3 animated" data-animation="fadeIn">
      <?= $welcome_message ?>
    </div>

    <!-- NEW PRODUCTS -->
    <div class="catelog_c" style="padding-bottom:90px;">
      <div class="title clearfix">
        <h2 style="text-align:center; float:none;">NEW ARRIVALS</h2>
      </div>
      <div class="row">
        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
          <div class="product_c">
            <div class="row view-grid animated  fadeInUp" data-animation="fadeInUp" >
              <?php foreach ($new_products as $item): ?>
                <div class="col-xs-6 col-lg-4 col-md-4 col-sm-4">
                  <div class="main_box" style="position:relative;">
                    <div class="box_1">
                      <?php if ($item->new_arrival == 'yes'): ?>
                        <div style="width: 50px;height: 50px;color: white !important;background: grey;display: block;border-radius: 50%;line-height: 40px;text-align: center;font-weight: bold;position: absolute;left: 5px;padding-top: 5px;">
                        NEW
                      </div>
                      <?php endif; ?>
                        <a href="<?= base_url() . 'product/' . $item->alias ?>">
                          <img alt="alt"  width="259" height="200" src="<?= base_url() .
                            'uploads/product/small/' .
                            $item->image1 ?>" draggable="false"></a>
                        <?php
                        //check if item out of stock
                        $this->db
                          ->select('id_stocks')
                          ->from('stocks')
                          ->where('product_id', $item->id_products)
                          ->where('stock !=', 0);
                        $count_current_stock = $this->db->get()->num_rows();
                        ?>
                    </div>
                    <?php if ($count_current_stock == 0): ?>
                      <?php if ($item->preorder == '0'): ?>
                        <img id="nostockIcon" src="<?= base_url(
                          'template/images/outofstock.png'
                        ) ?>">
                      <?php else: ?>
                        <img id="nostockIcon" src="<?= base_url(
                          'template/images/preorder.png'
                        ) ?>">
                      <?php endif; ?>
                    <?php else : ?>
                      <?php if ($item->preorder == '1'): ?>
                        <img id="nostockIcon" src="<?= base_url(
                          'template/images/preorder.png'
                        ) ?>">
                      <?php endif; ?>
                    <?php endif; ?>
                    <div class="desc" id="productListDescription">
                      <h5><a href="<?= base_url() .
                        'product/' .
                        $item->alias ?>"><?= ucwords($item->title) ?></a></h5>
                      <?php
                      //get brand name
                      $this->db
                        ->select('brand, alias')
                        ->from('brands')
                        ->where('id_brands', $item->brand_id);
                      $brand = $this->db->get()->row();
                      ?>
                      <p><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: ?>
                          <?php
                            $this->db
                              ->select_min('price')
                              ->from('stocks')
                              ->where('product_id', $item->id_products)
                              ->where('price !=', 0);
                            $lowest_price = $this->db->get()->row()->price;
                            $this->db
                              ->select_max('price')
                              ->from('stocks')
                              ->where('product_id', $item->id_products)
                              ->where('price !=', 0);
                            $highest_price = $this->db->get()->row()->price;
                          ?>
                          <?php if (
                            $lowest_price != 0 &&
                            $highest_price != 0 &&
                            $lowest_price != $highest_price
                          ): ?>
                               <span class="amount">IDR <?= number_format(
                                 $lowest_price
                               ) ?> - <?= number_format($highest_price) ?></span>
                          <?php else: ?>
                              <span class="amount">IDR <?= number_format(
                                $item->price
                              ) ?></span>
                          <?php endif; ?>
                        <?php endif; ?>
                      </div>
                    </div>
                  </div>
                </div>
              <?php endforeach; ?>
            </div>
          </div>
        </div>
      </div>
    </div>

    <?php if (count($testimonies) > 0): ?>
      <div class="animated fadeInUp" data-animation="fadeIn">
        <div class="clearfix">
          <h3>Testimonials</h3>
        </div>
        <div class="carosel product_c">
          <div class="row">
            <div >
              <ul class="bxcarousel" >
                <?php foreach ($testimonies as $testimony): ?>
                  <li>
                    <div class="main_box">
                      <div class="box_1"><img src="<?= base_url() .
                        'uploads/' .
                        $testimony->image ?>" width="250" height="250" style="border-radius:50%">
                      </div>
                      <div class="desc">
                        <h5><?= ucwords($testimony->name) ?></h5>
                        <?= $testimony->testimony ?>
                      </div>
                    </div>
                  </li>
                <?php endforeach; ?>
              </ul>
            </div>
          </div>
        </div>
      </div>
    <?php endif; ?>

    <div id="footer" >
      <div class="f_top">
        <div class="container">
          <div class="row">
            <div class="col-lg-3 col-md-3 col-sm-3 col-sm-offset-1 col-xs-12">
              <div class="ftop_blk" style="text-align:center;">
                <i style="font-size:30px;" class="fa fa-heart" aria-hidden="true"></i>
                <h5>Craftsmanship<br>Created with love</h5>
              </div>
            </div>
            <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12">
              <div class="ftop_blk" style="text-align:center;">
              <i style="font-size:30px;" class="fa fa-flag" aria-hidden="true"></i>
                <h5>Locally produced<br>
                  100% made in Indonesia</h5>
              </div>
            </div>
            <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12">
              <div class="ftop_blk" style="text-align:center; border-right:none;">
              <i style="font-size:30px;" class="fa fa-tree" aria-hidden="true"></i>
                <h5>Materials <br>
                  Only the good stuff</h5>
                </div>
            </div>
          </div>
        </div>
      </div>

<?php
//get popupbanner parameters...
$this->db
  ->select('popup_image, popup_text, popup_active')
  ->from('home_centerbanners')
  ->where('id_home_centerbanners', 1);
$popup = $this->db->get()->row();
?>
<script>
	//disable submit button after submit, to prevent double submit
	$(document).ready(function () {
		$(".bottom_modal").click(function () {
			setTimeout(function () { disableButton(); }, 0);
		});
		function disableButton() {
			$(".bottom_modal").prop('disabled', true);
		}
	});
</script>

<style type="text/css">
  /* Extra small devices (phones, 600px and down) */
  @media only screen and (max-width: 600px) {
    .image_bg {
      width: 100%;
      height: auto;
    }
  }

  /* Small devices (portrait tablets and large phones, 600px and up) */
  @media only screen and (min-width: 600px) {
    .image_bg {
      width: 100%;
      height: auto;
    }
  }

  /* Medium devices (landscape tablets, 768px and up) */
  @media only screen and (min-width: 768px) {
    .image_bg {
      width: 100%;
      height: auto;
    }
  }

  /* Large devices (laptops/desktops, 992px and up) */
  @media only screen and (min-width: 992px) {
    .image_bg {
      width: 800px;
      height: 500px;
    }
  }

  /* Extra large devices (large laptops and desktops, 1200px and up) */
  @media only screen and (min-width: 1200px) {
    .image_bg {
      width: 800px;
      height: 500px;
    }
  }
  .modal-dialog {
  display: block;
  margin-left: auto;
  margin-right: auto;
  top:50% !important;
  transform: translate(0, -50%) !important;
  -ms-transform: translate(0, -50%) !important;
  -webkit-transform: translate(0, -50%) !important;
  margin:auto;
}
#newsLetter {
    position: absolute;
}
#newsLetterInput {
  border:none;
  width:250px;
  padding:10px;
}

#newsletterButton {
  padding:10px;
  border:none;
  background:#a4684e;
  color:white;
}

#newsletterReject {
  margin-top:2rem;
}

@media  (max-width:600px) {
  #newsLetter {
    bottom:10px; right:50px;
  }
  #newsLetterInput {
    border:none;
    width:60%;
    padding:5px;
  }
  #newsletterButton {
    padding:5px;
  }
  #newsletterReject {
    margin-top:0.3rem;
  }
}

@media  (min-width:601px) and (max-width:768px) {
  #newsLetter {
    bottom:60px; right:150px;
  }
}

@media (min-width:769px) and (max-width:899px) {
  #newsLetter {
    bottom:60px; right:70px;
  }
}

@media (min-width:900px) and (max-width:1199px) {
  #newsLetter {
    bottom:60px; right:70px;
  }
}

@media (min-width:1200px) {
  #newsLetter {
    bottom:60px; right:65px;
  }

  .newsletterReject2 {
    position:absolute; bottom:30px; right: 110px;
  }
}
</style>

<?php if ($popup_voucher->active == "yes"): ?>
<div class="modal fade" id="myModal_voucher">
  <div class="modal-dialog">
    <div class="modal-content image_bg" style="position:relative;">
      <button class="close close_voucher" data-dismiss="modal" style="padding: 10px; position: absolute; right:10px;"><span>&times;</span></button>
      <img src="<?= base_url() .
        'uploads/popup_voucher/img/' .
        $popup_voucher->img_banner ?>" class ="image_bg">
      <?php if ($popup_voucher->email_input == "yes"): ?>
        <div id="newsLetter" style="text-align:center">
            
            <?php if (
              $this->session->userdata('already_subscribe') &&
              $this->session->userdata('already_subscribe') == 'yes'
            ): ?>
              <div id="vouchercodeResult">
                <h1>Your Code: <span id="voucherCode"><?= $popup_voucher->voucher_code ?></span> <button class="btn btn-default" onclick="copy()" title="Copy voucher code">
                    <i class="fa fa-copy"></i>
                  </button></h1>
                <a id="newsletterReject" data-dismiss="modal" href="#" style="text-decoration:underline; display:inline-block;">Close and dont show again.</a>  
                <script>
                  function copy() {
                    var copyText = document.getElementById("voucherCode");
                    var textArea = document.createElement("textarea");
                    textArea.value = copyText.textContent;
                    document.body.appendChild(textArea);
                    textArea.select();
                    document.execCommand("Copy");
                    textArea.remove();
                  }
                </script>
              </div>
            <?php else: ?>      
              <div id="newsletterForm" >
                <?= form_open('welcome/submit') ?>
                  <input id="newsLetterInput" type="email" name="email" placeholder="Put Your Email Here" required>
                  <button id="newsletterButton" type="submit" title="Submit">
                    SUBSCRIBE
                  </button>
                <?= form_close() ?>
                <a id="newsletterReject" data-dismiss="modal" href="#" style="text-decoration:underline; display:inline-block;">No Thanks. I dont like gifts.</a>
              </div>
            <?php endif; ?>  
        </div>    
      <?php else: ?>
        <a id="newsletterReject" class="newsletterReject2" data-dismiss="modal" href="#" style="text-decoration:underline; display:inline-block;">Dont show again.</a>
      <?php endif; ?>
    </div>
  </div>
</div>
<script>
$(document).ready(function() {
  if(!localStorage.getItem('newsletterActive')) {
    $("#myModal_voucher").modal("show");
  } 
});

const newsletterReject = document.getElementById('newsletterReject');

newsletterReject.addEventListener("click", (e) => {
  e.preventDefault();
  //add localstorage
  localStorage.setItem('newsletterActive', 'yes');  
}); 

</script>
<?php endif;
?>