@extends('layouts.siswa')

@section('title', 'Pengaturan - CBT Online')

@section('content')
<div class="page-header mb-4">
    <h4 class="mb-1">Pengaturan Akun</h4>
    <p class="mb-0">Kelola profil dan keamanan akun Anda</p>
</div>

<div class="row g-4">
    <!-- Profile Information Card -->
    <div class="col-12 col-lg-6">
        <div class="card h-100">
            <div class="card-header">
                <div class="d-flex align-items-center gap-2">
                    <div style="width:32px;height:32px;border-radius:8px;background:#eff6ff;display:flex;align-items:center;justify-content:center;">
                        <i class="bi bi-person-fill" style="color:#3b82f6;font-size:0.95rem;"></i>
                    </div>
                    <h6 class="mb-0">Informasi Profil</h6>
                </div>
            </div>
            <div class="card-body">
                <form>
                    <!-- Avatar placeholder -->
                    <div class="text-center mb-4">
                        <div style="width:72px;height:72px;border-radius:50%;background:linear-gradient(135deg,var(--primary-custom),var(--secondary-custom));display:flex;align-items:center;justify-content:center;margin:0 auto 0.75rem;box-shadow:0 4px 12px rgba(0,0,0,0.15);">
                            <span style="font-size:1.75rem;font-weight:700;color:#fff;font-family:'DM Sans',sans-serif;">
                                {{ strtoupper(substr($user->name, 0, 1)) }}
                            </span>
                        </div>
                        <p class="fw-semibold mb-0" style="font-size:0.9rem;">{{ $user->name }}</p>
                        <p class="text-muted mb-0" style="font-size:0.8rem;">{{ $user->email }}</p>
                    </div>

                    <div class="mb-3">
                        <label class="form-label fw-semibold" style="font-size:0.8rem;color:var(--gray);text-transform:uppercase;letter-spacing:0.05em;">Nama Lengkap</label>
                        <input type="text" class="form-control" value="{{ $user->name }}" readonly
                               style="background:#fafafa;color:var(--dark);">
                    </div>

                    <div class="mb-3">
                        <label class="form-label fw-semibold" style="font-size:0.8rem;color:var(--gray);text-transform:uppercase;letter-spacing:0.05em;">Email</label>
                        <input type="email" class="form-control" value="{{ $user->email }}" readonly
                               style="background:#fafafa;color:var(--dark);">
                    </div>

                    <div class="mb-3">
                        <label class="form-label fw-semibold" style="font-size:0.8rem;color:var(--gray);text-transform:uppercase;letter-spacing:0.05em;">Nomor Telepon</label>
                        <input type="tel" class="form-control" value="{{ $user->phone ?? '-' }}" readonly
                               style="background:#fafafa;color:var(--dark);">
                    </div>

                    <div class="mb-4">
                        <label class="form-label fw-semibold" style="font-size:0.8rem;color:var(--gray);text-transform:uppercase;letter-spacing:0.05em;">Kelas</label>
                        <input type="text" class="form-control" value="{{ $student->classModel->name ?? '-' }}" readonly
                               style="background:#fafafa;color:var(--dark);">
                    </div>

                    <div class="alert alert-info py-2 px-3 mb-0" style="font-size:0.82rem;">
                        <i class="bi bi-info-circle me-1"></i>
                        Hubungi admin untuk mengubah informasi profil.
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- Change Password Card -->
    <div class="col-12 col-lg-6">
        <div class="card h-100">
            <div class="card-header">
                <div class="d-flex align-items-center gap-2">
                    <div style="width:32px;height:32px;border-radius:8px;background:#fffbeb;display:flex;align-items:center;justify-content:center;">
                        <i class="bi bi-shield-lock-fill" style="color:#f59e0b;font-size:0.95rem;"></i>
                    </div>
                    <h6 class="mb-0">Ubah Password</h6>
                </div>
            </div>
            <div class="card-body">
                <!-- Security tips -->
                <div style="background:#f8fafc;border:1px solid var(--border);border-radius:10px;padding:0.875rem 1rem;margin-bottom:1.375rem;">
                    <p class="fw-semibold mb-2" style="font-size:0.8rem;color:var(--gray);">Tips keamanan password:</p>
                    <div class="d-flex flex-column gap-1" style="font-size:0.78rem;color:var(--gray);">
                        <span><i class="bi bi-check text-success me-1"></i>Minimal 8 karakter</span>
                        <span><i class="bi bi-check text-success me-1"></i>Kombinasi huruf dan angka</span>
                        <span><i class="bi bi-check text-success me-1"></i>Jangan gunakan info pribadi</span>
                    </div>
                </div>

                <form id="changePasswordForm">
                    <div class="mb-3">
                        <label for="currentPassword" class="form-label fw-semibold" style="font-size:0.8rem;color:var(--gray);text-transform:uppercase;letter-spacing:0.05em;">Password Saat Ini</label>
                        <div class="input-group">
                            <span class="input-group-text">
                                <i class="bi bi-key"></i>
                            </span>
                            <input type="password" class="form-control" id="currentPassword"
                                   placeholder="Masukkan password saat ini" required>
                            <span class="input-group-text toggle-password" data-target="currentPassword"
                                  style="cursor:pointer;">
                                <i class="bi bi-eye"></i>
                            </span>
                        </div>
                    </div>

                    <div class="mb-3">
                        <label for="newPassword" class="form-label fw-semibold" style="font-size:0.8rem;color:var(--gray);text-transform:uppercase;letter-spacing:0.05em;">Password Baru</label>
                        <div class="input-group">
                            <span class="input-group-text">
                                <i class="bi bi-key-fill"></i>
                            </span>
                            <input type="password" class="form-control" id="newPassword"
                                   placeholder="Masukkan password baru" required>
                            <span class="input-group-text toggle-password" data-target="newPassword"
                                  style="cursor:pointer;">
                                <i class="bi bi-eye"></i>
                            </span>
                        </div>
                    </div>

                    <div class="mb-3">
                        <label for="confirmPassword" class="form-label fw-semibold" style="font-size:0.8rem;color:var(--gray);text-transform:uppercase;letter-spacing:0.05em;">Konfirmasi Password Baru</label>
                        <div class="input-group">
                            <span class="input-group-text">
                                <i class="bi bi-key-fill"></i>
                            </span>
                            <input type="password" class="form-control" id="confirmPassword"
                                   placeholder="Ulangi password baru" required>
                            <span class="input-group-text toggle-password" data-target="confirmPassword"
                                  style="cursor:pointer;">
                                <i class="bi bi-eye"></i>
                            </span>
                        </div>
                    </div>

                    <div class="alert alert-warning d-none py-2 px-3 mb-3" id="passwordError" role="alert" style="font-size:0.82rem;">
                        <i class="bi bi-exclamation-triangle me-1"></i>
                        Password tidak cocok!
                    </div>

                    <button type="submit" class="btn btn-accent w-100" style="height:42px;font-size:0.9rem;">
                        <i class="bi bi-shield-check me-2"></i>Update Password
                    </button>
                </form>
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Toggle password visibility
    document.querySelectorAll('.toggle-password').forEach(function(button) {
        button.addEventListener('click', function() {
            const targetId = this.getAttribute('data-target');
            const passwordInput = document.getElementById(targetId);
            const icon = this.querySelector('i');
            
            if (passwordInput.type === 'password') {
                passwordInput.type = 'text';
                icon.classList.replace('bi-eye', 'bi-eye-slash');
            } else {
                passwordInput.type = 'password';
                icon.classList.replace('bi-eye-slash', 'bi-eye');
            }
        });
    });

    // Password form submission
    document.getElementById('changePasswordForm').addEventListener('submit', function(e) {
        e.preventDefault();

        const currentPassword = document.getElementById('currentPassword').value;
        const newPassword = document.getElementById('newPassword').value;
        const confirmPassword = document.getElementById('confirmPassword').value;
        const errorDiv = document.getElementById('passwordError');

        errorDiv.classList.add('d-none');
        errorDiv.textContent = 'Password tidak cocok!';

        if (newPassword != confirmPassword) {
            errorDiv.textContent = 'Password tidak cocok!';
            errorDiv.classList.remove('d-none');
            return;
        }

        if (newPassword.length < 8) {
            errorDiv.textContent = 'Password minimal 8 karakter!';
            errorDiv.classList.remove('d-none');
            return;
        }

        function submitPasswordChange() {
            fetch('/siswa/settings/change-password', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
                },
                body: JSON.stringify({
                    current_password: currentPassword,
                    new_password: newPassword
                })
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    AppAlert.success(data.message || 'Password berhasil diubah!');
                    document.getElementById('currentPassword').value = '';
                    document.getElementById('newPassword').value = '';
                    document.getElementById('confirmPassword').value = '';
                    errorDiv.classList.add('d-none');
                } else {
                    errorDiv.textContent = data.message || 'Gagal mengubah password';
                    errorDiv.classList.remove('d-none');
                    AppAlert.error(data.message || 'Gagal mengubah password');
                }
            })
            .catch(error => {
                errorDiv.textContent = 'Terjadi kesalahan saat mengubah password';
                errorDiv.classList.remove('d-none');
                AppAlert.error('Terjadi kesalahan saat mengubah password');
            });
        }

        AppAlert.confirm(
            'Ubah Password',
            'Apakah Anda yakin ingin mengubah password akun Anda?',
            submitPasswordChange
        );
    });
});
</script>
@endsection