@include('layouts.header')

@include('layouts.tostMessage')

<!-- breadcrumb -->
<div class="container" style="margin-top: 50px">
    <div class="bread-crumb flex-w p-l-25 p-r-15 p-t-30 p-lr-0-lg">
        <a href="{{ route('dashboard') }}" class="stext-109 cl8 hov-cl1 trans-04">
            Home
            <i class="fa fa-angle-right m-l-9 m-r-10" aria-hidden="true"></i>
        </a>

        <a href="{{ route('products') }}" class="stext-109 cl8 hov-cl1 trans-04">
            Product
            <i class="fa fa-angle-right m-l-9 m-r-10" aria-hidden="true"></i>
        </a>

        <span class="stext-109 cl4">{{ $product->category->category }}</span>
    </div>
</div>


<!-- Product Detail -->
<section class="sec-product-detail bg0 p-t-65 p-b-60">
    <div class="container">
        <div class="row">
            <div class="col-md-6 col-lg-7 p-b-30">
                <div class="p-l-25 p-r-30 p-lr-0-lg">
                    <div class="wrap-slick3 flex-sb flex-w">
                        <div class="wrap-slick3-dots" id="wrap-slick3-dots"></div>
                        <div class="wrap-slick3-arrows flex-sb-m flex-w"></div>

                        <div class="slick3 gallery-lb">
                            @if ($product->images)
                                @foreach (explode(',', $product->images) as $image)
                                    <div class="item-slick3" data-thumb="{{ asset('product/' . $image) }}" loading="lazy">
                                        <div class="wrap-pic-w pos-relative">
                                            <img src="{{ asset('product/' . $image) }}" alt="Product Image" loading="lazy"/>
                                            <a class="flex-c-m size-108 how-pos1 bor0 fs-16 cl10 bg0 hov-btn3 trans-04"
                                                href="{{ asset('product/' . $image) }}" loading="lazy">
                                                <i class="fa fa-expand"></i>
                                            </a>
                                        </div>
                                    </div>
                                @endforeach
                            @endif
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-md-6 col-lg-5 p-b-30">
    <form action="{{ route('cart.add') }}" method="POST" id="productForm">
        @csrf
        <div class="p-r-50 p-t-5 p-lr-0-lg">
            <h4 class="mtext-105 cl2 js-name-detail p-b-14">{{ $product->name }}</h4>
            <span class="mtext-106 cl2">${{ $product->price }}</span>

            <p class="stext-102 cl3 p-t-23">
                {{ $product->description }}
            </p>
            <!-- Size and Color Selection -->
            <div class="p-t-33">
                <div class="flex-w flex-r-m p-b-10">
                    <div class="size-203 flex-c-m respon6">Color</div>
                    <div class="size-204 respon6-next">
                        <div class="rs1-select2 bor8 bg0">
                            <select id="colorSelect" class="js-select2" name="color" onchange="location = this.value;">
                                <option value="{{ route('product.details', $product->id) }}">{{ $product->color }}</option>
                                @foreach ($relatedProducts as $relatedProduct)
                                    <option value="{{ route('product.details', $relatedProduct->id) }}">{{ $relatedProduct->color }}</option>
                                @endforeach
                            </select>
                            <div class="dropDownSelect2"></div>
                        </div>
                    </div>
                </div>
                <div class="flex-w flex-r-m p-b-10">
                    <div class="size-203 flex-c-m respon6">Size</div>

                    <div class="size-204 respon6-next">
                        <div class="rs1-select2 bor8 bg0">
                            <select id="sizeSelect" class="js-select2" name="size">
                                <option value="">Choose a size</option>
                                @foreach (explode(',', $product->size) as $size)
                                    <option>{{ trim($size) }}</option>
                                @endforeach
                            </select>
                            <div class="dropDownSelect2"></div>
                        </div>
                    </div>
                </div>

                <!-- Quantity Selection -->
                <div class="flex-w flex-r-m p-b-10">
                    <div class="size-204 flex-w flex-m respon6-next">
                        <div class="wrap-num-product flex-w m-r-20 m-tb-10">
                            <div class="btn-num-product-down cl8 hov-btn3 trans-04 flex-c-m">
                                <i class="fs-16 zmdi zmdi-minus"></i>
                            </div>
                            <input class="mtext-104 cl3 txt-center num-product" type="number" name="quantity" value="1" />
                            <div class="btn-num-product-up cl8 hov-btn3 trans-04 flex-c-m">
                                <i class="fs-16 zmdi zmdi-plus"></i>
                            </div>
                        </div>
                        <input type="hidden" name="product_id" value="{{ $product->id }}">
                        <div>
                            @if($product->stock == 'instock')
                                <button type="submit" class="flex-c-m stext-101 cl0 size-101 bg1 bor1 hov-btn1 p-lr-15 trans-04 js-addcart-detail">
                                    Add to cart
                                </button>
                            @else
                                 <h4 class="{{ $product->stock == 'outofstock' ? 'text-secondary' : 'text-warning' }}" style="font-style: italic;">
                                    {{ $product->stock == 'outofstock' ? 'Out of Stock' : 'Coming Soon...' }}
                                </h4>

                            @endif
                        </div>
                          <!-- Social Media Share -->
<div class="flex-w flex-m p-l-100 p-t-40 respon7">
    <div class="flex-m bor9 p-r-10 m-r-11">
        @auth
        <a href="#"
            class="fs-14 cl3 hov-cl1 trans-04 lh-10 p-lr-5 p-tb-2 js-addwish-detail tooltip100 js-addwish-b2"
            data-tooltip="Add to Wishlist" data-product-id="{{ $product->id }}">
            <i class="zmdi zmdi-favorite"></i>
        </a>
        @endauth
    </div>

    <!-- Add dynamic links here -->
    <a href="https://www.facebook.com/profile.php?id=61560075675019" class="fs-14 cl3 hov-cl1 trans-04 lh-10 p-lr-5 p-tb-2 m-r-8 tooltip100"
        data-tooltip="Facebook">
        <i class="fa fa-facebook"></i>
    </a>

    <a href="https://www.instagram.com/bwc_clothing/" class="fs-14 cl3 hov-cl1 trans-04 lh-10 p-lr-5 p-tb-2 m-r-8 tooltip100"
        data-tooltip="Instagram">
        <i class="fa fa-instagram"></i>
    </a>
    
    <a href="https://x.com/BWC_Clothing" class="fs-14 cl3 hov-cl1 trans-04 lh-10 p-lr-5 p-tb-2 m-r-8 tooltip100"
        data-tooltip="Twitter">
        <i class="fa fa-times" style="font-size: 18px; color: #666;"></i>
    </a>
    
    <a href="https://in.pinterest.com/BWC_Clothing/" class="fs-14 cl3 hov-cl1 trans-04 lh-10 p-lr-5 p-tb-2 m-r-8 tooltip100"
        data-tooltip="Pinterest">
        <i class="fa fa-pinterest"></i>
    </a>
    <a href="https://www.tiktok.com/@bwc_clothing?_t=8nPwo7jTeKg&_r=1" target="_blank" style="text-decoration: none; color: #666883; transition: color 0.3s ease;">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 293768 333327" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" image-rendering="optimizeQuality" fill-rule="evenodd" clip-rule="evenodd" width="12" height="18" style="margin-right: 10px; fill: #999999;">
            <path d="M204958 0c5369 45832 32829 78170 77253 81022v43471l-287 27V87593c-44424-2850-69965-30183-75333-76015l-47060-1v192819c6791 86790-60835 89368-86703 56462 30342 18977 79608 6642 73766-68039V0h58365zM78515 319644c-26591-5471-50770-21358-64969-44588-34496-56437-3401-148418 96651-157884v54345l-164 27v-40773C17274 145544 7961 245185 33650 286633c9906 15984 26169 27227 44864 33011z"/>
            <path d="M218434 11587c3505 29920 15609 55386 35948 70259-27522-10602-43651-34934-47791-70262l11843 3zm63489 82463c3786 804 7734 1348 11844 1611v51530c-25770 2537-48321-5946-74600-21749l4034 88251c0 28460 106 41467-15166 67648-34260 58734-95927 63376-137628 35401 54529 22502 137077-4810 136916-103049v-96320c26279 15803 48830 24286 74600 21748V94050zm-171890 37247c5390-1122 11048-1985 16998-2548v54345c-21666 3569-35427 10222-41862 22528-20267 38754 5827 69491 35017 74111-33931 5638-73721-28750-49999-74111 6434-12304 18180-18959 39846-22528v-51797zm64479-119719h1808-1808z"/>
            <path d="M206590 11578c5369 45832 30910 73164 75333 76015v51528c-25770 2539-48321-5945-74600-21748v96320c206 125717-135035 135283-173673 72939-25688-41449-16376-141089 76383-155862v52323c-21666 3569-33412 10224-39846 22528-39762 76035 98926 121273 89342-1225V11577l47060 1z"/>
        </svg>
    </a>

                    </div>
                </div>
            </div>
        </div>
    </form>
</div>

            </div>
        </div>
    </div>
    
    <div class="bor10 m-t-50 p-t-43 p-b-40">
    <!-- Tab01 -->
    <div class="tab01">
        <!-- Nav tabs -->
        <ul class="nav nav-tabs" role="tablist">
            <li class="nav-item p-b-10">
                <a class="nav-link active" data-toggle="tab" href="#description" role="tab">Description</a>
            </li>
            <li class="nav-item p-b-10">
                <a class="nav-link" data-toggle="tab" href="#information" role="tab">Additional information</a>
            </li>
        </ul>
@if($additionalInfo)
        <!-- Tab panes -->
        <div class="tab-content p-t-43">
            <!-- Description Tab -->
            <div class="tab-pane fade show active" id="description" role="tabpanel">
                <div class="how-pos2 p-lr-15-md">
                    <p class="stext-102 cl6">
                        {{ $additionalInfo->description }}
                    </p>
                </div>
            </div>

            <!-- Additional Information Tab -->
            <div class="tab-pane fade" id="information" role="tabpanel">
                <div class="row">
                    <div class="col-sm-10 col-md-8 col-lg-6 m-lr-auto">
                        <ul class="p-lr-28 p-lr-15-sm">
                            
                                <li class="flex-w flex-t p-b-7">
                                    <span class="stext-102 cl3 size-205"><strong>Weight</strong></span>
                                    <span class="stext-102 cl6 size-206">{{ $additionalInfo->weight }}</span>
                                </li>

                                <li class="flex-w flex-t p-b-7">
                                    <span class="stext-102 cl3 size-205"><strong>Materials</strong></span>
                                    <span class="stext-102 cl6 size-206">{{ $additionalInfo->materials }}</span>
                                </li>

                                <li class="flex-w flex-t p-b-7">
                                    <span class="stext-102 cl3 size-205"><strong>Construction</strong></span>
                                    <span class="stext-102 cl6 size-206">{{ $additionalInfo->construction }}</span>
                                </li>

                                <li class="flex-w flex-t p-b-7">
                                    <span class="stext-102 cl3 size-205"><strong>Fit</strong></span>
                                    <span class="stext-102 cl6 size-206">{{ $additionalInfo->fit }}</span>
                                </li>

                                <li class="flex-w flex-t p-b-7">
                                    <span class="stext-102 cl3 size-205"><strong>Size Chart</strong></span>
                                    <span class="stext-102 cl6 size-206">{{ $additionalInfo->size_chart }}</span>
                                </li>

                                <li class="flex-w flex-t p-b-7">
                                    <span class="stext-102 cl3 size-205"><strong>Color</strong></span>
                                    <span class="stext-102 cl6 size-206">{{ $additionalInfo->color }}</span>
                                </li>

                                <li class="flex-w flex-t p-b-7">
                                    <span class="stext-102 cl3 size-205"><strong>CARE</strong></span>
                                    <span class="stext-102 cl6 size-206">{{ $additionalInfo->care_instructions }}</span>
                                </li>

                                <li class="flex-w flex-t p-b-7">
                                    <span class="stext-102 cl3 size-205"><strong>RETURNS & EXCHANGES</strong></span>
                                    <span class="stext-102 cl6 size-206">{{ $additionalInfo->returns_exchanges }}</span>
                                </li>
                            @else
                                <li class="flex-w flex-t p-b-7 justify-content-center">
                                    <span class="stext-102 cl3 size-205">No additional information available.</span>
                                </li>
                            @endif
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="bg6 flex-c-m flex-w size-302 m-t-73 p-tb-15">
    <span class="stext-107 cl6 p-lr-25"> SKU: {{ $additionalInfo ? $additionalInfo->sku : 'N/A' }} </span>
    <span class="stext-107 cl6 p-lr-25"> Categories: {{ $product->category->category }} </span>
</div>
</section>

<!-- Related Products -->
<section class="sec-relate-product bg0 p-t-45 p-b-105">
    <div class="container">
        <div class="p-b-45">
            <h3 class="ltext-106 cl5 txt-center">Related Products</h3>
        </div>

        <!-- Slide2 -->
        <div class="wrap-slick2">
            <div class="slick2">
                @foreach ($relatedProducts as $relatedProduct)
                    <div class="item-slick2 p-l-15 p-r-15 p-t-15 p-b-15">
                        <!-- Block2 -->
                        <div class="block2">
                            <div class="block2-pic hov-img0">
                                @php
                                    $images = explode(',', $relatedProduct->images);
                                @endphp
                                <img src="{{ asset('product/' . $images[0]) }}" alt="{{ $relatedProduct->name }}" loading="lazy">
                                <a href="{{ route('product.details', $relatedProduct->id) }}"
                                    class="block2-btn flex-c-m stext-103 cl2 size-102 bg0 bor2 hov-btn1 p-lr-15 trans-04 js-show-modal1">
                                    Quick View
                                </a>
                            </div>

                            <div class="block2-txt flex-w flex-t p-t-14">
                                <div class="block2-txt-child1 flex-col-l">
                                    <a href="{{ route('product.details', $relatedProduct->id) }}"
                                        class="stext-104 cl4 hov-cl1 trans-04 js-name-b2 p-b-6">
                                        {{ $relatedProduct->name }}
                                    </a>
                                    <span class="stext-105 cl3">${{ number_format($relatedProduct->price, 2) }}</span>
                                </div>

                                <div class="block2-txt-child2 flex-r p-t-3">
                                    @auth
                                    <a href="#" class="btn-addwish-b2 dis-block pos-relative js-addwish-b2" data-product-id="{{ $product->id }}">
                                        <img class="icon-heart1 dis-block trans-04"
                                            src="{{ asset('images/icons/icon-heart-01.png') }}" alt="ICON">
                                            <img class="icon-heart2 dis-block trans-04 ab-t-l"
                                                src="{{ asset('images/icons/icon-heart-02.png') }}" alt="ICON">
                                        </a>
                                        @endauth
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        </div>
    </section>
    
<script>
document.querySelectorAll('.js-addwish-b2').forEach(button => {
    button.addEventListener('click', function(event) {
        event.preventDefault();
        const productId = this.dataset.productId;

        // Send an AJAX request to add the product to the wishlist
        fetch('{{ route('wishlist.add') }}', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': '{{ csrf_token() }}'
            },
            body: JSON.stringify({
                product_id: productId
            })
        })
        .then(response => {
            if (!response.ok) {
                throw new Error('Failed to add product to wishlist');
            }
            return response.json();
        })
        .then(data => {
            // Reload the page after the product is successfully added to the wishlist
            window.location.reload();
        })
        .catch(error => {
            console.error('Error:', error);
            // Reload the page even if there is an error
            window.location.reload();
        });
    });
});
</script>


<script>
    function validateSize() {
        var sizeSelect = document.getElementById('sizeSelect');
        if (sizeSelect.value === '') {
            alert('Please choose a size.');
            return false;
        }
        return true;
    }
</script>
<script>
    document.addEventListener("DOMContentLoaded", function() {
        var decrementButton = document.querySelector('.btn-num-product-down');

        decrementButton.addEventListener('click', function() {
            var quantityInput = document.querySelector('.num-product');
            var currentValue = parseInt(quantityInput.value);
            if (currentValue <= 1) {
                quantityInput.value = 1;
            } else {
                quantityInput.value = currentValue - 1;
            }
        });
    });
</script>
@include('layouts.footer')