@extends('layouts.app', ['title' => 'Profil Saya', 'heading' => 'Pengaturan Profil'])

@section('content')
<div class="row">
    <div class="col-md-6">
        <div class="card mb-4">
            <h5 class="card-header">Detail Profil</h5>
            <div class="card-body">
                <form action="{{ route('profile.update') }}" method="POST">
                    @csrf
                    @method('PUT')
                    
                    <div class="mb-3">
                        <label for="name" class="form-label">Nama Lengkap</label>
                        <input type="text" class="form-control @error('name') is-invalid @enderror" id="name" name="name" value="{{ old('name', $user->name) }}" required>
                        @error('name')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="mb-3">
                        <label for="username" class="form-label">Username</label>
                        <input type="text" class="form-control @error('username') is-invalid @enderror" id="username" name="username" value="{{ old('username', $user->username) }}" required>
                        @error('username')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                        <div class="form-text">Username digunakan untuk login ke sistem.</div>
                    </div>

                    <hr class="my-4">
                    <h5 class="mb-3">Ganti Password (Opsional)</h5>

                    <div class="mb-3">
                        <label for="new_password" class="form-label">Password Baru</label>
                        <input type="password" class="form-control @error('new_password') is-invalid @enderror" id="new_password" name="new_password">
                        @error('new_password')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="mb-3">
                        <label for="new_password_confirmation" class="form-label">Konfirmasi Password Baru</label>
                        <input type="password" class="form-control" id="new_password_confirmation" name="new_password_confirmation">
                    </div>

                    <hr class="my-4">
                    <div class="p-3 bg-label-warning rounded mb-3">
                        <h6 class="text-warning mb-2"><i class="ti tabler-shield-lock me-2"></i>Verifikasi Keamanan</h6>
                        <label for="pin" class="form-label">Masukkan PIN Keamanan <span class="text-danger">*</span></label>
                        <input type="password" class="form-control @error('pin') is-invalid @enderror" id="pin" name="pin" placeholder="Masukkan 6 digit PIN" required>
                        @error('pin')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                        <div class="form-text">Perubahan data profil dan password memerlukan PIN keamanan.</div>
                    </div>

                    <div class="mt-2">
                        <button type="submit" class="btn btn-primary me-2 waves-effect waves-light">Simpan Perubahan</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    
    <div class="col-md-6">
        <div class="card">
            <div class="card-body text-center">
                <div class="avatar avatar-xl mx-auto mb-3">
                    <span class="avatar-initial rounded-circle bg-label-primary fs-2">{{ substr($user->name, 0, 1) }}</span>
                </div>
                <h4>{{ $user->name }}</h4>
                <p class="text-muted">@<span>{{ $user->username }}</span></p>
                <div class="d-flex justify-content-center gap-2">
                    <span class="badge bg-label-success">Aktif</span>
                    <span class="badge bg-label-primary">Admin</span>
                </div>
                <hr class="my-4">
                <div class="text-start">
                    <p class="mb-1 fw-bold">Tips Keamanan:</p>
                    <ul class="small text-muted ps-3">
                        <li>Gunakan kombinasi huruf besar, kecil, angka, dan simbol.</li>
                        <li>Jangan bagikan PIN keamanan Anda kepada siapapun.</li>
                        <li>Ganti password secara berkala setiap 3 bulan.</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection
