@extends('web.layouts.app')

@section('content')


<!-- start header =====
        ============ -->
<header class="header">

    <!-- start top-par -->
    <div class="top-par">
        <div class="main-container">
            <div class="logo">
                <a href="{{ url('/') }}">
                    <img src="{{ getSetting('logo') }}" alt="">
                </a>
            </div>



            <div class="icons-top-par">
                <div class="language">
                    @if (app()->getLocale() == 'ar')
                    <a href="{{ route('web.lang' , 'en') }}">

                        <span> En </span>
                    </a>
                    @else
                    <a href="{{ route('web.lang' , 'ar') }}">

                        <span> عربي </span>
                    </a>
                    @endif
                </div>


                <!-- ----------- -->


                <div class="menu-div">
                    <div class="content" id="times-ican">
                        <a href="#" title="Navigation menu" class="navicon" aria-label="Navigation">
                            <span class="navicon__item"></span>
                            <span class="navicon__item"></span>
                            <span class="navicon__item"></span>
                            <span class="navicon__item"></span>
                        </a>
                    </div>
                </div>



            </div>
        </div>
    </div>
    <!-- end top-par -->



    <!-- start sub-header  -->

    <div class="sub-header">
        <div class="owl-carousel owl-theme maincarousel" id="slider-1">
            @foreach ($sliders as $slider)

            <div class="item {{ $slider->type == 'youtube' ? 'youtube' : '' }}" data-type="{{ $slider->type }}">
                <div class="sub-slider-header">
                    
                    @if ($slider->type == 'image')
                    <div class="img-slider slide-image" style="background-image: url({{ $slider->photo }});"></div>
                    @elseif ($slider->type == 'device')
                    <video width="300px" autoplay loop muted>
                        <source src="{{ url($slider->photo) }}" type="video/mp4">
                        <source src="{{ url($slider->photo) }}" type="video/ogg">
                    </video>
                    @elseif ($slider->type == 'youtube')

                    @php

                    $url = $slider->photo;
                    $url_components = parse_url($url);

                    if($url_components['path'] != ""){
                    parse_str($url_components['query'], $params);
                    $key = $params['v'];
                    } else {
                    $key = '';
                    }

                    @endphp
                    <iframe class="video-item youtube_{{ $slider->type }}" width="400" height="200" src="https://www.youtube.com/embed/{{ $key }}" allow="autoplay"></iframe>
                    @endif

                    <div class="text-slider-header">
                        <div class="title-text-slider-header">
                            <div class="main-container">
                                <img src="{{ url('web') }}/images/img.png" alt="">
                                <h2 class="slider-title-fill h42 slider-tr-delay01 medium-title red-color">
                                    {{ $slider->title }}
                                </h2>

                            </div>
                        </div>

                        <div class="p-sub-header">
                            <div class="main-container">
                                <p> {{ $slider->desc }}</p>
                                <div class="btn-silder">
                                    <a href="{{ route('web.about-us') }}" class="ctm-btn1"> {{ awtTrans('اقرأ المزيد') }} </a>
                                </div>
                            </div>
                        </div>

                    </div>

                </div>
            </div>

            @endforeach

        </div>
    </div>



</header>
<!-- end header =====
        ============== -->

<!-- start app ====
        ===============================
        ================================
        ============== -- 
        -->
<main id="app">

    <!-- start aboutus-index  -->
    <section class="aboutus-index  mr-section">
        <div class="main-container">
            <div class="title-center" data-aos="fade-down" data-aos-easing="linear" data-aos-duration="600">
                <h2> {{ getSettingLang('title_about_us') }} </h2>
                <p>{{ awtTrans('شركة المترابط لأنظمة الحاسب الآلي') }} <br>
                    {{ getSettingLang('about_application') }}
                </p>
            </div>

        </div>
        <div class="counter-about-index" style="background-image:url({{ url('web') }}/images/03.png)">
            <div class="main-container">
                <div class="row justify-content-center">
                    <div class=" col-lg-4 col-md-6 col-6">
                        <div class="counter-box" data-aos="fade-up" data-aos-easing="linear" data-aos-duration="600" data-aos-delay="0">
                            <div class="img-counter-box">
                                <img src="{{ getSetting('icon_1') }}" alt="">
                            </div>
                            <div class="text-counter-number">
                                <i class="bi bi-plus"></i><span class="counter" data-number="{{ getSetting('num_client') }}"></span>
                            </div>
                            <p>
                                {{ awtTrans('عميل') }}
                            </p>
                        </div>
                    </div>


                    <div class=" col-lg-4 col-md-6 col-6">
                        <div class="counter-box" data-aos="fade-up" data-aos-easing="linear" data-aos-duration="600" data-aos-delay="300">
                            <div class="img-counter-box">
                                <img src="{{ getSetting('icon_2') }}" alt="">
                            </div>
                            <div class="text-counter-number">
                                <i class="bi bi-plus"></i><span class="counter" data-number="{{ getSetting('num_success') }}"></span>
                            </div>
                            <p> {{ awtTrans('سنه من النجاح') }}</p>
                        </div>
                    </div>


                    <div class=" col-lg-4 col-md-6 col-6">
                        <div class="counter-box" data-aos="fade-up" data-aos-easing="linear" data-aos-duration="600" data-aos-delay="600">
                            <div class="img-counter-box">
                                <img src="{{ getSetting('icon_3') }}" alt="">
                            </div>
                            <div class="text-counter-number">
                                <i class="bi bi-plus"></i><span class="counter" data-number="{{ getSetting('num_project') }}"></span>
                            </div>
                            <p> {{ awtTrans('مشروع تم تنفيذه بنجاح') }}</p>
                        </div>
                    </div>



                </div>
            </div>
        </div>
    </section>
    <!-- end aboutus-index  -->


    <!-- start services-index -->
    <section class="services-index mr-section">
        <div class="main-container">
            <div class="title-center">
                <h2> {{ awtTrans('خدماتنا') }}</h2>
            </div>


            <div class="main-services-index">
                <div class="row">

                    @foreach ($services as $service)

                    <div class="col-lg-6 col-md-6">
                        <div class="sub-services-index" data-aos="{{ $loop->iteration % 2 ? 'fade-down-left' : 'fade-down-right' }}" data-aos-easing="linear" data-aos-duration="700">
                            <div class="img-services-index">
                                <img src="{{ $service->photo }}" alt="">
                            </div>

                            <div class="text-services-index">
                                <a href="{{ route('web.service' , $service->slug) }}"> {{ $service->name }}</a>
                            </div>
                        </div>
                    </div>

                    @endforeach

                </div>
            </div>
        </div>
    </section>
    <!-- end services-index -->


    <!-- start news-index  -->
    <section class="news-index mr-section">
        <div class="main-container">
            <div class="title-center">
                <h2> {{ awtTrans('آخر الأخبار') }}</h2>
            </div>

            <div class="main-news-index">
                <div class="row">
                    @foreach ($posts as $post)

                    <div class="col-lg-4 col-md-6">
                        <div class="sub-news-index" data-aos="fade-up" data-aos-easing="linear" data-aos-duration="700">
                            <a href="{{ route('web.post' , $post->slug) }}">
                                <div class="img-news-inex">
                                    <img src="{{ $post->photo }}" alt="">
                                </div>
                                <div class="text-news-index">
                                    <h4> {{ $post->title }} </h4>
                                    <p> {{ $post->created_at->format('Y M') }} </p>
                                </div>
                            </a>
                        </div>
                    </div>

                    @endforeach

                </div>
            </div>

            <div class="btn-news-index">
                <a href="{{ route('web.posts') }}" class="ctm-btn1">{{ awtTrans('اقرأ المزيد') }} </a>
            </div>
        </div>
    </section>
    <!-- end news-index  -->


    <!-- start clients-index -->
    <section class="clients-index mr-section">
        <div class="main-container">
            <div class="title-center">
                <h2> {{ awtTrans('عملاءنا') }}</h2>
            </div>

            <div class="silder-clients-index">
                <div class="owl-carousel owl-theme maincarousel" id="slider-clients">
                    <div class="item">
                        <div class="main-clients-index">
                            @foreach ($clients as $client)

                            <div class="items-grid">
                                <div class="img-clients-index">
                                    <img src="{{ $client->photo }}" alt="">
                                </div>
                                <h2>{{ $client->name }}</h2>
                            </div>

                            @endforeach

                        </div>
                    </div>


                </div>
            </div>

        </div>
    </section>
    <!-- end clients-index -->



    <!-- start  partners-index -->
    <section class="partners-index mr-section">
        <div class="main-container">
            <div class="title-center">
                <h2> {{ awtTrans('شركاؤنا') }}</h2>
            </div>
            <div class="owl-carousel owl-theme maincarousel slider-partners">
                @foreach ($partners as $partner)
                <div class="item">

                    <div class="main-partners-index">

                        @foreach ($partner as $part)

                        <a href="{{ $part->link }}">
                            <div class="sub-partners-index">
                                <img src="{{ $part->photo }}" alt="">
                            </div>
                        </a>

                        @endforeach

                    </div>
                </div>
                @endforeach

            </div>
    </section>
    <!-- end partners-index -->


</main>

<!-- end app ====
        =============================
        ==================================
        ==================== -->


@endsection