@extends('front.layouts.app')
@section('content')
    <style>
        .banner {
            background-color: #1a6e41;
            color: white;
            padding: 20px 30px;
            text-align: left;
            line-height: 1.6;
            border-top: 2px solid white;
            border-bottom: 2px solid white;
        }

        .banner p {
            margin: 15px 0;
            font-size: 16px;
        }

        .banner-text {
            max-width: 1200px;
            margin: 0 auto;
        }
    </style>




    <header style="background-image: url('{{ setting('image_banner_Page_Products', 'en') }}');" class="page-banner">
        <div class="banner-overlay"></div>
        <div class="banner-content">
            <h1 class="banner-title">{{ \App\Helpers\TranslationHelper::translate('Products') }}</h1>
            <div class="breadcrumb">
                <span class="breadcrumb-current">{{ \App\Helpers\TranslationHelper::translate('Products') }}</span>
                <span class="breadcrumb-separator">/</span>
                <a href="/" class="breadcrumb-link">{{ \App\Helpers\TranslationHelper::translate('Home') }}</a>
            </div>
        </div>
    </header>


   <section class="products-section">
    <div class="container">
        <div class="section-header">
            <h1 class="main-title">
                {{ setting('title_Page_Products', app()->getLocale()) }}
            </h1>
        </div>

      <div class="products-grid">
    @foreach ($productZahraaAlkhairs as $productZahraaAlkhair)
        <div class="flip-card">
            <div class="flip-card-inner">
                <div class="flip-card-front">
                    <img src="{{ $productZahraaAlkhair->getFirstMediaUrl('product_zahraa_alkhair') }}" alt="Product Image" class="product-image">
                </div>
                <div class="flip-card-back">
                    <div class="back-content">
                        <h5>{{ $productZahraaAlkhair->name }}</h5>
                        <a href="{{ route('productZahraaAlkhair.details', $productZahraaAlkhair->id) }}" class="btn btn-light mt-2">عرض التفاصيل </a>
                        {{-- {{ \App\Helpers\TranslationHelper::translate('View Details') }} --}}
                    </div>
                    <img src="{{ $productZahraaAlkhair->getFirstMediaUrl('product_zahraa_alkhair') }}" alt="Product Image" class="background-image" />
                </div>
            </div>
        </div>
    @endforeach
</div>

    </div>
</section>



    <div class="banner">
        <div class="banner-text">
            <p>{!! setting('description_Page_Products', app()->getLocale()) !!}</p>
        </div>
    </div>
@endsection


@push('js')
@endpush