@extends('layouts.default', [
    'activatedNavItem' => 'EDM',
])

@section('content')

    <article class="container brand-branches overseas sandiego">
        <!-- 페이지타이틀 : full-bg -->
        <div class="area-pages-top parallax-bg">
            <h1 class="page-title">{{ $branchInfo['title'] }}</h1>
        </div>

        <!-- 지사안내 -->
        <article class="area-edm-branches" data-tab="tab-wrap">
            <div class="sm-branches-content">
                <section class="sm-bh-tabs-con">
                    <div class="img-wrap">
                        <div class="slider">
                            <ul>
                                @foreach ($branchInfo['images'] as $images)
                                    <li class="pageOnImgBlock">
                                        <figure>
                                            <img src="{{$images->url}}" alt="샌프란 · 샌디에고  글로벌센터 이미지">
                                            <figcaption>
                                                <span class="pager-hidden">[샌프란 · 샌디에고]</span>{{$images->title}}<br>
                                                <span class="pager-hidden">
                                                    {{$images->desc}}
                                                </span>
                                            </figcaption>
                                        </figure>
                                    </li>
                                @endforeach
                            </ul>
                            <div class="paging-number"></div>
                        </div>
                        <div class="pager">
                            <!-- [D]: slider의 ul 내용과 동일합니다. -->
                            <ul>
                                @foreach ($branchInfo['images'] as $images)
                                    <li class="pageOnImgBlock">
                                        <figure>
                                            <img src="{{$images->url}}" alt="샌프란 · 샌디에고  글로벌센터 이미지 리스트">
                                            <figcaption>
                                                <span class="pager-hidden">[샌프란 · 샌디에고]</span>{{$images->title}}<br>
                                                <span class="pager-hidden">
                                                    {{$images->desc}}
                                                </span>
                                            </figcaption>
                                        </figure>
                                    </li>
                                @endforeach
                            </ul>
                        </div>
                    </div>
                    <article class="info-wrap">
                        <h3 class="bransches-name">{{ $branchInfo['title'] }}</h3>
                        <div class="bransches-info">
                            <div class="list-wrap">
                                <dl>
                                    <dt>전화</dt>
                                    <dd>{{ $branchInfo['tel'] }}</dd>
                                </dl>
                                <dl>
                                    <dt>근무시간</dt>
                                    <dd>
                                        <p class="bullet">{{ $branchInfo['time'] }}</p>
                                        <p class="bullet">{{ $branchInfo['time2'] }}<br>
                                            <span class="exp-txt">{{ $branchInfo['time_description'] }}</span>
                                        </p>
                                    </dd>
                                </dl>
                                <dl>
                                    <dt>주소</dt>
                                    <dd>
                                        {{ $branchInfo['address_eng'] }}
                                    </dd>
                                    <dd>
                                        {{ $branchInfo['address_eng2'] }}
                                    </dd>
                                </dl>
                            </div>
                            <div class="button-wrap">
                                <a href="{{ route('inquiry.qna.index') }}" class="button dark half">실시간Q&A</a>
                                <a href="{{ route('inquiry.consultation.create') }}" class="button color half">무료간편상담</a>
                            </div>
                        </div>
                    </article>
                </section>
            </div>
        </article>

        <div class="area-brand-content">
            <!-- 앵커영역 -->
            <div class="area-branches-anchor">
                <a href="#branches-service" data-type="scroll-btn2">현지서비스</a>
                <a href="#branches-greeting" data-type="scroll-btn2">센터소개</a>
{{--                <a href="#branches-photo" data-type="scroll-btn2">센터전경</a>--}}
                <a href="#branches-location" data-type="scroll-btn2">찾아오시는길</a>
            </div>

            <div class="branch-content-mt"></div>

            <!-- 현지서비스 -->
            <section class="branches-service" id="branches-service">
                <div class="flex-wrap">
                    <h2 class="branches-title">현지서비스</h2>
                    <div class="area-board-thumb col3 column">
                        <div class="area-board-item">
                            <figure class="thumb"><img src="https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/r/v1/pages/branches/overseas/sydney/sydney4.jpg" alt="샌프란 · 샌디에고  글로벌센터 현지서비스1"></figure>
                            <p class="subject">
                                어학/정규 전문상담
                            </p>
                            <p class="context">
                                미국 현지에서 어학 연장이나 정규대학을 진학하고자 할 경우 정확한 정보와 다년간의 상담 노하우를 통하여 유학의 꿈을 이룰 수 있도록 도와 드립니다.
                            </p>
                        </div>
                        <div class="area-board-item">
                            <figure class="thumb"><img src="https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/r/v1/pages/branches/overseas/melbourne/melbourne1.jpg" alt="샌프란 · 샌디에고  글로벌센터 현지서비스2"></figure>
                            <p class="subject">
                                장기 정착서비스
                            </p>
                            <p class="context">
                                대학 신입생,조기유학 및 장기 거주 등을 대상으로 현지 정착 서비스 제공합니다.
                            </p>
                        </div>
                        <div class="area-board-item">
                            <figure class="thumb"><img src="https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/r/v1/pages/branches/overseas/sydney/sydney1.jpg" alt="샌프란 · 샌디에고  글로벌센터 현지서비스3"></figure>
                            <p class="subject">
                                현지 생활 정보 안내
                            </p>
                            <p class="context">
                                현지 생활에 빨리 적응 할 수 있도록 궁금한 사항(호텔 & 항공권 구매, 은행, 병원등)에 대해 정보를 제공합니다.
                            </p>
                        </div>
                    </div>
                    <div class="detail-view">
                        <h3 class="title">도착 전 서비스</h3>
                        <ul class="check-list">
                            <li>픽업서비스</li>
                        </ul>
                        <h3 class="title">도착 후 서비스</h3>
                        <ul class="check-list">
                            <li>학교 연장 상담</li>
                            <li>공항픽업</li>
                        </ul>
                        <h3 class="title">현지생활 지원 서비스</h3>
                        <ul class="check-list">
                            <li>생활정보안내</li>
                            <li>응급상황 대처 및 유학생활에 대한 안내(호텔 & 항공권 구매, 은행, 병원등)</li>
                        </ul>
                        <h3 class="title">정착 서비스(유료)</h3>
                        <ul class="check-list">
                            <li>아파트 투어 및 계약</li>
                            <li>전기 및 수도 신청</li>
                            <li>현지 핸드폰 개설</li>
                            <li>현지 은행계좌 개설</li>
                            <li>인터넷 신청</li>
                        </ul>
                    </div>
                </div>
            </section>

            <!-- 지사소개 -->
            <section class="branches-greeting" id="branches-greeting">
                <div class="flex-wrap">
                    <div class="branches-title-wrap">
                        <h2 class="branches-title">센터소개</h2>
                    </div>
                    <div class="context no-img">
                        <p>
                            <em>
                                성공적인 어학연수를 위해 열심히 도와 드리겠습니다.
                            </em>
                        </p>
                        <p>
                            미국 뉴욕 · 샌프란 · 샌디에고 글로벌센터는 여러분의 안전한 미국 유학 생활을 위해 하우징, 픽업 등 현지 초기 정착과 관련된 모든 서비스 및 현지 응급서포트를 제공해 드리고 있으며, 성공적인 학업을 위해 현지의 전문적인 경험 및 정보를 바탕으로 어학연수 뿐 아니라 미국 대학 진학까지 궁극적으로 미국에서 자신의 꿈을 이룰 수 있도록 상담을 해 드리고 있습니다.
                        </p>
                    </div>
                </div>
            </section>

            <!-- 지사전경 -->
{{--            <section class="branches-photo" id="branches-photo">--}}
{{--                <div class="flex-wrap area-edm-branches">--}}
{{--                    <div class="branches-title-wrap">--}}
{{--                        <h2 class="branches-title">센터전경</h2>--}}
{{--                    </div>--}}
{{--                    <div class="img-wrap">--}}
{{--                        <div class="slider">--}}
{{--                            <ul>--}}
{{--                                @foreach ($branchInfo['vista_images'] as $images)--}}
{{--                                    <li>--}}
{{--                                        <figure>--}}
{{--                                        <img src="{{$images->url}}" alt="샌프란 · 샌디에고  글로벌센터 전경 슬라이더">--}}
{{--                                            <figcaption>{{$images->desc}}</figcaption>--}}
{{--                                        </figure>--}}
{{--                                    </li>--}}
{{--                                @endforeach--}}
{{--                            </ul>--}}
{{--                            <div class="paging-number"></div>--}}
{{--                        </div>--}}
{{--                        <div class="pager">--}}
{{--                            <!-- [D]: slider의 ul 내용과 동일합니다. -->--}}
{{--                            <ul>--}}
{{--                                @foreach ($branchInfo['vista_images'] as $images)--}}
{{--                                    <li>--}}
{{--                                        <figure>--}}
{{--                                        <img src="{{$images->url}}" alt="샌프란 · 샌디에고  글로벌센터 전경 리스트">--}}
{{--                                            <figcaption>{{$images->desc}}</figcaption>--}}
{{--                                        </figure>--}}
{{--                                    </li>--}}
{{--                                @endforeach--}}
{{--                            </ul>--}}
{{--                        </div>--}}
{{--                    </div>--}}
{{--                </div>--}}
{{--            </section>--}}

            <!-- 팝업-->
            <div class="area-layer-popup popup-sample">
                <div class="popup-container small-popup">
                    <!--
                    <div class="popup-title">
                        <p class="heading-text">타이틀</p>
                    </div>-->
                    <div class="popup-content">
                        <p>주소가 복사되었습니다.</p>

                        <p>원하는 곳에 붙여넣기(Ctrl+V)해주세요.</p>
                    </div>

                    <div class="popup-close-x">
                        <i class="ui-layout-close">팝업닫기</i>
                    </div>
                </div>
            </div>

            <!-- 찾아오시는길 -->
            <section class="branches-location" id="branches-location">
                <div class="flex-wrap">
                    <div class="branches-title-wrap">
                        <h2 class="branches-title">찾아오시는길</h2>
                        <p class="add-func">
                            <button class="btn-share">주소공유</button>
                            <button class="btn-large"><a href="{{ $branchInfo['map_url'] }}" target="_blank" class="">크게보기</a></button>

                            <!-- 지도 복사 url hidden처리되어 있으면 클립보드 복사가 안되기 때문에 안보이게 처리 -->
                            <input class="branchmap-url" id="map-url" type="text" value="{{ $branchInfo['map_url'] }}" readonly>
                        </p>
                    </div>
                    <div class="column">
                        <div class="map-wrap">
                            <div class="map-data">
                                <div class="map" id="map">
                                    <iframe class="branch-map" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d424.2366498048672!2d-122.07821252695548!3d37.66159224407427!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x808f93e6ab24b663%3A0x289f8825a71317fd!2zNzIyIEtpbm8gQ3QgQVBUIDQsIEhheXdhcmQsIENBIDk0NTQ0IOuvuOq1rQ!5e0!3m2!1sko!2skr!4v1654568040587!5m2!1sko!2skr" frameborder="0" allowfullscreen=""></iframe>
                                </div>
                            </div>
                            <div class="map-info">
                                <p class="address">{{ $branchInfo['address_eng'] }}</p>
                                <p class="tel">{{ $branchInfo['tel'] }}</p>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        </div>
    </article>
    <script type="text/javascript" src="/js/branch/common.js"></script>
    <script type="text/javascript" src="/js/branch/overseas.js"></script>
@endsection