@extends('layouts.app')

@section('title', 'Home')


@section('content')
    <!----App-Statistics----->
    <section id="app-statistics">
        <div class="container">
            <div class="app-stats">
                <div class="row">
                    @if(!empty(setting('site.count_users')))
                    <div class="col-xl-3 col-lg-3 col-md-3 col-sm-6">
                        <div class="app-numbers">
                            <p><span class="counter">{!! setting('site.count_users') !!}</span> @lang('site.Users')</p>
                        </div>
                    </div>
                    @endif
                    @if(!empty(setting('site.count_downloads')))
                    <div class="col-xl-3 col-lg-3 col-md-3 col-sm-6">
                        <div class="app-numbers">
                            <p><span class="counter">{!! setting('site.count_downloads') !!}</span> @lang('site.Downloads')</p>
                        </div>
                    </div>
                    @endif
                    @if(!empty(setting('site.count_likes')))
                    <div class="col-xl-3 col-lg-3 col-md-3 col-sm-6">
                        <div class="app-numbers">
                            <p><span class="counter">{!! setting('site.count_likes') !!}</span> @lang('site.Likes')</p>
                        </div>
                    </div>
                    @endif
                    @if(!empty(setting('site.count_star_ratings')))
                    <div class="col-xl-3 col-lg-3 col-md-3 col-sm-6">
                        <div class="app-numbers">
                            <p><span class="counter">{!! setting('site.count_star_ratings') !!}</span> @lang('site.5_Star_Ratings')</p>
                        </div>
                    </div>
                    @endif
                </div>
            </div>
        </div>
    </section>

    <!---Promo-Section--->
    <section id="promo-section">
        <div class="promo-section">
            <div class="container">
                <div class="promo">
                    <div class="row">
                    @foreach($services as $service)
                        <div class="col-lg-3 col-md-6">
                            <div class="promo-card">
                                <div class="promo-icon">
                                    <p><span class="{!! $service->icon !!}"></span></p>
                                </div>
                                <div class="promo-text">
                                    <h4>{!! $service->title !!}</h4>
                                    <p>{!! $service->description !!}</p>
                                </div>
                            </div>
                        </div>
                       @endforeach
                    </div>
                </div>
            </div>
        </div>
    </section>

    @if(!empty(Voyager::image(setting('site.ads_image'))))
    <!-- Ads -->
    <section id="ads">
        <div class="container">
            <div class="text-center">
                <div class="row">
                    <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-xs-12">
                        <a href="{!! setting('site.ads_link') !!}" target="_blank" title="{!! setting('site.ads_link') !!}"><img width="100%" src="{!! Voyager::image(setting('site.ads_image')) !!}"> </a>
                    </div>
                </div>
            </div>
        </div>
    </section>
    @endif

   <!-- Ads 2 -->
   <section id="" style="direction: ltr;">
        <div class="w3-content w3-display-container" style="max-width:100%; max-height: 300px; overflow: hidden;">
            @foreach($ads as $index=>$ad)
                <a href="{!! $ad->url !!}" target="_blank" title="{!! $ad->title !!}">
                    <img class="mySlides" src="{!! voyager::image($ad->image) !!}" style="width:100%">
                </a>
            @endforeach
        
            <div class="w3-center w3-container w3-section w3-large w3-text-white w3-display-bottommiddle" style="width:100%">
                <div class="w3-left w3-hover-text-khaki" onclick="plusDivs(-1)">&#10094;</div>
                <div class="w3-right w3-hover-text-khaki" onclick="plusDivs(1)">&#10095;</div>

                @foreach($ads as $index=>$ad)
                    <span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv({!! $index+1 !!})"></span>
                @endforeach
            </div>
        </div>
    </section>


    <!---- About ---->
    <section id="app-features">
        <div class="container">
            <div class="app-heading">
                <h4>@lang('site.About')</h4>
                <p>{!! setting('about-section.about_section_short_description_'.locale_key()) !!}</p>
            </div>
            <div class="app-features">
                <div class="row">
                    <div class="col-xl-6 col-lg-6 col-md-12 col-sm-12">
                        <div class="fea-lists">
                            <div class="fea-icons">
                                <div class="row">
                                    <div class="col-xl-3 col-lg-3 col-md-3 col-sm-12">
                                        <span class="ti-github"></span>
                                    </div>
                                    <div class="col-xl-9 col-lg-9 col-md-9 col-sm-12">
                                        <h4>@lang('site.Vision')</h4>
                                        <p>{!! setting('about-section.about_section_vision_'.locale_key()) !!}</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="fea-lists">
                            <div class="fea-icons">
                                <div class="row">
                                    <div class="col-xl-3 col-lg-3 col-md-3 col-sm-12">
                                        <span class="ti-layout-media-center-alt"></span>
                                    </div>
                                    <div class="col-xl-9 col-lg-9 col-md-9 col-sm-12">
                                        <h4>@lang('site.Objectives')</h4>
                                        <p>{!! setting('about-section.about_section_objectives_'.locale_key()) !!}</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="fea-lists">
                            <div class="fea-icons">
                                <div class="row">
                                    <div class="col-xl-3 col-lg-3 col-md-3 col-sm-12">
                                        <span class="ti-comments"></span>
                                    </div>
                                    <div class="col-xl-9 col-lg-9 col-md-9 col-sm-12">
                                        <h4>@lang('site.Message')</h4>
                                        <p>{!! setting('about-section.about_section_message_'.locale_key()) !!}</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-6 col-lg-6 col-md-12 col-sm-12">
                        <div class="fea-image">
                            <img src="assets/img/app/about-ltr.png" alt="">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!---Responsive-Design--->
    <section id="responsive-design">
        <div class="responsive-design">
            <div class="container">
                <div class="row">
                    <div class="col-xl-6 col-lg-6 col-md-5 col-sm-12 col-xs-12">
                        <div class="res-image">
                            <img src="{!! voyager::image(setting('download-section.download_section_image')) !!}" alt="" class="img-responsive img-fluid">
                        </div>
                    </div>
                    <div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-xs-12">
                        <div class="res-details">
                            <div class="headings">
                                <!-- <h1>Responsive Design for All Devices with Quality</h1> -->
                                <h1>
                                    {!! setting('download-section.download_section_title_'.locale_key()) !!}
                                </h1>
                                <p>
                                    {!! setting('download-section.download_section_short_description_'.locale_key()) !!}
                                </p>
                            </div>
                            <div class="google-download">
                                <!-- <button class="btn theme-btn-default theme-btn-lg">Discover More</button> -->
                                @if(!empty(setting('download-section.download_section_link_app_store')))
                                    <a href="{!! setting('download-section.download_section_link_app_store') !!}" target="_blank"><img src="assets/img/app/app-store.png" alt=""></a>
                                @endif
                                @if(!empty(setting('download-section.download_section_link_google_play')))
                                    <a href="{!! setting('download-section.download_section_link_google_play') !!}" target="_blank"><img src="assets/img/app/google-play.png" alt=""></a>
                                @endif
                                @if(!empty(setting('download-section.download_section_link_huawei_store')))
                                    <a href="{!! setting('download-section.download_section_link_huawei_store') !!}" target="_blank"><img src="assets/img/app/app-huawei.png" alt=""></a>
                                @endif
                            </div>
                            
                            <div class="google-download">
                                <p class="pt-2">@lang('site.Join_as_a_partner_with_Amnuh_and_download_the_app')</p>
                                <!-- <button class="btn theme-btn-default theme-btn-lg">Discover More</button> -->
                                @if(!empty(setting('download-section.download_section_link_app_store_for_captain')))
                                    <a href="{!! setting('download-section.download_section_link_app_store_for_captain') !!}" target="_blank"><img src="assets/img/app/app-store.png" alt=""></a>
                                @endif
                                @if(!empty(setting('download-section.download_section_link_google_play_for_captain')))
                                    <a href="{!! setting('download-section.download_section_link_google_play_for_captain') !!}" target="_blank"><img src="assets/img/app/google-play.png" alt=""></a>
                                @endif
                                @if(!empty(setting('download-section.download_section_link_huawei_store_for_captain')))
                                    <a href="{!! setting('download-section.download_section_link_huawei_store_for_captain') !!}" target="_blank"><img src="assets/img/app/app-huawei.png" alt=""></a>
                                @endif
                            </div>
                            
                        </div>

                        <div class="res-details pt-5">
                            <div class="headings">
                                <!-- <h1>Responsive Design for All Devices with Quality</h1> -->
                                <h1>
                                    {!! setting('download-section.download_section2_title_'.locale_key()) !!}
                                </h1>
                            </div>
                            <div class="google-download">
                                <!-- <button class="btn theme-btn-default theme-btn-lg">Discover More</button> -->
                                @if(!empty(setting('download-section.download_section2_link_app_store')))
                                    <a href="{!! setting('download-section.download_section2_link_app_store') !!}" target="_blank"><img src="assets/img/app/app-store.png" alt=""></a>
                                @endif
                                @if(!empty(setting('download-section.download_section2_link_google_play')))
                                    <a href="{!! setting('download-section.download_section2_link_google_play') !!}" target="_blank"><img src="assets/img/app/google-play.png" alt=""></a>
                                @endif
                                @if(!empty(setting('download-section.download_section2_link_huawei_store')))
                                    <a href="{!! setting('download-section.download_section2_link_huawei_store') !!}" target="_blank"><img src="assets/img/app/app-huawei.png" alt=""></a>
                                @endif
                            </div>
                            
                        
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!--- Screens --->
    <section id="app-screens" class="app-screens">
        <div class="container-fluid">
            <div class="screen-title">
                <h2>@lang('site.Amnuh_Screens')</h2>
                <p>{!! setting('site.short_description_amnuh_screens_'.locale_key()) !!}</p>
            </div>
            <div class="row">
                <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-xs-12">
                    <div class="swiper-container">
                        <div class="swiper-wrapper">
                            @foreach($screens as $screen)
                                <div class="col-xl-3 col-lg-4 col-md-12 swiper-slide">
                                    <div class="screen-container">
                                        <img src="{!! voyager::image($screen->image) !!}" alt="Loading Image">
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!--- Testinomial --->
    <section id="testimonials" class="ltr">
        <div class="container">
            <div class="testimonials">
                <div class="testimonials-title">
                    <h4>@lang('site.Testimonial')</h4>
                    <hr>
                    <p>@lang('site.What_Client_Says')</p>
                </div>
                <div class="row">
                    <div class="col-md-12">
                        <div class="owl-carousel owl-theme testimonial-carousel">
                            @foreach($testimonials->chunk(2) as $items)
                            <div class="item">
                                <div class="row">
                                    @foreach($items as $item)
                                        <div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-xs-12">
                                            <div class="testimonial-bars">
                                                <div class="testimonial">
                                                    <div class="testimonial-img">
                                                        <img src="{!! voyager::image($item->image) !!}" alt="Testimonial-Image-One" class="img-fluid">
                                                    </div>
                                                    <div class="testimonial-name">
                                                        <h4>{!! $item->name !!} <span>{!! $item->job !!}</span></h4>
                                                        <p>{!! $item->body !!}</p>
                                                    </div>
                                                    <div class="testimonial-icons">
                                                        @for($i = 0; $i < $item->count_star_ratings; $i++ )
                                                            @if($i < 5)
                                                                <img src="assets/img/star.png" alt="" class="img-responsive">
                                                            @endif
                                                        @endfor
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                           @endforeach
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Contact -->
    <section class="section-contact">
        <section id="contact">
            <div class="signup">
                <div class="container">
                    <div class="row">
                        <div class="col-xl-5 col-lg-5 col-md-12 col-sm-12">
                            <div class="contact-heading">
                                <h4>@lang('site.contact')</h4>
                            </div>
                            <div class="sign-up__form">
                                <form id="" action="/contact" method="POST" class="register-form" enctype="multipart/form-data"> <!-- contactFormAjax -->
                                    @csrf
                                    <div class="form-group">
                                        <label for="name"><i class="ti ti-user"></i></label>
                                        <input type="text" class="form-control greeed" name="name" id="name" placeholder="@lang('site.Your_Name')" value="{!! old('name') !!}" required>
                                    </div>
                                    <div class="form-group">
                                        <label for="email"><i class="ti ti-email"></i></label>
                                        <input type="email" class="form-control" name="email" id="email" placeholder="@lang('site.Your_Email')" value="{!! old('email') !!}" required>
                                    </div>
                                    <div class="form-group">
                                        <label for="phone"><i class="fa fa-phone"></i></label>
                                        <input type="text" class="form-control greeed" name="phone" id="phone" placeholder="@lang('site.Your_phone')" value="{!! old('phone') !!}">
                                    </div>
                                    <div class="form-group">
                                        <label for="How_can_we_help_you"><i class="fa fa-list"></i></label>
                                        <!--<input type="text" class="form-control greeed" name="How_can_we_help_you" id="How_can_we_help_you" placeholder="@lang('site.How_can_we_help_you')" required>-->
                                        <select style="padding: 0 25px;" class="form-control" name="subject" id="subject" required>
                                          <option value="ملاحظات حول التطبيق">@lang('site.Notes_about_the_application')</option>
                                          <option value="التحقق من تكلف الرحله">@lang('site.Check_the_cost_of_the_trip')</option>
                                          <option value="اغراض مفقوده">@lang('site.Missing_items')</option>
                                          <option value="اخرى">@lang('site.Others')</option>
                                        </select>
                                    </div>
                                    <div class="form-group">
                                        <label for="msg" class="cont-msg"><i class="ti ti-comment-alt"></i></label>
                                        <textarea class="form-control" rows="3" name="message" id="message" placeholder="@lang('site.Your_Message')" spellcheck="false" required>{!! old('message') !!}</textarea><grammarly-extension style="position: absolute; top: 0px; left: 0px; pointer-events: none; z-index: auto;" class="_1KJtL"><div data-grammarly-part="highlights" class="u_fNK" style="position: absolute; top: 0px; left: 0px;"><div style="box-sizing: content-box; top: 240px; left: 15px; width: 313px; height: 162px; position: relative; pointer-events: none; overflow: hidden; border: 0px none; border-radius: 0px; padding: 0px; margin: 0px;"><div style="position: absolute; top: 0px; left: 0px;"><div style="height: 916px; width: 1695px;"><div></div><div></div></div></div></div></div><div data-grammarly-part="button" class="u_fNK" style="position: absolute; top: 0px; left: 0px;"><div style="box-sizing: content-box; top: 240px; left: 15px; width: 313px; height: 162px; position: relative; pointer-events: none; overflow: hidden; border: 0px none; border-radius: 0px; padding: 0px; margin: 0px;"><div style="position: absolute; transform: translate(-100%, -100%); top: 142px; left: 288px; width: auto; height: auto; pointer-events: all;"><div style="flex-direction: row; display: flex;"><div style="position: relative;"></div><div><div class="_5WizN _1QzSN"><div class="_3YmQx"><div title="Protected by Grammarly" class="_3QdKe">&nbsp;</div></div></div></div></div></div></div></div></grammarly-extension>
                                    </div>
                                    <div class="form-group">
                                        <!--<label for="file"><i class="ti ti-file"></i></label>-->
                                        <input type="file" class="form-control greeed" name="file" id="file" placeholder="@lang('site.file')" accept="image/*">
                                    </div>
                                    
                                    <p>
                                        <div class="g-recaptcha" data-sitekey="{{ env('RECAPTCHA_SITE_KEY') }}"></div>
                                        @if ($errors->has('g-recaptcha-response'))
                                        <span class="error-recaptcha">
                                            <strong>{{ $errors->first('g-recaptcha-response') }}</strong>
                                        </span>
                                        @endif
                                    </p>
                                    <!--6LfgQeEUAAAAAKMK9RGAOzoqmFseLmV0_7dTa8jP-->
                                    <!--6LfgQeEUAAAAABtQATl9MOm03ZDEKFPh9vGJbhpW-->


                                    <div class="form-group form-button">
                                        <input type="submit" name="signup" id="signup" class="btn theme-btn-purple theme-btn-circle theme-btn-lg" value="@lang('site.Send_Message')">
                                    </div>
                                </form>
                            </div>
                        </div>
                        <div class="col-xl-7 col-lg-7 col-md-12 col-sm-12">
                            <div class="sign-up__icon">
                                <img src="assets/img/contact-us-ltr.png" class="img-responsive img-fluid" alt="Loading Image">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </section>

    <section id="subscribe">
        <div class="container">
            <div class="subscribe">
                <div class="row">
                    <div class="col-xl-9 col-lg-9 col-md-9 col-sm-12 col-xs-12">
                        <div class="text">
                            <h2>@lang('site.Ready_To_Get_Started_It_download_the_application')</h2>
                        </div>
                    </div>
                    <div class="col-xl-3 col-lg-3 col-md-3 col-sm-12 col-xs-12">
                        <div class="button">
                            <!-- <button class="theme-btn-success theme-btn-circle theme-hover-success theme-btn-lg">Get Started</button> -->
                            <a class="theme-btn-success theme-btn-circle theme-hover-success theme-btn-lg" href="#responsive-design">@lang('site.Get_Started')</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection