<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="{{ 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="{{ asset('public/assets/style.css') }}">
<link rel="stylesheet" href="{{ asset('public/assets/ion.rangeSlider.css') }}">
<link rel="stylesheet" href="{{ asset('public/assets/ion.rangeSlider.skinNice.css') }}">
<script src="{{ asset('public/assets/ion.rangeSlider.js') }}" defer="defer"></script>
<script src="{{ asset('public/assets/bootstrap.min.js') }}" defer="defer"></script>
<script src="{{ asset('public/assets/jquery.dataTables.min.js') }}" defer="defer"></script>
<script src="{{ asset('public/assets/manage_diamond.js') }}" defer="defer"></script>
<script src="{{ asset('public/assets/manage_diamond_ajax.js') }}" defer="defer"></script>
<script src="{{ 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 -->





<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="1">
                                    <a title="Round" class="">
                                       <div class="text_shape">Round</div>
                                       <div class="img_shape round">
                                          <img src="{{ 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="2">
                                    <a title="Princess">
                                       <div class="text_shape">Princess</div>
                                       <div class="img_shape princess">
                                          <img
                                             src="{{ 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="10">
                                    <a title="Cushion">
                                       <div class="text_shape">Cushion</div>
                                       <div class="img_shape cushion">
                                          <img
                                             src="{{ 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="3">
                                    <a title="Emerald">
                                       <div class="text_shape">Emerald</div>
                                       <div class="img_shape emerald">
                                          <img
                                             src="{{ 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="6">
                                    <a title="Oval">
                                       <div class="text_shape">Oval</div>
                                       <div class="img_shape oval">
                                          <img
                                             src="{{ 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="7">
                                    <a title="Radiant">
                                       <div class="img_shape radiant">
                                          <img
                                             src="{{ 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="4">
                                    <a title="Asscher">
                                       <div class="img_shape asscher">
                                          <img
                                             src="{{ 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="5">
                                    <a title="Marquise">
                                       <div class="img_shape marquies">
                                          <img
                                             src="{{ 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="9">
                                    <a title="Heart">
                                       <div class="img_shape heart">
                                          <img src="{{ 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="8">
                                    <a title="Pear">
                                       <div class="img_shape pear">
                                          <img src="{{ 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>
                           
                              
                             
                           </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="grid">
                                                <div class="btn-group btn-group-justified">
                                                    <label class="btn btn-primary" for="">
                                                        <input type="checkbox" name="color[]" value="1">D
                                                    </label>
                                                    <label class="btn btn-primary" for="">
                                                        <input type="checkbox" name="color[]" value="2"> E
                                                    </label>
                                                    <label class="btn btn-primary" for="">
                                                        <input type="checkbox" name="color[]" value="3">F
                                                    </label>
                                                    <label class="btn btn-primary" for="">
                                                        <input type="checkbox" name="color[]" value="4">G
                                                    </label>
                                                    <label class="btn btn-primary" for="">
                                                        <input type="checkbox" name="color[]" value="5">H
                                                    </label>
                                                    <label class="btn btn-primary" for="">
                                                        <input type="checkbox" name="color[]" value="6">I
                                                    </label>
                                                    <label class="btn btn-primary" for="">
                                                        <input type="checkbox" name="color[]" value="7">J
                                                    </label>
                                                    <label class="btn btn-primary" for="">
                                                        <input type="checkbox" name="color[]" value="8">K
                                                    </label>
                                                    <label class="btn btn-primary" for="">
                                                        <input type="checkbox" name="color[]" value="9">L>
                                                    </label>
                                                </div>
                                            </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="grid">
                                                <div class="btn-group btn-group-justified">
                                                    <label class="btn btn-primary" for="">
                                                        <input type="checkbox" name="clarity[]" value="13">FL
                                                    </label>
                                                    <label class="btn btn-primary" for="">
                                                        <input type="checkbox" name="clarity[]" value="11">IF
                                                    </label>
                                                    <label class="btn btn-primary" for="">
                                                        <input type="checkbox" name="clarity[]" value="2">VVS1
                                                    </label>
                                                    <label class="btn btn-primary" for="">
                                                        <input type="checkbox" name="clarity[]" value="3">VVS2
                                                    </label>
                                                    <label class="btn btn-primary" for="">
                                                        <input type="checkbox" name="clarity[]" value="4">VS1
                                                    </label>
                                                    <label class="btn btn-primary" for="">
                                                        <input type="checkbox" name="clarity[]" value="5">VS2
                                                    </label>
                                                    <label class="btn btn-primary" for="">
                                                        <input type="checkbox" name="clarity[]" value="6">SI1
                                                    </label>
                                                    <label class="btn btn-primary" for="">
                                                        <input type="checkbox" name="clarity[]" value="7">SI2
                                                    </label>
                                                    <label class="btn btn-primary" for="">
                                                        <input type="checkbox" name="clarity[]" value="8">SI3
                                                    </label>
                                                    <label class="btn btn-primary" for="">
                                                        <input type="checkbox" name="clarity[]" value="9">I1>
                                                    </label>
                                                </div>    
                                            </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="grid">
                                                    <div class="btn-group btn-group-justified">
                                                        <label  class="btn btn-primary" for="">
                                                            <input type="checkbox" name="cut[]" class="cut_check" value="4" id="ex_cut">ID
                                                        </label>
                                                        <label class="btn btn-primary" for="">
                                                            <input type="checkbox" name="cut[]" class="cut_check" value="1" id="vg_cut">EX
                                                        </label>
                                                        <label class="btn btn-primary" for="">
                                                            <input type="checkbox" name="cut[]" class="cut_check" value="2" id="gd_cut">VG
                                                        </label>
                                                        <label class="btn btn-primary" for="">
                                                            <input type="checkbox" name="cut[]" class="cut_check" value="3" id="fr_cut">G
                                                        </label>
                                                        <label class="btn btn-primary" for="">
                                                            <input type="checkbox" name="cut[]" class="cut_check" value="5" id="fr_cut">F
                                                        </label>
                                                    </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">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">
                         <div class="grid">
                                                <div class="btn-group btn-group-justified">
                                                    <label class="btn  btn-primary" for="">
                                                        <input type="checkbox" name="cert[]" value="1" id="cert_GIA">GIA
                                                    </label>
                                                    <label class="btn  btn-primary" for="">
                                                        <input type="checkbox" name="cert[]" value="7" id="cert_AGS">IGI
                                                    </label>
                                                    <label class="btn  btn-primary" for="">
                                                        <input type="checkbox" name="cert[]" value="12" id="cert_GSI">GCAL
                                                    </label>
                                                    <label class="btn  btn-primary" for="">
                                                        <input type="checkbox" name="cert[]" value="3" id="cert_IIDGR">AGS
                                                    </label>
                                                    <label class="btn  btn-primary" for="">
                                                        <input type="checkbox" name="cert[]" value="5" id="cert_EGLUSA">HRD
                                                    </label>
                                                    <label class="btn  btn-primary" for="">
                                                        <input type="checkbox" name="cert[]" value="2" id="cert_OTHER">EGLUSA
                                                    </label>
                                                    <label class="btn  btn-primary" for="">
                                                        <input type="checkbox" name="cert[]" value="11" id="cert_OTHER">Internal Grading
                                                    </label>
                                                    <label class="btn  btn-primary" for="">
                                                        <input type="checkbox" name="cert[]" value="OTHER" id="cert_OTHER">Other
                                                    </label>
                                                </div>
                                            </div>
                     </div>
                  </div>
                     
                        <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">Fluorescence</label>
                     
                           </div>
                     
                           <div class="d-center">
                     
                             <div class="grid">
                                                <div class="btn-group btn-group-justified">
                                                    <label class="btn  btn-primary" for="">
                                                        <input type="checkbox" name="fluorescence[]" class="sym_check" value="1" id="1_fluorescence">N
                                                    </label>
                                                    <label class="btn  btn-primary" for="">
                                                        <input type="checkbox" name="fluorescence[]" class="sym_check" value="2" id="2_fluorescence">F
                                                    </label>
                                                    <label class="btn  btn-primary" for="">
                                                        <input type="checkbox" name="fluorescence[]" class="sym_check" value="3" id="3_fluorescence">M
                                                    </label>
                                                    <label class="btn  btn-primary" for="">
                                                        <input type="checkbox" name="fluorescence[]" class="sym_check" value="4" id="4_fluorescence">S
                                                    </label>
                                                </div>
                                            </div>
                     
                           </div>
                     
                                              
                       </div>
                     
                       <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">Polish</label>
                     
                           </div>
                     
                           <div class="d-center">
                     
                             <div class="grid">
                                                    <div class="btn-group btn-group-justified">
                                                        <label class="btn btn-primary" for="">
                                                            <input type="checkbox" name="polish[]" class="pol_check" value="4" id="ex_polish">I
                                                        </label>
                                                        <label class="btn btn-primary" for="">
                                                            <input type="checkbox" name="polish[]" class="pol_check" value="1" id="vg_polish">EX
                                                        </label>
                                                        <label class="btn btn-primary" for="">
                                                            <input type="checkbox" name="polish[]" class="pol_check" value="2" id="gd_polish">VG
                                                        </label>
                                                        <label class="btn btn-primary" for="">
                                                            <input type="checkbox" name="polish[]" class="pol_check" value="3" id="fr_polish">G
                                                        </label>
                                                        <label class="btn  btn-primary" for="">
                                                            <input type="checkbox" name="symmetry[]" class="sym_check" value="5" id="fr_symmetry">F
                                                        </label>
                                                        <label class="btn  btn-primary" for="">
                                                            <input type="checkbox" name="symmetry[]" class="sym_check" value="6" id="fr_symmetry">P
                                                        </label>
                                                    </div>
                                                </div>
                     
                           </div>
                     
                         
                     
                       </div>
                     
                       <div class="col-sm-12 col-md-4 col-lg-4 col-12 pt-4 ">
                     
                         
                     
                           <div class="label_div"> 
                     
                              <label class="tx-center">Symmetry</label>
                     
                           </div>
                     
                           <div class="d-center">
                     
                             <div class="btn-group btn-group-justified">
                                                    <label class="btn  btn-primary" for="">
                                                        <input type="checkbox" name="symmetry[]" class="sym_check" value="6" id="ex_symmetry">I
                                                    </label>
                                                    <label class="btn  btn-primary" for="">
                                                        <input type="checkbox" name="symmetry[]" class="sym_check" value="1" id="vg_symmetry">EX
                                                    </label>
                                                    <label class="btn  btn-primary" for="">
                                                        <input type="checkbox" name="symmetry[]" class="sym_check" value="2" id="gd_symmetry">VG
                                                    </label>
                                                    <label class="btn  btn-primary" for="">
                                                        <input type="checkbox" name="symmetry[]" class="sym_check" value="3" id="fr_symmetry">G
                                                    </label>
                                                    <label class="btn  btn-primary" for="">
                                                        <input type="checkbox" name="symmetry[]" class="sym_check" value="4" id="fr_symmetry">F
                                                    </label>
                                                    <label class="btn  btn-primary" for="">
                                                        <input type="checkbox" name="symmetry[]" class="sym_check" value="5" id="fr_symmetry">P
                                                    </label>
                                                </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">Lot#</th>-->
               <th class="sorting">Shapes</th>
               <th class="sorting">Cts</th>
               <th class="sorting">Col</th>
               <th class="sorting">Cla</th>
               <th class="sorting">Cut</th>
               <th class="sorting">Pol</th>
               <th class="sorting">Sym</th>
               <th class="sorting">Fluo</th>
               <th class="sorting">Amount</th>
               <th class="sorting">Lab</th>
               <th class="sorting">Depth%</th>
               <th class="sorting">Table%</th>
               <th class="sorting">Measur</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>
{{-- <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).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>
