@extends('front.layouts.app')

@section('content')
    <main>
        {{-- image_banner_home --}}
        {{-- <section
            style="background-image: url('{{ is_array(setting('image_banner_home', 'en')) ? '' : setting('image_banner_home', 'en') }}');"
            class="hero-slider d-flex align-items-center text-center text-white">
            <div class="container">
                <div class="row justify-content-center">
                    <div class="col-lg-10">
                        <h1 class="fw-bold mb-4">{!! setting('title_home_one', app()->getLocale()) !!}</h1>
                    
                        <div class="d-flex justify-content-start gap-3 flex-wrap">
                            <a href="{{ route('about') }}"
                                class="btn btn-success px-4">{{ \App\Helpers\TranslationHelper::translate('About Us') }}</a>
                            <a href="{{ route('message_contact') }}"
                                class="btn btn-outline-light px-4">{{ \App\Helpers\TranslationHelper::translate('Contact Us') }}</a>
                        </div>
                    </div>
                </div>
            </div>
        </section> --}}
        <section
    class="hero-slider d-flex align-items-center text-center text-white position-relative"
    style="background-image: url('{{ is_array(setting('image_banner_home', 'en')) ? '' : setting('image_banner_home', 'en') }}');
           background-size: cover;
           background-position: center;
           min-height: 80vh;"> {{-- ارتفاع مناسب للبانر --}}
    
    {{-- Overlay --}}
    <div class="position-absolute top-0 start-0 w-100 h-100"
         style="background: rgba(0, 0, 0, 0.5); z-index: 1;"></div>

    {{-- Content --}}
    <div class="container position-relative z-2">
        <div class="row justify-content-center">
            <div class="col-lg-10">
                <h1 class="fw-bold mb-4 text-white" style="text-shadow: 1px 1px 3px rgba(0,0,0,0.8);">
                    {!! setting('title_home_one', app()->getLocale()) !!}
                </h1>

                <div class="d-flex justify-content-start gap-3 flex-wrap">
                    <a href="{{ route('about') }}" class="btn btn-success px-4">
                        {{ \App\Helpers\TranslationHelper::translate('About Us') }}
                    </a>
                    <a href="{{ route('message_contact') }}" class="btn btn-outline-light px-4">
                        {{ \App\Helpers\TranslationHelper::translate('Contact Us') }}
                    </a>
                </div>
            </div>
        </div>
    </div>
</section>


        <section class="custom-section main-section-tow">
            <div class="container">
                <div class="row align-items-center">
                    <div class="col-lg-4 text-center mb-4 mb-lg-0">
                        <img src="{{ setting('image_section_one_home', 'en') }}" alt="Truck" class="custom-image">
                    </div>
                    <div class="col-lg-8">
                        <div class="cards-wrapper">
                            @foreach ($services->sortByDesc('created_at')->take(2) as $service)
                                <div class="custom-card">
                                    <h5>{{ $service->name }}</h5>
                                    <p>{!! Str::limit(strip_tags($service->description), 150, '...') !!}</p>
                                    <a
                                        href="{{ route('serves') }}">{{ \App\Helpers\TranslationHelper::translate('Learn More') }}</a>
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>
        </section>



        <section class="section-about">
            <div class="container" data-aos="fade-up" data-aos-duration="1000">
                <div class="row">
                    <div class="col-md-6">
                        <div class="img-about" style="position: relative;">
                            <img src="{{ $about->getFirstMediaUrl('abouts_image_one_section_one') }}" alt="Truck"
                                class="custom-image">

                            {{-- <div class="row">
                                <div class="col-6">
                                    <img src="{{ $about->getFirstMediaUrl('abouts_image_tow_section_one') }}"
                                        alt="Logistics Operations" class="w-100">
                                </div>
                                <div class="col-6">
                                    <img src="{{ $about->getFirstMediaUrl('abouts_image_three_section_one') }}"
                                        alt="Team" class="w-100">
                                </div>
                            </div> --}}

                            <div class="stats-box">
                                <div class="stats-number" style="font-size: 30px;">
                                    +{{ setting('Shipments_Delivered_number', app()->getLocale()) }}</div>
                                <div>{{ setting('Shipments_Delivered_title', app()->getLocale()) }}</div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="text-about">
                            <h2 class="about-heading" style="text-align: left;">{{ $about->title }}</h2>
                            <p class="about-text" style="text-align: left;">
                                {{-- {!! $about->description !!} --}}
                                {!! Str::limit(strip_tags($about->description), 300, '...') !!}
                            </p>

                            {{-- <h3 class="about-heading" style="font-size: 38px; margin-top: 40px; text-align: left;">
                                {{ \App\Helpers\TranslationHelper::translate('We at Green Line') }}</h3> --}}

                            <div class="feature-item" style="text-align: left;">
                                <i class="fas fa-truck feature-icon"></i>
                                <div class="feature-text">
                                    {{ $about->title_one }}
                                </div>
                            </div>

                            <div class="feature-item" style="text-align: left;">
                                <i class="fas fa-users feature-icon"></i>
                                <div class="feature-text">
                                    {{ $about->title_tow }}
                                </div>
                            </div>

                            <div class="feature-item" style="text-align: left;">
                                <i class="fas fa-bullseye feature-icon"></i>
                                <div class="feature-text">
                                    {{ $about->title_three }}

                                </div>
                            </div>

                            <div class="feature-item" style="text-align: left;">
                                <i class="fas fa-star feature-icon"></i>
                                <div class="feature-text">{{ $about->title_four }}</div>
                            </div>

                            <div class="text-left">
                                <a href="{{ route('about') }}"
                                    class="read-more-btn">{{ \App\Helpers\TranslationHelper::translate('Read More') }}</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>



        <div class="container">

            <div class="header-main">
                <p class="small-title">{{ \App\Helpers\TranslationHelper::translate('Our Services') }}</p>
                <p class="description">
                    {!! setting('description_section_services_home', app()->getLocale()) !!}
                </p>

            </div>

    
            <div class="services-grid-main">
    <a href="{{ route('import-export') }}">
        <div class="service-card">
            <div class="card-content">
                <h3>{{ \App\Helpers\TranslationHelper::translate('Import and Export') }}</h3>
                <p>{{ setting('title_import_export', app()->getLocale()) }}</p>
            </div>
            <div class="card-image">
                <img src="{{ setting('image_banner_import_export', 'en') }}" alt="Import Export" class="w-100">
            </div>
        </div>
    </a>

    @foreach ($services as $service)
        <a href="{{ route('service.details', $service->id) }}">
            <div class="service-card">
                <div class="card-content">
                    <h3>{{ $service->name }}</h3>
                    <p>{!! Str::limit(strip_tags($service->description), 200, '...') !!}</p>
                </div>
                <div class="card-image">
                    <img src="{{ $service->getFirstMediaUrl('products') }}" alt="Service" class="w-100">
                </div>
            </div>
        </a>
    @endforeach

    <div class="button-container text-end">
        <a href="{{ route('serves') }}"
            class="contact-button">{{ \App\Helpers\TranslationHelper::translate('All Services') }}</a>
    </div>


     {{-- <div class="button-container text-end">
    <a href="{{ route('productZahraaAlkhair') }}"
        class="contact-button">
        {{ \App\Helpers\TranslationHelper::translate('All products') }}
    </a>
</div> --}}

</div>





 <section class="products-section">
     
    <div class="container">
        <div class="section-header">
                            <p class="small-title">{{ \App\Helpers\TranslationHelper::translate('our products') }}</p>
<h1 class="main-title" style="margin-top: 0; margin-bottom: .5rem; font-weight: 500; line-height: 1.2;">
    {{ 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>
                    </div>
                    <img src="{{ $productZahraaAlkhair->getFirstMediaUrl('product_zahraa_alkhair') }}" alt="Product Image" class="background-image" />
                </div>
            </div>
        </div>
    @endforeach


   

</div>
   <div class="button-container text-end">
    <a href="{{ route('productZahraaAlkhair') }}"
        class="contact-button">
        {{ \App\Helpers\TranslationHelper::translate('All products') }}
    </a>
</div>

    </div>
</section>



            {{-- <div class="services-grid-main">
                @foreach ($services as $service)
                    <a href="{{ route('service.details', $service->id) }}">
                        <div class="service-card">
                            <div class="card-content">
                                <h3>{{ $service->name }}</h3>
                                <p>{!! Str::limit(strip_tags($service->description), 200, '...') !!}</p>
                            </div>
                            <div class="card-image">
                                <img src="{{ $service->getFirstMediaUrl('products') }}" alt="Team" class="w-100">
                            </div>
                        </div>
                    </a>
                @endforeach
                <div class="button-container">
                    <a href="{{ route('serves') }}"
                        class="contact-button">{{ \App\Helpers\TranslationHelper::translate('All Services') }}</a>
                </div>
            </div> --}}

            <section class="stats-section">
                <div class="container">
                    <div class="stats-grid">
                        <div class="stat-item">
                            <div class="icon">
                                <i class="fas fa-building"></i>
                            </div>
                            <h2 class="number">+{{ setting('Shipments_Delivered_number', app()->getLocale()) }}</h2>
                            <p class="description">{{ setting('Shipments_Delivered_title', app()->getLocale()) }}</p>
                        </div>

                        <div class="stat-item">
                            <div class="icon">
                                <i class="fas fa-users"></i>
                            </div>
                            <h2 class="number">+{{ setting('Countries_Covered_number', app()->getLocale()) }}</h2>
                            <p class="description">{{ setting('Countries_Covered_title', app()->getLocale()) }}</p>
                        </div>

                        <div class="stat-item">
                            <div class="icon">
                                <i class="fas fa-globe"></i>
                            </div>
                            <h2 class="number">+{{ setting('Satisfied_Clients_number', app()->getLocale()) }}</h2>
                            <p class="description">{{ setting('Satisfied_Clients_title', app()->getLocale()) }}</p>
                        </div>

                        <div class="stat-item">
                            <div class="icon">
                                <i class="fas fa-box"></i>
                            </div>
                            <h2 class="number">+{{ setting('Offices_Worldwide_number', app()->getLocale()) }}</h2>
                            <p class="description">{{ setting('Offices_Worldwide_title', app()->getLocale()) }}</p>
                        </div>
                    </div>
                </div>
            </section>

            <section class="shipping-section container py-5">
                <div class="row align-items-center">
                    <div class="col-lg-7">
                        <h2 class="shipping-title mb-3" style="color: #2d6a4f; font-size: 32px; font-weight: 700;">
                            {{ $about->title_services }}</h2>
                        <p class="description">{!! Str::limit(strip_tags($about->description_services), 700, '...') !!}</p>
                        
                    </div>
                    <div class="col-lg-5 image-box mt-4 mt-lg-0">
                        <img src="{{ $about->getFirstMediaUrl('abouts_image_section_services') }}" alt="Team"
                            class="w-100">
                    </div>
                </div>
            </section>

            <section style="background-image: url('{{ $about->getFirstMediaUrl('aboutsimage_section_three') }}');"
                class="hero-section">
                <div class="overlay"></div>
                <div style="color: #fff !important;" class="content">
                    <p class="description-2">
                        {!! $about->description_section_three !!}
                    </p>
                    <a href="{{ route('message_contact') }}"
                        class="cta-button">{{ \App\Helpers\TranslationHelper::translate('Contact Us') }}</a>
                </div>
            </section>

            {{-- <section class="contact-section">
                <div class="container-fluid p-0">
                    <div class="row g-0">
                        <div class="col-lg-6">
                            <div class="contact-image"
                                style="background-image: url('{{ $contact->getFirstMediaUrl('contacts_meta_image') }}');">
                            </div>

                        </div>
                        <div class="col-lg-6">
                            <div class="contact-content">
                                <h5 class="contact-title">{{ \App\Helpers\TranslationHelper::translate('Contact Us') }}
                                </h5>
                                <h2 style="color:#fff;" class="contact-subtitle">{!! $contact->title !!}</h2>
                                <div class="contact-text">
                                    <p>{!! $contact->description !!}</p>
                                </div>

                                <div class="contact-info">
                                    <div class="info-item">
                                        <div class="info-icon">
                                            <i class="fas fa-envelope"></i>
                                        </div>
                                        <div class="main-titel">
                                            <div class="info-title">
                                                {{ \App\Helpers\TranslationHelper::translate('Email Address') }}</div>
                                            <div>{{ $contact->x }}</div>
                                        </div>
                                    </div>

                                    <div class="info-item">
                                        <div class="info-icon">
                                            <i class="fas fa-map-marker-alt"></i>
                                        </div>
                                        <div class="main-titel">
                                            <div class="info-title">
                                                {{ \App\Helpers\TranslationHelper::translate('Address') }}</div>
                                            <div>{{ $contact->address }}</div>
                                        </div>
                                    </div>

                                    <div class="info-item">
                                        <div class="info-icon">
                                            <i class="fas fa-phone-alt"></i>
                                        </div>
                                        <div class="main-titel">
                                            <div class="info-title">
                                                {{ \App\Helpers\TranslationHelper::translate('phone') }}</div>
                                            <div>{{ $contact->phono }}</div>
                                        </div>
                                    </div>
                                </div>

                                <div class="social-icons">
                                    <a href="{{ $contact->iniesta }}" target="_blank" class="social-icon">
                                        <i class="fab fa-instagram"></i>
                                    </a>

                                    <a href="{{ $contact->twitter }}" target="_blank" class="social-icon">
                                        <i class="fab fa-twitter"></i>
                                    </a>
                                    <a href="{{ $contact->facebook }}" target="_blank" class="social-icon">
                                        <i class="fab fa-facebook-f"></i>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section> --}}



    </main>
@endsection


@push('js')
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>


    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const numberElements = document.querySelectorAll('.number');

            const targetValues = [50, 1500, 197, 1800];
            let counted = false;

            function isInViewport(element) {
                const rect = element.getBoundingClientRect();
                return (
                    rect.top <= (window.innerHeight || document.documentElement.clientHeight) &&
                    rect.bottom >= 0
                );
            }

            function startCounting() {
                if (counted) return;

                numberElements.forEach((element, index) => {
                    const targetValue = targetValues[index];
                    let currentValue = 0;
                    const duration = 2000;
                    const steps = 50;
                    const increment = targetValue / steps;
                    const interval = duration / steps;

                    const counter = setInterval(() => {
                        currentValue += increment;

                        if (currentValue >= targetValue) {
                            element.textContent = '+' + targetValue.toLocaleString('en-US');
                            clearInterval(counter);
                        } else {
                            element.textContent = '+' + Math.floor(currentValue).toLocaleString(
                                'en-US');
                        }
                    }, interval);
                });

                counted = true;
            }

            function checkPosition() {
                const statsSection = document.querySelector('.stats-section');
                if (isInViewport(statsSection)) {
                    startCounting();
                }
            }

            const icons = document.querySelectorAll('.icon');
            icons.forEach(icon => {
                icon.addEventListener('mouseenter', function() {
                    this.style.transform = 'scale(1.2) rotate(5deg)';
                });

                icon.addEventListener('mouseleave', function() {
                    this.style.transform = 'scale(1) rotate(0)';
                });
            });

            checkPosition();
            window.addEventListener('scroll', checkPosition);
        });
    </script>
@endpush