@extends('front.ar.layouts.master')

@section('title')
    Opet Marketing Agency
@endsection

@section('content')
    <header id="header" class="fixed-top d-flex align-items-center header-transparent">
        <div class="container d-flex align-items-center justify-content-between">
            <div class="logo">
                <a href="index.html" aria-label="some more descriptive text that explains the link">
                    <img src="{{ asset('front/Assets/img/opetlogo.png') }} " alt="logo" class="img-fluid" />
                </a>
            </div>
            <nav id="navbar" class="navbar">
                <ul>
                    <li>
                        <a class="nav-link scrollto active" href="#hero"> الرئيسية</a>
                    </li>
                    <li><a class="nav-link scrollto" href="#about"> من نـحن </a></li>
                    <li class="dropdown">
                        <a class="nav-link scrollto" href="#">خدمات</a>
                        <ul>
                            @foreach ($info_services as $info_service)
                                <li>
                                    <a href="{{ route('ar_services_index', $info_service->id) }}">
                                        {{ $info_service->title_ar }}</a>
                                </li>
                            @endforeach
                        </ul>
                    </li>
                    <li>
                        <a class="nav-link scrollto" href="#clients">شركاؤنا</a>
                    </li>
                    <li>
                        <a class="nav-link scrollto" href="#contact">اتصل بنا</a>
                    </li>
                </ul>
                <a href="{{ route('index_en') }}" class="btn-get-started scrollto">En</a>

                <i class="fa-solid fa-bars mobile-nav-toggle"></i>
            </nav>
            <!-- .navbar -->
        </div>
    </header>


    <main id="main">
        <!-- =======  hero start     ======= -->
        <section class="df aic jcc">
            <div id="hero">
                <div class="container-lg">

                    <div class="row">
                        <div class="st col-lg-7 pt-5 order-2 order-lg-1 d-flex align-items-center align-self-center">
                            <div data-aos="zoom-out">
                                <h1>دعونا نبني حلمك</h1>
                                <div class="d-inline p-2 text-center text-lg-start">
                                    <a href="#about" class="btn-get-started scrollto">قم بجولة</a>
                                </div>
                                <div class="d-inline p-2 text-center text-lg-start">
                                    <a href="#contact" class="btn-get-started scrollto">اتصل بنا الآن</a>
                                </div>
                            </div>
                        </div>
                        <div class="2st col-lg-5 order-1 order-lg-2 hero-img d-flex align-items-center align-self-center"
                            data-aos="zoom-out" data-aos-delay="300">
                            <div class="box">
                                <div class="wave -one"></div>
                                <div class="wave -two"></div>
                                <div class="wave -three"></div>
                            </div>
                            <img src="{{ asset('front/Assets/img/hero-img1.png') }}" class="img-fluid1 animated"
                                alt="landing PIC1" />
                        </div>
                    </div>
                </div>
            </div>
        </section>


        <!-- ======= About Section ======= -->

        <section id="about" class="about">
            <div class="container-lg">
                <div class="row">
                    <div class="col-xl-5 col-lg-5 d-flex order-sm-1 flex-column align-items-stretch justify-content-center"
                        data-aos="fade-right">
                        <img src="{{ asset('front/Assets/img/masala0.png') }}" alt="landing PIC1" />
                    </div>
                    <div class="col-xl-7 col-lg-7 icon-boxes order-sm-2 d-flex flex-column align-items-stretch justify-content-center"
                        data-aos="fade-left">
                        <h2 class="text-center">{{ $info_about->title_ar }}
                            <div class="row">
                                <div class="col-xl-12 iconboxes row1" dir="rtl">
                                    <div class="icon-box_ar" data-aos="zoom-in" data-aos-delay="100">
                                        <div class="icon">
                                            <i class="fa-solid fa-fingerprint"></i>
                                        </div>
                                        <h4 class="title"><a>من نحن </a></h4>
                                        <p class="description">
                                            {{ $info_about->who_we_are_ar }}
                                        </p>
                                    </div>
                                </div>
                                <div class="col-6 iconboxes row2">
                                    <div class="icon-box_ar" data-aos="zoom-in" data-aos-delay="50">
                                        <div class="icon"><i class="fa-solid fa-gift"></i></div>
                                        <h4 class="title">
                                            <a>رسالتنا</a>
                                        </h4>
                                        <p class="description">{{ $info_about->our_massag_ar }}.</p>
                                    </div>
                                </div>
                                <div class="col-6 iconboxes row2">
                                    <div class="icon-box_ar" data-aos="zoom-in" data-aos-delay="300">
                                        <div class="icon">
                                            <i class="fa-solid fa-atom"></i>
                                        </div>
                                        <h4 class="title"><a>رؤيتنا</a></h4>
                                        <p class="description">
                                            {{ $info_about->our_vision_ar }}
                                        </p>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-xl-6">
                                    <div class="row3" data-aos="zoom-in" data-aos-delay="50">
                                        <a href="#service" class="btn-get-started scrollto">شاهد أعمالنا</a>
                                    </div>
                                </div>
                                <div class="col-xl-6">
                                    <div class="row3" data-aos="zoom-in" data-aos-delay="75">
                                        <a href="#contact" class="btn-get-started scrollto">اتصل بنا </a>
                                    </div>
                                </div>
                            </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- End About Section -->

        <!-- ======= service Section ======= -->
        <section id="service" class="Service my-5">
            <div class="container-lg">
                <div class="row">
                    <div class="section-title" data-aos="fade-right">
                        <h2>خدماتنا</h2>
                        <p class="ml-3">هذا ما نفعله بكل فخر..</p>
                    </div>
                </div>

                <div class="Services">
                    <div class="card-grid">
                        @foreach ($info_services as $info_service)
                            <a href="{{ route('ar_services_index', $info_service->id) }}" class="card"
                                data-aos="zoom-in-up">
                                <div class="card__background"
                                    style="background-image: url({{ asset('front/Assets/img/services/1.png') }})"></div>
                                <div class="card__content">
                                    <h3 class="card__heading">{{ $info_service->title_ar }}</h3>
                                </div>
                            </a>
                        @endforeach

                    </div>
                </div>
            </div>
        </section>
        <!-- ======= Counts Section ======= -->
        <section id="counts" class="counts">
            <div class="container-lg">
                <div class="row">
                    <div class="section-title" data-aos="fade-right">
                        <h2>إنجازاتنا</h2>
                        <p class="ml-3">ما أنشأناه لشركائنا</p>
                    </div>
                </div>

                <div class="row" data-aos="zoom-in-up" data-aos-anchor="#counts" data-aos-offset="250"
                    data-aos-duration="500">
                    <div class="col-lg-3 col-md-6">
                        <div class="count-box">
                            <i class="fas fa-smile-beam"></i>
                            <span data-purecounter-start="0 "
                                data-purecounter-end="{{ $info_achievement->happy_client }} "
                                data-purecounter-duration="1 " class="purecounter"></span>
                            <p>عميل سعيد</p>
                        </div>
                    </div>
                    <div class="col-lg-3 col-md-6 mt-5 mt-md-0">
                        <div class="count-box">
                            <i class="fas fa-object-group"></i>
                            <span data-purecounter-start="0 "
                                data-purecounter-end="{{ $info_achievement->finished_projects }}"
                                data-purecounter-duration="1 " class="purecounter"></span>
                            <p>المشاريع المنتهية</p>
                        </div>
                    </div>
                    <div class="col-lg-3 col-md-6 mt-5 mt-lg-0">
                        <div class="count-box">
                            <i class="fa-solid fa-calendar-check"></i>
                            <span data-purecounter-start="0 "
                                data-purecounter-end="{{ $info_achievement->planned_events }}"
                                data-purecounter-duration="1 " class="purecounter"></span>
                            <p>الأحداث المخطط لها</p>
                        </div>
                    </div>
                    <div class="col-lg-3 col-md-6 mt-5 mt-lg-0">
                        <div class="count-box">
                            <i class="fa-solid fa-clapperboard"></i>
                            <span data-purecounter-start="0 "
                                data-purecounter-end="{{ $info_achievement->rendared_ads }} "
                                data-purecounter-duration="1 " class="purecounter"></span>
                            <p>الإعلانات المقدمة</p>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- End Counts Section -->
        <section id="clients" class="clients">
            <div class="container-lg">
                <div class="row">
                    <div class="section-title" data-aos="fade-right" data-aos-offset="100" data-aos-delay="200">
                        <h2>شركاؤنا</h2>
                        <p class="ml-3">كيف تعاوننا مع...</p>
                    </div>
                </div>
                <div class="container-fluid" style="direction: ltr">
                    <div class="client-carousel owl-carousel owl-theme" data-aos-offset="100" data-aos="fade-up">
                        @foreach ($info_partners as $info_partner)
                            <div class="marquee__group">
                                <img src="{{ asset('uploads/partner/' . $info_partner->image) }}"
                                    alt="{{ $info_partner->alt }}" />
                            </div>
                        @endforeach


                    </div>
                </div>
            </div>
        </section>
        <!-- ======= Contact Section ======= -->
        <section id="contact" class="contact my-2">
            <div class="container">
                <div class="section-title" data-aos="fade-right" data-aos-offset="100" data-aos-delay="200">
                    <h2>اتصل بنا</h2>
                    <p>سوف نكون سعداء لسماع منك</p>
                </div>

                <div class="row">
                    <div class="col-lg-8 mt-5 mt-lg-0">
                        <form id="anas" action="{{ route('Send_message') }}" method="post" role="form" class="php-email-form" onsubmit="onSubmit(event)"
                            data-aos="fade-left" data-aos-offset="100" data-aos-delay="200">
                            @csrf
                            <div class="row">
                                <div class="col-md-6 form-group">
                                    <input type="text" name="name" class="form-control" id="name"
                                        placeholder="اسمك" required />
                                </div>
                                <div class="col-md-6 form-group mt-3 mt-md-0">
                                    <input type="email" class="form-control" name="email" id="email"
                                        placeholder="البريد الالكتروني" required />
                                </div>
                            </div>
                            <div class="form-group mt-3">
                                <input type="text" class="form-control" name="subject" id="subject"
                                    placeholder="الموضوع " required />
                            </div>
                            <div class="form-group mt-3">
                                <textarea class="form-control" name="message" rows="5" placeholder="الرسالة" required></textarea>
                            </div>
                            <div class="my-3">
                                <div class="loading">جاري الارسال </div>
                                <div class="error-message">لقد حدث خطأ</div>
                                <div class="sent-message">لقد تم رسال رسالتك بنجاح </div>
                            </div>
                            <div class="text-center btn">
                                
                                <button class=" bc g-recaptcha " 
                                data-sitekey="{{env('GOOGLE_RECAPTCHA_KEY')}}" 
                                data-callback='onSubmit' 
                                data-action='submit'>إرسال رسالة
                                </button>
                            <input type="hidden" name="g-recaptcha-response" id="recaptchaResponse2">                            </div>
                        </form>

                        @if (Session::has('success'))
                        <div class="alert alert-success outline form-control">{{ Session::get('success') }}</div>
                        @endif
                        @if (Session::has('error'))
                            <div class="alert alert-danger outline form-control">{{ Session::get('error') }}</div>
                        @endif
                    </div>
                    
                    <div class="col-lg-4 mt-5">
                        <div class="info" data-aos="fade-right" data-aos-offset="100" data-aos-delay="100 ">
                            <div class="address">
                                <i class="fa-solid fa-location-dot  float-end "></i>
                                <h4 class="ar">موقع:</h4>
                                <a
                                    href="https://www.google.com/maps/place/OPET+agency/@30.0749933,31.3026901,15z/data=!4m2!3m1!1s0x0:0x2c2957cc6c62f13?sa=X&ved=2ahUKEwiwg6KFtKz_AhXVM-wKHSCKCTMQ_BJ6BAhcEAg">
                                    <p class="ar">
                                        عمارة 31 , عمارات العبور ,شارع صلاح سالم, منشية البكري،
                                        محافظة القاهرة ,مصر
                                    </p>
                                </a>
                            </div>

                            <div class="email">
                                <i class="fa-solid fa-envelope float-end "></i>
                                <h4 class="ar">بريد إلكتروني:</h4>
                                <a href="mailto:info@opetagency.com">
                                    <p class="ar">info@opetagency.com</p>
                                </a>
                            </div>

                            <div class="phone">
                                <i class="fa-solid fa-phone float-end "></i>
                                <h4 class="ar">يتصل:</h4>
                                <a href="tel:+201202312345">
                                    <p class="ar">201202313245+</p>
                                </a>
                            </div>
                        </div>
                    </div>


                </div>
            </div>
        </section>
        <!-- End Contact Section -->
    </main>

     <script>
        function onSubmit(event) {
            
            event.preventDefault();
            grecaptcha.ready(function() {
                
                grecaptcha.execute('{{ env('RECAPTCHA_SITE_KEY') }}', {action: 'submit'}).then(function(token) {
                    document.getElementById('recaptchaResponse2').value = token;
                    document.getElementById('anas').submit();
                });
            });
        }
    </script>

      <style>
        .bc{
            background: var(--primaryColor);
            border: 0;
            padding: 10px 30px;
            color: #fff;
            transition: 0.4s;
            border-radius: 8px;
            -webkit-border-radius: 8px;
        }
      </style>
@endsection