@extends('website.layout.app')

@section('content')

<!-- Notification Messages -->
@if(session('success'))
    <div class="alert alert-success">
        {{ session('success') }}
    </div>
@endif

@if($errors->any())
    <div class="alert alert-danger">
        <ul>
            @foreach($errors->all() as $error)
                <li>{{ $error }}</li>
            @endforeach
        </ul>
    </div>
@endif

<!-- Iterate over categories -->
@foreach ($categories as $category)
    @if($category->products->count() > 0)
        <center>
            <br>
            <h2 style="color: blue">{{ $category->name }}</h2>
            <br>
        </center>
    @endif

    <!-- Swiper Container for each Category -->
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <!-- Category Slide -->
            @foreach ($category->products as $product)
                <div class="swiper-slide">
                    <div class="product-item">
                        <a href="{{ route('products.single', $product->id) }}" class="slide-link">
                            <div class="slide-content">
                                <img src="{{ Storage::url($product->image) }}" alt="Product {{ $loop->iteration }}" class="slide-image" />
                                <h3>{{ $product->short_desc }}</h3>
                                <p>{{ $product->product_spec }}</p>
                            </div>
                        </a>
                    </div>
                </div>
            @endforeach
        </div>
    </div>
@endforeach

 

@endsection