@extends('layouts.public')

@section('title') {{ trans('seo.title.index') }} @endsection
@section('description') {{ trans('seo.description.index') }} @endsection
@section('image', asset('images/social-share.jpg'))

@section('content')
    <section class="section-slider height-v">
        <div id="index12" class="owl-carousel owl-theme">
            <div class="item">
                <img alt="Apartmani Šoštarić - Sali, Dugi otok" src="/images/slider1.jpg" class="img-responsive">
            </div>
            <div class="item">
                <img alt="Apartmani Šoštarić - Sali, Dugi otok" src="/images/slider2.jpg" class="img-responsive">
            </div>
            <div class="item">
                <img alt="Apartmani Šoštarić - Sali, Dugi otok" src="/images/slider3.jpg" class="img-responsive">
            </div>
        </div>
        {!! Form::open(['route' => 'public.reservation-mail', 'id' => 'booking-form']) !!}
        <div class="check-avail">
            <div class="container">
                <div class="arrival date-title ">
                    <label>{!! trans('index.form.email') !!}</label>
                    <div class="input-group date">
                        <input type="email" name="email" class="form-control" placeholder="{!! trans('index.form.email-placeholder') !!}" required>
                        <span class="input-group-addon"><img src="/images/icons/email.png" alt="Apartmani Šoštarić - Sali, Dugi otok"></span>
                    </div>
                </div>
                <div class="arrival date-title ">
                    <label>{!! trans('index.form.check-in-date') !!}</label>
                    <div id="datepicker" class="input-group date">
                        <input type="text" name="start_date" class="form-control" autocomplete="off" readonly>
                        <span class="input-group-addon"><img src="/images/icons/date-icon.png" alt="Apartmani Šoštarić - Sali, Dugi otok"></span>
                    </div>
                </div>
                <div class="departure date-title ">
                    <label>{!! trans('index.form.check-out-date') !!}</label>
                    <div id="datepickeri" class="input-group date">
                        <input type="text" name="end_date" class="form-control" autocomplete="off" readonly>
                        <span class="input-group-addon"><img src="/images/icons/date-icon.png" alt="Apartmani Šoštarić - Sali, Dugi otok"></span>
                    </div>
                </div>
                <input type="hidden" name="persons" id="persons" value="2">
                <div class="adults date-title ">
                    <label>{!! trans('index.form.guests') !!}</label>
                    <div class=" carousel-search">
                        <div class="btn-group">
                            <a class="btn dropdown-toggle " data-toggle="dropdown" href="#">2</a>
                            <ul class="dropdown-menu">
                                <li><a>1</a></li>
                                <li><a>2</a></li>
                                <li><a>3</a></li>
                                <li><a>4</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="check_email">
                    <label for="check_email">Email address</label>
                    <input class="text" name="check_email" type="text" id="check_email">
                </div>
                <button class="find_btn date-title">
                    <span class="text-find">
                        {!! trans('index.form.button') !!}
                    </span>
                </button>
            </div>
        </div>
        {!! Form::close() !!}
    </section>

    <section class="about">
        <div class="container">
            <div class="row">
                <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
                    <div class="about-centent">
                        <h2 class="about-title">{!! trans('index.about.title') !!}</h2>
                        <div class="line"></div>
                        <p class="about-p">{!! trans('index.about.text1') !!}</p>
                        <p class="about-p1">{!! trans('index.about.text2') !!}</p>
                        <a href="{{ route('public.about-us') }}" class="read-more">{!! trans('index.about.button') !!}</a>
                    </div>
                </div>
                <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
                    <div class="about-img">
                        <div class="img-1">
                            <img src="/images/about-3.jpg" class="img-responsive" alt="Apartmani Šoštarić - Sali, Dugi otok">
                            <div class="img-2">
                                <img src="/images/about-2.jpg" class="img-responsive" alt="Apartmani Šoštarić - Sali, Dugi otok">
                            </div>
                            <div class="img-3">
                                <img src="/images/about-1.jpg" class="img-responsive" alt="Apartmani Šoštarić - Sali, Dugi otok">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="best">
        <div class="container">
            <div class="row">
                <div class="col-xs-6 col-sm-3 col-md-3 col-lg-3">
                    <div class="wrap-best">
                        <div class="icon-best">
                            <img src="/images/icons/sea.png" class="img-responsive" alt="Apartmani Šoštarić - Sali, Dugi otok">
                        </div>
                        <h6 class="sky-h6">{!! trans('index.features.sea-view') !!}</h6>
                    </div>
                </div>
                <div class="col-xs-6 col-sm-3 col-md-3 col-lg-3">
                    <div class="wrap-best">
                        <div class="icon-best">
                            <img src="/images/icons/sunset.png" class="img-responsive" alt="Apartmani Šoštarić - Sali, Dugi otok">
                        </div>
                        <h6 class="sky-h6">{!! trans('index.features.sea-front') !!}</h6>
                    </div>
                </div>
                <div class="col-xs-6 col-sm-3 col-md-3 col-lg-3">
                    <div class="wrap-best">
                        <div class="icon-best">
                            <img src="/images/icons/parking.png" class="img-responsive" alt="Apartmani Šoštarić - Sali, Dugi otok">
                        </div>
                        <h6 class="sky-h6">{!! trans('index.features.parking') !!}</h6>
                    </div>
                </div>
                <div class="col-xs-6 col-sm-3 col-md-3 col-lg-3">
                    <div class="wrap-best">
                        <div class="icon-best">
                            <img src="/images/icons/wifi.png" class="img-responsive" alt="Apartmani Šoštarić - Sali, Dugi otok">
                        </div>
                        <h6 class="sky-h6">{!! trans('index.features.wifi') !!}</h6>
                    </div>
                </div>
                <div class="col-xs-6 col-sm-3 col-md-3 col-lg-3">
                    <div class="wrap-best">
                        <div class="icon-best">
                            <img src="/images/icons/air-conditioner.png" class="img-responsive" alt="Apartmani Šoštarić - Sali, Dugi otok">
                        </div>
                        <h6 class="sky-h6">{!! trans('index.features.aircon') !!}</h6>
                    </div>
                </div>
                <div class="col-xs-6 col-sm-3 col-md-3 col-lg-3">
                    <div class="wrap-best">
                        <div class="icon-best">
                            <img src="/images/icons/television.png" class="img-responsive" alt="Apartmani Šoštarić - Sali, Dugi otok">
                        </div>
                        <h6 class="sky-h6">{!! trans('index.features.sat-tv') !!}</h6>
                    </div>
                </div>
                <div class="col-xs-6 col-sm-3 col-md-3 col-lg-3">
                    <div class="wrap-best">
                        <div class="icon-best">
                            <img src="/images/icons/bbq.png" class="img-responsive" alt="Apartmani Šoštarić - Sali, Dugi otok">
                        </div>
                        <h6 class="sky-h6">{!! trans('index.features.grill') !!}</h6>
                    </div>
                </div>
                <div class="col-xs-6 col-sm-3 col-md-3 col-lg-3">
                    <div class="wrap-best">
                        <div class="icon-best">
                            <img src="/images/icons/table-tennis.png" class="img-responsive" alt="Apartmani Šoštarić - Sali, Dugi otok">
                        </div>
                        <h6 class="sky-h6">{!! trans('index.features.table-tennis') !!}</h6>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="rooms">
        <div class="container">
            <h2 class="title-room">{!! trans('index.apartments.title') !!}</h2>
            <div class="outline"></div>
            <p class="rooms-p">{!! trans('index.apartments.subtitle') !!}</p>
            <div class="wrap-rooms">
                <div class="row">
                    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 ">
                        <div class="wrap-box">
                            <div class="box-img">
                                <a href="{{ route('public.apartment1') }}"><img src="/images/studio-2.jpg" class="img-responsive" alt="Apartmani Šoštarić - Sali, Dugi otok" title="Apartmani Šoštarić - Sali, Dugi otok"></a>
                            </div>
                            <div class="rooms-content">
                                <a href="{{ route('public.apartment1') }}">
                                    <h4 class="sky-h4">{!! trans('index.apartment1.title') !!}</h4>
                                </a>
                                <p class="price">{!! trans('index.apartment1.subtitle') !!}</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 ">
                        <div class="wrap-box">
                            <div class="box-img">
                                <a href="{{ route('public.apartment2') }}"><img src="/images/studio-3-1.jpg" class="img-responsive" alt="Apartmani Šoštarić - Sali, Dugi otok" title="Apartmani Šoštarić - Sali, Dugi otok"></a>
                            </div>
                            <div class="rooms-content">
                                <a href="{{ route('public.apartment2') }}">
                                    <h4 class="sky-h4">{!! trans('index.apartment2.title') !!}</h4>
                                </a>
                                <p class="price">{!! trans('index.apartment2.subtitle') !!}</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 ">
                        <div class="wrap-box">
                            <div class="box-img">
                                <a href="{{ route('public.apartment3') }}"><img src="/images/apartman-a.jpg" class="img-responsive" alt="Apartmani Šoštarić - Sali, Dugi otok" title="Apartmani Šoštarić - Sali, Dugi otok"></a>
                            </div>
                            <div class="rooms-content">
                                <a href="{{ route('public.apartment3') }}">
                                    <h4 class="sky-h4">{!! trans('index.apartment3.title') !!}</h4>
                                </a>
                                <p class="price">{!! trans('index.apartment3.subtitle') !!}</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 ">
                        <div class="wrap-box">
                            <div class="box-img">
                                <a href="{{ route('public.apartment4') }}"><img src="/images/apartman-b.jpg" class="img-responsive" alt="Apartmani Šoštarić - Sali, Dugi otok" title="Apartmani Šoštarić - Sali, Dugi otok"></a>
                            </div>
                            <div class="rooms-content">
                                <a href="{{ route('public.apartment4') }}">
                                    <h4 class="sky-h4">{!! trans('index.apartment4.title') !!}</h4>
                                </a>
                                <p class="price">{!! trans('index.apartment4.subtitle') !!}</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="testimonials">
        <div class="testimonials-h">
            <div class="testimonials-content">
                <div class="container">
                    <div id="testimonials" class="owl-carousel owl-theme">
                        <div class="item ">
                            <p class="testimonials-p"><span>“</span>​‌ {!! trans('index.testimonial1.text') !!} <span>​‌​‌”</span></p>
                            <h5 class="sky-h5">{!! trans('index.testimonial1.name') !!}</h5>
                            <p class="testimonials-p1">{!! trans('index.testimonial1.location') !!}</p>
                        </div>
                        <div class="item">
                            <p class="testimonials-p"><span>“</span>​‌ {!! trans('index.testimonial2.text') !!} <span>​‌​‌”</span></p>
                            <h5 class="sky-h5">{!! trans('index.testimonial2.name') !!}</h5>
                            <p class="testimonials-p1">{!! trans('index.testimonial2.location') !!}</p>
                        </div>
                        <div class="item">
                            <p class="testimonials-p"><span>“</span>​‌ {!! trans('index.testimonial3.text') !!} <span>​‌​‌”</span></p>
                            <h5 class="sky-h5">{!! trans('index.testimonial3.name') !!}</h5>
                            <p class="testimonials-p1">{!! trans('index.testimonial3.location') !!}</p>
                        </div>
                        <div class="item">
                            <p class="testimonials-p"><span>“</span>​‌ {!! trans('index.testimonial4.text') !!} <span>​‌​‌”</span></p>
                            <h5 class="sky-h5">{!! trans('index.testimonial4.name') !!}</h5>
                            <p class="testimonials-p1">{!! trans('index.testimonial4.location') !!}</p>
                        </div>
                        <div class="item">
                            <p class="testimonials-p"><span>“</span>​‌ {!! trans('index.testimonial5.text') !!} <span>​‌​‌”</span></p>
                            <h5 class="sky-h5">{!! trans('index.testimonial5.name') !!}</h5>
                            <p class="testimonials-p1">{!! trans('index.testimonial5.location') !!}</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="events">
        <div class="container">
            <h2 class="events-title">{!! trans('index.tours') !!}</h2>
            <div class="line"></div>
            <div id="events-v2" class="owl-carousel owl-theme">
                @foreach ($pages as $page)
                    <div class="item ">
                        <div class="events-item">
                            <div class="events-img"><a href="{{ route($page->name) }}"><img src="{{ asset($page->thumbnail) }}" class="img-responsive" alt="{{ $page->title }}"></a></div>
                            <div class="events-content">
                                <a href="{{ route($page->name) }}" title="{{ $page->title }}">
                                    <h3 class="sky-h3">{{ $page->title }}</h3>
                                </a>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </section>

    <section class="section-slider  text-center section-slider-v3">
        <div class="container">
            <div id="index122" class="owl-carousel  owl-theme">
                <div class="item">
                    <div class="wrap-best wrap-best-v3 text-uppercase">
                        <div class="icon-best">
                            <a href="http://www.dugiotok.hr/" target="_blank"><img src="/images/icon-dugi-otok.png" class="img-responsive" alt="Turistička zajednica Dugi otok - Apartmani Šoštarić - Sali, Dugi otok"></a>
                        </div>
                    </div>
                </div>
                <div class="item">
                    <div class="wrap-best wrap-best-v3 text-uppercase">
                        <div class="icon-best">
                            <a href="http://www.zadar.hr/" target="_blank"><img src="/images/icon-zadar-region.png" class="img-responsive" alt="Turistička zajednica grada Zadra - Apartmani Šoštarić - Sali, Dugi otok"></a>
                        </div>
                    </div>
                </div>
                <div class="item">
                    <div class="wrap-best wrap-best-v3 text-uppercase">
                        <div class="icon-best">
                            <a href="https://www.croatia.hr/" target="_blank"><img src="/images/icon-croatia.png" class="img-responsive" alt="Croatia Full Of Life - Apartmani Šoštarić - Sali, Dugi otok"></a>
                        </div>
                    </div>
                </div>
                <div class="item">
                    <div class="wrap-best wrap-best-v3 text-uppercase">
                        <div class="icon-best">
                            <a href="https://www.jadrolinija.hr/" target="_blank"><img src="/images/jadrolinija-logo.jpg" class="img-responsive" alt="Jadrolinija - Apartmani Šoštarić - Sali, Dugi otok"></a>
                        </div>
                    </div>
                </div>
                <div class="item">
                    <div class="wrap-best wrap-best-v3 text-uppercase">
                        <div class="icon-best">
                            <a href="https://www.zadar-airport.hr/" target="_blank"><img src="/images/zadar-airport.png" class="img-responsive" alt="Zračna luka Zadar - Apartmani Šoštarić - Sali, Dugi otok"></a>
                        </div>
                    </div>
                </div>
                <div class="item">
                    <div class="wrap-best wrap-best-v3 text-uppercase">
                        <div class="icon-best">
                            <a href="http://meteo.hr/" target="_blank"><img src="/images/dhmz.png" class="img-responsive" alt="Državni hidrometeorološki zavod - Apartmani Šoštarić - Sali, Dugi otok"></a>
                        </div>
                    </div>
                </div>
                <div class="item">
                    <div class="wrap-best wrap-best-v3 text-uppercase">
                        <div class="icon-best">
                            <a href="https://gv-zadar.hr/" target="_blank"><img src="/images/gvline.jpg" class="img-responsive" alt="GV Line Jadera - Apartmani Šoštarić - Sali, Dugi otok"></a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

@endsection