@extends('front.app')
@section('meta')
    <x-meta :meta="$meta"/>
@stop

@section('container')
    <div class="page-content">

        <div class="breadcrumbs-wrapper">
            <div class="container">
                {{Breadcrumbs::render('menu',$menu_elem)}}
            </div>
        </div>

        <div class="contacts">
            <div class="container">
                @if(isset($shops) && $shops->isNotEmpty())
                    @foreach($shops as $shop_city)
                        @if($shop_city->childrenFrontPages->isNotEmpty())
                            <div class="contacts-region">
                                <h2>{{$shop_city->name}}</h2>
                                <div class="contacts-list">
                                    @foreach($shop_city->childrenFrontPages as $shop)
                                        <div class="contacts-item" id="{{$shop->alias}}">
                                            <input type="hidden" value="{{$shop->short_descr}}" name="render-map">
                                            <div class="contacts-address">{{$shop->name}}</div>
                                            <div class="contacts-info">
                                                {!! $shop->body !!}
                                                <div class="contacts-info-link">
                                                    <a href="javascript:;" data-id="{{$shop->id}}" onclick="renderMap(this)">
                                                        <svg>
                                                            <use xlink:href="{{asset('front-assets/svg/sprite.svg#pin')}}"></use>
                                                        </svg>
                                                        <span>{{ShowLabelById(79)}}</span>
                                                    </a>
                                                </div>
                                            </div>
                                                @if($shop->moduleMultipleImg->isNotEmpty())
                                                    <div class="contacts-slider">
                                                <div class="swiper">
                                                    <div class="swiper-wrapper">
                                                        @foreach($shop->moduleMultipleImg as $shop_image)
                                                            <div class="swiper-slide">
                                                            <a href="{{$shop_image->image}}" data-fancybox="contacts-{{$shop->id}}">
                                                                <img src="{{$shop_image->image_s}}" alt="{{$shop->name}}{{$loop->iteration}}">
                                                            </a>
                                                        </div>
                                                        @endforeach
                                                    </div>
                                                </div>
                                            </div>
                                                @endif
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                        @endif
                    @endforeach
                        <div class="contacts-footer">
                            <div class="contacts-map">
                                @if(isset($first_map))
                                    {!! $first_map !!}
                                @endif
                            </div>

                            <div class="contacts-form">
                                <div class="contacts-form-title">{{ShowLabelById(224)}}</div>
                                <div class="contacts-form-desc">
                                    <p>{{ShowLabelById(225)}}</p>
                                </div>
                                <form action="{{route('feedback')}}" id="feedback-form" method="post">
                                    @csrf
                                    <div class="form-item">
                                        <label for="feedback-name">{{ShowLabelById(24)}} *</label>
                                        <input type="text" id="feedback-name" name="name">
                                    </div>
                                    <div class="form-row">
                                        <div class="form-item">
                                            <label for="feedback-phone">{{ShowLabelById(25)}} *</label>
                                            <input type="text" id="feedback-phone" name="phone">
                                        </div>
                                        <div class="form-item">
                                            <label for="feedback-email">{{ShowLabelById(18)}} *</label>
                                            <input type="text" id="feedback-email" name="email">
                                        </div>
                                    </div>
                                    <div class="form-item">
                                        <label for="feedback-message">{{ShowLabelById(111)}} *</label>
                                        <input type="text" id="feedback-message" name="comment">
                                    </div>
                                    <div class="contacts-form-footer">
                                        <p class="aggreement basket-form-limited">
                                            <label>
                                                <input id="feedback-agree" name="agree" type="checkbox">
                                                <span class="aggreement-checkbox"></span>
                                                {{ShowLabelById(28)}}
                                            </label>
                                        </p>
                                        <div class="captcha">
                                            <input type="hidden" name="g-recaptcha-response" id="recaptcha-feedback-form">
                                        </div>
                                        <div class="contacts-form-submit">
                                            <button type="submit" class="button" onclick="saveForm(this)" data-form-id="feedback-form">{{ShowLabelById(226)}}</button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                @endif
            </div>
        </div>

    </div>
@stop

@push('js')
    <script src="{{asset('front-assets/js/jquery.inputmask.min.js')}}"></script>
    <script>

        $("#feedback-phone").inputmask("373 99 999 999");
        $('#feedback-email').inputmask("email");

        function renderMap(data)
        {
            let mapIframe = $(data).parents('.contacts-item').find('[name=render-map]').val();
            $('.contacts-map').html(mapIframe);
            if(mapIframe)
            {
                 $('html, body').animate({
                    scrollTop: $('.contacts-map').offset().top - $('.main-header').height() - 100
                }, 10);
            }
        }

        getRecaptcha('/contacts', 'recaptcha-feedback-form');
    </script>
@endpush