@extends('layout.app')

@section('title')
{!! Translation::transText('contact-us.breadcrumbs.contact-information', 'Contacts') !!}
@endsection

@section('content')
<div class="wrapper" style="background-image: url(img/faq-bg.png)">
    <!-- <picture><source srcset="/front/dist/img/home-header-bg.webp" type="image/webp"><img class="home-header-bg" src="/front/dist/img/home-header-bg.png" loading="lazy" /></picture> -->
    <main>
        @include('parts.header-panel')
        @include('parts.header')


        <section class="contact">
            <div class="container-left">
                <div class="contact__inner">
                    <div class="contact__inner-info">
                        <div class="breadcrumbs">
                            <div class="breadcrumbs__inner">
                                <ul class="breadcrumbs__list">
                                    <li><a href="/">{!! Translation::trans('breadcrumbs.home', 'Home') !!}</a></li>
                                    <li><span>{!! Translation::trans('contact-us.breadcrumbs.contact-information', 'Contacts') !!}</span></li>
                                </ul>
                            </div>
                        </div>
                        <h1>{!! Translation::transText('contact-us.contact.title', 'Dane kontaktowe') !!}</h1>

                        {!! Translation::trans('contact-us.contact.ul', 'Magazyn') !!}
                    </div>
                    <div class="contact__inner-map">

                        <div id="map"></div>

                    </div>
                </div>
            </div>
        </section>
        <section class="team">
            <div class="container">
                <div class="team__inner">
                    <h2>{!! Translation::trans('about-us.team.title', 'Nasz zespół') !!}</h2>
                    <div class="team__inner-items">
                        
                        <div class="team__inner-item team__inner-item-last">
                            <div class="team__inner-item-last-box">
                                <h4>{!! Translation::trans('about-us.team.last', 'Masz pytanie?') !!}</h4>
                                {!! Translation::trans('about-us.team.write', 'Napisz') !!}

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <section class="about-us import" id="about-us">
            <div class="container">
                <div class="about-us__inner">
                    <div class="about-us__inner-col">
                        <h3>{!! Translation::trans('about-us.list.work.title', 'ЯК МИ ПРАЦЮЄМО:') !!}
                        </h3>
                        <div class="about-us__inner-col-item">
                            {!! Translation::trans('about-us.list.work.ul', 'Прямо зараз Ви оформляєте замовлення на сайті') !!}

                        </div>
                    </div>
                </div>
            </div>
        </section>
        <section class="contact-us" id="contact-us" style="background-image: url(/front/dist/img/circular-lines-bg-contact.svg)">
            <div class="container">
                <div class="contact-us__inner">
                    <div class="contact-us__inner-text">
                        <h2>{!! Translation::trans('home.contact-us.title', 'Chcesz skorzystać sie z konsultacji?') !!}</h2>
                        <p>
                            {!! Translation::trans('home.contact-us.description', 'Wypełnij poniższy formularz kontaktowy, a my skontaktujemy się
                            z Tobą tak szybko, jak to możliwe.') !!}
                        </p>
                    </div>

                    <div class="contact-us__inner-form">
                        <form action="{{ route('contact-us.send') }}" method="post" data-component="contact-form">
                            <div class="contact-us__inner-form-item">

                                <label>{!! Translation::trans('home.contact-us.name', 'Imię i Nazwisko') !!}</label>
                                <input name="name" type="text" class="global-input" placeholder="{!! Translation::transText('home.contact-us.name.placeholder', 'Wpisz swoje imię i Nazwisko') !!}" />
                            </div>
                            <div class="contact-us__inner-form-item">
                                <label>{!! Translation::trans('home.contact-us.email', 'E-mail') !!}</label>
                                <input name="email" type="email" class="global-input" placeholder="{!! Translation::transText('home.contact-us.email.placeholder', 'Wpisz swój adres e-mail') !!}" />
                            </div>
                            <div class="contact-us__inner-form-item">
                                <label>{!! Translation::trans('home.contact-us.phone', 'Telefon') !!}</label>
                                <input name="phone" type="tel" class="global-input" placeholder="{!! Translation::transText('home.contact-us.phone.placeholder', 'Wpisz swój telefon') !!}" />
                            </div>
                            <div class="checkbox-items">
                                <div class="checkbox-item">

                                    {!! Translation::trans('contact-us.form.check-1', 'Potwierdzam, że zapoznałem się i akceptuję ogólne
                                    warunki korzystania ze strony internetowej
                                    epat.pl/polityka-prywatnosci') !!}
                                </div>
                                <div class="checkbox-item">
                                    <input class="checkbox-radio" id="two" type="checkbox" />
                                    <label for="two">{!! Translation::trans('contact-us.form.check-2', 'Potwierdzam,że zapoznałem się z polityką prywatności
                                        strony internetowej epat.pl/polityka-prywatnosci') !!}</label>
                                </div>
                                <div class="checkbox-item">
                                    <input class="checkbox-radio" id="three" type="checkbox" />
                                    <label for="three">{!! Translation::trans('contact-us.form.check-3', 'Zgadzam się na przetwarzanie moich danych osobowych
                                        (imię, adres e-mail) przez Epat sp. z o.o. w celu
                                        przesyłania informacji marketingowych za pośrednictwem
                                        poczty elektronicznej (e-mail)') !!}</label>
                                </div>
                            </div>
                            <button class="golden-btn arrow primary" type="submit">
                                {!! Translation::trans('home.contact-us.submit', 'Przejdź do katalogu') !!}
                            </button>
                        </form>
                    </div>
                </div>
            </div>
        </section>
    </main>
</div>
@endsection
@section('javascript')
<script>
    let map;

    function initMap() {
        const pos = {
            lat: 50.07259,
            lng: 19.95813,
        };
        map = new google.maps.Map(
            document.getElementById("map"), {
                center: pos,
                zoom: 15,
                disableDefaultUI: true,
                styles: [{
                        featureType: "all",
                        elementType: "all",
                        stylers: [{
                            hue: "#008eff",
                        }, ],
                    },
                    {
                        featureType: "all",
                        elementType: "labels.text.fill",
                        stylers: [{
                            color: "#111c4e",
                        }, ],
                    },
                    {
                        featureType: "administrative.country",
                        elementType: "labels.text.fill",
                        stylers: [{
                            color: "#111c4e",
                        }, ],
                    },
                    {
                        featureType: "administrative.province",
                        elementType: "labels.text.fill",
                        stylers: [{
                            color: "#111c4e",
                        }, ],
                    },
                    {
                        featureType: "administrative.locality",
                        elementType: "labels.text.fill",
                        stylers: [{
                            color: "#111c4e",
                        }, ],
                    },
                    {
                        featureType: "administrative.neighborhood",
                        elementType: "labels.text.fill",
                        stylers: [{
                            color: "#111c4e",
                        }, ],
                    },
                    {
                        featureType: "administrative.land_parcel",
                        elementType: "labels.text.fill",
                        stylers: [{
                            color: "#111c4e",
                        }, ],
                    },
                    {
                        featureType: "landscape.man_made",
                        elementType: "geometry.fill",
                        stylers: [{
                            color: "#dbebf0",
                        }, ],
                    },
                    {
                        featureType: "landscape.natural",
                        elementType: "labels.text.fill",
                        stylers: [{
                            color: "#111c4e",
                        }, ],
                    },
                    {
                        featureType: "landscape.natural.landcover",
                        elementType: "geometry.fill",
                        stylers: [{
                            color: "#c0dee6",
                        }, ],
                    },
                    {
                        featureType: "poi",
                        elementType: "all",
                        stylers: [{
                            visibility: "off",
                        }, ],
                    },
                    {
                        featureType: "road",
                        elementType: "all",
                        stylers: [{
                                saturation: "0",
                            },
                            {
                                lightness: "0",
                            },
                        ],
                    },
                    {
                        featureType: "road",
                        elementType: "labels.icon",
                        stylers: [{
                            visibility: "off",
                        }, ],
                    },
                    {
                        featureType: "road.highway",
                        elementType: "geometry.fill",
                        stylers: [{
                            color: "#fbfbfb",
                        }, ],
                    },
                    {
                        featureType: "road.highway",
                        elementType: "geometry.stroke",
                        stylers: [{
                            color: "#111c4e",
                        }, ],
                    },
                    {
                        featureType: "road.highway",
                        elementType: "labels.text.fill",
                        stylers: [{
                            color: "#111c4e",
                        }, ],
                    },
                    {
                        featureType: "road.highway.controlled_access",
                        elementType: "geometry.fill",
                        stylers: [{
                            color: "#ffffff",
                        }, ],
                    },
                    {
                        featureType: "road.highway.controlled_access",
                        elementType: "labels.text.fill",
                        stylers: [{
                            color: "#111c4e",
                        }, ],
                    },
                    {
                        featureType: "road.arterial",
                        elementType: "geometry.fill",
                        stylers: [{
                            color: "#ffffff",
                        }, ],
                    },
                    {
                        featureType: "road.local",
                        elementType: "labels.text.fill",
                        stylers: [{
                            color: "#111c4e",
                        }, ],
                    },
                    {
                        featureType: "transit",
                        elementType: "all",
                        stylers: [{
                            visibility: "off",
                        }, ],
                    },
                    {
                        featureType: "water",
                        elementType: "all",
                        stylers: [{
                                visibility: "simplified",
                            },
                            {
                                saturation: "-60",
                            },
                            {
                                lightness: "-20",
                            },
                        ],
                    },
                    {
                        featureType: "water",
                        elementType: "geometry.fill",
                        stylers: [{
                            color: "#52c0db",
                        }, ],
                    },
                    {
                        featureType: "water",
                        elementType: "labels.text.fill",
                        stylers: [{
                            color: "#ffffff",
                        }, ],
                    },
                ],
            }
        );
        const marler = new google.maps.Marker({
            position: pos,
            map: map,
            icon: "/front/dist/img/marker-map.svg",
        });
    }
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBfBVsyhnJsCl8adc7wbSqL_youg9AbhSU&callback=initMap" async defer></script>
@stop