@extends("layout.app")
<style>

    .bg--black:not(.nav-bar):not(.bar) {
        color: #a1a1a6 !important;
    }

    .bg--black:not(.nav-bar):not(.bar) h1, .bg--black:not(.nav-bar):not(.bar) h2, .bg--black:not(.nav-bar):not(.bar) h3, .bg--black:not(.nav-bar):not(.bar) h4, .bg--black:not(.nav-bar):not(.bar) h5, .bg--dark:not(.nav-bar):not(.bar) h6, .bg--black:not(.nav-bar):not(.bar) i, .bg--black:not(.nav-bar):not(.bar) span:not(.btn__text), .bg--black:not(.nav-bar):not(.bar) p {
        color: #a1a1a6 !important;
    }
</style>
@section("content")
    @php $banners = \App\Models\Banner::where("is_active",1)->orderBy("order",'asc')->take(2)->get();@endphp
    @if($banners)
        @foreach($banners as $banner)
            <section @if($banner->is_slide) style="display: none; {{!$banner->is_default_color?'background-color:'.$banner->background_color:''}}" @endif
            class="text-center cta cta-4 space--small
            @if($banner->is_slide && !$banner->is_default_color) cta-slide2 @endif
            @if($banner->is_slide && $banner->is_default_color) cta-slide @endif
                     @if($loop->last) border--bottom @endif
                     @if($banner->color!="gradient"&&$banner->is_default_color) bg--{{$banner->color}} @else imagebg @endif"
                     @if($banner->color=="gradient") data-gradient-bg='#4876BD,#5448BD,#8F48BD,#BD48B1' @endif>
                <div class="container">
                    <div class="row">
                        <div class="col-md-12">
                    <span style="{{!$banner->is_default_color?'color:'.$banner->text_color:''}}">{{$banner->title}}
                        @if($banner->link)
                            <a href="{{$banner->link}}">إضغط للتفاصيل</a></span>
                            @endif
                        </div>
                    </div>
                </div>
            </section>
        @endforeach
    @endif

    @foreach($heros as $hero)
        <div @if($hero->color) style="background-color:{{$hero->color}}" @endif class="feature-large feature-large-2 @if($hero->is_dark)  bg--black @else bg--secondary @endif>">
            <div class="container-fluid">
                <div class="row">

                    <div class="col-sm-12 col-md-12 text-center">
                        <h1 dir="rtl" class="text-center">{{ $hero->title }}</h1>
                        <p class="text-center lead" dir="rtl">
                            {!! $hero->description !!}
                        </p>
                        @if($hero->image != "default.jpg")
                            <img alt="{{$hero->title}}" class="animated bounce"
                                 src="https://cdn.ihouse.ps/{{$hero->image}}">
                        @endif

                    </div>
                </div>

                <!--end of row-->
            </div>
            <!--end of container-->
        </div>
        @if($hero->is_email)
            <div>
                <div class="container mt--1">
                    <div class="row justify-content-center ">
                        <div class="col-md-12">
                            <h2 class="text-center">للحجز والاستفسار</h2>
                        </div>
                    </div>
                    <div class="row justify-content-center ">
                        <div class="col-md-12 ">
                            <form data-recaptcha-sitekey="6LepS2YUAAAAADuAp9NGmAYGUpso7dA_UBjp4hXZ"
                                  class="row justify-content-center form--active"
                                  action="https://ihouse.us2.list-manage.com/subscribe/post?u=8e933e83c4f68bd2fa12b5aa9&amp;id=75fe21ce5a"
                                  data-success="تم التسجيل بنجاح" data-error="الرجاء التأكد من المعلومات المدخله"
                                  novalidate="true">
                                <div class="col-md-3">
                                    <input class="validate-required" type="text" name="FNAME" placeholder="الاسم">
                                </div>
                                <div class="col-md-3">
                                    <input class="validate-required validate-email" type="email" name="EMAIL"
                                           placeholder="البريد الإلكتروني">
                                </div>
                                <div class="col-md-4">
                                    <div data-recaptcha-size="compact" data-recaptcha-theme="dark" class="recaptcha">
                                    </div>
                                </div>
                                <div class="col-md-2">
                                    <button type="submit" class="btn btn--primary type--uppercase">تسجيل</button>
                                </div>


                                <div style="display:none;" aria-hidden="true">
                                    <input type="text" name="b_8e933e83c4f68bd2fa12b5aa9_75fe21ce5a" tabindex="-1"
                                           value="">
                                </div>
                            </form>

                        </div>

                        <!--end of row-->
                    </div>
                </div>
                <!--end of container-->
            </div>
        @endif
        @if(!$loop->last)
        <hr style="border:none;margin:0.85714286em 0">
        @endif
    @endforeach
    <br>
    @if($featured_boxes->count() > 0)
        <section>
            <div class="container">
                <div class="row">
                    @foreach($featured_boxes as $featuredBox)
                        <div class="col-lg-6 col-12">
                            <a href="{{ $featuredBox->link }}" class="block">
                                <div class="feature feature-7 boxed text-center imagebg" data-overlay="2">
                                    <div class="background-image-holder">
                                        <img alt="background"
                                             src="https://cdn.ihouse.ps/{{$featuredBox->image}}"/>
                                    </div>
                                    <h4 class="pos-vertical-center">{{ $featuredBox->title }}</h4>
                                </div>
                            </a>
                        </div>
                    @endforeach
                </div>
                <!--end of row-->
            </div>
            <!--end of container-->
        </section>
    @endif
    @if($offers->count() > 0)
        <section class="bg--secondary">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-sm-12">
                        <div class="heading-block">
                            <h3 dir="rtl" class="text-right">حملات وعروض</h3>
                        </div>
                    </div>
                </div>

                <div class="owl-carousel owl-theme row justify-content-center">

                    @foreach($offers as $offer)
                        <div class="item">
                            <div class="text-center card h-100 border-0">

                                <a href="{{ $offer->link }}">
                                    <img alt="Image" src="https://cdn.ihouse.ps/{{$offer->image}}"/>
                                </a>
                                <div class="card-body d-flex flex-column text-right">
                                    <h5 class="text-right" dir="rtl">{{ $offer->title }}</h5>

                                    <div class="mt-auto">


                                        <a class="text-right mt-auto " dir="rtl" href="{{ $offer->link }}">
                                            تفاصيل
                                        </a>
                                    </div>

                                </div>
                                <!--end feature-->
                            </div>
                        </div>
                    @endforeach
                </div>

                <!--end slider-->
                <!--end of row-->
            </div>
            <!--end of container-->
        </section>
    @endif
@endsection

@section('scripts')
    <script>
        $('.owl-carousel').owlCarousel({
            loop: true,
            autoplay:true,
            autoplayTimeout:3000,
            nav: false,
            dots: true,
            rtl: true,
            margin: 20,
            responsive: {
                0: {
                    items: 2
                },
                600: {
                    items: 5
                },
                1000: {
                    items: 5
                }
            }

        });
    </script>
@endsection