@extends('layouts.app')

@section('content')

<style>
.color-variant-list,
.addon-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.color-variant-item,
.addon-item {
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    padding: 14px;
    cursor: pointer;
    background: #fff;
    display: flex;
    align-items: center;
    gap: 12px;
}

.color-variant-item input,
.addon-item input {
    display: none;
}

.color-variant-item:has(input:checked),
.addon-item:has(input:checked) {
    border-color: #2563eb;
    background: #f8fbff;
}

.color-circle {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid #e5e7eb;
    display: inline-block;
}

.addon-content {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.addon-price {
    font-weight: 800;
    color: #111827;
}
.variant-list{
    display:flex;
    flex-direction:column;
    gap:12px;
}

.variant-item{
    border:1px solid #e5e7eb;
    border-radius:14px;
    padding:14px;
    cursor:pointer;
    transition:0.3s;
    background:#fff;
}

.variant-item:hover{
    border-color:#2563eb;
    background:#f8fbff;
}

.variant-item input{
    display:none;
}

.variant-item input:checked + .variant-content{
    color:#2563eb;
}

.variant-content{
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.variant-price{
    font-weight:700;
    font-size:18px;
}

.variant-color{
    width:14px;
    height:14px;
    border-radius:50%;
    display:inline-block;
    margin-left:8px;
    border:1px solid #ddd;
}
    .product-detail-section {
        background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
        padding: 60px 0;
    }

    .breadcrumb-wrap {
        background: #fff;
        border-radius: 14px;
        padding: 12px 18px;
        margin-bottom: 25px;
        box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
        border: 1px solid #eef2f7;
    }

    .breadcrumb-wrap a {
        color: #6b7280;
        text-decoration: none;
        font-weight: 500;
    }

    .breadcrumb-wrap a:hover {
        color: #111827;
    }

    .product-gallery-card,
    .product-info-card,
    .detail-box,
    .related-card {
        background: #fff;
        border-radius: 22px;
        box-shadow: 0 12px 35px rgba(15, 23, 42, 0.08);
        border: 1px solid #eef2f7;
    }

    .product-gallery-card {
        padding: 18px;
        overflow: hidden;
    }

    .main-product-image {
        background: linear-gradient(135deg, #f8fafc, #eef2f7);
        border-radius: 18px;
        padding: 20px;
        text-align: center;
        margin-bottom: 16px;
        position: relative;
    }

    .main-product-image img {
        width: 100%;
        max-height: 480px;
        object-fit: contain;
        border-radius: 14px;
    }

    .product-badge-group {
        position: absolute;
        top: 16px;
        left: 16px;
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .product-badge {
        display: inline-block;
        padding: 6px 12px;
        border-radius: 50px;
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        color: #fff;
        letter-spacing: .4px;
        box-shadow: 0 8px 18px rgba(0,0,0,0.12);
    }

    .badge-hot {
        background: #ef4444;
    }

    .badge-sale {
        background: #111827;
    }

    .thumb-list {
        display: flex;
        gap: 12px;
        flex-wrap: wrap;
    }

    .thumb-item {
        width: 85px;
        height: 85px;
        border-radius: 14px;
        overflow: hidden;
        border: 2px solid #e5e7eb;
        cursor: pointer;
        transition: 0.3s ease;
        background: #fff;
    }

    .thumb-item.active,
    .thumb-item:hover {
        border-color: #111827;
        transform: translateY(-2px);
    }

    .thumb-item img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .product-info-card {
        padding: 30px;
        height: 100%;
    }

    .product-category {
        font-size: 13px;
        font-weight: 700;
        text-transform: uppercase;
        color: #6b7280;
        letter-spacing: .8px;
        margin-bottom: 10px;
    }

    .product-title {
        font-size: 34px;
        font-weight: 800;
        color: #111827;
        line-height: 1.25;
        margin-bottom: 14px;
    }

    .product-rating {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 18px;
        flex-wrap: wrap;
    }

    .product-rating i {
        color: #f59e0b;
    }

    .rating-text {
        color: #6b7280;
        font-size: 14px;
    }

    .price-wrap {
        display: flex;
        align-items: center;
        gap: 14px;
        flex-wrap: wrap;
        margin-bottom: 20px;
    }

    .current-price {
        font-size: 34px;
        font-weight: 800;
        color: #111827;
    }

    .old-price {
        font-size: 20px;
        color: #9ca3af;
        text-decoration: line-through;
    }

    .save-price {
        background: #ecfdf5;
        color: #059669;
        padding: 8px 14px;
        border-radius: 50px;
        font-size: 13px;
        font-weight: 700;
    }

    .short-description {
        color: #4b5563;
        font-size: 15px;
        line-height: 1.8;
        margin-bottom: 24px;
    }

    .highlight-points {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
        margin-bottom: 24px;
    }

    .highlight-item {
        background: #f8fafc;
        border: 1px solid #eef2f7;
        border-radius: 14px;
        padding: 12px 14px;
        font-size: 14px;
        color: #374151;
        font-weight: 600;
    }

    .highlight-item i {
        color: #111827;
        margin-right: 8px;
    }

    .qty-cart-row {
        display: flex;
        gap: 14px;
        align-items: center;
        flex-wrap: wrap;
        margin-bottom: 22px;
    }

    .qty-box {
        display: flex;
        align-items: center;
        background: #f8fafc;
        border: 1px solid #e5e7eb;
        border-radius: 14px;
        overflow: hidden;
    }

    .qty-btn {
        width: 46px;
        height: 48px;
        border: none;
        background: transparent;
        font-size: 18px;
        font-weight: 700;
        color: #111827;
    }

    .qty-input {
        width: 60px;
        height: 48px;
        border: none;
        text-align: center;
        font-weight: 700;
        background: transparent;
        outline: none;
    }

    .btn-cart-main,
    .btn-buy-now,
    .btn-wishlist {
        border-radius: 14px;
        padding: 13px 22px;
        font-weight: 700;
        font-size: 15px;
        border: none;
        transition: 0.3s ease;
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
    }

    .btn-cart-main {
        background: #111827;
        color: #fff;
    }

    .btn-cart-main:hover {
        background: #000;
        color: #fff;
        text-decoration: none;
    }

    .btn-buy-now {
        background: #0f766e;
        color: #fff;
    }

    .btn-buy-now:hover {
        background: #115e59;
        color: #fff;
        text-decoration: none;
    }

    .btn-wishlist {
        background: #f3f4f6;
        color: #111827;
        border: 1px solid #e5e7eb;
    }

    .btn-wishlist:hover {
        background: #e5e7eb;
        color: #111827;
        text-decoration: none;
    }

    .meta-list {
        border-top: 1px solid #eef2f7;
        padding-top: 20px;
        margin-top: 10px;
    }

    .meta-list p {
        margin-bottom: 10px;
        color: #4b5563;
        font-size: 14px;
    }

    .meta-list strong {
        color: #111827;
    }

    .detail-box {
        padding: 28px;
        margin-top: 28px;
    }

    .detail-box h4 {
        font-size: 22px;
        font-weight: 800;
        color: #111827;
        margin-bottom: 18px;
    }

    .detail-box p {
        color: #4b5563;
        line-height: 1.9;
        margin-bottom: 14px;
    }

    .spec-table {
        width: 100%;
        border-collapse: collapse;
    }

    .spec-table tr:not(:last-child) {
        border-bottom: 1px solid #eef2f7;
    }

    .spec-table th,
    .spec-table td {
        padding: 14px 10px;
        text-align: left;
        font-size: 14px;
    }

    .spec-table th {
        width: 220px;
        color: #111827;
        font-weight: 700;
    }

    .spec-table td {
        color: #4b5563;
    }

    .related-title {
        font-size: 28px;
        font-weight: 800;
        color: #111827;
        margin: 50px 0 25px;
    }

    .related-card {
        overflow: hidden;
        transition: 0.3s ease;
        height: 100%;
    }

    .related-card:hover {
        transform: translateY(-6px);
        box-shadow: 0 18px 45px rgba(15, 23, 42, 0.15);
    }

    .related-img {
        background: linear-gradient(135deg, #f8fafc, #eef2f7);
        padding: 16px;
    }

    .related-img img {
        width: 100%;
        height: 220px;
        object-fit: cover;
        border-radius: 16px;
    }

    .related-content {
        padding: 18px;
    }

    .related-content h5 {
        font-size: 18px;
        font-weight: 700;
        margin-bottom: 10px;
    }

    .related-content h5 a {
        color: #111827;
        text-decoration: none;
    }

    .related-content h5 a:hover {
        color: #0f766e;
    }

    .related-price {
        font-size: 20px;
        font-weight: 800;
        color: #111827;
        margin-bottom: 12px;
    }

    .btn-related {
        display: inline-block;
        width: 100%;
        text-align: center;
        background: #111827;
        color: #fff;
        border-radius: 12px;
        padding: 11px 14px;
        text-decoration: none;
        font-weight: 700;
    }

    .btn-related:hover {
        background: #000;
        color: #fff;
        text-decoration: none;
    }

    @media (max-width: 991px) {
        .product-title {
            font-size: 28px;
        }

        .highlight-points {
            grid-template-columns: 1fr;
        }
    }

    @media (max-width: 767px) {
        .product-detail-section {
            padding: 40px 0;
        }

        .product-info-card {
            padding: 22px 18px;
        }

        .product-title {
            font-size: 24px;
        }

        .current-price {
            font-size: 28px;
        }

        .detail-box {
            padding: 20px 16px;
        }

        .spec-table th,
        .spec-table td {
            display: block;
            width: 100%;
            padding: 10px 0;
        }

        .spec-table th {
            padding-bottom: 4px;
        }
    }
</style>


<section class="product-detail-section">
    <div class="container">

        <div class="breadcrumb-wrap">
            <a href="{{ url('/') }}">Home</a> /
            <a href="{{ route('product') }}">Products</a> /
            <span class="text-dark font-weight-bold">{{ $product->productName }}</span>
        </div>

        <div class="row">
            <div class="col-lg-6 mb-4">
                <div class="product-gallery-card">
                    <div class="main-product-image">
                        <div class="product-badge-group">
                            @if($product->stock == 'Out of Stock')
                                <span class="product-badge badge-hot">Out of Stock</span>
                            @elseif($product->stock == 'Low Stock')
                                <span class="product-badge badge-hot">Low Stock</span>
                            @else
                                <span class="product-badge badge-hot">Available</span>
                            @endif

                            @if($product->discountPercent > 0)
                                <span class="product-badge badge-sale">{{ $product->discountPercent }}% Off</span>
                            @endif
                        </div>

                        <img id="mainProductImage" src="{{ asset($product->thumbImage) }}" alt="{{ $product->productName }}">
                    </div>

                    <div class="thumb-list">
                        <div class="thumb-item active" onclick="changeProductImage(this, '{{ $product->image_url }}')">
                            <img src="{{ $product->image_url }}" alt="{{ $product->productName }}">
                        </div>

                        @if($relatedProducts->count() > 0)
                            @foreach($relatedProducts->take(3) as $thumb)
                                <div class="thumb-item" onclick="changeProductImage(this, '{{ $thumb->image_url }}')">
                                    <img src="{{ $thumb->image_url }}" alt="{{ $thumb->productName }}">
                                </div>
                            @endforeach
                        @endif
                        @if($product->colorVariants->count() > 0)
                            @foreach($product->colorVariants as $color)
                                @if($color->color_image_url)
                                    <div class="thumb-item" onclick="changeProductImage(this, '{{ $color->color_image_url }}')">
                                        <img src="{{ $color->color_image_url }}" alt="{{ $color->color_name }}">
                                    </div>
                                @endif
                            @endforeach
                        @endif
                    </div>
                </div>
            </div>

            <div class="col-lg-6 mb-4">
                <div class="product-info-card">
                    <div class="product-category">
                        {{ $product->category->categoryName ?? 'Sports Trophy' }}
                    </div>

                    <h1 class="product-title">{{ $product->productName }}</h1>

                    <!--<div class="product-rating">-->
                    <!--    <div>-->
                    <!--        <i class="fas fa-star"></i>-->
                    <!--        <i class="fas fa-star"></i>-->
                    <!--        <i class="fas fa-star"></i>-->
                    <!--        <i class="fas fa-star"></i>-->
                    <!--        <i class="fas fa-star-half-alt"></i>-->
                    <!--    </div>-->
                    <!--    <span class="rating-text">Premium Product</span>-->
                    <!--</div>-->

                    
                    <div class="price-wrap">
                        
                        
                        @php
                            $defaultPrice = $product->final_price;
                            $defaultMrp = $product->productMrp;
                        
                            if($product->has_price_variant == 'yes' && $product->priceVariants->count() > 0){
                                $defaultVariant = $product->priceVariants->sortBy('final_price')->first();
                        
                                $defaultPrice = $defaultVariant->final_price;
                                $defaultMrp = $defaultVariant->size_mrp;
                            }
                        
                            $defaultDiscountPercent = 0;
                        
                            if($defaultMrp > 0 && $defaultPrice > 0 && $defaultMrp > $defaultPrice){
                                $defaultDiscountPercent = round((($defaultMrp - $defaultPrice) / $defaultMrp) * 100);
                            }
                        @endphp
                        
                        <div class="price-wrap">
                            <span class="current-price" id="mainPrice">
                                ₹{{ number_format($defaultPrice, 2) }}
                            </span>
                        
                            <span class="old-price" id="mainOldPrice" style="{{ $defaultMrp > $defaultPrice ? '' : 'display:none;' }}">
                                ₹{{ number_format($defaultMrp, 2) }}
                            </span>
                        
                            <span class="save-price" id="mainDiscountPercent" style="{{ $defaultDiscountPercent > 0 ? '' : 'display:none;' }}">
                                {{ $defaultDiscountPercent }}% Off
                            </span>
                        </div>
                    
                    </div>
                    
                    @if($product->has_price_variant == 'yes' && $product->priceVariants->count() > 0)
                    
                    <div class="variant-box mt-4">
                    
                        <label class="fw-bold mb-3 d-block">
                            Choose Size
                        </label>
                    
                        <div class="variant-list">
                    
                            @foreach($product->priceVariants as $index => $variant)
                    
                                <label class="variant-item">
                                    <input type="radio"
                                   name="price_variant"
                                   value="{{ $variant->id }}"
                                   data-price="{{ $variant->final_price }}"
                                   data-mrp="{{ $variant->size_mrp }}"
                                   {{ $index == 0 ? 'checked' : '' }}>
                    
                                    <div class="variant-content">
                    
                                        <div>
                                            <strong>{{ $variant->size_name }}</strong>
                                        </div>
                                        <div class="variant-price">
                                            ₹{{ number_format($variant->final_price, 2) }}
                                        
                                            @if($variant->size_mrp > 0 && $variant->size_mrp > $variant->final_price)
                                                <small style="color:#9ca3af;text-decoration:line-through;margin-left:6px;">
                                                    ₹{{ number_format($variant->size_mrp, 2) }}
                                                </small>
                                        
                                                <small style="color:#059669;font-weight:700;margin-left:6px;">
                                                    {{ round((($variant->size_mrp - $variant->final_price) / $variant->size_mrp) * 100) }}% Off
                                                </small>
                                            @endif
                                        </div>
                    
                                    </div>
                    
                                </label>
                    
                            @endforeach
                            @if($product->has_color_variant == 'yes' && $product->colorVariants->count() > 0)

                            <div class="variant-box mt-4">
                                <label class="fw-bold mb-3 d-block">Choose Color</label>
                            
                                <div class="color-variant-list">
                                    @foreach($product->colorVariants as $index => $color)
                                        <label class="color-variant-item">
                            
                                            <input type="radio"
                                                   name="color_variant"
                                                   value="{{ $color->id }}"
                                                   data-color-name="{{ $color->color_name }}"
                                                   data-color-image="{{ $color->color_image_url }}"
                                                   {{ $index == 0 ? 'checked' : '' }}>
                            
                                            <span class="color-circle" style="background: {{ $color->color_code }}"></span>
                            
                                            <span>{{ $color->color_name }}</span>
                                        </label>
                                    @endforeach
                                </div>
                            </div>
                            
                            @endif
                            
                            
                            @if($product->addons->count() > 0)
                            
                            <div class="variant-box mt-4">
                                <label class="fw-bold mb-3 d-block">Add Extra Addons?</label>
                            
                                <div class="addon-list">
                                    @foreach($product->addons as $addon)
                                        <label class="addon-item">
                            
                                            <input type="checkbox"
                                                   name="addons[]"
                                                   value="{{ $addon->id }}"
                                                   data-price="{{ $addon->addon_price }}">
                            
                                            <div class="addon-content">
                                                <div>
                                                    <strong>{{ $addon->addon_label }}</strong>
                                                    <small class="d-block text-muted">
                                                        {{ $addon->addon_type == 'per_qty' ? 'Per Quantity' : 'Per Order' }}
                                                    </small>
                                                </div>
                            
                                                <div class="addon-price">
                                                    + ₹{{ number_format($addon->addon_price, 2) }}
                                                </div>
                                            </div>
                            
                                        </label>
                                    @endforeach
                                </div>
                            </div>
                            
                            @endif
                    
                        </div>
                    
                    </div>
                    
                    @endif

                    <p class="short-description">
                        {{ $product->productDescription ?: 'Premium quality sports product crafted for tournaments, school competitions, club events and championship awards.' }}
                    </p>

                    <!--<div class="highlight-points">-->
                    <!--    <div class="highlight-item"><i class="fas fa-check-circle"></i> Premium Finish</div>-->
                    <!--    <div class="highlight-item"><i class="fas fa-check-circle"></i> Durable Material</div>-->
                    <!--    <div class="highlight-item"><i class="fas fa-check-circle"></i> Best For Awards</div>-->
                    <!--    <div class="highlight-item"><i class="fas fa-check-circle"></i> Fast Delivery</div>-->
                    <!--</div>-->

                    <div class="qty-cart-row">
                        <div class="qty-box">
                            <button type="button" class="qty-btn" onclick="decreaseQty()">-</button>
                            <input type="text" id="productQty" class="qty-input" value="1" readonly>
                            <button type="button" class="qty-btn" onclick="increaseQty()">+</button>
                        </div>

                        <!--<a href="javascript:void(0)" class="btn-cart-main">-->
                        <!--    <i class="fas fa-shopping-cart"></i> Add To Cart-->
                        <!--</a>-->
                        <a href="javascript:void(0)" 
                           class="btn-cart-main {{ in_array($product->id, $cartProductIds) ? 'goToCartBtn' : 'addToCartBtn' }}"
                           data-id="{{ $product->id }}">
                        
                            <i class="fa {{ in_array($product->id, $cartProductIds) ? 'fa-check' : 'fa-shopping-cart' }} mr-1"></i>
                        
                            <span class="btn-text">
                                {{ in_array($product->id, $cartProductIds) ? 'Go To Cart' : 'Add To Cart' }}
                            </span>
                        </a>

                        <a href="javascript:void(0)" class="btn-buy-now">
                            <i class="fas fa-bolt"></i> Buy Now
                        </a>
                    </div>

                    <!--<a href="javascript:void(0)" class="btn-wishlist mb-3">-->
                    <!--    <i class="far fa-heart"></i> Add To Wishlist-->
                    <!--</a>-->

                    <div class="meta-list">
                        <p><strong>SKU:</strong> PROD-{{ str_pad($product->id, 4, '0', STR_PAD_LEFT) }}</p>
                        <p><strong>Category:</strong> {{ $product->category->categoryName ?? 'Sports Trophy' }}</p>
                        <p>
                            <strong>Availability:</strong>
                            @if($product->stock == 'Out of Stock')
                                <span class="text-danger font-weight-bold">{{ $product->stock }}</span>
                            @elseif($product->stock == 'Low Stock')
                                <span class="text-warning font-weight-bold">{{ $product->stock }}</span>
                            @else
                                <span class="text-success font-weight-bold">{{ $product->stock }}</span>
                            @endif
                            
                        </p>
                        <p><strong>Shipping:</strong> Delivery available across India</p>
                    </div>
                </div>
            </div>
        </div>

        <div class="detail-box">
            <h4>Product Description</h4>
            <p>
                {{ $product->productDescription ?: 'This premium product is specially designed to celebrate excellence and achievement. Its attractive design and quality finish make it a perfect choice for sports events, school competitions, club tournaments and award ceremonies.' }}
            </p>
        </div>

        <div class="detail-box">
            <h4>Specifications</h4>
            <table class="spec-table">
                <tr>
                    <th>Product Name</th>
                    <td>{{ $product->productName }}</td>
                </tr>
                <tr>
                    <th>Category</th>
                    <td>{{ $product->category->categoryName ?? 'Sports Trophy' }}</td>
                </tr>
                <tr>
                    <th>Selling Price</th>
                    <td>₹{{ number_format($product->final_price, 2) }}</td>
                </tr>
                @if($product->productMrp > 0)
                <tr>
                    <th>MRP</th>
                    <td>₹{{ number_format($product->productMrp, 2) }}</td>
                </tr>
                @endif
                <tr>
                    <th>Stock Status</th>
                    <td>{{ $product->stock }}</td>
                </tr>
                @if($product->specifications->count() > 0)
                    @foreach($product->specifications as $spec)
                        <tr>
                            <th>{{ $spec->specificationTitle }}</th>
                            <td>{{ $spec->specificationValue }}</td>
                        </tr>
                    @endforeach
                @endif
                <tr>
                    <th>Customization</th>
                    <td>Available on request</td>
                </tr>
            </table>
        </div>

        @if($relatedProducts->count() > 0)
            <h3 class="related-title">Related Products</h3>

            <div class="row">
                @foreach($relatedProducts as $item)
                    <div class="col-lg-3 col-md-6 mb-4">
                        <div class="related-card">
                            <div class="related-img">
                                <img src="{{ $item->image_url }}" alt="{{ $item->productName }}">
                            </div>
                            <div class="related-content">
                                <h5>
                                    <a href="{{ route('product.details', $item->id) }}">
                                        {{ $item->productName }}
                                    </a>
                                </h5>
                                <div class="related-price">₹{{ number_format($item->final_price, 2) }}</div>
                                <a href="{{ route('product.details', $item->id) }}" class="btn-related">View Product</a>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
        @endif

    </div>
</section>
<div id="cart-toast" class="cart-toast">
    <div class="cart-toast-content">
        <i class="fas fa-check-circle"></i>
        <span id="cart-toast-text">Added to cart</span>
        <a href="{{ route('cart.index') }}" id="view-cart-btn" class="view-cart-btn d-none">
            View Cart
        </a>
    </div>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
function showToast(message, showButton = false) {
    const toast = document.getElementById('cart-toast');
    const text = document.getElementById('cart-toast-text');
    const btn = document.getElementById('view-cart-btn');

    text.innerText = message;

    if (showButton) {
        btn.classList.remove('d-none');
    } else {
        btn.classList.add('d-none');
    }

    toast.classList.add('show');

    setTimeout(() => {
        toast.classList.remove('show');
    }, 4000);
}
$(document).on('change', 'input[name="color_variant"]', function () {
    let colorImage = $(this).data('color-image');

    if (colorImage) {
        $('#mainProductImage').attr('src', colorImage);
    }
});
$(document).on('click', '.addToCartBtn', function () {
    let selectedAddons = [];
    
    $('input[name="addons[]"]:checked').each(function () {
        selectedAddons.push($(this).val());
    });


    
    let btn = $(this);
    let product_id = btn.data('id');

    $.ajax({
        url: "{{ route('cart.add') }}",
        type: "POST",
        // data: {
        //     product_id: product_id,
        //     variant_id: $('input[name="price_variant"]:checked').val(),
        //     qty: $('#productQty').val(),
        //     _token: "{{ csrf_token() }}"
        // },
        data: {
            product_id: product_id,
            variant_id: $('input[name="price_variant"]:checked').val(),
            color_variant_id: $('input[name="color_variant"]:checked').val(),
            addons: selectedAddons,
            qty: $('#productQty').val(),
            _token: "{{ csrf_token() }}"
        },
        success: function (res) {

            if (res.status === 'login_required') {
                window.location.href = "{{ url('/login') }}";
            }

            // ✅ First time added
            if (res.status === 'added') {

                showToast("✔ Added to cart");

                btn.find('.btn-text').text('Go To Cart');
                btn.removeClass('addToCartBtn').addClass('goToCartBtn');

            }

            // ✅ Already exists
            if (res.status === 'exists') {

                showToast("Already in cart", true);

                btn.find('.btn-text').text('Go To Cart');
                btn.removeClass('addToCartBtn').addClass('goToCartBtn');

            }
        }
    });

});
$(document).on('click', '.goToCartBtn', function () {
    window.location.href = "{{ route('cart.index') }}";
});
</script>
<script>
    function changeProductImage(element, imageUrl) {
        document.getElementById('mainProductImage').src = imageUrl;

        document.querySelectorAll('.thumb-item').forEach(function(item) {
            item.classList.remove('active');
        });

        element.classList.add('active');
    }

    function increaseQty() {
        let qtyInput = document.getElementById('productQty');
        let currentQty = parseInt(qtyInput.value);
        qtyInput.value = currentQty + 1;
    }

    function decreaseQty() {
        let qtyInput = document.getElementById('productQty');
        let currentQty = parseInt(qtyInput.value);

        if (currentQty > 1) {
            qtyInput.value = currentQty - 1;
        }
    }
</script>
<script>
$(document).on('change', 'input[name="price_variant"]', function () {
    let price = parseFloat($(this).data('price'));
    let mrp = parseFloat($(this).data('mrp'));

    if (isNaN(price)) price = 0;
    if (isNaN(mrp)) mrp = 0;

    $('#mainPrice').text('₹' + price.toFixed(2));

    if (mrp > price) {
        let discount = Math.round(((mrp - price) / mrp) * 100);

        $('#mainOldPrice').text('₹' + mrp.toFixed(2)).show();
        $('#mainDiscountPercent').text(discount + '% Off').show();
    } else {
        $('#mainOldPrice').hide();
        $('#mainDiscountPercent').hide();
    }
});
</script>



@endsection