@extends('frontend.layouts.app')

@section('content')
    <section class="category-section py-3 py-md-4">
        <div class="container mt-3">
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb mb-2 mb-md-3">
                    <li class="breadcrumb-item">
                        <a href="{{ url('/') }}">Home</a>
                    </li>
                    <li class="breadcrumb-item active text-capitalize" aria-current="page">
                        {{ $menu->name }}
                    </li>
                </ol>
            </nav>
        </div>

        <div class="category-product py-3 py-md-4">
            <div class="container">
                <div class="d-flex justify-content-between align-items-center flex-wrap gap-2 mb-3">
                    <div>
                        <h5 class="mb-0 text-capitalize cat-title">{{ $menu->name }}</h5>
                        <small class="text-muted">
                            {{ $products->count() }} item{{ $products->count() > 1 ? 's' : '' }} found
                        </small>
                    </div>
                </div>

                @if($products->count())
                    <div class="row g-3 g-md-4">
                        @foreach ($products as $product)
                            @php
                                // মূল দাম
                                $originalPrice = (float) ($product->price ?? 0);

                                // ✅ আসল discount column ব্যবহার করছি
                                $offerPrice    = (float) ($product->discount_price ?? 0);

                                // offer থাকলে: discount_price > 0 এবং price এর চেয়ে কম
                                $hasOffer  = $offerPrice > 0 && $offerPrice < $originalPrice;

                                // কার্ডে যে current/sale price দেখাবো
                                $salePrice = $hasOffer ? $offerPrice : $originalPrice;

                                // পুরনো দাম (strike-through) – শুধুই offer থাকলে
                                $oldPrice  = $hasOffer ? $originalPrice : null;
                            @endphp

                            <div class="col-6 col-md-4 cat-product-col-5">
                                <a href="{{ route('details', $product->slug) }}"
                                   class="cat-product d-block h-100">
                                    <div class="product-card h-100 d-flex flex-column">

                                        {{-- Product Image --}}
                                        <div class="product-image-wrapper">
                                            <img
                                                src="{{ $product->thumbnail_url }}"
                                                alt="{{ $product->alt ?? $product->name }}"
                                                class="img-fluid"
                                            >
                                        </div>

                                        {{-- Product Content --}}
                                        <div class="product-body pt-2 pt-md-3 px-2 px-md-3 pb-2 pb-md-3">
                                            <h6 class="product-title mb-1">
                                                {{ $product->name }}
                                            </h6>

                                            <div class="product-price-wrap d-flex align-items-baseline gap-1">
                                                {{-- current / sale price --}}
                                                <span class="current-price">
                                                    ৳ {{ number_format($salePrice, 0) }}
                                                </span>

                                                {{-- পুরনো দাম (strike) – offer থাকলে --}}
                                                @if($oldPrice)
                                                    <span class="old-price text-muted text-decoration-line-through">
                                                        ৳ {{ number_format($oldPrice, 0) }}
                                                    </span>
                                                @endif
                                            </div>
                                        </div>
                                    </div>
                                </a>
                            </div>
                        @endforeach
                    </div>
                @else
                    <div class="text-center py-5">
                        <h6 class="mb-1">No products found.</h6>
                        <p class="text-muted mb-0">
                            Please check back later or browse another category.
                        </p>
                    </div>
                @endif
            </div>
        </div>
    </section>
@endsection

@push('style')
    <style>
        .category-section {
            background-color: #f5f5f7;
        }

        .category-product {
            background-color: #ffffff;
            border-radius: 14px;
            box-shadow: 0 10px 25px rgba(15, 23, 42, 0.06);
        }

        .cat-title {
            font-weight: 600;
            letter-spacing: 0.02em;
        }

        /* 5-column layout for desktop (>= 992px) */
        @media (min-width: 992px) {
            .cat-product-col-5 {
                flex: 0 0 20%;
                max-width: 20%;
                width: 20%;
            }
        }

        .product-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 14px 30px rgba(15, 23, 42, 0.12);
        }

        .product-image-wrapper {
            width: 100%;
            padding: 10px;
            background: linear-gradient(135deg, #fdfdfd, #f3f4f6);
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .product-image-wrapper img {
            width: 100%;
            height: 210px;
            object-fit: cover;
            border-radius: 10px;
            transition: transform 0.3s ease-out;
        }

        .product-card:hover .product-image-wrapper img {
            transform: scale(1.03);
        }

        .product-body {
            background-color: #ffffff;
        }

        .product-title {
            font-size: 0.95rem;
            font-weight: 500;
            color: #111827;
            line-height: 1.4;
            min-height: 38px; /* 2 line balance */
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        .product-price-wrap {
            margin-top: 2px;
        }

        .current-price {
            font-weight: 600;
            font-size: 0.98rem;
            color: #e11d48; /* nice pinkish red */
        }

        .old-price {
            font-size: 0.85rem;
        }

        @media (max-width: 575.98px) {
            .product-image-wrapper img {
                height: 170px;
            }

            .product-card {
                border-radius: 12px;
            }
        }
    </style>
@endpush

@push('script')
@endpush