@extends('layout.app')

@section('title', $property["TituloSite"] )
@section('description', $page->description)

@section('body')
    @include('partials.menu.desktop')
    @include('partials.menu.mobile')
    @php
        $property["Foto"] = array_merge($property["Foto"], $property["FotoEmpreendimento"]);
    @endphp
    {{--FancyBox Galery--}}
    <div class="w-hidden" id="imagesGalery">
        @if(is_array($property["Foto"]))
            @foreach($property["Foto"] as $image)
                <a href="{{$image["Foto"]}}"  data-thumb="{{$image["FotoPequena"]}}" data-fancybox="gallery" class="galery"></a>
            @endforeach
        @else
            <a href="{{ Storage::url(setting('site.imageEmpty')) }}"  data-fancybox="gallery" class="galery"></a>
        @endif
    </div>

    {{--Imagens Mobile--}}
    <div data-animation="slide" data-duration="500" data-infinite="1" class="list-section_item_slider mobile-immobile-page_main-slider w-slider">
        <div class="list-section_item_slider_mask w-slider-mask">
            @if(count($property["Foto"]) >= 1)
                @php
                    $i = 0;
                @endphp
                @foreach($property["Foto"] as $image)
                    <div class="list-section_item_slider_slide w-slide openGalery0">
                        <img data-src="{{ $image["Foto"] }}" data-error="{{ str_replace('\\', '/', Storage::url(setting('site.imageEmpty'))) }}" alt="{{ $image["Descricao"] }}" class="lazy list-section_item_slider_slide-image object-image">
                    </div>
                    @php
                        $i++;
                        if ($i == 4){
                            break;
                        }
                    @endphp
                @endforeach
            @else
                <div class="list-section_item_slider_slide w-slide">
                    <img data-src="{{ str_replace('\\', '/', Storage::url(setting('site.imageEmpty'))) }}" data-error="{{ str_replace('\\', '/', Storage::url(setting('site.imageEmpty'))) }}" alt="Sem Imagem" class="lazy list-section_item_slider_slide-image object-image">
                </div>
            @endif
        </div>
        <div data-w-id="a35889ca-6ed5-216e-aa87-4deffe2bd8b8" class="immobile-page_header_button openGalery0" >
            <img src="/images/icone-foto.svg" width="26" alt="">
            <div class="immobile-page_header_button_text">Ver todas as fotos</div>
        </div>
    </div>
    <div data-w-id="d2f4c21e-2796-4a11-aa8c-33e6743f5538" class="immobile-page_header_button mobile-photo-modal-button openGalery0">
        <img src="/images/icone-foto.svg" width="26" alt="">
        <div class="immobile-page_header_button_text">Ver todas as fotos</div>
    </div>

    {{--Imagens Desktop--}}
    <a class="immobile-page_header w-inline-block openGalery">
        @if(count($property["Foto"]) >= '1')
            <div class="immobile-page_header_main-photo lazy openGalery0" data-bg="{{array_values($property["Foto"])[0]["Foto"]}}" data-error="{{ str_replace('\\', '/', Storage::url(setting('site.imageEmpty'))) }}"></div>
        @else
            <div class="immobile-page_header_main-photo lazy openGalery0" data-bg="{{ str_replace('\\', '/', Storage::url(setting('site.imageEmpty'))) }}"></div>
        @endif
        <div class="immobile-page_header_right-box">
            @if(count($property["Video"]) >= 1)
                <div class="immobile-page_header_right-box_photo lazy openGalery1" data-bg="https://img.youtube.com/vi/{{array_values($property["Video"])[0]["Video"]}}/hqdefault.jpg" data-error="{{ str_replace('\\', '/', Storage::url(setting('site.imageEmpty'))) }}">
                    <button class="you-tube-center">
                        <img src="/images/YouTube-White-Full-Color-Logo.wine.svg" width="165" alt="">
                    </button>
                </div>
                @if(count($property["Foto"]) >= '2')
                    <div class="immobile-page_header_right-box_photo photo2 lazy openGalery2" data-bg="{{array_values($property["Foto"])[1]["Foto"]}}" data-error="{{ str_replace('\\', '/', Storage::url(setting('site.imageEmpty'))) }}">
                        <button class="immobile-page_header_button">
                            <img src="/images/icone-foto.svg" width="26" alt="">
                            <div class="immobile-page_header_button_text">Ver todas as fotos</div>
                        </button>
                    </div>
                @else
                    <div class="immobile-page_header_right-box_photo photo2 lazy openGalery0" data-bg="{{ str_replace('\\', '/', Storage::url(setting('site.imageEmpty'))) }}">
                        <button class="immobile-page_header_button">
                            <img src="/images/icone-foto.svg" width="26" alt="">
                            <div class="immobile-page_header_button_text">Ver todas as fotos</div>
                        </button>
                    </div>
                @endif
            @else
                @if(count($property["Foto"]) >= '2')
                    <div class="immobile-page_header_right-box_photo lazy openGalery1" data-bg="{{array_values($property["Foto"])[1]["Foto"]}}" data-error="{{ str_replace('\\', '/', Storage::url(setting('site.imageEmpty'))) }}" ></div>
                @else
                    <div class="immobile-page_header_right-box_photo lazy openGalery0" data-bg="{{ str_replace('\\', '/', Storage::url(setting('site.imageEmpty'))) }}"></div>
                @endif
                @if(count($property["Foto"]) >= '3')
                    <div class="immobile-page_header_right-box_photo photo2 lazy openGalery2" data-bg="{{array_values($property["Foto"])[2]["Foto"]}}" data-error="{{ str_replace('\\', '/', Storage::url(setting('site.imageEmpty'))) }}">
                        <button class="immobile-page_header_button">
                            <img src="/images/icone-foto.svg" width="26" alt="">
                            <div class="immobile-page_header_button_text">Ver todas as fotos</div>
                        </button>
                    </div>
                @else
                    <div class="immobile-page_header_right-box_photo photo2 lazy openGalery0" data-bg="{{ str_replace('\\', '/', Storage::url(setting('site.imageEmpty'))) }}">
                        <button class="immobile-page_header_button">
                            <img src="/images/icone-foto.svg" width="26" alt="">
                            <div class="immobile-page_header_button_text">Ver todas as fotos</div>
                        </button>
                    </div>
                @endif
            @endif
        </div>
    </a>

    <div class="immobile-page_content">
        <div class="container">
            <div class="immobile-page_content-box">
                <div class="immobile-page_content_left-box">
                    <h1 class="immobile-page_content_title">{{ $property["TituloSite"] }}</h1>
                    <p class="immobile-page_content_subtitle">{{$property["TipoEndereco"]}} {{ $property["Endereco"] }} -  {{ mb_convert_case($property["Bairro"], MB_CASE_TITLE, 'UTF-8')}}, {{ $property["Cidade"] }}</p>
                    <div class="list-section_item_content_details-list immobile-page_details-list">
                        @if($property["Dormitorios"] != '')
                            <div class="list-section_item_content_details-list_item immobile-page_details-list_item">
                                <img src="/images/cama_icon.svg" width="23" alt="" class="list-section_item_content_details-list_item-icon immobile-page_details-list_item-icon">
                                <div class="list-section_item_content_details-list_item-text immobile-page_details-list_item-number">{{ $property["Dormitorios"] }}</div>
                                @if($property["Dormitorios"] == 1)
                                    <div class="immobile-page_details-list_item-description">dormitório</div>
                                @else
                                    <div class="immobile-page_details-list_item-description">dormitórios</div>
                                @endif
                            </div>
                        @endif
                        @if($property["Vagas"] != '')
                            <div class="list-section_item_content_details-list_item immobile-page_details-list_item">
                                <img src="/images/garage_icon.svg" width="22" alt="" class="list-section_item_content_details-list_item-icon immobile-page_details-list_item-icon">
                                <div class="list-section_item_content_details-list_item-text immobile-page_details-list_item-number">{{$property["Vagas"]}}</div>
                                @if($property["Vagas"] == 1)
                                    <div class="immobile-page_details-list_item-description">vaga p/ carro</div>
                                @else
                                    <div class="immobile-page_details-list_item-description">vagas p/ carro</div>
                                @endif
                            </div>
                        @endif
                        @if($property["AreaTotal"] != '')
                            <div class="list-section_item_content_details-list_item immobile-page_details-list_item">
                                <img src="/images/area_icon.svg" width="23" alt="" class="list-section_item_content_details-list_item-icon immobile-page_details-list_item-icon">
                                <div class="list-section_item_content_details-list_item-text immobile-page_details-list_item-number">{{ $property["AreaTotal"] }}</div>
                                <div class="immobile-page_details-list_item-description">m²</div>
                            </div>
                        @endif
                    </div>
                    <div class="immobile-page_infos-list">
                        <div class="immobile-page_infos-list_title">Valores</div>
                        <div class="immobile-page_infos-list_list">
                            @if($property["ValorLocacao"] != '')
                                <div class="immobile-page_infos-list_list_item">
                                    <div class="immobile-page_infos-list_list_item_title">Aluguel</div>
                                    <div class="immobile-page_infos-list_list_item_value">R$ {{ number_format($property["ValorLocacao"], '2', ',', '.') }}</div>
                                </div>
                            @endif
                            @if($property["ValorCondominio"] != '')
                                <div class="immobile-page_infos-list_list_item">
                                    <div class="immobile-page_infos-list_list_item_title">Condomínio</div>
                                    <div class="immobile-page_infos-list_list_item_value">R$ {{ number_format($property["ValorCondominio"], '2', ',', '.') }}</div>
                                </div>
                            @endif
                            @if($property["ValorIptu"] != '')
                                <div class="immobile-page_infos-list_list_item">
                                    <div class="immobile-page_infos-list_list_item_title">IPTU</div>
                                    <div class="immobile-page_infos-list_list_item_value">R$ {{ number_format($property["ValorIptu"], '2', ',', '.') }}</div>
                                </div>
                            @endif
                            <div class="immobile-page_infos-list_list_divisor"></div>
                            <div class="immobile-page_infos-list_list_item">
                                <div class="immobile-page_infos-list_list_item_title">Valor total</div>
                                <div class="immobile-page_infos-list_list_item_value total">R$ {{ number_format(floatval($property["ValorLocacao"]) + floatval($property["ValorCondominio"]) + floatval($property["ValorIptu"]), '2', ',', '.') }}</div>
                            </div>
                        </div>
                    </div>
                    @if($property["DescricaoWeb"] != '')
                        <h2 class="immobile-page_content_h2">Sobre o imóvel</h2>
                        <p class="immobile-page_content_paragraph">{!! str_replace(["\r\n", "\n"], ["<br>", "<br>"], $property["DescricaoWeb"]) !!}</p>
                    @endif
                    @if($property["DescricaoEmpreendimento"])
                        <h2 class="immobile-page_content_h2">Sobre o condomínio</h2>
                        <p class="immobile-page_content_paragraph">{!! str_replace(["\r\n", "\n"], ["<br>", "<br>"], $property["DescricaoEmpreendimento"]) !!}</p>
                    @endif
                    @if($property["Latitude"] && $property["Longitude"])
                        <h2 class="immobile-page_content_h2">Localização</h2>
                        <div id="detalhes-mapa">
                            <input type="hidden" id="latitude" value="{{ $property["Latitude"] }}">
                            <input type="hidden" id="longitude" value="{{ $property["Longitude"] }}">
                            <br>
                            <div id="mapa"></div>
                        </div>
                    @endif
                </div>
                <div class="immobile-page_content_right-box">
                    <div class="visit-box_header">
                        <img src="/images/casa-blue_icon.svg" width="31" alt="" class="visit-box_header_icon">
                        <div class="visit-box_title">Agende uma visita ao imóvel</div>
                    </div>
                    <div class="visit-box_section_title">Escolha um dia:</div>
                    <div class="visit-box_calendar">
                        <a href="#" class="visit-box_calendar_arrow w-inline-block calendar-left">
                            <img src="/images/arrow-calendario_icon.svg" alt=""></a>
                        <div class="visit-box_calendar_list"></div>
                        <a href="#" class="visit-box_calendar_arrow right w-inline-block calendar-rigth">
                            <img src="/images/arrow-calendario_icon.svg" alt="">
                        </a>
                    </div>
                    <div class="visit-box_calendar_month"></div>
                    <div class="visit-box_section_title">Escolha um horário:</div>
                    <div class="visit-box_time_list">
                        <a href="#" class="visit-box_time_list_item w-inline-block" data-value="09:00">
                            <div class="visit-box_time_list_item_txt">09:00</div>
                        </a>
                        <a  href="#" class="visit-box_time_list_item w-inline-block" data-value="10:00">
                            <div class="visit-box_time_list_item_txt">10:00</div>
                        </a>
                        <a href="#" class="visit-box_time_list_item w-inline-block" data-value="11:00">
                            <div class="visit-box_time_list_item_txt">11:00</div>
                        </a>
                        <a href="#" class="visit-box_time_list_item w-inline-block" data-value="14:00">
                            <div class="visit-box_time_list_item_txt">14:00</div>
                        </a>
                        <a href="#" class="visit-box_time_list_item w-inline-block" data-value="15:00">
                            <div class="visit-box_time_list_item_txt">15:00</div>
                        </a>
                        <a href="#" class="visit-box_time_list_item w-inline-block" data-value="16:00">
                            <div class="visit-box_time_list_item_txt">16:00</div>
                        </a>
                    </div>
                    <a href="#" id="visitButton" class="button visit-button w-inline-block">
                        <div>Agendar Visita</div>
                    </a>
                </div>
            </div>
        </div>
    </div>
    <div class="finish-modal" id="finish-modal">
        <div class="finish-modal_box">
            <div class="visit-box_title">Para finalizar, informe<br>seu nome, email e telefone</div>
            <div class="finish-modal_box_subtitle">Enviaremos para o seu e-mail a confirmação do agendamento da visita.</div>
            <div class="finish-modal_box_form-block w-form">
                <form id="shedule" name="shedule"  class="finish-modal_box_form-block_form" action="{{ route('schedule.store') }}" method="POST">
                    @csrf
                    <input type="hidden" name="date" id="date">
                    <input type="hidden" name="time" id="time">
                    <input type="hidden" name="property" value="{{ $property["Codigo"] }}">
                    <div class="finish-modal_box_form-block_item">
                        <img src="/images/form-user_icon.svg" width="16" alt="" class="finish-modal_box_form-block_item_icon">
                        <input type="text" class="finish-modal_box_form-block_item_input w-input" maxlength="256" name="name" data-name="name" placeholder="Nome" required>
                    </div>
                    <div class="finish-modal_box_form-block_item">
                        <img src="/images/form-email_icon.svg" width="16" alt="" class="finish-modal_box_form-block_item_icon email">
                        <input type="text" class="finish-modal_box_form-block_item_input w-input" maxlength="256" name="email" data-name="email" placeholder="E-mail">
                    </div>
                    <div class="finish-modal_box_form-block_item">
                        <img src="/images/form-phone_icon.svg" width="16" alt="" class="finish-modal_box_form-block_item_icon email">
                        <input type="text" class="finish-modal_box_form-block_item_input w-input phone_with_ddd" maxlength="256" name="phone" data-name="Email 4" placeholder="WhatsApp e/ou Telefone" required>
                    </div>
                    <button type="submit" class="button w-button button-100" id="submit-schedule">Finalizar</button>
                </form>
            </div>
        </div>
    </div>

    <div class="finish-modal-error" id="finish-modal-error">
        <div class="finish-modal_box">
            <div class="visit-box_title">Para continuar, informe<br>um dia e uma hora primeiramente</div>
        </div>
    </div>

    <div class="finish-modal-success-submit" id="finish-modal-success-submit">
        <div class="finish-modal_box">
            <div class="visit-box_title">Agendamento realizado com sucesso!<br>Em breve entraremos em contato com você!</div>
        </div>
    </div>

    <div class="finish-modal-error-submit" id="finish-modal-error-submit">
        <div class="finish-modal_box">
            <div class="visit-box_title">Não foi possivel realizar o agendamento<br>Tente novamente</div>
        </div>
    </div>
@endsection

@section('extra_scripts')
    <script type="text/javascript">
        var map;
        function initMap() {
            map = new google.maps.Map(document.getElementById("mapa"), {
                center: {lat: parseFloat($('#latitude').val()), lng: parseFloat($('#longitude').val())},
                zoom: 15
            });
            // Create marker
            var marker = new google.maps.Marker({
                map: map,
                position: new google.maps.LatLng(parseFloat($('#latitude').val()), parseFloat($('#longitude').val())),
                visible: true,
            });

            // Add circle overlay and bind to marker
            // var circle = new google.maps.Circle({
            //     map: map,
            //     radius: 600,    // 10 miles in metres
            //     fillColor: '#4b4b4b'
            // });
            // circle.bindTo('center', marker, 'position');
        }
    </script>
    <script src="https://maps.googleapis.com/maps/api/js?key={{ setting('site.js_maps') }}&callback=initMap"
            async defer></script>
@endsection