@extends('front.en.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">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('index_ar') }}" class="btn-get-started scrollto">AR</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>Let's <br />Bluid <br /><span>Your Dream </span></h1>
                                <div class="d-inline p-2 text-center text-lg-start">
                                    <a href="#about" class="btn-get-started scrollto">Take a Tour</a>
                                </div>
                                <div class="d-inline p-2 text-center text-lg-start">
                                    <a href="#contact" class="btn-get-started scrollto">Contact Us Now</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-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-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 }}</h2>
                        <div class="row">
                            <div class="col-xl-12 iconboxes row1">
                                <div class="icon-box" data-aos="zoom-in" data-aos-delay="100">
                                    <div class="icon">
                                        <i class="fa-solid fa-fingerprint"></i>
                                    </div>
                                    <h4 class="title"><a>Who are we </a></h4>
                                    <p class="description">
                                        {{ $info_about->who_we_are }}
                                    </p>
                                </div>
                            </div>
                            <div class="col-6 iconboxes row2">
                                <div class="icon-box" data-aos="zoom-in" data-aos-delay="50">
                                    <div class="icon"><i class="fa-solid fa-gift"></i></div>
                                    <h4 class="title">
                                        <a>Our massage</a>
                                    </h4>
                                    <p class="description">{{ $info_about->our_massag }} </p>
                                </div>
                            </div>
                            <div class="col-6 iconboxes row2">
                                <div class="icon-box" data-aos="zoom-in" data-aos-delay="300">
                                    <div class="icon">
                                        <i class="fa-solid fa-atom"></i>
                                    </div>
                                    <h4 class="title"><a>Our vision</a></h4>
                                    <p class="description">
                                        {{ $info_about->our_vision }}
                                    </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">See Our Work</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">Contact Us </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>Our Services</h2>
                        <p class="ml-3">This What Proudly Do..</p>
                    </div>
                </div>

                <div class="Services">
                    <div class="card-grid">
                        @foreach ($info_services as $info_service)
                            <a href="{{ route('en_services_index', $info_service->id) }}" class="card"
                                href="coming-soon.html" 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_en }}</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>Our Achievements</h2>
                        <p class="ml-3">{{ $info_achievement->title }}</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>Happy Client</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>Finished Projects</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>Planned Events</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="15 "
                                data-purecounter-duration="{{ $info_achievement->rendared_ads }} "
                                class="purecounter"></span>
                            <p>Rendared Ads</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>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 id="demo-form" 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="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 class=" bc g-recaptcha " 
                                    data-sitekey="{{env('GOOGLE_RECAPTCHA_KEY')}}" 
                                    data-callback='onSubmit' 
                                    data-action='submit'>Submit
                                </button>
                                <input type="hidden" name="g-recaptcha-response" id="recaptchaResponse">
                            </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>


    <script>
        function onSubmit(event) {
            event.preventDefault();
            grecaptcha.ready(function() {
                
                grecaptcha.execute('{{ env('RECAPTCHA_SITE_KEY') }}', {action: 'submit'}).then(function(token) {
                    document.getElementById('recaptchaResponse').value = token;
                    document.getElementById('demo-form').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