@extends('layouts.app')

@section('content')
    <!-- MAIN -->
    <main class="page-maincontent" id="page-main-content">
        <!-- SECTION Change Password -->
        <section
            class="section section-change-password-form pt-100 pb-110 pb-40-mb pt-80-mb"
        >
            <!-- Background -->
            <div class="bg-holder">
                <figure class="img-holder bg-img">
                    <img src="{{ asset('app/img/common/page-cloud-bg.jpg') }}" alt=""/>
                </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>

                <!-- Change Password Form Main Content -->
                <div class="change-pw-content">
                    <h1 class="page-title mb-40 mb-60-mb txt-center jambono">
                        Change password
                    </h1>

                    <form action="{{ route('profile.updatePassword') }}" class="change-pw-form" method="POST">
                    @csrf
                    @method('PUT')
                    <!-- Form Row -->
                        <div class="form-row mb-20">
                            <div class="form-col col-full input-holder">
                                <input
                                    type="password"
                                    name="current_password"
                                    id="current-password-input"
                                    placeholder="Current Password"
                                    class="form-control"
                                />
                                <label for="current-password-input" class="label">Current Password</label>
                                @error('current_password')
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                                @enderror
                            </div>
                        </div>

                        <!-- Form Row -->
                        <div class="form-row mb-20">
                            <div class="form-col col-full input-holder">
                                <input
                                    type="password"
                                    name="new_password"
                                    id="new-password-input"
                                    placeholder="Current Password"
                                    class="form-control"
                                />
                                <label for="new-password-input" class="label">New Password</label>
                                @error('new_password')
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                                @enderror
                            </div>
                        </div>

                        <!-- Form Row -->
                        <div class="form-row">
                            <div class="form-col col-full input-holder">
                                <input
                                    type="password"
                                    name="new_password_confirmation"
                                    id="confirm-new-password-input"
                                    placeholder="Current Password"
                                    class="form-control"
                                />
                                <label for="confirm-new-password-input" class="label">Confirm New Password</label>
                            </div>
                        </div>

                        <!-- CTA Holder -->
                        <div class="cta-holder txt-right">
                            <button type="submit" class="btn bordered-btn">Update password</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>
    <!-- MAIN - END -->
@endsection