@extends('layouts.app')

@section('title', 'Shop')

@section('content')
    <main id="main">
        <section class="breadcrumbs">
            <div class="container">
                <div class="d-flex justify-content-between align-items-center">
                    <h2>Shop</h2>
                    <ol>
                        <li><a href="{{ route('home.index') }}">Home</a></li>
                        <li>Shop</li>
                    </ol>
                </div>
            </div>
        </section>

        <section class="service-details">
            <div class="container">
                <div class="row">
                    @foreach($products as $product)
                    <div class="col-md-6 d-flex align-items-stretch" data-aos="fade-up">
                        <div class="card">
                            <div class="card-img">
                                <img src="{{ $product->getThumbnailUrl() }}" alt="{{ $product->name }} Photo">
                            </div>
                            <div class="card-body">
                                <h5 class="card-title">
                                    <a href="{{ route('shop.show', $product->slug) }}">
                                        {{ $product->name }}
                                    </a>
                                </h5>
                                <p class="card-text">
                                    {!! \Illuminate\Support\Str::limit($product->description, 150) !!}
                                </p>
                                <div class="read-more">
                                    <a href="{{ route('shop.show', $product->slug) }}">
                                        <i class="bi bi-arrow-right"></i> More Information & Purchase
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                    @endforeach
                </div>
            </div>
        </section>
    </main>
@endsection