@extends('layouts.app')

@section('content')
    <!-- Header Start -->
    <div class="container-fluid bg-breadcrumb">
        <div class="container text-center py-5" style="max-width: 900px;">
            <h4 class="text-white display-4 mb-4 wow fadeInDown" data-wow-delay="0.1s">Profil</h4>
            <ol class="breadcrumb d-flex justify-content-center mb-0 wow fadeInDown" data-wow-delay="0.3s">
                <li class="breadcrumb-item"><a href="{{ route('home') }}">Home</a></li>
                <li class="breadcrumb-item"><a href="#">Pages</a></li>
                <li class="breadcrumb-item active text-primary">Profil</li>
            </ol>
        </div>
    </div>
    <!-- Header End -->

    <div class="container-fluid contact bg-light py-5">
        <div class="container py-5">
            <div class="row g-5 justify-content-center">
                <div class="col-xl-6 wow fadeInUp" data-wow-delay="0.2s">
                    <div class="bg-white rounded p-5 h-100">
                        <h4 class="text-primary">Change password</h4>
                        <p class="mb-4">Fill out this form to update your password.</p>
                        <form method="POST" action="{{ route('auth.password.update') }}">
                            @csrf
                            <input type="hidden" name="change" value="1">
                            <div class="row g-3">
                                <div class="col-12">
                                    <div class="form-floating">
                                        <input type="email" class="form-control border-0" id="email" name="email"
                                            placeholder="Your Email" required>
                                        <label for="email">Your  Email</label>
                                    </div>
                                </div>
                                <div class="col-12">
                                    <div class="form-floating">
                                        <input type="password" class="form-control border-0" id="new_password"
                                            name="new_password" placeholder="New Password" required>
                                        <label for="new_password">New Password</label>
                                    </div>
                                </div>
                                <div class="col-12">
                                    <div class="form-floating">
                                        <input type="password" class="form-control border-0" id="passwordConf"
                                            name="passwordConf" placeholder="Confirm Password" required>
                                        <label for="passwordConf">Confirm Password</label>
                                    </div>
                                </div>
                                <div class="col-12">
                                    <button class="btn btn-primary w-100 py-3">update Password</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection