@extends('layouts.app') @section('content')
    <div class="page-content pt-xxl">
        <div class="container">
            <h2 class="title-xxl title-animation font-primary-bd text-primary-color mb-md">
                <span>@lang('site.featured_products')
                    <span class="text-secondary-color">.</span></span>
            </h2>
        </div>
        <div class="mb-xl">
            <div class="container">
                <div class="row row-gap-4">

                    @forelse ($products as $product)
                        <div class="col-lg-12">
                            <div class="product__item__list flip__item light-border h-100 rounded-4">
                                <div class="row">
                                    <div class="col-lg-5">
                                        <div class="image rounded-start-4">
                                            <img src="{{ asset('storage/' . $product->image) }}"
                                                alt="{{ $product->name_by_lang }}" loading="lazy" />
                                        </div>
                                    </div>
                                    <div class="col-lg-7">
                                        <div class="p-lg-5 p-4 d-flex flex-column justify-content-center">
                                            <a href="#product-modal-{{ $product->id }}" data-fancybox
                                                class="title-lg font-primary-bd text-primary-color mb-4">{{ $product->name_by_lang }}</a>
                                            <div class="d-flex flex-column row-gap-1 mb-4">
                                                <div class="text-xl font-primary-md">
                                                    @lang('site.product_description')
                                                </div>
                                                <span class="text-md text-gray-color">
                                                    {{ shortCleanString($product->description_by_lang, '150') }}

                                                </span>
                                            </div>

                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="fancybox-modal modal-1" id="product-modal-{{ $product->id }}" style="display: none;">

                            <div class="image text-center"><img width="300"
                                    src="{{ asset('storage/' . $product->image) }}" alt="product name">
                            </div>
                            <h3 class="text-primary-color font-primary-bd title-lg mb-md">{{ $product->name_by_lang }}</h3>
                            <p class="text-xl mb-1">@lang('site.product_description')</p>
                            <p class="text-gray-color">
                                {!! $product->description_by_lang !!}
                            </p>

                        </div>
                    @empty
                        <div class="col-lg-12 text-center">
                            <p>@lang('site.no_data_available')</p>
                        </div>
                    @endforelse

                </div>
            </div>
        </div>
    </div>
@endsection