<meta name="viewport" content="width=device-width,initial-scale=1">
<style>
   h1.main-page-title.page-title.h0.scroll-trigger.animate--fade-in {
   display: none;
   }
  .hidden { display: none; }
  .block { display: block; }
  .flex { display: flex !important; }
</style>
<link rel="stylesheet" href="<?php echo e(asset('public/assets/diamond.css')); ?>">
<!-- <script src="https://code.jquery.com/jquery-3.6.0.min.js" defer="defer"></script> -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js" defer="defer"></script>
<link href="https://cdn.datatables.net/v/bs-3.3.7/jszip-3.10.1/dt-1.13.6/af-2.6.0/b-2.4.2/b-colvis-2.4.2/b-html5-2.4.2/b-print-2.4.2/cr-1.7.0/date-1.5.1/fc-4.3.0/fh-3.4.0/kt-2.10.0/r-2.5.0/rg-1.4.0/sc-2.2.0/sb-1.5.0/sp-2.2.0/sl-1.7.0/sr-1.3.0/datatables.min.css"
   rel="stylesheet"
   >
<script src="https://kit.fontawesome.com/d5b36ed05d.js" defer="defer" crossorigin="anonymous"></script>
<link rel="stylesheet" href="<?php echo e(asset('public/assets/style.css')); ?>">
<link rel="stylesheet" href="<?php echo e(asset('public/assets/ion.rangeSlider.css')); ?>">
<link rel="stylesheet" href="<?php echo e(asset('public/assets/ion.rangeSlider.skinNice.css')); ?>">
<script src="<?php echo e(asset('public/assets/ion.rangeSlider.js')); ?>" defer="defer"></script>
<script src="<?php echo e(asset('public/assets/bootstrap.min.js')); ?>" defer="defer"></script>
<script src="<?php echo e(asset('public/assets/jquery.dataTables.min.js')); ?>" defer="defer"></script>
<script src="<?php echo e(asset('public/assets/manage_diamond.js')); ?>" defer="defer"></script>
<script src="<?php echo e(asset('public/assets/manage_diamond_ajax.js')); ?>" defer="defer"></script>
<script src="<?php echo e(asset('public/assets/diamond_page.js')); ?>" defer="defer"></script>
<style>
   .main-page-title .page-header .scroll-trigger .animate--slide-in {
      display: none;
   }
   /* Loader overlay */
   #page-loader {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-color: rgba(255, 255, 255, 0.8); /* semi-transparent background */
   display: none; /* Hidden initially */
   z-index: 9999;
   }
   /* Spinner styling */
   .loader {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   width: 40px;
   height: 40px;
   border: 5px solid #ccc;
   border-top: 5px solid #007bff;
   border-radius: 50%;
   animation: spin 1s linear infinite;
   }
   @keyframes  spin {
   0% { transform: rotate(0deg); }
   100% { transform: rotate(360deg); }
   }



/* Popup styles */
#Popup {
  position: fixed;
  bottom: 0; /* Hidden initially */
  left: 0;
  width: 100%;
  height: 0; /* Fullscreen for popup */
  background: white;
  z-index: 1000;
  transition: bottom 0.3s ease-in-out;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
  overflow-y: auto; /* Allow scrolling inside popup */
      border-top-left-radius: 30px;
    border-top-right-radius: 30px;
    border: 1px solid #183177;
}

/* Popup content container */
.Container {
  padding: 20px;
  text-align: center;
}

/* Close button styling */
.close-btn {
    position: absolute;
    top: 10px;
    /* left: 10px; */
    font-size: 26px;
    font-weight: bold;
    cursor: pointer;
    right: 20px;
    color: #000 !important;
    z-index: 9999;
  display: none;
}
#search_div{
            display:block;
          }
/* @media (max-width: 767px) {
          #search_div{
            display:none;
          }
      }

  @media (min-width: 768px) {
          #search_div{
            display:block;
          }
  } */




/* 08-11-24 */


div#footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    text-align: center;
    /* padding: 10px; */
    background: white;
    border: 1px solid #183177;
    z-index: 1;
}
div#footer span#FooterLink {
    font-size: 18px;
    color: #183177;
    text-transform: uppercase;
    font-weight: 600;
  display: block;
    padding: 10px;
  display: none;
}
@media(max-width:768px){
  .close-btn {
    display: block;
  }
  div#footer span#FooterLink {
  display: block;
}
  section#search_div .custom-container{
    display:none;
  }
section#search_div .custom-container.open {
    display: block;
    position: fixed;
    overflow-y: scroll;
    height: 66%;
    width: 100%;
    /* top: 0; */
    z-index: 999;
    padding: 25px;
    left: 0;
    background-color: #fff;
    bottom: 0;
    margin: 0;
    /* top: 0; */
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
    /* border: 1px solid #183177; */
}

         
}
</style>
<div id="page-loader" class="loader-overlay">
   <div class="loader"></div>
</div>
<!-- datatable end -->

<div class="step-list-row hidden" id="step_list" >
  <div class="jss30">Create Your Ring</div>
  <div class="stp-list" id="choose-ring">
    <span class="step-content">
      <span class="step-num">1</span>
      <span id="selected-variant-container" class="step-title"
        ><a href="https://www.caratperfect.com/collections/engagement-rings">CHOOSE A SETTING </a>
        <span>
          <p id="product-title"></p>
          <p id="variant-price"></p>
        </span>
      </span>
      <span class="step-ring-img"><img src="<?php echo e('jwel.png' | asset_url); ?>"> </span>
      <span class="arrow"></span>
    </span>
  </div>
  <div class="stp-list" id="choose-diamond">
    <span class="step-content">
      <span class="step-num">2</span>
      <span id="selected-diamond-container" class="step-title"
        ><a href="https://caratperfect.com/pages/diamond-product"
          >CHOOSE A <span class="stp-sub-title">DIAMOND</span></a
        >
        <p id="product-title"></p>
        <p id="variant-price"></p>
      </span>
      <span class="step-ring-img"><img src="<?php echo e('ring_part2.png' | asset_url); ?>"></span>
      <span class="arrow"></span>
    </span>
  </div>
  <div class="stp-list" id="complete-setting">
    <span class="step-content">
      <span class="step-num">3</span>
      <span class="step-title"
        ><a href="https://www.caratperfect.com/pages/complete-setting"
          >REVIEW <span class="stp-sub-title">COMPLETE RING</span></a
        ></span>
      <span class="step-ring-img"><img src="<?php echo e('ring_part3.png' | asset_url); ?>"></span>
      <span class="arrow"></span>
    </span>
  </div>
</div>



<section class="" id="search_div" style="">
   <div class="custom-container">
   <span id="close" class="close-btn">&times;</span> <!-- Close Button -->
      <form action="javascript:void(0)" method="post" id="form">
         <div class="filter">
            <div class="row mx-0">
               <!-- <div class="col-sm-12 col-md-12 col-lg-12 col-12" id="mined_or_grown">
                  <ul class="brand-list diamond_type text-center">
                     <li class="c-label lab_grown active">
                        <div class="box-svg" >
                           <input type="checkbox" class="diamond_check" name="diamond[]" id="lab_grown" value="Lab Grown">
                           <input type="hidden" name="per_page"  id="per_page" value="50" onchange="submitForm()">
                           <input type="hidden" name="sort_id" id="sort_id" value="">
                           <input type="hidden" name="sort_type" id="sort_type" value="">
                           <script>
                              const url = new URL(window.location.href);
                              
                              const stockId = url.searchParams.get('stock_id');
                              
                              document.getElementById('stock_id').value = stockId;
                              
                              document.getElementById('stock_id').setAttribute('fullUrl', url);
                              
                           </script>
                           <p class="border-box">Lab Grown Diamonds</p>
                        </div>
                     </li>
                  </ul>
                  <input id="diamond_type" name="diamond_type" type="text" value="1" style="display:none">
               </div> -->



               <div class="col-lg-12 col-sm-12 col-md-12 col-12 px-0">
                  <div class="search_filter_cut tps_filter row padding-tb">
                     <div class="col-sm-12 col-md-12 col-lg-12 col-12 filter-range-col">
                        <div class="label_div">
                          <label class="tx-center">Shape</label>
                        </div>
                        <div class="tps_inputrange_shape">
                           <ul class="tps_diamond_shapes shapes-display" id="tps_diamond_shapes">
                           <li class="idshaperound ">

                                 <label for="idshaperound">
                                 <input type="checkbox" name="checkbox[]" id="idshaperound" value="Round">
                                    <a title="Round" class="">
                                       <div class="text_shape">Round</div>
                                       <div class="img_shape round">
                                          <img src="<?php echo e(asset('public/assets/round.svg')); ?>"
                                             class="whit-img img-fluid width_new"
                                             >
                                       </div>
                                    </a>
                                 </label>
                              </li>
                              <li  class="idshapeprinces">
                                 <label for="idshapeprinces">
                                    <input type="checkbox" name="checkbox[]" id="idshapeprinces" value="PRINCESS">
                                    <a title="Princess">
                                       <div class="text_shape">Princess</div>
                                       <div class="img_shape princess">
                                          <img
                                             src="<?php echo e(asset('public/assets/princess.svg')); ?>"
                                             class="whit-img img-fluid width_new"
                                             >
                                       </div>
                                    </a>
                                 </label>
                              </li>
                              <li  class="idshapecushion">
                                 <label for="idshapecushion">
                                    <input type="checkbox" name="checkbox[]" id="idshapecushion" value="CUSHION">
                                    <a title="Cushion">
                                       <div class="text_shape">Cushion</div>
                                       <div class="img_shape cushion">
                                          <img
                                             src="<?php echo e(asset('public/assets/cushion.svg')); ?>"
                                             class="whit-img img-fluid width_new"
                                             >
                                       </div>
                                    </a>
                                 </label>
                              </li>
                              <li  class="idshapeemerald">
                                 <label for="idshapeemerald">
                                    <input type="checkbox" name="checkbox[]" id="idshapeemerald" value="EMERALD">
                                    <a title="Emerald">
                                       <div class="text_shape">Emerald</div>
                                       <div class="img_shape emerald">
                                          <img
                                             src="<?php echo e(asset('public/assets/emerald.svg')); ?>"
                                             class="whit-img img-fluid width_new"
                                             >
                                       </div>
                                    </a>
                                 </label>
                              </li>
                              <li  class="idshapeoval">
                                 <label for="idshapeoval">
                                    <input type="checkbox" name="checkbox[]" id="idshapeoval" value="OVAL">
                                    <a title="Oval">
                                       <div class="text_shape">Oval</div>
                                       <div class="img_shape oval">
                                          <img
                                             src="<?php echo e(asset('public/assets/oval.svg')); ?>"
                                             class="whit-img img-fluid width_new"
                                             >
                                       </div>
                                    </a>
                                 </label>
                              </li>
                              <li  class="idshaperadiant">
                                 <label for="idshaperadiant">
                                    <input type="checkbox" name="checkbox[]" id="idshaperadiant" value="RADIANT">
                                    <a title="Radiant">
                                       <div class="img_shape radiant">
                                          <img
                                             src="<?php echo e(asset('public/assets/radiant.svg')); ?>"
                                             class="whit-img img-fluid width_new"
                                             >
                                       </div>
                                       <div class="text_shape text-shape-2">Radiant</div>
                                    </a>
                                 </label>
                              </li>
                              <li class="idshapeasscher">
                                 <label for="idshapeasscher">
                                    <input type="checkbox" name="checkbox[]" id="idshapeasscher" value="ASSCHER">
                                    <a title="Asscher">
                                       <div class="img_shape asscher">
                                          <img
                                             src="<?php echo e(asset('public/assets/asscher.svg')); ?>"
                                             class="whit-img img-fluid width_new"
                                             >
                                       </div>
                                       <div class="text_shape text-shape-2">Asscher</div>
                                    </a>
                                 </label>
                              </li>
                              <li class="idshapemarquise">
                                 <label for="idshapemarquise">
                                    <input type="checkbox" name="checkbox[]" id="idshapemarquise" value="MARQUISE">
                                    <a title="Marquise">
                                       <div class="img_shape marquies">
                                          <img
                                             src="<?php echo e(asset('public/assets/marquise.svg')); ?>"
                                             class="whit-img img-fluid width_new"
                                             >
                                       </div>
                                       <div class="text_shape text-shape-2">Marquise</div>
                                    </a>
                                 </label>
                              </li>
                              <li class="idshapeheart">
                                 <label for="idshapeheart">
                                    <input type="checkbox" name="checkbox[]" id="idshapeheart" value="HEART">
                                    <a title="Heart">
                                       <div class="img_shape heart">
                                          <img src="<?php echo e(asset('public/assets/heart.svg')); ?>" class="whit-img img-fluid width_new">
                                       </div>
                                       <div class="text_shape text-shape-2">Heart</div>
                                    </a>
                                 </label>
                              </li>
                              <li class="idshapepear">
                                 <label for="idshapepear">
                                    <input type="checkbox" name="checkbox[]" id="idshapepear" value="PEAR">
                                    <a title="Pear">
                                       <div class="img_shape pear">
                                          <img src="<?php echo e(asset('public/assets/pear.svg')); ?>" class="whit-img img-fluid width_new" >
                                       </div>
                                       <div class="text_shape text-shape-2">Pear</div>
                                    </a>
                                 </label>
                              </li>
                              <li class="idshapeelongated">
                                 <label for="idshapeelongated">
                                    <input type="checkbox" name="checkbox[]" id="idshapeelongated" value="Elongated Cushion">
                                    <a title="Elongated Cushion">
                                       <div class="img_shape pear">
                                          <img src="<?php echo e(asset('public/assets/elongated.png')); ?>" class="whit-img img-fluid width_new" >
                                       </div>
                                       <div class="text_shape text-shape-2">Elongated cushion</div>
                                    </a>
                                 </label>
                              </li>
                              <li class="idshapeminecut">
                                 <label for="idshapeminecut">
                                    <input type="checkbox" name="checkbox[]" id="idshapeminecut" value="Old Mine Cut">
                                    <a title="Old Mine Cut">
                                       <div class="img_shape pear">
                                          <img src="<?php echo e(asset('public/assets/mine.png')); ?>" class="whit-img img-fluid width_new" >
                                       </div>
                                       <div class="text_shape text-shape-2">Old Mine Cut</div>
                                    </a>
                                 </label>
                              </li>
                              <li class="idshapeeuro">
                                 <label for="idshapeeuro">
                                    <input type="checkbox" name="checkbox[]" id="idshapeeuro" value="Old Euro Cut">
                                    <a title="Old Euro Cut">
                                       <div class="img_shape pear">
                                          <img src="<?php echo e(asset('public/assets/euro.png')); ?>" class="whit-img img-fluid width_new" >
                                       </div>
                                       <div class="text_shape text-shape-2">Old Euro Cut</div>
                                    </a>
                                 </label>
                              </li>
                           </ul>
                        </div>
                     </div>
                  </div>                     
                </div>
                  <div class="search_filter_cut tps_filter row padding-tb ">
                      <div class="col-sm-12 col-md-6 col-lg-4 col-12 pt-4 custom_colum_width px-4">
                        <div class="label_div">
                           <label class="tx-center">Color</label>
                        </div>
                        <div class="d-center">
                           <div class="range_group diamond-range-slider">
                              <input type="text" id="range_color" value="" name="color">
                           </div>
                        </div>
                     </div>
                     <div class="col-sm-12 col-md-6 col-lg-4 col-12 pt-4 custom_colum_width px-4">
                        <div class="label_div">
                          <label class="tx-center">Cut</label>
                        </div>
                        <div class="d-center">
                           <div class="range_group diamond-range-slider">
                              <input type="text" id="range_51a" value="" name="cut">
                           </div>
                        </div>
                     </div>
                     <div class="col-sm-12 col-md-6 col-lg-4 col-12 pt-4 custom_colum_width px-4">
                        <div class="label_div">
                          <label class="tx-center">Clarity</label>
                        </div>
                        <div class="d-center">
                           <div class="range_group diamond-range-slider">
                              <input type="text" id="range_50" value="" name="clarity">
                           </div>
                        </div>
                     </div>
                     <div class="col-sm-12 col-md-6 col-lg-6 col-12  pt-4 custom_colum_width px-4">
                        <div class="label_div">
                          <label class="tx-center">Carat</label>
                        </div>
                        <div class="d-center">
                           <div class="range_group diamond-range-slider">
                              <input type="text" id="range_56" value="" name="carat">
                              <div class="slider-input d-flex">
                                 <input
                                    type="text"
                                    id="range_56_input_from"
                                    name="carat_from"
                                    onkeyup="setSliderFromTo1()"
                                    class=" pull-left text-design"
                                    >
                                 <input
                                    type="text"
                                    id="range_56_input_to"
                                    name="carat_to"
                                    onkeyup="setSliderFromTo1()"
                                    class="pull-right text-design"
                                    >
                              </div>
                           </div>
                        </div>
                     </div>
                     <div class="col-sm-12 col-md-6 col-lg-6 col-12  pt-4 custom_colum_width px-4">
                        <div class="label_div">
                          <label class="tx-center">Price</label>
                        </div>
                        <div class="d-center">
                           <div class="range_group diamond-range-slider">
                              <input type="text" id="price_slider" value="" name="price">
                              <div class="slider-input d-flex">
                                 <input
                                    type="text"
                                    id="price_from"
                                    name="price_from"
                                    onkeyup="setSliderFromTo()"
                                    class=" pull-left text-design"
                                    >
                                 <input
                                    type="text"
                                    id="price_to"
                                    name="price_to"
                                    onkeyup="setSliderFromTo()"
                                    class="pull-right text-design"
                                    >
                              </div>
                           </div>
                        </div>
                     </div>
                  <!-- <div class="col-sm-12 col-md-6 col-lg-6 col-12 filter-range-col">
                     <div class="label_div">
                         <div class="range-name">Clarity</div>
                       </div>
                       <div class="d-center">
                         <div class="range_group diamond-range-slider">
                           <input type="text" id="range_50" value="" name="clarity">
                         </div>
                       </div>
                     </div>
                     </div> -->
                  
                  <div id="more_filter" style="display: none;">
                     <div class="search_filter_cut tps_filter row ">

                     <div class="col-sm-12 col-md-6 col-lg-6 col-12  pt-5 custom_colum_width px-4">
                     <div class="label_div">
                        <label class="tx-center">Lab</label>
                     </div>
                     <div class="tps_inputrange_shape">
                        <ul class="tps_diamond_shapes shapes-display report-lab" id="tps_diamond_shapes">
                           <li class="idshaperound">
                              <label for="idigi">
                                 <input type="checkbox" name="lab[]" id="idigi" value="IGI">
                                 <a title="IGI" class="">
                                    <div class="text_shape">IGI</div>
                                    <div class="img_shape round">
                                       IGI
                                    </div>
                                 </a>
                              </label>
                           </li>
                           <li>
                              <label for="idgia">
                                 <input type="checkbox" name="lab[]" id="idgia" value="GIA">
                                 <a title="GIA">
                                    <div class="text_shape">GIA</div>
                                    <div class="img_shape princess">
                                       GIA
                                    </div>
                                 </a>
                              </label>
                           </li>
                           <li>
                              <label for="idgcal">
                                 <input type="checkbox" name="lab[]" id="idgcal" value="GCAL">
                                 <a title="GCAL">
                                    <div class="text_shape">GCAL</div>
                                    <div class="img_shape cushion">
                                       GCAL
                                    </div>
                                 </a>
                              </label>
                           </li>
                           <li>
                              <label for="idags">
                                 <input type="checkbox" name="lab[]" id="idags" value="AGS">
                                 <a title="AGS">
                                    <div class="text_shape">AGS</div>
                                    <div class="img_shape emerald">
                                       AGS
                                    </div>
                                 </a>
                              </label>
                           </li>
                           <li>
                              <label for="idgsi">
                                 <input type="checkbox" name="lab[]" id="idgsi" value="GSI">
                                 <a title="GSI">
                                    <div class="text_shape">GSI</div>
                                    <div class="img_shape oval">
                                       GSI
                                    </div>
                                 </a>
                              </label>
                           </li>
                           <li>
                              <label for="idiidgr">
                                 <input type="checkbox" name="lab[]" id="idiidgr" value="IIDGR">
                                 <a title="IIDGR">
                                    <div class="text_shape">IIDGR</div>
                                    <div class="img_shape oval">
                                       IIDGR
                                    </div>
                                 </a>
                              </label>
                           </li>
                           <li>
                              <label for="ideglusa">
                                 <input type="checkbox" name="lab[]" id="ideglusa" value="EGLUSA">
                                 <a title="EGLUSA">
                                    <div class="text_shape">EGLUSA</div>
                                    <div class="img_shape oval">
                                       EGLUSA
                                    </div>
                                 </a>
                              </label>
                           </li>
                           <li>
                              <label for="iduncertified">
                                 <input type="checkbox" name="lab[]" id="iduncertified" value="Uncertified">
                                 <a title="Uncertified">
                                    <div class="text_shape">Uncertified</div>
                                    <div class="img_shape oval">
                                       Uncertified
                                    </div>
                                 </a>
                              </label>
                           </li>
                        </ul>
                     </div>
                  </div>
                     
                       <!-- <div class="col-sm-12 col-md-4 col-lg-4 col-12 pt-4">
                     
                         <div class="display-flex  row new_add" style="flex-direction:row;">
                     
                           <div class="label_div">
                     
                     
                             <div class="range-name">Fluorescence</div>
                     
                           </div>
                     
                           <div class="d-center">
                     
                             <div class="range_group diamond-range-slider">
                     
                               <input type="text" id="range_fluor" value="" name="range_fluor">
                     
                             </div>
                     
                           </div>
                     
                         </div>
                     
                       </div>
                     
                       <div class="col-sm-12 col-md-4 col-lg-4 col-12 pt-4 ">
                     
                         <div class="display-flex row new_add" style="flex-direction:row;">
                     
                           <div class="label_div">
                     
                     
                             <div class="range-name">Polish</div>
                     
                           </div>
                     
                           <div class="d-center">
                     
                             <div class="range_group diamond-range-slider">
                     
                               <input type="text" id="range_51ab" value="" name="polish">
                     
                             </div>
                     
                           </div>
                     
                         </div>
                     
                       </div>
                     
                       <div class="col-sm-12 col-md-4 col-lg-4 col-12 pt-4 ">
                     
                         <div class="display-flex row new_add" style="flex-direction:column;">
                     
                           <div class="label_div"> 
                     
                             <div class="range-name">Symmetry</div>
                     
                           </div>
                     
                           <div class="d-center">
                     
                             <div class="range_group diamond-range-slider">
                     
                               <input type="text" id="range_sys" value="" name="range_sys">
                     
                             </div>
                     
                           </div>
                     
                         </div>
                     
                       </div> -->
                     
                     </div>
                     
                     </div>
               </div>
            </div>
         </div>
         <!-- <div class="search-btn">
            <div class="col-sm-3 col-md-3 col-lg-2 col-xs-4 grid-list">
               <i class="fa fa-list" title="List View" data-toggle="tooltip">
               <input type="checkbox" name="view_as[]" class="view_as" value="list" id="view_as_list">
               </i>         
               <i class="fa fa-th" title="Image View" data-toggle="tooltip">
               <input type="checkbox" name="view_as[]" class="view_as" value="grid" id="view_as_grid">
               </i>         
            </div>
            <button class="btn btn-info-reset" type="button" onclick="location.reload()">
            <i class="fa fa-undo"></i>
            Reset Filter
            </button>
         </div> -->

         <div class="d-flex flex-direction-btn">
          <div class="search-btn">
            <button class="btn btn-info-reset" type="button" onclick="location.reload()">
              <i class="fa fa-undo"></i>
              Reset
            </button>
            <button class="btn search_btn search-btn" type="button">
              <div class="hide_show">
                <a href="javascript:void(0)" class="">
                  <span id="show_advance" class="" onclick="show_search()">
                    <i class="plus-toggle fa fa-plus"></i> Show Advance Filter</span
                  >
                </a>
              </div>
            </button>
          </div>
          <div class="col-sm-3 col-md-3 col-lg-2 col-xs-4 grid-list">
               <i class="fa fa-list" title="List View" data-toggle="tooltip">
               <input type="checkbox" name="view_as[]" class="view_as" value="list" id="view_as_list">
               </i>         
               <i class="fa fa-th" title="Image View" data-toggle="tooltip">
               <input type="checkbox" name="view_as[]" class="view_as" value="grid" id="view_as_grid">
               </i>         
            </div>
        </div>
      </form>
   </div>
</section>
<div id="footer-container">
  <div id="Popup">
    <div class="Container" id="filter_div">
      
      <div id="tmp">
        <span id="close">X</span>
      </div>
    </div>
    </div>
    <div id="footer">
      <span id="FooterLink">Filters</span>
    </div>
</div>

  <script>
    document.addEventListener("DOMContentLoaded", function () {
        // URL se query parameter get karein
        const urlParams = new URLSearchParams(window.location.search);
        const shapes = urlParams.get('Shape'); // 'Shape' parameter ki value lein

        if (shapes) {
            // Us value ke checkbox ko find karein aur check kar dein
            const checkbox = document.querySelector(`input[name="Shape"][value="${shapes}"]`);
            if (checkbox) {
                checkbox.checked = true;
            }
        }
    });
</script>
<div class="containter container_table table-responsive">
<div id="list_diamond">
   <div class="table-responsive">
      <table id="example" class=" table-bordered table-responsive table-hover table-condensed js-basic-example1 dataTable"
         style="width:100%;">
         <thead class="">
            <tr class="bg_color" style="color:#000; background:#1c4362;">
               <th class="sorting">View</th>
               <th class="sorting">Shapes</th>
               <th class="sorting">Cts</th>
               <th class="sorting">Color</th>
               <th class="sorting">Clarity</th>
               <th class="sorting">Cut</th>
               <th class="sorting">Amount</th>
               <th class="sorting">Lab</th>
               <th class="sorting">Action</th>
               <th class="sorting">Cart</th>
            </tr>
         </thead>
         <tbody id="add_data" style=""></tbody>
      </table>
   </div>
</div>
<div id="grid_diamond" class="d-flex" >
</div>
<nav aria-label="Page navigation" id="pagination">
   <ul class="pagination" id="pagination_links">
   </ul>
</nav>

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


// Get the URL of the current page
const urlParams = new URLSearchParams(window.location.search);

// Get the value of the 'Shape' query parameter
const shape = urlParams.get('Shape');
if (shape === 'Round') {
    document.getElementById('idshaperound').checked = true;
    document.querySelector('.idshaperound').classList.add('active');
}else if (shape === 'Princes') {
    document.getElementById('idshapeprinces').checked = true;
    document.querySelector('.idshapeprinces').classList.add('active');
}else if (shape === 'Cushion') {
    document.getElementById('idshapecushion').checked = true;
    document.querySelector('.idshapecushion').classList.add('active');
}else if (shape === 'Emerald') {
    document.getElementById('idshapeemerald').checked = true;
    document.querySelector('.idshapeemerald').classList.add('active');
}else if (shape === 'Oval') {
    document.getElementById('idshapeoval').checked = true;
    document.querySelector('.idshapeoval').classList.add('active');
}else if (shape === 'Radiant') {
    document.getElementById('idshaperadiant').checked = true;
    document.querySelector('.idshaperadiant').classList.add('active');
}else if (shape === 'Marquise') {
    document.getElementById('idshapemarquise').checked = true;
    document.querySelector('.idshapemarquise').classList.add('active');
}else if (shape === 'Heart') {
    document.getElementById('idshapeheart').checked = true;
    document.querySelector('.idshapeheart').classList.add('active');
}else if (shape === 'Pear') {
    document.getElementById('idshapepear').checked = true;
    document.querySelector('.idshapepear').classList.add('active');
}else if (shape === 'Elongated') {
    document.getElementById('idshapeelongated').checked = true;
    document.querySelector('.idshapeelongated').classList.add('active');
}else if (shape === 'Eminecut') {
    document.getElementById('idshapeminecut').checked = true;
    document.querySelector('.idshapeminecut').classList.add('active');
}else if (shape === 'Euro') {
    document.getElementById('idshapeeuro').checked = true;
    document.querySelector('.idshapeeuro').classList.add('active');
}


// Get the values of 'carat_from' and 'carat_to'
const caratFrom = urlParams.get('carat_from');
const caratTo = urlParams.get('carat_to');

// Set the input fields with the values if they exist
if (caratFrom !== null && caratTo !== null) {
    document.getElementById('range_56_input_from').value = caratFrom;
    document.getElementById('range_56_input_to').value = caratTo;

    // Optionally, update the slider if you are using a range slider library
    $('#range_56').ionRangeSlider({
        min: 0,
        max: 20, // Adjust max range as needed
        from: caratFrom,
        to: caratTo,
        type: 'double',
        step: 0.1
    });
}

});



  // ++++++++++++++++++++Advance Search++++++++++++++++++++++++++++++++++++++++++
function show_search(){    
   event.preventDefault();

  // Stop event propagation
  event.stopPropagation();
    $("#more_filter").slideDown("3000");                
    $(".hide_show").html('<a href="javascript:void(0)" class=""><span class="" onclick="hide_search()" id="hide_advance"><i class="plus-toggle fa fa-minus"> </i> Hide Advance Filter</span></a>');        
}
function hide_search(){
    $("#more_filter").slideUp("3000");               
    $(".hide_show").html('<a href="javascript:void(0)" class=""><span class="" onclick="show_search()" id="show_advance"><i class="plus-toggle fa fa-plus"> </i> Show Advance Filter</span></a>');
}


$(document).ready(function() {
   // Open popup and disable background scroll
   $('#FooterLink').click(function() {
      document.querySelector(".custom-container").classList.add("open");
   });

   // Close popup and enable background scroll
   $('#close').click(function() {
   $('#Popup').css('bottom', '-100%'); // Slide popup down
   document.querySelector(".custom-container").classList.remove("open");
   $("#filter_div").hide(); // Hide filter content
   $('body').removeClass('no-scroll'); // Enable body scroll
   });
});
</script>

<script>
    // Get the elements
    const popup = document.getElementById('open');
    const openPopupBtn = document.getElementById('FooterLink');
    const closePopupBtn = document.getElementById('close');
    const body = document.body;

    // Show the popup and add the overlay class to the body when the button is clicked
    openPopupBtn.addEventListener('click', () => {
      body.classList.add('filter-overlay'); // Add overlay class to the body
      popup.style.display = 'block';  // Show the popup
    });

    // Hide the popup and remove the overlay class when the close button is clicked
    closePopupBtn.addEventListener('click', () => {
      body.classList.remove('filter-overlay'); // Remove overlay class from the body
      popup.style.display = 'none';  // Hide the popup
    });

    // Optionally, you could close the popup by clicking anywhere on the overlay (body)
    body.addEventListener('click', (event) => {
      // Close the popup only if the click is on the body and not inside the popup
      if (event.target === body && popup.style.display === 'block') {
        body.classList.remove('filter-overlay');
        popup.style.display = 'none';
      }
    });
  </script>

<script>
    

    document.addEventListener('DOMContentLoaded', function() {
    const step_list = document.getElementById('step_list');
     // step_list.classList.add('hidden'); 
    var url = window.location.href;
    const urlObject = new URL(url);
    const pathname = urlObject.pathname.toLowerCase();
    const pathParts = pathname.split('/');
    const collectionIndex = pathParts.indexOf('collections');
    var selected_collection = localStorage.getItem('collectionName');
     
    if (collectionIndex !== -1 && pathParts.length > collectionIndex + 1) {
      const collectionName = pathParts[collectionIndex + 1];
    
      if (collectionName === 'fine-jewelry' || 
          collectionName === 'wedding-bands' || 
          collectionName === 'cart' || 
          collectionName === 'diamond-bands') {
             console.log(selected_collection +'1');
        step_list.classList.add('hidden'); 
      } else if (collectionName == 'engagement-rings' || collectionName == 'bypass' ||
                  collectionName == 'hidden-halo-engaement-rings' ||  collectionName == 'solitaire'   || 
                  collectionName == 'vintage' ||  collectionName == 'pave-engagement-rings' || 
                  collectionName == 'multirow' || collectionName == 'side stone' ||
                  collectionName == 'three-stone-engagement-rings') {
       console.log(selected_collection +'2');
                  step_list.classList.remove('hidden');
                  step_list.classList.add('flex'); 
      }
    }else if (selected_collection == 'engagement-rings' || selected_collection == 'bypass' || 
                  selected_collection == 'hidden-halo-engaement-rings' ||  selected_collection == 'solitaire'   || 
                  selected_collection == 'vintage' ||  selected_collection == 'pave-engagement-rings' || 
                  selected_collection == 'multirow' || selected_collection == 'side stone' || selected_collection == 'engaement-rings' ||
                  selected_collection == 'three-stone-engagement-rings') {
                   console.log(selected_collection +'3');
        
                  step_list.classList.remove('hidden');
                  step_list.classList.add('flex'); 
      }
  });


</script>
<?php /**PATH /home/braintreeeasysof/public_html/diamond_products/resources/views/diamond-page.blade.php ENDPATH**/ ?>