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

@section('title')
    {{ $info_services_elemment->title_en }} || 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">Home</a>
                </li>
                <li><a class="nav-link scrollto" href="#about">About</a></li>
                <li class="dropdown">
                    <a class="nav-link scrollto" href="#service">Service</a>
                    <ul>
                        @foreach ($info_services as $info_service)
                            <li>
                                <a href="{{ route('en_services_index', $info_service->id) }}">
                                    {{ $info_service->title_en }}</a>
                            </li>
                        @endforeach
                    </ul>
                </li>
                <li>
                    <a class="nav-link scrollto" href="#clients">Our Partners</a>
                </li>
                <li>
                    <a class="nav-link scrollto" href="#contact">Contact Us</a>
                </li>
            </ul>
            <a href="{{  route('ar_services_index', $info_services_elemment->id) }}" class="btn-get-started scrollto">AR</a>

            <i class="fa-solid fa-bars mobile-nav-toggle"></i>
        </nav>
        <!-- .navbar -->
    </div>
</header>
    <main id="main">
        <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_en }}</h1>
                        </div>
                    </div>
                    <div class="row mt-3">
                        <div class="col-md-6" data-aos="fade-right">
                            <p>
                                {{ $info_services_elemment->pragraph_en }}
                            </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>Our Services</h2>
                        <p class="ml-3">This What Proudly Do..</p>
                    </div>
                </div>
                <div class="container">
                    @foreach ($subservices as $item)
                        <div class="col-md-9 col-sm-11">
                            <div class="sub_Service">
                                <h3 data-aos="fade-up">
                                    {{ $item->title_en }}</h3>
                                <p data-aos="fade-up" data-aos-delay="150">
                                    {{ $item->pragraph_en }}
                                </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_en }}</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>
        <!-- ======= 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>Our parteners</h2>
                        <p class="ml-3">How We partenered with...</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>Contact Us</h2>
                    <p>We will be glad to hear from you</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>Location:</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>
                                        Salah Salem St, Mansheya El-Bakry,
                                        <br />
                                        Cairo Governorate
                                    </p>
                                </a>
                            </div>

                            <div class="email">
                                <i class="fa-solid fa-envelope"></i>
                                <h4>Email:</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>Call:</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="Your Name" 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="Your Email" required />
                                </div>
                            </div>
                            <div class="form-group mt-3">
                                <input type="text" class="form-control" name="subject" id="subject"
                                    placeholder="Subject " required />
                            </div>
                            <div class="form-group mt-3">
                                <textarea class="form-control" name="message" rows="5" placeholder="Message" 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">Send Message</button>
                            </div>
                            <script>
                                function onClick(e) {
                                    e.preventDefault();
                                    grecaptcha.enterprise.ready(async () => {
                                        const token = await grecaptcha.enterprise.execute('6LfVzJsqAAAAAMAyM4bUhusfC-tXjZOyE9V1xI2n', {
                                            action: 'LOGIN'
                                        });
                                    });
                                }
                            </script>
                        </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