<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Buat Password Baru | SIM Sari Rasa</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/admin-lte@3.2/dist/css/adminlte.min.css">
    <style>
        body {
            background: url('<?= base_url('uploads/back_sari.png') ?>') no-repeat center center fixed !important;
            background-size: cover !important;
        }
        body::before {
            content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0;
            background: rgba(240, 253, 244, 0.4); z-index: -1;
        }
        .btn-info { background-color: #0284c7; border: none; }
        .btn-info:hover { background-color: #0369a1; }
    </style>
</head>
<body class="hold-transition login-page">
    <div class="login-box">
        <div class="card card-info card-outline shadow">
            <div class="card-body login-card-body rounded">
                <h5 class="text-center font-weight-bold text-dark mb-3"><i class="fas fa-key text-info"></i> Buat Password Baru</h5>
                
                <form action="<?= base_url('auth/proses_reset') ?>" method="post" id="formReset">
                    <input type="hidden" name="token" value="<?= $token ?>">

                    <div class="form-group mb-3">
                        <label class="text-sm text-muted">Ketik Password Baru</label>
                        <input type="password" name="password_baru" id="p1" class="form-control" placeholder="Minimal 6 karakter" required autofocus>
                    </div>

                    <div class="form-group mb-3">
                        <label class="text-sm text-muted">Ulangi Password Baru</label>
                        <input type="password" id="p2" class="form-control" placeholder="Harus sama dengan kolom di atas" required>
                        <small class="text-danger d-none" id="msg_error">* Konfirmasi password tidak cocok!</small>
                    </div>

                    <button type="submit" class="btn btn-info btn-block font-weight-bold">Simpan Kata Sandi Baru</button>
                </form>
            </div>
        </div>
    </div>

    <script>
        document.getElementById('formReset').addEventListener('submit', function(e) {
            const p1 = document.getElementById('p1').value;
            const p2 = document.getElementById('p2').value;
            const msg = document.getElementById('msg_error');

            if (p1 !== p2) {
                e.preventDefault(); // Batalkan pengiriman form
                msg.classList.remove('d-none');
            }
        });
    </script>
</body>
</html>