@extends('auth.layouts.guest')

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

@section('content')
    <div class="text-center text-lg-start mb-4">
        <p class="text-uppercase text-muted small fw-semibold mb-1" style="letter-spacing: 0.14em;">New password</p>
        <h1 class="h3 fw-bold mb-1">Reset your password</h1>
        <p class="text-muted small mb-0">Choose a strong password with at least 8 characters.</p>
    </div>

    <form method="POST" action="{{ route('password.store') }}">
        @csrf
        <input type="hidden" name="token" value="{{ $token }}">

        <div class="mb-3">
            <label for="company" class="form-label small fw-semibold">Company code</label>
            <input
                id="company"
                type="text"
                name="company"
                value="{{ $company ?? '' }}"
                autocomplete="organization"
                class="form-control @error('company') is-invalid @enderror"
                placeholder="e.g. demo (blank for platform admin)"
            >
            @error('company')
                <div class="invalid-feedback">{{ $message }}</div>
            @enderror
        </div>

        <div class="mb-3">
            <label for="email" class="form-label small fw-semibold">Email address</label>
            <input
                id="email"
                type="email"
                name="email"
                value="{{ $email }}"
                required
                autofocus
                autocomplete="email"
                class="form-control @error('email') is-invalid @enderror"
            >
            @error('email')
                <div class="invalid-feedback">{{ $message }}</div>
            @enderror
        </div>

        <div class="mb-3">
            <label for="password" class="form-label small fw-semibold">New password</label>
            <div class="position-relative login-input-group">
                <input
                    id="password"
                    type="password"
                    name="password"
                    required
                    autocomplete="new-password"
                    class="form-control @error('password') is-invalid @enderror"
                    placeholder="At least 8 characters"
                >
                <button type="button" class="login-password-toggle" data-toggle-password="password" aria-label="Show password">
                    <i class="bi bi-eye"></i>
                </button>
                @error('password')
                    <div class="invalid-feedback d-block">{{ $message }}</div>
                @enderror
            </div>
        </div>

        <div class="mb-4">
            <label for="password_confirmation" class="form-label small fw-semibold">Confirm password</label>
            <div class="position-relative login-input-group">
                <input
                    id="password_confirmation"
                    type="password"
                    name="password_confirmation"
                    required
                    autocomplete="new-password"
                    class="form-control"
                    placeholder="Re-enter your password"
                >
                <button type="button" class="login-password-toggle" data-toggle-password="password_confirmation" aria-label="Show password">
                    <i class="bi bi-eye"></i>
                </button>
            </div>
        </div>

        <button type="submit" class="btn btn-kiyo w-100 login-submit-btn">Reset password</button>
    </form>
@endsection

@push('scripts')
    <script>
        document.querySelectorAll('[data-toggle-password]').forEach((button) => {
            button.addEventListener('click', () => {
                const input = document.getElementById(button.dataset.togglePassword);
                const icon = button.querySelector('i');
                const isPassword = input.type === 'password';
                input.type = isPassword ? 'text' : 'password';
                icon.classList.toggle('bi-eye', !isPassword);
                icon.classList.toggle('bi-eye-slash', isPassword);
                button.setAttribute('aria-label', isPassword ? 'Hide password' : 'Show password');
            });
        });
    </script>
@endpush