{{--
    Halaman: Reset Password
    Layout : layouts/guest.blade.php (Bootstrap 5 SparkWash)
    Route  : /reset-password/{token} (POST → NewPasswordController)
--}}
<x-layouts.guest :title="'Reset Password — SparkWash'">

    <p class="text-center mb-4" style="font-size: 0.875rem; color: var(--sw-gray);">
        Masukkan password baru Anda di bawah ini.
    </p>

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

        {{-- Token tersembunyi --}}
        <input type="hidden" name="token" value="{{ $request->route('token') }}">

        {{-- Email --}}
        <div class="mb-3">
            <label for="email" class="form-label">
                <i class="fas fa-envelope me-1" style="color: var(--sw-primary);"></i>
                Alamat Email
            </label>
            <input
                id="email"
                type="email"
                name="email"
                value="{{ old('email', $request->email) }}"
                class="form-control @error('email') is-invalid @enderror"
                required
                autofocus
                autocomplete="username"
            >
            @error('email')
                <div class="invalid-feedback">{{ $message }}</div>
            @enderror
        </div>

        {{-- Password Baru --}}
        <div class="mb-3">
            <label for="password" class="form-label">
                <i class="fas fa-lock me-1" style="color: var(--sw-primary);"></i>
                Password Baru
            </label>
            <div class="input-group">
                <input
                    id="password"
                    type="password"
                    name="password"
                    class="form-control @error('password') is-invalid @enderror"
                    placeholder="Minimal 8 karakter"
                    required
                    autocomplete="new-password"
                >
                <button class="btn btn-outline-secondary border"
                        type="button" id="togglePassword" tabindex="-1">
                    <i class="fas fa-eye" id="togglePasswordIcon"></i>
                </button>
                @error('password')
                    <div class="invalid-feedback">{{ $message }}</div>
                @enderror
            </div>
        </div>

        {{-- Konfirmasi Password Baru --}}
        <div class="mb-4">
            <label for="password_confirmation" class="form-label">
                <i class="fas fa-lock me-1" style="color: var(--sw-primary);"></i>
                Konfirmasi Password Baru
            </label>
            <div class="input-group">
                <input
                    id="password_confirmation"
                    type="password"
                    name="password_confirmation"
                    class="form-control @error('password_confirmation') is-invalid @enderror"
                    placeholder="Ulangi password baru"
                    required
                    autocomplete="new-password"
                >
                <button class="btn btn-outline-secondary border"
                        type="button" id="togglePasswordConfirm" tabindex="-1">
                    <i class="fas fa-eye" id="togglePasswordConfirmIcon"></i>
                </button>
                @error('password_confirmation')
                    <div class="invalid-feedback">{{ $message }}</div>
                @enderror
            </div>
        </div>

        {{-- Tombol Reset --}}
        <button type="submit" class="btn btn-primary w-100 py-2 fw-500">
            <i class="fas fa-key me-2"></i>
            Reset Password
        </button>

    </form>

    @push('scripts')
    <script>
        function togglePasswordVisibility(inputId, iconId) {
            const input = document.getElementById(inputId);
            const icon  = document.getElementById(iconId);
            if (input.type === 'password') {
                input.type = 'text';
                icon.classList.replace('fa-eye', 'fa-eye-slash');
            } else {
                input.type = 'password';
                icon.classList.replace('fa-eye-slash', 'fa-eye');
            }
        }

        document.getElementById('togglePassword')
            .addEventListener('click', () => togglePasswordVisibility('password', 'togglePasswordIcon'));

        document.getElementById('togglePasswordConfirm')
            .addEventListener('click', () => togglePasswordVisibility('password_confirmation', 'togglePasswordConfirmIcon'));
    </script>
    @endpush

</x-layouts.guest>