@extends('layout.app')

@section('title', $page->title.' Mapa do Imóvel')
@section('description', $page->description)

@section('body')
    @include('partials.navbar')
    <div class="search-page_header">
        <div class="container">
            <div class="search-page_header_subtitle">Você está pesquisando por:</div>
            @if(!array_key_exists("codigo", $parameters))
                {{ $parameters["codigo"] = null }}
            @endif
            @if($parameters["codigo"] != null)
                <h1 class="search-page_header_h1"><strong>Código: </strong>{{$parameters["codigo"]}}</h1>
            @else
                <h1 class="search-page_header_h1">
                    @php
                        $categories = 0;
                    @endphp
                    @foreach($parameters as $key => $parameter)
                        @if($parameter == 'on')
                            <strong>{{ mb_convert_case($key, MB_CASE_TITLE, 'UTF-8') }},</strong>
                            @php
                                $categories++;
                            @endphp
                        @endif
                    @endforeach
                    @if(array_key_exists('categorias', $parameters))
                        @php
                            $categorias = explode(',', $parameters["categorias"])
                        @endphp
                        @foreach($categorias as $categoria)
                            <strong>{{ mb_convert_case($categoria, MB_CASE_TITLE, 'UTF-8') }},</strong>
                        @endforeach
                        @php
                            $categories++;
                        @endphp
                    @endif
                    @if(array_key_exists('cidade', $parameters))
                        em
                        @foreach($parameters["cidade"] as $key => $cidade)
                            <strong>{{ mb_convert_case($cidade, MB_CASE_TITLE, 'UTF-8') }}</strong>{{ (count($parameters["cidade"]) - 2) == $key ? ' e ' : ',' }}
                        @endforeach
                    @endif
                    @if(array_key_exists('bairro', $parameters))
                        @if(count($parameters["bairro"]) >= 2 )
                            nos bairros
                        @else
                            no bairro
                        @endif
                        @foreach($parameters["bairro"] as $key => $bairro)
                            <strong>{{ mb_convert_case($bairro, MB_CASE_TITLE, 'UTF-8') }}</strong>{{ (count($parameters["bairro"]) - 2) == $key ? ' e ' : ',' }}
                        @endforeach
                    @endif
                    @if(array_key_exists('quartos', $parameters))
                        @if($categories >= 1 && $parameters["quartos"] >= 1)
                            de
                        @endif
                        @if($parameters["quartos"] == 1)
                            <strong>1 dormitório</strong>
                        @elseif($parameters["quartos"] >= 2)
                           <strong>{{ $parameters["quartos"] }} dormitórios</strong>
                        @endif
                    @endif
                    @if(array_key_exists('preco', $parameters))
                        de até <strong>{{ $parameters["preco"]  }}</strong></h1>
                    @else
                        de até <strong>Todos os valores</strong></h1>
                    @endif
            @endif

        </div>
    </div>
    <div class="list-section search-page_list">
        <div class="container">
            {{--Filtros de pesquisa--}}
            <div class="search-page_filter">
                <form action="{{ route('search') }}"  method="get" id="searchForm">
                    <div class="search-page_filter_title">Você pode filtrar mais a sua pesquisa selecionando as características abaixo</div>
                    <div class="search-page_filter_list">
                        <div class="search_page_filter-flexbox">
                            <div class="search-page_filter_list_item" id="categoryModal">
                                <div class="search-page_filter_list_item_text" id="categoryButton">Categoria</div>
                                <div class="search-page_filter_list_item_menu_box hidden" id="categorySelect">
                                    <div class="search-page_filter_list_item_menu" id="categoryContainer">
                                        <div class="search-page_filter_list_item_menu_list_check">
                                            <input class="modal-checkbox" type="checkbox" id="house" name="casa" value="on">
                                            <label class="modal-checkbox-label" for="house" data-content="Casa">Casa</label>
                                        </div>
                                        <div class="search-page_filter_list_item_menu_list_check">
                                            <input class="modal-checkbox" type="checkbox" id="apartament" name="apartamento" value="on">
                                            <label class="modal-checkbox-label" for="apartament" data-content="Apartamento">Apartamento</label>
                                        </div>
                                        <div class="search-page_filter_list_item_menu_list_check">
                                            <input class="modal-checkbox" type="checkbox" id="ground" name="terreno" value="on">
                                            <label class="modal-checkbox-label" for="ground" data-content="Terreno">Terreno</label>
                                        </div>
                                        <div class="search-page_filter_list_item_menu_list_check">
                                            <input class="modal-checkbox" type="checkbox" id="store" name="lojas" value="on">
                                            <label class="modal-checkbox-label" for="store" data-content="Lojas/Salas e Hotéis">Lojas/Salas e Hotéis</label>
                                        </div>
                                        <div class="search-page_filter_list_item_menu_list_check">
                                            <input class="modal-checkbox" type="checkbox" id="site" name="sitio" value="on">
                                            <label class="modal-checkbox-label" for="site" data-content="Sítio/Fazenda">Sítio/Fazenda</label>
                                        </div>
                                        <div class="search-page_filter_list_item_menu_list_check">
                                            <input class="modal-checkbox" type="checkbox" id="flat2" name="flat" value="on">
                                            <label class="modal-checkbox-label" for="flat2" data-content="Flat">Flat</label>
                                        </div>
                                        <div class="search-page_filter_list_item_footer">
                                            <a class="search-page_filter_list_item_footer_clear" id="categoryClear">Limpar</a>
                                            <a class="search-page_filter_list_item_footer_save filterApply">Aplicar Filtro</a>
                                        </div>
                                    </div>
                                    <button type="button" class="modal_close-button w-inline-block hidden" id="categoryClose">
                                        <img src="/images/icon-back-modal.svg" width="12" alt="">
                                    </button>
                                </div>
                            </div>
                            <div class="search-page_filter_list_item" id="cityModal">
                                <div class="search-page_filter_list_item_text" id="cityButton">Cidade</div>
                                <div class="search-page_filter_list_item_menu_box hidden" id="citySelect">
                                    <div class="search-page_filter_list_item_menu" id="cityContainer">
                                        @foreach($cities as $city)
                                            <div class="search-page_filter_list_item_menu_list_check">
                                                <input class="modal-checkbox cityCheckbox" type="checkbox" id="{{str_replace(' ', '', $city)}}" name="cidade[]" value="{{$city}}">
                                                <label class="modal-checkbox-label" for="{{str_replace(' ', '', $city)}}" data-content="{{ mb_convert_case($city, MB_CASE_TITLE, 'UTF-8') }}">{{ mb_convert_case($city, MB_CASE_TITLE, 'UTF-8') }}</label>
                                            </div>
                                        @endforeach
                                        <div class="search-page_filter_list_item_footer">
                                            <a class="search-page_filter_list_item_footer_clear" id="cityClear">Limpar</a>
                                            <a class="search-page_filter_list_item_footer_save filterApply">Aplicar Filtro</a>
                                        </div>
                                    </div>
                                    <button type="button" class="modal_close-button w-inline-block hidden" id="cityClose">
                                        <img src="/images/icon-back-modal.svg" width="12" alt="">
                                    </button>
                                </div>
                            </div>
                            <div class="search-page_filter_list_item" id="neighborhoodModal">
                                <div class="search-page_filter_list_item_text" id="neighborhoodButton">Bairro</div>
                                <div class="search-page_filter_list_item_menu_box hidden" id="neighborhoodSelect">
                                    <div class="search-page_filter_list_item_menu" id="neighborhoodContainer">
                                        <input type="hidden" value="{{ route('search.neighborhoods') }}" id="neighborhood_url">
                                        <div class="options neighborhoodOptions" data-simplebar>
                                            @foreach($neighborhoods as $neighborhood)
                                                <div class="search-page_filter_list_item_menu_list_check">
                                                    <input class="modal-checkbox neighborhoodCheckbox" type="checkbox" id="{{str_replace(' ', '', $neighborhood)}}" name="bairro[]" value="{{$neighborhood}}">
                                                    <label class="modal-checkbox-label" for="{{str_replace(' ', '', $neighborhood)}}" data-content="{{ mb_convert_case($neighborhood, MB_CASE_TITLE, 'UTF-8') }}">{{ mb_convert_case($neighborhood, MB_CASE_TITLE, 'UTF-8') }}</label>
                                                </div>
                                            @endforeach
                                        </div>
                                        <div class="search-page_filter_list_item_footer">
                                            <a class="search-page_filter_list_item_footer_clear" id="neighborhoodClear">Limpar</a>
                                            <a class="search-page_filter_list_item_footer_save filterApply">Aplicar Filtro</a>
                                        </div>
                                    </div>
                                    <button type="button" class="modal_close-button w-inline-block hidden" id="neighborhoodClose">
                                        <img src="/images/icon-back-modal.svg" width="12" alt="">
                                    </button>
                                </div>
                            </div>
                            <div class="search-page_filter_list_item" id="priceModal">
                                <div class="search-page_filter_list_item_text" id="priceButton">Valor</div>
                                <div class="search-page_filter_list_item_menu_box w-hidden" id="priceSelect">
                                    <div class="search-page_filter_list_item_menu price" id="priceContainer">
                                        <div class="search-page_filter_list_item_menu_list">
                                            <div class="search-box_form-box search-page_filter_list_item_bedroom w-form">
                                                <div class="search-box_form_second-step_items filter-box">
                                                    <div class="search-box_form_price">
                                                        <div class="search-box_form_second-step_item-title">Quanto quer investir?</div>
                                                        @if(array_key_exists('preco', $parameters))
                                                            @if($parameters["preco"] != 'Todos os valores')
                                                                <input type="text" class="search-box_form_price_input w-input" name="preco" data-name="price" data-affixes-stay="true" data-prefix="R$ " data-thousands="." data-decimal="," data-precision="0" value="{{ \App\Utilities\Utilities::onlyNumber($parameters["preco"]) }}" id="priceFilterSearch">
                                                            @else
                                                                <input type="text" class="search-box_form_price_input w-input" name="preco" data-name="price" data-affixes-stay="true" data-prefix="R$ " data-thousands="." data-decimal="," data-precision="0" value="3000000" id="priceFilterSearch">
                                                            @endif
                                                        @else
                                                            <input type="text" class="search-box_form_price_input w-input" name="preco" data-name="price" data-affixes-stay="true" data-prefix="R$ " data-thousands="." data-decimal="," data-precision="0" value="3000000" id="priceFilterSearch">
                                                        @endif
                                                        <div class="search-box_form_price_header">
                                                            <img src="/images/icone-dinheiro.svg" width="15" alt="dinheiro" class="search-box_form_price_header_icon">
                                                            <div class="search-box_form_price_header_range-box">
                                                                @if(array_key_exists('preco', $parameters))
                                                                    @if($parameters["preco"] != 'Todos os valores')
                                                                        <input type="range" min="50000" max="3000000" value="{{ \App\Utilities\Utilities::onlyNumber($parameters["preco"]) }}" id="myRange">
                                                                    @else
                                                                        <input type="range" min="50000" max="3000000" value="3000000" id="myRange">
                                                                    @endif
                                                                @else
                                                                    <input type="range" min="50000" max="3000000" value="3000000" id="myRange">
                                                                @endif
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="search-page_filter_list_item_footer">
                                            <a class="search-page_filter_list_item_footer_save filterApply">Aplicar Filtro</a>
                                        </div>
                                    </div>
                                    <button type="button" class="modal_close-button w-inline-block hidden" id="priceClose">
                                        <img src="/images/icon-back-modal.svg" width="12" alt="">
                                    </button>
                                </div>
                            </div>
                            <div class="search-page_filter_list_item" id="bedroomModal">
                                <div class="search-page_filter_list_item_text" id="bedroomButton">Dormitórios</div>
                                <div class="search-page_filter_list_item_menu_box w-hidden" id="bedroomSelect">
                                    <div class="search-page_filter_list_item_menu bedroom" id="bedroomContainer">
                                        <div class="search-page_filter_list_item_menu_list">
                                            <div class="search-box_form-box search-page_filter_list_item_bedroom w-form">
                                                <div class="search-box_form_second-step_items filter-box">
                                                    <div class="filter">
                                                        <div class="search-box_form_bedrooms_buttons filter-btns">
                                                            <div class="search-box_form_bedrooms_header">
                                                                <img src="/images/icone-cama.svg" width="32" alt="cama" class="search-box_form_bedrooms_header-icon">
                                                                @if(array_key_exists('quartos', $parameters))
                                                                    <input type="text" class="search-box_form_bedrooms_header-input w-input" name="quartos" data-name="bedrooms" value="{{ $parameters["quartos"] }}" id="bedroomsFilter">
                                                                @else
                                                                    <input type="text" class="search-box_form_bedrooms_header-input w-input" name="quartos" data-name="bedrooms" value="0" id="bedroomsFilter">
                                                                @endif
                                                            </div>
                                                            <div class="search-box_form_bedrooms_buttons">
                                                                <a href="#" id="menosFilter" class="search-box_form_bedrooms_buttons_item w-inline-block">
                                                                    <div>-</div>
                                                                </a>
                                                                <a href="#" id="maisFilter" class="search-box_form_bedrooms_buttons_item w-inline-block">
                                                                    <div>+</div>
                                                                </a>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="search-page_filter_list_item_footer">
                                            <a class="search-page_filter_list_item_footer_save filterApply">Aplicar Filtro</a>
                                        </div>
                                    </div>
                                    <button type="button" class="modal_close-button w-inline-block hidden" id="bedroomClose">
                                        <img src="/images/icon-back-modal.svg" width="12" alt="">
                                    </button>
                                </div>
                            </div>
                            <div class="search-page_filter_list_item" id="featureModal">
                                <div class="search-page_filter_list_item_text" id="featureButton">Características</div>
                                <div class="search-page_filter_list_item_menu_box hidden" id="featureSelect">
                                    <div class="search-page_filter_list_item_menu" id="featureContainer">
                                        <div class="search-page_filter_list_item_menu_list_check">
                                            <input class="modal-checkbox" type="checkbox" id="Mobiliado" name="caracteristica[]" value="Mobiliado">
                                            <label class="modal-checkbox-label" for="Mobiliado" data-content="Mobiliado">Mobiliado</label>
                                        </div>
                                        <div class="search-page_filter_list_item_menu_list_check">
                                            <input class="modal-checkbox" type="checkbox" id="SemiMobiliado" name="caracteristica[]" value="SemiMobiliado">
                                            <label class="modal-checkbox-label" for="SemiMobiliado" data-content="SemiMobiliado">SemiMobiliado</label>
                                        </div>
                                        <div class="search-page_filter_list_item_menu_list_check">
                                            <input class="modal-checkbox" type="checkbox" id="Piscina" name="caracteristica[]" value="Piscina">
                                            <label class="modal-checkbox-label" for="Piscina" data-content="Piscina">Piscina</label>
                                        </div>
                                        <div class="search-page_filter_list_item_menu_list_check">
                                            <input class="modal-checkbox" type="checkbox" id="Calefacao" name="caracteristica[]" value="Calefacao">
                                            <label class="modal-checkbox-label" for="Calefacao" data-content="Calefacao">Calefação</label>
                                        </div>
                                        <div class="search-page_filter_list_item_menu_list_check">
                                            <input class="modal-checkbox" type="checkbox" id="Varanda" name="caracteristica[]" value="Varanda">
                                            <label class="modal-checkbox-label" for="Varanda" data-content="Varanda">Varanda</label>
                                        </div>
                                        <div class="search-page_filter_list_item_footer">
                                            <a class="search-page_filter_list_item_footer_clear" id="featureClear">Limpar</a>
                                            <a class="search-page_filter_list_item_footer_save filterApply">Aplicar Filtro</a>
                                        </div>
                                    </div>

                                    <button type="button" class="modal_close-button w-inline-block hidden" id="featureClose">
                                        <img src="/images/icon-back-modal.svg" width="12" alt="">
                                    </button>
                                </div>
                            </div>
                            <button type="button" class="main-navbar_right-box_links_item filter-btn w-inline-block filterApply filter-button">
                                <div class="main-navbar_right-box_links_item_text blue-button_text">Aplicar Filtros</div>
                            </button>
                        </div>
                    </div>
                </form>
            </div>
            {{--Conteudo da Página--}}
            <div class="list-section search-padding">
                @if($properties != null)
                    @if(count($properties) > 4)
                        @php
                            $property = $properties->first();
                            $properties->shift();
                        @endphp
                        @include('partials.propertyBox.propertyBoxHorizontal')
                        <div class="list-section_row">
                            @foreach($properties as $property)
                                @if(is_array($property))
                                    @include('partials.propertyBox.propertyBox')
                                @endif
                            @endforeach
                        </div>
                    @else
                        <h2 class="section-h2">Não foram localizados imóveis com a busca</h2>
                    @endif
                    <div class="pagination-center">
                        {{ $properties->onEachSide(1)->links() }}
                    </div>
                @else
                    <div class="container">
                        <h2 class="section-h2">Não foram localizados imóveis com a busca</h2>
                    </div>
                @endif
            </div>
        </div>
    </div>
    @include('partials.testimonies')
    @include('partials.brokers')
@endsection

@section('extra_scripts')
    <script type="text/javascript">
        @if(array_key_exists('casa', $parameters))
            $('#house').prop("checked", true);
        @endif
        @if(array_key_exists('apartamento', $parameters))
            $('#apartament').prop("checked", true);
        @endif
        @if(array_key_exists('terreno', $parameters))
            $('#ground').prop("checked", true);
        @endif
        @if(array_key_exists('lojas', $parameters))
            $('#store').prop("checked", true);
        @endif
        @if(array_key_exists('sitio', $parameters))
            $('#site').prop("checked", true);
        @endif
        @if(array_key_exists('flat', $parameters))
            $('#flat2').prop("checked", true);
        @endif
    </script>
    <script type="text/javascript">
        @if(array_key_exists('cidade', $parameters))
            @forEach($parameters["cidade"] as $city)
                $('#{{str_replace(' ', '', $city)}}').prop("checked", true);
            @endforeach
        @endif
    </script>
    <script type="text/javascript">
        @if(array_key_exists('bairro', $parameters))
            @forEach($parameters["bairro"] as $neighborhood)
                $('#{{str_replace(' ', '', $neighborhood)}}').prop("checked", true);
            @endforeach
        @endif
    </script>
    <script type="text/javascript">
        @if(array_key_exists('caracteristica', $parameters))
            @forEach($parameters["caracteristica"] as $caracteristica)
                $('#{{str_replace(' ', '', $caracteristica)}}').prop("checked", true);
            @endforeach
        @endif
    </script>
    <script type="text/javascript">
        @if(array_key_exists("preco", $parameters))
            @if($parameters["preco"] === 'Todos os valores')
                $('#priceFilter').val("Todos os valores");
            @endif
        @else
            $('#priceFilter').val("Todos os valores");
        @endif
    </script>

    <script type="text/javascript">
        $(".cityCheckbox").change(function(){
            $('.neighborhoodOptions').empty();
            let url = $('#neighborhood_url').val();

            var checkboxes = $('input[name="cidade[]"]');
            var marcados = checkboxes.filter(":checked").map(function () {
                return this.value;
            }).get();

            $.ajax({
                url : url,
                type: 'GET',
                data : {cidades: marcados}
            }).done(function(response){ //
                var obj = jQuery.parseJSON( response );
                console.log(obj);
                var html = '';
                $.each( obj, function( key, value ) {
                    console.log(sentenceCase(value));
                    html +='<div class="search-page_filter_list_item_menu_list_check ">'+
                        '<input class="modal-checkbox neighborhoodCheckbox" type="checkbox" id="'+value.replace(' ', '')+'" name="bairro[]" value="'+value+'">\n' +
                        '<label class="modal-checkbox-label" for="'+value.replace(' ', '')+'" data-content="'+sentenceCase(value)+'">'+sentenceCase(value)+'</label>'+
                        '</div>'
                });
                $('.neighborhoodOptions').append(html);
            }).fail(function(jqXHR, textStatus, msg) {
            });
        });

        function sentenceCase (str) {
            if ((str===null) || (str===''))
                return false;
            else
                str = str.toString();

            return str.replace(/\w\S*/g,
                function(txt){return txt.charAt(0).toUpperCase() +
                    txt.substr(1).toLowerCase();});
        }
    </script>
@endsection