<section class="ikio_breadcumb">
  <div class="ikio_container">
    <div class="ikio_breadcumb_inner">
      <ul>
        <li><a href="<?php echo base_url();?>" class="active__link hsize15 mp_regular">Home</a></li>
        <li><span></span></li>
        <li><a href="<?php echo base_url();?>products" class="hsize15 mp_regular">Products</a></li>
        <li><span></span></li>
        <li><a href="<?php echo base_url();?>getcategory/<?php echo $record[0]->cat_slug;?>"
                        class="hsize15 mp_regular"><?php echo $record[0]->category_name;?></a></li>
        <li><span></span></li>
        <li><a href="<?php echo base_url();?>getsubcategory/<?php echo $record[0]->subcat_slug;?>"
                        class="hsize15 mp_regular"><?php echo $record[0]->name;?></a></li>
        <li><span></span></li>
        <li><a href="#" class="hsize15 mp_regular"><?php echo $record[0]->product_name;?> <?php echo $record[0]->product_tagline;?></a></li>
      </ul>
    </div>
  </div>
</section>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.2/css/jquery.dataTables.min.css">
</style>
<script type="text/javascript" src="<?php echo base_url();?>assets/jquery.dataTables.min.js"></script>
<section class="ikio__productDetails">
  <div class="ikio_container">
    <div class="row justify-content-center">
      <div class="col-md-5">
        <div class="ikio_productDetal--left">
          <div class="row no-gutters ikio_produt_detail_grid">
            <div class="col-md-3 order-sm-2">
              <div class="left__image_slider">
                <ul class="thumb">
                  <li> <a href="<?php echo base_url()."uploads/product/".$record[0]->featured_image?>" target="pro_box">
                      <img src="<?php echo base_url()."uploads/product/".$record[0]->featured_image?>"> </a> </li>
                  <?php
                  $sel_images = get_product_images( $record[ 0 ]->prodID );
                  if ( count( $sel_images ) > 0 ) {  ?>
                  <?php
                  for ( $i = 0; $i <= count( $sel_images ) - 1; $i++ ) {
                    $file_name = FCPATH . "uploads/product/" . $sel_images[ $i ]->image;

                    if ( file_exists( $file_name ) ) {
                      ?>
                  <?php $imag =  $sel_images[$i]->image;?>
                  <li> <a href="<?php echo base_url()."uploads/product/".$sel_images[$i]->image?>" target="pro_box">
                      <img src="<?php echo base_url()."uploads/product/".$sel_images[$i]->image?>"> </a> </li>
                  <?php }}} ?>
                </ul>
              </div>
            </div>
            <div class="col-md-9 order-sm-2">
              <div class="right__image_slider">
                <div class="products_img pro_box"> <img src="<?php echo base_url()."uploads/product/".$record[0]->featured_image?>"> </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="col-md-7">
        <div class="ikio_productDetail--right">
          <div class="ikio__productCategory_name">
            <div class="grid">
              <div class="grid_8">
                <h5 class="lt_bold"><?php echo $record[0]->product_name;?></h5>
                <h6 class="lt_regular"><?php echo $record[0]->product_tagline;?></h6>
              </div>
              <div class="grid_4">
                <div class="ikio__categoryWranty_images">
                    <img src="<?php echo base_url();?>uploads/product/<?php echo $record[0]->product_right_top_image?>" alt=""> </div>
              </div>
            </div>
          </div>
          <div class="ikio__productDetails_content">
            <p class="lt_regular"> <?php echo $record[0]->product_short_description;?> </p>
            <h4 class="lt_bold">PRODUCT FEATURES</h4>
            <?php echo $record[0]->prodfeatures;?> </div>
          <div class="product__enuiry__now_button"> <a href="#" class="white__arrow arrow__width" id="black_btn"
                            data-pd-popup-open="popupNew">INQUIRE NOW</a> </div>
          <div class="image_certification"> 
              <img src="<?php echo base_url();?>uploads/product/<?php echo $record[0]->product_left_bottom_image;?>" alt=""> </div>
          <?php
          if ( $record[ 0 ]->product_category == '3' ) {
            ?>
          <div class="notice">
            <p> We regret to inform you that due to global supply chain issues with electrical components, there will be delays in the order fulfilment of Residential/Multi-Family Product Category and the MOQ for this product line will be 10,000 USD per SKU. </p>
          </div>
          <?php } ?>
        </div>
      </div>
    </div>
  </div>
</section>
<section class="ikio_productDescription">
  <div class="ikio_container">
    <div class="row">
      <div id="horizontalTab">
        <div class="S-hidden-x">
          <div class="product__detailInner_tabs">
            <div class="tabs_heading">
              <h6>Product Details</h6>
            </div>
            <div class="product__detail_tables ">
              <?php  echo $record[0]->product_long_description;?>
            </div>
          </div>
        </div>
        <div class="product__detailInner_tabs">
          <div class="tabs_heading">
            <h6>Technical Resources</h6>
          </div>
          <div class="ikio_texchincal__boxes">
            <?php if($record[0]->all_url !=''){?>
            <div class="row">
              <div class="col-md-6">
                <div class="downloadall"> <a download="<?php echo $record[0]->all_url;?>" href="<?php echo $record[0]->all_url;?>" target="_blank"><i class="fas fa-download"></i> Download All</a> </div>
              </div>
            </div>
            <?php } ?>
            <div class="data_more_less">
              <div class="data_more_less_inner" data-height="200" data-increase-by="300">
                <div class="data_more_less_body">
                  <div class="row techBoxes_grid">
                    <?php
                    function getFileType( $file_name ) {
                      $filename = explode( '.', $file_name );
                      $extension = end( $filename );

                      switch ( $extension ) {
                        case 'pdf':
                          $type = ' pdf';
                          break;
                        case 'docx':
                        case 'doc':
                          $type = ' word';
                          break;
                        case 'xls':
                        case 'xlsx':
                          $type = 'excel';
                          break;
                        case 'mp3':
                        case 'ogg':
                        case 'wav':
                          $type = 'audio';
                          break;
                        case 'mp4':
                        case 'mov':
                          $type = 'video';
                          break;
                        case 'zip':
                        case '7z':
                        case 'rar':
                          $type = ' zip';
                          break;
                        case 'jpg':
                        case 'jpeg':
                        case 'png':
                          $type = ' img1';
                          break;
                        default:
                          $type = 'alt';
                      }

                      return $type;
                    }
                    ?>
                    <?php
                    if ( $record[ 0 ]->heading1 != '' && $record[ 0 ]->document1 != '' ) {

                      $file_name = FCPATH . "uploads/tech_document/" . $record[ 0 ]->document1;
                      ?>
                    <div class="col-md-3">
                      <div class="ikio_techinacl__boxes_inner more">
                        <h5><?php echo $record[0]->heading1;?> </h5>
                        <div class="icon-box d-flex flex-column flex-lg-row align-items-center">
                          <div class="pdf__verison"> <i class="fas f40 fa-file-<?php echo getFileType($file_name); ?>"></i> </div>
                          <div class="pdf__title">
                            <h4> <a href="<?php echo base_url();?>uploads/tech_document/<?php echo $record[0]->document1; ?>"
                                                target="_blank"    ><?php echo $record[0]->document1?></a> </h4>
                          </div>
                        </div>
                      </div>
                    </div>
                    <?php } ?>
                    <?php

                    if ( $record[ 0 ]->heading2 != '' && $record[ 0 ]->document2 != '' ) {
                      $file_name = FCPATH . "uploads/tech_document/" . $record[ 0 ]->document2;
                      ?>
                    <div class="col-md-3">
                      <div class="ikio_techinacl__boxes_inner more">
                        <h5><?php echo $record[0]->heading2;?> </h5>
                        <div class="icon-box d-flex flex-column flex-lg-row align-items-center">
                          <div class="pdf__verison"> <i class="fas f40 fa-file-<?php echo getFileType($file_name); ?>"></i> </div>
                          <div class="pdf__title">
                            <h4> <a  href="<?php echo base_url();?>uploads/tech_document/<?php echo $record[0]->document2; ?>"
                                                target="_blank"   ><?php echo $record[0]->document2?></a> </h4>
                          </div>
                        </div>
                      </div>
                    </div>
                    <?php } ?>
                    <?php
                    if ( $record[ 0 ]->heading3 != '' && $record[ 0 ]->document3 != '' ) {
                      $file_name = FCPATH . "uploads/tech_document/" . $record[ 0 ]->document3;
                      ?>
                    <div class="col-md-3">
                      <div class="ikio_techinacl__boxes_inner more">
                        <h5><?php echo $record[0]->heading3;?> </h5>
                        <div class="icon-box d-flex flex-column flex-lg-row align-items-center">
                          <div class="pdf__verison"> <i class="fas f40 fa-file-<?php echo getFileType($file_name); ?>"></i> </div>
                          <div class="pdf__title">
                            <h4> <a  href="<?php echo base_url();?>uploads/tech_document/<?php echo $record[0]->document3; ?>"
                                                target="_blank"  ><?php echo $record[0]->document3?></a> </h4>
                          </div>
                        </div>
                      </div>
                    </div>
                    <?php } ?>
                    <?php


                    if ( $record[ 0 ]->heading4 != '' && $record[ 0 ]->document4 != '' ) {
                      $file_name = FCPATH . "uploads/tech_document/" . $record[ 0 ]->document4;
                      ?>
                    <div class="col-md-3">
                      <div class="ikio_techinacl__boxes_inner more">
                        <h5><?php echo $record[0]->heading4;?> </h5>
                        <div class="icon-box d-flex flex-column flex-lg-row align-items-center">
                          <div class="pdf__verison"> <i class="fas f40 fa-file-<?php echo getFileType($file_name); ?>"></i> </div>
                          <div class="pdf__title">
                            <h4> <a  href="<?php echo base_url();?>uploads/tech_document/<?php echo $record[0]->document4; ?>"
                                                target="_blank"    ><?php echo $record[0]->document4?></a> </h4>
                          </div>
                        </div>
                      </div>
                    </div>
                    <?php } ?>
                    <?php
                    if ( $record[ 0 ]->heading5 != '' && $record[ 0 ]->document5 != '' ) {
                      $file_name = FCPATH . "uploads/tech_document/" . $record[ 0 ]->document5;
                      ?>
                    <div class="col-md-3">
                      <div class="ikio_techinacl__boxes_inner more">
                        <h5><?php echo $record[0]->heading5;?> </h5>
                        <div class="icon-box d-flex flex-column flex-lg-row align-items-center">
                          <div class="pdf__verison"> <i class="fas f40 fa-file-<?php echo getFileType($file_name); ?>"></i> </div>
                          <div class="pdf__title">
                            <h4> <a  href="<?php echo base_url();?>uploads/tech_document/<?php echo $record[0]->document5; ?>"
                                                        target="_blank"><?php echo $record[0]->document5?></a> </h4>
                          </div>
                        </div>
                      </div>
                    </div>
                    <?php } ?>
                    <?php
                    $technical_docs = get_techs_documents( $record[ 0 ]->prodID );
                    if ( count( $technical_docs ) > 0 ) {

                      ?>
                    <div class="col-md-6">
                      <div class="ikio_techinacl__boxes_inner">
                        <h5>Literature</h5>
                        <?php
                        foreach ( $technical_docs as $docs ) {
                          $file_name = FCPATH . "uploads/tech_document/" . $docs->document;

                          if ( file_exists( $file_name ) ) {
                            ?>
                        <div class="icon-box d-flex flex-column flex-lg-row align-items-center">
                          <div class="pdf__verison"> <img src="<?php echo base_url();?>assets/img/icon_pdf_small.png" alt=""> </div>
                          <div class="pdf__title">
                            <h4> <a download="<?php echo $docs->document; ?>"
                                                        href="<?php echo base_url();?>uploads/tech_document/<?php echo $docs->document; ?>"
                                                        target="_blank"><?php echo $docs->document?></a></h4>
                          </div>
                        </div>
                        <?php } ?>
                        <?php } ?>
                      </div>
                    </div>
                    <?php  } ?>
                  </div>
                </div>
              </div>
              <!-- <a href="#" class="action_more more_less_action btn">Show More</a>
                            <a href="#" class="action_less more_less_action btn">Show Less</a> --> 
              
            </div>
          </div>
          <?php if($record[0]->resource !=""){?>
          <div class="tabs_heading">
            <h6>SKU Details</h6>
          </div>
          <div class="mytables" id="reso"> <?php echo $record[0]->resource;?> </div>
          <?php } else{ }?>
          <?php
          if ( $record[ 0 ]->heading1 == '' && $record[ 0 ]->document1 == '' && $record[ 0 ]->heading2 == '' && $record[ 0 ]->document2 == '' && $record[ 0 ]->heading3 == '' && $record[ 0 ]->document3 == '' && $record[ 0 ]->heading4 == '' && $record[ 0 ]->document4 == '' && $record[ 0 ]->heading5 == '' && $record[ 0 ]->document5 == '' && $record[ 0 ]->resource == '' ) {
            ?>
          <p>Details for this product will be added soon. However, you can get all the information you need on a special request by contacting your IKIO sales representative.</p>
          <?php } ?>
        </div>
        <?php if($record[0]->video_link !=""){?>
        <div class="ikiovideo_tabs">
          <?php
          $video = $record[ 0 ]->video_link;
          $parsed_video = parse_url( $video, PHP_URL_QUERY );
          parse_str( $parsed_video, $arr );
          ?>
          <iframe width="100%" height="400" src="https://www.youtube.com/embed/<?php echo $arr['v'];?>"
                            frameborder="0"> </iframe>
        </div>
        <?php } ?>
        
      
        
        <?php if($record[0]->accessories !=""){?>
        <div class="product__detailInner_tabs">
          <div class="tabs_heading">
            <h6>Accessories</h6>
          </div>
          <div class="product__detail_tables"> <?php echo $record[0]->accessories;?> </div>
        </div>
        <?php } ?>
      </div>
    </div>
  </div>
</section>
<?php if(count($related)>0) { ?>
<section class="ikio__realted_products pd_40">
  <div class="ikio_container">
    <div class="tabs_heading">
      <h6>Related Products</h6>
    </div>
    <div class="owl-carousel owl-theme ikio__relatedProducts">
      <?php  foreach($related as $rel)   {?>
      <div class="item">
        <div class="ikio__product--box"> <a href="<?php echo base_url();?>product/<?php echo $rel->prodslug?>">
          <div class="product__image"> <img src="<?php echo base_url();?>uploads/product/<?php echo $rel->image;?>" alt=""> </div>
          <div class="product__caption">
            <div class="product__name1">
              <h6 class="hsize16"><?php echo $rel->product_name;?></h6>
              <h5 class="hsize14"><?php echo $rel->product_tagline;?></h5>
            </div>
          </div>
          </a> </div>
      </div>
      <?php }?>
    </div>
  </div>
</section>
<?php  }  ?>
<div class="popup" data-pd-popup="popupNew">
  <div class="popup-inner">
    <div class="row">
      <div class="col-md-6">
        <div class="ikio_popupimages"> 
          <!--<img src="<?php echo base_url();?>assets/img/popup_form.jpeg" >-->
          <div class="product_inquiry">
            <h4>Product Inquiry</h4>
            <p> We thank you for your interest in our products. Our team is here to get back to you with
              more specific information that you're looking for.</p>
            <div class="talk">
              <h5>Let's Talk</h5>
              <img src="<?php echo base_url();?>assets/img/header/call_icon.svg" alt="phone"><a
                                href="tel:(1) 844-533-4546">(1) 844-533-4546</a> </div>
            <img src="<?php echo base_url();?>assets/img/pop_uplogo.svg" class="popup_logo"> </div>
        </div>
      </div>
      <div class="col-md-6">
        <?php if( $this->session->flashdata('message') !='' ){ ?>
        <tr>
          <td colspan="4" class="err_msg"><?php echo $this->session->flashdata('message'); ?></td>
        </tr>
        <?php } ?>
        <div class="ikio_popupForm">
          <form action="#" name="prod_form" id="myform" method="POST" onsubmit="return validateProd()">
            <div class="ikio_popForm_inner">
              <div class="row">
                <div class="col-md-12">
                  <div class="input_container">
                    <input type="text" name="full_name" class="inputs_field" id="name"
                                            placeholder="First and Last name">
                    <label for="name" class="label__text">Name <span>*</span></label>
                    <div class="error" id="fullname_Err_photo"></div>
                  </div>
                </div>
                <div class="col-md-12">
                  <div class="input_container">
                    <input type="email" name="email" class="inputs_field" id="email"
                                            placeholder="Email Address" >
                    <label for="email" class="label__text">E-mail <span>*</span></label>
                    <div class="error" id="email_Err_photo"></div>
                  </div>
                </div>
                <div class="col-md-12">
                  <div class="input_container">
                    <input type="text" name="mobile_number" class="inputs_field" id="phone"
                                            placeholder="Enter phone number" >
                    <label for="phone" class="label__text">Phone</label>
                    <div class="error" id="contact_Err_photo"></div>
                  </div>
                </div>
                <div class="col-md-12">
                  <div class="input_container" style=" margin-bottom: 1rem;">
                    <textarea name="message" id="textarea" class="inputs_field" style=" margin-bottom: 1rem;" ></textarea>
                    <label for="message" class="label__text" style=" margin-bottom: 1rem;">Inquiry <span>*</span></label>
                    <div class="error" id="message_Err_photo"></div>
                  </div>
                </div>
                <input type="hidden" name="product_name" class="inputs_field" value="<?php echo $record[0]->product_name;?>-<?php echo $record[0]->product_tagline;?>" readonly>
                <div class="col-md-12">
                  <div class="g-recaptcha-outer">
                    <div class="g-recaptcha-inner">
                      <div class="g-recaptcha mywidth" data-sitekey="6LdeA9sZAAAAAMMf90Vhrt93roDVarxA2WudFpvp"></div>
                    </div>
                  </div>
                </div>
                <div class="col-md-12">
                  <button type="submit" name="sbt"
                                        class="btn_black arrow__hover--btn mt_notops">SUBMIT</button>
                </div>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
    <a class="popup-close" data-pd-popup-close="popupNew" href="#"> </a> </div>
</div>
<script>
    $('.inputs_field').on('focusin', function () {
        $(this).parent().find('label').addClass('active_input');
    });

    $('.inputs_field').on('focusout', function () {
        if (!this.value) {
            $(this).parent().find('label').removeClass('active_input');
        }
    })
</script>
<style>

    
</style>
<style>
    #popupNew {
        z-index: 1050 !important;
    }

    .swal-overlay {
        z-index: 20000;
    }    .imges__pdf {
        display: inline-block;
        float: left;
        width: 4%;
    }
</style>
<script>

function printError(elemId, hintMsg) 
{
document.getElementById(elemId).innerHTML = hintMsg;
}
// Defining a function to validate form 
function validateProd() {      
    var fullname = document.prod_form.full_name.value;
    var email = document.prod_form.email.value;
	var contact = document.prod_form.mobile_number.value;
	var message = document.prod_form.message.value;
    var prod_name = document.prod_form.product_name.value;
	// Defining error variables with a default value
    var fullname_Err_photo = email_Err_photo = contact_Err_photo = message_Err_photo = prod_Err_photo = true;    
    if(prod_name == ""){
        printError("prod_Err_photo", "Sorry ! please email us your inqiry at info@ikioledlighting.com ");
    }
    else{
        prod_Err_photo = false;
    }
	// Validate name
	if(fullname == "") {
        printError("fullname_Err_photo", "Please enter your name");
	} 
	else {
        var regex = /^[a-zA-Z\s]{3,50}$/;                
        if(regex.test(fullname) === false) {
            printError("fullname_Err_photo", "Please enter a valid name. Input is too short (min 3) or too big (max 50).");
        } else {
            printError("fullname_Err_photo", "");
            fullname_Err_photo = false;
        }
    }
    if(fullname == "James") {
        printError("fullname_Err_photo", "Please enter your name");
	} 
	else {
        var regex = /^[a-zA-Z\s]{3,50}$/;                
        if(regex.test(fullname) === false) {
            printError("fullname_Err_photo", "Please enter a valid name. Input is too short (min 3) or too big (max 50).");
        } else {
            printError("fullname_Err_photo", "");
            fullname_Err_photo = false;
        }
    }    
    // Validate email address
    if(email == "") {
        printError("email_Err_photo", "Please enter your email address");
    } else {
        // Regular expression for basic email validation
        var regex = /^\S+@\S+\.\S+$/;
        if(regex.test(email) === false) {
            printError("email_Err_photo", "Please enter a valid email address");
        } else{
            printError("email_Err_photo", "");
            email_Err_photo = false;
        }
    }    
  // Validate Phone Number    
	if(contact == "") {
        printError("contact_Err_photo", "Please enter your mobile number");
    } else {
        var regex = /^\(?([0-9]{3})\)?[-. ]?([0-9]{3})[-. ]?([0-9]{4})$/;
        if(regex.test(contact) === false) {
            printError("contact_Err_photo", "Please enter a valid mobile number in the format 0123456789 without spaces,dashes or acess code (+)");
        } else{
            printError("contact_Err_photo", "");
            contact_Err_photo =  false;
        }
    }		 //Validate message	
    if(message == "") {
        printError("message_Err_photo", "Please enter message");
    } else {      
		var regex = /^[\w\W\s]{20,200}$/g;		
        if(regex.test(message) === false) {
            printError("message_Err_photo", "Please enter your message. Input is too short (min 20) or too big (max 200).");
        } else {
            printError("message_Err_photo", "");
            message_Err_photo = false;
        }
    }
    if(message == "Muchas gracias. ?Como puedo iniciar sesion?") {
        printError("message_Err_photo", "this message contains spam text please see and rework on it.");
    } else {      
		var regex = /^[\w\W\s]{20,200}$/g;		
        if(regex.test(message) === false) {
            printError("message_Err_photo", "Please enter your message. Input is too short (min 20) or too big (max 200).");
        } else {
            printError("message_Err_photo", "");
            message_Err_photo = false;
        }
    }   
    
    // Prevent the form from being submitted if there are any errors
    if((fullname_Err_photo || email_Err_photo || contact_Err_photo || message_Err_photo|| prod_Err_photo) == true) {
       return false;
    } else {
        // Creating a string from input data for preview          
            var url = "product/product/user_enquiry"
            $.ajax({
                type: "POST",
                url: "<?php echo base_url();?>" + url,
                success: function(data) {}
            });
    }
};
 </script> 
<script>
$(document).ready(function(){
    $('#mytable').dataTable(
        {
            "autoWidth": false,
       responsive: {
    breakpoints: [
      {name: 'bigdesktop', width: Infinity},
      {name: 'meddesktop', width: 1480},
      {name: 'smalldesktop', width: 1280},
      {name: 'medium', width: 1188},
      {name: 'tabletl', width: 1024},
      {name: 'btwtabllandp', width: 848},
      {name: 'tabletp', width: 768},
      {name: 'mobilel', width: 480},
      {name: 'mobilep', width: 320}
    ]
  },
   "dom": '<"pull-right"l><"pull-right"f>tip',
        search: {
     regex: false,
     smart: false
  },
        "aaSorting": []
    });
});
</script> 
<script>
//Make links in a specific div open in new tab    
$(function(){
  $("#reso a").attr("target","_blank");
});

var el = document.getElementById('reso'); // or some other way of making `el` point to your element
var links = el.getElementsByTagName('a');
for( var i = 0; i < links.length; i++ )
{
  links.target = '_blank';
}
      function onClick(e) {
        e.preventDefault();
        grecaptcha.ready(function() {
          grecaptcha.execute('6LdeA9sZAAAAAE1I-45BiiWDAOppotir63tJgw', {action: 'submit'}).then(function(token) {
             if(!(validateProd)){
                 return false;
             }
          });
        });
      }
  </script> 
  <style>
      .dataTables_paginate{
          display:none !important;
      }
  </style>