@extends('layouts.app')

@section('content')
    <!-- MAIN -->
    <main class="page-maincontent" id="page-main-content">
        <!-- SECTION Post Preview -->
        <section class="section section-post-detail pb-100">
            <div class="bg-holder">
                <figure class="img-holder bg-mode bg-img">
                    <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') }}" alt="">
                    </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>

            <!-- Preview Layout -->
            <div class="detail-layout pt-60">
                <!-- Preview Love Story -->
                <article class="detail-love-story mb-60">
                    <h1 class="detail-title mb-30 jambono">
                        <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>
                </article>
                <!-- Preview Video Holder -->
                @if($submission->type === \App\Enums\SubmissionType::VIDEO && optional($submission->video)->processed)
                    <div class="detail-video mb-60">
                        <div class="video-holder img-holder bg-mode">
                            <video
                                    src="{{ $submission->video->thumbnail_url }}"
                                    poster="{{ $submission->images[0]->thumbnail_url }}"
                            ></video>
                            <div class="overlay play-video-btn">
                                <figure class="img-holder poster bg-mode">
                                    <img src="{{ $submission->images[0]->thumbnail_url }}" alt=""/>
                                </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 && !optional($submission->video)->processed)
                    <div class="detail-video mb-60 is-previewing">
                        <p class="message">Please wait! We are processing your video...</p>
                    </div>
                @endif

            <!-- Preview Gallery -->
                @if ($submission->type === \App\Enums\SubmissionType::IMAGE)
                    <div class="detail-gallery">
                        <!-- 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>
                                        </div>
                                    </li>
                                @endforeach
                            </ul>
                        </div>
                    </div>
                @endif

                <article class="detail-love-story mb-60">
                    <div class="context">
                        <p class="desc">
                            {{ $submission->story_content }}
                        </p>
                    </div>
                </article>
            </div>
        </section>
        <!-- SECTION Post Preview - END -->

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

    <div class="fixed-cta-action txt-center">
        <a href="{{ route('submission.edit', ['submission'=> $submission]) }}" class="btn gray-btn">Return</a>
        <a href="javascript:void(0)"
           class="btn"
           onclick="event.preventDefault(); document.getElementById('submission-confirm-form').submit();">
            Submit
        </a>

        <form id="submission-confirm-form" action="{{ route('submission.confirm', ['submission' => $submission]) }}"
              method="POST" class="d-none">
            @csrf
        </form>
    </div>
@endsection