<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Reset Kata Sandi - Pustaka Nawasena</title>
    <link rel="icon" href="{{ asset('images/kartu.png') }}" type="image/png">

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">

    <style>
        body {
            font-family: 'Inter', sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            margin: 0;
            background: url('{{ asset("images/utama.jpg") }}') no-repeat center center / cover;
            position: relative;
        }

        body::before {
            content: '';
            position: absolute;
            inset: 0;
            background: rgba(0, 0, 0, 0.45);
            backdrop-filter: blur(5px);
            z-index: 0;
        }

        .auth-card {
            position: relative;
            z-index: 1;
            background: #fff;
            border-radius: 20px;
            padding: 45px 40px;
            width: 90%;
            max-width: 430px;
            box-shadow: 0 20px 50px rgba(0,0,0,0.4);
            opacity: 0;
            transform: translateY(40px) scale(0.95);
            animation: fadeInCard 0.8s ease-out forwards;
        }

        @keyframes fadeInCard {
            to { opacity: 1; transform: translateY(0) scale(1); }
        }

        .logo-wrapper {
            display: flex;
            justify-content: center;
            margin-bottom: 20px;
        }

        .logo-wrapper img {
            width: 85px;
            height: 85px;
            object-fit: contain;
            border-radius: 50%;
            background: #fff;
            box-shadow: 0 4px 15px rgba(249, 115, 22, 0.4);
            transition: transform 0.3s ease;
        }

        .logo-wrapper img:hover {
            transform: scale(1.05);
        }

        .header-bar {
            text-align: center;
            margin-bottom: 25px;
        }

        .header-bar h5 {
            color: #1e3a8a;
            font-weight: 800;
            font-size: 1.5rem;
            margin-bottom: 3px;
        }

        .header-bar small {
            color: #4b5563;
            font-size: 0.95rem;
            font-weight: 500;
        }

        input.form-control {
            border-radius: 12px;
            padding: 10px 12px;
            border: 1.5px solid #ddd;
            transition: all 0.3s ease;
        }

        input.form-control:focus {
            border-color: #f97316;
            box-shadow: 0 0 10px rgba(249, 115, 22, 0.4);
            transform: scale(1.02);
        }

        button.btn-primary {
            background: #f97316;
            border: none;
            border-radius: 12px;
            font-weight: 700;
            transition: all 0.3s ease;
        }

        button.btn-primary:hover {
            background: #ea580c;
            transform: translateY(-2px);
            box-shadow: 0 6px 15px rgba(249, 115, 22, 0.5);
        }

        .back-login {
            display: block;
            text-align: center;
            font-size: 0.9rem;
            margin-top: 15px;
        }

        .back-login a {
            color: #1e3a8a;
            text-decoration: none;
            transition: color 0.3s;
            font-weight: 600;
        }

        .back-login a:hover {
            color: #f97316;
            text-decoration: underline;
        }

        @media (max-width: 480px) {
            .auth-card { padding: 35px 25px; }
            .logo-wrapper img { width: 70px; height: 70px; }
            .header-bar h5 { font-size: 1.3rem; }
            .header-bar small { font-size: 0.85rem; }
        }
    </style>
</head>
<body>

<div class="auth-card">
    <div class="logo-wrapper">
        <img src="{{ asset('images/kartu.png') }}" alt="Logo Pustaka Nawasena">
    </div>

    <div class="header-bar">
        <h5>Pustaka Nawasena</h5>
        <small>Bakorwil III Malang</small>
    </div>

    <h6 class="text-center mb-4 fw-bold text-secondary">Reset Kata Sandi</h6>

    @if(session('status'))
        <div class="alert alert-success text-center py-2">{{ session('status') }}</div>
    @endif

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

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

        <div class="mb-3">
            <label for="email" class="form-label fw-semibold">Alamat Email</label>
            <input type="email" class="form-control" id="email" name="email" required>
        </div>

        <div class="mb-3 position-relative">
    <label for="password" class="form-label fw-semibold">Kata Sandi Baru</label>
    <input type="password" class="form-control" id="password" name="password" required>
    <i class="bi bi-eye-slash position-absolute togglePassword" 
       data-target="password"
       style="top: 50%; right: 14px; transform: translateY(-50%); cursor: pointer; color: #555;">
    </i>
</div>

<div class="mb-3 position-relative">
    <label for="password_confirmation" class="form-label fw-semibold">Konfirmasi Kata Sandi</label>
    <input type="password" class="form-control" id="password_confirmation" name="password_confirmation" required>
    <i class="bi bi-eye-slash position-absolute togglePassword" 
       data-target="password_confirmation"
       style="top: 50%; right: 14px; transform: translateY(-50%); cursor: pointer; color: #555;">
    </i>
</div>


        <button type="submit" class="btn btn-primary w-100">Ubah Kata Sandi</button>
    </form>

    <div class="back-login">
        <a href="{{ route('login') }}">← Kembali ke Halaman Login</a>
    </div>
</div>

<script>
document.querySelectorAll('.togglePassword').forEach(icon => {
    icon.addEventListener('click', function () {
        const target = document.getElementById(this.dataset.target);

        if (target.type === "password") {
            target.type = "text";
            this.classList.remove("bi-eye-slash");
            this.classList.add("bi-eye");
        } else {
            target.type = "password";
            this.classList.remove("bi-eye");
            this.classList.add("bi-eye-slash");
        }
    });
});
</script>


</body>
</html>

