<link rel="stylesheet" href="{{ asset('public/assets/diamond.css') }}">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js" defer="defer"></script>
<!-- <script src="https://code.jquery.com/jquery-3.6.0.min.js" defer="defer" 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"
>

<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>
    h1.main-page-title.page-title.h0.scroll-trigger.animate--fade-in {
    display: none;
}
</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()">
                        <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" onchange="submitForm()" value="Round">
                          <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>
                        <label for="idshapeoval">
                          <input type="checkbox" name="checkbox[]" id="idshapeoval" onchange="submitForm()" value="OVAL">
                          <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>
                        <label for="idshapecushion">
                          <input type="checkbox" name="checkbox[]" id="idshapecushion" onchange="submitForm()" value="CUSHION">
                          <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>
                        <label for="idshapeemerald">
                          <input type="checkbox" name="checkbox[]" id="idshapeemerald" onchange="submitForm()" value="EMERALD">
                          <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>
                        <label for="idshapeprinces">
                          <input type="checkbox" name="checkbox[]" id="idshapeprinces" onchange="submitForm()" value="PRINCESS">
                          <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>
                      <div class="clearfix"></div>
                      <li>
                        <label for="idshaperadiant">
                          <input type="checkbox" name="checkbox[]" id="idshaperadiant" onchange="submitForm()" value="RADIANT">
                          <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>
                        <label for="idshapepear">
                          <input type="checkbox" name="checkbox[]" id="idshapepear" onchange="submitForm()" value="PEAR">
                          <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>
                      
                      <li>
                        <label for="idshapemarquise">
                          <input type="checkbox" name="checkbox[]" id="idshapemarquise" onchange="submitForm()" value="MARQUISE">
                          <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>
                        <label for="idshapeasscher">
                          <input type="checkbox" name="checkbox[]" id="idshapeasscher" onchange="submitForm()" value="ASSCHER">
                          <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>
                        <label for="idshapeheart">
                          <input type="checkbox" name="checkbox[]" id="idshapeheart" onchange="submitForm()" value="HEART">
                          <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>
                      
                    </ul>
                  </div>
                </div>

                <div class="col-sm-12 col-md-6 col-lg-6 col-12 filter-range-col">
                  <div class="display-flex row new_add" style="flex-direction:row">
                    <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>

              

              <div class="search_filter_cut tps_filter row padding-tb ">
                <div class="col-sm-12 col-md-6 col-lg-6 col-12 pt-4 filter-range-col">
                  <div class="display-flex row new_add" style="flex-direction:row;">
                    <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>

                <div class="col-sm-12 col-md-6 col-lg-6 col-12 pt-4 filter-range-col">
                  <div class="display-flex row new_add" style="flex-direction:row">
                    <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>

              
              <div class="search_filter_cut tps_filter row padding-tb">
                <div class="col-sm-12 col-md-6 col-lg-6 col-12 pt-4 filter-range-col">
                  <div class="display-flex row new_add" style="flex-direction:row">
                    <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="col-sm-6 col-md-6 col-lg-6 col-xs-6 input-style">
                          <input
                            type="text"
                            id="range_56_input_from"
                            name="carat_from"
                            onkeyup="setSliderFromTo1()"
                            class=" pull-left text-design"
                          >
                        </div>
                        <div class="col-sm-6 col-md-6 col-lg-6 col-xs-6 input-style">
                          <input
                            type="text"
                            id="range_56_input_to"
                            name="carat_to"
                            onkeyup="setSliderFromTo1()"
                            class="pull-right text-design"
                          >
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                
                <div class="col-sm-12 col-md-6 col-lg-6 col-12 pt-4 filter-range-col">
                  <div class="display-flex row new_add" style="flex-direction:row">
                    <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="col-sm-6 col-md-6 col-lg-6 col-xs-6 px-0">
                          <input
                            type="text"
                            id="price_from"
                            name="price_from"
                            onkeyup="setSliderFromTo()"
                            class=" pull-left text-design"
                          >
                        </div>
                        <div class="col-sm-6 col-md-6 col-lg-6 col-xs-6 px-0">
                          <input
                            type="text"
                            id="price_to"
                            name="price_to"
                            onkeyup="setSliderFromTo()"
                            class="pull-right text-design"
                          >
                        </div>
                      </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">
          
            <button class="btn btn-info-reset" type="button" onclick="location.reload()">
              <i class="fa fa-undo"></i>
              Reset
            </button>         
        </div>
      </form>
    </div>
  </section>

  <!-- <button id="downloadButton">Download Selected Items</button> -->
  <div class="containter container_table table-responsive">
    <div id="list_diamond" style="height: 500px; overflow-y: auto;">
      <table
        id="example"
        class="table table-striped table-bordered dataTable nowrap  display"
        cellspacing="0"
        width="100%"
        role="grid"
        aria-describedby="example_info"
        style="width: 100%;"
      >
        <thead class="">
          <tr class="bg_color">
            <th class="">Shape</th>
            <th class="">Price/Ct</th>
            <th class="">Carat</th>
            <th class="">Color</th>
            <th class="">Clarity</th>
            <th class="">Cut</th>
          </tr>
        </thead>
        <tbody id="add_data" style=""></tbody>
      </table>
    </div>

    
      <!-- <div id="grid_diamond" style="height: 1136px; overflow-y: auto;">
      </div> -->
    

  </div>
  



