@extends('layouts.frontend.master')

@section('content')
<!-- Slider Head -->
<div class="main-body-slider relative overflow-hidden z-[9]" id="Home">
    <div id="sliderHome" class="owl-carousel owl-theme sliderHome overflow-hidden">
        <div class="item position-relative">
            <img src="{{ $data['sliders']->main_image() }}" alt="" loading="lazy"
                class="lg:h-screen w-full h-[400px]" />
            <div class="overlay-fix w-full h-full flex items-center absolute top-0 right-0 bg-overlay">
                <div class="container overflow-hidden">
                    @if($data['sliders']->description_ar && $data['sliders']->description_en)
                    <div class="over-info lg:w-[700px] m-auto text-center">
                        <p class="text-white text-[22px]">{!! app()->getLocale() == 'ar' ?
                            $data['sliders']->description_ar : $data['sliders']->description_en !!}</p>
                    </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Section More Info -->
<div class="lg:my-[40px] relative z-[9]">
    <div class="container">
        <div class="flex justify-center flex-col lg:flex-row lg:gap-[150px]">
            <div class="text-center my-3 flex-1">
                <div class="relative">
                    <img loading="lazy" src="{{asset('frontend')}}/images/bg-shape.png"
                        class="w-[150px] h-[150px] object-contain m-auto" alt="" />
                    <h1
                        class="text-[18px] text-primary absolute top-[50%] translate-y-[-50%] text-center w-full font-bold">
                        {{ __('website.ourVision') }}
                    </h1>
                </div>
                <p class="text-[12px]">
                    {{ app()->getLocale() == 'ar' ? $settings['vision_ar'] : $settings['vision_en'] }}

                </p>
            </div>
            <div class="text-center my-3 flex-1">
                <div class="relative">
                    <img loading="lazy" src="{{asset('frontend')}}/images/bg-shape.png"
                        class="w-[150px] h-[150px] object-contain m-auto" alt="" />
                    <h1
                        class="text-[18px] text-primary absolute top-[50%] translate-y-[-50%] text-center w-full font-bold">
                        {{ __('website.ourMission') }}
                    </h1>
                </div>
                <p class="text-[12px]">
                    {{ app()->getLocale() == 'ar' ? $settings['message_ar'] : $settings['message_en'] }}
                </p>
            </div>
            <div class="text-center my-3 flex-1">
                <div class="relative">
                    <img loading="lazy" src="{{asset('frontend')}}/images/bg-shape.png"
                        class="w-[150px] h-[150px] object-contain m-auto" alt="" />
                    <h1
                        class="text-[18px] text-primary absolute top-[50%] translate-y-[-50%] text-center w-full font-bold">
                        {{ __('website.ourValues') }}
                    </h1>
                </div>
                <p class="text-[12px]">
                    {{ app()->getLocale() == 'ar' ? $settings['ourValues_ar'] : $settings['ourValues_en'] }}

                </p>
            </div>
        </div>
    </div>
</div>

<!-- Info About Us -->
<div class="mb-4 bg-overlay2 py-5 relative z-[9]" id="About">
    <div class="container">
        <div class="grid grid-cols-12 gap-y-2 items-center py-3 overflow-hidden">
            <div class="lg:col-span-6 col-span-12 my-3" data-aos="fade-in" data-aos-offset="200"
                data-aos-easing="ease-in-sine" data-aos-duration="500">
                <h3
                    class="text-secondary font-bold text-[35px] relative before:content-[''] before:absolute ltr:before:left-0 rtl:before:right-0 before:bottom-[-10px] before:bg-primary before:w-[120px] before:h-[2px]">
                    {{ app()->getLocale() == 'ar' ? $settings['website_name_ar'] : $settings['website_name_en'] }}
                </h3>
                <p class="max-w-[550px] my-[20px] leading-[30px] text-[15px] text-gray-900/[60%]">
                    {{ app()->getLocale() == 'ar' ? $settings['whoWeAre_ar'] : $settings['whoWeAre_en'] }}
                </p>
            </div>
            <div class="lg:col-span-6 col-span-12 my-3" data-aos="fade-in" data-aos-offset="200"
                data-aos-easing="ease-in-sine" data-aos-duration="500">
                <div class="flex justify-center">
                    <img loading="lazy" src="{{asset('frontend')}}/images/bg-about.png"
                        class="lg:w-[90%] w-full m-auto rounded-[30px] shadow-[0px_10px_1px_rgba(221,_221,_221,_1),_0_10px_20px_rgba(204,_204,_204,_1)]"
                        alt="" />
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Section Products -->
<div class="my-4 relative z-[9] py-[20px]" id="Products">
    <div class="my-[30px] relative">
        <h5
            class="text-secondary font-bold text-[40px] text-center relative before:content-[''] before:absolute before:left-0 before:right-0 before:bottom-[-10px] before:m-auto before:bg-primary before:w-[100px] before:h-[2px]">
            {{ __('website.products') }}
        </h5>
    </div>
    <div class="container relative z-[9] py-9">
        <div id="sliderProducts" class="owl-carousel owl-theme sliderProducts overflow-hidden">
           @foreach ($data['products'] as $key => $product )
                <div class="item position-relative">
                    <div class="text-center group bg-white rounded-[20px] overflow-hidden border p-3">
                        <div class="overflow-hidden h-[250px] rounded-[20px] relative">
                            <img loading="lazy" src="{{ $product->image() }}"
                                class="w-full h-full m-auto transition duration-500 ease-in-out group-hover:scale-[1.1]"
                                alt="{{ app()->getLocale() == 'ar' ? $product->title_ar : $product->title_en }}" />
                            <a href="{{ $product->image() }}" data-fancybox="watermrk"
                                data-caption="{{ app()->getLocale() == 'ar' ? $product->title_ar : $product->title_en }}"
                                class="absolute top-0 right-0 w-full h-full bg-overlay flex items-center justify-center text-white transition duration-500 ease-in-out lg:opacity-0 group-hover:opacity-[100%]">
                                <i class="fa-solid fa-magnifying-glass-plus text-white text-[30px]"></i>
                            </a>
                            <h3
                                class="absolute bottom-[50px] py-3 right-0 w-full text-center bg-primary/[70%] text-white text-[20px] font-bold relative">
                                {{ app()->getLocale() == 'ar' ? $product->title_ar : $product->title_en }}
                            </h3>
                        </div>
                    </div>
                </div>
            @endforeach
        </div>
        <div class="flex items-center justify-center mt-9">
            <a href="{{ route('products') }}"
                class="bg-secondary inline-block m-auto text-[15px] text-white rounded-[10px] px-5 py-3">{{
                __('website.seeMore') }}</a>
        </div>
    </div>
</div>

<!-- Section Success Partners -->
<div class="my-4 pt-[30px] relative z-[9]">
    <div class="my-[30px] relative">
        <h5
            class="text-secondary font-bold text-[40px] text-center relative before:content-[''] before:absolute before:left-0 before:right-0 before:bottom-[-10px] before:m-auto before:bg-primary before:w-[100px] before:h-[2px]">
            {{ __('website.successPartners') }}
        </h5>
    </div>
    <div class="container my-[70px]">
        <div id="sliderPartners" class="owl-carousel owl-theme sliderPartners">
            @foreach ($data['partners'] as $partner)
            <div class="item text-center group">
                <img loading="lazy" src="{{ $partner->main_image() }}" alt=""
                    class="!w-[150px] h-[150px] object-contain m-auto transition duration-500 ease-in-out grayscale group-hover:grayscale-0" />
            </div>
            @endforeach
        </div>
    </div>
</div>

<!-- Form Contact -->
<div class="pb-[80px] lg:pt-[30px] relative z-[9]" id="Contact">
    <div class="my-[30px] relative">
        <h5
            class="text-secondary font-bold text-[40px] text-center relative before:content-[''] before:absolute before:left-0 before:right-0 before:bottom-[-10px] before:m-auto before:bg-primary before:w-[100px] before:h-[2px]">
            {{ __('website.contact') }}
        </h5>
    </div>
    <div class="container lg:my-[70px] my-[20px]">
        <div class="grid grid-cols-12 lg:gap-[40px] p-3">
            <div class="lg:col-span-6 col-span-12 mb-3">
                <div class="flex lg:items-center gap-[10px] lg:flex-row flex-col mb-7">
                    <div class="flex items-center gap-2 lg:w-[33%] w-full">
                        <span class="w-[50px] h-[50px] flex items-center justify-center bg-main rounded-[5px]"><img
                                src="{{asset('frontend')}}/images/phone.png" class="max-w-[40px]" alt="" /></span>
                        <div class="">
                            <h1 class="text-main">{{ __('website.contactUs') }}</h1>
                            <p class="text-main text-[13px] font-normal" style="direction: ltr">
                                {{ $settings['phone'] }}
                            </p>
                        </div>
                    </div>
                    <div class="flex items-center gap-2 lg:w-[33%] w-full">
                        <span class="w-[50px] h-[50px] flex items-center justify-center bg-main rounded-[5px]"><img
                                src="{{asset('frontend')}}/images/email.png" class="max-w-[30px]" alt="" /></span>
                        <div class="">
                            <h1 class="text-main">{{ __('website.emailUs') }}</h1>
                            <p class="text-main text-[13px] font-normal">
                                {{ $settings['email'] }}
                            </p>
                        </div>
                    </div>
                    <div class="flex items-center gap-2 lg:w-[33%] w-full">
                        <span class="w-[50px] h-[50px] flex items-center justify-center bg-main rounded-[5px]"><img
                                src="{{asset('frontend')}}/images/maps.png" class="max-w-[40px]" alt="" /></span>
                        <div class="">
                            <p class="text-main text-[13px] font-normal">{{ __('website.location') }}</p>
                            <h1 class="text-main">{{ app()->getLocale() == 'ar' ? $settings['address_short_ar'] :
                                $settings['address_short_en'] }}</h1>
                        </div>
                    </div>
                </div>
                <form id="ajaxFormContact" action="{{ route('contact-post') }}" method="POST" class="w-full"
                    enctype="multipart/form-data">
                    @csrf
                    <input class="w-full border border-[#ddd] rounded-[5px] mb-3 p-3" type="text" name="name" id="name"
                        value="" placeholder="{{ __('website.yourName') }}" />
                    <div style="color: red" id="nameError"></div>
                    <input class="w-full border border-[#ddd] rounded-[5px] mb-3 p-3" type="email" name="email"
                        id="email" value="" placeholder="{{ __('website.email') }}" />
                    <div style="color: red" id="emailError"></div>
                    <input class="w-full border border-[#ddd] rtl:text-right ltr:text-left rounded-[5px] mb-3 p-3"
                        name="phone" id="phone" value="" type="tel" placeholder="{{ __('website.mobile') }}" />
                    <div style="color: red" id="phoneError"></div>
                    <textarea class="w-full border border-[#ddd] rounded-[5px] mb-3 p-3 min-h-[200px] resize-none"
                        name="message" id="message" placeholder="{{ __('website.enterMessage') }}" required></textarea>
                    <div style="color: red" id="messageError"></div>
                    <button type="submit"
                        class="bg-secondary text-white m-auto table text-[20px] text-main rounded-[10px] w-full h-[45px]">
                        {{ __('website.send') }}
                    </button>
                    <div id="successMessageContact" class="alert alert-success d-none" style="color:#015CA7"></div>
                </form>
            </div>
            <div class="lg:col-span-6 col-span-12 mt-3">
                <iframe class="w-full h-[500px]" frameborder="0" scrolling="no" marginheight="0" marginwidth="0"
                    src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3456.249451246733!2d30.953628175550936!3d29.972260274960007!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x14585785404c1c05%3A0x72d28a5e8acaa86a!2z2LTYsdmD2Kkg2LPYqNmEIFNPUE9MIENvbXBhbnk!5e0!3m2!1sen!2seg!4v1733262562437!5m2!1sen!2seg"></iframe>
            </div>
        </div>
    </div>
</div>
@endsection