@extends('layouts.app')

@section('title', 'Edit Password')

@section('content')
    <main id="main">
        <section class="breadcrumbs">
            <div class="container">
                <div class="d-flex justify-content-between align-items-center">
                    <h2>Edit Password</h2>
                    <ol>
                        <li><a href="{{ route('home.index') }}">Home</a></li>
                        <li><a href="{{ route('profile.index') }}">My Profile</a></li>
                        <li>Edit Password</li>
                    </ol>
                </div>
            </div>
        </section>

        <section id="blog" class="blog">
            <div class="container">
                <div class="row">
                    <div class="col-lg-8 entries">
                        <div class="blog-comments">
                            <div class="reply-form mt-0">
                                @if (session()->has('status'))
                                    <div class="alert alert-success text-center">
                                        {{ session('status') }}
                                    </div>
                                @endif
                                @include('partials.validation-errors', ['displayErrors' => false])

                                <form method="post" action="{{ route('user-password.update') }}">
                                    @method('put')
                                    @csrf
                                    <div class="row">
                                        <div class="col-6 form-group">
                                            <label for="current_password" class="form-label">Current Password</label>
                                            <input class="form-control @error('current_password') is-invalid @enderror"
                                                name="current_password"
                                                id="current_password"
                                                type="password"
                                                placeholder="Current Password"
                                            />
                                            @error('current_password') <div class="invalid-feedback">{{ $message }}</div> @enderror
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-6 form-group">
                                            <label for="password" class="form-label">Password</label>
                                            <input class="form-control @error('password') is-invalid @enderror"
                                                name="password"
                                                id="password"
                                                type="password"
                                                placeholder="Password"
                                            />
                                            @error('password') <div class="invalid-feedback">{{ $message }}</div> @enderror
                                        </div>
                                        <div class="col-6 form-group">
                                            <label for="password_confirmation" class="form-label">Confirm Password</label>
                                            <input class="form-control @error('password_confirmation') is-invalid @enderror"
                                                name="password_confirmation"
                                                id="password_confirmation"
                                                type="password"
                                                placeholder="Confirm Password"
                                            />
                                            @error('password_confirmation') <div class="invalid-feedback">{{ $message }}</div> @enderror
                                        </div>
                                    </div>
                                    <button type="submit" class="btn btn-primary">
                                        <i class="bi bi-floppy"></i>&nbsp;&nbsp;Save Password
                                    </button>
                                </form>
                            </div>
                        </div>
                    </div>

                    <div class="col-lg-4">
                        <div class="sidebar">
                            <h3 class="sidebar-title">Instructions</h3>
                            <div class="sidebar-item categories">
                                <p>Complete the form below to update your password.</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </main>
@endsection