<style>
    h1.main-page-title.page-title.h0.scroll-trigger.animate--fade-in {
    display: none;
}
</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>

  .loader-container {

    display: flex;

    justify-content: center;

    align-items: center;

    position: fixed;

    z-index: 4;

    top: 0px;

    left: 0px;

    bottom: 0px;

    right: 0px;

    background-color: rgba(237, 237, 237, 0.42);

  }



.loader-logo {

    z-index: 5;

    width: 110px;

    height: 110px;

    padding-bottom: 10px;

    background-repeat: no-repeat;

    background-size: 100px;

    background-position: center;

}

.loader-circle {

    border-top: 3px solid #424242;

    border-radius: 50%;

    width: 60px;

    height: 60px;

    animation: spin 1.25s linear infinite;

}



@keyframes  spin {

  0% {

    transform: rotate(0deg);

  }

  100% {

    transform: rotate(360deg);

  }

}

</style> -->



<!-- datatable end -->
  <section class="" id="search_div" style="">

    <div class="custom-container">

      <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-6 col-lg-6 col-12 filter-range-col d-flex">

                  <div class="label_div">


                  <div class="range-name rang-name-shape">Shape</div>

                  </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>

                        <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>

                        <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>

                        <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>

                        <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>

                      <div class="clearfix"></div>

                      <li>

                        <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>

                        <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>

                        <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>

                        <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>

                        <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>

                      

                    </ul>

                  </div>

                </div>



                <div class="col-sm-12 col-md-6 col-lg-6 col-12 filter-range-col d-flex">

                    <div class="label_div"> 

                      <div class="range-name">Color</div>

                    </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>

 

              



              <div class="search_filter_cut tps_filter row padding-tb ">

                <div class="col-sm-12 col-md-6 col-lg-6 col-12 filter-range-col d-flex">

                    <div class="label_div">
 

                      <div class="range-name">Cut</div>

                    </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-6 col-12 filter-range-col d-flex">

                    <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 class="search_filter_cut tps_filter row padding-tb">

                <div class="col-sm-12 col-md-6 col-lg-6 col-12 filter-range-col d-flex">

                    <div class="label_div">
 

                      <div class="range-name">Carat</div>

                    </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 filter-range-col d-flex">

                    <div class="label_div">

                      <div class="range-name">Price</div>

                    </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>



              <div id="more_filter" style="display: none;">

                <div class="search_filter_cut tps_filter row ">

                  <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>

      </form>

    </div>

  </section>



  <!-- <button id="downloadButton">Download Selected Items</button> -->

  <div class="containter container_table table-responsive">

    <div id="list_diamond">
 

       <div class="table-responsive">

      <table id="example" class=" table-bordered table-striped 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">Shapes</th>

            <th class="sorting">Carat</th>

            <th class="sorting">Color</th>

            <th class="sorting">Clarity</th>

            <th class="sorting">Cut</th>

            <th class="sorting">Price</th>

            <th class="sorting">Action</th>
 

          </tr>

        </thead>

        <tbody id="add_data" style=""></tbody>

      </table>

    </div>

    </div>



    

      <div id="grid_diamond" class="d-flex" >
         
      </div>

 

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