@extends('front.front-app')

@include('front.header')

@section('container')

    <div class="main-content">
        <div class="container">

            <div class="breadcrumbs-wrapper">
                @include('front.templates.breadcrumbs')
            </div>

            <div class="section contacts">
                <div class="contacts-inner">
                    <div class="contacts-content">
                        <div class="contacts-info">
                            <ul>
                                <li>
                                    <div>
                                        <img src="{{ asset('front-assets/img/icons/pin.svg') }}" alt="baby-boom address">
                                    </div>
                                    <div>
                                        <p>{{ ShowLabelById(240, $lang_id) }}</p>
                                    </div>
                                </li>
                                <li>
                                    <div>
                                        <img src="{{ asset('front-assets/img/icons/phone-2.svg') }}" alt="baby-boom phone">
                                    </div>
                                    <div>
                                        <a href="tel:{{ str_replace([' ', '(', ')', '-'], '', ShowLabelById(73, $lang_id)) }}">{{ ShowLabelById(73, $lang_id) }}</a>
                                    </div>
                                </li>
                                <li>
                                    <div>
                                        <img src="{{ asset('front-assets/img/icons/envelope.svg') }}" alt="baby-boom email">
                                    </div>
                                    <div>
                                        <a href="mailto:{{ ShowLabelById(148, $lang_id) }}">{{ ShowLabelById(148, $lang_id) }}</a>
                                    </div>
                                </li>
                                <li>
                                    <div>
                                        <img src="{{ asset('front-assets/img/icons/clock.svg') }}" alt="">
                                    </div>
                                    <div>
                                        {!! ShowLabelById(71, $lang_id) !!}
                                    </div>
                                </li>
                            </ul>
                        </div>
                        <div class="contacts-socials socials">
                            <p>{{ ShowLabelById(299, $lang_id) }}:</p>
                            <ul>
                                <li>
                                    <a href="https://www.facebook.com/BabyBoom.md/" target="_blank">
                                        <img src="{{ asset('front-assets/img/icons/facebook-2.svg') }}"
                                             alt="baby-boom facebook">
                                    </a>
                                </li>
                                <li>
                                    <a href="https://instagram.com/babyboom_md" target="_blank">
                                        <img src="{{ asset('front-assets/img/icons/instagram-2.svg') }}"
                                             alt="baby-boom instagram">
                                    </a>
                                </li>
                                <li>
                                    <a href="https://www.youtube.com/channel/UCjDvBgFn1sGmbU9--T6KnLQ" target="_blank">
                                        <img src="{{ asset('front-assets/img/icons/youtube-2.svg') }}" alt="baby-boom youtube">
                                    </a>
                                </li>
                            </ul>
                        </div>
                        <div class="contacts-form">
                            <div class="contacts-form-title">
                                <p>{{ ShowLabelById(292, $lang_id) }}</p>
                            </div>
                            <form role="form" method="POST" action="{{ url($lang, ['simpleFeedback', 'feedback']) }}" id="contacts-form" enctype="multipart/form-data" class="contacts-form">
                                <input type="hidden" name="_token" value="{{ csrf_token() }}">
                                <div class="contacts-form-item">
                                    <label for="name" class="sr-only">{{ ShowLabelById(106, $lang_id) }} *</label>
                                    <input type="text" name="name" id="name" placeholder="{{ ShowLabelById(106, $lang_id) }} *">
                                </div>
                                <div class="contacts-form-item">
                                    <label for="phone" class="sr-only">{{ ShowLabelById(107, $lang_id) }} *</label>
                                    <input type="text" name="phone" id="phone"
                                           placeholder="{{ ShowLabelById(107, $lang_id) }} *">
                                </div>
                                <div class="contacts-form-item">
                                    <label for="email" class="sr-only">{{ ShowLabelById(108, $lang_id) }} *</label>
                                    <input type="email" name="email" id="email"
                                           placeholder="{{ ShowLabelById(108, $lang_id) }} *">
                                </div>
                                <div class="contacts-form-item">
                                    <label for="message" class="sr-only">{{ ShowLabelById(22, $lang_id) }} *</label>
                                    <textarea name="message" id="message" placeholder="{{ ShowLabelById(22, $lang_id) }} *"></textarea>
                                </div>
                                <div class="contacts-form-desc">
                                    <p>{!! ShowLabelById(243, $lang_id) !!}</p>
                                </div>
                                <p class="aggreement">
                                    <label>
                                        <input id="checkin-agree" name="agree" type="checkbox">
                                        <span class="aggreement-checkbox"></span>
                                        {{ ShowLabelById(244, $lang_id) }}
                                    </label>
                                </p>

                                <div class="captcha">
                                    <input type="hidden" name="g-recaptcha-response" id="recaptcha-contacts-form">
                                </div>

                                <div class="contacts-form-submit">
                                    <button type="submit" class="button button--blue" onclick="saveForm(this)" data-form-id="contacts-form">{{ ShowLabelById(23, $lang_id) }}</button>
                                </div>
                            </form>
                        </div>
                    </div>

                    <div class="contacts-map no-ajax">
                        <div id="map" style="width:100%;height:400px;"></div>
                        @include('front.pages.google-map-script', ['find_location' => $find_location])
                    </div>
                </div>
            </div>

        </div>
    </div>
@stop

@section('scripts')
    <script async defer src="https://maps.googleapis.com/maps/api/js?key={{env('GOOGLE_MAP_API')}}&callback=initialize"></script>
@stop

@include('front.footer')