<!DOCTYPE html>
<html lang="id">

<head>
    <title>Reset Password - GriyaPadi.id</title>
    <link href="{{ asset('template/frontend/css/bootstrap.min.css') }}" rel="stylesheet">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" />
    <style>
        body {
            background-color: #f0f7e6;
            height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .text-tani {
            color: #81c408;
        }

        .valid-item {
            color: #dc3545;
            font-size: 0.8rem;
            margin-bottom: 2px;
        }

        .valid-item.valid {
            color: #198754;
        }

        .cursor-pointer {
            cursor: pointer;
        }
    </style>
</head>

<body>
    <div class="card border-0 shadow-sm p-4 bg-white" style="max-width: 400px; width: 100%;">
        <div class="text-center mb-4">
            <h4 class="fw-bold text-tani">Buat Password Baru</h4>
        </div>

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

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

            <div class="mb-3">
                <label class="form-label small fw-bold text-muted">Email</label>
                <input type="email" name="email" class="form-control" value="{{ $email ?? old('email') }}" readonly>
            </div>

            {{-- Password Baru --}}
            <div class="mb-2">
                <label class="form-label small fw-bold text-muted">Password Baru</label>
                <div class="input-group">
                    <input type="password" name="password" id="password" class="form-control border-end-0" required
                        onkeyup="checkPassword()">
                    <span class="input-group-text bg-white border-start-0 cursor-pointer"
                        onclick="togglePassword('password', 'icon-1')">
                        <i class="fas fa-eye text-muted" id="icon-1"></i>
                    </span>
                </div>
            </div>

            {{-- Indikator Validasi --}}
            <div class="mb-3 ps-1">
                <div id="req-length" class="valid-item"><i class="fas fa-times"></i> Minimal 8 Karakter</div>
                <div id="req-number" class="valid-item"><i class="fas fa-times"></i> Ada Angka (0-9)</div>
                <div id="req-upper" class="valid-item"><i class="fas fa-times"></i> Ada Huruf Kapital (A-Z)</div>
            </div>

            <div class="mb-4">
                <label class="form-label small fw-bold text-muted">Ulangi Password</label>
                <div class="input-group">
                    <input type="password" name="password_confirmation" id="password_conf"
                        class="form-control border-end-0" required>
                    <span class="input-group-text bg-white border-start-0 cursor-pointer"
                        onclick="togglePassword('password_conf', 'icon-2')">
                        <i class="fas fa-eye text-muted" id="icon-2"></i>
                    </span>
                </div>
            </div>

            <div class="d-grid">
                <button type="submit" class="btn text-white fw-bold" style="background-color: #81c408;">Simpan
                    Password</button>
            </div>
        </form>
    </div>

    <script>
        function togglePassword(inputId, iconId) {
            const input = document.getElementById(inputId);
            const icon = document.getElementById(iconId);
            if (input.type === "password") {
                input.type = "text";
                icon.classList.remove("fa-eye");
                icon.classList.add("fa-eye-slash");
            } else {
                input.type = "password";
                icon.classList.remove("fa-eye-slash");
                icon.classList.add("fa-eye");
            }
        }

        function checkPassword() {
            const password = document.getElementById('password').value;
            updateRequirement('req-length', password.length >= 8);
            updateRequirement('req-number', /\d/.test(password));
            updateRequirement('req-upper', /[A-Z]/.test(password));
        }

        function updateRequirement(id, isValid) {
            const element = document.getElementById(id);
            const icon = element.querySelector('i');
            if (isValid) {
                element.classList.add('valid');
                icon.classList.remove('fa-times');
                icon.classList.add('fa-check');
            } else {
                element.classList.remove('valid');
                icon.classList.remove('fa-check');
                icon.classList.add('fa-times');
            }
        }
    </script>
</body>

</html>
