@extends('layouts.web')

@section('title', webText('contact.pageTitle'))
@section('class', 'page--contact')

@section('content')

    <section class="teaser teaser--small" style="background-image: url({{ asset('images/teaser-kontakt.jpg') }});">

        <div class="container d-flex align-items-center justify-content-center justify-content-lg-between">
            <h1 class="teaser__title">{{ webText('contact.pageTitle') }}</h1>
        </div>

    </section>

    @include('layouts.includes.nav')

    <section class="section">

        <!-- Circle -->
        <img data-src="{{ asset('images/circle.svg') }}" alt="" class="circle lazy">

        <div class="container text-center text-lg-left">

            <!-- Breadcrumb -->
            <ul class="breadcrumb list list--no-style">
                <li class="breadcrumb__item text--semi-small">
                    <a href="#praha" class="link link--underline">Praha</a>
                </li>
                <li class="breadcrumb__item text--semi-small">
                    <a href="#novy-jicin" class="link link--underline">
                        Nový Jičín
                    </a>
                </li>
            </ul>


            <div class="row space-m-b-80" id="praha">
                <div class="col-lg-6">
                    <h2 id="vsechny-kontakty" class="h2">{{ webText('contact.hq.title') }}</h2>
                    <h3 class="h3">{{ webText('contact.hq.subtitle') }}:</h3>

                    <address>
                       {!! webText('contact.hq.address') !!}
                    </address>

                    <p>{!! webText('contact.hq.companyData') !!}</p>

                    <h3 class="h3">{{ webText('contact.hq.subtitle.contact') }}</h3>

                    <ul class="list list--no-style">
                        <li class="list__item"><span class="text--secondary">{{ webText('contact.hq.email.label') }}:</span> <a href="mailto:{{ webText('contact.hq.email.email') }}">{{ webText('contact.hq.email.email') }}</a></li>
                        <li class="list__item"><span class="text--secondary">{{ webText('contact.hq.orders.label') }}:</span> <a href="mailto:{{ webText('contact.hq.orders.email') }}">{{ webText('contact.hq.orders.email') }}</a></li>
                        <li class="list__item"><span class="text--secondary">{{ webText('contact.hq.invoices.label') }}:</span> <a href="mailto:{{ webText('contact.hq.invoices.email') }}">{{ webText('contact.hq.invoices.email') }}</a></li>
                    </ul>
                </div>
                <div class="col-lg-6">
                    <figure>
                        <img class="lazy" data-src="{{ asset('images/contact-1.png') }}" alt="">
                    </figure>
                </div>
            </div>

            <div class="row justify-content-center justify-content-lg-start align-items-stretch">
                @foreach(\App\ContactPerson::whereSection('praha')->orderBy('order')->get() as $contactPerson)
                    @include('web.includes.contactPersonBox', ['contactPerson' => $contactPerson])
                @endforeach
            </div>

        </div>

    </section>

    <section class="section section--grey">
        <div class="container text-center">
            <h2 id="kde-nas-najdete" class="h2 space-m-b-10">{{ webText('contact.service.title') }}</h2>
            <p class="space-m-b-40">
                {{ webText('contact.service.text') }}
            </p>

            <div class="map map--wide">
                <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2557.509520279126!2d14.512095315887427!3d50.13289941807562!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x470becf2bb775da1%3A0xdd474bfaadf5d807!2sNimda%20Co.%20Ltd.%20-%20organiza%C4%8Dn%C3%AD%20slo%C5%BEka!5e0!3m2!1scs!2scz!4v1583789233395!5m2!1scs!2scz" width="600" height="450" frameborder="0" style="border:0;" allowfullscreen=""></iframe>
            </div>

        </div>
    </section>

    <section class="section space-p-t-0 space-p-b-100" id="novy-jicin">
        <div class="container text-center text-lg-left">
            <h2 class="h2">{{ webText('contact.novyJicin.title') }}</h2>
            <div class="row">
                <div class="col-left col-lg-6 d-flex flex-column justify-content-between">
                    <div>
                        <h3 class="h3">{{ webText('contact.novyJicin.subtitle') }}:</h3>

                        <address class="space-m-b-30">
                            {!! webText('contact.novyJicin.address') !!}
                        </address>

                        <p class="telNumbers"><span>
                                {!! webText('contact.novyJicin.telFax') !!}
                                </span></p>
                    </div>

                    <div class="row align-items-stretch">
                        @foreach(\App\ContactPerson::whereSection('novyJicin')->orderBy('order')->get() as $contactPerson)
                            @include('web.includes.contactPersonBox', ['contactPerson' => $contactPerson])
                        @endforeach
                    </div>
                </div>
                <div class="col-right col-lg-6">
                    <h3 class="h3">{{ webText('contact.novyJicin.mapTitle') }}</h3>
                    <div class="map">
                        <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2585.0749389363586!2d17.991100415873635!3d49.615191855074244!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x4713eb3be889b8c3%3A0xd922d1fd50d351f8!2zRHVrZWxza8OhIDEwMiwgNzQyIDQyIMWgZW5vdiB1IE5vdsOpaG8gSmnEjcOtbmE!5e0!3m2!1scs!2scz!4v1583792943038!5m2!1scs!2scz" width="600" height="450" frameborder="0" style="border:0;" allowfullscreen=""></iframe>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Logos -->
    @include('web.includes.logos')

@endsection