{{-- resources/views/profile/edit.blade.php --}}
<x-app-layout>

@push('styles')
    <link rel="stylesheet" href="{{ asset('css/profile.css') }}">
@endpush

<div class="prf-wrap">
    <div class="prf-inner">

        {{-- ── PAGE HEADER ── --}}
        <div style="display:flex; align-items:center; gap:15px; margin-bottom:30px;">
            <div class="prf-icon-wrap">
                <i class="fas fa-user-circle"></i>
            </div>
            <div>
                <h1 class="prf-page-title">Profil Saya</h1>
                <p class="prf-page-sub">Kelola detail akun dan keamanan Anda</p>
            </div>
        </div>

        {{-- Alert Success / Status --}}
        @if (session('status') === 'profile-updated')
            <div class="prf-alert prf-alert-ok">
                <i class="fas fa-check-circle"></i>
                <span>Informasi profil berhasil diperbarui!</span>
            </div>
        @elseif (session('status') === 'password-updated')
            <div class="prf-alert prf-alert-ok">
                <i class="fas fa-check-circle"></i>
                <span>Password berhasil diperbarui!</span>
            </div>
        @endif

        <div class="prf-grid">

            {{-- ── COLUMN 1: USER DETAILS & LOGOUT ── --}}
            <div>
                <div class="prf-card">
                    <div class="prf-avatar-big">
                        <img src="https://ui-avatars.com/api/?name={{ urlencode($user->name) }}&background=1a7a4a&color=fff&rounded=true&bold=true&size=128" alt="Profile" style="width: 100%; height: 100%; object-fit: cover; border-radius: 50%;">
                    </div>
                    
                    <h2 class="prf-user-name">{{ $user->name }}</h2>
                    <p class="prf-user-email">{{ $user->email }}</p>

                    <div class="prf-info-list">
                        <div class="prf-info-item">
                            <span class="prf-info-lbl">Hak Akses</span>
                            <span class="prf-info-val" style="background: var(--prf-green-l); color: var(--prf-green); padding: 2px 8px; border-radius: 6px; font-size: 11px;">Administrator</span>
                        </div>
                        <div class="prf-info-item">
                            <span class="prf-info-lbl">Terdaftar</span>
                            <span class="prf-info-val">{{ $user->created_at ? \Carbon\Carbon::parse($user->created_at)->translatedFormat('d M Y') : '-' }}</span>
                        </div>
                    </div>

                    {{-- BUTTON LOGOUT YANG BENER-BENER LOGOUT KE HALAMAN LOGIN --}}
                    <form method="POST" action="{{ route('logout', ['to' => 'login']) }}">
                        @csrf
                        <button type="submit" class="prf-btn-logout-full">
                            <i class="fas fa-power-off"></i>
                            <span>Keluar dari Akun (Logout)</span>
                        </button>
                    </form>
                </div>
            </div>

            {{-- ── COLUMN 2: FORMS ── --}}
            <div style="display: flex; flex-direction: column; gap: 24px;">

                {{-- FORM 1: UPDATE PROFILE INFORMATION --}}
                <div class="prf-card">
                    <h3 class="prf-card-title">
                        <i class="fas fa-user-edit"></i>
                        <span>Informasi Profil</span>
                    </h3>
                    <p class="prf-card-sub">Perbarui nama pengguna dan alamat email akun Anda.</p>

                    <form method="post" action="{{ route('profile.update') }}">
                        @csrf
                        @method('patch')

                        <div class="prf-form-fields">
                            <div class="prf-form-field">
                                <label for="name" class="prf-form-label">Nama Lengkap</label>
                                <input id="name" name="name" type="text" class="prf-input" value="{{ old('name', $user->name) }}" required autofocus autocomplete="name">
                                @if($errors->has('name'))
                                    <span class="prf-err">{{ $errors->first('name') }}</span>
                                @endif
                            </div>

                            <div class="prf-form-field">
                                <label for="email" class="prf-form-label">Alamat Email</label>
                                <input id="email" name="email" type="email" class="prf-input" value="{{ old('email', $user->email) }}" required autocomplete="username">
                                @if($errors->has('email'))
                                    <span class="prf-err">{{ $errors->first('email') }}</span>
                                @endif
                            </div>

                            <button type="submit" class="prf-btn-primary">
                                Simpan Perubahan
                            </button>
                        </div>
                    </form>
                </div>

                {{-- FORM 2: UPDATE PASSWORD --}}
                <div class="prf-card">
                    <h3 class="prf-card-title">
                        <i class="fas fa-key"></i>
                        <span>Perbarui Password</span>
                    </h3>
                    <p class="prf-card-sub">Pastikan akun Anda menggunakan password yang aman dan rahasia.</p>

                    <form method="post" action="{{ route('password.update') }}">
                        @csrf
                        @method('put')

                        <div class="prf-form-fields">
                            <div class="prf-form-field">
                                <label for="current_password" class="prf-form-label">Password Saat Ini</label>
                                <input id="current_password" name="current_password" type="password" class="prf-input" autocomplete="current-password">
                                @if($errors->updatePassword->has('current_password'))
                                    <span class="prf-err">{{ $errors->updatePassword->first('current_password') }}</span>
                                @endif
                            </div>

                            <div class="prf-form-field">
                                <label for="password" class="prf-form-label">Password Baru</label>
                                <input id="password" name="password" type="password" class="prf-input" autocomplete="new-password">
                                @if($errors->updatePassword->has('password'))
                                    <span class="prf-err">{{ $errors->updatePassword->first('password') }}</span>
                                @endif
                            </div>

                            <div class="prf-form-field">
                                <label for="password_confirmation" class="prf-form-label">Konfirmasi Password Baru</label>
                                <input id="password_confirmation" name="password_confirmation" type="password" class="prf-input" autocomplete="new-password">
                                @if($errors->updatePassword->has('password_confirmation'))
                                    <span class="prf-err">{{ $errors->updatePassword->first('password_confirmation') }}</span>
                                @endif
                            </div>

                            <button type="submit" class="prf-btn-primary">
                                Perbarui Password
                            </button>
                        </div>
                    </form>
                </div>

            </div>

        </div>

    </div>
</div>

</x-app-layout>