@extends('layouts.mainlayout')
@section('fullwidth', true)
@section('content')
    <main class="smarthr-settings-page" aria-labelledby="password-page-title">
        <header class="smarthr-employees-page-header smarthr-settings-page-header">
            <div>
                <h1 id="password-page-title">Account settings</h1>
                <p>Update the password used to access your SmartHR account.</p>
            </div>
        </header>

        <section class="card smarthr-settings-card" aria-labelledby="password-card-title">
            <div class="card-header smarthr-employees-card-header">
                <div>
                    <span class="smarthr-employees-header-icon"><i class="fas fa-lock" aria-hidden="true"></i></span>
                    <span id="password-card-title">Change password</span>
                </div>
            </div>
            <div class="card-body smarthr-settings-card-body">
                @if ($errors->any())
                    <div class="alert alert-danger" role="alert">
                        <ul class="mb-0">
                            @foreach ($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                @endif

                <form action="/resetpass/{{ Auth::id() }}" method="post" id="password-update-form" novalidate>
                    @csrf
                    <div class="smarthr-settings-form-grid">
                        <div class="form-group">
                            <label for="password">New password</label>
                            <div class="smarthr-settings-password-field">
                                <i class="fas fa-lock" aria-hidden="true"></i>
                                <input type="password" name="pass" id="password" class="form-control" autocomplete="new-password" required>
                                <button type="button" class="smarthr-password-visibility" data-password-target="password" aria-label="Show password">
                                    <i class="far fa-eye" aria-hidden="true"></i>
                                </button>
                            </div>
                            <div class="smarthr-password-meter" aria-hidden="true"><span id="password-strength-bar"></span></div>
                            <small id="password-strength-status" class="smarthr-password-help">Use at least 8 characters, including a letter, number and special character.</small>
                        </div>

                        <div class="form-group">
                            <label for="password-confirmation">Confirm new password</label>
                            <div class="smarthr-settings-password-field">
                                <i class="fas fa-shield-alt" aria-hidden="true"></i>
                                <input type="password" name="pass_confirmation" id="password-confirmation" class="form-control" autocomplete="new-password" required>
                                <button type="button" class="smarthr-password-visibility" data-password-target="password-confirmation" aria-label="Show password confirmation">
                                    <i class="far fa-eye" aria-hidden="true"></i>
                                </button>
                            </div>
                            <small id="password-match-status" class="smarthr-password-help">Enter the same password again.</small>
                        </div>
                    </div>

                    <div class="smarthr-settings-actions">
                        <button type="submit" class="btn btn-primary" id="password-submit" disabled>
                            <i class="fas fa-check" aria-hidden="true"></i>
                            Update password
                        </button>
                    </div>
                </form>
            </div>
        </section>
    </main>

    <script>
        (function () {
            var password = document.getElementById('password');
            var confirmation = document.getElementById('password-confirmation');
            var submit = document.getElementById('password-submit');
            var strengthStatus = document.getElementById('password-strength-status');
            var matchStatus = document.getElementById('password-match-status');
            var strengthBar = document.getElementById('password-strength-bar');

            function evaluatePassword() {
                var value = password.value;
                var strong = value.length >= 8 && /[A-Za-z]/.test(value) && /[0-9]/.test(value) && /[^A-Za-z0-9]/.test(value);
                var matches = value !== '' && value === confirmation.value;

                strengthBar.className = strong ? 'is-strong' : (value.length >= 6 ? 'is-medium' : (value ? 'is-weak' : ''));
                strengthStatus.className = 'smarthr-password-help ' + (strong ? 'is-valid' : (value ? 'is-invalid' : ''));
                strengthStatus.textContent = strong
                    ? 'Strong password.'
                    : 'Use at least 8 characters, including a letter, number and special character.';

                matchStatus.className = 'smarthr-password-help ' + (matches ? 'is-valid' : (confirmation.value ? 'is-invalid' : ''));
                matchStatus.textContent = matches ? 'Passwords match.' : 'Enter the same password again.';
                submit.disabled = !(strong && matches);
            }

            password.addEventListener('input', evaluatePassword);
            confirmation.addEventListener('input', evaluatePassword);

            document.querySelectorAll('.smarthr-password-visibility').forEach(function (button) {
                button.addEventListener('click', function () {
                    var input = document.getElementById(button.getAttribute('data-password-target'));
                    var show = input.type === 'password';
                    input.type = show ? 'text' : 'password';
                    button.setAttribute('aria-label', show ? 'Hide password' : 'Show password');
                    button.querySelector('i').className = show ? 'far fa-eye-slash' : 'far fa-eye';
                });
            });
        })();
    </script>
@endsection