@extends('layout.site')
@section('title', '')
@section('canonical', '')

@section('content')
<div class="section-home">
    <div class="slider">
        <div class="book-motor-area">
            <div class="container-fluid">
                <div class="row justify-content-center">
                    <div class="col-12">
                        <form action="https://book.omnibees.com/hotelresults?q=1119" method="get" target="_blank">
                            <input type="hidden" name="q" value="1119">
                            <input type="hidden" name="lang" value="{{ str_replace('_', '-', app()->getLocale()) }}">
                            <div class="title">{!! __('structure.make-your-reservation') !!}</div>
                            <div class="book-motor">
                                <div class="book-form-group ">
                                    <label for="fieldCheckin">Check-in</label>
                                    <div class="book-form-input">
                                        <i class="icon icon-calendar"></i>
                                        <input type="text" name="CheckIn" id="fieldCheckin" value="{{ now()->format('dmY') }}">
                                        <div id="labelCheckin" class="text-lowercase">
                                            {{ now()->format('d') }}, {{ __('structure.month.'.now()->addDays(1)->format('M'))}}, {{ now()->format('Y') }}
                                        </div>
                                    </div>
                                </div>
                                <div class="book-form-group ">
                                    <label for="fieldCheckOut">Check-out</label>
                                    <div class="book-form-input">
                                        <i class="icon icon-calendar"></i>
                                        <input type="text" name="CheckOut" id="fieldCheckout" value="{{ now()->addDays(1)->format('dmY') }}">
                                        <div id="labelCheckout" class="text-lowercase">
                                            {{ now()->addDays(1)->format('d') }}, {{ __('structure.month.'.now()->addDays(1)->format('M'))}}, {{ now()->addDays(1)->format('Y') }}
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-6">
                                        <div class="book-form-group labelAdult">
                                            <label for="fieldAdult">{!! __('structure.adults') !!}</label>
                                            <div class="book-form-input">
                                                <div class="guest-input">
                                                    <button type="button" class="guest-button" data-type="minus" data-id="fieldAdult"><img src="{{ asset('assets/site/img/ico-minus.png') }}" class="img-fluid"></button>
                                                    <input type="text" min="1" value="1" name="ad" id="fieldAdult">
                                                    <button type="button" class="guest-button plus" data-type="more" data-id="fieldAdult"><img src="{{ asset('assets/site/img/ico-plus.png') }}" class="img-fluid"></button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-6">
                                        <div class="book-form-group labelChildren">
                                            <label for="fieldChild">{!! __('structure.childs') !!}</label>
                                            <div class="book-form-input">
                                                <div class="guest-input">
                                                    <button type="button" class="guest-button" data-type="minus" data-id="fieldChild"><img src="{{ asset('assets/site/img/ico-minus.png') }}" class="img-fluid"></button>
                                                    <input type="text" min="0" value="0" name="ch" id="fieldChild">
                                                    <button type="button" class="guest-button plus" data-type="more" data-id="fieldChild"><img src="{{ asset('assets/site/img/ico-plus.png') }}" class="img-fluid"></button>

                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="row justify-content-end child-ages">
                                    <input type="hidden" name="ag" id="ag">
                                    <div class="col-6 text-center">
                                        <div class="">{!! __('structure.child-ages') !!}</div>
                                        <div class="ages">
                                            <div class="line d-flex align-items-center mb-3">
                                                <label>{!! __('structure.child') !!} <span class="num">1</span></label>
                                                <select name="age" class="form-select form-select-sm ms-2 pe-1" style="width: 50%;">
                                                    <option value="0">0 anos</option>
                                                    <option value="1">1 ano</option>
                                                    <option value="2">2 anos</option>
                                                    <option value="3">3 anos</option>
                                                    <option value="4">4 anos</option>
                                                    <option value="5">5 anos</option>
                                                    <option value="6">6 anos</option>
                                                    <option value="7">7 anos</option>
                                                    <option value="8">8 anos</option>
                                                    <option value="9">9 anos</option>
                                                    <option value="10">10 anos</option>
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="book-form-group ">
                                    <label for="fieldCoupon">{!! __('structure.have-coupon') !!}</label>
                                    <div class="book-form-input">
                                        <input type="text" name="Code" id="fieldCoupon" placeholder="{!! __('structure.code-coupon') !!}">
                                    </div>
                                </div>
                                <div class="book-form-group submit-group mt-3">
                                    <input type="submit" value="{!! __('structure.see-availability') !!}" class="btn book-submit">
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        <div id="carouselHomeMain" class="carousel slide" data-bs-ride="carousel">
            <div class="carousel-inner">
                @foreach($home_slides as $key=>$item)
                <div class="carousel-item @if($key==0)active @endif">
                    @php
                    $slide = $item->image_web;
                    if($dispositive == 'tablet'){ $slide = $item->image_tablet; }
                    if($dispositive == 'mobile'){ $slide = $item->image_mobile; }
                    @endphp
                    @if($item->link) <a href="{{ $item->link }}">@endif
                        <img src="{{ base_url('assets/site/img/slide/'.$slide) }}" class="d-block w-100">
                        @if($item->link)</a> @endif
                </div>
                @endforeach
            </div>
        </div>
    </div>
    <div class="promotions">
        <div class="container-fluid">
            <div class="row justify-content-center">
                <div class="col-lg-10 px-4">
                    <div class="section-title text-uppercase text-center pb-5">{!! __('structure.promotions') !!}</div>
                    <div class="carousel-promotions owl-carousel owl-theme">
                        @foreach($promotions as $promotion)
                        <div class="item p-0">
                            <figure>
                                <a href="{{ url('promocao/'.$promotion->url) }}"><img src="{{ base_url('assets/site/img/promotion/'.$promotion->image_call) }}" width="100%"></a>
                            </figure>
                            <div class="caption">
                                <div class="title py-2">{!! $promotion->name !!}</div>
                                <div class="description">{!! $promotion->call !!}</div>
                                <div class="link mt-3 text-lowercase">
                                    <a href="{{ url('promocao/'.$promotion->url) }}">{!! __('structure.more-details') !!}</a>
                                </div>
                            </div>
                        </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="rooms">
        <div class="container-fluid">
            <div class="row justify-content-center">
                <div class="col-lg-10 px-4">
                    <div class="section-title text-uppercase text-center pb-2">{!! __('structure.apartments') !!}</div>
                    <div class="section-subtitle text-center pb-5">{!! __('structure.apartments-subtitle') !!}</div>
                    <div class="carousel-promotions owl-carousel owl-theme">
                        @foreach($rooms as $room)
                        <div class="item p-0">
                            <figure>
                                <a href="{{ url('acomodacao/'.$room->url) }}"><img src="{{ base_url('assets/site/img/room/'.$room->image_call) }}" width="100%"></a>
                            </figure>
                            <div class="caption">
                                <div class="title py-2">{!! $room->name !!}</div>
                                <div class="description">{!! $room->call !!}</div>
                                <div class="link mt-3 text-lowercase">
                                    <a href="{{ url('acomodacao/'.$room->url) }}">{!! __('structure.more-details') !!}</a>
                                </div>
                            </div>
                        </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="events">
        <div class="container-fluid">
            <div class="row justify-content-center">
                <div class="col-lg-6 text-center">
                    <div class="section-title text-uppercase text-white pb-4">{!! __('structure.events') !!}</div>
                    <div class="text-center pb-4">{!! $home_content['events'][app()->getLocale()] !!}</div>
                    <div class="button mt-4">
                        <a href="{{ url('/eventos#agende') }}">{!! __('structure.schedule-your-event') !!}</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="reviews">
        <div class="container-fluid">
            <div class="row justify-content-center">
                <div class="col-lg-7 justify-content-center text-center">
                    <div class="reviews-controls">
                        <button class="carousel-prev" type="button">
                            <span class="visually-hidden ">Previous</span>
                        </button>
                        <button class="carousel-next" type="button">
                            <span class="visually-hidden">Next</span>
                        </button>
                    </div>
                    <div class="title">{!! __('structure.reviews') !!}</div>
                    <div id="carouselReview" class="carousel slide" data-bs-ride="carousel">
                        <div class="carousel-inner">
                            @foreach($reviews as $key=>$review)
                            <div class="carousel-item @if($key==0) active @endif">
                                <div class="author">
                                    <b>{!! $review->name !!}</b>
                                </div>
                                <div class="score">
                                    @for($i=0; $i<5; $i++) @if($i < $review->star)
                                        <div class="green"></div>
                                        @else
                                        <div class="grey"></div>
                                        @endif
                                        @endfor
                                </div>
                                <div class="comment">
                                    "{!! $review->comment !!}"
                                </div>
                            </div>
                            @endforeach
                        </div>
                        <div class="tripadvidor">
                            <div class="mb-3">
                                <img src="{{ base_url('assets/site/img/tripadvidor-logo.svg') }}" width="48">
                            </div>
                            {!! __('structure.see-other-reviews-at') !!} <a href="https://www.tripadvisor.com.br/UserReviewEdit-g303444-d307938-Hotel_Continental_4Soul-Foz_do_Iguacu_State_of_Parana.html" target="_blank">TripAdvisor</a>.
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="petfriendly">
        <div class="container-fluid">
            <div class="row justify-content-end">
                <div class="col-lg-5">
                    <div class="title pb-4">{!! __('structure.are-pet') !!}</div>
                    <div class="description pb-4">{!! $home_content['petfriendly'][app()->getLocale()] !!}</div>
                    <div class="button mt-2">
                        <a href="{{ url('/politica-pet-friendly') }}">{!! __('structure.pet-policy') !!}</a>
                    </div>
                </div>
                <div class="col-lg-1"></div>
            </div>
        </div>
    </div>
    <div class="blog">
        <div class="container-fluid">
            <div class="row justify-content-center">
                <div class="col-lg-10 pe-lg-0">
                    <div class="row">
                        <div class="col-lg-4 ps-lg-0">
                            <div class="blog-soul">
                                <div class="title mb-3">Blog Rede Soul</div>
                                <div class="description d-none d-lg-block">{!! $home_content['blog'][app()->getLocale()] !!}</div>
                                <div class="button d-none d-lg-block mt-4">
                                    <a href="{{ base_url('blog') }}">{!! __('structure.see-all-articles') !!}</a>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-8 ps-lg-5 pe-lg-0">
                            <div class="carousel-blog owl-carousel owl-theme">
                                @foreach($articles as $key=>$article)
                                <div class="item p-0">
                                    <figure>
                                        <img src="{{ base_url('assets/site/img/blog/'.$article->call_image) }}" width="100%">
                                    </figure>
                                    <div class="caption">
                                        <div class="title">{!! $article->name !!}</div>
                                        <div class="description">
                                            {!! $article->call !!}
                                        </div>
                                        <div class="link mt-3">
                                            <a href="{{ base_url('blog/'.$article->url) }}">{!! __('structure.see-full-article') !!}</a>
                                        </div>
                                    </div>
                                </div>
                                @endforeach
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    @include('site.widget-location')
</div>
@endsection

@section('script')
<link rel="stylesheet" href="{{ asset('assets/site/css/carousel.css') }}">
<script src="{{ asset('assets/site/js/carousel.js') }}"></script>
<script src="{{ asset('assets/site/js/datepicker.js') }}"></script>
<script src="{{ asset('assets/site/js/book.js') }}"></script>
<link rel="stylesheet" href="{{ asset('assets/site/css/datepicker.css') }}">
<script src='https://api.mapbox.com/mapbox-gl-js/v2.9.1/mapbox-gl.js'></script>
<link href='https://api.mapbox.com/mapbox-gl-js/v2.9.1/mapbox-gl.css' rel='stylesheet' />
<script src="{{ asset('assets/site/js/maps.js') }}"></script>
<script>
    var CheckIn = $('#fieldCheckin').datepicker({
        startDate: 'today',
        language: '{{ str_replace('
        _ ', ' - ', app()->getLocale()) }}',
        format: 'ddmmyyyy'
    });
    var CheckOut = $('#fieldCheckout').datepicker({
        startDate: '+1d',
        language: '{{ str_replace('
        _ ', ' - ', app()->getLocale()) }}',
        format: 'ddmmyyyy'
    });
</script>
@endsection