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

@section('content')

    <article class="container brand-branches overseas kualalumpur">
        <!-- 페이지타이틀 : 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'] }}</p>
                                    </dd>
                                </dl>
                                <dl>
                                    <dt>주소</dt>
                                    <dd>
                                        {{ $branchInfo['address_eng'] }}
                                    </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/kualalumpur/kualalumpur1.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/kualalumpur/kualalumpur2.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/kualalumpur/kualalumpur3.jpg" alt="쿠알라룸푸르 글로벌센터 현지서비스3"></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/kualalumpur/kualalumpur4.jpg" alt="쿠알라룸푸르 글로벌센터 현지서비스4"></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/kualalumpur/kualalumpur5.jpg" alt="쿠알라룸푸르 글로벌센터 현지서비스5"></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/kualalumpur/kualalumpur6.jpg" alt="쿠알라룸푸르 글로벌센터 현지서비스6"></figure>
                            <p class="subject">
                                비자 이민 서비스
                            </p>
                            <p class="context">
                                요구되는 각 비자 유형에 따라 서류 준비부터 발급까지 안내 및 대행 서비스 해 드립니다. 더불어 이민과 장기 거주에 필요한 전반적인 상담 후 MM2H 비자 발급 대행 서비스도 진행합니다. 성공적인 해외 생활이 되도록 최선을 다해 도와 드리겠습니다.
                            </p>
                        </div>
                    </div>
                    <div class="detail-view">
                        <h3 class="title">도착 전 서비스</h3>
                        <ul class="check-list">
                            <li>현지 숙소 예약</li>
                            <li>공항 픽업 서비스</li>
                            <li>보험 가입</li>
                            <li>안내 책자 제공</li>
                        </ul>
                        <h3 class="title">도착 후 서비스</h3>
                        <ul class="check-list">
                            <li>학교 입학 서비스</li>
                            <li>비자 진행 도우미</li>
                            <li>학교 사전 답사 서비스</li>
                            <li>차량 렌트&구입</li>
                            <li>주거지 계약</li>
                            <li>계좌 개설 안내</li>
                        </ul>
                        <h3 class="title">현지생활 지원 서비스</h3>
                        <ul class="check-list">
                            <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 class="text-color">“안녕하세요. edm 말레이시아 쿠알라룸푸르 글로벌센터입니다."</em>
                        </p>
                        <p>
                            <em>
                                말레이시아로 유학을 오시는 분들을 위해 저희 센터가 현지에서 정성껏 서포트 해 드리겠습니다.
                            </em>
                        </p>
                        <p>
                            저희 쿠알라룸푸르 글로벌센터는 말레이시아 현지에서 최대, 최고의 서비스를 자랑합니다.<br>
                            매년 말레이시아를 방문하는 약 200여명의 학생들의 유학생활을 돕고 있으며, 학생과 가정에 필요한 맞춤 서비스를 제공해 드리고 있습니다.<br>
                            항상 학생의 입장에서 학교 컨설팅을 해 드리며 현지에서 유학 중 상담이 필요하면 언제든 함께 도와 드리겠습니다.
                        </p>
                    </div>
                    <div class="profile">
                        <ul>
                            <li>
                                <em class="title">주요이력</em>
                                말레이시아 현지 유학 전문 17년 이상<br>
                                말레이시아 국제학교와 대학교 졸업한 직원들 다수
                            </li>
                            <li>
                                <em class="title">고객진학사례</em>
                                Taylor's University, Monash University Malaysia, Inti University, UCSI University, Sunway University 등 다수
                            </li>
                            <li>
                                <em class="title">조기유학 고객진학사례</em>
                                ISKL, BSKL, Oasis international School, Taylor's International School, Nexus International School, Kingsley International School, GEMS International School, St Joseph International School 등 다수
                            </li>
                        </ul>
                    </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-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>
                                <li>
                                    <figure>
                                        <img src="https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/r/v1/pages/branches/overseas/kualalumpur/kualalumpur-overview1.jpg" alt="쿠알라룸푸르 글로벌센터 내부전경 슬라이더">
                                        <figcaption>내부전경1</figcaption>
                                    </figure>
                                </li>
                                <li>
                                    <figure>
                                        <img src="https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/r/v1/pages/branches/overseas/kualalumpur/kualalumpur-overview2.jpg" alt="쿠알라룸푸르 글로벌센터 내부전경 슬라이더">
                                        <figcaption>내부전경2</figcaption>
                                    </figure>
                                </li>
                                <li>
                                    <figure>
                                        <img src="https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/r/v1/pages/branches/overseas/kualalumpur/kualalumpur-overview3.jpg" alt="쿠알라룸푸르 글로벌센터 내부전경 슬라이더">
                                        <figcaption>내부전경3</figcaption>
                                    </figure>
                                </li>
                                <li>
                                    <figure>
                                        <img src="https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/r/v1/pages/branches/overseas/kualalumpur/kualalumpur-overview4.jpg" alt="쿠알라룸푸르 글로벌센터 내부전경 슬라이더">
                                        <figcaption>내부전경4</figcaption>
                                    </figure>
                                </li>
                                <li>
                                    <figure>
                                        <img src="https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/r/v1/pages/branches/overseas/kualalumpur/kualalumpur-overview5.jpg" alt="쿠알라룸푸르 글로벌센터 내부전경 슬라이더">
                                        <figcaption>내부전경5</figcaption>
                                    </figure>
                                </li>
                                <li>
                                    <figure>
                                        <img src="https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/r/v1/pages/branches/overseas/kualalumpur/kualalumpur-overview6.jpg" alt="쿠알라룸푸르 글로벌센터 내부전경 슬라이더">
                                        <figcaption>내부전경6</figcaption>
                                    </figure>
                                </li>
                            </ul>
                            <div class="paging-number"></div>
                        </div>
                        <div class="pager">
                            <!-- [D]: slider의 ul 내용과 동일합니다. -->
                            <ul>
                                <li>
                                    <figure>
                                        <img src="https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/r/v1/pages/branches/overseas/kualalumpur/kualalumpur-overview1.jpg" alt="쿠알라룸푸르 글로벌센터 내부전경 리스트">
                                        <figcaption>내부전경1</figcaption>
                                    </figure>
                                </li>
                                <li>
                                    <figure>
                                        <img src="https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/r/v1/pages/branches/overseas/kualalumpur/kualalumpur-overview2.jpg" alt="쿠알라룸푸르 글로벌센터 내부전경 리스트">
                                        <figcaption>내부전경2</figcaption>
                                    </figure>
                                </li>
                                <li>
                                    <figure>
                                        <img src="https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/r/v1/pages/branches/overseas/kualalumpur/kualalumpur-overview3.jpg" alt="쿠알라룸푸르 글로벌센터 내부전경 리스트">
                                        <figcaption>내부전경3</figcaption>
                                    </figure>
                                </li>
                                <li>
                                    <figure>
                                        <img src="https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/r/v1/pages/branches/overseas/kualalumpur/kualalumpur-overview4.jpg" alt="쿠알라룸푸르 글로벌센터 내부전경 리스트">
                                        <figcaption>내부전경4</figcaption>
                                    </figure>
                                </li>
                                <li>
                                    <figure>
                                        <img src="https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/r/v1/pages/branches/overseas/kualalumpur/kualalumpur-overview5.jpg" alt="쿠알라룸푸르 글로벌센터 내부전경 리스트">
                                        <figcaption>내부전경5</figcaption>
                                    </figure>
                                </li>
                                <li>
                                    <figure>
                                        <img src="https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/r/v1/pages/branches/overseas/kualalumpur/kualalumpur-overview6.jpg" alt="쿠알라룸푸르 글로벌센터 내부전경 리스트">
                                        <figcaption>내부전경6</figcaption>
                                    </figure>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </section>

            <!-- 찾아오시는길 -->
            <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!1d3984.326596981312!2d101.57596101475696!3d3.0065277978104303!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x31cdb31b10af1979%3A0x1942153a283098c6!2sKingsley%20International%20School!5e0!3m2!1sko!2skr!4v1588579163315!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