<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Keamanan & Profil - Pustaka Nawasena</title>
<link rel="icon" href="{{ asset('images/pustaka.jpeg') }}" 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">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">

<style>
body {
    font-family: 'Inter', sans-serif;
    background: #f5f7fa;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.card {
    background: #fff;
    border-radius: 25px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    width: 100%;
    max-width: 450px;
    padding: 40px 35px;
    transition: all 0.3s ease;
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0,0,0,0.15);
}

h4 {
    text-align: center;
    font-weight: 700;
    color: #0d47a1;
    margin-bottom: 25px;
}

.form-label {
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: 6px;
}

.input-group-text {
    background: #f1f3f6;
    border: 1px solid #ced4da;
    border-radius: 10px 0 0 10px;
}

.form-control {
    border-radius: 0 10px 10px 0;
    border: 1px solid #ced4da;
}

.form-control:focus {
    border-color: #0d6efd;
    box-shadow: none;
}

#passwordHelp {
    font-size: 0.8rem;
    margin-top: 8px;
}
.valid { color: green; }
.invalid { color: red; }

.btn-primary {
    background-color: #0d6efd;
    border: none;
    border-radius: 10px;
    padding: 10px;
    font-weight: 600;
    width: 100%;
    margin-top: 15px;
}

.btn-primary:hover {
    background-color: #0b5ed7;
}

.password-toggle {
    cursor: pointer;
    border-radius: 0 10px 10px 0;
}

.btn-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background-color: #e9ecef;
    color: #333;
    border-radius: 10px;
    border: none;
    font-weight: 600;
    padding: 10px 14px;
    width: 100%;
    transition: all 0.2s ease;
}

.btn-back:hover {
    background-color: #d6d8db;
    color: #0d47a1;
    text-decoration: none;
}

@media (max-width: 576px) {
    .card {
        padding: 30px 20px;
        margin: 0 10px;
    }
}
</style>
</head>
<body>

<div class="card">

    <div class="text-center mb-4">
        <img src="{{ asset('images/kartu.png') }}" alt="Logo" width="60" class="mb-2">
        <h4>Perbarui Profil & Keamanan</h4>
    </div>

    @if(session('success'))
        <div class="alert alert-success text-center">{{ session('success') }}</div>
        <script>setTimeout(function(){ window.location.href = "{{ route('admin.profile') }}"; }, 2000);</script>
    @endif

    <form action="{{ route('admin.updateProfile') }}" method="POST" id="securityForm">
        @csrf

        <div class="mb-3">
            <label class="form-label">Nama Lengkap</label>
            <div class="input-group">
                <span class="input-group-text"><i class="bi bi-person-fill"></i></span>
                <input type="text" name="name" class="form-control" value="{{ $user->name }}" required>
            </div>
            @error('name') <small class="text-danger">{{ $message }}</small> @enderror
        </div>

        <div class="mb-3">
            <label class="form-label">Email</label>
            <div class="input-group">
                <span class="input-group-text"><i class="bi bi-envelope-fill"></i></span>
                <input type="email" name="email" class="form-control" value="{{ $user->email }}" required>
            </div>
            @error('email') <small class="text-danger">{{ $message }}</small> @enderror
        </div>

        <hr class="my-4">

        <div class="mb-3">
            <label class="form-label">Password Saat Ini</label>
            <div class="input-group">
                <span class="input-group-text"><i class="bi bi-lock-fill"></i></span>
                <input type="password" name="current_password" id="current_password" class="form-control" placeholder="Masukkan password lama" required>
                <span class="input-group-text password-toggle" onclick="togglePassword('current_password')"><i class="bi bi-eye-fill"></i></span>
            </div>
        </div>

        <div class="mb-3">
            <label class="form-label">Password Baru</label>
            <div class="input-group">
                <span class="input-group-text"><i class="bi bi-key-fill"></i></span>
                <input type="password" name="new_password" id="new_password" class="form-control" placeholder="Masukkan password baru" required>
                <span class="input-group-text password-toggle" onclick="togglePassword('new_password')"><i class="bi bi-eye-fill"></i></span>
            </div>
            <div id="passwordHelp">
                <span id="length" class="invalid">Minimal 8 karakter</span><br>
                <span id="capital" class="invalid">Mengandung huruf kapital</span><br>
                <span id="number" class="invalid">Mengandung angka</span><br>
                <span id="symbol" class="invalid">Mengandung simbol (!@#$%^&*)</span>
            </div>
        </div>

        <div class="mb-4">
            <label class="form-label">Konfirmasi Password Baru</label>
            <div class="input-group">
                <span class="input-group-text"><i class="bi bi-key-fill"></i></span>
                <input type="password" name="new_password_confirmation" id="new_password_confirmation" class="form-control" placeholder="Ulangi password baru" required>
                <span class="input-group-text password-toggle" onclick="togglePassword('new_password_confirmation')"><i class="bi bi-eye-fill"></i></span>
            </div>
            <small id="match" class="invalid">Password harus sama</small>
        </div>

        <button type="submit" class="btn btn-primary" id="submitBtn" disabled>
            <i class="bi bi-save"></i> Simpan Perubahan
        </button>

        <div class="mt-3">
            <a href="{{ route('admin.profile') }}" class="btn-back">
                <i class="bi bi-arrow-left"></i> Kembali
            </a>
        </div>

    </form>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<script>
const newPassword = document.getElementById('new_password');
const confirmPassword = document.getElementById('new_password_confirmation');
const submitBtn = document.getElementById('submitBtn');

const lengthCheck = document.getElementById('length');
const capitalCheck = document.getElementById('capital');
const numberCheck = document.getElementById('number');
const symbolCheck = document.getElementById('symbol');
const matchCheck = document.getElementById('match');

function validatePassword() {
    const val = newPassword.value;
    const confirmVal = confirmPassword.value;

    const lengthValid = val.length >= 8;
    const capitalValid = /[A-Z]/.test(val);
    const numberValid = /[0-9]/.test(val);
    const symbolValid = /[!@#$%^&*(),.?":{}|<>]/.test(val);
    const matchValid = val === confirmVal && val !== '';

    lengthCheck.className = lengthValid ? 'valid' : 'invalid';
    capitalCheck.className = capitalValid ? 'valid' : 'invalid';
    numberCheck.className = numberValid ? 'valid' : 'invalid';
    symbolCheck.className = symbolValid ? 'valid' : 'invalid';
    matchCheck.className = matchValid ? 'valid' : 'invalid';

    submitBtn.disabled = !(lengthValid && capitalValid && numberValid && symbolValid && matchValid);
}

newPassword.addEventListener('input', validatePassword);
confirmPassword.addEventListener('input', validatePassword);

function togglePassword(id){
    const input = document.getElementById(id);
    input.type = input.type === "password" ? "text" : "password";
}
</script>
</body>
</html>
