{{-- Part of tuesday_design project. --}}
@extends('front.layouts.app')

@section('style')
    <link href="{{ asset('css/work.css') }}" rel="stylesheet" charset="utf-8"/>
    <link href="{{ asset('plugins/owl/assets/owl.carousel.min.css') }}" rel="stylesheet" charset="utf-8"/>
    <link href="{{ asset('plugins/owl/assets/owl.theme.default.min.css') }}" rel="stylesheet" charset="utf-8"/>
@stop

@section('script')
    <script src="{{ asset('plugins/owl/owl.carousel.min.js') }}"></script>
    <script src="{{ asset('js/clipboard.min.js') }}"></script>
    <script src="{{ asset('js/jquery.simpleSocialShare.js') }}"></script>
    <script>
        jQuery(function ($) {
            let $window = $(window);
            let itemToIphone = 1.2055974166;
            let iphoneTop = 0.5172413793;
            let iphoneBottom = 1 - iphoneTop;
            let mobile_slide = $('.mobile-slide');
            let iphone6 = $('.iphone6-container');
            let item_width, item_height, iphone_height, owl_pt, owl_pb;
            let title_en = $('.scale--js');
            let title_en_text = $('.scale--js.get-width');

            mobile_slide.owlCarousel({
                stagePadding: 50,
                center: true,
                nav: true,
                loop: true,
                dots: true,
                margin: 15,
                onInitialized: resizeIphone6,
                responsive: {
                    1200: {
                        margin: 25,
                        items: 5
                    },
                    1000: {
                        stagePadding: 30,
                        items: 4
                    },
                    800: {
                        items: 3
                    }
                }
            });

            iphone6.appendTo(mobile_slide);

            $window.on('load resize', function () {
                resizeIphone6();
                flexiableSize();
            });

            function resizeIphone6() {
                item_width = mobile_slide.find('.owl-item').width();
                item_height = mobile_slide.find('.owl-item').height();
                iphone6.find('img').css('width', item_width * itemToIphone + 'px');

                iphone_height = iphone6.find('img').height();
                owl_pt = (iphone_height - item_height) * iphoneTop;
                owl_pb = (iphone_height - item_height) * iphoneBottom;

                mobile_slide.find('.owl-stage-outer').css('padding', owl_pt + 'px 0 ' + owl_pb + 'px');

                imagesLoaded(document.body, function () {
                    iphone6.fadeTo(800, 1);
                });
            }

            // Copy Site Link
            // https://github.com/zenorocha/clipboard.js
            // Copy Plugin

            new ClipboardJS('.copySiteLink');
            $('.copySiteLink').on('click', function () {
                // Popup window
                var popWindow = $('.copySiteLink-outer');
                popWindow.fadeTo(0, 1);
                popWindow.find('.box-wrapper').addClass('show').fadeIn();
                popWindow.find('.box-inner').fadeIn().delay(500);

                setTimeout(function () {
                    popWindow.fadeTo(0, 0);
                }, 1500);

            });

            // Social Share
            $('.socialShareBtn').simpleSocialShare();

            flexiableSize();

            function flexiableSize() {
                // Font Size Flexible
                // 清空上一次的設定值
                title_en.css('font-size', '');

                do {
                    if (parseInt(title_en.css('height')) > parseInt(title_en.css('line-height'))
                        || title_en_text.width() > title_en.width()) {
                        title_en.css('font-size', parseInt(title_en.css('font-size')) - 1 + 'px');
                    } else {
                        title_en.css('font-size', parseInt(title_en.css('font-size')) + 1 + 'px');
                    }
                }
                while (parseInt(title_en.css('height')) !== parseInt(title_en.css('line-height'))
                        || title_en.width() < title_en_text.width());
            }
        });
    </script>
@stop

@section('main-content')
    <div class="main-content-wrapper">
        <div class="main-content-inner">
            <div class="page-title scale__container--js">
                <div class="title-en scale--js">
                    {{ $work->slug }}
                </div>
                <div class="title-en scale--js get-width">
                    {{ $work->slug }}
                </div>
                <h1 class="title-tw">
                    {{ $work->title }}
                </h1>
                <h2 class="work-sub-title">
                    {{ $work->sub_title }}
                </h2>
            </div>

            <div class="content-wrapper row no-gutters">

                <!--Works-->
                <div class="work-info col-xl-4 offset-xl-1 order-xl-2">
                    <div class="work-info-inner">
                        <div class="work-title">
                            {{ $work->title }}
                        </div>
                        <div class="work-sub-title">
                            {{ $work->sub_title }}
                        </div>
                        <div class="infos">
                            <div class="info d-flex">
                                <div class="info-title">
                                    Category
                                </div>
                                <div class="info-content with-link">

                                    @foreach ($work->tags as $tag_tag)
                                        <a href="{{ route('front.work') . '#' . $tag_tag->name }}">{{ $tag_tag->name }}</a>
                                    @endforeach

                                </div>
                            </div>
                            <div class="info d-flex">
                                <div class="info-title">
                                    Tag
                                </div>
                                <div class="info-content with-link">

                                    @foreach ($work->categories as $category_tag)
                                        <a href="{{ route('front.work') . '#' . $category_tag->name }}">{{ $category_tag->name }}</a>
                                    @endforeach

                                </div>
                            </div>
                            <div class="info d-flex">
                                <div class="info-title">
                                    Client
                                </div>
                                <div class="info-content">
                                    {{ $work->client }}
                                </div>
                            </div>
                            <div class="info d-flex">
                                <div class="info-title">
                                    Role
                                </div>
                                <div class="info-content">
                                    {!! nl2br($work->credits) !!}
                                </div>
                            </div>
                            <div class="info d-flex">
                                <div class="info-title">
                                    Date
                                </div>
                                <div class="info-content">
                                    {{ $work->created_at->format('M.Y') }}
                                </div>
                            </div>
                            @if (isset($work->url) && $work->url !== '')
                                <div class="info d-flex">
                                    <div class="info-title">
                                        Link
                                    </div>
                                    <div class="info-content work-link with-link">
                                        <a href="{{ $work->url }}" target="_blank">{{ $work->url }}</a>
                                    </div>
                                </div>
                            @endif
                        </div>
                        <div class="share-block d-flex d-sm-block">
                            <a class="copySiteLink" data-clipboard-text="{{ url()->current() }}" href="javascript://"><i class="icon-link"></i>複製連結</a>
                            <a class="socialShareBtn button__style"
                               href="javascript://"
                               data-share-url="{{ url()->current() }}"
                               data-share-network="facebook"
                               data-share-title="{{ $work->title }}"
                               data-share-description="{{ $work->seo_description }}"
                               data-share-media="{{ asset('storage/' . $work->thumbs_image) }}">
                                <i class="icon-facebook-outline"></i>分享</a>
                            </a>
                        </div>
                    </div>
                </div>
                <div class="content col-xl-7 order-xl-1">
                    <div class="work-description">
                        {!! $work->description !!}
                    </div>
                </div>

                <div class="content-mobile-wrapper col-xl-12 order-xl-3 {{ isset($work->rwd_thumbs) && $work->rwd_thumbs !== '[]' ? '' : 'no-rwd-img' }}">
                    <div class="content-mobile">
                        <div class="content-mobile-title">
                            手機版展示
                        </div>
                        <p>
                            RWD響應式設計，完美重現設計師原稿，讓手機用戶也能擁有很好的使用體驗。
                        </p>

                        @if (isset($work->rwd_thumbs) && $work->rwd_thumbs !== '[]')
                            <div class="iphone6-container">
                                <img class="img-fluid" src="{{ asset('images/iphone6.png') }}" alt="">
                            </div>
                            <div class="mobile-slide owl-carousel owl-theme">
                                @php
                                    $rwd_images = json_decode($work->rwd_thumbs);
                                @endphp

                                @foreach($rwd_images as $rwd_image)
                                    <div>
                                        <img src="{{ asset('storage/' . $rwd_image )}}" />
                                    </div>
                                @endforeach
                            </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="callAction-wrapper wrapper">
        <div class="callAction-inner">
            <h4>
                喜歡我們的作品？<br class="d-block d-xl-none"/>欲知更多合作細節<br/>
                歡迎來信與我們聯繫：）
            </h4>
            <a class="callAction-button" href="{{ route('front.contact') }}">聯絡我們</a>
        </div>
        <img class="d-none d-sm-block" src="{{ asset('images/about_us_footer_desktop.png') }}" alt="">
        <img class="d-block d-sm-none" src="{{ asset('images/about_us_footer.png') }}" alt="">
    </div>
    <div class="copySiteLink-outer">
        <div class="copySiteLink-success d-flex align-items-center">
            <div class="box-wrapper show">
                <div class="box-inner">
                    <h3>連結已複製</h3>
                </div>
            </div>
        </div>
    </div>
@stop