@extends('layout2.clim.header')
@section('content')

    <div class="container py-5">
        <div class="row g-sm-4 g-2">
            <div class="col-lg-6">
                <div class="slider-image">
                    <img src="{{ url('/storage/' . $product->image) }}" class="img-fluid blur-up lazyload" alt="">
                </div>
            </div>


            <div class="col-lg-6">
                <div class="right-sidebar-modal">
                    {{-- <h6 class="offer-top"
                        style="font-weight: 500;padding:5px 10px;background-color: rgba(255, 79, 79, .1);border-radius: 5px;color: #ff4f4f;display: inline-block;margin-bottom: 20px;">
                        30% Off</h6> --}}
                    <h2 class="name">{{ $product->name }}</h2>
                    <h3 class="theme-color price py-2">TK {{ $product->new_price }}<del class=" ps-2 text-content">TK
                            {{ $product->old_price }}</del></h3>
                    <div class="product-rating">
                        <ul class="rating">
                            <li><i data-feather="star" class="fill"></i></li>
                            <li><i data-feather="star" class="fill"></i></li>
                            <li><i data-feather="star" class="fill"></i></li>
                            <li><i data-feather="star" class="fill"></i></li>
                            <li><i data-feather="star"></i></li>
                        </ul>
                    </div>

                    @if (!empty($product->description))
                        <div class="product-detail py-2">
                            <h4>Product Details :</h4>
                            <p id="quick-view-description">{{ $product->description }}</p>
                        </div>
                    @endif

                    <ul class="brand-list">
                        <li>
                            <div class="brand-box py-2 d-flex align-items-center">
                                <h5>Stock :</h5>
                                <h6 class="ps-1"
                                    style="color: {{ $product->in_stock === 'N/A' || $product->in_stock <= 0 ? 'red' : 'green' }};">
                                    {{ $product->in_stock === 'N/A' || $product->in_stock <= 0 ? 'Unavailable' : 'Available (' . $product->in_stock . ')' }}
                                </h6>
                            </div>
                        </li>
                    </ul>


                    <a id="whatsapp-order-btn"
                        style="background-color: #25d366; display: inline-block; white-space: nowrap; padding: 0.375rem 1rem;"
                        class="btn text-white mb-2 mb-md-0" target="_blank" href="https://wa.me/8801321713812">
                        <i class="fab fa-whatsapp me-1"></i> Order on WhatsApp
                    </a>
                    <a id="facebook-order-btn" href="https://www.facebook.com/colourshopbd"
                        style="background-color: #2196f3; display: inline-block; white-space: nowrap; padding: 0.375rem 1rem;"
                        class="btn text-white" target="_blank">
                        <i class="fab fa-facebook-messenger me-1"></i> Order on Facebook
                    </a>


                    <div class="AddToCart_btn">
                        <button style="background-color: #ed1e54;font-weight: 600;"
                            class=" mt-2 add-button addcart-button btn buy-button text-light" data-bs-toggle="offcanvas"
                            data-bs-target="#cartDrawer"
                            onclick="AddToCart('{{ $product->id }}', '{{ e($product->name) }}', {{ number_format($product->new_price, 2, '.', '') }}, '{{ url('/storage/' . ($product->thumb_image ?? $product->image)) }}')">
                            <div class="text-light">Add to Cart</div>
                        </button>
                    </div>
                </div>
            </div>
        </div>
        <div class="row mt-4">
            <div class="cat-title">
                <span class="cat-text mb-3 fw-bold fs-3">You May Be Interested In…</span>
            </div>
            @foreach ($categoryProducts as $product)
            
                <div class="col-6 col-lg-2 col-md-2 col-sm-6 mb-4">
                    <div class="single-product-wrap border border-secondary p-2 rounded d-flex flex-column h-100">
                        <div class="product-image banner-hover flex-grow-1" style="height: 180px; overflow: hidden;">
                            <a href="/product/{{ $product->id }}-{{ Str::slug($product->name) }}"
                                class="pro-img h-100 d-block">
                                <img src="{{ url('/storage/' . ($product->thumb_image ?? $product->image)) }}"
                                    class="img-fluid w-100 h-100 object-fit-cover" alt="{{ $product->name }}">
                            </a>
                        </div>
                        <div class="product-content mt-2">
                            <div class="product-title" style=" overflow: hidden;">
                                <h6 class="m-0">
                                    <a href="/product/{{ $product->id }}-{{ Str::slug($product->name) }}"
                                        class="product-title-link text-dark text-decoration-none">
                                        {{ $product->name }}
                                    </a>
                                </h6>
                            </div>
                            <div class="product-price mt-2">
                                <div class="pro-price-box">
                                    <span class="new-price fw-bold">TK
                                        {{ number_format($product->new_price) }}</span>
                                    @if ($product->old_price)
                                        <span class="old-price text-muted text-decoration-line-through ms-2">TK
                                            {{ number_format($product->old_price) }}</span>
                                    @endif
                                </div>
                            </div>
                            <div class="AddToCart_btn mt-2 d-flex align-items-center justify-content-center">
                                <button style="background-color: #ed1e54"
                                    class="add-button addcart-button btn buy-button text-light" data-bs-toggle="offcanvas"
                                    data-bs-target="#cartDrawer"
                                    onclick="AddToCart('{{ $product->id }}', '{{ e($product->name) }}', {{ number_format($product->new_price, 2, '.', '') }}, '{{ url('/storage/' . ($product->thumb_image ?? $product->image)) }}')">

                                    <div class="d-block text-light">Add to Cart</div>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            @endforeach
        </div>
    </div>
    <script>
        fbq('track', 'ViewContent', {
            content_ids: ['{{ $product->id }}'],
            content_name: '{{ $product->name }}',
            content_type: 'product',
            value: {{ $product->new_price }},
            currency: 'BDT'
        });
    </script>
@endsection

@push('script')
@endpush