@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;
    }

    .boxed {
        border: none !important;
        border-radius: unset !important;
        margin-bottom: unset !important;
    }

    .boxed::before {
        border: none !important;
        border-radius: unset !important;
    }

    .boxed .background-image-holder {
        border: none !important;
        border-radius: unset !important
    }

    [data-overlay]:before {
        background: unset !important;
    }

    @media (max-width: 992px) {
        .response-feature {
            margin: unset !important;
            margin-top: 7px;
            margin-bottom: 7px!important;
        }

        .img-response-feature {
            padding: 0 !important;
            margin-bottom: 7px!important;
        }
    }

    .rr > a:hover {
        text-decoration: underline !important;
    }

    .rr a span:hover {
        text-decoration: underline !important;
    }

    .rr a:hover {
        text-decoration: underline !important;
    }

    .feature-m{
        margin:0.45714286em 0!important;
    }
</style>
@section("content")
    @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
        <hr class="{{$loop->last?'feature-m':''}}" style="border:none;margin:0.85714286em 0">

    @endforeach

    @if($featured_boxes->count() > 0)
        <div>
            <div class="row response-feature" style="margin:7px">
                @foreach($featured_boxes as $featuredBox)
                    <div class="col-lg-6 col-12 img-response-feature" style="padding: 7px;
                     {{$featuredBox->link!==null?'cursor: pointer':''}}"
                        {{$featuredBox->link!==null?"onclick=location.href='$featuredBox->link';":''}}>
                        <div class="feature feature-7 boxed text-center " data-overlay="2"
                             style="height: 580px;border-radius: 0!important;">
                            <div class="background-image-holder">
                                <img href="{{$featuredBox->link}}" class="animated bounce" alt="background"
                                     src="https://cdn.ihouse.ps/{{$featuredBox->image}}">
                            </div>
                            <div class="rr" style="
    position: inherit;
    z-index: 10;{{$featuredBox->position=='bottom'?'margin-top: 380px':''}}
    {{$featuredBox->position=='center'?'margin-top: 190px':''}}">
                                {!! $featuredBox->description !!}
                            </div>
                        </div>


                    </div>
                @endforeach
            </div>
            <!--end of row-->
            <!--end of container-->
        </div>
    @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