@extends('layouts.app')

@section('title', 'Profil Saya')

@section('content')

<div class="page-header">
    <div>
        <h1 class="page-title">Profil Saya</h1>
        <p class="page-subtitle">Kelola informasi akun dan keamanan Anda</p>
    </div>
</div>

<div style="display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;max-width:860px;">

    {{-- Info Profil --}}
    <div class="card">
        <div class="card-header">
            <span class="card-title">Informasi Profil</span>
        </div>
        <div class="card-body">
            <form method="POST" action="{{ route('profile.update') }}" enctype="multipart/form-data">
                @csrf
                @method('PUT')

                {{-- Avatar preview --}}
                <div style="display:flex;align-items:center;gap:1rem;margin-bottom:1.5rem;">
                    <div style="width:72px;height:72px;border-radius:16px;background:var(--primary);display:flex;align-items:center;justify-content:center;font-size:1.25rem;font-weight:700;color:white;overflow:hidden;" id="avatarPreview">
                        @if($user->avatar)
                            <img src="{{ asset('storage/' . $user->avatar) }}" style="width:100%;height:100%;object-fit:cover;" id="avatarImg">
                        @else
                            <span id="avatarInitials">{{ $user->initials }}</span>
                        @endif
                    </div>
                    <div>
                        <label class="btn btn-secondary btn-sm" style="cursor:pointer;">
                            <svg fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.75" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
                            Ganti Foto
                            <input type="file" name="avatar" accept="image/*" style="display:none;" id="avatarInput">
                        </label>
                        <p style="font-size:.75rem;color:var(--gray-400);margin-top:.25rem;">JPG/PNG, maks 2MB</p>
                    </div>
                </div>

                <div class="form-group">
                    <label class="form-label">Nama Lengkap <span class="required">*</span></label>
                    <input type="text" name="name" class="form-control @error('name') is-invalid @enderror"
                           value="{{ old('name', $user->name) }}" required>
                    @error('name') <p class="field-error">{{ $message }}</p> @enderror
                </div>

                <div class="form-group">
                    <label class="form-label">Email <span class="required">*</span></label>
                    <input type="email" name="email" class="form-control @error('email') is-invalid @enderror"
                           value="{{ old('email', $user->email) }}" required>
                    @error('email') <p class="field-error">{{ $message }}</p> @enderror
                </div>

                <div class="form-group">
                    <label class="form-label">Nomor Telepon</label>
                    <input type="text" name="phone" class="form-control @error('phone') is-invalid @enderror"
                           value="{{ old('phone', $user->phone) }}" placeholder="628xxx">
                    @error('phone') <p class="field-error">{{ $message }}</p> @enderror
                </div>

                <div style="padding:.875rem;background:var(--gray-50);border-radius:var(--radius);margin-bottom:1.25rem;">
                    <div style="font-size:.8125rem;color:var(--gray-500);">Role Akses</div>
                    <div style="font-size:.9375rem;font-weight:600;color:var(--gray-800);margin-top:.25rem;">
                        {{ ucfirst(str_replace('_', ' ', $user->getRoleNames()->first() ?? '-')) }}
                    </div>
                </div>

                <button type="submit" class="btn btn-primary w-100">
                    <svg fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
                    Simpan Perubahan
                </button>
            </form>
        </div>
    </div>

    {{-- Ganti Password --}}
    <div class="card">
        <div class="card-header">
            <span class="card-title">Keamanan Akun</span>
        </div>
        <div class="card-body">
            <form method="POST" action="{{ route('profile.password') }}">
                @csrf
                @method('PUT')

                <div class="form-group">
                    <label class="form-label">Password Saat Ini <span class="required">*</span></label>
                    <input type="password" name="current_password"
                           class="form-control @error('current_password') is-invalid @enderror"
                           placeholder="Masukkan password lama" required>
                    @error('current_password') <p class="field-error">{{ $message }}</p> @enderror
                </div>

                <div class="form-group">
                    <label class="form-label">Password Baru <span class="required">*</span></label>
                    <input type="password" name="password"
                           class="form-control @error('password') is-invalid @enderror"
                           placeholder="Min. 8 karakter" required>
                    @error('password') <p class="field-error">{{ $message }}</p> @enderror
                </div>

                <div class="form-group">
                    <label class="form-label">Konfirmasi Password Baru <span class="required">*</span></label>
                    <input type="password" name="password_confirmation"
                           class="form-control"
                           placeholder="Ulangi password baru" required>
                </div>

                <div style="padding:.875rem;background:var(--info-light);border-radius:var(--radius);margin-bottom:1.25rem;">
                    <p style="font-size:.8125rem;color:#1e40af;">
                        Password harus minimal 8 karakter, terdiri dari huruf dan angka.
                    </p>
                </div>

                <button type="submit" class="btn btn-primary w-100">
                    <svg fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/></svg>
                    Ganti Password
                </button>
            </form>
        </div>
    </div>

</div>

@endsection

@push('scripts')
<script>
// Preview avatar
document.getElementById('avatarInput').addEventListener('change', function(e) {
    var file = e.target.files[0];
    if (!file) return;
    var reader = new FileReader();
    reader.onload = function(ev) {
        var preview = document.getElementById('avatarPreview');
        preview.innerHTML = '<img src="' + ev.target.result + '" style="width:100%;height:100%;object-fit:cover;">';
    };
    reader.readAsDataURL(file);
});
</script>
@endpush