<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="robots" content="noindex">
    <meta name="googlebot" content="noindex">
    <title>DNA</title>

    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<style>
    @media (min-width: 991px) {
        ::-webkit-scrollbar {
            width: 10px;
            height: 10px;
            padding-bottom: 15px;
        }

        ::-webkit-scrollbar-track {
            padding-bottom: 15px;
            background: #cacaca;
            box-shadow: inset 0px 0px 2px 0px #8a8989;
        }

        ::-webkit-scrollbar-thumb {
            background: #747474;
            padding-bottom: 15px;
        }

        ::-webkit-scrollbar-thumb:hover {
            background: #444;
            padding-bottom: 15px;
        }
    }
    * {margin: 0;padding: 0;box-sizing: border-box;}
    header, section, footer, aside, nav, main, article, figure {display: block;}
    html {scroll-behavior: smooth;}

    body {
        font-family:'Poppins',sans-serif;
        font-size: 13px;
        line-height: 1.42857143;
        color: #333;
        background-color: #fff;
        margin-top: 5px;
    }

:root {
  --color-primary: #444;
}

.border-red {
    border: 1px solid red;
}
</style>
<script defer>
  const base_url = '<?= base_url(); ?>';
  const APIURL = '<?= 'https://belgiumdia.com/m_api/jewelry' ?>';
  const segment1 = '<?= $this->uri->segment("1"); ?>';
  const segment2 = '<?= $this->uri->segment("2"); ?>';
  const segment3 = '<?= $this->uri->segment("3"); ?>';
</script>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.css" />
<link rel="stylesheet" href="<?= fileWithVersion('assets/css/jewelry/combined.css'); ?>">
<style>
.detail-filter-box {
    margin: 10px 0;
    border-top: 1px solid #eee;
    padding-top: 10px;
}
.filter_header {
    color: #262626;
    font-size: 14px;
}
.row.filter {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    margin: 5px 0 12px 0;
    overflow: auto;
    padding-bottom: 5px;
}

.row.filter.button {
    margin: 20px 0;
}

.item {
    display: inline-flex;
    flex-direction: column;
    align-content: center;
    justify-content: center;
    align-items: center;
    width: max-content;
    /*border: 1px solid #fff;
    border-radius: 5px;*/
    margin-right: 5px;
    padding: 5px;
    text-align: center;
    height: auto;
    width: 85px;
    /* min-width: 100px; */
    position: relative;
    transition: all 0.2s ease-in-out;
}
/*.item:hover {
  border-color: #ddd;
}*/
.item.active .img {
  border-radius: 5px;
  border: 1px solid var(--color-primary);
}
/*.item.active:hover {
  border-color: var(--color-primary);
}*/
.item > input[type="radio"] {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}
.img {
  border: 1px solid #fff;
  padding: 5px;
  margin-bottom: 5px;
  transition: all 0.2s ease-in-out;
}
.img > img {
    width: 40px;
    height: auto;
}
.item_label {
    font-size: 12px;
    line-height: 1.2;
}
.item_label.quality {
    font-size: 22px;
    padding: 20px 0;
    color: #999999;
}
.item_label.size {
    border: 2px solid #fff;
    border-radius: 5px;
    height: 42px;
    width: 42px;
    padding: 12px 0;
    font-size: 14px;
    color: #222222;
    background: #f1f1f1;
    transition: all 0.2s ease-in-out;
}
.item.active .item_label.size {
  border: 2px solid var(--color-primary);
}
div#img_div {
    text-align: center;
    width: 90%;
}
div#img_div > img {
    display: inline-block;
    width: 100%;
    height: auto;
}
div#img_div > p {
    font-size: 16px;
    color: #03637d;
    font-weight: 600;
}

.btn-back-round {
    border-radius: 50%;
    height: 40px;
    width: 40px;
    background-color: #034d7f;
    color: #fff;
}
.btn-block+.btn-block {
    margin-top: 0; 
}

</style>

</head>
<body>    
<?php error_reporting(0); ?>


<div class="container custom-container-list">

<textarea  id="short-link-text" style="position: absolute; left: -1000px; top: -1000px"></textarea>

<section id="detail_section" class="full-page padding-top-100">
    <!-- <div class="dashboard-heading">
      <div class="container">
        <h1><?php echo $page_head; ?></h1>
      </div>
    </div> -->


    <div class="container custom-container-list">
        <div class="row">
            <div class="col-md-12 menu_block bg-top">
                <div class="remark" style="margin-bottom: 50px">           
                </div>
            </div>
        </div>

      <div id="detail-body">

        <?php  $row = $record[0]; ?>
        <div class="flex-body">       
            <div class="flex-media" id="flex-media">         
                <div class="sticky-media">
                    <div class="mySwiperThumb" >
                        <button type="button" id="scroll-left-btn"> <i class="fa fa-chevron-up"></i> </button>
                        <button type="button" id="scroll-right-btn"> <i class="fa fa-chevron-down"></i> </button> 
                        <div thumbsSlider="" class="swiper mySwiper" id="mySwiperScroll">            
                            <div class="swiper-wrapper" scrollbar="true">

                            </div> 
                        </div> 
                    </div> 
                    <div style="--swiper-navigation-color: #fff; --swiper-pagination-color: #fff" class="swiper mySwiper2">
                        <div class="swiper-wrapper">

                        </div>
                        <div class="swiper-button-next"></div> 
                        <div class="swiper-button-prev"></div>
                    </div>
                </div>  
                <div class="image-helper">Double Click on Image to Zoom</div>     
                <!-- <div class="text-center"><div class="skeleton image" ></div></div> -->
            </div>   
            <div class="flex-detail">

            <h1 class="remarks"><span id="remarks"><?= $row['remarks']; ?> </span></h1>

            <p class="sku">SKU#: <?= $row['item']; ?> <span class="small">(w/o center stone)</span></p>
            <h3 class="price">Price: $ <span id="price"><?= round($row['selling_price']); ?></span></h3>
                
            <div class="detail-filter-box">
                <form action="javascript:void(0)" method="post" id="custom_form">
                <input type="hidden" name="pro_id" id="pro_id" value="<?= $row['pro_id']; ?>">                        

                <div class="filter_header">Diamond Shape <span class="small">(Center Stone)</span></div>
                <div class="row filter">
                    <?php foreach($diaShape as $key => $val): ?>
                      <div class="item <?= ($val['is_active']) ? 'active' : '' ?>">

                        <input type="radio" name="dia_shape" value="<?= $val['value'] ?>" <?= ($val['is_active']) ? 'checked' : '' ?> >

                        <div class="img">
                          <img src="<?= base_url(); ?>assets/images/shape/<?= strtolower($val['value']); ?>.png">
                        </div>
                        <div class="item_label"><?= $val['name'] ?></div>
                      </div>
                    <?php endforeach ?>
                </div>

                <div class="filter_header">Diamond Quality <span class="small">(Side Stone)</span></div>
                <div class="row filter">
                    <?php foreach($diaQuality as $key => $val): ?>
                      <div class="item <?= ($val['is_active']) ? 'active' : '' ?>">

                        <input type="radio" name="dia_quality" value="<?= $val['value'] ?>" <?= ($val['is_active']) ? 'checked' : '' ?> >

                        <div class="img">
                          <img src="<?= base_url(); ?>assets/images/shape/<?= strtolower($row['center_stone_shape']); ?>.png">
                        </div>
                        <div class="item_label"><?= $val['name'] ?></div>
                      </div>
                    <?php endforeach ?>
                </div>

                <div class="filter_header">Approx Ct Wt and sizes <span class="small">(Center Stone)</span></div>
                <div class="row filter">
                    <?php foreach($ctWeight as $key => $val): ?>
                        <div class="item <?= ($val['is_active']) ? 'active' : '' ?>">

                          <input type="radio" name="ct_weight" value="<?= $val['value'] ?>" data-value="<?= $val['name'] ?>" <?= ($val['is_active']) ? 'checked' : '' ?> >

                          <div class="img">
                            <img src="<?= base_url(); ?>assets/images/shape/<?= strtolower($row['center_stone_shape']); ?>.png">
                          </div>
                          <div class="item_label"><?= $val['name'] ?></div>
                        </div>
                    <?php endforeach ?>
                </div>
                
                <div class="filter_header">Metal Type</div>
                <div class="row filter">
                    <?php foreach($metal as $key => $val): ?>
                        <div class="item <?= ($val['is_active']) ? 'active' : '' ?>">

                          <input type="radio" name="metal" value="<?= $val['value'] ?>" <?= ($val['is_active']) ? 'checked' : '' ?> >

                          <div class="img">
                            <img src="<?= base_url() ?>assets/images/jewelry/filter/<?= $val['img'] ?>">
                          </div>
                          <div class="item_label"><?= $val['name'] ?></div>
                        </div>
                    <?php endforeach ?>
                </div>

                <?php if (!empty($ringSize)): ?>                  
                <div class="filter_header">Ring Size</div>
                <div class="row filter">
                    <select name="ring_size" id="ring_size" class="form-control">
                    <?php foreach($ringSize as $key => $val): ?>    
                        <option <?= ($val['is_active']) ? 'selected' : '' ?> value="<?= $val['value'] ?>"><?= $val['name'] ?></option>
                    <?php endforeach ?>
                    </select>              
                </div>
                    <?php /* ?><div class="item <?= ($val['is_active']) ? 'active' : '' ?>">
                      <input type="radio" name="ring_size" value="<?= $val['value'] ?>" <?= ($val['is_active']) ? 'checked' : '' ?>>
                      <div class="item_label size"><?= $val['name'] ?></div>
                    </div>  <?php */ ?>
                <?php endif ?>

                <div class="row filter button"> 
                    <button type="button" class="btn btn-block btn-toggle-red" onclick="emailUs()">Email</button>

                </div>

                </form>
            </div>

            <div class="title-heading">Product Details</div>
            <div id="pro-detail">
              
            <?php foreach($varDetail as $key => $val): ?>
              <?php if($row[$val['column']]): ?> 
                <div class="col-detail">      
                    <div class="key"><?= $val['name'] ?>:</div> 
                    <div class="value">
                        <?= ($val['column'] == 'section') ? $row['jew_type']. ' ' : '' ?>
                        <?= ($val['column'] == 'metal_type') ? str_replace('K', '', $row['metal_type']) : $row[$val['column']] ?>                        
                    </div> 
                </div>
              <?php endif ?>
            <?php endforeach ?>    
            </div> 

            </div>  
            </div> 

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

<div id="email_modal" class="modal fade" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Send Email</h4>
      </div>
      <div class="modal-body">
        <form action="javascript:void(0)" id="email_form">
          <!-- <div class="form-group">
            <label for="email">Name:</label>
            <input type="text" class="form-control" id="name" name="name">
          </div> -->
          <div class="form-group">
            <label for="email">Email address: *</label>
            <input type="text" class="form-control" id="email" name="email" required>
          </div>
          <div class="form-group">
            <label for="email">Inscription wanted:</label>
            <input type="text" class="form-control" id="inscription" name="inscription">
          </div>
          <div class="form-group">
            <label for="email">Special remarks:</label>
            <textarea class="form-control" id="user_remarks" name="user_remarks"></textarea>
          </div>
          <div class="form-group">
              <button type="button" data-dismiss="modal" class="btn btn-reset">Cancel</button>
              <button type="button" class="btn btn-toggle-red" onclick="emailUsSubmit()">Send</button>
          </div>
        </form>

      </div>
      <div class="modal-footer">
        
      </div>
    </div>

  </div>
</div>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script src="<?= fileWithVersion('assets/js/jewelry/jewelry_details.js'); ?>"></script>
<script src="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.js"></script>

<script>
const varDetail = <?= json_encode($varDetail); ?>;
const varMetalColor = '<?= $row['metal_color']; ?>';

$(document).ready(function(){

  $(":radio").click(function() {
    var name = $(this).attr('name');

    const list = document.getElementsByName(name);
    list.forEach(function(currentValue) {
      currentValue.closest(".item").classList.remove('active');
    })
    $(this).closest(".item").toggleClass("active"); 

    if (['dia_quality', 'ct_weight', 'metal'].includes(name)) {
        jewelryVariation(name);
    }

  });
});
</script>

</div>

</body>
</html>