@extends('site.layout.layout')

@section('content')
    @include('site.slider')
    <!-- always caberz-->
    <section class="always-caberz">
        <div class="container">
            <div class="row">
                <div class="col-sm-12">
                    <div class="image">
                        <img src="{{ asset('landingAssets') }}/assets/always-caberz.png" alt="caberz">
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Header -->
    <div class="header"></div>

    <!-- Screens -->
    <section class="screens">

        <!--app screen-->
        <div class="app-screen" id="app-screen">
            <div class="bigTitle screen-tit">
                <div class="content">
                    <h2 class="text">شاشات التطبيق</h2>
                </div>
            </div>
            <div class="container">
                <div class="row">

                    @foreach ($screen_images as $screen_image)
                        <div class="col-md-4">
                            <div class="screen-item wow fadeInDown" data-wow-delay="0.6s" data-wow-duration="1s">
                                <img src="{{ $screen_image }}">
                            </div>
                        </div>
                    @endforeach


                </div>
            </div>
        </div>

        <!-- More Info -->
        <section class="sub_sction">
            <div class="bigTitle">
                <div class="content">
                    <h2 class="text">معلومات أكثر عن | كيبرز</h2>
                </div>
            </div>

            <p class="para">تعرف علي شروط الاشتراك في تطبيق كيبرز</p>

            <div class="container">
                <div class="row justify-content-between">
                    @foreach ($subscription_condition_images as $subscription_condition_image)
                        <div class="col-lg-5">
                            <div class="screen wow fadeInRight" data-wow-duration="1s">
                                <img src="{{ $subscription_condition_image }}">
                                {{-- <div class="descreption">
                                <p class="para thin">نص افتراضي توضيحي</p>
                            </div> --}}
                            </div>
                        </div>
                    @endforeach
                </div>

            </div>
        </section>

        <!-- Media -->
        <section class="sub_sction">
            <div class="bigTitle">
                <div class="content">
                    <h2 class="text">ميديا كيبرز</h2>
                </div>
            </div>

            <p class="para">شروط استخدام التطبيق والاعلانات</p>

            <div class="container">
                <div class="row justify-content-between">
                    @foreach ($condition_media_images as $condition_media_image)
                        <div class="col-lg-5">
                            <div class="screen wow bounceInRight" data-wow-duration="1s">
                                <div class="video">
                                    <img class="preview" src="{{ $condition_media_image }}">
                                    <video class="videoToPlay" src="{{ $condition_media_image }}" controls>
                                        Your browser does not support the video tag.
                                    </video>
                                </div>
                            </div>
                        </div>
                    @endforeach

                </div>
            </div>
        </section>
    </section>

    <!-- Who Are We -->
    <section class="whoAreWe">
        <div class="whoAreWe_skew">
            <div class="row">
                <div class="col-md-6 col-12">
                    <div class="item">
                        <div class="big_circle">
                            <div class="small_circle">
                                <div class="text">من نحن</div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-md-6 d-md-block d-none">
                    <div class="item">
                        <img src="{{ asset('landingAssets') }}/assets/screen_last.png" alt="">
                    </div>
                </div>
            </div>
        </div>

        <div class="anouncment">
            <p>{{ $about_first_p }}</p>

        </div>

        <ul>
            <li>
                <img src="{{ asset('landingAssets') }}/assets/dot.png">
                <p> {{ $about_first_p_point1 }}</p>
            </li>

        </ul>
    </section>


    <!-- how To Use -->
    <section class="howToUse">
        <div class="big_circle">
            <div class="small_circle">
                <div class="text">طريقة الاستخدام</div>
            </div>
        </div>


        <div class="screens_inside">
            @foreach ($how_to_use_media as  $how_to_use_media_item )
                
          
            <div class="screen">
                <img class="icon" src="{{ asset('landingAssets') }}/assets/use_1.png">
                <div class="video">
                    <img class="preview" src="{{$how_to_use_media_item}}">
                    <video class="videoToPlay" src="{{$how_to_use_media_item}}" controls>
                        Your browser does not support the video tag.
                    </video>
                </div>
            </div>
            @endforeach
        </div>
    </section>

    <!-- Contact -->
    <section class="contact" id="contact-us">
        <ul>
            <li>
                <span><img src="{{ asset('landingAssets') }}/assets/location.png"></span>
                <div class="text">
                    <p>العنوان |</p>
                    <p>المملكة العربية السعودية</p>
                </div>
            </li>
            <li>
                <span><img src="{{ asset('landingAssets') }}/assets/location.png"></span>
                <div class="text">
                    <p>البريد الالكتروني |</p>
                    <p>{{ setting('email') }}</p>
                </div>
            </li>
            <li>
                <span><img src="{{ asset('landingAssets') }}/assets/location.png"></span>
                <div class="text">
                    <p>الهاتف |</p>
                    <p>{{ setting('phone') }}</p>
                </div>
            </li>
        </ul>
    </section>
@endsection