@extends('frontend.layouts.app', ['title' => $response['name']])

@section('content')
    <x-breadcrumb :items="[
        [
            'label' => $response['category']['sub_category_parent']['title'],
            'url' => route('shop_grid', $response['category']['sub_category_parent']['slug']),
        ],
        [
            'label' => $response['category']['title'],
            'url' => route('all_products_category_wise', [
                $response['category']['sub_category_parent']['slug'],
                $response['category']['slug'],
            ]),
        ],
        [
            'label' => $response['name'],
            'url' => null,
        ],
    ]" />
    <div class="product-wrapper">
        <div class="container show_product">
            <div class="row product-item" data-product-id="{{ $response['id'] }}">
                @php
                    $isInWishlist = $wishlist->contains('product_id', $response['id']);
                @endphp
                <!-- Product Image -->
                <div class="col-md-6">
                    <div class="single_view_image">
                        <div class="product-gallery">
                            <div class="main-image me-3">
                                <img id="mainImage" src="{{ asset('storage/' . $response['image']) }}"
                                    alt="{{ $response['name'] }}" class="img-fluid product-image">
                            </div>
                            <div class="thumbnail-list d-flex flex-column">
                                @foreach ($response['images'] as $image)
                                    <img src="{{ asset('storage/' . $image['image']) }}" alt="Thumbnail"
                                        class="thumbnail mb-2" onclick="changeImage(this)">
                                @endforeach
                            </div>
                        </div>

                        <div class="wishlist wishlist-icon-info">
                            <span class="like-icon single-view-heart-icon {{ $isInWishlist ? 'liked' : 'add-to-wishlist' }}"
                                title="wishlist"></span>
                        </div>
                    </div>

                </div>
                <div class="col-md-1"></div>
                <!-- Product Details -->
                <div class="col-md-5">
                    <div class="product_detail_right">
                        <h1 class="product-title_info">{{ $response['name'] }}</h1>

                        @php
                            $mrp = $response['variations'][0]['mrp'] ?? $response['base_mrp'];
                            $price = $response['variations'][0]['price'] ?? $response['base_price'];
                            $percentOff = $mrp > 0 && $price > 0 ? round((($mrp - $price) / $mrp) * 100) : 0;
                        @endphp

                        <div class="price-wrapper">
                            <span class="percent-off" id="percentage-span">{{ $percentOff }}% off</span>
                            <span class="price-mrp"
                                id="product-price-mrp">MRP<del>₹{{ number_format($mrp, 0, '.', ',') }}</del></span>
                            <span class="price-regular" id="product-price">₹{{ $price }}</span>
                        </div>
                        <!-- Price Display -->
                        {{-- <h3 id="product-price">Price: <span
                        class="text-success">₹{{ $response['variations'][0]['price'] ?? 'N/A' }}</span></h3>
                        <h3 id="product-price-mrp">MRP: <span
                        class="text-success">₹{{ $response['variations'][0]['mrp'] ?? 'N/A' }}</span></h3> --}}

                        <!-- Store variations in JavaScript -->
                        <script>
                            var variations = @json($response['variations'] ?? []);
                        </script>

                        <!-- Product Variation Attributes (Dynamic) -->
                        <div class="size-wrapper">
                            @if (!empty($response['variation_attributes']))
                                @foreach ($response['variation_attributes'] as $attributeName => $attributeValues)
                                    <div class="{{ $attributeName == 'Color' ? 'color-options' : 'size-options' }}">
                                        <h5 class="size-title">{{ $attributeName }}</h5>
                                        @if ($attributeName === 'Color')
                                            <div class="attribute-options" data-attribute="{{ $attributeName }}">
                                                @foreach ($attributeValues as $index => $attribute)
                                                    <button
                                                        class="color-btn attribute-btn {{ $index === 0 ? 'selected attribute_seletion' : '' }}"
                                                        data-attr="{{ $attributeName }}"
                                                        data-value="{{ strtolower(str_replace(' ', '', $attribute['value'])) }}"
                                                        data-id="{{ $attribute['id'] }}"
                                                        style="background-color: {{ strtolower(str_replace(' ', '', $attribute['value'])) }};">
                                                    </button>
                                                @endforeach
                                            </div>
                                        @else
                                            <div class="attribute-options" data-attribute="{{ $attributeName }}">
                                                @foreach ($attributeValues as $index => $attribute)
                                                    <button
                                                        class="size-btn-attribute attribute-btn {{ $index === 0 ? 'selected attribute_seletion' : '' }}"
                                                        data-attr="{{ $attributeName }}"
                                                        data-value="{{ strtolower(str_replace(' ', '', $attribute['value'])) }}"
                                                        data-id="{{ $attribute['id'] }}">
                                                        {{ $attribute['value'] }}
                                                    </button>
                                                @endforeach
                                            </div>
                                        @endif
                                    </div>
                                @endforeach
                            @endif
                        </div>

                        <div class="cart-checkout-wrapper">
                            <!-- Add to Cart Button -->
                            <div class="quantity buttons_added">
                                <input type="button" value="-" class="cart-minus cart-minus-btn-single">
                                <input type="text" name="quantity" value="1" class="input-text qty text">
                                <input type="button" value="+" class="cart-plus cart-plus-btn-single">
                            </div>
                            <div class="check_out_button">
                                <button class="" id="add-to-cart">Add to Cart</button>
                            </div>
                        </div>
                        <div class="discription_container">
                            <h3>Description</h3>
                            <p class="discription_content">{{ $response['description'] }}</p>
                        </div>
                    </div>
                </div>


            </div>

        </div>
    </div>

    @if ($related_products->isNotEmpty())
        <div class="related_product">
            <div class="container">

                <div class="section-header">
                    <h2 class="section-title ">Related Products</h2>

                </div>
                <div class="product-card-grid row">
                    @foreach ($related_products as $product)
                        @php
                            $isInWishlist = $wishlist->contains('product_id', $product->product_id);
                        @endphp
                        <div class="col-md-3 product-item" data-product-id="{{ $product->product_id }}">
                            <a href="{{ route('single.product.view', $product->slug) }}">
                                <div class="product-card">
                                    <img src="{{ asset('storage/' . $product->product_image) }}" alt="Summer Collection"
                                        class="product-card-image">
                                    <div class="wishlist">
                                        <span class="like-icon {{ $isInWishlist ? 'liked' : 'add-to-wishlist' }}"
                                            title="wishlist"></span>
                                        {{-- <i class="far fa-heart"></i> --}}
                                    </div>
                                    <div class="product-card-info">
                                        <h3 class="product-card-title">{{ $product->product_name }}</h3>
                                        <p class="product-card-subtitle">{{ $product->description }}</p>
                                        <div class="product-card-price">
                                            <span
                                                class="current-price">₹{{ number_format($product->base_price, 0) }}</span>
                                            <span class="original-price">₹{{ number_format($product->base_mrp, 0) }}</span>
                                        </div>
                                    </div>
                                </div>
                            </a>
                        </div>
                    @endforeach
                </div>
            </div>
        </div>
    @endif


    @push('scripts')
        <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
        <script>
            $(document).ready(function() {
                // Quantity Increase / Decrease
                $(".cart-plus-btn-single").click(function() {
                    let $input = $(this).siblings("input.qty");
                    let currentVal = parseInt($input.val()) || 0;
                    $input.val(currentVal + 1).change();
                });

                $('.cart-minus-btn-single').click(function() {
                    let $qty = $(this).siblings('.qty');
                    let currentVal = parseInt($qty.val()) || 1;
                    if (currentVal > 1) {
                        $qty.val(currentVal - 1);
                    } else {
                        $qty.val(1); // Reset to 1 if it's 1 or less
                    }
                });

                // Main Variables
                var selectedAttributes = {};
                var selectedVariationId = null;
                var selectedPrice = null;
                var selectedMrp = null;

                // Preselect First Size and Color (if needed)
                const firstSizeBtn = $('[data-attr="Size"]:visible').first();
                const firstColorBtn = $('[data-attr="Color"]:visible').first();

                if (firstSizeBtn.length) {
                    firstSizeBtn.addClass('attribute_seletion').removeClass('btn-outline-primary selected');
                    selectedAttributes['Size'] = {
                        id: firstSizeBtn.data('id'),
                        value: firstSizeBtn.data('value').toLowerCase().replace(/\s+/g, '')
                    };
                }

                if (firstColorBtn.length) {
                    firstColorBtn.addClass('attribute_seletion').removeClass('btn-outline-primary selected');
                    selectedAttributes['Color'] = {
                        id: firstColorBtn.data('id'),
                        value: firstColorBtn.data('value').toLowerCase().replace(/\s+/g, '')
                    };
                }

                // Call filter colors based on selected size after preselect
                filterColorsBasedOnSize();
                checkSelection();
                updateProductDetails();

                // Attribute Button Click
                $(document).on('click', '.attribute-btn', function() {
                    var attrName = $(this).data('attr');
                    var attrValue = $(this).data('value');
                    var attrId = $(this).data('id');

                    $(this).closest('.attribute-options').find('.attribute-btn')
                        .removeClass('attribute_seletion btn-dark')
                        .addClass('btn-outline-primary');
                    $(this).addClass('attribute_seletion').removeClass('btn-outline-primary');

                    selectedAttributes[attrName] = {
                        id: attrId,
                        value: attrValue.toLowerCase().replace(/\s+/g, '')
                    };

                    if (attrName === 'Size') {
                        filterColorsBasedOnSize();
                        autoSelectFirstVisibleColor();
                    }

                    updateProductDetails();
                    checkSelection();
                });

                function filterColorsBasedOnSize() {
                    var size = selectedAttributes['Size']?.value;
                    if (!size) return;

                    let availableColors = [];

                    variations.forEach(variation => {
                        const sizeAttr = variation.attributes.find(attr => attr.name === 'Size');
                        const colorAttr = variation.attributes.find(attr => attr.name === 'Color');

                        if (sizeAttr && colorAttr &&
                            sizeAttr.value.toLowerCase().replace(/\s+/g, '') === size) {
                            const normalizedColor = colorAttr.value.toLowerCase().replace(/\s+/g, '');
                            if (!availableColors.includes(normalizedColor)) {
                                availableColors.push(normalizedColor);
                            }
                        }
                    });

                    $('[data-attr="Color"]').each(function() {
                        const btnColor = $(this).data('value').toLowerCase().replace(/\s+/g, '');
                        if (availableColors.includes(btnColor)) {
                            $(this).show();
                        } else {
                            $(this).hide();
                        }
                    });
                }

                function autoSelectFirstVisibleColor() {
                    const firstVisibleColor = $('[data-attr="Color"]:visible').first();
                    if (firstVisibleColor.length) {
                        firstVisibleColor.trigger('click'); // Simulate click
                    }
                }

                function updateProductDetails() {
                    var foundVariation = variations.find(function(variation) {
                        return variation.attributes.every(attr => {
                            var selectedAttr = selectedAttributes[attr.name];
                            if (!selectedAttr) return false;
                            return selectedAttr.value === attr.value.toLowerCase().replace(/\s+/g, '');
                        });
                    });

                    if (foundVariation) {
                        selectedVariationId = foundVariation.id;
                        selectedPrice = foundVariation.price;
                        selectedMrp = foundVariation.mrp;
                        var percentOff = (selectedMrp > 0 && selectedPrice > 0) ?
                            Math.round(((selectedMrp - selectedPrice) / selectedMrp) * 100) : 0;

                        var imageUrl = `{{ asset('storage') }}/${foundVariation.image}`;
                        $('.product-image').attr('src', imageUrl);
                        $('#product-price').text(`₹${selectedPrice}`);
                        $('#product-price-mrp').html(`MRP<del>₹${selectedMrp.toLocaleString('en-IN')}</del>`);
                        $('#percentage-span').text(`${percentOff}% off`);
                    } else {
                        selectedVariationId = null;
                        selectedPrice = null;
                        let defaultPrice = "{{ $response['base_price'] }}";
                        let defaultMrp = "{{ $response['base_mrp'] }}";

                        $('.product-image').attr('src', `{{ asset('storage/' . $response['image']) }}`);
                        $('#product-price').text(`₹${defaultPrice}`);
                        $('#product-price-mrp').html(`MRP<del>₹${defaultMrp.toLocaleString('en-IN')}</del>`);
                    }
                }

                function checkSelection() {
                    var totalAttributes = $('.attribute-options').length;
                    if (Object.keys(selectedAttributes).length === totalAttributes) {
                        $('#add-to-cart').prop('disabled', false);
                    } else {
                        $('#add-to-cart').prop('disabled', true);
                    }
                }

                // Add to Cart Click
                $('#add-to-cart').click(function() {
                    if (selectedVariationId) {
                        var cartData = {
                            product_id: '{{ $response['id'] }}',
                            variation_id: selectedVariationId,
                            attributes: Object.values(selectedAttributes),
                            quantity: $('.qty').val()
                        };

                        $.ajax({
                            url: '{{ route('addToCart') }}',
                            method: 'POST',
                            headers: {
                                'X-CSRF-TOKEN': '{{ csrf_token() }}'
                            },
                            data: cartData,
                            success: function(response) {
                                if (response.success) {
                                    $('#cart-count-span').html('(' + response.cart_count +
                                        ' Items)');
                                    $('.cart-total-span').html(response.cart_total);

                                    if (response.cart_count > 0) {
                                        if ($('#cart_count_header').length > 0) {
                                            $('#cart_count_header').html(response.cart_count)
                                                .show();
                                        } else {
                                            $('a.cart__btn').append(
                                                '<ins id="cart_count_header"></ins>');
                                            $('#cart_count_header').html(response.cart_count)
                                                .show();
                                        }
                                    } else {
                                        $('#cart_count_header').hide();
                                    }
                                    toastr.success(response.message);
                                } else {
                                    toastr.error(response.message);
                                }
                            },
                            error: function(error) {
                                toastr.error(error.responseJSON?.message ||
                                    'Something went wrong.');
                            }
                        });
                    } else {
                        toastr.error("Please select all attributes.");
                    }
                });

                // Image Change on Hover
                $(document).on('mouseenter', '.thumbnail', function() {
                    changeImage(this);
                });

                function changeImage(elem) {
                    const mainImage = document.getElementById('mainImage');
                    mainImage.src = elem.src;
                }

            });
        </script>
    @endpush


@endsection