@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_import_export', 'en') }}');" class="page-banner">
        <div class="banner-overlay"></div>
        <div class="banner-content">
            <h1 class="banner-title">{{ \App\Helpers\TranslationHelper::translate('Import and Export') }}</h1>
            <div class="breadcrumb">
                <span class="breadcrumb-current">{{ \App\Helpers\TranslationHelper::translate('Import and Export') }}</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_import_export', app()->getLocale()) }}
                </h1>
            </div>

            <div class="products-grid">



                @foreach ($galleries as $gallery)
                    @php
                        $media = $gallery->getMedia('galleries_image');
                    @endphp

                    <div class="product-card">
                        <div class="image-container">
                            @if (isset($media[0]))
                                <img src="{{ $media[0]->getUrl() }}" alt="Primary Image" class="primary-image w-100">
                            @endif
                            @if (isset($media[1]))
                                <img src="{{ $media[1]->getUrl() }}" alt="Secondary Image" class="custom-image">
                            @endif
                        </div>
                    </div>
                @endforeach

                <style>
                    .image-container {
                        position: relative;
                        overflow: hidden;
                    }

                    .primary-image,
                    .custom-image {
                        position: absolute;
                        top: 0;
                        left: 0;
                        width: 100%;
                        transition: opacity 0.5s ease-in-out;
                        height: auto;
                    }

                    .primary-image {
                        opacity: 1;
                        z-index: 2;
                    }

                    .custom-image {
                        opacity: 0;
                        z-index: 1;
                    }

                    .product-card:hover .primary-image {
                        opacity: 0;
                    }

                    .product-card:hover .custom-image {
                        opacity: 1;
                    }
                </style>

            </div>
        </div>
    </section>


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


@push('js')
@endpush