@extends('website.layouts.app')
@section('content')
    <section id="blog-hero" style="background-color: #F1EFEC;">
        <div class="container-fluid fixedwidth">
            <div class="row d-flex justify-content-center align-items-center">
                <div class="col-xxl-5 col-lg-4 col-md-4  col-12">
                    <a href="{{ route('website.blog.details', $blog->slug) }}">
                        <div class="hero py-lg-4">
                            <img src="{{ asset('uploads/blog/' . $blog->thumbnail) }}" alt="Flower Shop"
                                class="img-fluid w-100">
                            <h6 class="mt-lg-3 mt-2">
                                @if (session('app_language', 'en') == 'en')
                                    {{ $blog->category->title_en ?? '' }}
                                @else
                                    {{ $blog->category->title_ar ?? '' }}
                                @endif
                            </h6>
                            <h1>
                                @if (session('app_language', 'en') == 'en')
                                    {{ $blog->title_en ?? '' }}
                                @else
                                    {{ $blog->title_ar ?? '' }}
                                @endif
                            </h1>
                            <p class="px-lg-5">
                                @if (session('app_language', 'en') == 'en')
                                    {!! Str::limit($blog->description_en, 150, '…') !!}
                                @else
                                    {!! Str::limit($blog->description_ar, 150, '…') !!}
                                @endif
                            </p>
                        </div>
                    </a>
                </div>
            </div>
        </div>
    </section>
    <section id="blog-item">
        <div class="container-fluid fixedwidth">
            <div class="row d-flex justify-content-center align-items-center mb-md-5 mb-4">
                <div class="col-lg-11 col-md-12 my-5">
                    <div class="row gx-2 d-flex justify-content-center ">
                        @foreach ($blogs as $key => $card)
                            @php
                                $design = (($loop->iteration - 1) % 3) + 1;
                            @endphp
                            @if ($design == 1)
                                {{-- Design 1 --}}
                                <div class="col-md-4 mb-xl-5 mb-lg-4">
                                    <a href="{{ route('website.blog.details', $card->slug) }}">
                                        <div class="product-card">
                                            <img src="{{ asset('uploads/blog/' . $card->thumbnail) }}"
                                                class="img-fluid blogimglr w-100">
                                            <div class="content px-lg-2 px-md-1">
                                                <span class="pt-2">
                                                    @if (session('app_language', 'en') == 'en')
                                                        {{ $blog->category->title_en ?? '' }}
                                                    @else
                                                        {{ $blog->category->title_ar ?? '' }}
                                                    @endif
                                                </span>
                                                <h5 class="mb-lg-1 mb-0">
                                                    @if (session('app_language', 'en') == 'en')
                                                        {{ $card->title_en ?? '' }}
                                                    @else
                                                        {{ $card->title_ar ?? '' }}
                                                    @endif
                                                </h5>
                                                <p>
                                                    @if (session('app_language', 'en') == 'en')
                                                        {!! Str::limit($card->description_en, 150, '…') !!}
                                                    @else
                                                        {!! Str::limit($card->description_ar, 150, '…') !!}
                                                    @endif
                                                </p>
                                            </div>
                                        </div>
                                    </a>
                                </div>
                            @elseif ($design == 2)
                                {{-- Design 2 --}}
                                <div class="col-md-4 mb-xl-5 mb-lg-4">
                                    <a href="{{ route('website.blog.details', $card->slug) }}">
                                        <div class="product-card">
                                            <span class="pt-2">
                                                <img src="{{ asset('uploads/blog/' . $card->thumbnail) }}"
                                                    class="img-fluid blogimgc w-100">
                                            </span>
                                            <div class="content px-lg-2 px-md-1">
                                                <span class="pt-2">
                                                    @if (session('app_language', 'en') == 'en')
                                                        {{ $blog->category->title_en ?? '' }}
                                                    @else
                                                        {{ $blog->category->title_ar ?? '' }}
                                                    @endif
                                                </span>
                                                <h5 class="mb-lg-1 mb-0">
                                                    @if (session('app_language', 'en') == 'en')
                                                        {{ $card->title_en ?? '' }}
                                                    @else
                                                        {{ $card->title_ar ?? '' }}
                                                    @endif
                                                </h5>
                                                <p>
                                                    @if (session('app_language', 'en') == 'en')
                                                        {!! Str::limit($card->description_en, 150, '…') !!}
                                                    @else
                                                        {!! Str::limit($card->description_ar, 150, '…') !!}
                                                    @endif
                                                </p>
                                            </div>
                                        </div>
                                    </a>
                                </div>
                            @elseif ($design == 3)
                                {{-- Design 3 --}}
                                <div class="col-md-4 mb-xl-5 mb-lg-4">
                                    <a href="{{ route('website.blog.details', $card->slug) }}">
                                        <div class="product-card">
                                            <img src="{{ asset('uploads/blog/' . $card->thumbnail) }}"
                                                class="img-fluid blogimglr w-100">
                                            <div class="content px-lg-2 px-md-1">
                                                <span class="pt-2">
                                                    @if (session('app_language', 'en') == 'en')
                                                        {{ $blog->category->title_en ?? '' }}
                                                    @else
                                                        {{ $blog->category->title_ar ?? '' }}
                                                    @endif
                                                </span>
                                                <h5 class="mb-lg-1 mb-0">
                                                    @if (session('app_language', 'en') == 'en')
                                                        {{ $card->title_en ?? '' }}
                                                    @else
                                                        {{ $card->title_ar ?? '' }}
                                                    @endif
                                                </h5>
                                                <p>
                                                    @if (session('app_language', 'en') == 'en')
                                                        {!! Str::limit($card->description_en, 150, '…') !!}
                                                    @else
                                                        {!! Str::limit($card->description_ar, 150, '…') !!}
                                                    @endif
                                                </p>
                                            </div>
                                        </div>
                                    </a>
                                </div>
                            @endif
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection