@extends('layouts.app')

@section('content')
    <main class="page-maincontent" id="page-main-content">
        <!-- SECTION Submit Form -->
        <section class="section section-submit-form pt-60" id="vj-submit-page-form">
            <!-- Background -->
            <div class="bg-layer">
                <figure class="img-holder bg-img">
                    <picture>
                        <source
                                srcset="{{ asset('app/img/img/common/page-cloud-bg-tablet.jpg') }}"
                                media="(max-width: 1080px)"
                        />
                        <source
                                srcset="{{ asset('app/img/img/common/page-cloud-bg-mb.jpg') }} "
                                media="(max-width: 480px)"
                        />
                        <img src="{{ asset('app/img/submit-form/submit-form-bg.jpg') }}" alt=""/>
                    </picture>
                </figure>
                <div class="bg-transition"></div>
            </div>

            <div class="submit-form-layout container pb-130 pt-60 pt-40-mb">
                <!-- Step List -->
                <ul class="steps-list mb-60 mb-40-mb">
                    <li class="step-item">
                        <div class="step-no mb-20 mb-0-mb">1</div>
                        <p class="step-name">Upload your gallery</p>
                    </li>

                    <li class="step-item">
                        <div class="step-no mb-20 mb-0-mb">2</div>
                        <p class="step-name">Wait for approval</p>
                    </li>

                    <li class="step-item">
                        <div class="step-no mb-20 mb-0-mb">3</div>
                        <p class="step-name">Share and hashtag</p>
                    </li>
                </ul>

                <form action="{{ route('doSubmission') }}"
                      id="submission-form"
                      enctype="multipart/form-data"
                      method="POST"
                      class="submit-album-form pt-60 pb-140 pl-100 pr-100 pl-20-mb pr-20-mb">
                @csrf
                <!-- Background -->
                    <div class="bg-layer">
                        <figure class="img-holder form-decor-el">
                            <img src="{{ asset('app/img/submit-form/form-decor.jpg') }}" alt=""/>
                        </figure>
                    </div>

                    <!-- Form Content -->
                    <div class="form-content">
                        <h1 class="page-title txt-center jambono mb-30">
                            Upload your story
                        </h1>

                        <!-- Personal Information Form Group -->
                        <div class="form-group">
                            <h4 class="form-group-title mb-30">
                                Personal Information
                            </h4>

                            <!-- Form Row - Fullname-->
                            <div class="form-row mb-20">
                                <div class="form-col col-full input-holder">
                                    <input
                                            type="text"
                                            name="name"
                                            id="fullname-input"
                                            placeholder="Full Name"
                                            value="{{ old('name') ?? $user->name }}"
                                            class="form-control"
                                    />
                                    <label for="fullname-input" class="label">Full Name
                                        <span class="required-mark">*</span>
                                    </label>
                                    @error('name')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                    @enderror
                                </div>
                            </div>

                            <!-- Form Row - Email and Gender -->
                            <div class="form-row mb-20">
                                <div class="form-col input-holder">
                                    <input
                                            type="email"
                                            name="email"
                                            {{ $user->email ? 'disabled' : '' }}
                                            id="email-input"
                                            class="form-control"
                                            placeholder="Email address"
                                            value="{{ $user->email }}"
                                    />
                                    <label for="email-input" class="label">Email Address</label>
                                </div>

                                <!-- Form Col Gender -->
                                <div class="form-col radio-list-holder mb-30-mb mt-20-mb">
                                    <p class="col-label">Gender</p>
                                    <div class="radio-btn-holder">
                                        <label for="" class="radio-container">Male
                                            <input type="radio"
                                                   {{($user->gender ?? old('gender')) === 'male' ? 'checked' : ''}} name="gender"
                                                   value="male"
                                            />
                                            <span class="checkmark"></span>
                                        </label>
                                    </div>
                                    <div class="radio-btn-holder">
                                        <label for="" class="radio-container">Female
                                            <input type="radio"
                                                   {{($user->gender ?? old('gender')) === 'female' ? 'checked' : ''}} name="gender"
                                                   value="female"/>
                                            <span class="checkmark"></span>
                                        </label>
                                    </div>
                                    <div class="radio-btn-holder">
                                        <label for="" class="radio-container">Other
                                            <input type="radio"
                                                   {{($user->gender ?? old('gender')) === 'other' ? 'checked' : ''}} name="gender"
                                                   value="other"/>
                                            <span class="checkmark"></span>
                                        </label>
                                    </div>
                                    @error('gender')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                    @enderror
                                </div>
                            </div>

                            <!-- Form Row - Phone and Passport -->
                            <div class="form-row mb-20">
                                <!-- Phone Number Input Column -->
                                <div class="form-col input-holder @error('phone_number') is-invalid @enderror mb-20 mb-20-mb">
                                    <input
                                            type="text"
                                            name="phone_number"
                                            value="{{ ($user->phone_number ?? old('phone_number')) ?? '' }}"
                                            id="phonenumber-input"
                                            placeholder="Phone Number"
                                            class="form-control"
                                    />
                                    <label for="phonenumber-input" class="label">Phone Number</label>
                                    @error('phone_number')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                    @enderror
                                </div>

                                <!-- Passport Input Column -->
                                <div class="form-col input-holder @error('passport_number') is-invalid @enderror mb-20">
                                    <input
                                            type="text"
                                            name="passport_number"
                                            value="{{ ($user->passport_number ?? old('passport_number')) ?? '' }}"
                                            id="passport-input"
                                            placeholder="Passport Number"
                                            class="form-control"
                                    />
                                    <label for="passport-input" class="label">Passport</label>
                                    @error('passport_number')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                    @enderror
                                </div>
                            </div>

                            <!-- Form Row - Home Address -->
                            <div class="form-row mb-20">
                                <div class="form-col col-full input-holder">
                                    <input
                                            type="text"
                                            placeholder="Home Address"
                                            value="{{ ($user->address ?? old('address')) ?? '' }}"
                                            name="address"
                                            id="home-address-input"
                                            class="form-control"
                                    />
                                    <label for="home-address-input" class="label">Home Address</label>
                                    @error('address')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                    @enderror
                                </div>
                            </div>

                            <!-- Form Row - Facebook Link -->
                            <div class="form-row mb-20">
                                <div class="form-col col-full input-holder">
                                    <input
                                            type="url"
                                            placeholder="Facebook Link"
                                            value="{{ ($user->facebook_link ?? old('facebook_link')) ?? '' }}"
                                            name="facebook_link"
                                            id="facebook-link-input"
                                            class="form-control"
                                    />
                                    <label for="facebook-link-input" class="label">Facebook Link</label>
                                    @error('facebook_link')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        <!-- Submission Information Form Group -->
                        <div class="form-group">
                            <h4 class="form-group-title mb-30">Submission information</h4>

                            <!-- Form Row - Partner Name Input -->
                            <div class="form-row mb-20">
                                <div class="form-col col-full input-holder">
                                    <input
                                            type="text"
                                            name="partner_name"
                                            value="{{ old('partner_name') ?? '' }}"
                                            id="partner-name-input"
                                            placeholder="Your partner's name"
                                            class="form-control"
                                    />
                                    <label for="partner-name-input" class="label">Your partner's name</label>
                                    @error('partner_name')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                    @enderror
                                </div>
                            </div>

                            <!-- Form Row - Story Content -->
                            <div class="form-row mb-20">
                                <div class="form-col col-full input-holder">
                                    <textarea
                                            placeholder="Story Content (max 1000 words)"
                                            name="story_content"
                                            id="love-story-input"
                                            class="form-control"
                                            rows="4"
                                            maxlength="1000"
                                    >{{ old('story_content') ?? '' }}</textarea>
                                    <label for="love-story-input" class="label">Story Content (max 1000 words)</label>
                                    @error('story_content')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                    @enderror
                                </div>
                            </div>

                            <!-- Form Row - Image Upload -->
                            <div class="form-row">
                                <div class="form-col col-full">
                                    <div class="upload-images-layout">
                                        <p class="label mb-10-mb">
                                            Upload Images (maximum 5 images and 1 video)
                                        </p>
                                        <p class="instruction mb-20-mb">
                                            Image should not be greater than 10mb and video should
                                            not be greater than 50mb
                                        </p>

                                        <!-- Files Type Switcher -->
                                        <div class="files-type-switcher mb-30">
                                            <!-- Switch to image upload -->
                                            <div class="radio-btn-holder submission-type mb-30-mb">
                                                <label for="" class="radio-container mb-10">
                                                    Upload Images

                                                    <input
                                                            type="radio"
                                                            checked="checked"
                                                            {{ old('type') === \App\Enums\SubmissionType::IMAGE ? 'checked="checked"': '' }}
                                                            name="type"
                                                            value="{{ \App\Enums\SubmissionType::IMAGE }}"
                                                    />
                                                    <span class="checkmark"></span>
                                                </label>
                                                <p class="instruction">
                                                    * Image size should not be greater than 10 MB
                                                </p>
                                            </div>

                                            <!-- Switch to video upload -->
                                            <div class="radio-btn-holder mb-30-mb">
                                                <label for="" class="radio-container mb-10">
                                                    Upload Video

                                                    <input type="radio"
                                                           {{ old('type') === \App\Enums\SubmissionType::VIDEO ? 'checked="checked"': '' }}
                                                           value="{{ \App\Enums\SubmissionType::VIDEO }}"
                                                           name="type"/>
                                                    <span class="checkmark"></span>
                                                </label>
                                                <p class="instruction">
                                                    * Video size should not be greater than 50 MB
                                                </p>
                                            </div>
                                        </div>

                                        <!-- Image list -->
                                        <ul class="image-list pb-40 {{ old('type') === \App\Enums\SubmissionType::IMAGE || !old('type') ? 'active': '' }}">
                                            <!-- Image Item -->
                                            <li class="image-item">
                                                <input
                                                        type="file"
                                                        class="input-images-upload"
                                                        name="images[]"
                                                        accept="image/png,image/jpeg"
                                                />
                                                <figure class="img-holder bg-mode preview-item">
                                                    <img src="{{ asset('app/img/icons/upload-ico.svg') }}" alt=""/>
                                                </figure>
                                                <div class="upload-layout">
                                                    <div class="ico">
                                                        <figure class="img-holder upload-ico">
                                                            <img src="{{ asset('app/img/icons/upload-ico.svg') }}"
                                                                 alt=""/>
                                                        </figure>
                                                    </div>
                                                    <p class="label">Add Photos</p>
                                                    <p class="instruction">maximum <b>10 mb</b></p>
                                                </div>
                                            </li>

                                            <!-- Image Item -->
                                            <li class="image-item">
                                                <input
                                                        type="file"
                                                        name="images[]"
                                                        class="input-images-upload"
                                                        accept="image/png,image/jpeg"
                                                />
                                                <figure class="img-holder bg-mode preview-item">
                                                    <img src="{{ asset('app/img/icons/upload-ico.svg') }}" alt=""/>
                                                </figure>
                                                <div class="upload-layout">
                                                    <div class="ico">
                                                        <figure class="img-holder upload-ico">
                                                            <img src="{{ asset('app/img/icons/upload-ico.svg') }}"
                                                                 alt=""/>
                                                        </figure>
                                                    </div>
                                                    <p class="label">Add Photos</p>
                                                    <p class="instruction">maximum <b>10 mb</b></p>
                                                </div>
                                            </li>

                                            <!-- Image Item -->
                                            <li class="image-item">
                                                <input
                                                        type="file"
                                                        name="images[]"
                                                        class="input-images-upload"
                                                        accept="image/png,image/jpeg"
                                                />
                                                <figure class="img-holder bg-mode preview-item">
                                                    <img src="{{ asset('app/img/icons/upload-ico.svg') }}" alt=""/>
                                                </figure>
                                                <div class="upload-layout">
                                                    <div class="ico">
                                                        <figure class="img-holder upload-ico">
                                                            <img src="{{ asset('app/img/icons/upload-ico.svg') }}"
                                                                 alt=""/>
                                                        </figure>
                                                    </div>
                                                    <p class="label">Add Photos</p>
                                                    <p class="instruction">maximum <b>10 mb</b></p>
                                                </div>
                                            </li>

                                            <!-- Image Item -->
                                            <li class="image-item">
                                                <input
                                                        type="file"
                                                        name="images[]"
                                                        class="input-images-upload"
                                                        accept="image/png,image/jpeg"
                                                />
                                                <figure class="img-holder bg-mode preview-item">
                                                    <img src="{{ asset('app/img/icons/upload-ico.svg') }}" alt=""/>
                                                </figure>
                                                <div class="upload-layout">
                                                    <div class="ico">
                                                        <figure class="img-holder upload-ico">
                                                            <img src="{{ asset('app/img/icons/upload-ico.svg') }}"
                                                                 alt=""/>
                                                        </figure>
                                                    </div>
                                                    <p class="label">Add Photos</p>
                                                    <p class="instruction">maximum <b>10 mb</b></p>
                                                </div>
                                            </li>

                                            <!-- Image Item -->
                                            <li class="image-item">
                                                <input
                                                        type="file"
                                                        name="images[]"
                                                        class="input-images-upload"
                                                        accept="image/png,image/jpeg"
                                                />
                                                <figure class="img-holder bg-mode preview-item">
                                                    <img src="{{ asset('app/img/icons/upload-ico.svg') }}" alt=""/>
                                                </figure>
                                                <div class="upload-layout">
                                                    <div class="ico">
                                                        <figure class="img-holder upload-ico">
                                                            <img src="{{ asset('app/img/icons/upload-ico.svg') }}"
                                                                 alt=""/>
                                                        </figure>
                                                    </div>
                                                    <p class="label">Add Photos</p>
                                                    <p class="instruction">maximum <b>10 mb</b></p>
                                                </div>
                                            </li>
                                        </ul>

                                        <!-- Video List -->
                                        <ul class="video-list pb-40 {{ old('type') === \App\Enums\SubmissionType::VIDEO ? 'active': '' }}">
                                            <!-- Image Item -->
                                            <li class="video-item">
                                                <input
                                                        type="file"
                                                        class="input-images-upload"
                                                        name="images[]"
                                                        accept="image/png,image/jpeg"
                                                />
                                                <figure class="img-holder bg-mode preview-item">
                                                    <img src="{{ asset('app/img/icons/upload-ico.svg') }}" alt=""/>
                                                </figure>
                                                <div class="upload-layout">
                                                    <div class="ico">
                                                        <figure class="img-holder upload-ico">
                                                            <img src="{{ asset('app/img/icons/upload-ico.svg') }}"
                                                                 alt=""/>
                                                        </figure>
                                                    </div>
                                                    <p class="label">Add Photos</p>
                                                    <p class="instruction">maximum <b>10 mb</b></p>
                                                </div>
                                            </li>
                                            <li class="video-item">
                                                <input
                                                        type="file"
                                                        name="video"
                                                        class="input-video-upload"
                                                        accept=".mov,.mp4"
                                                />
                                                <figure class="img-holder bg-mode preview-item">
                                                    <img src="" alt=""/>
                                                </figure>
                                                <div class="upload-layout">
                                                    <div class="ico">
                                                        <figure class="img-holder upload-ico">
                                                            <img src="{{ asset('app/img/icons/upload-ico.svg') }}"
                                                                 alt=""/>
                                                        </figure>
                                                    </div>
                                                    <p class="label">Add Video</p>
                                                    <p class="instruction">maximum <b>50 mb</b></p>
                                                </div>
                                            </li>
                                        </ul>
                                        <div class="txt-center">
                                            @error('images')
                                            <span class="invalid-feedback" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                            @enderror
                                            @error('video')
                                            <span class="invalid-feedback" role="alert">
                                                <strong>{{ $message }}</strong>
                                            </span>
                                            @enderror
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- Form Row - Flight Select -->
                            <div class="form-row mb-20">
                                <div class="form-col col-full flight-seclect-list">
                                    <p class="col-label">Select your flight</p>

                                    @foreach($flights as $index => $flight)
                                        <div class="radio-btn-holder">
                                            <label for="" class="radio-container mb-10">
                                                {{ \App\Enums\FlightEnum::getDescription($flight) }}
                                                <input
                                                        type="radio"
                                                        {{ $loop->index === 0 || old('flight') === $flight ? 'checked' : '' }}
                                                        name="flight"
                                                        value="{{$flight}}"
                                                />
                                                <span class="checkmark"></span>
                                            </label>
                                            <p class="instruction">{{ \App\Enums\FlightEnum::getTimeDescription($flight) }}</p>
                                        </div>
                                    @endforeach

                                </div>
                            </div>

                            <div class="cta-holder">
                                <div class="checkbox-holder mb-20">
                                    <label
                                            for="agree-term-and-service-input"
                                            class="checkbox-container agree-checkbox"
                                    >
                                        I agree with <a href="{{route('ui-term-condition')}}" title="Terms">Terms</a> and <a href="{{route('ui-privacy-policy')}}" title="privacy">privacy statement</a>
                                        <input
                                                type="checkbox"
                                                name="term_and_privacy"
                                                id="agree-term-and-service-input"
                                        />
                                        <span class="checkmark"></span>
                                    </label>
                                    @error('term_and_privacy')
                                    <span class="invalid-feedback" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                    @enderror
                                </div>
                                <div class="submit-holder">
                                    <button type="submit" class="btn btn-block">Share your story</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </section>
        <!-- SECTION Submit Form - END  -->

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