@extends('layouts.app')
@section('content')

<style>
    .karat-btn, .stone-btn, .finish-btn, .engraving-btn, .metal-btn, .weight-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 60px;
        height: 42px;
        border: 1px solid #ddd;
        border-radius: 8px;
        cursor: pointer;
        margin: 5px;
        font-weight: 600;
        transition: .3s;
        padding: 0 16px;
        background: #fff;
    }

    .karat-btn:hover,
    .karat-btn.active,
    .stone-btn:hover,
    .stone-btn.active,
    .finish-btn:hover,
    .finish-btn.active,
    .engraving-btn:hover,
    .engraving-btn.active,
    .metal-btn:hover,
    .metal-btn.active,
    .weight-btn:hover,
    .weight-btn.active {
        background: #000;
        color: #fff;
        border-color: #000;
    }

    .stone-btn {
        min-width: 80px;
    }

    .finish-btn, .engraving-btn, .metal-btn, .weight-btn {
        min-width: 70px;
    }

    .custom-option-group {
        background: #f8f8f8;
        padding: 15px 20px;
        border-radius: 12px;
        margin-bottom: 15px;
        border: 1px solid #eee;
    }

    .custom-option-group .variant-picker-label {
        font-weight: 600;
        margin-bottom: 10px;
        font-size: 14px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .option-price-tag {
        font-size: 12px;
        color: #666;
        margin-left: 5px;
        font-weight: normal;
    }

    .total-weight-display {
        background: #000;
        color: #fff;
        padding: 12px 20px;
        border-radius: 10px;
        margin: 10px 0;
    }

    .total-weight-display span {
        font-weight: 700;
        font-size: 18px;
    }

    .custom-price-summary {
        border-top: 2px solid #000;
        padding-top: 20px;
        margin-top: 20px;
    }

    .custom-price-summary .price-item {
        display: flex;
        justify-content: space-between;
        padding: 8px 0;
        border-bottom: 1px solid #f0f0f0;
    }

    .custom-price-summary .price-item:last-child {
        border-bottom: none;
        font-weight: 700;
        font-size: 18px;
        padding-top: 15px;
    }

    .engraving-text-input {
        border: 1px solid #ddd;
        border-radius: 8px;
        padding: 10px 15px;
        width: 100%;
        max-width: 300px;
        margin-top: 8px;
    }

    .engraving-text-input:focus {
        border-color: #000;
        outline: none;
    }

    .stone-size-select, .metal-select {
        border: 1px solid #ddd;
        border-radius: 8px;
        padding: 8px 12px;
        margin-left: 10px;
        background: #fff;
    }

    .stone-size-select:focus, .metal-select:focus {
        border-color: #000;
        outline: none;
    }

    .color-dot {
        display: inline-block;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        border: 2px solid #ddd;
        margin-right: 8px;
        vertical-align: middle;
    }

    .color-dot.active {
        border-color: #000;
    }

    .stone-option-card {
        border: 2px solid transparent;
        border-radius: 10px;
        padding: 10px 15px;
        cursor: pointer;
        transition: all 0.3s;
        background: #fff;
        margin: 5px;
    }

    .stone-option-card:hover,
    .stone-option-card.active {
        border-color: #000;
        background: #f9f9f9;
    }

    .stone-option-card .stone-icon {
        font-size: 24px;
        margin-right: 8px;
    }

    .stone-option-card .stone-label {
        font-weight: 500;
    }

    .stone-option-card .stone-price {
        font-size: 12px;
        color: #666;
    }

    .btn-group-stone {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }

    .checkbox-custom {
        display: flex;
        align-items: center;
        gap: 10px;
        margin: 8px 0;
    }

    .checkbox-custom input[type="checkbox"] {
        width: 18px;
        height: 18px;
        accent-color: #000;
    }

    .quick-add-options {
        max-height: 400px;
        overflow-y: auto;
    }

    .option-summary-badge {
        background: #f0f0f0;
        border-radius: 20px;
        padding: 4px 12px;
        font-size: 12px;
        margin: 3px;
        display: inline-block;
    }

    @media (max-width: 768px) {
        .karat-btn, .stone-btn, .finish-btn, .engraving-btn, .metal-btn, .weight-btn {
            min-width: 50px;
            font-size: 13px;
            padding: 0 12px;
            height: 38px;
        }
    }
    
    .karat-btn, 
    .stone-btn, 
    .finish-btn, 
    .engraving-btn, 
    .metal-btn, 
    .weight-btn,
    .size-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 60px;
        height: 42px;
        border: 1px solid #ddd;
        border-radius: 8px;
        cursor: pointer;
        margin: 5px;
        font-weight: 600;
        transition: .3s;
        padding: 0 16px;
        background: #fff;
        font-size: 14px;
    }

    .karat-btn:hover,
    .karat-btn.active,
    .stone-btn:hover,
    .stone-btn.active,
    .finish-btn:hover,
    .finish-btn.active,
    .engraving-btn:hover,
    .engraving-btn.active,
    .metal-btn:hover,
    .metal-btn.active,
    .weight-btn:hover,
    .weight-btn.active,
    .size-btn:hover,
    .size-btn.active {
        background: #000;
        color: #fff;
        border-color: #000;
    }

    /* Hidden inputs for form submission */
    .hidden-input {
        display: none;
    }
    
    .price-breakdown {
        background: #f8f9fa;
        padding: 15px;
        border-radius: 8px;
        margin: 10px 0;
    }
    
    .price-breakdown .breakdown-item {
        display: flex;
        justify-content: space-between;
        padding: 5px 0;
        font-size: 14px;
        border-bottom: 1px solid #eee;
    }
    
    .price-breakdown .breakdown-item:last-child {
        border-bottom: none;
        font-weight: bold;
        font-size: 16px;
        padding-top: 10px;
        border-top: 2px solid #000;
    }
</style>

<!-- Page Title -->
<div class="flat-spacing-16 pb-0">
    <div class="container">
        <div class="page-title border-0">
            <div class="breadcrumbs">
                <ul class="bread-wrap mb-0">
                    <li><a href="{{ url('/') }}" class="text-main-4 link">Home</a></li>
                    <li class="br-line w-12 bg-main"></li>
                    <li><p>Shop</p></li>
                </ul>
            </div>
        </div>
    </div>
</div>

<!-- Product Detail -->
<section class="themesFlat">
    <div class="tf-main-product section-image-zoom">
        <div class="container">
            <div class="row">
                <div class="col-md-6">
                    <div class="tf-product-media-wrap sticky-top">
                        <div class="thumbs-slider">
                            <div class="flat-wrap-media-product">
                                <div dir="ltr" class="swiper tf-product-media-main" id="gallery-swiper-started">
                                    <div class="swiper-wrapper">
                                        @foreach(['product-1.jpg', 'detail/prd-detail-2.jpg', 'detail/prd-detail-3.jpg', 'detail/prd-detail-4.jpg'] as $img)
                                        <div class="swiper-slide">
                                            <a href="{{ asset('assets2/images/products/' . $img) }}" target="_blank" class="item" data-pswp-width="593px" data-pswp-height="744px">
                                                <img class="tf-image-zoom lazyload" data-zoom="{{ asset('assets2/images/products/' . $img) }}" data-src="{{ asset('assets2/images/products/' . $img) }}" src="{{ asset('assets2/images/products/' . $img) }}" alt="img-product">
                                            </a>
                                        </div>
                                        @endforeach
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-md-6">
                    <div class="tf-product-info-wrap">
                        <div class="tf-zoom-main sticky-top"></div>
                        <div class="tf-product-info-list other-image-zoom">
                            <div class="tf-product-info-heading">
                                <ul class="product-info-rate rate-wrap">
                                    <li><i class="icon-star"></i></li>
                                    <li><i class="icon-star"></i></li>
                                    <li><i class="icon-star"></i></li>
                                    <li><i class="icon-star"></i></li>
                                    <li><i class="icon-star"></i></li>
                                </ul>
                                <h3 class="product-info-name fw-normal">
                                    EMERALD-CUT HALO ENGAGEMENT RING WITH DIAMOND PLATINUM BAND
                                </h3>
                                <div class="product-info-price">
                                    <div class="price-wrap">
                                        <span class="price-new price-on-sale h4" id="basePriceDisplay">₹0.00</span>
                                        <span class="price-old compare-at-price fw-normal h6">₹2,899.00</span>
                                    </div>
                                </div>
                                <p class="product-infor-sub h6 fw-normal text-main-4">
                                    Customize your perfect ring with our premium options. Select karat, stone, and more.
                                </p>
                            </div>

                            <!-- ===== CUSTOMIZATION FORM ===== -->
                            <form id="productCustomizationForm" action="" method="POST">
                                @csrf
                                <input type="hidden" name="product_id" value="">
                                <input type="hidden" name="total_price" id="totalPriceInput" value="0">
                                <input type="hidden" name="gold_price" id="goldPriceInput" value="0">
                                <input type="hidden" name="customizations_price" id="customizationsPriceInput" value="0">
                                
                                <div class="tf-product-info-variant">

                                    <!-- 1. Karat Selection -->
                                    <div class="custom-option-group">
                                        <div class="variant-picker-label h6 fw-normal">
                                            <i class="icon-diamond"></i> Karat Gold
                                        </div>
                                        <div class="variant-picker-values">
                                            <div class="btn-group flex-wrap">
                                                <span class="karat-btn active" data-karat="10K" data-factor="1.0">10K</span>
                                                <span class="karat-btn" data-karat="14K" data-factor="1.25">14K</span>
                                                <span class="karat-btn" data-karat="18K" data-factor="1.65">18K</span>
                                                <span class="karat-btn" data-karat="22K" data-factor="2.1">22K</span>
                                                <span class="karat-btn" data-karat="24K" data-factor="2.4">24K</span>
                                            </div>
                                            <input type="hidden" name="karat" id="karatInput">
                                        </div>
                                    </div>

                                    <!-- 2. Metal Color / Finish -->
                                    <div class="custom-option-group">
                                        <div class="variant-picker-label h6 fw-normal">
                                            <i class="icon-palette"></i> Metal Finish
                                            <span class="variant-picker-label-value value-currentFinish">Yellow Gold</span>
                                        </div>
                                        <div class="variant-picker-values">
                                            <div class="btn-group flex-wrap">
                                                <span class="metal-btn active" data-metal="Yellow Gold" data-color="#FFD700">Yellow Gold</span>
                                                <span class="metal-btn" data-metal="White Gold" data-color="#C0C0C0">White Gold</span>
                                                <span class="metal-btn" data-metal="Rose Gold" data-color="#E8B4B8">Rose Gold</span>
                                                <span class="metal-btn" data-metal="Platinum" data-color="#E5E4E2">Platinum</span>
                                                <span class="metal-btn" data-metal="Silver" data-color="#C0C0C0">Silver</span>
                                            </div>
                                            <input type="hidden" name="metal" id="metalInput">
                                        </div>
                                    </div>

                                    <!-- 3. Gold Weight (Max 15gm) -->
                                    <div class="custom-option-group">
                                        <div class="variant-picker-label h6 fw-normal">
                                            <i class="icon-weight"></i> Gold Weight
                                        </div>
                                        <div class="variant-picker-values">
                                            <div class="btn-group flex-wrap">
                                                <span class="weight-btn" data-weight="1g" data-grams="1">1g</span>
                                                <span class="weight-btn" data-weight="2g" data-grams="2">2g</span>
                                                <span class="weight-btn" data-weight="3g" data-grams="3">3g</span>
                                                <span class="weight-btn" data-weight="4g" data-grams="4">4g</span>
                                                <span class="weight-btn active" data-weight="5g" data-grams="5">5g</span>
                                                <span class="weight-btn" data-weight="6g" data-grams="6">6g</span>
                                                <span class="weight-btn" data-weight="7g" data-grams="7">7g</span>
                                                <span class="weight-btn" data-weight="8g" data-grams="8">8g</span>
                                                <span class="weight-btn" data-weight="9g" data-grams="9">9g</span>
                                                <span class="weight-btn" data-weight="10g" data-grams="10">10g</span>
                                                <span class="weight-btn" data-weight="12g" data-grams="12">12g</span>
                                                <span class="weight-btn" data-weight="15g" data-grams="15">15g</span>
                                            </div>
                                            <input type="hidden" name="weight" id="weightInput">
                                            <input type="hidden" name="weight_grams" id="weightGramsInput">
                                        </div>
                                        <div class="total-weight-display mt-2">
                                            Total Gold Weight: <span id="totalWeightDisplay"></span> grams 
                                            (Max 15g available)
                                        </div>
                                    </div>

                                    <!-- 4. Stone Type -->
                                    <div class="custom-option-group">
                                        <div class="variant-picker-label h6 fw-normal">
                                            <i class="icon-diamond"></i> Stone Type
                                            <span class="variant-picker-label-value value-currentStone">Diamond</span>
                                        </div>
                                        <div class="variant-picker-values">
                                            <div class="btn-group-stone">
                                                <div class="stone-option-card active" data-stone="Diamond" data-price="0">
                                                    <span class="stone-icon"><i class="icon-diamond"></i></span>
                                                    <span class="stone-label">Diamond</span>
                                                    <span class="stone-price">(Included)</span>
                                                </div>
                                                <div class="stone-option-card" data-stone="Pearl" data-price="200">
                                                    <span class="stone-icon"><i class="icon-gem"></i></span>
                                                    <span class="stone-label">Pearl</span>
                                                    <span class="stone-price">(+$200)</span>
                                                </div>
                                                <div class="stone-option-card" data-stone="Ruby" data-price="350">
                                                    <span class="stone-icon"><i class="icon-heart" style="color: #e0115f;"></i></span>
                                                    <span class="stone-label">Ruby</span>
                                                    <span class="stone-price">(+$350)</span>
                                                </div>
                                                <div class="stone-option-card" data-stone="Sapphire" data-price="400">
                                                    <span class="stone-icon"><i class="icon-diamond" style="color: #0f52ba;"></i></span>
                                                    <span class="stone-label">Sapphire</span>
                                                    <span class="stone-price">(+$400)</span>
                                                </div>
                                                <div class="stone-option-card" data-stone="Emerald" data-price="450">
                                                    <span class="stone-icon"><i class="icon-diamond" style="color: #50c878;"></i></span>
                                                    <span class="stone-label">Emerald</span>
                                                    <span class="stone-price">(+$450)</span>
                                                </div>
                                                <div class="stone-option-card" data-stone="Amethyst" data-price="250">
                                                    <span class="stone-icon"><i class="icon-diamond" style="color: #9966cc;"></i></span>
                                                    <span class="stone-label">Amethyst</span>
                                                    <span class="stone-price">(+$250)</span>
                                                </div>
                                                <div class="stone-option-card" data-stone="Enamel" data-price="150">
                                                    <span class="stone-icon"><i class="icon-palette"></i></span>
                                                    <span class="stone-label">Enamel</span>
                                                    <span class="stone-price">(+$150)</span>
                                                </div>
                                                <div class="stone-option-card" data-stone="Onyx" data-price="180">
                                                    <span class="stone-icon"><i class="icon-circle" style="color: #353839;"></i></span>
                                                    <span class="stone-label">Onyx</span>
                                                    <span class="stone-price">(+$180)</span>
                                                </div>
                                                <div class="stone-option-card" data-stone="Turquoise" data-price="220">
                                                    <span class="stone-icon"><i class="icon-diamond" style="color: #40e0d0;"></i></span>
                                                    <span class="stone-label">Turquoise</span>
                                                    <span class="stone-price">(+$220)</span>
                                                </div>
                                                <div class="stone-option-card" data-stone="No Stone" data-price="-100">
                                                    <span class="stone-icon"><i class="icon-close"></i></span>
                                                    <span class="stone-label">No Stone</span>
                                                    <span class="stone-price">(-$100)</span>
                                                </div>
                                            </div>
                                            <input type="hidden" name="stone" id="stoneInput" value="Diamond">
                                            <input type="hidden" name="stone_price" id="stonePriceInput">
                                        </div>
                                    </div>

                                    <!-- 5. Stone Size -->
                                    <div class="custom-option-group" id="stoneSizeGroup">
                                        <div class="variant-picker-label h6 fw-normal">
                                            <i class="icon-ruler"></i> Stone Weight
                                            <span class="variant-picker-label-value value-currentStoneSize">1.00 ct</span>
                                        </div>
                                        <div class="variant-picker-values">
                                            <select class="stone-size-select" id="stoneSizeSelect" name="stone_size">
                                                <option value="0.50" data-price="0">0.50 ct</option>
                                                <option value="0.75" data-price="150">0.75 ct (+$150)</option>
                                                <option value="1.00" data-price="300" selected>1.00 ct (+$300)</option>
                                                <option value="1.25" data-price="450">1.25 ct (+$450)</option>
                                                <option value="1.50" data-price="600">1.50 ct (+$600)</option>
                                                <option value="2.00" data-price="900">2.00 ct (+$900)</option>
                                            </select>
                                            <input type="hidden" name="stone_size_price" id="stoneSizePriceInput">
                                        </div>
                                    </div>

                                    <!-- 6. Finish Type -->
                                    <div class="custom-option-group">
                                        <div class="variant-picker-label h6 fw-normal">
                                            <i class="icon-sparkle"></i> Finish Type
                                            <span class="variant-picker-label-value value-currentFinishType">Polished</span>
                                        </div>
                                        <div class="variant-picker-values">
                                            <div class="btn-group flex-wrap">
                                                <span class="finish-btn active" data-finish="Polished" data-price="0">Polished</span>
                                                <span class="finish-btn" data-finish="Matte" data-price="50">Matte (+$50)</span>
                                                <span class="finish-btn" data-finish="Brushed" data-price="75">Brushed (+$75)</span>
                                                <span class="finish-btn" data-finish="Hammered" data-price="100">Hammered (+$100)</span>
                                                <span class="finish-btn" data-finish="Antique" data-price="120">Antique (+$120)</span>
                                            </div>
                                            <input type="hidden" name="finish" id="finishInput" value="Polished">
                                            <input type="hidden" name="finish_price" id="finishPriceInput">
                                        </div>
                                    </div>

                                    <!-- 7. Engraving -->
                                    <div class="custom-option-group">
                                        <div class="variant-picker-label h6 fw-normal">
                                            <i class="icon-edit"></i> Engraving
                                            <span class="variant-picker-label-value value-currentEngraving">None</span>
                                        </div>
                                        <div class="variant-picker-values">
                                            <div class="btn-group flex-wrap">
                                                <span class="engraving-btn active" data-engraving="None" data-price="0">None</span>
                                                <span class="engraving-btn" data-engraving="Name" data-price="75">Name (+$75)</span>
                                                <span class="engraving-btn" data-engraving="Initials" data-price="50">Initials (+$50)</span>
                                                <span class="engraving-btn" data-engraving="Date" data-price="85">Date (+$85)</span>
                                                <span class="engraving-btn" data-engraving="Custom Text" data-price="100">Custom (+$100)</span>
                                            </div>
                                            <div id="engravingTextArea" style="display: none; margin-top: 10px;">
                                                <input type="text" class="engraving-text-input" name="engraving_text" placeholder="Enter engraving text (max 30 characters)" maxlength="30">
                                                <span class="text-muted" style="font-size: 12px; display: block; margin-top: 5px;">Max 30 characters</span>
                                            </div>
                                            <input type="hidden" name="engraving" id="engravingInput" value="None">
                                            <input type="hidden" name="engraving_price" id="engravingPriceInput">
                                        </div>
                                    </div>

                                    <!-- 8. Additional Options -->
                                    <div class="custom-option-group">
                                        <div class="variant-picker-label h6 fw-normal">
                                            <i class="icon-plus-circle"></i> Additional Options
                                        </div>
                                        <div class="variant-picker-values">
                                            <div class="checkbox-custom">
                                                <input type="checkbox" id="giftBox" name="gift_box" value="1" data-price="25">
                                                <label for="giftBox">Luxury Gift Box (+$25)</label>
                                            </div>
                                            <div class="checkbox-custom">
                                                <input type="checkbox" id="certificate" name="certificate" value="1" data-price="50">
                                                <label for="certificate">Authenticity Certificate (+$50)</label>
                                            </div>
                                            <div class="checkbox-custom">
                                                <input type="checkbox" id="rushOrder" name="rush_order" value="1" data-price="75">
                                                <label for="rushOrder">Rush Order (3-5 days) (+$75)</label>
                                            </div>
                                            <div class="checkbox-custom">
                                                <input type="checkbox" id="insurance" name="insurance" value="1" data-price="100">
                                                <label for="insurance">Insurance &amp; Appraisal (+$100)</label>
                                            </div>
                                            <div class="checkbox-custom">
                                                <input type="checkbox" id="matchingBand" name="matching_band" value="1" data-price="350">
                                                <label for="matchingBand">Matching Wedding Band (+$350)</label>
                                            </div>
                                            <input type="hidden" name="extras_price" id="extrasPriceInput">
                                        </div>
                                    </div>

                                    <!-- 9. Ring Size -->
                                    <div class="custom-option-group">
                                        <div class="variant-picker-label h6 fw-normal">
                                            <i class="icon-ring"></i> Ring Size
                                        </div>
                                        <div class="variant-picker-values">
                                            <div class="btn-group flex-wrap">
                                                <span class="size-btn" data-size="5">5</span>
                                                <span class="size-btn" data-size="6">6</span>
                                                <span class="size-btn active" data-size="7">7</span>
                                                <span class="size-btn" data-size="8">8</span>
                                                <span class="size-btn" data-size="9">9</span>
                                                <span class="size-btn" data-size="10">10</span>
                                                <span class="size-btn" data-size="11">11</span>
                                                <span class="size-btn" data-size="12">12</span>
                                            </div>
                                            <input type="hidden" name="ring_size" id="ringSizeInput">
                                        </div>
                                    </div>

                                    <!-- 10. Quantity -->
                                    <div class="custom-option-group">
                                        <div class="variant-picker-label h6 fw-normal"><i class="icon-shopping-bag"></i> Quantity</div>
                                        <div class="variant-picker-values">
                                            <div class="wg-quantity">
                                                <button type="button" class="btn-quantity btn-decrease"><i class="icon-minus"></i></button>
                                                <input class="quantity-product" type="number" name="quantity" id="quantityInput" value="1" min="1" max="10">
                                                <button type="button" class="btn-quantity btn-increase"><i class="icon-plus"></i></button>
                                            </div>
                                        </div>
                                    </div>

                                </div>

                                <!-- Price Breakdown -->
                                <div class="price-breakdown">
                                    <div class="breakdown-item">
                                        <span>Gold Base Price</span>
                                        <span id="goldBasePrice">₹0.00</span>
                                    </div>
                                    <div class="breakdown-item">
                                        <span>Making Charges</span>
                                        <span id="makingCharges">₹0.00</span>
                                    </div>
                                    <div class="breakdown-item">
                                        <span>GST (3%)</span>
                                        <span id="gstAmount">₹0.00</span>
                                    </div>
                                    <div class="breakdown-item">
                                        <span>Other Charges</span>
                                        <span id="otherCharges">₹150.00</span>
                                    </div>
                                    <div class="breakdown-item">
                                        <span>Stone &amp; Customizations</span>
                                        <span id="customizationsTotal">₹0.00</span>
                                    </div>
                                    <div class="breakdown-item">
                                        <span>Total (per piece)</span>
                                        <span id="totalPerPiece">₹0.00</span>
                                    </div>
                                    <div class="breakdown-item" style="border-top: 2px solid #000; padding-top: 10px; margin-top: 5px;">
                                        <span>Total (x<span id="qtyDisplay">1</span>)</span>
                                        <span id="grandTotalDisplay">₹0.00</span>
                                    </div>
                                </div>

                                <div class="tf-product-total-quantity">
                                    <div class="group-btn">
                                        <button type="submit" class="tf-btn btn-fill-2 text-uppercase fw-medium animate-btn">
                                            Add To Cart
                                            <i class="icon-minus d-none d-sm-block"></i>
                                            <span class="price-add d-none d-sm-block" id="cartPriceDisplay">₹0.00</span>
                                        </button>
                                        <div class="group-btn-action">
                                            <a href="javascript:void(0);" class="tf-btn-icon hover-tooltip btn-add-wishlist">
                                                <span class="icon icon-heart-2"></span>
                                                <span class="tooltip">Add to Wishlist</span>
                                            </a>
                                            <a href="#compare" data-bs-toggle="modal" aria-controls="compare" class="tf-btn-icon hover-tooltip">
                                                <span class="icon icon-compare"></span>
                                                <span class="tooltip">Compare</span>
                                            </a>
                                        </div>
                                    </div>
                                    <a href="" class="tf-btn w-100 text-uppercase fw-medium">buy it now</a>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Sticky Add to Cart -->
    <div class="tf-sticky-btn-atc">
        <div class="container">
            <div class="tf-height-observer w-100 d-flex align-items-center">
                <div class="tf-sticky-atc-product d-flex align-items-center">
                    <div class="tf-sticky-atc-img">
                        <img class="lazyload" data-src="{{ asset('assets2/images/products/product-12.jpg') }}" alt="" src="{{ asset('assets2/images/products/product-12.jpg') }}">
                    </div>
                    <div class="tf-sticky-atc-title fw-5 d-lg-block d-none">HALO ENGAGEMENT RING</div>
                </div>
                <div class="tf-sticky-atc-infos">
                    <div class="tf-sticky-atc-variant-price text-center tf-select">
                        <select id="stickySelect">
                            <option value="0">18K Gold / 7 - ₹0.00</option>
                        </select>
                    </div>
                    <div class="tf-sticky-atc-btns">
                        <div class="tf-product-info-quantity">
                            <div class="wg-quantity">
                                <button type="button" class="btn-quantity minus-btn"><i class="icon-minus"></i></button>
                                <input class="quantity-product" type="text" name="number" value="1">
                                <button type="button" class="btn-quantity plus-btn"><i class="icon-plus"></i></button>
                            </div>
                        </div>
                        <button type="button" class="tf-btn btn-fill animate-btn fw-medium" onclick="document.getElementById('productCustomizationForm').submit();">Add to cart</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

 
@endsection