@extends('vendor.site-bases.website.layouts.master')

@section('title', trans('title.contact'))

@section('page_title', trans('title.contact'))

@section('breadcrumbs')
    {!! Breadcrumbs::render('contact') !!}
@endsection

@section('content')
    <section class="contact_section container">
        <div id="map"></div>
        <div class="contact_info">
            <ul class="contact_details">
                <li>
                    <span>@lang('site.phone_number')</span>
                    <span>{{ $contact->phone }}</span>
                </li>
                <li>
                    <span>@lang('site.address')</span>
                    <span>{{ $contact->address }}</span>
                </li>
                <li>
                    <span>@lang('site.email')</span>
                    <span>{{ $contact->email }}</span>
                </li>
            </ul>
            <ul class="socials">
                @if ($contact->facebook)
                    <li>
                        <a href="{{ $contact->facebook }}" target="_blank">
                            <svg xmlns="http://www.w3.org/2000/svg" id="prefix__Group_40" data-name="Group 40" viewBox="0 0 16 16">
                                <path id="prefix__Path_158" d="M0 0h16v16H0z" data-name="Path 158" style="fill:none"></path>
                                <path id="prefix__Path_159" d="M11.268 15v-4.644h1.555l.233-1.805h-1.788V7.4c0-.523.145-.879.895-.879h.956V4.9a12.794 12.794 0 0 0-1.393-.071A2.175 2.175 0 0 0 9.4 7.22v1.331H7.845v1.805H9.4V15H3.667A.667.667 0 0 1 3 14.333V3.667A.667.667 0 0 1 3.667 3h10.666a.667.667 0 0 1 .667.667v10.666a.667.667 0 0 1-.667.667z" data-name="Path 159" transform="translate(-1 -1)"></path>
                            </svg>
                        </a>
                    </li>
                @endif
                @if ($contact->linkedin)
                    <li>
                        <a href="{{ $contact->linkedin }}" target="_blank">
                            <svg xmlns="http://www.w3.org/2000/svg" id="prefix__Group_43" data-name="Group 43" viewBox="0 0 20 20">
                                <path id="prefix__Path_123" d="M0 0h20v20H0z" data-name="Path 123" style="fill:none"></path>
                                <path id="prefix__Path_124" d="M14.927 14.93h-2.073v-3.248c0-.775-.016-1.772-1.081-1.772s-1.245.843-1.245 1.715v3.305H8.455V8.25h1.991v.91h.027a2.187 2.187 0 0 1 1.966-1.079c2.1 0 2.489 1.383 2.489 3.182v3.667zM6.113 7.336a1.2 1.2 0 1 1 1.2-1.2 1.2 1.2 0 0 1-1.2 1.2zm1.04 7.594H5.074V8.25h2.08v6.68zM15.966 3H4.034A1.02 1.02 0 0 0 3 4.009v11.982A1.02 1.02 0 0 0 4.033 17h11.93A1.024 1.024 0 0 0 17 15.991V4.009A1.024 1.024 0 0 0 15.962 3z" data-name="Path 124"></path>
                            </svg>
                        </a>
                    </li>
                @endif
                @if ($contact->instagram)
                    <li>
                        <a href="{{ $contact->instagram }}" target="_blank">
                            <svg id="Group_6827" data-name="Group 6827" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
                                <path id="Path_4615" data-name="Path 4615" d="M0,0H20V20H0Z" fill="none"/>
                                <path id="Path_4616" data-name="Path 4616" d="M10,2c2.174,0,2.445.008,3.3.048a5.894,5.894,0,0,1,1.942.372,3.9,3.9,0,0,1,1.418.922A3.926,3.926,0,0,1,17.58,4.76,5.91,5.91,0,0,1,17.952,6.7C17.99,7.555,18,7.826,18,10s-.008,2.445-.048,3.3a5.914,5.914,0,0,1-.372,1.942,4.084,4.084,0,0,1-2.34,2.34,5.91,5.91,0,0,1-1.942.372c-.853.038-1.124.048-3.3.048s-2.445-.008-3.3-.048A5.914,5.914,0,0,1,4.76,17.58a4.084,4.084,0,0,1-2.34-2.34A5.889,5.889,0,0,1,2.048,13.3C2.01,12.445,2,12.174,2,10s.008-2.445.048-3.3A5.889,5.889,0,0,1,2.42,4.76a3.9,3.9,0,0,1,.922-1.418A3.918,3.918,0,0,1,4.76,2.42,5.889,5.889,0,0,1,6.7,2.048C7.555,2.01,7.826,2,10,2Zm0,4a4,4,0,1,0,4,4A4,4,0,0,0,10,6Zm5.2-.2a1,1,0,1,0-1,1A1,1,0,0,0,15.2,5.8ZM10,7.6A2.4,2.4,0,1,1,7.6,10,2.4,2.4,0,0,1,10,7.6Z" transform="translate(0 0)" fill="#054550"/>
                            </svg>
                        </a>
                    </li>
                @endif
                @if ($contact->youtube)
                    <li>
                        <a href="{{ $contact->youtube }}" target="_blank">
                            <svg xmlns="http://www.w3.org/2000/svg" id="prefix__Group_42" data-name="Group 42" viewBox="0 0 20 20">
                                <path id="prefix__Path_121" d="M0 0h20v20H0z" data-name="Path 121" style="fill:none"></path>
                                <path id="prefix__Path_122" d="M18.286 6.082a25.882 25.882 0 0 1 .381 4.585 25.882 25.882 0 0 1-.381 4.585 2.343 2.343 0 0 1-1.615 1.685 42.574 42.574 0 0 1-6.338.4 42.591 42.591 0 0 1-6.333-.4 2.342 2.342 0 0 1-1.615-1.685A25.882 25.882 0 0 1 2 10.667a25.882 25.882 0 0 1 .381-4.585A2.343 2.343 0 0 1 4 4.4a42.591 42.591 0 0 1 6.333-.4 42.574 42.574 0 0 1 6.338.4 2.342 2.342 0 0 1 1.615 1.682zm-9.619 7.5l5-2.917-5-2.917z" data-name="Path 122" transform="translate(-.333 -.667)"></path>
                            </svg>
                        </a>
                    </li>
                @endif
            </ul>
        </div>
    </section>
    <section class="contact_section container">
        @if ($locations->count() > 0)
            <div class="branches_container">
                <h2>@lang('site.branches')</h2>
                <div class="tabs contact-tabs">
                    <ul class="nav-tabs">
                        @foreach ($locations as $key => $location)
                            <li class="{{ $key == 0 ? 'active' : '' }}" data-target="#tab{{ $location->id }}">{{ $location->title }}</li>
                        @endforeach
                    </ul>
                    <div class="tab-content">
                        @foreach ($locations as $key => $location)
                            <div id="tab{{ $location->id }}" class="tab-panel {{ $key == 0 ? 'active' : '' }}">
                                <div class="branches">
                                    @foreach ($location->shops as $item)
                                        <div class="branch">
                                            <div class="branc_image">
                                                <img src="{{ asset($item->thumb) }}" alt="">
                                            </div>
                                            <h3>
                                                {{ $item->title }}
                                            </h3>
                                            <ul>
                                                <li>
                                                    <span>
                                                        <svg xmlns="http://www.w3.org/2000/svg" width="10.486" height="10.486" viewBox="0 0 10.486 10.486">
                                                            <path id="prefix__Path_117" d="M13.486 10.818v2.06a.583.583 0 0 1-.542.581c-.255.017-.463.027-.623.027A9.32 9.32 0 0 1 3 4.165q0-.241.027-.623A.583.583 0 0 1 3.608 3h2.06a.291.291 0 0 1 .29.262c.013.134.026.241.037.322a8.1 8.1 0 0 0 .7 2.331.265.265 0 0 1-.086.33l-1.257.9a7.6 7.6 0 0 0 3.991 3.985l.9-1.255a.269.269 0 0 1 .334-.087 8.1 8.1 0 0 0 2.33.7c.081.012.188.024.32.037a.291.291 0 0 1 .262.29z" data-name="Path 117" transform="translate(-3 -3)"></path>
                                                        </svg>
                                                    </span>
                                                    <a href="tel:{{ $item->phone }}">{{ $item->phone }}</a>
                                                </li>
                                                <li>
                                                    <span>
                                                        <svg xmlns="http://www.w3.org/2000/svg" width="11.65" height="10.475" viewBox="0 0 11.65 10.475">
                                                            <path id="prefix__Path_115" d="M2.582 3h10.485a.582.582 0 0 1 .582.582v9.311a.582.582 0 0 1-.582.582H2.582A.582.582 0 0 1 2 12.893V3.582A.582.582 0 0 1 2.582 3zM7.86 8.053L4.125 4.884l-.754.887 4.5 3.815 4.416-3.817-.762-.88L7.86 8.053z" data-name="Path 115" transform="translate(-2 -3)"></path>
                                                        </svg>
                                                    </span>
                                                    <a href="mailto:{{ $item->email }}">{{ $item->email }}</a>
                                                </li>
                                            </ul>
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
        @endif
    </section>
@endsection

@section('scripts')
    <script src="{{ asset('assets/client/js/leaflet.js') }}"></script>
    <script>
        var map = L.map('map', {
            center: [{{ $contact->lat }}, {{ $contact->long }}],
            zoom: 12,
            scrollWheelZoom: false,
        });

        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
        }).addTo(map);

        L.marker([{{ $contact->lat }}, {{ $contact->long }}]).addTo(map).bindPopup("<p>{{ $contact->address }}</p>");
        @foreach ($shops as $shop)
            L.marker([{{ $shop->lat }}, {{ $shop->long }}]).addTo(map).bindPopup("<p>{{ $shop->title }}</p>");
        @endforeach
        var LeafIcon = L.Icon.extend({
            options: {
                shadowUrl: '',
            }
        });
    </script>
@endsection

@section('style')
    <link rel="stylesheet" href="{{ asset('assets/client/css/leaflet.css') }}">
@endsection