@extends('layouts.frontend')
@section('title', $city->meta_title)
@section('meta_description', $city->meta_description)
@section('meta_keywords', $city->meta_keyword)
@section('json-ld', Breadcrumbs::view('breadcrumbs::json-ld', 'go-city', $country->gc_name, $city->gcc_name))
@section('content')
{{-- <div class="kv-inpage" style="background-image: url(../assets/img/uploads/kv-global-office.jpg);">
    <div class="kv-inpage-item">
        <div class="container text-white">
            <div class="h1 font-weight-bold">ed:m 全球網路</div>
            <p class="mb-0">We support you globally</p>
        </div>
    </div>
</div> --}}
<div class="kv-inpage" style="background-image: url({{ asset($page->pic_1) }});">
    <div class="kv-inpage-item">
        <div class="container text-white">
            <h1>{{ $page->title }}</h1>
            <p class="mb-0">{{ $page->description_1 }}</p>
        </div>
    </div>
</div>

<nav class="nav-main">
    <div class="nav-primary">
        <div class="container d-none d-lg-block slick-nav">
            <div class="row no-gutters d-flex">
                @foreach ($country_list as $k => $v)
                <div class="col-2">
                    <a class="nav-link @if ($v->gc_id == $country_id) active @endif" href="{{ route('about_global-office', $v->gc_name) }}">{{$v->gc_name}}</a>
                </div>
                @endforeach
            </div>
        </div>
        <div class="d-lg-none">
            <select class="custom-select" onchange="location = this.value;">
                @foreach ($country_list as $k => $v)
                <option value="{{ route('about_global-office', $v->gc_name) }}" @if ($v->gc_id == $country_id) selected @endif>{{$v->gc_name}}</option>
                @endforeach
            </select>
        </div>
    </div>
    <div class="nav-secondary">
        <div class="container">
            <div class="nav-responsive">
                <ul class="nav justify-content-center">
                    @foreach ($city_list as $k => $v)
                    <li class="nav-item">
                        <a class="nav-link @if ($v->gcc_id == $city_id) active @endif" href="{{ route('about_global-office', [$v->gc_name, $v->gcc_name]) }}">{{$v->gcc_name}}</a>
                    </li>
                    @endforeach
                </ul>
            </div>
        </div>
    </div>
</nav>

<div class="container breadcrumbs">
    {{ Breadcrumbs::render('go-city', $country->gc_name, $city->gcc_name) }}
</div>

<main class="main pb-0 global-office">
    <div class="container mb-10 mb-md-14">
        <div class="row">
            <div class="col-12 col-md-8">
                <img class="img-fluid lazyload" data-src="{{ asset($city->pic_1) }}">
            </div>
            <div class="col-12 col-md-4">
                <div class="card-contact box-edm">
                    <h4 class="caption">{{$city->contact}}</h4>
                    <address>
                        <strong>聯絡資訊</strong><br>
                        {!!$city->address!!}
                        <br />
                        {!!$city->phone!!}
                    </address>
                    <address>
                        <strong>營業時間</strong><br>
                        {!!$city->open!!}
                    </address>
                </div>
            </div>
        </div>
    </div>
    <div class="container mb-10 mb-md-14 features">
        <div class="row no-gutters">
            @foreach ($list_1->blockDetail as $k => $v)
            @if (($k % 2) == 0)
            <div class="col-12 col-lg-6">
            @endif
                <div class="row no-gutters">
                    @if (($k % 2) == 0)
                    <div class="col-12 col-md-6">
                        <img class="img-fluid w-100 lazyload" data-src="{{asset($v->pic)}}">
                    </div>
                    @endif
                    <div class="col-12 col-md-6">
                        <div class="bg-light p-xl-10 p-6 h-100">
                            <div class="h5 font-weight-bold">{{$v->title}}</div>
                            <div class="text-left" style="max-width: 50px;">
                                <hr class="border-primary border-2 my-4">
                            </div>
                            <p class="description">{!!$v->description!!}</p>
                        </div>
                    </div>
                    @if (($k % 2) > 0)
                    <div class="col-12 col-md-6 order-first order-md-last">
                        <img class="img-fluid w-100 lazyload" data-src="{{asset($v->pic)}}">
                    </div>
                    @endif
                </div>
            @if (($k % 2) > 0 || ($k + 1) == count($list_1->blockDetail))
            </div>
            @endif
            @endforeach
        </div>
    </div>

    <!-- 海外辦事處 -->
    <div class="container mb-10 mb-md-14">
        <div class="row">
            <div class="col-12 col-md-6">
                <div class="text-center text-md-left">
                    <div class="h3 font-weight-bold mb-8">{{$city->title}}</div>
                </div>
                {!!$city->description!!}
            </div>
            @if ($city->is_hide == 0)
            <div class="col-12 col-md-6">
                <div class="bs-strong py-10 px-12">
                    <div class="text-center text-md-left">
                        <img class="img-fluid mb-6" src="{{asset($city->pic_2)}}">
                    </div>
                    {!!$city->description_2!!}
                </div>
            </div>
            @endif
        </div>
    </div>

    <!-- 當地服務 -->
    <div class="container mb-10 mb-md-14">
        <div class="h3 font-weight-bold mb-8 text-center text-md-left">當地服務</div>
        <div class="row no-gutters">
            <div class="col-12 col-lg-8 position-static">
                <div class="card-group card-columns slider-service">
                    @if (isset($list_5->blockDetail))
                    @foreach ($list_5->blockDetail as $k => $v)
                    <div class="card border-lg-0 pr-lg-2 h-100">
                        <img class="card-img-top" src="{{asset($v->pic)}}">
                        <div class="card-body">
                            <p class="card-text px-4 px-md-8">
                                {!! nl2br($v->description) !!}
                            </p>
                        </div>
                    </div>
                    @endforeach
                    @endif
                </div>
            </div>
            <div class="col-12 col-lg-4 bg-light">
                <div class="card-body px-4 px-md-8">
                    <i class="icon-list-check mb-6"></i>
                    <div class="h5 font-weight-bold mb-3">{{$list_2->title}}</div>
                    <ul class="mb-8 pl-2 small-dot">
                        @foreach ($list_2->blockDetail as $k => $v)
                        <li>{{$v->title}}</li>
                        @endforeach
                    </ul>
                    <div class="h5 font-weight-bold mb-3">{{$list_3->title}}</div>
                    <ul class="mb-8 pl-2 small-dot">
                        @foreach ($list_3->blockDetail as $k => $v)
                        <li>{{$v->title}}</li>
                        @endforeach
                    </ul>
                </div>
            </div>
            <div class="slider-counter slider-service-counter"></div>
        </div>
    </div>

    <!-- 海外辦事處一覽 -->
    <div class="position-relative">
        <div class="container">
            <div class="text-center text-md-left">
                <div class="h3 font-weight-bold mb-3">海外辦事處一覽</div>
            </div>
        </div>
        <div class="slider-office">
            @foreach ($list_4->blockDetail as $k => $v)
            <a href="{{asset($v->pic)}}" data-title="{{$v->title}}" data-lightbox="lb-office">
            <img class="img-fluid w-100" src="{{asset($v->pic)}}">
            </a>
            @endforeach
        </div>
        <div class="slider-counter slider-office-counter"></div>
    </div>

    <div class="container-map">
        <div id="map-canvas" class="map-local"></div>
        <div class="card-contact box-edm mb-0">
            <h4 class="caption">{{$city->contact}}</h4>
            <address>
                <strong>聯絡資訊</strong><br>
                {!!$city->address!!}
                <br />
                 {!!$city->phone!!}
            </address>
            <address>
                <strong>營業時間</strong><br>
                {!!$city->open!!}
            </address>
        </div>
    </div>
</main>
@stop
@section('js')
<!-- Google Map API -->
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD6piIpu_iVGX8ZNUF5F8GWr2udHRYMxJ0&callback=initMap" type="text/javascript"></script>
<script>
function initMap() {
    var geocoder = new google.maps.Geocoder();
    geocoder.geocode({'address': '{{$city->address}}'}, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            // var mylatlng = {lat: 51.517, lng: -0.140};
            var mylatlng = {lat: results[0].geometry.location.lat(), lng: results[0].geometry.location.lng()};
            var map = new google.maps.Map(document.getElementById('map-canvas'), {
                zoom: 15,
                center: mylatlng
            });
            var marker = new google.maps.Marker({
                position: mylatlng,
                map: map,
                icon: "/assets/img/ui/map-pin.png",
            });
        }
    });
}
</script>
<script src="/assets/js/vendor/jquery.lightbox.min.js"></script>
<script>
    $(".slider-service").on("initialized.owl.carousel changed.owl.carousel", function(e) {
        if (!e.namespace) {
            return;
        }
        $(".slider-service-counter").text(
            e.relatedTarget.relative(e.item.index) + 1 + " / " + e.item.count
        );
    }).owlCarousel({
        loop: true,
        items: 2,
        nav: true,
        dots: false,
        info: false,
        margin: 0,
        responsiveClass:true,
        responsive:{
            0:{
                items:1,
            },
            576:{
                items:2,
            }
        },
    });

    $(".slider-office").on("initialized.owl.carousel changed.owl.carousel", function(e) {
        if (!e.namespace) {
            return;
        }
        $(".slider-office-counter").text(
            e.relatedTarget.relative(e.item.index) + 1 + " / " + e.item.count
        );
    }).owlCarousel({
        loop: false,
        //items: 10,
        nav: true,
        dots: false,
        info: false,
        margin: 0,
        responsiveClass:true,
        responsive:{
            0:{
                items:3,
            },
            576:{
                items:3,
            },
            992:{
                items:5,
            }
        },
    });
    $.home();
</script>
@stop