@extends('layouts.app')

@section('title', $category->name)

@section('meta_description', Str::limit($category->description ?? '', 160))
@section('meta_keywords', $category->name)

@section('content')

{{-- HERO SECTION --}}
<div class="row mainbanner"
     style="background: url('{{ asset('assets/img/testimonials-bg.jpg') }}') no-repeat center center; background-size: cover;">

    <div class="col-12 py-5 text-center text-white">
        <h1 class="heading h1 p-4 text-white">
            {{ $category->name }}
        </h1>
    </div>

</div>

{{-- PRODUCTS SECTION --}}
<section class="section pt-5">
    <div class="container">

        <div class="row">

            @forelse($category->products ?? [] as $product)

                <div class="col-12 col-xxl-3 col-xl-4 col-md-6 mb-4">

                    <a href="{{ url('product/' . $product->slug) }}"
                       class="text-decoration-none">

                        <div class="card item-category p-3 h-100 shadow-sm">

                            {{-- IMAGE --}}
                            <div class="item-thumbnail text-center">

                                @if($product->thumbnail)
                                    <img src="{{ asset($product->thumbnail) }}"
                                         alt="{{ $product->name }}"
                                         class="img-fluid rounded">
                                @else
                                    <div class="p-5 text-muted">
                                        No Image
                                    </div>
                                @endif

                            </div>

                            {{-- TITLE --}}
                            <div class="item-title text-center mt-2">

                                <h5 class="fs-6 fw-bold text-dark">
                                    {{ $product->name }}
                                </h5>

                            </div>

                        </div>

                    </a>

                </div>

            @empty

                <div class="col-12 text-center py-5">

                    <h5>No products found</h5>
                    <p class="text-muted">
                        This category is currently empty.
                    </p>

                </div>

            @endforelse

        </div>

    </div>
</section>

<hr class="divider">

{{-- DESCRIPTION SECTION --}}
<section class="container p-3">

    <div class="content">

        <h3 class="mb-3 text-decoration-underline">
            Description
        </h3>

        <p>
            {!! nl2br(e($category->description ?? 'No description available')) !!}
        </p>

    </div>

</section>

@endsection