@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="#service">خدمات</a>
                    </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('en_services_index', $id) }}" 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 id="hero">
            <div class="container">
                <div id="hero-service">
                    <div class="row">
                        <div class="col-12 text-center" data-aos="fade-right">
                            <h1>{{ $info_services_elemment->title_ar }}</h1>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6" data-aos="fade-right">
                            <p>
                                {{ $info_services_elemment->pragraph_ar }}
                            </p>
                        </div>
                        <div class="col-6" data-aos="fade-right">
                            <img src="{{ asset('uploads/services/' . $info_services_elemment->image) }}" alt="" />
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- ======= service Section ======= -->
        <section id="service" class="Service my-1">
            <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="container">
                    @foreach ($subservices as $item)
                        <div class="col-md-9 col-sm-11">
                            <div class="sub_Service">
                                <h3>{{ $item->title_ar }}</h3>
                                <p>
                                    {{ $item->pragraph_ar }}
                                </p>
                                <div class="row justify-content-center">
                                    @foreach ($item->elements as $element)
                                        <div class="col-md-5" data-aos="fade-up">
                                            <div class="boxs">
                                                <div class="content">
                                                    <i class="icon">
                                                        <img src="{{ asset('front/Assets/img/logo/iconopet.webp') }}"
                                                            alt="Footer-icon" />
                                                    </i>
                                                    <div>
                                                        <h4>{{ $element->title_ar }}</h4>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    @endforeach
                                </div>
                                <div class="wrapper mt-4" data-aos="fade-up">
                                    <div class="items">
                                        @foreach ($item->images as $sub_services_image)
                                            <div class="item" tabindex="0"
                                                style="background-image: url({{ asset('uploads/services/sub_services/' . $sub_services_image->image) }})">
                                            </div>
                                        @endforeach
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endforeach


                </div>
            </div>
        </section>
        <br>
        <!-- ======= Counts 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">
                    <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-4">
                        <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 count-box"></i>
                                <h4>موقع:</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>
                                        شارع صلاح سالم، منشية البكري،
                                        <br />
                                        محافظة القاهرة
                                    </p>
                                </a>
                            </div>

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

                            <div class="phone">
                                <i class="fa-solid fa-phone"></i>
                                <h4>يتصل:</h4>
                                <a href="tel:+201202312345">
                                    <p>+20 120 231 2345</p>
                                </a>
                            </div>
                        </div>
                    </div>

                    <div class="col-lg-8 mt-5 mt-lg-0">
                        <form action="{{ route('Send_message') }}" method="post" role="form" class="php-email-form"
                            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">Loading</div>
                                <div class="error-message"></div>
                                <div class="sent-message">Your message has been sent. Thank you!</div>
                            </div>
                            <div class="text-center btn">
                                <button type="submit">إرسال رسالة</button>
                            </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>
            </div>
        </section>
        <!-- End Contact Section -->
    </main>
@endsection