<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link  href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500&family=Inter:wght@300;400;500&display=swap"  rel="stylesheet">
<meta name="csrf-token" content="<?php echo e(csrf_token()); ?>">
<style>    
   /* Hide checkbox */
   input[type="checkbox"] {
   display: none;
   }
   /* Heading */
   .product-title {
   font-family: 'Cormorant Garamond', serif;
   }
   /* Hide checkbox */
   .shape-item input {
   display: none;
   }
   /* Container */
   .shape-list {
   display: flex;
   gap: 18px;
   overflow-x: auto;
   justify-content: space-between;
   }
   /* Each item */
   .shape-item {
   min-width: 100px;
   }
   /* Label full box */
   .shape-item label {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   padding: 12px;
   border-radius: 14px;
   border: 1px solid transparent;
   cursor: pointer;
   transition: all 0.3s ease;
   }
   /* Image */
   .shape-item img {
   width: 75px;
   margin-bottom: 6px;
   }
   /* Text */
   .shape-item span {
   font-size: 13px;
   color: #333;
   }
   /* ACTIVE STATE (FULL BOX) */
   .shape-item input:checked+label {
   border: 1.5px solid #000;
   background: #f5f5f5;
   }
   /* Hover */
   .shape-item label:hover {
   border: 1px solid #bbb;
   }
   /* Carat */
   .carat-grid {
   display: flex;
   flex-wrap: wrap;
   gap: 9px;
   }
   /* .carat-item {
   margin: 4px;
   } */
   .carat-item label {
   border: 1px solid #ccc;
   padding: 6px 15px;
   border-radius: 6px;
   cursor: pointer;
   }
   /* Active */
   .carat-item input:checked+label {
   background: #000;
   color: #fff;
   }
   /* Quantity */
   .qty-box {
   display: flex;
   gap: 10px;
   align-items: center;
   }
   .qty-btn {
   border: 1px solid #ccc;
   width: 30px;
   height: 30px;
   cursor: pointer;
   background: #fff;
   }
   #qty {
   width: 50px;
   text-align: center;
   }
   /* Price */
   .price-box {
   background: #fff;
   /* padding: 20px; */
   border-radius: 10px;
   /* margin-top: 20px; */
   }
   /* Button */
   .add-btn {
   background: #555;
   color: #fff;
   width: 100%;
   padding: 12px;
   border-radius: 30px;
   border: none;
   }
</style>
<div class="container py-5">
   <div class="shape-list mb-5">

<div class="shape-item">
<input type="checkbox" name="shape" id="round" value="ROUND" checked>
<label for="round">
<img src="https://brillianttouchllc.com/cdn/shop/files/Round_cfd610c1-4f88-45db-8f97-026e0f19bac1.png?v=1775195849">
<span>Round</span>
</label>
</div>

<div class="shape-item">
<input type="checkbox" name="shape" id="oval" value="OVAL">
<label for="oval">
<img src="https://brillianttouchllc.com/cdn/shop/files/oval_6f3f8707-a891-4a5b-954b-e2f1f03095b5.png?v=1775195848">
<span>Oval</span>
</label>
</div>

<div class="shape-item">
<input type="checkbox" name="shape" id="princess" value="PRINCESS">
<label for="princess">
<img src="https://brillianttouchllc.com/cdn/shop/files/princess_5e7a94dc-49ee-4fd5-bfe0-e0f173475466.png?v=1775195848">
<span>Princess</span>
</label>
</div>

<div class="shape-item">
<input type="checkbox" name="shape" id="emerald" value="EMERALD">
<label for="emerald">
<img src="https://brillianttouchllc.com/cdn/shop/files/emerald_8204175c-e947-4edf-b50b-9b69f2f71a9c.png?v=1775195847">
<span>Emerald</span>
</label>
</div>

<div class="shape-item">
<input type="checkbox" name="shape" id="radiant" value="RADIANT">
<label for="radiant">
<img src="https://brillianttouchllc.com/cdn/shop/files/radiant_535f5756-3d90-4017-ac4d-0008b6c07aad.png?v=1775195848">
<span>Radiant</span>
</label>
</div>

<div class="shape-item">
<input type="checkbox" name="shape" id="heart" value="HEART">
<label for="heart">
<img src="https://brillianttouchllc.com/cdn/shop/files/heart_6ad6e4b5-f9fd-4b81-866c-d378a581f956.png?v=1775195848">
<span>Heart</span>
</label>
</div>

<div class="shape-item">
<input type="checkbox" name="shape" id="cushion" value="CUSHION">
<label for="cushion">
<img src="https://brillianttouchllc.com/cdn/shop/files/cushion_d2d40cd0-ba29-4083-9825-62d468ae61db.png?v=1775195849">
<span>Cushion</span>
</label>
</div>

<div class="shape-item">
<input type="checkbox" name="shape" id="pear" value="PEAR">
<label for="pear">
<img src="https://brillianttouchllc.com/cdn/shop/files/pear_5bf22abb-6a3f-4e38-9ec4-14c8fd05980e.png?v=1775195847">
<span>Pear</span>
</label>
</div>

<div class="shape-item">
<input type="checkbox" name="shape" id="marquise" value="MARQUISE">
<label for="marquise">
<img src="https://brillianttouchllc.com/cdn/shop/files/marquise_0ba9e5da-2292-45cd-899d-0d2e0700615d.png?v=1775195848">
<span>Marquise</span>
</label>
</div>

<div class="shape-item">
<input type="checkbox" name="shape" id="asscher" value="ASSCHER">
<label for="asscher">
<img src="https://brillianttouchllc.com/cdn/shop/files/asscher_fc34a326-4b33-419a-b826-1316394053b3.png?v=1775195848">
<span>Asscher</span>
</label>
</div>

</div>
   <div class="row">
      <!-- Image -->
      <div class="col-md-4 text-center">
         <img src="https://dnalinks.in/902319/still.jpg" class="img-Diamond">
      </div>
      <!-- Carat -->
     <div class="col-md-4">

<h3 class="product-title">Diamond</h3>

<p>Carat : <strong id="selectedCarat">1.00</strong></p>

<div class="carat-grid">

<div class="carat-item">
<input type="checkbox" name="carat" id="c1" value="1.00" checked>
<label for="c1">1.00</label>
</div>

<div class="carat-item">
<input type="checkbox" name="carat" id="c2" value="1.50">
<label for="c2">1.50</label>
</div>

<div class="carat-item">
<input type="checkbox" name="carat" id="c3" value="2.00">
<label for="c3">2.00</label>
</div>

<div class="carat-item">
<input type="checkbox" name="carat" id="c4" value="2.50">
<label for="c4">2.50</label>
</div>

<div class="carat-item">
<input type="checkbox" name="carat" id="c5" value="3.00">
<label for="c5">3.00</label>
</div>

<div class="carat-item">
<input type="checkbox" name="carat" id="c6" value="3.50">
<label for="c6">3.50</label>
</div>

<div class="carat-item">
<input type="checkbox" name="carat" id="c7" value="4.00">
<label for="c7">4.00</label>
</div>

<div class="carat-item">
<input type="checkbox" name="carat" id="c8" value="4.50">
<label for="c8">4.50</label>
</div>

<div class="carat-item">
<input type="checkbox" name="carat" id="c9" value="5.00">
<label for="c9">5.00</label>
</div>

<div class="carat-item">
<input type="checkbox" name="carat" id="c10" value="5.50">
<label for="c10">5.50</label>
</div>

<div class="carat-item">
<input type="checkbox" name="carat" id="c11" value="6.00">
<label for="c11">6.00</label>
</div>

<div class="carat-item">
<input type="checkbox" name="carat" id="c12" value="6.50">
<label for="c12">6.50</label>
</div>

</div>
</div>
      <!-- Price -->
      <div class="col-md-4">
         <div class="price-box">
           <h2 id="diamond_title">Uncertified Certified 0.51 Carat F - VS1 EMERALD Shaped None</h2>
           <span class="new-price" id="diamond_price">$2,999</span>
            <!-- Quantity -->
            <div class="qty-box my-3">
               <p>Quantity:</p>
               <div class="input-group">
                  <button id="minus" class="qty-btn" type="button">-</button>
                <input type="number" id="qty" value="1" min="1">
                <button id="plus" class="qty-btn" type="button">+</button>
               </div>
            </div>
            <p>Subtotal: $<span id="subtotal">231.75</span></p>
            <button class="add-btn">ADD TO CART</button>
         </div>
      </div>
   </div>
</div>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
let currentDiamond = null;

/* GET SELECTED VALUE */
function getSelected(name) {
    let el = document.querySelector(`input[name="${name}"]:checked`);
    return el ? el.value : null;
}

/* SINGLE SELECT */
function singleSelect(name) {
    const boxes = document.querySelectorAll(`input[name="${name}"]`);

    boxes.forEach(box => {
        box.addEventListener('change', function () {

            boxes.forEach(cb => cb.checked = false);
            this.checked = true;

            loadDiamond();
        });
    });
}

singleSelect('shape');
singleSelect('carat');

/* LOAD DIAMOND */
function loadDiamond() {

    fetch("https://braintreeeasysoft.com/brillianttouchllc_app/get-filter-diamond", {
        method: "POST",
        headers: {
            "Content-Type": "application/json"
        },
        body: JSON.stringify({
            shape: getSelected('shape'),
            carat: getSelected('carat')
        })
    })
    .then(res => res.json())
    .then(data => {

        currentDiamond = data.record;

        if (!currentDiamond) return;

        updateUI();
    })
    .catch(err => console.log(err));
}

function updateUI() {

    if (!currentDiamond) return;

    /* ================= TITLE ================= */
    let title =
        (currentDiamond.labcode || "Uncertified") + " Certified " +
        (currentDiamond.weight || "0.00") + " Carat " +
        (currentDiamond.colorcode || "-") + " - " +
        (currentDiamond.claritycode || "-") + " " +
        (currentDiamond.shapecode || "") + " Shaped " +
        (currentDiamond.shade || "");

    document.getElementById("diamond_title").innerText = title;
     document.getElementById("product-title").innerText = currentDiamond.shapecode + "Cut Diamond";

    /* ================= PRICE ================= */
    let price = parseFloat(currentDiamond.price1 || 0);

   document.getElementById("diamond_price").innerText =
    "$" + Math.round(currentDiamond.price1 || 0).toLocaleString();
    document.getElementById("subtotal").innerText =
    "$" + Math.round(currentDiamond.price1 || 0).toLocaleString();

    /* ================= IMAGE ================= */
    if (currentDiamond.threed_link) {
        document.querySelector(".img-Diamond").src =
            currentDiamond.threed_link;
    }

    updateSubtotal();
}


/* QTY */
const qty = document.getElementById('qty');

document.getElementById('minus').onclick = () => {
    qty.value = Math.max(1, parseInt(qty.value || 1) - 1);
    updateSubtotal();
};

document.getElementById('plus').onclick = () => {
    qty.value = parseInt(qty.value || 1) + 1;
    updateSubtotal();
};

qty.addEventListener("input", updateSubtotal);

/* ✅ SUBTOTAL */
function updateSubtotal() {

    if (!currentDiamond) return;

    let q = parseInt(qty.value || 1);
    let price = parseFloat(currentDiamond.price1 || 0);

    let total = q * price;
  document.getElementById("subtotal").innerText =
    "$" + Math.round(currentDiamond.total || 0).toLocaleString();
    // document.getElementById('subtotal').innerText =
    //     total.toLocaleString();
}

/* FIRST LOAD */
document.addEventListener("DOMContentLoaded", loadDiamond);
</script><?php /**PATH /home/brillianttouch/public_html/brillianttouchllc_app/resources/views/diamond-detalis-one.blade.php ENDPATH**/ ?>