@extends('layouts.app')

@section('content')
<div class="slide-container" id="js-wrapper">
    <div class="sections-container" id="index-container">
        <section class="main-section main-section1">
            <div class="text-white d-none d-xl-block">
                <div class="font-54 mobile-font-42 text-white">
                    청담K는 올바른 가치를 추구하고<br>
                    올바른 문화를 선도 합니다.
                </div>
                <div class="font-30 margin-t-2 text-white">
                    국내 미술 업계의 성장을 위해 노력하는 청담K
                </div>
                <div class="font-18 margin-t-2 text-white">
                    청담 K는 국내 미술계의 본질적인 근력을 기르기 위해 역량 있는 작가를 발굴하고<br>
                    국제 무대에 한국의 미술과 작가를 세계에 알리고자 열정, 진심과 전문성을 가진<br>
                    이들이 모여 만들어졌습니다.
                </div>
            </div>
            <div class="main-sub-links d-none d-xl-flex">
                <div class="d-flex flex-column">
                    <a href="{{ route('arts.category', ['painting'], false) }}" class="sub-link-item sub-link-item1">
                        <div class="font-26">미술작품</div>
                        <div class="font-20">Painting</div>
                    </a>
                    <a href="{{ route('arts.category', ['jewelry'], false) }}" class="sub-link-item sub-link-item2">
                        <div class="font-26">쥬얼리</div>
                        <div class="font-20">Jewelry</div>
                    </a>
                </div>
                <div class="d-flex flex-column">
                    <a href="{{ route('arts.category', ['ceramics'], false) }}" class="sub-link-item sub-link-item3">
                        <div class="font-26">전통도자기</div>
                        <div class="font-20">Ceramics</div>
                    </a>
                    <a href="{{ route('artist.list', null, false) }}" class="sub-link-item sub-link-item4">
                        <div class="font-26">저명한 작가</div>
                        <div class="font-20">Artist</div>
                    </a>
                </div>
            </div>
            <div class="text-white d-block d-xl-none text-center">
                <div class="font-32">❝</div>
                <div class="font-32">
                    청담K는 올바른 가치를 <br>
                    추구하고 올바른 문화를 <br>
                    선도합니다.
                </div>
                <div class="font-32">❞</div>
                <div class="font-24">
                    국내 미술업계의 성장을 위해<br>
                    노력하는 청담K
                </div>
            </div>
            <div class="mobile-scroll d-flex flex-column d-xl-none justify-content-center align-content-center">
                <div class="jost font-18 text-white down-text" style="font-weight: 700; letter-spacing:0">SCROLL</div>
                <div class="text-center down-arrow-box"><img src="/images/arrow3.png" class="img-fluid down-arrow"/></div>
            </div>
        </section>
        <section class="main-section main-section2">
            <div class="text-white d-none d-xl-block">
                <div class="font-54 text-white">
                    청담K의 컬렉터가 자부심을 가질 수 있고<br>
                    더 좋은 작품을 소장하게 지원합니다.
                </div>
                <div class="font-30 margin-t-2 text-white">
                    인증된 컬렉터 커뮤니티, 포럼 등 다양한 교육 컨텐츠를 진행<br>
                </div>
                <div class="font-18 margin-t-2 text-white">
                    청담 K는 국내외 저명한 현대미술가 전시를 개최하며, 컬렉터들을 위한 보다 쉽고 재미있게 미술을 배울 수 있는<br>
                    클래스와 포럼을 지원합니다. 또한 품격과 인증된 청담 K 컬렉터 멤버쉽을 통해 다양한 교육 프로그램과 커뮤니티로<br>
                    컬렉터들이 더 귀한 작품을 소장할 수 있도록 진행하고 있습니다.<br><br>

                    청담 K의 컬렉터가 고품격 문화를 창출하는 갤러리에 자부심을 가지고 한국 미술을 배우고 접하며 안목과 수준을<br>
                    높여갈 수 있게 프라이빗하고 폭넓게 커뮤니티의 장을 만들어가고 있습니다.<br>
                </div>
            </div>
            <div class="text-white d-block d-xl-none text-center">
                <div class="font-32">❝</div>
                <div class="font-32">
                    청담K의 컬렉터가 자부심을<br> 가질 수 있고 더 좋은 작품을<br> 소장하게 지원합니다.
                </div>
                <div class="font-32">❞</div>
                <div class="font-24">
                    인증된 컬렉터 커뮤니티, 포럼 등<br>
                    다양한 교육 컨텐츠를 진행
                </div>
            </div>
        </section>
        <section class="main-section main-section3">
            <div class="text-white d-none d-xl-block">
                <div class="font-54 text-white">
                    한국 미술을 K-POP에 버금가는 수준으로<br>
                    세계인이 인정하게 만들도록 노력 하겠습니다.
                </div>
                <div class="font-30 margin-t-2 text-white">
                    궁극적으로 건강하고 품격을 갖춘 국내 미술업계와 한국 문화의 선진화
                </div>
                <div class="font-18 margin-t-2 text-white">
                    청담 K는 진정 한국 미술 업계의 발전과 미술과 미술산업의 진심을 가진 사람들이 모여 일합니다.<br>
                    그렇기에 국제적으로 활발하게 한국 미술을 세계에 알리고자 교류하며, 대한민국의 훌륭한 작가를 발굴하고<br>
                    소개해 국내 미술계와 미술시장의 품격 있는 선진화로 이어지게 하겠습니다.
                </div>
            </div>
            <div class="text-white d-block d-xl-none text-center">
                <div class="font-32">❝</div>
                <div class="font-32">
                    한국 미술을 K-POP에<br>
                    버금가는 수준으로 세계인이 <br>인정하게 만들도록 노력 하겠습니다.
                </div>
                <div class="font-32">❞</div>
                <div class="font-24">
                    궁극적으로 건강하고 품격을 갖춘<br>
                    국내 미술업계와 한국 문화의 선진화
                </div>
            </div>
        </section>
        <section class="main-section main-section4 d-flex">
            <div class="section2-image align-items-center">
                <div class="text-white d-none d-xl-block">
                    <div class="font-54 text-white">
                        당신의 예술적 안목에<br>
                        경제적 가치를 더해 드립니다.
                    </div>
                    <div class="font-30 margin-t-2 text-white">
                        대한민국 대표 하이엔드-문화
                    </div>
                    <div class="font-18 margin-t-2 text-white">
                        국내 최초로 2대째 내려오는 40년 전통의 유서 깊은 도자기와 미술품, 귀금속을 통해<br>
                        청담동만의 전통성 있는 고유한 고급 문화를 향유하며, 개인과 기업에게 경제적이고도<br>
                        풍성한 심적, 예술적 가치를 향유케 하고 있습니다.
                    </div>
                </div>

                <div class="text-white d-block d-xl-none text-center">
                    <div class="font-32">❝</div>
                    <div class="font-32">
                        당신의 예술적 안목에<br>
                        경제적 가치를 더해 드립니다.
                    </div>
                    <div class="font-32">❞</div>
                    <div class="font-24">
                        대한민국 대표 하이엔드-문화
                    </div>
                    <div class="font-18 margin-t-2">
                        국내 최초로 2대째 내려오는 40년 전통의 유서 깊은 도자기와 미술품, 귀금속을 통해
                        청담동만의 전통성 있는 고유한 고급 문화를 향유하며, 개인과 기업에게 경제적이고도
                        풍성한 심적, 예술적 가치를 향유케 하고 있습니다.
                    </div>
                </div>
            </div>
            <div class="section2-intro p-0">
                <div class="center-info line-bottom">
                    <div class="info-title">
                        <img src="/images/word-logo.png" class="word-logo img-fluid"/>
                    </div>
                    <div class="info-operate d-flex">
                        <div class="operate-item" style="flex:1">
                            <div class="operate-title">오픈시간</div>
                            <div class="operate-numbers">{{ $settings->open_time }}</div>
                        </div>
                        <div class="operate-item" style="flex:1">
                            <div class="operate-title">대표전화</div>
                            <div class="operate-numbers">{{ $settings->site_phone }}</div>
                        </div>
                    </div>
                    <div class="info-btns">
                        <a href="{{ route('pages', ['greeting'], false) }}" class="info-btn">
                            <img src="/images/icons/btn-greeting.png" class="info-btn-img img-fluid"/>
                            <div class="info-btn-title">대표인사말</div>
                        </a>
                        <a href="{{ route('pages', ['gallery'], false) }}" class="info-btn">
                            <img src="/images/icons/btn-intro.png" class="info-btn-img img-fluid"/>
                            <div class="info-btn-title">갤러리소개</div>
                        </a>
                        <a href="{{ route('pages', ['visit'], false) }}" class="info-btn">
                            <img src="/images/icons/btn-location.png" class="info-btn-img img-fluid"/>
                            <div class="info-btn-title">오시는길</div>
                        </a>
                    </div>
                </div>
                <div class="item-page swiper" id="item-page">
                    <div class="swiper-wrapper">
                        <div class="item1 swiper-slide">
                            <div class="item-title">도자기</div>
                            <div class="item-desc">
                                전통 도자기로<br/>
                                이미 2대째 40년간 이어지고 있고<br/>
                                청담K 도자기는 최고의 가치를<br/>
                                자부하고 있습니다.
                            </div>
                        </div>
                        <div class="item2 swiper-slide">
                            <div class="item-title">그림</div>
                            <div class="item-desc">
                                정택영화백 포함 김세정<br/>
                                등등 고가의 그림을 보유하고있습니다.
                            </div>
                        </div>
                        <div class="item3 swiper-slide">
                            <div class="item-title">쥬얼리</div>
                            <div class="item-desc">
                                쥬얼리 귀금속은 청담k<br/>
                                다양한 종류 및 고가의 제품을<br/>
                                보유 하고 있습니다.
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <section class="main-section main-section5 d-none d-xl-block" id="foot-section">
            <div class="ft-title">
                <img src="/images/word-logo-white.png" class="img-fluid" style="width:194px"/>
                <span class="jost news">News</span>
            </div>
            <div class="ft-board d-flex">
                <div class="notice-box">
                    <div class="board-title padding-r-4">
                        <div class="eng">Notice</div>
                        <div class="kor d-flex justify-content-between">공지사항 <span><a href="{{ route('board.list', ['notice'], false) }}" class="text-white font-16">+ 더보기</a></span></div>
                    </div>
                    <div class="board-list padding-r-4">
                        @if($notice)
                            @foreach($notice as $i => $row)
                                <div class="d-flex justify-content-between footer-list-item">
                                    <div class="main-subject"><a class="text-white" href="{{ route('board.view', ['notice', $row->uid], false) }}"><span>{{ $row->subject }}</span></a></div>
                                    <div>{{ date('Y.m.d', strtotime($row->created_at)) }}</div>
                                </div>
                            @endforeach
                        @endif
                    </div>
                </div>
                <div class="news-box">
                    <div class="board-title padding-l-4 padding-r-4">
                        <div class="eng">News</div>
                        <div class="kor d-flex justify-content-between">뉴스 <span><a href="{{ route('board.list', ['news'], false) }}" class="text-white font-16">+ 더보기</a></span></div>
                    </div>
                    <div class="board-list padding-l-4 padding-r-4">
                        @if($news)
                            @foreach($news as $i => $row)
                                <div class="d-flex justify-content-between footer-list-item">
                                    <div class="main-subject"><a class="text-white" href="{{ route('board.view', ['news', $row->uid], false) }}"><span>{{ $row->subject }}</span></a></div>
                                    <div>{{ date('Y.m.d', strtotime($row->created_at)) }}</div>
                                </div>
                            @endforeach
                        @endif
                    </div>
                </div>
                <div class="info-box line-left">
                    <div class="board-title padding-l-4">
                        <div class="eng">{{ $settings->site_engName }}</div>
                        <div class="kor">{{ $settings->site_name }}</div>
                    </div>
                    <div class="board-list padding-l-4">
                        <div class="d-flex align-items-center margin-b-2">
                            <img src="/images/icons/footer-info-icon1.png" style="width:40px; margin-right:15px"/>
                            <div class="font-18">{{ $settings->site_phone }}</div>
                        </div>
                        <div class="d-flex align-items-center margin-b-2">
                            <img src="/images/icons/footer-info-icon2.png" style="width:40px; margin-right:15px"/>
                            <div class="font-18">{{ $settings->site_fax }}</div>
                        </div>
                        <div class="d-flex align-items-center margin-b-2">
                            <img src="/images/icons/footer-info-icon3.png" style="width:40px; margin-right:15px"/>
                            <div class="font-18">{!! str_replace(')', ')<br/>', $settings->site_address) !!}</div>
                        </div>
                        <div class="d-flex align-items-center">
                            <img src="/images/icons/footer-info-icon4.png" style="width:40px; margin-right:15px"/>
                            <div class="font-18">{{ $settings->open_time }}</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="footer d-flex">
                <div class="margin-r-4 d-flex flex-column justify-content-center">
                    <img src="/images/logo.png" style="width:62px;" class="img-fluid"/>
                </div>
                <div class="d-flex flex-column" style="flex:1">
                    <div class="d-flex justify-content-between">
                        <div>
                            <span class="text-white info-term" style="cursor:pointer" id="infoTerm">개인정보처리방침</span>
                            <span class="padding-l-1 padding-r-1">|</span> <span class="text-white service-term" style="cursor:pointer" id="serviceTerm">서비스 이용약관</span>
                        </div>
                        <div class="d-flex">
                            <div class="margin-r-2">FLOLLOW US</div>
                            <a href="{{ $settings->url_facebook }}" target="_blank" class="footer-social-link margin-r-1"><img src="/images/icons/icon-facebook.png" style="width:18px"/></a>
                            <a href="{{ $settings->url_instagram }}" target="_blank" class="footer-social-link margin-r-1"><img src="/images/icons/icon-instar.png" style="width:18px"/></a>
                            <a href="{{ $settings->url_youtube }}" target="_blank" class="footer-social-link"><img src="/images/icons/icon-youtube.png" style="width:18px"/></a>
                        </div>
                    </div>
                    <div class="company-info">
                        <div>
                            총괄대표 : {{ $settings->ceo_name }}
                        </div>
                        <div>
                            E. {{ $settings->site_email }}&nbsp; T. {{ $settings->site_phone }}&nbsp; F. {{ $settings->site_fax }}
                        </div>
                        <div>{{ $settings->site_address }}</div>
                    </div>
                    <div class="copyright">
                        {{ $settings->copyright }}
                    </div>
                </div>
            </div>
        </section>
    </div>
</div>
<div class="scroll d-none" id="scroll-arrow">
    <div class="jost font-18 text-white" style="font-weight: 700; letter-spacing:0">SCROLL</div>
    <div class="margin-l-1 arrow"><div class="arrow-line"></div><i class="arrow-end right"></i></div>
</div>

@endsection

@push('scripts')

<script>
    $(function () {
        var ww = window.innerWidth;

        TweenLite.defaultEase = Linear.easeNone;
        var controller = new ScrollMagic.Controller();

        var scroll = null
        var scrollType = ""

        if(ww >= 1400){
            scroll = createScroll()
        }else if(ww < 1400 && ww >= 1200){
            scroll = middleCreateScroll()
        }

        window.onscroll = function() {myScroll()}

        function createScroll() {
            var t1 = new TimelineMax();
            $('.k-sidebar').removeClass('position-fixed')
            t1
            .fromTo("section.main-section2", 1, {x:"100%"}, {x:"0%"})
            .fromTo("section.main-section3", 1, {x:"-100%"}, {x:"0%"})
            .fromTo("section.main-section4", 1, {y:"-100%"}, {y:"0%"})
            .fromTo("section.main-section5", 1, {x:"100%"}, {x:"0%"})

            scrollType = "pc"

            return new ScrollMagic.Scene({
                triggerElement: '#index-conatiner',
                triggerHook: 'onLeave',
                duration: '1000%'
            })
                .setPin('#js-wrapper')
                .setTween(t1)
                .setClassToggle('.main-section5', "section-none-scroll")
                .setClassToggle('#scroll-arrow', "d-xl-flex")
                .addTo(controller)
        }

        function middleCreateScroll() {
            var t2 = new TimelineMax();
            $('.k-sidebar').addClass('position-fixed')

            scrollType = "middle"

            t2
            .fromTo("section.main-section2", 1, {x:"100%"}, {x:"0%"})
            .fromTo("section.main-section3", 1, {x:"-100%"}, {x:"0%"})
            .fromTo("section.main-section4", 1, {y:"100%"}, {y:"0%"})
            .fromTo("section.main-section5", 1, {x:"100%"}, {x:"0%"})

            return new ScrollMagic.Scene({
                triggerElement: '#index-conatiner',
                triggerHook: 'onLeave',
                duration: '1000%'
            })
                .setPin('#js-wrapper')
                .setTween(t2)
                .setClassToggle('#scroll-arrow', "d-xl-flex")
                .addTo(controller)
        }

        function myScroll() {
            var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
            var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
            var scrolled = (winScroll / height) * 100;
            document.getElementById("myBar").style.width = scrolled + "%";
        }

    //     var ww = window.innerWidth;

    //     var noSlides = $("section").length;
    //     var slideWidth = $("section").width();

    //     var slideContainerWidth = slideWidth * noSlides - ww;
    //     console.log(noSlides, slideWidth, slideContainerWidth)
    //     var actionHorizontal = new TimelineMax()
    //             .to("#index-container", 1, {x: -slideContainerWidth, ease: Power0.easeNone});

    //     var horizontal = createHorizontal();
    //     // var wipeContainer = createWipe();

    //     function createHorizontal() {
    //         return new ScrollMagic.Scene({
    //             triggerElement: ".slide-container",
    //             triggerHook: "onLeave",
    //             duration: slideContainerWidth,
    //         })
    //         .setPin('.slide-container')
    //         .setTween(actionHorizontal)
    //         .addIndicators()
    //         .addTo(controller);
    //     }

    //     controller.scrollTo(function (newpos) {
    //         //TweenMax.to(window, 1, { scrollTo: { x: newpos } });
    //         TweenMax.to(window, 1, {
    //         scrollTo: {
    //             y: newpos,
    //             autoKill: true,
    //         },
    //         ease: Power3.easeOut,
    //         });
    //     });

        $(window).resize(function () {
            ww = window.innerWidth;
            if(ww < 1200 && scroll){
                scroll.destroy(true);
                scrollType = ""
                scroll = null
                $('.k-sidebar').addClass('position-fixed')
                $('.main-section').removeAttr('style')
            }else if(ww < 1400 && ww >= 1200){
                if(scroll){
                    if(scrollType == "pc"){
                        scroll.destroy(true);
                        scroll = middleCreateScroll()
                    }
                }else{
                    scroll = middleCreateScroll()
                }
            }else if (ww >= 1400){
                if(scroll){
                    if(scrollType == "middle"){
                        scroll.destroy(true);
                        scroll = createScroll()
                    }
                }else{
                    scroll = createScroll()
                }
            }
        });
    });
</script>
@endpush

@push('style')
    <link rel="stylesheet" type="text/css" href="/css/board.css?v={{ $now }}">
@endpush