@extends('layouts.app')

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

@section('content')
<h4>Atur Password Akun e-Bansos</h4>

@if ($errors->any())
<div class="alert alert-danger">
    {{ $errors->first() }}
</div>
@endif

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

    <input type="hidden" name="token" value="{{ $token }}">
    <input type="hidden" name="email" value="{{ $email }}">

    <div class="mb-2">
        <label>Username</label>
        <input type="text" class="form-control" value="{{ $username }}" readonly>
    </div>

    <div class="mb-2">
        <label>Password Baru</label>
        <input type="password" name="password" id="password"
            class="form-control" required>
    </div>

    <div class="mb-2">
        <label>Konfirmasi Password</label>
        <input type="password" name="password_confirmation"
            id="password_confirmation"
            class="form-control" required>
    </div>

    <div class="form-check mb-3">
        <input type="checkbox" class="form-check-input"
            onclick="togglePasswordVisibility()">
        <label class="form-check-label">Lihat password</label>
    </div>

    <button class="btn btn-success w-100">
        Simpan Password
    </button>
</form>


{{-- SCRIPT LIHAT / SEMBUNYIKAN PASSWORD --}}
<script>
    function togglePasswordVisibility() {
        const password = document.getElementById('password');
        const confirm = document.getElementById('password_confirmation');

        const type = password.type === 'password' ? 'text' : 'password';
        password.type = type;
        confirm.type = type;
    }
</script>
@endsection