@extends('layouts.app')

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

@section('content')
<div class="page-header">
    <h1 class="page-title"><i class="fas fa-key"></i> Change Password</h1>
    <p class="page-subtitle">Update your account password below.</p>
</div>

<div style="max-width: 480px;">
    <div class="card">
        <div class="card-body">

            @if(session('success'))
            <div class="alert alert-success">
                <i class="fas fa-circle-check"></i> {{ session('success') }}
            </div>
            @endif

            @if(session('error'))
            <div class="alert alert-error">
                <i class="fas fa-circle-exclamation"></i> {{ session('error') }}
            </div>
            @endif

            <form method="POST" action="{{ route('password.change.submit') }}">
                @csrf

                <div class="form-group">
                    <label class="form-label">Current Password</label>
                    <input type="password" name="current_password" class="form-control {{ $errors->has('current_password') ? 'is-invalid' : '' }}" required>
                    @error('current_password') <span class="invalid-feedback">{{ $message }}</span> @enderror
                </div>

                <div class="form-group">
                    <label class="form-label">New Password</label>
                    <input type="password" name="password" class="form-control {{ $errors->has('password') ? 'is-invalid' : '' }}" required>
                    @error('password') <span class="invalid-feedback">{{ $message }}</span> @enderror
                    <small class="form-hint">Min 8 characters, must include uppercase, lowercase and a number.</small>
                </div>

                <div class="form-group">
                    <label class="form-label">Confirm New Password</label>
                    <input type="password" name="password_confirmation" class="form-control" required>
                </div>

                <button type="submit" class="btn btn-primary">
                    <i class="fas fa-save"></i> Update Password
                </button>
            </form>
        </div>
    </div>
</div>
@endsection