@extends('layouts.auth.login')

@section('title', 'Login Account')

@section('headers')
    <link rel="stylesheet" href="{{ asset_css('/auth/login.css') }}">
@endsection

@section('contents')
    <section class="vh-100 main-section">
        <div class="container-fluid h-custom">
            <div class="row d-flex justify-content-center align-items-center h-100">
                <form id="form">
                    @csrf
                    <div class="mb-4 text-lg-left">
                        <h3 class="font-weight-bold">Profile Settings</h3>
                        <span class="text-muted">Hello, {{ Auth::user()->name }}. You can update your password here.</span>
                    </div>

                    <!-- Email input -->
                    <div class="form-outline mb-4">
                        <label class="form-label" for="old_password">Current Password</label>
                        <input type="password" id="old_password" name="old_password" class="form-control form-control-lg"
                            placeholder="Enter Current Password" required>
                    </div>

                    <!-- Password input -->
                    <div class="form-outline mb-4">
                        <label class="form-label" for="password">New password</label>
                        <input type="password" id="new_password" name="new_password" class="form-control form-control-lg"
                            placeholder="Enter New Password" required>
                    </div>

                    <div class="mt-3 pt-2">
                        <button type="submit" class="btn btn-success btn-lg"
                            style="padding-left: 2.5rem; padding-right: 2.5rem;">Reset</button>

                        <button type="submit" class="btn btn-light btn-lg"
                            style="padding-left: 2.5rem; padding-right: 2.5rem;" id="back_btn">Back</button>
                    </div>

                    <div class="d-block mt-5 d-block">
                        <span href="" class="text-dark">Powered by <b class="text-olive">Stores Specialist
                                Inc.</b></span>
                    </div>
                </form>
            </div>
        </div>
    </section>
@endsection

@section('scripts')
    <script src="{{ asset_js('/auth/change-password.js') }}"></script>
@endsection