@extends('layout.app')

@section('title', 'Busca - Aluguéis Mapa do Imóvel')
@section('description', $page->description)

@section('body')
    @include('partials.menu.desktop')
    @include('partials.menu.mobile')
    <div class="wrapper">
        <div class="main">
            <div class="container-search">
                <div class="list-section search-result_list-box">
                    <div class="search-page_filter">
                        <div class="search-page_filter_title">Resultados da sua pesquisa</div>
                        <div class="mobile-buttons">
                            <button type="button" class="button w-inline-block filterShowButton">
                                <a class="button_text">Filtros</a>
                            </button>
                        </div>
                        <form id="searchForm" method="GET" action="{{ route('search.index') }}">
                            <div class="search-page_filter_list">
                                <input type="hidden" name="valor" value="{{$parameters["valor"]}}">
                                <div class="search-box_form_list search-results">
                                    <div class="search-box_form_item">
                                        <div class="search-box_label">Tipo de imóvel desejado</div>
                                        <div class="search-box_form_item_links">
                                            @php
                                                $categories = \App\Vista\SearchContent::searchCategories();
                                            @endphp
                                            <select class="select selectpicker select-search-home" name="categoria[]" title="Todos" multiple data-selected-text-format="count > 1">
                                                @foreach($categories as $category)
                                                    @if(in_array(\App\Utilities\Utilities::removeSpecialCharacters($category), $parameters['categoria']))
                                                        <option value="{{ $category }}" selected>{{ $category }}</option>
                                                    @else
                                                        <option value="{{ $category }}">{{ $category }}</option>
                                                    @endif
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                    <div class="search-box_form_item">
                                        <div class="search-box_label">Cidade de preferência</div>
                                        <div class="search-box_form_item_links">
                                            @php
                                                $cities = \App\Vista\SearchContent::searchCity();
                                            @endphp
                                            <select class="select selectpicker select-search-home" id="cidadeFilter" name="cidade[]" title="Todas" multiple data-selected-text-format="count > 1" >
                                                @foreach($cities as $city)
                                                    @if(in_array(\App\Utilities\Utilities::removeSpecialCharacters($city), $parameters['cidade']))
                                                        <option value="{{ $city }}" selected>{{ $city }}</option>
                                                    @else
                                                        <option value="{{ $city }}">{{ $city }}</option>
                                                    @endif
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                    <div class="search-box_form_item">
                                        <div class="search-box_label">Bairro de preferência</div>
                                        <input type="hidden" id="neighborhood_url" value="{{ route('search.neighborhoods') }}">
                                        <div class="search-box_form_item_links">
                                            @php
                                                $neighborhoods = \App\Vista\SearchContent::searchNeighborhoods($parameters["cidade"]);
                                                if (array_key_exists('Bairro', $neighborhoods)){
                                                    $neighborhoods = $neighborhoods['Bairro'];
                                                }
                                            @endphp
                                            <select class="select selectpicker select-search-home bairro" name="bairro[]" title="Todos" multiple data-selected-text-format="count > 1" data-size="8" data-live-search="true">
                                                @foreach($neighborhoods as $neighborhood)
                                                    @if(in_array(\App\Utilities\Utilities::removeSpecialCharacters($neighborhood), $parameters['bairro']))
                                                        <option value="{{ $neighborhood }}" selected>{{ mb_convert_case($neighborhood, MB_CASE_TITLE, 'UTF-8') }}</option>
                                                    @else
                                                        <option value="{{ $neighborhood }}">{{ mb_convert_case($neighborhood, MB_CASE_TITLE, 'UTF-8')}}</option>
                                                    @endif
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                    <div class="search-box_form_item last">
                                        <div class="search-box_label">Quantos dormitórios?</div>
                                        <div class="search-box_form_item_links search-result-bedroom">
                                            <input type="hidden" name="quartos" class="bedroomValue" id="bedroomFilter" value="{{ $parameters["quartos"] }}">
                                            <a href="#" class="search-box_form_item_links_btn w-inline-block bedroomSub">
                                                <img src="/images/sub-icon.svg" width="23" alt=""></a>
                                            <div class="search-box_form_item_links_txt"><span class="bedroomNumber">0</span>+</div>
                                            <a href="#" class="search-box_form_item_links_btn w-inline-block bedroomAdd">
                                                <img src="/images/add-icon.svg" width="23" alt="">
                                            </a>
                                        </div>
                                    </div>
                                </div>
                                <div class="search-box_form_list search-results">
                                    <button type="button" class="button w-inline-block filterSearchButton">
                                        <img src="/images/search-icon.svg" width="16" alt="" class="button_icon">
                                        <a class="button_text">Aplicar filtros</a>
                                    </button>
                                </div>
                            </div>
                        </form>
                    </div>
                    @if(count($properties) > 4)
                        <div class="list-section_row">
                            @foreach($properties as $property)
                                @if(is_array($property))
                                    <input type="hidden" id="route{{$property["Codigo"]}}" value="{{ route('property.show', \App\Vista\SearchProperties::mountUrlProperty($property)) }}">
                                    @include('partials.propertyBox')
                                @endif
                            @endforeach
                        </div>
                        <div class="pagination">
                            <div class="pagination-center">
                                {{ $properties->onEachSide(1)->links() }}
                            </div>
                        </div>
                    @else
                        <h2 class="section-h2">Não foram localizados imóveis</h2>
                    @endif
                </div>
            </div>
        </div>
        <div class="sidebar">
            <div class="gmap-markers-new">{{ empty($properties) === false ? json_encode($properties->items()) : '' }}</div>
            <div id="mapa-search"></div>
        </div>
    </div>
@endsection

@section('extra_scripts')
    <script src="https://maps.googleapis.com/maps/api/js?key={{ setting('site.js_maps') }}"></script>
    <script src="{{ asset('/js/markerWithLabel.js') }}"></script>

    <script type="text/javascript">
        var map;
        var infowindowOLD = null;
        $( document ).ready(function() {
            markers = $('.gmap-markers-new').html();
            markers = JSON.parse(markers);
            console.log(markers);

            map = new google.maps.Map(document.getElementById("mapa-search"), {
            });

            bounds  = new google.maps.LatLngBounds();

            // Create marker
            $.each(markers, function (key, value) {
                if (value["Latitude"] !== undefined && value["Latitude"] !== ''){

                    var markerLabel = 'R$ '+$.number(value["ValorLocacao"], 2, ',');

                    var marker = new MarkerWithLabel({
                        map: map,
                        animation: google.maps.Animation.DROP,
                        position: new google.maps.LatLng(parseFloat(value["Latitude"]), parseFloat(value["Longitude"])),
                        labelContent: markerLabel,
                        icon: {
                            path: google.maps.SymbolPath.CIRCLE,
                            scale: 0
                        },
                        labelAnchor: new google.maps.Point(18, 12),
                        labelClass: "my-custom-class-for-label", // your desired CSS class
                        labelInBackground: false,
                    });

                    var url = $('#route'+value["Codigo"]).val();

                    var contentString = '<div class="list-section_item row-item-map on-map">' +
                        '    <div class="list-section_item_header">' +
                        '        <a href="'+url+'" class="w-inline-block">' +
                        '            <img src="'+value["FotoDestaquePequena"]+'" data-src="'+value["FotoDestaque"]+'" alt="'+value["TituloSite"]+'" class="list-section_item_slider_slide-image lazy">' +
                        '        </a>' +
                        '    </div>';

                    contentString +=  '<a href="'+url+'" class="list-section_item_content row-item-content w-inline-block">' +
                        '        <h3 class="list-section_item_content_title on-map">'+value["TituloSite"]+'</h3>' +
                        '        <div class="list-section_item_content_tag">'+toTitleCase(value["Bairro"])+', '+value["Cidade"]+'</div>' +
                        '        <div class="list-section_item_content_details-list">';

                    if (value["Dormitorios"] != ''){
                        contentString += '<div class="list-section_item_content_details-list_item">' +
                            '                <img src="/images/cama_icon.svg" width="23" alt="" class="list-section_item_content_details-list_item-icon">' +
                            '                <div class="list-section_item_content_details-list_item-text">'+value["Dormitorios"]+'</div>' +
                            '            </div>';

                        if (value["Vagas"] != '' || value["AreaTotal"] != ''){
                            contentString += '<div class="list-section_item_content_details-list_divisor"></div>';
                        }
                    }

                    if (value["Vagas"] != ''){
                        contentString += '<div class="list-section_item_content_details-list_item">' +
                            '                <img src="/images/garage_icon.svg" width="17" alt="" class="list-section_item_content_details-list_item-icon">' +
                            '                <div class="list-section_item_content_details-list_item-text">'+value["Vagas"]+'</div>' +
                            '            </div>';
                        if (value["AreaTotal"] != ''){
                            contentString += '<div class="list-section_item_content_details-list_divisor"></div>';
                        }
                    }

                    if (value["AreaTotal"] != '') {
                        contentString += '<div class="list-section_item_content_details-list_item">' +
                            '                <img src="/images/area_icon.svg" width="19" alt="" class="list-section_item_content_details-list_item-icon">' +
                            '                <div class="list-section_item_content_details-list_item-text metric-number">'+value["AreaTotal"]+'<span class="book-detail">m²</span></div>' +
                            '            </div>' +
                            '       ';
                    }

                    contentString += '</div>' +
                                '<div class="list-section_item_content_price-box">' +
                        '            <div class="list-section_item_content_price-box_text"><span class="price-type">R$</span>'+$.number(value["ValorLocacao"], 2, ',')+'</div>' +
                        '        </div>' +
                        '    </a>' +
                        '</div>';

                    var infowindow = new google.maps.InfoWindow({
                        content: contentString
                    });

                    marker.addListener('click', function() {
                        if (infowindowOLD){
                            infowindowOLD.close();
                        }
                        infowindow.open(map, marker);
                        infowindowOLD = infowindow;
                    });

                    google.maps.event.addListener(map, "click", function(event) {
                        infowindow.close();
                    });

                    bounds.extend(marker.position);
                }
            });
            map.setCenter(bounds.getCenter());
            map.fitBounds(bounds);

            var listener = google.maps.event.addListener(map, "idle", function() {
                map.setZoom(14);
                google.maps.event.removeListener(listener);
            });

        });

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