@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('agencies-item', $agency) }}
            </div>
        </div>

        <div class="agency">
            <div class="container">
                <div class="agency-inner">
                    <div class="agency-details product-end-content">
                        <div class="quick-view-inner">
                            <div class="quick-view-slider">
                                @if($agency->moduleMultipleImg->isNotEmpty())
                                    <div class="product-end-gallery">
                                        <div class="swiper-container">
                                            <div class="swiper-wrapper">
                                                @foreach($agency->moduleMultipleImg as $one_image)
                                                    <div class="swiper-slide">
                                                        <a href="{{ file_exists('upfiles/shops/' . $one_image->img) ? asset('upfiles/shops/'. $one_image->img) : asset('front-assets/img/no-image-goods-m.png') }}"
                                                           data-fancybox="quick-view-gallery">
                                                            <img
                                                                src="{{ file_exists('upfiles/shops/m/' . showImg($one_image->img)) ? asset('upfiles/shops/m/'. showImg($one_image->img)) : asset('front-assets/img/no-image-goods-m.png') }}"
                                                                alt="{{ $agency->itemByLang->name ?? '' }} - image {{ $loop->iteration }}">
                                                        </a>
                                                    </div>
                                                @endforeach
                                            </div>
                                        </div>
                                    </div>
                                    <div class="product-end-thumbs">
                                        <div class="swiper-container">
                                            <div class="swiper-wrapper">
                                                @foreach($agency->moduleMultipleImg as $one_image)
                                                    <div class="swiper-slide">
                                                        <img
                                                            src="{{ file_exists('upfiles/shops/s/' . showImg($one_image->img)) ? asset('upfiles/shops/s/'. showImg($one_image->img)) : asset('front-assets/img/no-image-goods-s.png') }}"
                                                            alt="{{ $agency->itemByLang->name ?? '' }} - image {{ $loop->iteration }}">
                                                    </div>
                                                @endforeach
                                            </div>
                                        </div>
                                        <button type="button" class="quick-view-nav quick-view-nav--prev">
                                            <svg>
                                                <use
                                                    xlink:href="{{ asset('front-assets/svg/sprite.svg#arrow') }}"></use>
                                            </svg>
                                        </button>
                                        <button type="button" class="quick-view-nav quick-view-nav--next">
                                            <svg>
                                                <use
                                                    xlink:href="{{ asset('front-assets/svg/sprite.svg#arrow') }}"></use>
                                            </svg>
                                        </button>
                                    </div>
                                @endif
                            </div>
                            <div class="quick-view-content">
                                <div class="agency-item-title">{{ $agency->cityId->itemByLang->name }}, {{ $agency->itemByLang->name ?? '' }}</div>
                                <div class="agency-item-info">
                                    <ul>
                                        <li>
                                            <div>
                                                <img src="{{ asset('front-assets/img/icons/pointer.svg') }}"
                                                     alt="Address">
                                            </div>
                                            <div>
                                                <p>{{ $agency->itemByLang->address ?? '' }}</p>
                                            </div>
                                        </li>
                                        <li>
                                            <div>
                                                <img src="{{ asset('front-assets/img/icons/phone.svg') }}"
                                                     alt="Phone">
                                            </div>
                                            <div>
                                                <p>
                                                    <a href="tel:{{ str_replace([' ', '(', ')', '-'], '',$agency->phone) }}">{{ $agency->phone ?? '' }}</a>
                                                </p>
                                            </div>
                                        </li>
                                        <li>
                                            <div>
                                                <img src="{{ asset('front-assets/img/icons/clock.svg') }}"
                                                     alt="Clock">
                                            </div>
                                            <div>
                                                <p>{{ $agency->itemByLang->schedule ?? '' }}</p>
                                            </div>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                    {{--<div class="agency-details-map">
                        <div id="agency-detail-map" class="agency-detail-map"></div>
                    </div>--}}
                </div>
            </div>
        </div>

    </div>
@stop

{{--@push('other-scripts')
    <script>
        let item_latitude = {!! $agency->latitude ?? '' !!};
        let item_longitude = {!! $agency->longitude ?? '' !!};

        function initMap() {
            const item_location = {lat: item_latitude, lng: item_longitude};
            const map = new google.maps.Map(document.getElementById("agency-detail-map"), {
                zoom: 16,
                center: item_location,
            });
            const marker = new google.maps.Marker({
                position: item_location,
                map: map,
                icon: {
                    url: "/front-assets/img/marker.png",
                    scaledSize: new google.maps.Size(27, 35),
                    size: new google.maps.Size(27, 35)
                }
            });
        }
    </script>
@endpush--}}