@extends('layouts.app')
@section('style')
    <link rel="stylesheet" href="{{ asset('app/css/vendors/slick.css') }}"/>
@endsection
@section('content')
    @php
        $userCurrent = $user??null;
        $userId = $userCurrent ? $userCurrent->id : '';
    @endphp

    <!-- MAIN -->
    <main class="page-maincontent" id="page-main-content">
        <!-- SECTION Post Detail -->
        <section class="section section-post-detail">
            <!-- Background -->
            <div class="bg-holder">
                <figure class="img-holder bg-mode bg-image">
                    <picture>
                        <source srcset="{{asset('app/img/common/page-cloud-bg-tablet.jpg')}}"
                                media="(max-width: 1080px)">
                        <source srcset="{{asset('app/img/common/page-cloud-bg-mb.jpg')}}" media="(max-width: 480px)">
                        <img src="{{asset('app/img/common/page-cloud-bg.jpg')}}">
                    </picture>
                </figure>

                <div class="bg-transition"></div>
            </div>

            <!-- Decor Element -->
            <figure class="detail-decor-el img-holder">
                <img src="{{asset('app/img/detail/detail-decor.svg')}}" alt=""/>
            </figure>

            <!-- Detail Layout -->
            <div class="detail-layout pt-60 pb-80 pb-40-mb">
                <!-- Detail Love Story -->
                <article class="detail-love-story mb-60">
                    <div class="detail-head mb-30">
                        <h1 class="detail-title jambono mb-0 mb-20-mb">
                            <span class="partner-name">{{ $submission->user->name }}</span>

                            <span class="heart-ico img-holder">
                                <img src="{{ asset('app/img/icons/heart-ico.svg') }}" alt=""/>
                            </span>

                            <span class="partner-name">{{ $submission->partner_name }}</span>
                        </h1>
                        <div class="cta-holder">
                            <a class="like-btn {{ $userId ? 'logged-in-like-btn' : '' }}"
                               data-liked="{{ $submission->liked( $userId ) }}"
                               data-submission-id="{{ $submission->id }}"
                               data-user-id="{{  $userId }}"
                               href="{{ $userId ? 'javascript:void(0)' : route('login', ['redirect_url' => request()->path()])  }}">
                                <figure class="ico img-holder">
                                    <img src="{{ asset('app/img/icons/heart-empty-ico.svg') }}" alt="">
                                </figure>

                                <span class="context">{{$submission->total_like}} Like</span>
                            </a>

                            <a class="share-btn {{ $userId ? 'logged-in-share-btn' : '' }}"
                               data-shared="{{ $submission->shared($userId) }}"
                               data-submission-id="{{ $submission->id }}"
                               data-submission-url="{{ route('submission.detail', ['slug' => $submission->slug]) }}"
                               data-user-id="{{ $userId }}"
                               href="{{ $userId ? 'javascript:void(0)' : route('login', ['redirect_url' => request()->path()]) }}">
                                <figure class="ico img-holder">
                                    <img src="{{ asset('app/img/icons/share-empty-ico.svg') }}" alt="">
                                </figure>

                                <span class="context">{{$submission->total_share}} Share</span>
                            </a>
                        </div>
                    </div>
                </article>

                <!-- Detail Video Holder -->
                @if($submission->type === \App\Enums\SubmissionType::VIDEO)
                    <div class="detail-video mb-60 mb-30-mb">
                        <div class="video-holder img-holder">
                            <video src="{{ $submission->video->thumbnail_url }}"
                                   poster="{{ asset('app/img/detail/detail-video-thumbnail.jpg') }}"></video>

                            <div class="overlay play-video-btn">
                                <figure class="img-holder poster bg-mode">
                                    @isset($submission->images[0])
                                        <img src="{{ $submission->images[0]->thumbnail_url }}" alt=""/>
                                    @endisset
                                </figure>
                                <figure class="img-holder play-btn">
                                    <svg
                                            xmlns="http://www.w3.org/2000/svg"
                                            width="98"
                                            height="98"
                                            viewBox="0 0 98 98"
                                            fill="none"
                                    >
                                        <g filter="url(#filter0_d_229_23551)">
                                            <circle
                                                    opacity="0.1"
                                                    cx="49"
                                                    cy="47"
                                                    r="45"
                                                    fill="white"
                                            />
                                            <path
                                                    fill-rule="evenodd"
                                                    clip-rule="evenodd"
                                                    d="M49 77.6001C65.8999 77.6001 79.6001 63.9002 79.6001 47C79.6001 30.1001 65.9002 16.3999 49 16.3999C32.1001 16.3999 18.3999 30.1001 18.3999 47C18.3999 63.8999 32.1001 77.6001 49 77.6001ZM49 81C67.7775 81 83 65.7775 83 47C83 28.2222 67.7775 13 49 13C30.2222 13 15 28.2222 15 47C15 65.7775 30.2222 81 49 81Z"
                                                    fill="white"
                                            />
                                            <path
                                                    fill-rule="evenodd"
                                                    clip-rule="evenodd"
                                                    d="M57.8343 47L42.1991 36.5767V57.4237L57.8343 47ZM60.9931 45.0198C62.4064 45.962 62.4064 48.0384 60.9931 48.9805L42.4991 61.3101C40.9175 62.3646 38.7988 61.2305 38.7988 59.3296V34.6708C38.7988 32.7699 40.9175 31.6361 42.4991 32.6906L60.9931 45.0198Z"
                                                    fill="white"
                                            />
                                        </g>
                                        <defs>
                                            <filter
                                                    id="filter0_d_229_23551"
                                                    x="0"
                                                    y="0"
                                                    width="98"
                                                    height="98"
                                                    filterUnits="userSpaceOnUse"
                                                    color-interpolation-filters="sRGB"
                                            >
                                                <feFlood
                                                        flood-opacity="0"
                                                        result="BackgroundImageFix"
                                                />
                                                <feColorMatrix
                                                        in="SourceAlpha"
                                                        type="matrix"
                                                        values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
                                                        result="hardAlpha"
                                                />
                                                <feOffset dy="2"/>
                                                <feGaussianBlur stdDeviation="2"/>
                                                <feComposite in2="hardAlpha" operator="out"/>
                                                <feColorMatrix
                                                        type="matrix"
                                                        values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"
                                                />
                                                <feBlend
                                                        mode="normal"
                                                        in2="BackgroundImageFix"
                                                        result="effect1_dropShadow_229_23551"
                                                />
                                                <feBlend
                                                        mode="normal"
                                                        in="SourceGraphic"
                                                        in2="effect1_dropShadow_229_23551"
                                                        result="shape"
                                                />
                                            </filter>
                                        </defs>
                                    </svg>
                                </figure>
                            </div>
                        </div>
                    </div>
                @endif
                @if($submission->type !== \App\Enums\SubmissionType::VIDEO)
                <!-- Detail Gallery -->
                    <div class="detail-gallery mb-30 mb-20-mb">
                        <!-- Container -->
                        <div class="container">
                            <ul class="gallery-list">
                                @foreach($submission->images as $image)
                                    <li class="gallery-item">
                                        <div class="gallery-item-layout">
                                            <figure class="thumbnail img-holder bg-mode">
                                                <img src="{{ $image->thumbnail_url }}" alt=""/>

                                                <figure class="decor-el img-holder">
                                                    <img src="{{ asset('app/img/submit-form/form-decor.png') }}">
                                                </figure>
                                            </figure>


                                        </div>
                                    </li>
                                @endforeach
                            </ul>
                        </div>
                    </div>
                @endif

                <article class="detail-love-story mb-60 mb-30-mb">
                    <div class="context">
                        <p class="desc">
                            {{ $submission->story_content }}
                        </p>
                    </div>
                </article>

            </div>
        </section>
        <!-- SECTION Post Detail - END -->

        <!-- SECTION Other Submission -->
        @if(count($otherSubmissions))

            <section class="section section-other-submission">
                <div class="container pb-100 pt-80 pt-0-mb pb-20-mb">
                    <h2 class="section-title mb-60 mb-20-mb txt-center jambono">
                        Other submissions
                    </h2>

                    <!-- Submission List -->
                    <ul class="submission-list mb-slider" id="other-submission-slider">
                    @foreach($otherSubmissions as $otherSubmission)
                        <!-- Submission Item -->
                            <li class="submission-item">
                                <a href="{{ route('submission.detail', ['slug' => $otherSubmission->slug]) }}">
                                    @if ($otherSubmission->type === \App\Enums\SubmissionType::IMAGE)
                                        <div class="decor-layer">
                                            <div class="decor-card card-1">
                                                <figure class="thumbnail-img img-holder bg-mode">
                                                    @isset($otherSubmission->images[0])
                                                        <img src="{{ $otherSubmission->images[0]->thumbnail_url }}"
                                                             alt=""/>
                                                    @endisset
                                                </figure>
                                            </div>

                                            <div class="decor-card card-2"></div>
                                        </div>
                                    @endif
                                    <div class="submission-card">
                                        <figure class="thumbnail-img img-holder bg-mode">
                                            @isset($otherSubmission->images[0])
                                                <img src="{{ $otherSubmission->images[0]->thumbnail_url }}" alt=""/>
                                            @endisset
                                            <figure class="thumbnail-decor img-holder">
                                                <img src="{{ asset('app/img/submit-form/form-decor.png') }}" alt="">
                                            </figure>

                                            @if ($otherSubmission->type === \App\Enums\SubmissionType::VIDEO)
                                                <div class="video-overlay">
                                                    <figure class="img-holder play-ico">
                                                        <svg
                                                                xmlns="http://www.w3.org/2000/svg"
                                                                width="98"
                                                                height="98"
                                                                viewBox="0 0 98 98"
                                                                fill="none"
                                                        >
                                                            <g filter="url(#filter0_d_229_23551)">
                                                                <circle
                                                                        opacity="0.1"
                                                                        cx="49"
                                                                        cy="47"
                                                                        r="45"
                                                                        fill="white"
                                                                />
                                                                <path
                                                                        fill-rule="evenodd"
                                                                        clip-rule="evenodd"
                                                                        d="M49 77.6001C65.8999 77.6001 79.6001 63.9002 79.6001 47C79.6001 30.1001 65.9002 16.3999 49 16.3999C32.1001 16.3999 18.3999 30.1001 18.3999 47C18.3999 63.8999 32.1001 77.6001 49 77.6001ZM49 81C67.7775 81 83 65.7775 83 47C83 28.2222 67.7775 13 49 13C30.2222 13 15 28.2222 15 47C15 65.7775 30.2222 81 49 81Z"
                                                                        fill="white"
                                                                />
                                                                <path
                                                                        fill-rule="evenodd"
                                                                        clip-rule="evenodd"
                                                                        d="M57.8343 47L42.1991 36.5767V57.4237L57.8343 47ZM60.9931 45.0198C62.4064 45.962 62.4064 48.0384 60.9931 48.9805L42.4991 61.3101C40.9175 62.3646 38.7988 61.2305 38.7988 59.3296V34.6708C38.7988 32.7699 40.9175 31.6361 42.4991 32.6906L60.9931 45.0198Z"
                                                                        fill="white"
                                                                />
                                                            </g>
                                                            <defs>
                                                                <filter
                                                                        id="filter0_d_229_23551"
                                                                        x="0"
                                                                        y="0"
                                                                        width="98"
                                                                        height="98"
                                                                        filterUnits="userSpaceOnUse"
                                                                        color-interpolation-filters="sRGB"
                                                                >
                                                                    <feFlood
                                                                            flood-opacity="0"
                                                                            result="BackgroundImageFix"
                                                                    />
                                                                    <feColorMatrix
                                                                            in="SourceAlpha"
                                                                            type="matrix"
                                                                            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
                                                                            result="hardAlpha"
                                                                    />
                                                                    <feOffset dy="2"/>
                                                                    <feGaussianBlur stdDeviation="2"/>
                                                                    <feComposite in2="hardAlpha" operator="out"/>
                                                                    <feColorMatrix
                                                                            type="matrix"
                                                                            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"
                                                                    />
                                                                    <feBlend
                                                                            mode="normal"
                                                                            in2="BackgroundImageFix"
                                                                            result="effect1_dropShadow_229_23551"
                                                                    />
                                                                    <feBlend
                                                                            mode="normal"
                                                                            in="SourceGraphic"
                                                                            in2="effect1_dropShadow_229_23551"
                                                                            result="shape"
                                                                    />
                                                                </filter>
                                                            </defs>
                                                        </svg>
                                                    </figure>
                                                </div>
                                            @endif
                                        </figure>

                                        <div class="submission-info pt-10">
                                            <p class="post-title jambono mb-10">
                                                <span class="partner-name">{{ $otherSubmission->user->name }}</span>
                                                <span class="heart-ico img-holder">
                                                    <img src="{{ asset('app/img/icons/heart-ico.svg') }}" alt=""/>
                                                </span>
                                                <span class="partner-name">{{ $otherSubmission->partner_name }}</span>
                                            </p>

                                            <p class="desc">
                                                {{ $otherSubmission->story_content }}
                                            </p>

                                            <div class="summary">
                                                @include('components/vote', ['submission' => $otherSubmission, 'user' => $user])
                                            </div>
                                        </div>
                                    </div>
                                </a>
                            </li>
                        @endforeach
                    </ul>
                </div>
            </section>
    @endif
    <!-- SECTION Other Submission -->

        <!-- SECTION Fly with Vietjet -->
    @include('layout/fly-with-vj')
    <!-- SECTION Fly with Vietjet - END -->
    </main>
    <!-- MAIN - END -->
@endsection

@section('script')
    <script src="{{ asset('app/js/dist/slick.min.js') }}"></script>
@endsection


{{--@section('content')--}}
{{--    <a href="{{ route('submission.list') }}">Back to list</a>--}}
{{--    <div class="d-flex">--}}
{{--        <div class="card ml-3 mr-3" style="width: 18rem;">--}}
{{--            @if(isset($submission->video))--}}
{{--                <video class="card-img-top"--}}
{{--                       id="video"--}}
{{--                       width="200" height="200" src="{{ $submission->video->thumbnail_url }}"--}}
{{--                       controls></video>--}}
{{--            @endif--}}
{{--            @if(isset($submission->images))--}}
{{--                @foreach($submission->images as $image)--}}
{{--                    <img class="card-img-top" width="200" height="200" src="{{ $image->thumbnail_url }}"--}}
{{--                         alt="submission"/>--}}
{{--                @endforeach--}}
{{--            @endif--}}

{{--            <div class="card-body">--}}
{{--                <h5 class="card-title">{{ $submission->description }}</h5>--}}
{{--                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the--}}
{{--                    card's content.</p>--}}
{{--                @auth--}}
{{--                    <a href="{{route('vote.like', ['submissionId' => $submission->id])}}"--}}
{{--                       class="btn btn-primary">Like: {{ $submission->likes->count() }}</a>--}}
{{--                    <a href="javascript:void(0)"--}}
{{--                       class="btn btn-primary share-btn">Share: {{ $submission->shares->count() }}</a>--}}
{{--                @else--}}

{{--                    <p>Like: {{ $submission->likes->count() }}</p>--}}
{{--                    <p>Share: {{ $submission->shares->count() }}</p>--}}
{{--                @endauth--}}
{{--            </div>--}}
{{--        </div>--}}
{{--    </div>--}}

{{--    <form hidden action="{{ route('vote.share', ['submissionId' => $submission->id]) }}" method="POST"--}}
{{--          id="shareSubmission">--}}
{{--        @csrf--}}
{{--    </form>--}}
{{--@endsection--}}

{{--@section('script')--}}
{{--    @auth--}}
{{--        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>--}}
{{--        <script src="//connect.facebook.net/en_US/sdk.js"></script>--}}
{{--        <script>--}}
{{--            function fb_share() {--}}
{{--                FB.init({--}}
{{--                    appId: {{ config('services.facebook.client_id') }},--}}
{{--                    xfbml: true,--}}
{{--                    version: 'v2.0'--}}
{{--                });--}}
{{--                FB.ui({--}}
{{--                    method: 'feed',--}}
{{--                    name: "{{ $submission->id }}",--}}
{{--                    link: "{{ route('submission.detail', ['slug' => $submission->slug]) }}",--}}
{{--                    picture: "https://picsum.photos/200",--}}
{{--                    caption: "Lorem ipsum"--}}
{{--                }, function (response) {--}}
{{--                    if (Array.isArray(response)) {--}}
{{--                        $('#shareSubmission').submit();--}}
{{--                    }--}}
{{--                });--}}
{{--            }--}}

{{--            $(document).ready(function () {--}}
{{--                $('.share-btn').on('click', fb_share);--}}
{{--            });--}}
{{--        </script>--}}
{{--    @endauth--}}
{{--@endsection--}}