@if (!empty($bannerList) && $bannerList->isNotEmpty())
    <section class="home-banner" id="home">
        <div class="banner_inner">
            <!-- Swiper -->
            <div class="swiper-container ">
                <div class="swiper-wrapper">
                    @foreach ($bannerList as $banner)
                        <div class="swiper-slide b_item">
                            <div class="img_box" data-thump="{{ PP($banner->getData('banner_image')) }}">

                                @if (\Agent::isMobile() && $banner->getData('banner_mobile'))
                                    <picture>
                                        <source srcset="{{ webp($banner->getData('banner_mobile')) }}"
                                            type="image/webp">
                                        <source srcset="{{ PP($banner->getData('banner_mobile')) }}"
                                            type="image/{{ FT($banner->getData('banner_mobile')) }}">
                                        <img src="{{ PP($banner->getData('banner_mobile')) }}" loading="lazy" alt="">
                                    </picture>
                                @elseif ($banner->getData('banner_video_link'))
                                    @php
                                        $videoID = getYoutubeVideoID($banner->getData('banner_video_link'));
                                    @endphp
                                    <iframe id="player" frameborder="0" allowfullscreen="1"
                                        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                                        src="//www.youtube.com/embed/?rel=0&loop=1&version=3&autoplay=1&controls=0&mute=1&vq=hd720&playlist="></iframe>
                                @elseif($banner->getData('background_image'))
                                    <picture>
                                        <source srcset="{{ webp($banner->getData('background_image')) }}"
                                            type="image/webp">
                                        <source srcset="{{ PP($banner->getData('background_image')) }}"
                                            type="image/{{ FT($banner->getData('background_image')) }}">
                                        <img src="{{ PP($banner->getData('background_image')) }}" loading="lazy"
                                            alt="{{ $banner->getData('banner_image_alt') }}">
                                    </picture>
                                @elseif($banner->getData('banner_video'))
                                    <video loop="" muted="" autoplay="" playsinline="">
                                        <source src="{{ PP($banner->getData('banner_video')) }}" type="video/mp4">
                                    </video>
                                @endif

                            </div>
                            <div class="title_">
                                {!! $banner->getData('excerpt') !!}</span>
                            </div>
                        </div>
                    @endforeach
                </div>
                <div class="button-next">

                    <div class="img_box">
                        <div class="img_ main_"></div>
                    </div>

                    <div class="arrow_box">

                    </div>
                </div>
                <div class="button-prev">

                    <div class="img_box">
                        <div class="img_ main_"></div>
                    </div>

                    <div class="arrow_box">

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

            {{--<div class="search_box" id="search_box">
                {{ Form::open(['url' => route('search-projects', [$lang]), 'method' => 'get', 'name' => 'project-inquiry', 'id' => 'project-inquiry', 'role' => 'form', 'autocomplete' => 'off']) }}
                <div class="inner_">
                    @if (!empty($locationList) && $locationList->isNotEmpty())
                        <div class="input_box">
                            <label>{{ lang('city') }}</label>

                            <select multiple id="ct" name="ct[]" class="filter_multi">
                                @foreach ($locationList as $location)
                                    <option value="{{ $location->getData('post_id') }}">
                                        {{ $location->getData('post_title') }}</option>
                                @endforeach
                            </select>
                        </div>
                    @endif
                    @if (!empty($searchCommunityList) && $searchCommunityList->isNotEmpty())
                        <div class="input_box">
                            <label>{{ lang('community') }}</label>
                            <select multiple id="cm" name="cm[]" class="filter_multi">
                                @foreach ($searchCommunityList as $community)
                                    <option data-location="{{ $community->getData('post_location') }}"
                                        value="{{ $community->post_title }}">
                                        {{ $community->getData('post_title') }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                    @endif
                    @if (!empty($propertyType) && $propertyType->isNotEmpty())
                        <div class="input_box">
                            <label>{{ lang('property_type') }}</label>
                            <select multiple id="pt" name="pt[]" class="filter_multi">
                                @foreach ($propertyType as $type)
                                    <option value="{{ $type->pt_title }}">{{ $type->getData('pt_title') }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                    @endif
                    @if (!empty($bedroomType) && $bedroomType->isNotEmpty())
                        <div class="input_box">
                            <label>{{ lang('bedroom') }}</label>
                            <select multiple id="br" name="br[]" class="filter_multi">
                                @foreach ($bedroomType as $type)
                                    <option value="{{ $type->br_short }}">{{ $type->getData('br_title') }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                    @endif

                    <div class="input_box" data-drop>
                        <label>{{ lang('price_range') }}</label>
                        <div class="value_box">
                            <label>{{ lang('all') }}</label>
                        </div>
                        <div class="dorp_box">
                            <div class="input_">
                                <label>{{ lang('min_price') }} (AED)</label>
                                <input type="number" name="min_price" class="form-control" id="min" value="">

                            </div>
                            <div class="input_">
                                <label>{{ lang('max_price') }} (AED)</label>
                                <input type="number" name="max_price" class="form-control" id="max" value="">
                            </div>
                        </div>
                    </div>


                    <div class="btn_box">

                        <button class="dir-btn  dir-btn--filled dir-btn-icon"
                            role="button">
                                <svg x="0" y="0" viewBox="0 0 56.966 56.966" ><g><path d="M55.146 51.887 41.588 37.786A22.926 22.926 0 0 0 46.984 23c0-12.682-10.318-23-23-23s-23 10.318-23 23 10.318 23 23 23c4.761 0 9.298-1.436 13.177-4.162l13.661 14.208c.571.593 1.339.92 2.162.92.779 0 1.518-.297 2.079-.837a3.004 3.004 0 0 0 .083-4.242zM23.984 6c9.374 0 17 7.626 17 17s-7.626 17-17 17-17-7.626-17-17 7.626-17 17-17z" fill="#FFF" ></path></g></svg>
                            </button>
                    </div>
                </div>

                {!! Form::close() !!}
                <button type="button" data-fancybox-close="" class="fancybox-button fancybox-close-small"
                    title="Close"><svg xmlns="http://www.w3.org/2000/svg" version="1" viewBox="0 0 24 24">
                        <path d="M13 12l5-5-1-1-5 5-5-5-1 1 5 5-5 5 1 1 5-5 5 5 1-1z"></path>
                    </svg></button>
            </div>
            <div class="mobile_searchbox">
                <a href="#search_box" data-mobile-search class="dir-btn  dir-btn--filled"
                    role="button">{{ lang('search') }}<span></span><span></span><span></span><span></span><b
                        aria-hidden="true">{{ lang('search') }}</b><b
                        aria-hidden="true">{{ lang('search') }}</b><b
                        aria-hidden="true">{{ lang('search') }}</b><b
                        aria-hidden="true">{{ lang('search') }}</b></a>
            </div>--}}

            @include('frontend.layouts.social')
        </div>
    </section>
@endif
@section('scripts')
    @parent
    <script>
        $("#ct").change(function(e) {
            e.preventDefault();

            //get communities
            var location = $(this).val();
            var response = searchFilters();

            if (response.status) {
                selectFilters("cm", response.option.pr_community, location);
                selectFilters("pt", response.option.pr_type, location);
                selectFilters("br", response.option.pr_bedrooms, location);
            }
        });

        $("#cm").change(function(e) {
            e.preventDefault();

            //get property type
            var community = $(this).val();
            var response = searchFilters();

            if (response.status) {
                //selectFilters("cm", response.option.pr_community, community);
                selectFilters("pt", response.option.pr_type, community);
                selectFilters("br", response.option.pr_bedrooms, community);
            }
        });

        $("#pt").change(function(e) {
            e.preventDefault();

            //get bedrooms
            var type = $(this).val();
            var response = searchFilters();

            if (response.status) {
                selectFilters("cm", response.option.pr_community, type);
                //selectFilters("pt", response.option.pr_type, type);
                selectFilters("br", response.option.pr_bedrooms, type);
            }
        });

        $("#br").change(function(e) {
            e.preventDefault();

            //get room
            var bedroom = $(this).val();
            var response = searchFilters();

            if (response.status) {
                selectFilters("cm", response.option.pr_community, bedroom);
                selectFilters("pt", response.option.pr_type, bedroom);
                //selectFilters("br", response.option.pr_bedrooms, bedroom);
            }
        });

        function searchFilters() {
            var _url = "{{ route('get-search-filters', $lang) }}";
            var _data = $('#project-inquiry').serializeArray();

            var response = loadFilters(_url, _data);
            if (response.status) {
                return response;
            }
        }

        function loadFilters(_url, _data) {
            var result = false;
            $.ajax({
                type: "GET",
                url: _url,
                data: _data,
                dataType: "json",
                async: false,
                success: function(data) {
                    result = data;
                },
                error: function() {
                    //alert('Error occured');
                }
            });
            return result;
        }

        function selectFilters(_id, _response, _data = "") {

            var excludeItem = _response;

            if ($("#ct").val() == "" && _data == "") {
                $('#' + _id).val('');
                $('#' + _id).multiselect('reload');
                return;
            }

            //console.log(excludeItem);

            if (excludeItem) {

                $('#' + _id).multiselect('reload');
                $('#' + _id + ' > option').each(function() {

                    if (jQuery.inArray($(this).val(), excludeItem) === -1) {

                        if (_id == "cm") {
                            $('input[value="' + $(this).val() + '"]').parents('li').remove();
                        } else {
                            $('input[value="' + $(this).val() + '"]').attr('disabled', true);
                            $('input[value="' + $(this).val() + '"]').parents('li').addClass('disable');
                        }
                    }
                });
            } else {
                $('#' + _id).multiselect('reload');
            }
        }
    </script>

    <script>

           var iframe_el = document.querySelectorAll(".banner_inner iframe");
           var frame_w = document.querySelector(".home-banner").clientWidth;
           var frame_h = document.querySelector(".home-banner").clientHeight ;
           iframe_el.forEach(function(node) {
            console.log(frame_w, frame_h);
            node.setAttribute('width', frame_w+'px');
            node.setAttribute('height', frame_h+'px');
           });


        $(document).ready(function(){
           $("iframe").height(frame_h);
           $("iframe").width(frame_w);

           $( window ).resize(function() {
                $("iframe").height(frame_h);
                $("iframe").width(frame_w);
            });
        });

    </script>

@stop