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

<style>
:root {
    --pl-blue: #FFB300;
    --pl-blue-dark: #1743c7;
    --pl-navy: #071342;
    --pl-sky: #fffeee;
    --pl-soft: #f7faff;
    --pl-border: #edbf42;
    --pl-text: #111827;
    --pl-muted: #64748b;
    --pl-green: #22c55e;
    --pl-red: #ef4444;
}
#load-more {
    background: linear-gradient(135deg, #f6ca53, #c68f1a);
}
  .print-cart-btn {
    flex: 1;
    background: #ffc830;
    border: 1px solid #f6ca53;
    }
.print-products-section {
    position: relative;
    overflow: hidden;
    padding: 80px 0;
background: radial-gradient(circle at top right, rgb(232 185 47 / 14%), transparent 28%), radial-gradient(circle at bottom left, rgb(232 196 47 / 9%), transparent 30%), linear-gradient(180deg, #fffef7 0%, #ffffff 48%, #fffaee 100%);
}

.print-products-section::before {
    content: "";
    position: absolute;
    top: 60px;
    right: -90px;
    width: 280px;
    height: 280px;
    background: rgb(232 182 47 / 21%);
    border-radius: 50%;
}

.print-products-section::after {
    content: "";
    position: absolute;
    bottom: 70px;
    left: -120px;
    width: 320px;
    height: 320px;
    background: rgb(232 182 47 / 21%);
    border-radius: 50%;
}

.print-products-section .container {
    position: relative;
    z-index: 2;
}

.print-header {
    background: rgba(255,255,255,.82);
    border: 1px solid var(--pl-border);
    border-radius: 30px;
    padding: 32px;
    margin-bottom: 38px;
    box-shadow: 0 18px 50px rgba(47, 94, 232, .08);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
    flex-wrap: wrap;
}

.print-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--pl-sky);
    color: var(--pl-blue);
    padding: 8px 15px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .8px;
    margin-bottom: 14px;
}

.print-header h2 {
    margin: 0;
    color: var(--pl-navy);
    font-size: 38px;
    line-height: 1.15;
    font-weight: 950;
}

.print-header p {
    color: var(--pl-muted);
    max-width: 650px;
    margin: 12px 0 0;
    font-size: 15.5px;
    line-height: 1.7;
}

.print-header-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: flex-end;
}

.print-pill {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background: linear-gradient(135deg, var(--pl-blue), var(--pl-navy));
    color: #fff;
    padding: 13px 22px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 900;
    box-shadow: 0 16px 36px rgba(47, 94, 232, .25);
    white-space: nowrap;
}

.print-mini-note {
    color: var(--pl-muted);
    font-size: 13px;
    font-weight: 700;
}

.print-search-result {
    background: #fff;
    border: 1px solid var(--pl-border);
    border-radius: 20px;
    padding: 18px 22px;
    margin-bottom: 28px;
    box-shadow: 0 10px 30px rgba(47, 94, 232, .08);
}

.print-search-result h4 {
    color: var(--pl-navy);
    font-weight: 900;
    margin-bottom: 4px;
}

.print-search-result p {
    margin: 0;
    color: var(--pl-muted);
}

.print-card {
    height: 100%;
    position: relative;
    background: #fff;
    border-radius: 26px;
    overflow: hidden;
    box-shadow: 0 14px 38px rgba(15, 23, 42, .07);
    transition: all .35s ease;
}

.print-card:hover {
    transform: translateY(-9px);
    box-shadow: 0 24px 60px rgba(47, 94, 232, .18);
    border-color: rgba(47, 94, 232, .35);
}

.print-card {
    border: 1px solid #f2d373;
}

.print-img-link {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: 20px;
    background: #fff;
}

.print-img-link img {
    width: 100%;
    height: 255px;
    object-fit: cover;
    transition: transform .45s ease;
}

.print-card:hover .print-img-link img {
    transform: scale(1.08);
}

.print-img-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 45%, rgba(7,19,66,.22));
    opacity: 0;
    transition: .35s ease;
}

.print-card:hover .print-img-overlay {
    opacity: 1;
}

.print-badges {
    position: absolute;
    top: 17px;
    left: 17px;
    z-index: 4;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.print-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: fit-content;
    padding: 7px 12px;
    border-radius: 999px;
    color: #fff;
    font-size: 10.5px;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: .4px;
    box-shadow: 0 9px 20px rgba(0,0,0,.15);
}

.badge-available { background: var(--pl-blue); }
.badge-low { background: #f59e0b; }
.badge-out { background: var(--pl-red); }
.badge-off { background: var(--pl-navy); }

.print-content {
    padding: 21px;
}

.print-category {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--pl-blue);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .7px;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.print-title {
    min-height: 50px;
    margin-bottom: 12px;
    font-size: 18px;
    font-weight: 950;
    line-height: 1.38;
    color: var(--pl-navy);
}

.print-title a {
    color: inherit;
    text-decoration: none;
}

.print-title a:hover {
    color: var(--pl-blue);
}

.print-features {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-bottom: 15px;
}

.print-feature {
    background: var(--pl-soft);
    border: 1px solid var(--pl-border);
    color: var(--pl-muted);
    font-size: 11px;
    font-weight: 800;
    padding: 5px 9px;
    border-radius: 999px;
}

.print-price-box {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding-top: 13px;
    margin-bottom: 18px;
    border-top: 1px dashed var(--pl-border);
}

.print-old-price {
    color: #94a3b8;
    font-size: 15px;
}

.print-price {
    color: var(--pl-navy);
    font-size: 23px;
    font-weight: 950;
}
.print-img-wrap {
    position: relative;
    padding: 18px;
    background: radial-gradient(circle at top right, rgb(232 201 47 / 16%), transparent 38%), linear-gradient(135deg, #f7faff, #ffffee);
}
.print-price-start {
    font-size: 12px;
    font-weight: 800;
    color: var(--pl-muted);
}

.print-bottom {
    display: flex;
    gap: 10px;
}

.print-cart-btn,
.print-view-btn {
    border-radius: 15px;
    font-weight: 900;
    padding: 12px 14px;
    font-size: 14px;
    text-align: center;
    text-decoration: none;
    transition: .3s ease;
}

.print-cart-btn {
    flex: 1;
    color: #fff;
    box-shadow: 0 12px 24px rgba(47, 94, 232, .18);
}

.print-cart-btn:hover {
    background: var(--pl-navy);
    border-color: var(--pl-navy);
    color: #fff;
    text-decoration: none;
    transform: translateY(-2px);
}

.print-view-btn {
    width: 52px;
    background: var(--pl-sky);
    color: var(--pl-blue);
    border: 1px solid var(--pl-border);
}

.print-view-btn:hover {
    background: var(--pl-blue);
    color: #fff;
    text-decoration: none;
}

.print-empty {
    background: #fff;
    border: 1px solid var(--pl-border);
    border-radius: 24px;
    padding: 45px 20px;
    text-align: center;
    box-shadow: 0 14px 38px rgba(47, 94, 232, .08);
}

.print-empty i {
    font-size: 45px;
    color: var(--pl-blue);
    margin-bottom: 15px;
}

.print-empty h4 {
    color: var(--pl-navy);
    font-weight: 950;
}

.print-empty p {
    color: var(--pl-muted);
    margin-bottom: 0;
}

.load-more-wrap {
    margin-top: 40px;
}

#load-more {
    border: none;
    color: #fff;
    border-radius: 999px;
    padding: 15px 38px;
    font-weight: 950;
    font-size: 15px;
    box-shadow: 0 16px 35px rgba(47, 94, 232, .25);
    transition: .3s ease;
}

#load-more:hover {
    transform: translateY(-3px);
    box-shadow: 0 20px 42px rgba(47, 94, 232, .34);
}

#load-more:disabled {
    opacity: .7;
    cursor: not-allowed;
    transform: none;
}

/* Modal */
.pl-modal {
    position: fixed;
    inset: 0;
    background: rgba(7, 19, 66, .68);
    z-index: 99999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 18px;
}

.pl-modal.show {
    display: flex;
}

.pl-modal-box {
    width: 100%;
    max-width: 650px;
    max-height: 90vh;
    overflow-y: auto;
    background: #fff;
    border-radius: 28px;
    padding: 24px;
    position: relative;
    box-shadow: 0 30px 80px rgba(0,0,0,.30);
}

.pl-modal-close {
    position: absolute;
    top: 14px;
    right: 16px;
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 50%;
    background: var(--pl-sky);
    color: var(--pl-navy);
    font-size: 24px;
    font-weight: 900;
    cursor: pointer;
}

.pl-modal-head {
    display: flex;
    gap: 16px;
    align-items: center;
    padding-right: 40px;
    margin-bottom: 20px;
}

.pl-modal-head img {
    width: 88px;
    height: 88px;
    border-radius: 18px;
    object-fit: cover;
    background: var(--pl-sky);
}

.pl-modal-head h4 {
    margin: 0;
    font-size: 21px;
    font-weight: 950;
    color: var(--pl-navy);
}

.pl-modal-head p {
    margin: 6px 0 0;
    color: var(--pl-muted);
    font-size: 14px;
}

.pl-option-box {
    background: var(--pl-soft);
    border: 1px solid var(--pl-border);
    border-radius: 20px;
    padding: 16px;
    margin-bottom: 15px;
}

.pl-option-box h5 {
    color: var(--pl-navy);
    font-size: 15px;
    font-weight: 950;
    margin-bottom: 12px;
}

.pl-option-list,
.pl-color-list {
    display: grid;
    gap: 10px;
}

.pl-option-item,
.pl-color-item {
    background: #fff;
    border: 1px solid var(--pl-border);
    border-radius: 15px;
    padding: 13px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-weight: 800;
    color: var(--pl-navy);
}

.pl-option-item input,
.pl-color-item input {
    display: none;
}

.pl-option-item.active,
.pl-color-item.active {
    border-color: var(--pl-blue);
    background: var(--pl-sky);
    box-shadow: inset 0 0 0 1px var(--pl-blue);
}

.pl-color-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.pl-color-dot {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 3px solid #fff;
    box-shadow: 0 0 0 1px var(--pl-border);
}

.pl-modal-bottom {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-top: 18px;
}

.pl-qty {
    display: flex;
    align-items: center;
    border: 1px solid var(--pl-border);
    background: var(--pl-soft);
    border-radius: 16px;
    overflow: hidden;
}

.pl-qty button {
    width: 45px;
    height: 48px;
    border: 0;
    background: transparent;
    font-size: 20px;
    font-weight: 950;
    color: var(--pl-navy);
    cursor: pointer;
}

.pl-qty input {
    width: 55px;
    height: 48px;
    border: 0;
    text-align: center;
    background: transparent;
    font-weight: 950;
    outline: none;
}

.pl-confirm-btn {
    flex: 1;
    border: 0;
    background: linear-gradient(135deg, var(--pl-blue), var(--pl-navy));
    color: #fff;
    border-radius: 16px;
    padding: 14px 18px;
    font-weight: 950;
    cursor: pointer;
}

.pl-confirm-btn:disabled {
    opacity: .65;
    cursor: not-allowed;
}

/* Toast */
.cart-toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%) translateY(110px);
    background: var(--pl-navy);
    color: #fff;
    padding: 14px 20px;
    border-radius: 999px;
    box-shadow: 0 15px 38px rgba(0,0,0,.28);
    z-index: 999999;
    opacity: 0;
    transition: .4s ease;
}

.cart-toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.cart-toast-content {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 850;
}

.cart-toast i {
    color: var(--pl-green);
}

.view-cart-btn {
    margin-left: 8px;
    background: var(--pl-blue);
    color: #fff;
    padding: 7px 13px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 900;
    text-decoration: none;
}

.view-cart-btn:hover {
    background: var(--pl-blue-dark);
    color: #fff;
    text-decoration: none;
}

@media (max-width: 991px) {
    .print-products-section {
        padding: 60px 0;
    }

    .print-header {
        padding: 26px;
    }

    .print-header h2 {
        font-size: 30px;
    }

    .print-img-link img {
        height: 225px;
    }

    .print-header-actions {
        align-items: flex-start;
    }
}

@media (max-width: 767px) {
    .print-products-section {
        padding: 45px 0;
    }

    .print-header {
        padding: 22px;
        border-radius: 24px;
    }

    .print-header h2 {
        font-size: 25px;
    }

    .print-header p {
        font-size: 14px;
    }

    .print-pill {
        font-size: 12px;
        padding: 11px 16px;
    }

    .print-content {
        padding: 18px;
    }

    .print-title {
        min-height: auto;
        font-size: 17px;
    }

    .print-price {
        font-size: 21px;
    }

    .pl-modal-box {
        padding: 20px;
        border-radius: 22px;
    }

    .pl-modal-head {
        align-items: flex-start;
    }

    .pl-modal-bottom {
        flex-direction: column;
    }

    .pl-qty,
    .pl-confirm-btn {
        width: 100%;
    }

    .pl-qty {
        justify-content: space-between;
    }

    .cart-toast {
        width: calc(100% - 26px);
        border-radius: 18px;
        text-align: center;
    }

    .cart-toast-content {
        justify-content: center;
        flex-wrap: wrap;
    }
}
</style>

<section class="print-products-section">
    <div class="container">

        @if(!empty($q))
            <div class="print-search-result">
                <h4>Search Results for "{{ $q }}"</h4>
                <p>{{ $products->count() }} product(s) found for your search.</p>
            </div>
        @endif

        <div class="row" id="featured-products-list">
            @forelse($products as $product)

                @php
                    $defaultPrice = $product->final_price ?? $product->discountPrice ?? $product->productCost ?? 0;
                    $defaultOldPrice = $product->old_price ?? $product->productMrp ?? 0;

                    if(
                        ($product->has_price_variant ?? '') == 'yes' &&
                        isset($product->priceVariants) &&
                        $product->priceVariants->count() > 0
                    ){
                        $defaultVariant = $product->priceVariants->sortBy('final_price')->first();
                        $defaultPrice = $defaultVariant->final_price ?? $defaultVariant->discountPrice ?? $defaultVariant->size_price ?? 0;
                        $defaultOldPrice = $defaultVariant->size_mrp ?? 0;
                    }

                    $discountPercent = 0;
                    if($defaultOldPrice > 0 && $defaultOldPrice > $defaultPrice){
                        $discountPercent = round((($defaultOldPrice - $defaultPrice) / $defaultOldPrice) * 100);
                    }

                    $hasInCart = in_array($product->id, $cartProductIds ?? []);
                @endphp

                <div class="col-lg-3 col-md-4 col-sm-6 mb-4 product-item">
                    <div class="print-card">

                        <div class="print-img-wrap">
                            <div class="print-badges">
                                @if($product->stock == 'Out of Stock')
                                    <span class="print-badge badge-out">
                                        <i class="fas fa-times-circle"></i> Out of Stock
                                    </span>
                                @elseif($product->stock == 'Low Stock')
                                    <span class="print-badge badge-low">
                                        <i class="fas fa-exclamation-circle"></i> Low Stock
                                    </span>
                                @else
                                    <span class="print-badge badge-available">
                                        <i class="fas fa-check-circle"></i> Available
                                    </span>
                                @endif

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

                            <a href="{{ route('product.details', $product->id) }}" class="print-img-link">
                                <img src="{{ asset($product->thumbImage ?? $product->image) }}" alt="{{ $product->productName }}">
                                <span class="print-img-overlay"></span>
                            </a>
                        </div>

                        <div class="print-content">
                            <div class="print-category">
                                <i class="fas fa-layer-group"></i>
                                {{ $product->category->categoryName ?? 'Printing Product' }}
                            </div>

                            <h3 class="print-title">
                                <a href="{{ route('product.details', $product->id) }}">
                                    {{ $product->productName }}
                                </a>
                            </h3>

                            <div class="print-features">
                                @if(($product->has_price_variant ?? '') == 'yes' && isset($product->priceVariants) && $product->priceVariants->count() > 0)
                                    <span class="print-feature">Size Options</span>
                                @endif

                                @if(($product->has_color_variant ?? '') == 'yes' && isset($product->colorVariants) && $product->colorVariants->count() > 0)
                                    <span class="print-feature">Color Options</span>
                                @endif

                                @if(isset($product->addons) && $product->addons->count() > 0)
                                    <span class="print-feature">Addons</span>
                                @endif

                                <span class="print-feature">HD Print</span>
                            </div>

                            <div class="print-price-box">
                                @if($defaultOldPrice > 0 && $defaultOldPrice > $defaultPrice)
                                    <del class="print-old-price">
                                        ₹{{ number_format($defaultOldPrice, 2) }}
                                    </del>
                                @endif

                                <!--<span class="print-price-start">From</span>-->

                                <span class="print-price">
                                    ₹{{ number_format($defaultPrice, 2) }}
                                </span>
                            </div>

                            <div class="print-bottom">
                                @if($product->stock == 'Out of Stock')
                                    <a href="javascript:void(0)" class="print-cart-btn" style="background:#94a3b8;border-color:#94a3b8;cursor:not-allowed;">
                                        <i class="fas fa-ban mr-1"></i>
                                        Out of Stock
                                    </a>
                                @else
                                    <a href="javascript:void(0)"
                                       class="print-cart-btn productCartBtn {{ $hasInCart ? 'goToCartBtn' : '' }}"
                                       data-id="{{ $product->id }}">

                                        <i class="fa {{ $hasInCart ? 'fa-check' : 'fa-shopping-cart' }} mr-1"></i>

                                        <span class="btn-text">
                                            {{ $hasInCart ? 'Go To Cart' : 'Add To Cart' }}
                                        </span>
                                    </a>
                                @endif

                                <a href="{{ route('product.details', $product->id) }}"
                                   class="print-view-btn"
                                   title="View Product">
                                    <i class="fas fa-arrow-right"></i>
                                </a>
                            </div>
                        </div>

                        <script type="application/json" id="productData-{{ $product->id }}">
                            {
                                "id": "{{ $product->id }}",
                                "name": @json($product->productName),
                                "image": @json(asset($product->thumbImage ?? $product->image)),
                                "price": "{{ $defaultPrice }}",
                                "has_price_variant": "{{ $product->has_price_variant ?? 'no' }}",
                                "has_color_variant": "{{ $product->has_color_variant ?? 'no' }}",
                                "variants": [
                                    @if(isset($product->priceVariants))
                                        @foreach($product->priceVariants as $variant)
                                            {
                                                "id": "{{ $variant->id }}",
                                                "name": @json($variant->size_name ?? $variant->size ?? 'Variant'),
                                                "price": "{{ $variant->final_price ?? $variant->discountPrice ?? $variant->size_price ?? 0 }}",
                                                "mrp": "{{ $variant->size_mrp ?? 0 }}"
                                            }@if(!$loop->last),@endif
                                        @endforeach
                                    @endif
                                ],
                                "colors": [
                                    @if(isset($product->colorVariants))
                                        @foreach($product->colorVariants as $color)
                                            {
                                                "id": "{{ $color->id }}",
                                                "name": @json($color->color_name ?? 'Color'),
                                                "code": "{{ $color->color_code ?? '#2f5ee8' }}",
                                                "image": @json(!empty($color->color_image_url) ? $color->color_image_url : '')
                                            }@if(!$loop->last),@endif
                                        @endforeach
                                    @endif
                                ],
                                "addons": [
                                    @if(isset($product->addons))
                                        @foreach($product->addons as $addon)
                                            {
                                                "id": "{{ $addon->id }}",
                                                "label": @json($addon->addon_label ?? $addon->title ?? 'Addon'),
                                                "price": "{{ $addon->addon_price ?? $addon->price ?? 0 }}",
                                                "type": "{{ $addon->addon_type ?? 'per_order' }}"
                                            }@if(!$loop->last),@endif
                                        @endforeach
                                    @endif
                                ]
                            }
                        </script>

                    </div>
                </div>

            @empty
                <div class="col-12">
                    <div class="print-empty">
                        <i class="fas fa-box-open"></i>
                        <h4>No Products Found</h4>
                        <p>
                            No printing products found{{ !empty($q) ? ' for "' . $q . '"' : '' }}.
                        </p>
                    </div>
                </div>
            @endforelse
        </div>

        @if($products->count() > 8)
            <div class="text-center load-more-wrap">
                <button id="load-more" type="button">
                    Show More Products
                    <i class="fas fa-arrow-down ml-1"></i>
                </button>
            </div>
        @endif

    </div>
</section>

<div id="variantModal" class="pl-modal">
    <div class="pl-modal-box">
        <button type="button" class="pl-modal-close" onclick="closeVariantModal()">×</button>

        <div class="pl-modal-head">
            <img id="modalProductImage" src="" alt="">
            <div>
                <h4 id="modalProductName"></h4>
                <p>Select printing options before adding to cart.</p>
            </div>
        </div>

        <input type="hidden" id="modalProductId">

        <div id="modalVariantBox" class="pl-option-box d-none">
            <h5><i class="fas fa-ruler-combined"></i> Choose Variant / Size</h5>
            <div id="modalVariantList" class="pl-option-list"></div>
        </div>

        <div id="modalColorBox" class="pl-option-box d-none">
            <h5><i class="fas fa-palette"></i> Choose Color</h5>
            <div id="modalColorList" class="pl-color-list"></div>
        </div>

        <div id="modalAddonBox" class="pl-option-box d-none">
            <h5><i class="fas fa-plus-circle"></i> Choose Addons</h5>
            <div id="modalAddonList" class="pl-option-list"></div>
        </div>

        <div class="pl-modal-bottom">
            <div class="pl-qty">
                <button type="button" onclick="modalQtyMinus()">-</button>
                <input type="text" id="modalQty" value="1" readonly>
                <button type="button" onclick="modalQtyPlus()">+</button>
            </div>

            <button type="button" class="pl-confirm-btn" id="confirmCartBtn" onclick="confirmAddToCart()">
                <i class="fas fa-shopping-cart"></i> Add To Cart
            </button>
        </div>
    </div>
</div>

<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>
let selectedProductData = null;

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('click', '.productCartBtn', function () {
    let btn = $(this);
    let productId = btn.data('id');

    if (btn.hasClass('goToCartBtn')) {
        window.location.href = "{{ route('cart.index') }}";
        return;
    }

    let rawData = document.getElementById('productData-' + productId);

    if (!rawData) {
        directAddToCart(productId);
        return;
    }

    selectedProductData = JSON.parse(rawData.textContent);

    let hasVariant = selectedProductData.variants.length > 0;
    let hasColor = selectedProductData.colors.length > 0;
    let hasAddon = selectedProductData.addons.length > 0;

    if (!hasVariant && !hasColor && !hasAddon) {
        directAddToCart(productId);
        return;
    }

    openVariantModal(selectedProductData);
});

function openVariantModal(product) {
    $('#modalProductId').val(product.id);
    $('#modalProductName').text(product.name);
    $('#modalProductImage').attr('src', product.image);
    $('#modalQty').val(1);

    $('#modalVariantList').html('');
    $('#modalColorList').html('');
    $('#modalAddonList').html('');

    if (product.variants.length > 0) {
        $('#modalVariantBox').removeClass('d-none');

        product.variants.forEach(function (variant, index) {
            let mrpHtml = '';

            if (parseFloat(variant.mrp) > parseFloat(variant.price)) {
                mrpHtml = `<small style="color:#94a3b8;text-decoration:line-through;margin-left:6px;">₹${parseFloat(variant.mrp).toFixed(2)}</small>`;
            }

            $('#modalVariantList').append(`
                <label class="pl-option-item ${index === 0 ? 'active' : ''}">
                    <input type="radio" name="modal_variant" value="${variant.id}" ${index === 0 ? 'checked' : ''}>
                    <span>${variant.name}</span>
                    <strong>₹${parseFloat(variant.price).toFixed(2)} ${mrpHtml}</strong>
                </label>
            `);
        });
    } else {
        $('#modalVariantBox').addClass('d-none');
    }

    if (product.colors.length > 0) {
        $('#modalColorBox').removeClass('d-none');

        product.colors.forEach(function (color, index) {
            $('#modalColorList').append(`
                <label class="pl-color-item ${index === 0 ? 'active' : ''}" data-image="${color.image}">
                    <input type="radio" name="modal_color" value="${color.id}" ${index === 0 ? 'checked' : ''}>
                    <span class="pl-color-left">
                        <span class="pl-color-dot" style="background:${color.code}"></span>
                        ${color.name}
                    </span>
                </label>
            `);
        });
    } else {
        $('#modalColorBox').addClass('d-none');
    }

    if (product.addons.length > 0) {
        $('#modalAddonBox').removeClass('d-none');

        product.addons.forEach(function (addon) {
            let addonType = addon.type === 'per_qty' ? 'Per Quantity' : 'Per Order';

            $('#modalAddonList').append(`
                <label class="pl-option-item">
                    <input type="checkbox" name="modal_addons[]" value="${addon.id}">
                    <span>
                        ${addon.label}
                        <small class="d-block text-muted">${addonType}</small>
                    </span>
                    <strong>+ ₹${parseFloat(addon.price).toFixed(2)}</strong>
                </label>
            `);
        });
    } else {
        $('#modalAddonBox').addClass('d-none');
    }

    $('#variantModal').addClass('show');
}

$(document).on('change', 'input[name="modal_variant"]', function () {
    $('input[name="modal_variant"]').closest('.pl-option-item').removeClass('active');
    $(this).closest('.pl-option-item').addClass('active');
});

$(document).on('change', 'input[name="modal_color"]', function () {
    $('input[name="modal_color"]').closest('.pl-color-item').removeClass('active');
    $(this).closest('.pl-color-item').addClass('active');

    let img = $(this).closest('.pl-color-item').data('image');

    if (img) {
        $('#modalProductImage').attr('src', img);
    }
});

$(document).on('change', 'input[name="modal_addons[]"]', function () {
    if ($(this).is(':checked')) {
        $(this).closest('.pl-option-item').addClass('active');
    } else {
        $(this).closest('.pl-option-item').removeClass('active');
    }
});

function closeVariantModal() {
    $('#variantModal').removeClass('show');
}

function modalQtyPlus() {
    let qty = parseInt($('#modalQty').val());
    $('#modalQty').val(qty + 1);
}

function modalQtyMinus() {
    let qty = parseInt($('#modalQty').val());

    if (qty > 1) {
        $('#modalQty').val(qty - 1);
    }
}

function confirmAddToCart() {
    let productId = $('#modalProductId').val();

    let selectedAddons = [];

    $('input[name="modal_addons[]"]:checked').each(function () {
        selectedAddons.push($(this).val());
    });

    $('#confirmCartBtn').prop('disabled', true).html('<i class="fas fa-spinner fa-spin"></i> Adding...');

    $.ajax({
        url: "{{ route('cart.add') }}",
        type: "POST",
        data: {
            product_id: productId,
            variant_id: $('input[name="modal_variant"]:checked').val() || '',
            color_variant_id: $('input[name="modal_color"]:checked').val() || '',
            addons: selectedAddons,
            qty: $('#modalQty').val(),
            _token: "{{ csrf_token() }}"
        },
        success: function (res) {
            $('#confirmCartBtn').prop('disabled', false).html('<i class="fas fa-shopping-cart"></i> Add To Cart');

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

            if (res.status === 'added' || res.status === 'exists') {
                closeVariantModal();

                showToast(res.status === 'exists' ? "Already added to cart" : "Added to cart successfully", true);

                let btn = $('.productCartBtn[data-id="' + productId + '"]');
                btn.find('.btn-text').text('Go To Cart');
                btn.find('i').removeClass('fa-shopping-cart').addClass('fa-check');
                btn.addClass('goToCartBtn');

                updateHeaderCartCount(res.cart_count);
            }

            if (res.status === 'error') {
                showToast(res.message || "Something went wrong.");
            }
        },
        error: function () {
            $('#confirmCartBtn').prop('disabled', false).html('<i class="fas fa-shopping-cart"></i> Add To Cart');
            showToast("Something went wrong. Please try again.");
        }
    });
}

function directAddToCart(productId) {
    $.ajax({
        url: "{{ route('cart.add') }}",
        type: "POST",
        data: {
            product_id: productId,
            qty: 1,
            _token: "{{ csrf_token() }}"
        },
        success: function (res) {
            if (res.status === 'login_required') {
                window.location.href = "{{ url('/login') }}";
                return;
            }

            if (res.status === 'added' || res.status === 'exists') {
                showToast(res.status === 'exists' ? "Already added to cart" : "Added to cart successfully", true);

                let btn = $('.productCartBtn[data-id="' + productId + '"]');
                btn.find('.btn-text').text('Go To Cart');
                btn.find('i').removeClass('fa-shopping-cart').addClass('fa-check');
                btn.addClass('goToCartBtn');

                updateHeaderCartCount(res.cart_count);
            }

            if (res.status === 'error') {
                showToast(res.message || "Something went wrong.");
            }
        },
        error: function () {
            showToast("Something went wrong. Please try again.");
        }
    });
}

function updateHeaderCartCount(count) {
    if (count !== undefined && count !== null) {
        $('.cart-count').text(count);
    }
}

$(document).on('click', '#variantModal', function (e) {
    if (e.target.id === 'variantModal') {
        closeVariantModal();
    }
});

$(document).ready(function () {
    let items = $("#featured-products-list .product-item");
    let visibleCount = 8;

    items.hide();
    items.slice(0, visibleCount).fadeIn();

    $("#load-more").click(function () {
        visibleCount += 4;
        items.slice(0, visibleCount).fadeIn();

        if (visibleCount >= items.length) {
            $(this).html('No More Products <i class="fas fa-check ml-1"></i>').prop("disabled", true);
        }
    });
});
</script>

@endsection