@extends('layout.client')
@section('content')
<style>
        .product-tab-btn-img {
            height: 100px;
            width: 75px;
        }
        
        .tp-btn-2 {
        padding: 3px 18px;
    }

    .product-img {
        height: 100%;
        width: 100%;
        padding-bottom: 20px;
        object-fit: contain;
    }


    .product-tab-img {
        height: 400px;
        width: 400px;
        padding-bottom: 20px;
    }


    .quantity-options ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .quantity-options li {
        display: inline-block;
        margin-right: 10px;
    }

    .quantity-options a {
        text-decoration: none;
        padding: 5px 10px;
        border: 1px solid #ccc;
        color: #333;
    }

    .quantity-options a.active {
        background-color: #a7be33;
    }

    .tpdetails__brand li span {
        font-size: 20px;
    }


    @media only screen and (max-width:374px) {
        .product__details-quantity {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: nowrap;
    }

    .product__details-count {
        flex-grow: 1;
        display: flex;
        justify-content: flex-start;
        margin-right: 10px;
    }

    .product__details-btn {
        flex-grow: 1;
        display: flex;
        justify-content: flex-end;
    }

    .tp-cart-input {
        width: 50px; /* Adjust this width if needed */
    }

    .tp-btn-2 {
        padding: 8px 12px;
        font-size: 14px; 
        margin-bottom: 20px;
    }
    
    .tpdetails__title {
            font-family: var(--tp-ff-jost);
            font-style: normal;
            font-weight: 500;
            font-size: 14px;
            line-height: 3px;
            color: var(--tp-heading-primary);
        }

        .tpdetails__brand li span {
            font-weight: 500;
            color: var(--tp-heading-secondary);
            display: inline-block;
            font-size: 15px;
        }

        .product-tab-img {
            height: 200px;
            width: 200px;
            padding-bottom: 20px;
        }
        
        
        .product-tab-btn-img {
            height: 100px;
            width: 100px;
        }
        
        .product-img {
            height: 180px;
            width: 245px; !important
            padding-bottom: 20px;
            object-fit: contain;
        }
        
        .quantity-options a {
            padding: 0px 2px;
            border-radius: 6px;
        }
        
        .product__details-count {
    flex: 0 0 auto;
    background-color: #F3F3F9;
      padding: 5px 5px;
    display: inline-block;
    border: 2px solid #EBEFF4;
      border-radius: 50px;
    color: var(--tp-text-body);
    cursor: pointer;
   
}

    .tpdescription__box-center .nav-tabs .nav-link {
        font-size: 10px;
    }
    
    .tpdescription__content p {
    font-family: var(--tp-ff-jost);
    font-weight: 400;
    font-size: 12px;
    line-height: 17px;
    color: var(--tp-text-body);
}

.p{
    font-size: 17px; !important
}
}
        

/*------------------------ */

    
    
</style>

<script>

    var productdetails = @json($productdetails);
    var csrfToken = '{{ csrf_token() }}';
    
</script>

<div class="breadcrumb__area grey-bg pt-5 pb-5">
    <div class="container">
        <div class="row">
            <div class="col-lg-12">
                <div class="tp-breadcrumb__content">
                    <div class="tp-breadcrumb__list">
                        <span class="tp-breadcrumb__active"><a href="{{ route('homepage') }}">Home</a></span>
                        <span class="dvdr">/</span>
                        <span class="tp-breadcrumb__active"><a href="#">{{ $product->category->name }}</a></span>
                        <span class="dvdr">/</span>
                        <span>{{ $product->name }}</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<section class="shopdetails-area grey-bg pb-50">
    <div class="container">
        <div class="row">
            @if ($productdetails)
            <div class="col-lg-12 col-md-12">
                <div class="tpdetails__area mr-60 pb-30">
                    <div class="tpdetails__product mb-30">
                        <div class="tpdetails__title-box">
                            <h3 class="tpdetails__title">{{ $product->name }}</h3>
                            
                        </div>
                        <div class="tpdetails__box">
                            <div class="row">
                                <div class="col-lg-6">
    <div class="tpproduct-details__nab">
        <div class="tab-content" id="nav-tabContents">
            <div class="tab-pane fade show active w-img" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab" tabindex="0">
                <img src="{{ URL::asset('storage/items/' . $product->image1) }}" alt="" class="product-img product-tab-img">
            </div>

            <div class="tab-pane fade w-img" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab" tabindex="0">
                @if (!empty($product->image2))
                <img src="{{ URL::asset('storage/items/' . $product->image2) }}" alt="" class="product-tab-img">
                @else
                <img src="{{ URL::asset('storage/items/' . $product->image1) }}" alt="" class="product-tab-img">
                @endif
                <div class="tpproduct__info bage"></div>
            </div>

            <div class="tab-pane fade w-img" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab" tabindex="0">
                @if (!empty($product->image3))
                <img src="{{ URL::asset('storage/items/' . $product->image3) }}" alt="" class="product-tab-img">
                @else
                <img src="{{ URL::asset('storage/items/' . $product->image1) }}" alt="" class="product-tab-img">
                @endif
                <div class="tpproduct__info bage"></div>
            </div>
        </div>

        <nav>
            <div class="nav nav-tabs justify-content-center" id="nav-tab" role="tablist">
                <button class="nav-link active" id="nav-home-tab" data-bs-toggle="tab" data-bs-target="#nav-home" type="button" role="tab" aria-controls="nav-home" aria-selected="true">
                    <img src="{{ URL::asset('storage/items/' . $product->image1) }}" alt="" class="product-tab-btn-img">
                </button>
                <button class="nav-link" id="nav-profile-tab" data-bs-toggle="tab" data-bs-target="#nav-profile" type="button" role="tab" aria-controls="nav-profile" aria-selected="false" tabindex="-1">
                    @if (!empty($product->image2))
                    <img src="{{ URL::asset('storage/items/' . $product->image2) }}" alt="" class="product-tab-btn-img">
                    @else
                    <img src="{{ URL::asset('storage/items/' . $product->image1) }}" alt="" class="product-tab-btn-img">
                    @endif
                </button>
                <button class="nav-link" id="nav-contact-tab" data-bs-toggle="tab" data-bs-target="#nav-contact" type="button" role="tab" aria-controls="nav-contact" aria-selected="false" tabindex="-1">
                    @if (!empty($product->image3))
                    <img src="{{ URL::asset('storage/items/' . $product->image3) }}" alt="" class="product-tab-btn-img">
                    @else
                    <img src="{{ URL::asset('storage/items/' . $product->image1) }}" alt="" class="product-tab-btn-img">
                    @endif
                </button>
            </div>
        </nav>
    </div>
</div>



                                <div class="col-lg-6">
                                    <div class="product__details">
                                        <div class="product__details-price-box">
                                            <h5 class="product__details-price" id="productPrice">₹
                                                {{ $productdetails[0]->offerprize }}
                                            </h5>
                                            <p id="stockQuantity">Stock: {{ $productdetails[0]->stockquantity }}
                                            </p>
                                            <ul class="product__details-info-list">
                                                <!--<li>{{ $product->description1 }}</li>-->
                                            </ul>
                                            <p>Select quantity</p>
                                            <div class="quantity-options">
                                                <ul>
                                                    @foreach ($availableSizes as $size)
                                                    <li><a href="#"
                                                            class="size-option {{ $loop->first ? 'active' : '' }}"
                                                            data-size="{{ $size->size }}" data-id="{{ $size->id }}">{{
                                                            $size->size }}</a>
                                                    </li>
                                                    @endforeach
                                                </ul>
                                            </div>
                                        </div>
                                        <div class="product__details-cart">
                                            <div class="product__details-quantity d-flex align-items-center mb-15">
    <!--<b>Qty:</b>-->
    <form action="{{ route('addtocart') }}" method="POST" class="d-flex align-items-center">
        @csrf
        <div class="product__details-count mr-10">
            <span class="cart-minus"><i class="far fa-minus"></i></span>
            <input class="tp-cart-input" type="text" name="quantity" id="quantity" value="1">
            <span class="cart-plus"><i class="far fa-plus"></i></span>
        </div>
        <div class="product__details-btn">
            <input type="hidden" value="{{ $productdetails[0]->id }}" name="productdetails_id" id="pdetails_id">
            <button class="tp-btn-2" type="submit">Add to cart</button>
        </div>
    </form>
</div>

                                            <ul class="product__details-check">
                                                <li>
                                                                                                    </li>

                                                <li>
                                                    {{--
                                                     --}}
                                                </li>



                                            </ul>
                                        </div>
                                        <div class="product__details-stock mb-25">
                                            <ul>
                                                <li id="availability">Availability: <i>
                                                        {{ $productdetails[0]->stockquantity > 0 ? 'In Stock' : 'Out of
                                                        Stock' }}</i>
                                                </li>
                                                {{-- <li>Category: <span>{{$productdetails->category->catname}} </span>
                                                </li> --}}

                                            </ul>
                                        </div>

                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="tpdescription__box">
                        <div class="tpdescription__box-center d-flex align-items-center justify-content-center">
                            <nav>
                                <div class="nav nav-tabs" role="tablist">
                                    <button class="nav-link active" id="nav-description-tab" data-bs-toggle="tab"
                                        data-bs-target="#nav-description" type="button" role="tab"
                                        aria-controls="nav-description" aria-selected="true">Product
                                        Description</button>
                                    <button class="nav-link" id="nav-info-tab" data-bs-toggle="tab"
                                        data-bs-target="#nav-information" type="button" role="tab"
                                        aria-controls="nav-information" aria-selected="false" tabindex="-1">ADDITIONAL
                                        INFORMATION</button>
                                </div>
                            </nav>
                        </div>
                        <div class="tab-content" id="nav-tabContent">
                            <div class="tab-pane fade show active" id="nav-description" role="tabpanel"
                                aria-labelledby="nav-description-tab" tabindex="0">
                                <div class="tpdescription__content">
                                    <p>{{ $product->description2 }} </p>
                                </div>
                            </div>
                            <div class="tab-pane fade" id="nav-information" role="tabpanel"
                                aria-labelledby="nav-info-tab" tabindex="0">
                                <div class="tpdescription__content">
                                    <p>{{ $product->description3 }} </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            @endif
        </div>
    </div>
</section>
<!-- ... Your existing HTML code ... -->

<script>
    document.addEventListener('DOMContentLoaded', function () {

        //     var defaultActiveOption = document.querySelector('.size-option.active');

        // defaultActiveOption.addEventListener('click', function (event) {
        //     event.preventDefault();
        //     updateDetails();
        // });




        var sizeOptions = document.querySelectorAll('.size-option');

        sizeOptions.forEach(function (option) {
            option.addEventListener('click', function (event) {
                event.preventDefault();
                sizeOptions.forEach(function (opt) {
                    opt.classList.remove('active');
                });
                option.classList.add('active');
                updateDetails(); // Call your function to update details here
            });
        });
        // Get elements
        var priceElement = document.getElementById('productPrice');
        var stockQuantityElement = document.getElementById('stockQuantity');
        var quantityInput = document.getElementById('quantityInput');
        var addToCartBtn = document.getElementById('addToCartBtn');
        var quantityOptions = document.querySelectorAll('.quantity-options a');


        addToCartBtn.addEventListener('click', function (event) {
            event.preventDefault();
            console.log('Add to Cart button clicked');
            addToCart();
        });


        // Update price, stock quantity, and availability based on selected quantity
        function updateDetails() {
            var selectedSize = getSelectedSize().getAttribute('data-size');
            var selectedId = getSelectedSize().getAttribute('data-id');
            var productDetail = getProductDetailBySize(selectedSize);

            const pd = document.getElementById('pdetails_id');
            pd.value = selectedId;
            console.log(selectedSize, selectedId);

            if (productDetail) {
                priceElement.innerText = '₹ ' + productDetail.offerprize;
                stockQuantityElement.innerText = 'Stock: ' + productDetail.stockquantity;

                // Update availability based on stock quantity
                var availabilityElement = document.getElementById('availability');
                if (productDetail.stockquantity > 0) {
                    availabilityElement.innerText = 'Availability: In Stock';
                } else {
                    availabilityElement.innerText = 'Availability: Out of Stock';
                }
            }
        }

        // Get selected size
        function getSelectedSize() {
            for (var i = 0; i < quantityOptions.length; i++) {
                if (quantityOptions[i].classList.contains('active')) {
                    return quantityOptions[i];
                }
            }
            return null;
        }

        // Get product detail by size
        function getProductDetailBySize(size) {
            for (var i = 0; i < productdetails.length; i++) {
                if (productdetails[i].size === size) {
                    return productdetails[i];
                }
            }
            return null;
        }

        // Add click event listeners to quantity options
        quantityOptions.forEach(function (option) {
            option.addEventListener('click', function (event) {
                event.preventDefault();
                quantityOptions.forEach(function (opt) {
                    opt.classList.remove('active');
                });
                option.classList.add('active');
                updateDetails(); // Call updateDetails when quantity option is clicked
            });
        });

        // Function to handle adding to the cart

        // Set the base URL
        const baseUrl = 'https://nikhila.astradevelops.in/organic';


        function addToCart() {
            var selectedSize = getSelectedSize();
            var productDetail = getProductDetailBySize(selectedSize);

            if (!productDetail) {
                console.error('Product detail not found.');
                return;
            }

            var quantity = quantityInput.value;

            // Make an AJAX request to add to the cart
            var addToCartUrl = `${baseUrl}/addToCart`;

            fetch(addToCartUrl, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': csrfToken
                },
                body: JSON.stringify({
                    productDetailId: productDetail.id,
                    quantity: quantity
                })
            })
                .then(response => {
                    if (!response.ok) {
                        throw new Error('Network response was not ok');
                    }
                    return response.json();
                })
                .then(data => {
                    // Handle the response
                    if (data.message) {
                        alert(data.message); // Show success message as an alert
                        // You can also update the UI or take other actions as needed
                    } else if (data.error) {
                        alert(data.error); // Show error message as an alert
                        // Handle the error condition
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                    // Handle errors or show an error message
                });
        }

        // Initial update
        updateDetails();
    });
</script>







@endsection