@extends('layouts.frontend')
@section('content')
<style>
.contact-pin.argentina {
    z-index: 0;
    margin-top: 36%;
    margin-left: 15.5%;
    margin-right: 0%;
    top: 0%;
    bottom: auto;
    left: 0%;
    right: auto;
}
</style>
<div class="section pattern-bg inner-section contact wf-section">
    <div class="contact-sidebar-b">
        <div class="contact-sidebar">
            <a href="#" class="contact-close-btn w-inline-block" data-ix="contact-close-btn">
                <div class="close-btn-line-01">
                </div>
                <div class="close-btn-line-02">
                </div>
            </a>
            <div id="contact-sidebar-content"></div>
        </div>
    </div>
    <div class="container w-container" data-ix="fade-from-bottom">
        <div class="contact-title">
            <strong>{!! textarea($page->description) !!}</strong>
        </div>
        <div class="content-b-10">
            <div class="contac-icon-row">
                <div class="contac-icon-col">
                    <a href="https://api.whatsapp.com/send?phone={{ $page->whatsapp }}" target="_blank" class="link-b-hover w-inline-block">
                        <img src="{{ asset_frontend('images/icon-whatsapp.svg') }}" loading="lazy" alt="" class="contact-icon-img">
                    </a>
                </div>
                <div class="contac-icon-col">
                    <a href="mailto:{{ $page->email }}" class="link-b-hover w-inline-block">
                        <img src="{{ asset_frontend('images/icon-mail.svg') }}" loading="lazy" alt="" class="contact-icon-img">
                    </a>
                </div>
            </div>
        </div>
        <div class="content-b">
            <div class="contatc-map-b">

                @foreach($offices as $key => $office)
                <a href="#" class="contact-pin {{ $office->marker_class }} w-inline-block" data-ix="contact-pin" data-key="{{$key}}">
                    @if($icon = $office->getMedia('marker_icon'))
                    <img src="{{ $icon->path }}" alt="" class="contact-pin-img">
                    @endif
                    <template>
                        <div class="contact-country-text">{{ $office->title }}</div>
                        @if($office->address)
                        <div class="contact-address-b w-inline-block">
                            <div>{!! textarea($office->address) !!}</div>
                            <img src="{{ asset_frontend('images/icon-pin.svg') }}" alt="" class="contact-address-pin">
                        </div>
                        @endif
                        <div class="content-b-20 align-center">
                            <div>{{ $office->contact_person }}</div>
                        </div>
                        <div class="contac-icon-row">
                            @if($office->whatsapp)
                            <div class="contac-icon-col">
                                <a href="https://api.whatsapp.com/send?phone={{ $office->whatsapp }}" target="_blank" class="link-b-hover w-inline-block">
                                    <img src="{{ asset_frontend('images/icon-whatsapp.svg') }}" loading="lazy" alt="" class="contact-icon-img">
                                </a>
                            </div>
                            @endif
                            @if($office->email)
                            <div class="contac-icon-col">
                                <a href="mailto:{{ $office->email }}" class="link-b-hover w-inline-block">
                                    <img src="{{ asset_frontend('images/icon-mail.svg') }}" loading="lazy" alt="" class="contact-icon-img">
                                </a>
                            </div>
                            @endif
                        </div>
                    </template>
                </a>
                @endforeach
                <img src="{{ asset_frontend('images/map2x.png') }}" alt="" class="img-full">
            </div>
        </div>
    </div>
</div>
@endsection
@section('js')
<script>
    $(document).ready(function(){
        $('[data-ix="contact-pin"]').on('click', function(){
            $('.contact-sidebar-b').hide();
            $('#contact-sidebar-content').html($(this).find('template').html());
        })
    })
</script>
@endsection