@extends('layouts.frontend.master')

@section('content')

<!-- Slider Head -->
<div class="main-body-slider relative overflow-hidden z-[9]" id="Home">
    <img src="{{$data['slider']->main_image()}}" alt="" class="lg:h-screen w-full h-[500px] object-cover" />
    <svg class="absolute lg:bottom-[-65px] bottom-[-10px] right-0 w-full z-[9]" xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 1440 320">
        <path fill="#fff" fill-opacity="1"
            d="M0,224L24,202.7C48,181,96,139,144,138.7C192,139,240,181,288,197.3C336,213,384,203,432,197.3C480,192,528,192,576,197.3C624,203,672,213,720,229.3C768,245,816,267,864,245.3C912,224,960,160,1008,160C1056,160,1104,224,1152,229.3C1200,235,1248,181,1296,165.3C1344,149,1392,171,1416,181.3L1440,192L1440,320L1416,320C1392,320,1344,320,1296,320C1248,320,1200,320,1152,320C1104,320,1056,320,1008,320C960,320,912,320,864,320C816,320,768,320,720,320C672,320,624,320,576,320C528,320,480,320,432,320C384,320,336,320,288,320C240,320,192,320,144,320C96,320,48,320,24,320L0,320Z">
        </path>
    </svg>
</div>

<!-- Targets -->
<div class="relative lg:top-[-150px] top-[-100px] z-[99]">
    <div class="container">
        <div class="flex justify-center items-center lg:flex-row flex-col gap-9">
            <div
                class="bg-white shadow-md rounded-[5px] my-3 flex items-center justify-center flex-col w-[250px] h-[250px] p-4">
                <img src="{{asset('frontend')}}/images/user-think.png" class="max-w-[100px]" alt="" />
                <h5 class="font-bold text-center text-main text-[14px]">
                    {!! app()->getLocale() == 'ar' ? $data['settings']['goal_ar'] :  $data['settings']['goal_en'] !!}
                </h5>
            </div>
            <div
                class="bg-white shadow-md rounded-[5px] my-3 flex items-center justify-center flex-col w-[250px] h-[250px] p-4">
                <img src="{{asset('frontend')}}/images/info-balance.png" class="max-w-[100px]" alt="" />
                <h5 class="font-bold text-center text-main text-[14px]">
                    {!! app()->getLocale() == 'ar' ? $data['settings']['goal2_ar'] :  $data['settings']['goal2_en'] !!}
                </h5>
            </div>
            <div
                class="bg-white shadow-md rounded-[5px] my-3 flex items-center justify-center flex-col w-[250px] h-[250px] p-4">
                <img src="{{asset('frontend')}}/images/report-balance.png" class="max-w-[100px]" alt="" />
                <h5 class="font-bold text-center text-main text-[14px]">
                    {!! app()->getLocale() == 'ar' ? $data['settings']['goal3_ar'] :  $data['settings']['goal3_en'] !!}
                </h5>
            </div>
        </div>
    </div>
</div>

<!-- About -->
<div id="About" class="relative mb-8">
    <img src="{{asset('frontend')}}/images/image-balance.png" class="img-about absolute top-[-600px] right-0 left-0 m-auto opacity-25" alt="" />
    <div class="container">
        <div class="grid grid-cols-12 gap-3 py-3">
            <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="400">
                <div class="flex items-center relative">
                    <img
                      src="{{asset('frontend')}}/images/pn-2.png"
                      class="max-w-[20px] rotate-[90deg] absolute top-[50%] translate-y-[-50%] lg:ltr:left-[-40px] lg:rtl:right-[-40px] rtl:right-[-5px] ltr:left-[-5px]"
                      alt=""
                    />
                    <h5 class="font-bold text-[40px] lg:ps-0 ps-[40px]">{{ __('website.about') }}</h5>
                  </div>
                <p class="leading-9">
                    {!! app()->getLocale() == 'ar' ? $data['settings']['whoWeAre_ar'] :  $data['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="m-auto lg:w-[90%] w-full relative after:content-[''] after:w-[100px] after:h-[100px] after:border-t-[5px] after:border-l-[5px] after:border-main after:absolute after:top-[-20px] after:left-[-20px] after:opacity-50 before:content-[''] before:w-[100px] before:h-[100px] before:border-b-[5px] before:border-r-[5px] before:border-main before:absolute before:bottom-[-20px] before:right-[-20px] before:opacity-50">
                    <img class="m-auto lg:w-[100%] h-[400px] w-full rounded-[10px]" src="{{asset('frontend')}}/images/bg-8.jpg" alt="" />
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Services -->
<div id="Services" class="relative overflow-hidden pt-[40px] pb-[40px]">
    <div class="container">
        <div class="text-center mb-8 max-w-[400px] m-auto">
            <div class="flex items-center justify-center">
                <div class="flex items-center relative">
                  <img
                    src="{{asset('frontend')}}/images/pn-2.png"
                    class="max-w-[20px] rotate-[90deg] absolute top-[50%] translate-y-[-50%] lg:ltr:left-[-40px] lg:rtl:right-[-40px] rtl:right-[-5px] ltr:left-[-5px]"
                    alt=""
                  />
                  <h5 class="font-bold text-[40px] lg:ps-0 ps-[40px]">{{ __('website.services') }}</h5>
                </div>
              </div>
            <p class="leading-9">
                {!! app()->getLocale() == 'ar' ? $data['settings']['servicesMessage_ar'] :  $data['settings']['servicesMessage_en'] !!}
            </p>
        </div>
        <div class="grid grid-cols-12 gap-y-2 lg:gap-x-14 py-3 lg:h-[550px] overflow-hidden px-[35px] list-services">
            @foreach ($data['services'] as $index=>$service)
                <div class="lg:col-span-6 col-span-12 my-3" data-aos="fade-in" data-aos-offset="{{ $index  % 2 == 0 ? '200' : '250' }}"
                    data-aos-easing="ease-in-sine" data-aos-duration="500">
                    <div class="border border-secondary p-2 rounded-[3px] bg-white relative">
                        <div
                            class="bg-white border border-secondary p-2 rounded-[3px] absolute top-[50%] translate-y-[-50%] rtl:right-[-35px] ltr:left-[-35px]">
                            <img src="{{asset('frontend')}}/images/service-{{ $index + 1 }}.png" alt="" class="max-w-[50px]" />
                        </div>
                        <div class="ps-[45px] py-4">
                            <h4 class="font-bold text-[18px] mb-2">
                                {{ app()->getLocale() == 'ar' ? $service->name_ar : $service->name_en }}
                            </h4>
                            <div class="text-[#8d8d8d] text-[14px] lg:h-[60px] overflow-y-auto ltr:text-left">
                                {!! app()->getLocale() == 'ar' ? $service->description_ar : $service->description_en !!}
                            </div>
                        </div>
                    </div>
                </div>
            @endforeach
        </div>
        <button
            class="show-more-list hidden w-[50px] h-[50px] bg-main text-white lg:flex items-center justify-center rounded-[5px] m-auto mt-7">
            <i class="fa-solid fa-angles-down"></i>
        </button>
    </div>
</div>

<!-- OurValues -->
<div id="OurValues"
    class="relative my-[40px] overflow-hidden bg-[url('{{asset('frontend')}}/images/bg-con.jpg')] bg-no-repeat bg-cover bg-center">
    <div class="bg-secondary/70 lg:p-[50px] p-[20px]">
        <div class="border-4 border-secondary pt-8">
            <div class="container">
                <div class="text-center mb-8 max-w-[400px] m-auto">
                    <div class="flex items-center justify-center">
                        <div class="flex items-center relative">
                          <img
                            src="{{asset('frontend')}}/images/pn-2.png"
                            class="max-w-[20px] rotate-[90deg] absolute top-[50%] translate-y-[-50%] lg:ltr:left-[-40px] lg:rtl:right-[-40px] rtl:right-[-5px] ltr:left-[-5px]"
                            alt=""
                          />
                          <h5
                            class="font-bold text-[40px] text-white lg:ps-0 ps-[40px]"
                          >
                          {{ __('website.values') }}
                          </h5>
                        </div>
                      </div>
                    <p class="leading-9 text-white">
                        {!! app()->getLocale() == 'ar' ? $data['settings']['valuesMessage_ar'] :  $data['settings']['valuesMessage_en'] !!}
                    </p>
                </div>
                <div class="grid grid-cols-12 gap-x-6 gap-y-2 py-3">
                    @foreach ($data['values'] as $index=>$value)
                        <div class="lg:col-span-4 col-span-12 relative after:hidden lg:after:block after:content-[''] after:absolute after:top-[50%] after:translate-y-[-50%] after:w-[2px] after:h-[50%] after:left-[-10px] after:bg-white"
                            data-aos="fade-up" data-aos-offset="200" data-aos-easing="ease-in-sine" data-aos-duration="400">
                            <div class="text-center rounded-[5px] px-5 my-4 flex items-center justify-center flex-col">
                                <img src="{{asset('frontend')}}/images/svg/svgviewer-output ({{$index + 1}}).svg" class="max-w-[100px] m-auto" alt="" />
                                <p class="leading-9 my-5 lg:h-[80px] overflow-y-auto text-white font-bold text-[17px]">
                                    {!! app()->getLocale() == 'ar' ? $value->description_ar : $value->description_en !!}
                                </p>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Visions & Massages -->
<div id="VisionsMassages" class="relative py-[20px] overflow-hidden">
    <div class="container">
        <div class="grid grid-cols-12 gap-6 py-3">
            <div class="lg:col-span-6 col-span-12 my-3" data-aos="fade-up" data-aos-offset="200"
                data-aos-easing="ease-in-sine" data-aos-duration="400">
                <div class="shadow-md rounded-[6px] p-5 bg-white my-4 relative">
                    <img src="{{asset('frontend')}}/images/shap-text.png" class="absolute bottom-0 w-full opacity-25 right-0" alt="" />
                    <div class="flex items-center justify-center">
                        <div class="flex items-center relative">
                          <img
                            src="{{asset('frontend')}}/images/pn-2.png"
                            class="max-w-[20px] rotate-[90deg] absolute top-[50%] translate-y-[-50%] lg:ltr:left-[-40px] lg:rtl:right-[-40px] rtl:right-[-5px] ltr:left-[-5px]"
                            alt=""
                          />
                          <h5 class="font-bold text-[40px] lg:ps-0 ps-[40px]">
                            {{ __('website.ourVision') }}
                          </h5>
                        </div>
                      </div>
                    <p class="leading-9 my-5 h-[200px] overflow-y-auto">
                        {!! app()->getLocale() == 'ar' ? $data['settings']['vision_ar'] :  $data['settings']['vision_en'] !!}
                    </p>
                </div>
            </div>
            <div class="lg:col-span-6 col-span-12 my-3" data-aos="fade-up" data-aos-offset="250"
                data-aos-easing="ease-in-sine" data-aos-duration="400">
                <div class="shadow-md rounded-[6px] p-5 bg-white my-4 relative">
                    <img src="{{asset('frontend')}}/images/shap-text.png" class="absolute bottom-0 w-full opacity-25 right-0" alt="" />
                    <div class="flex items-center justify-center">
                        <div class="flex items-center relative">
                          <img
                            src="{{asset('frontend')}}/images/pn-2.png"
                            class="max-w-[20px] rotate-[90deg] absolute top-[50%] translate-y-[-50%] lg:ltr:left-[-40px] lg:rtl:right-[-40px] rtl:right-[-5px] ltr:left-[-5px]"
                            alt=""
                          />
                          <h5 class="font-bold text-[40px] lg:ps-0 ps-[40px]">
                            {{ __('website.ourMission') }}
                          </h5>
                        </div>
                      </div>
                    <p class="leading-9 my-5 h-[200px] overflow-y-auto">
                        {!! app()->getLocale() == 'ar' ? $data['settings']['message_ar'] :  $data['settings']['message_en'] !!}
                    </p>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Contact Us -->
<div id="Contact" class="relative py-[40px] overflow-hidden">
    <div class="flex items-center justify-center">
        <div class="flex items-center relative">
          <img
            src="{{asset('frontend')}}/images/pn-2.png"
            class="max-w-[20px] rotate-[90deg] absolute top-[50%] translate-y-[-50%] lg:ltr:left-[-40px] lg:rtl:right-[-40px] rtl:right-[-5px] ltr:left-[-5px]"
            alt=""
          />
          <h5 class="font-bold text-[40px] lg:ps-0 ps-[40px]">{{ __('website.contactUs') }}</h5>
        </div>
      </div>
    <div class="container py-6">
        <form id="ajaxForm" action="{{route('contact-post')}}" method="POST" class="lg:max-w-[70%] w-full m-auto border p-5 overflow-hidden rounded-[5px]" enctype="multipart/form-data">
            @csrf

            <div class="relative">
                
                <img class="absolute opacity-20 bottom-0 rtl:left-0 ltr:right-0 max-w-[400px]" src="{{asset('frontend')}}/images/shok.png"alt="" />
                
                <div class="mb-3 relative z-[9]">
                    <label class="block mb-2">{{ __('website.yourName') }}<span class="text-red-500">*</span></label>
                    <div class="">
                        <input type="text" name="name" id="name"  value="" class="border h-[50px] rounded-[5px] px-3 w-full bg-transparent"
                            placeholder="{{ __('website.yourName') }}" required/>
                    </div>
                    <div style="color: red" id="nameError"></div>
                </div>
                <div class="mb-3 relative z-[9]">
                    <label class="block mb-2">{{ __('website.email') }} <span class="text-red-500">*</span></label>
                    <div class="">
                        <input type="email" name="email" id="email" value="" class="border h-[50px] rounded-[5px] px-3 w-full bg-transparent"
                            placeholder="{{ __('website.email') }}" required/>
                    </div>
                    <div style="color: red" id="emailError"></div>
                </div>
                <div class="mb-3 relative z-[9]">
                    <label class="block mb-2">{{ __('website.mobile') }} <span class="text-red-500">*</span></label>
                    <div class="">
                        <input type="tel" name="phone" id="phone"  value=""
                            class="border h-[50px] rounded-[5px] px-3 w-full rtl:text-right ltr:text-left bg-transparent"
                            placeholder="{{ __('website.mobile') }}" required/>
                    </div>
                    <div style="color: red" id="phoneError"></div>
                </div>
                <div class="mb-3 relative z-[9]">
                    <label class="block mb-2">{{ __('website.enterMessage') }} <span class="text-red-500">*</span></label>
                    <div class="">
                        <textarea name="message" id="message"  value="" placeholder="{{ __('website.enterMessage') }}"
                            class="border min-h-[250px] rounded-[5px] p-3 w-full resize-none bg-transparent" required></textarea>
                    </div>
                    <div style="color: red" id="messageError"></div>
                </div>
            </div>

            <button type="submit" class="w-[250px] h-[45px] flex items-center justify-center rounded-[5px] bg-secondary text-white fw-bold m-auto mt-7">
                {{ __('website.send') }}
            </button>

            <div id="successMessage" class="alert alert-success d-none" style="color: green"></div> 
        </form>
    </div>
</div>

<!-- Customers & Teams -->
<div id="CustomersTeams" class="relative py-[20px] overflow-hidden">
    <div class="container">
        <div class="grid grid-cols-12 gap-6 py-3">
            <div class="lg:col-span-6 col-span-12 my-3" data-aos="fade-up" data-aos-offset="200"
                data-aos-easing="ease-in-sine" data-aos-duration="400">
                <div class="shadow-md rounded-[6px] p-5 bg-white my-4 relative">
                    <img src="{{asset('frontend')}}/images/shap-text.png" class="absolute bottom-0 w-full opacity-25 right-0" alt="" />
                    <div class="flex items-center justify-center">
                        <div class="flex items-center relative">
                          <img
                            src="{{asset('frontend')}}/images/pn-2.png"
                            class="max-w-[20px] rotate-[90deg] absolute top-[50%] translate-y-[-50%] lg:ltr:left-[-40px] lg:rtl:right-[-40px] rtl:right-[-5px] ltr:left-[-5px]"
                            alt=""
                          />
                          <h5 class="font-bold text-[40px] lg:ps-0 ps-[40px]">
                            {{ __('website.ourClients') }}
                          </h5>
                        </div>
                      </div>
                    <p class="leading-9 my-5 h-[200px] overflow-y-auto">
                        {!! app()->getLocale() == 'ar' ? $data['settings']['clients_ar'] :  $data['settings']['clients_en'] !!}

                    </p>
                </div>
            </div>
            <div class="lg:col-span-6 col-span-12 my-3" data-aos="fade-up" data-aos-offset="250"
                data-aos-easing="ease-in-sine" data-aos-duration="400">
                <div class="shadow-md rounded-[6px] p-5 bg-white my-4 relative">
                    <img src="{{asset('frontend')}}/images/shap-text.png" class="absolute bottom-0 w-full opacity-25 right-0" alt="" />
                    <div class="flex items-center justify-center">
                        <div class="flex items-center relative">
                          <img
                            src="{{asset('frontend')}}/images/pn-2.png"
                            class="max-w-[20px] rotate-[90deg] absolute top-[50%] translate-y-[-50%] lg:ltr:left-[-40px] lg:rtl:right-[-40px] rtl:right-[-5px] ltr:left-[-5px]"
                            alt=""
                          />
                          <h5 class="font-bold text-[40px] lg:ps-0 ps-[40px]">
                            {{ __('website.ourTeam') }}
                          </h5>
                        </div>
                      </div>
                    <p class="leading-9 my-5 h-[200px] overflow-y-auto">
                        {!! app()->getLocale() == 'ar' ? $data['settings']['clients_ar'] :  $data['settings']['clients_en'] !!}
                    </p>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection

@section('scripts')

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    $(document).ready(function(){
        $('#ajaxForm').on('submit', function(event){
            event.preventDefault(); // Prevent the page from reloading
            
            // Clear previous errors
            $('#nameError').text('');
            $('#emailError').text('');
            $('#phoneError').text('');
            $('#messageError').text('');
            $('#successMessage').addClass('d-none').text('');

            let formData = {
                _token: $('input[name="_token"]').val(), // CSRF Token
                name: $('#name').val(),
                email: $('#email').val(),
                phone: $('#phone').val(),
                message: $('#message').val(),
            };

            $.ajax({
                url: "{{ route('contact-post') }}",
                method: "POST",
                data: formData,
                success: function(response){
                    if(response.success) {
                        $('#successMessage').removeClass('d-none').text(response.message);
                        $('#ajaxForm')[0].reset(); // Clear form fields
                    }
                },
                error: function(response){
                    let errors = response.responseJSON.errors;

                    if(errors.name){
                        $('#nameError').text(errors.name[0]);
                    }
                    if(errors.email){
                        $('#emailError').text(errors.email[0]);
                    }
                    if(errors.phone){
                        $('#phoneError').text(errors.phone[0]);
                    }
                    if(errors.message){
                        $('#messageError').text(errors.message[0]);
                    }
                }
            });
        });
    });
</script>

@endsection