@extends('layouts.app')

@section('content')
    <main class="page-maincontent" id="page-main-content">
        <!-- SECTION Change Password -->
        <section
                class="section section-profile-edit pt-100 pb-110 pb-40-mb pt-80-mb"
        >
            <!-- Background -->
            <div class="bg-holder">
                <figure class="img-holder 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>

            <!-- Main Content -->
            <div class="main-content pt-40 pb-140 pb-80-mb">
                <!-- Decor El -->
                <div class="decor">
                    <figure class="img-holder decor-img">
                        <img src="{{ asset('app/img/submit-form/form-decor.jpg') }}" alt=""/>
                    </figure>
                </div>

                <!-- Profile Update Form -->
                <div class="profile-update-form">
                    <!-- Form Title -->
                    <h1 class="page-title txt-center mb-40 jambono">Edit profile</h1>

                    <!-- Edit Profile Form -->
                    <form action="{{ route('profile.update') }}" class="edit-profile-form" method="POST">
                    @csrf
                    @method('PUT')
                    <!-- Form Row -->
                        <div class="form-row input-holder mb-20">
                            <input
                                    type="text"
                                    class="form-control"
                                    name="name"
                                    id="fullname-input"
                                    value="{{ old('name') ?? $user->name }}"
                            />
                            <label for="fullname-input" class="label">Full name</label>
                            @error('name')
                            <span class="invalid-feedback" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                            @enderror
                        </div>

                        <!-- Form Row -->
                        <div class="form-row input-holder">
                            <input
                                    type="email"
                                    class="form-control"
                                    id="email-address-input"
                                    value="{{ old('email') ?? $user->email }}"
                                    disabled
                            />
                            <label for="email-address-input" class="label">Email address</label>
                        </div>

                        <!-- Form Row -->
                        <div class="form-row radio-list-holder mb-40 mb-50-mb">
                            <p class="col-label">Gender</p>
                            @foreach($genders as $gender)
                                <div class="radio-btn-holder">
                                    <label for=""
                                           class="radio-container">
                                        {{ \App\Enums\GenderEnum::getDescription($gender) }}

                                        <input type="radio"
                                               name="gender"
                                               {{ (old('gender') ?? $user->gender) === $gender ? 'checked' : '' }}
                                               value="{{ $gender }}"/>
                                        <span class="checkmark"></span>
                                    </label>
                                </div>
                            @endforeach
                            @error('gender')
                            <span class="invalid-feedback" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                            @enderror
                        </div>

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

                        <!-- Form Row -->
                        <div class="form-row input-holder mb-20">
                            <textarea
                                    name="address"
                                    class="form-control"
                                    id="home-address-input"
                                    rows="2"
                                    placeholder="Home Address"
                            >{{ old('address') ?? $user->address }}</textarea>

                            <label for="home-address-input" class="label">Home address</label>

                            @error('address')
                            <span class="invalid-feedback" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                            @enderror
                        </div>

                        <!-- Form Row -->
                        <div class="form-row input-holder mb-20">
                            <input
                                    type="text"
                                    class="form-control"
                                    name="passport_number"
                                    id="passport-number-input"
                                    value="{{ old('passport_number') ?? $user->passport_number }}"
                                    placeholder="Passport Number"
                            />

                            <label for="passport-number-input" class="label">
                                Passport number
                            </label>

                            @error('passport_number')
                            <span class="invalid-feedback" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                            @enderror
                        </div>

                        <!-- Form Row -->
                        <div class="form-row input-holder mb-20">
                            <input
                                    type="text"
                                    class="form-control"
                                    name="facebook_link"
                                    id="facebook-link-input"
                                    placeholder="Facebook link"
                                    value="{{ old('facebook_link') ?? $user->facebook_link }}"
                            />

                            <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>

                        <!-- CTA -->
                        <div class="cta-holder txt-right txt-center-mb">
                            <button type="submit" class="btn bordered-btn">
                                Update your profile
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </section>
        <!-- SECTION Change Password - END -->

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