@extends('layouts.public')

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

@section('content')
    <section class="banner-tems text-center">
        <div class="container">
            <div class="banner-content">
                <h1>{!! trans('contact.title') !!}</h1>
                <p>{!! trans('contact.subtitle') !!}</p>
            </div>
        </div>
    </section>
    <section class="section-contact">
        <div class="container">
            <div class="contact">
                <div class="row">
                    <div class="col-md-6 col-lg-5">
                        <div class="text">
                            <h2>{!! trans('contact.contact-info') !!}</h2>
                            <ul>
                                <li><i class="fa fa-user"></i>Lidija Šoštarić</li>
                                <li><i class="fa ion-ios-location-outline"></i>Sali II/89, Sali, Dugi otok</li>
                                <li><i class="fa fa-phone" aria-hidden="true"></i><a href="tel:+38523377050">+385 23 377 050</a></li>
                                <li><i class="fa fa-mobile" aria-hidden="true"></i><a href="tel:+385915793291">+385 91 579 3291</a></li>
                                <li><i class="fa fa-envelope-o" aria-hidden="true"></i><a href="mailto:bsostaric@gmail.com">bsostaric@gmail.com</a></li>
                                <li>
                                    <i class="fa fa-share-alt" aria-hidden="true"></i>
                                    <a href="https://www.facebook.com/apartmanisostaric/" target="_blank"><i class="fa fa-facebook"></i></a>
                                    <a href="https://www.instagram.com/apartmani_sostaric/" target="_blank"><i class="fa fa-instagram"></i></a>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="col-md-6 col-lg-6 col-lg-offset-1">
                        <div class="contact-form">
                            {!! Form::open(['route' => 'public.mail']) !!}
                            <div class="row">
                                <div class="col-sm-6">
                                    <input type="text" class="field-text" name="name" placeholder="{!! trans('contact.form.name') !!} *" required="required">
                                </div>
                                <div class="col-sm-6">
                                    <input type="email" class="field-text" name="email" placeholder="{!! trans('contact.form.email') !!}  *" required="required">
                                </div>
                                <div class="col-sm-12">
                                    <textarea cols="30" rows="10" name="message" class="field-textarea" placeholder="{!! trans('contact.form.message') !!}  *" required="required"></textarea>
                                </div>
                                <div class="col-sm-12">
                                    <input type="checkbox" name="gdpr" required> {!! trans('contact.form.gdpr', ['link' => route('public.privacy-policy')]) !!}
                                </div>
                                <div class="check_email">
                                    <label for="check_email">Email address</label>
                                    <input class="text" name="check_email" type="text" id="check_email">
                                </div>
                                <div class="col-sm-6">
                                    <button type="submit" class="btn btn-room">{!! trans('contact.form.button') !!} </button>
                                </div>
                            </div>
                            {!! Form::close() !!}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section class="section-contact how-to-reach-us">
        <div class="container">
            <div class="contact">
                <div class="row">
                    <div class="col-md-12">
                        <div class="text">
                            <h2>{!! trans('contact.find-us.title') !!}</h2>
                        </div>
                    </div>
                </div>
                <br>
                <div class="row">
                    <div class="col-md-6 col-lg-6">
                        <div class="icon-best">
                            <img src="/images/icons/taxi.png" class="img-responsive" alt="Kako do nas - Apartmani Šoštarić - Sali, Dugi otok">
                        </div>
                        <div class="text">
                            <p>{!! trans('contact.find-us.car.text1') !!}</p>
                            <p>{!! trans('contact.find-us.car.text2') !!}</p>
                            <p>{!! trans('contact.find-us.car.text3') !!}</p>
                        </div>
                    </div>
                    <div class="col-md-6 col-lg-6">
                        <div class="icon-best">
                            <img src="/images/icons/cruise.png" class="img-responsive" alt="Kako do nas - Apartmani Šoštarić - Sali, Dugi otok">
                        </div>
                        <div class="text">
                            <p>{!! trans('contact.find-us.ferry.text1') !!}</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section class="section-guest-book">
        <div class="container">
            <div class="guest-book">
                <div class="guest-book_head guest-book_head-2 text-center">
                    <div class="text">
                        <h2>{!! trans('contact.transfer.title') !!}</h2>
                        <p>{!! trans('contact.transfer.text') !!}</p>
                        <button type="button" class="btn btn-room" data-toggle="modal" data-target="#exampleModal" data-whatever="@getbootstrap">{!! trans('contact.transfer.button') !!}</button>
                        <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
                            <div class="modal-dialog" role="document">
                                <div class="modal-content">
                                    <div class="modal-header text-center">
                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true"><i class="ion-ios-close-empty" aria-hidden="true"></i></span></button>
                                        <h2 class="modal-title" id="exampleModalLabel">{!! trans('contact.transfer.form.title') !!}</h2>
                                    </div>
                                    {!! Form::open(['route' => 'public.reservation-mail']) !!}
                                    <input type="hidden" name="transfer" value="">
                                    <div class="modal-body">
                                        <div class="form-group">
                                            <input class="form-control" type="text" name="name" value="" placeholder="{!! trans('contact.transfer.form.name') !!} *" required>
                                            <input class="form-control" type="email" name="email" value="" placeholder="{!! trans('contact.transfer.form.email') !!} *" required>
                                            <input class="form-control" type="text" name="date" value="" placeholder="{!! trans('contact.transfer.form.date') !!} *" required>
                                            <input class="form-control" type="text" name="pick_up_address" value="" placeholder="{!! trans('contact.transfer.form.address') !!} *" required>
                                            <input class="form-control" type="text" name="persons" value="" placeholder=" {!! trans('contact.transfer.form.passengers') !!} *" required>
                                            <textarea name="message" class="form-control" rows="4" placeholder="{!! trans('contact.transfer.form.message') !!} *" style="height: 100px;" required></textarea>
                                            <div class="check_email">
                                                <label for="check_email">Email address</label>
                                                <input class="text" name="check_email" type="text" id="check_email">
                                            </div>
                                            <br>
                                            <div>
                                                <input type="checkbox" name="gdpr" required> {!! trans('contact.transfer.form.gdpr', ['link' => route('public.privacy-policy')]) !!}
                                            </div>
                                        </div>
                                    </div>
                                    <div class="modal-footer">
                                        <button type="submit" class="btn btn-room">{!! trans('contact.transfer.form.button') !!}</button>
                                    </div>
                                    {!! Form::close() !!}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <div class="section-map">
        <iframe src="https://www.google.com/maps/embed?pb=!1m30!1m12!1m3!1d3441.4421811349366!2d15.163749163777213!3d43.93708185028783!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!4m15!3e0!4m5!1s0x1334ac4dec3181bd%3A0x281f8c33988ae39d!2zQXBhcnRtYW5pIMWgb8WhdGFyacSHLCAyMzI4MSwgU2FsaQ!3m2!1d43.9370336!2d15.167985199999999!4m3!3m2!1d43.936154099999996!2d15.165153499999999!4m3!3m2!1d43.9347127!2d15.165137099999999!5e0!3m2!1shr!2shr!4v1626686783731!5m2!1shr!2shr" width="100%" height="470" style="border:0;display: block;" allowfullscreen="" loading="lazy"></iframe>
    </div>
@endsection