@extends('layouts.app')

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

@section('content')
<div class="page-header">
    <div>
        <div class="eyebrow">{{ session('company_name') }}</div>
        <h1>My Account</h1>
        <p>Your sign-in details. Change your password here whenever you like.</p>
    </div>
</div>

<div class="row g-4">
    <div class="col-lg-5">
        <section class="panel">
            <div class="panel-header"><h2><i class="bi bi-key me-1"></i> Change my password</h2></div>
            <form method="POST" action="{{ route('account.password') }}" class="panel-body">
                @csrf @method('PUT')
                <div class="mb-3">
                    <label for="a_current" class="form-label">Current password</label>
                    <input type="password" id="a_current" name="current_password" class="form-control @error('current_password') is-invalid @enderror" autocomplete="current-password" maxlength="255" required>
                    @error('current_password')<div class="invalid-feedback">{{ $message }}</div>@enderror
                </div>
                <div class="mb-3">
                    <label for="a_new" class="form-label">New password</label>
                    <input type="password" id="a_new" name="password" class="form-control @error('password') is-invalid @enderror" minlength="12" maxlength="255" autocomplete="new-password" required>
                    <div class="form-text">{{ $passwordHint }}</div>
                    @error('password')<div class="invalid-feedback">{{ $message }}</div>@enderror
                </div>
                <div class="mb-4">
                    <label for="a_confirm" class="form-label">Confirm new password</label>
                    <input type="password" id="a_confirm" name="password_confirmation" class="form-control" minlength="12" maxlength="255" autocomplete="new-password" required>
                </div>
                <button type="submit" class="btn btn-primary w-100">Update password</button>
            </form>
        </section>
    </div>
    <div class="col-lg-4">
        <section class="panel">
            <div class="panel-header"><h2>Account</h2></div>
            <div class="panel-body small">
                <dl class="row mb-0">
                    <dt class="col-5 text-muted fw-normal">Username</dt><dd class="col-7">{{ $user->username }}</dd>
                    <dt class="col-5 text-muted fw-normal">Email</dt><dd class="col-7">{{ $user->email }}</dd>
                    <dt class="col-5 text-muted fw-normal">Role</dt><dd class="col-7 mb-0">{{ ucfirst((string) session('role')) }}</dd>
                </dl>
                <hr>
                <p class="mb-0 text-muted">Changing your password signs you out on every other device and sends you an email to confirm it happened. If you forget it, use <em>Forgot password?</em> on the sign-in page.</p>
            </div>
        </section>
    </div>
</div>
@endsection