@extends("layout.app")
@section("content")

    <style type="text/css">

        .bg--secondary {
            background: #e8e8e8;
        }
        .owl-theme .owl-nav{
            margin-top:unset!important;
        }
        .bg--black {
            background: black;
        }

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

        .image-icon-block {
            width: auto;
            margin: 0px;
            padding: 0;
            height: 60px;
            margin-bottom: 0px;
        }

        .flickity-slider {
            white-space: nowrap;
        }
    </style>

    @include('partial.slider_style')

    <div class="text-center cta cta-4 border--bottom bg--dark">
        <div class="container">
            <div class="row">
                @if( $agent->isMobile() )
                    <div class="col">
                        <section>
                            <div class="owl-carousel owl-theme">
                                @foreach($sub_categories as $menu_sub_category)
                                    <div class="item">
                                        <a href="{{ url("$category->slug/$menu_sub_category->slug") }}" >
                                            <div class="tab__title text-center">
                                                @if($menu_sub_category->image)
                                                    <img
                                                        src="{{url("https://cdn.ihouse.ps/$menu_sub_category->image")}}"
                                                        class="image-icon-block">
                                                @else
                                                    <i class="ihouse-{{$menu_sub_category->icon}} block"></i>
                                                @endif
                                                <span class="h5"
                                                      style="font-size:10px;margin:0">{{$menu_sub_category->title}}</span>
                                                @if($menu_sub_category->is_new)
                                                    <h5 class="color--error"
                                                        style="font-size: 9px; color: #ff919f !important; line-height: 0px;padding-bottom:10px">
                                                        جديد</h5>
                                                @endif
                                            </div>
                                        </a>
                                        <!--end feature-->
                                    </div>
                                @endforeach
                                @if($category->with_accessories)
                                    <div class="item">
                                        <a href="{{route("accessories-listing", ['category' => $category->code, 'from_landing' => true])}}">
                                            @include('partial.accessory_nav_item', ['category' => $category])
                                        </a>
                                    </div>
                                @endif
                                @if($category->with_compare)
                                    <div class="item">
                                        <a href="{{url("/$category->slug")}}/compare">
                                            <div class="tab__title text-center">
                                                <img
                                                    src="{{url("https://cdn.ihouse.ps/$category->compare_icon")}}"
                                                    class="image-icon-block">
                                                <span class="h5" style="margin:0">مقارنة</span>
                                            </div>
                                        </a>

                                    </div>
                                @endif

                            </div>
                        </section>
                    </div>
                @else
                    <div class="col-sm-12">
                        <div class="container-owl" data-content-align="left">
                            <div class="col">
                                <div class="row">
                                    <ul class="tabs nav owl-carousel owl-theme">
                                        @foreach($sub_categories as $menu_sub_category)
                                            <li>
                                                <a href="{{url("$category->slug/$menu_sub_category->slug")}}">
                                                    <div class="tab__title text-center" style="width: max-content">
                                                        @if($menu_sub_category->image)
                                                            <img
                                                                src="{{url("https://cdn.ihouse.ps/$menu_sub_category->image")}}"
                                                                class="image-icon-block">
                                                        @else
                                                            <i class="ihouse-{{$menu_sub_category->icon}} block"></i>
                                                        @endif
                                                        <span class="h5" style="margin:0">{{$menu_sub_category->title}} </span>
                                                        @if($menu_sub_category->is_new)
                                                            <h5 class="color--error"
                                                                style="font-size: 11px; color: #ff919f !important; line-height: 0px;">
                                                                جديد</h5>
                                                        @endif
                                                    </div>
                                                </a>
                                            </li>
                                        @endforeach
                                        @if($category->with_accessories)
                                            <li>
                                                <a href="{{route("accessories-listing", ['category' => $category->code, 'from_landing' => true])}}">
                                                    @include('partial.accessory_nav_item', ['category' => $category])
                                                </a>
                                            </li>
                                        @endif
                                        @if($category->with_compare)
                                            <li><a href="{{url("/$category->slug")}}/compare">
                                                    <div class="tab__title text-center">
                                                        <img
                                                            src="{{url("https://cdn.ihouse.ps/$category->compare_icon")}}"
                                                            class="image-icon-block" tab__title text-center >
                                                        <span class="h5" style="margin:0">مقارنة</span>
                                                    </div>
                                                </a>

                                            </li>
                                        @endif


                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                @endif
            </div>
            <!--end of row-->
        </div>
        <!--end of container-->
    </div>

    @foreach($sections as $section)
        @if($section->layout_id == 1)
            <section class="text-center @if($section->is_dark)  bg--black @else bg--secondary @endif p-5 m-3 "
                     style="border-radius:2rem!important">
                <div class="container">
                    <div class="row">
                        <div class="col-sm-12">
                            <h1 class="text-center">{{ $section->title }}</h1>
                            <p class="lead">
                                {!! $section->description !!}
                            </p>
                            <img alt="Image"
                                 src="{{ ($section->image != 'default.jpg') ? url("https://cdn.ihouse.ps/$section->image")   : 'http://via.placeholder.com/1190x450' }}">
                        </div>
                    </div>
                </div>
            </section>
        @endif
        @if($section->layout_id == 2)
            <section class="switchable  @if($section->is_dark)  bg--black @else bg--secondary @endif p-5 m-3 "
                     style="border-radius:2rem!important">
                <div class="container">
                    <div class="row">
                        <div class="col-sm-7">
                            <img alt="Image"
                                 src="{{ ($section->image != 'default.jpg') ? url("https://cdn.ihouse.ps/$section->image")   : 'http://via.placeholder.com/450' }}">
                        </div>
                        <div class="col-sm-5 col-md-4">
                            <div class="switchable__text">
                                <h3 class="text-right">{{ $section->title }}</h3>
                                <p class="lead text-right">
                                    {!! $section->description !!}
                                </p>
                            </div>
                        </div>
                    </div>
                    <!--end of row-->
                </div>
                <!--end of container-->
            </section>
        @endif
    @endforeach
@endsection
@section("scripts")
    @include('partial.slider_script')
@endsection