@extends('layouts.app')

@section('content')
    <main class="page-maincontent" id="page-main-content">
        <!-- SECTION Gallery List -->
        <section
                class="section section-gallery-list pb-80 pb-20-mb"
                id="vj-homepage-gallery-list"
        >
            <!-- Background -->
            <div class="bg-holder">
                <figure class="img-holder">
                    <picture>
                        <source srcset="{{ asset('app/img/gallery/gallery-bg-tablet.jpg') }}" media="(max-width: 1080px)">
                        <source srcset="{{ asset('app/img/gallery/gallery-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>

            <!-- Best Submission Layout -->
            <div class="container gallery-list-layout pt-80 pt-60-mb">
                <!-- Section Head -->
                <div class="section-head mb-80 mb-40-mb">
                    <h1 class="section-title txt-center mb-30">Gallery</h1>
                    <p class="desc txt-center">
                        Let's take a look at our submissions below and support our
                        participants by clicking share <br class="mb-hide"/>and like for your favorite
                        photos and stories
                    </p>

                    <figure class="heart-decor img-holder">
                        <img src="{{ asset('app/img/home/heart-decor-el.svg') }}" alt="">
                    </figure>
                </div>

                <!-- Section Body -->
                <div class="section-body">
                    <!-- Submission List -->
                    <ul class="submission-list">
                        @foreach($submissions as $submission)
                            <li class="submission-item">
                                <a href="{{ route('submission.detail', ['slug' => $submission->slug]) }}">
                                    <div class="submission-card">
                                        <figure class="thumbnail-img img-holder bg-mode">
                                            @isset($submission->images[0])
                                                <img src="{{ $submission->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 ($submission->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">{{ $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>
                                            </p>
                                            <p class="desc">{{ $submission->story_content }}
                                            </p>
                                            <div class="summary">
                                                @include('components/vote', ['submission' => $submission, 'user' => $user??null])
                                            </div>
                                        </div>
                                    </div>
                                </a>
                            </li>
                    @endforeach
                    <!-- Submission Item -->
                    </ul>
                </div>

                <!-- Section Footer TODO: UPDATE AFTER BACKEND FINISH -->
                <div class="section-footer mt-60">
                    {{ $submissions->onEachSide(5)->links() }}
                </div>
            </div>
        </section>
        <!-- SECTION Best Submission - END -->

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