@extends('layout2.clim.header')

@section('content')
    <style>
        .img-fixed-height {
            height: 150px;
            object-fit: cover;
            width: 100%;
        }

        .subcategory-carousel .item {
            padding: 0 10px;
            /* Space between items */
        }

        /* Custom navigation arrows */
        .owl-nav button {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            width: 40px;
            height: 40px;
            background: white !important;
            border-radius: 50% !important;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
        }

        .owl-nav button.owl-prev {
            left: -50px;
        }

        .owl-nav button.owl-next {
            right: -50px;
        }

        .owl-nav button span {
            font-size: 24px;
            line-height: 1;
        }

        @media screen and (max-width : 768px) {
            .img-fixed-height {
                height: 80px;
                object-fit: cover;
                width: 100%;
            }
        }
    </style>

    <section class="product-section-4 py-3">
        <div class="container-fluid">
            <!-- Owl Carousel with Box Shadow -->
            <div class="row mb-4">
                <div class="col-12">
                    <div class="owl-carousel subcategory-carousel p-2"
                        style="background: white; border-radius: 10px; box-shadow: 0 4px 12px rgba(0,0,0,0.1);">
                        @foreach ($subcategories as $subcategory)
                            <div class="item">
                                <a href="{{ url('/sub-category/' . $subcategory->slug . '/' . $subcategory->id) }}">
                                    <div class="card bg-transparent">
                                        <img src="{{ url('/storage/' . $subcategory->image) }}"
                                            class="card-img-top img-fixed-height rounded" alt="{{ $subcategory->name }}"
                                            loading="lazy">
                                    </div>
                                    <h5 class="fw-bold text-center py-2">{{ $subcategory->name }}</h5>
                                </a>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>

            <!-- Products Grid -->
            <div class="row mt-4">
                @foreach ($products 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>
    </section>

    <style>
        /* Custom Owl Carousel Shadow and Spacing */
        .subcategory-carousel {
            padding: 15px 5px;
            margin-bottom: 20px;
        }

        /* Individual Carousel Items */
        .subcategory-carousel .item {
            padding: 5px;
            transition: transform 0.3s ease;
        }

        .subcategory-carousel .item:hover {
            transform: translateY(-5px);
        }

        /* Card styling inside carousel */
        .subcategory-carousel .card {
            border-radius: 8px;
            overflow: hidden;
        }

        /* Navigation arrows */
        .owl-nav button {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            width: 40px;
            height: 40px;
            background: white !important;
            border-radius: 50% !important;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }

        .owl-nav button.owl-prev {
            left: -20px;
        }

        .owl-nav button.owl-next {
            right: -20px;
        }

        /* Responsive adjustments */
        @media (max-width: 768px) {
            .subcategory-carousel {
                box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
                /* padding: 10px 0; */
            }
        }
    </style>
@endsection