<x-app-layout title="Profil Saya">
@push('styles')
<style>
.profile-wrap { max-width: 720px; margin: 0 auto; }

/* ── PAGE HEADER ── */
.prof-hd { display:flex; align-items:center; gap:16px; margin-bottom:28px; }
.prof-av-lg {
    width:72px; height:72px; border-radius:20px; flex-shrink:0;
    background:linear-gradient(135deg,var(--primary),var(--violet,#7c3aed));
    display:flex; align-items:center; justify-content:center;
    font-size:1.8rem; font-weight:900; color:white;
    box-shadow:0 8px 24px var(--primary-m);
}
.prof-hd-info {}
.prof-hd-name { font-size:1.35rem; font-weight:900; color:var(--text); letter-spacing:-.03em; }
.prof-hd-role { font-size:12.5px; color:var(--muted); font-weight:600; margin-top:3px; display:flex; align-items:center; gap:6px; }
.role-badge { background:var(--primary-l); color:var(--primary); font-size:11px; font-weight:700; padding:2px 9px; border-radius:100px; }

/* ── SECTION CARD ── */
.prof-section {
    background:var(--white); border:1px solid var(--border);
    border-radius:20px; overflow:hidden; box-shadow:var(--sh);
    margin-bottom:20px;
}
.prof-section-hd {
    padding:18px 24px; border-bottom:1px solid var(--border);
    display:flex; align-items:center; gap:12px;
}
.prof-section-ico {
    width:38px; height:38px; border-radius:11px;
    display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.prof-section-ico svg { width:18px; height:18px; }
.ico-blue  { background:#e0f2fe; } .ico-blue svg  { stroke:#0284c7; }
.ico-amber { background:#fef3c7; } .ico-amber svg { stroke:#d97706; }
.ico-red   { background:#fee2e2; } .ico-red svg   { stroke:#dc2626; }
.prof-section-title { font-size:.95rem; font-weight:800; color:var(--text); }
.prof-section-sub   { font-size:12px; color:var(--muted); font-weight:500; margin-top:2px; }

.prof-section-body { padding:24px; }
.prof-section-ft {
    padding:16px 24px; border-top:1px solid var(--border);
    background:var(--bg2); display:flex; align-items:center;
    justify-content:space-between; gap:12px;
}

/* ── FORM ── */
.frow { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.fg { display:flex; flex-direction:column; margin-bottom:16px; }
.fg:last-child { margin-bottom:0; }
.fg label { font-size:11px; font-weight:800; color:var(--muted2); text-transform:uppercase; letter-spacing:.08em; margin-bottom:7px; }
.fg input, .fg select {
    padding:11px 14px; border:1.5px solid var(--border);
    border-radius:11px; font-family:inherit;
    font-size:13.5px; font-weight:600; color:var(--text);
    background:var(--bg2); outline:none; transition:all .15s;
}
.fg input:focus, .fg select:focus { border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-m); background:white; }
.fg input::placeholder { color:var(--muted2); font-weight:500; }
.fg input:disabled { opacity:.6; cursor:not-allowed; }
.ferr { color:var(--danger,#dc2626); font-size:11.5px; font-weight:600; margin-top:5px; }

/* ── VERIFY NOTICE ── */
.verify-notice {
    background:#fffbeb; border:1px solid #fde68a;
    border-radius:10px; padding:12px 16px; margin-top:10px;
    font-size:12.5px; color:#92400e; font-weight:600;
    display:flex; align-items:center; gap:8px;
}
.verify-notice svg { width:14px; height:14px; stroke:#d97706; flex-shrink:0; }
.verify-btn { background:none; border:none; color:var(--primary); font-weight:700; font-size:12.5px; cursor:pointer; text-decoration:underline; padding:0; }

.saved-msg { font-size:12.5px; color:var(--success,#059669); font-weight:700; display:flex; align-items:center; gap:5px; }
.saved-msg svg { width:13px; height:13px; stroke:var(--success,#059669); }

/* ── DELETE SECTION ── */
.delete-warn {
    background:#fef2f2; border:1px solid #fecaca;
    border-radius:12px; padding:16px 18px; margin-bottom:20px;
    display:flex; gap:12px; align-items:flex-start;
}
.delete-warn svg { width:18px; height:18px; stroke:#dc2626; flex-shrink:0; margin-top:1px; }
.delete-warn-title { font-size:13px; font-weight:800; color:#991b1b; margin-bottom:3px; }
.delete-warn-desc  { font-size:12.5px; color:#b91c1c; font-weight:500; line-height:1.5; }

/* ── MODAL ── */
.modal-overlay { display:none; position:fixed; inset:0; background:rgba(15,23,42,.5); backdrop-filter:blur(6px); z-index:9000; align-items:center; justify-content:center; padding:16px; }
.modal-overlay.open { display:flex; }
.modal-box { background:white; border-radius:20px; width:100%; max-width:420px; box-shadow:0 24px 64px rgba(0,0,0,.18); animation:mIn .25s cubic-bezier(.34,1.4,.64,1); overflow:hidden; }
@keyframes mIn { from{opacity:0;transform:scale(.92) translateY(16px)} to{opacity:1;transform:scale(1) translateY(0)} }
.modal-hd { padding:20px 24px 16px; border-bottom:1px solid var(--border); display:flex; align-items:center; gap:12px; }
.modal-hd-ico { width:40px; height:40px; border-radius:11px; background:#fee2e2; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.modal-hd-ico svg { width:18px; height:18px; stroke:#dc2626; }
.modal-hd-title { font-size:.95rem; font-weight:800; color:var(--text); }
.modal-hd-sub   { font-size:12px; color:var(--muted); font-weight:500; margin-top:2px; }
.modal-body { padding:20px 24px; }
.modal-ft { padding:14px 24px; border-top:1px solid var(--border); background:var(--bg2); display:flex; justify-content:flex-end; gap:10px; }

.btn { display:inline-flex; align-items:center; gap:7px; padding:9px 20px; border-radius:100px; font-family:inherit; font-size:13px; font-weight:700; cursor:pointer; border:none; text-decoration:none; transition:all .18s; white-space:nowrap; }
.btn svg { width:14px; height:14px; stroke:currentColor; }
.btn-primary { background:linear-gradient(135deg,var(--primary),var(--violet,#7c3aed)); color:white; box-shadow:0 4px 14px var(--primary-m); }
.btn-primary:hover { transform:translateY(-1px); box-shadow:0 8px 20px rgba(79,70,229,.35); }
.btn-ghost { background:white; color:var(--muted); border:1.5px solid var(--border); }
.btn-ghost:hover { background:var(--bg2); color:var(--text); }
.btn-danger { background:var(--danger,#dc2626); color:white; box-shadow:0 4px 14px rgba(220,38,38,.25); }
.btn-danger:hover { background:#b91c1c; transform:translateY(-1px); }
.btn-sm { padding:7px 16px; font-size:12.5px; }

@media(max-width:600px) { .frow{grid-template-columns:1fr;} .prof-section-body{padding:18px;} .prof-hd{flex-direction:column;align-items:flex-start;} }
</style>
@endpush

@php $user = Auth::user(); @endphp

<div class="profile-wrap">

    {{-- PROFILE HEADER --}}
    <div class="prof-hd">
        <div class="prof-av-lg">{{ strtoupper(substr($user->name ?? 'U', 0, 1)) }}</div>
        <div class="prof-hd-info">
            <div class="prof-hd-name">{{ $user->name }}</div>
            <div class="prof-hd-role">
                {{ $user->email }}
                <span class="role-badge">{{ ucfirst($user->role ?? 'User') }}</span>
            </div>
        </div>
    </div>

    {{-- ══ SECTION 1: INFO PROFIL ══ --}}
    <div class="prof-section">
        <div class="prof-section-hd">
            <div class="prof-section-ico ico-blue">
                <svg viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
            </div>
            <div>
                <div class="prof-section-title">Informasi Profil</div>
                <div class="prof-section-sub">Perbarui nama dan alamat email akun kamu</div>
            </div>
        </div>

        <div class="prof-section-body">
            <form id="send-verification" method="post" action="{{ route('verification.send') }}">@csrf</form>

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

                <div class="frow">
                    <div class="fg">
                        <label>Nama Lengkap</label>
                        <input type="text" name="name" value="{{ old('name', $user->name) }}"
                               placeholder="Nama lengkap kamu" required autofocus autocomplete="name">
                        @error('name', 'updateProfileInformation')
                            <span class="ferr">{{ $message }}</span>
                        @enderror
                    </div>
                    <div class="fg">
                        <label>Alamat Email</label>
                        <input type="email" name="email" value="{{ old('email', $user->email) }}"
                               placeholder="email@kamu.com" required autocomplete="username">
                        @error('email', 'updateProfileInformation')
                            <span class="ferr">{{ $message }}</span>
                        @enderror
                    </div>
                </div>

                @if ($user instanceof \Illuminate\Contracts\Auth\MustVerifyEmail && ! $user->hasVerifiedEmail())
                <div class="verify-notice">
                    <svg viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>
                    Email belum terverifikasi.
                    <button form="send-verification" class="verify-btn">Kirim ulang verifikasi</button>
                    @if (session('status') === 'verification-link-sent')
                        <span style="color:var(--success,#059669);font-weight:700;">Link terkirim!</span>
                    @endif
                </div>
                @endif
            </form>
        </div>

        <div class="prof-section-ft">
            <div>
                @if (session('status') === 'profile-updated')
                <span class="saved-msg">
                    <svg viewBox="0 0 24 24" fill="none" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>
                    Profil berhasil diperbarui!
                </span>
                @endif
            </div>
            <button type="submit" form="form-profile" class="btn btn-primary btn-sm">
                <svg viewBox="0 0 24 24" fill="none" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
                Simpan Perubahan
            </button>
        </div>
    </div>

    {{-- ══ SECTION 2: GANTI PASSWORD ══ --}}
    <div class="prof-section">
        <div class="prof-section-hd">
            <div class="prof-section-ico ico-amber">
                <svg viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>
            </div>
            <div>
                <div class="prof-section-title">Ganti Password</div>
                <div class="prof-section-sub">Gunakan password yang panjang dan unik agar akun tetap aman</div>
            </div>
        </div>

        <div class="prof-section-body">
            <form method="post" action="{{ route('password.update') }}" id="form-password">
                @csrf
                @method('put')

                <div class="fg">
                    <label>Password Saat Ini</label>
                    <input type="password" name="current_password" placeholder="••••••••" autocomplete="current-password">
                    @error('current_password', 'updatePassword')
                        <span class="ferr">{{ $message }}</span>
                    @enderror
                </div>
                <div class="frow">
                    <div class="fg">
                        <label>Password Baru</label>
                        <input type="password" name="password" placeholder="Min. 8 karakter" autocomplete="new-password">
                        @error('password', 'updatePassword')
                            <span class="ferr">{{ $message }}</span>
                        @enderror
                    </div>
                    <div class="fg">
                        <label>Konfirmasi Password Baru</label>
                        <input type="password" name="password_confirmation" placeholder="Ulangi password baru" autocomplete="new-password">
                        @error('password_confirmation', 'updatePassword')
                            <span class="ferr">{{ $message }}</span>
                        @enderror
                    </div>
                </div>
            </form>
        </div>

        <div class="prof-section-ft">
            <div>
                @if (session('status') === 'password-updated')
                <span class="saved-msg">
                    <svg viewBox="0 0 24 24" fill="none" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>
                    Password berhasil diperbarui!
                </span>
                @endif
            </div>
            <button type="submit" form="form-password" class="btn btn-primary btn-sm">
                <svg viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>
                Update Password
            </button>
        </div>
    </div>

    {{-- ══ SECTION 3: HAPUS AKUN ══ --}}
    <div class="prof-section">
        <div class="prof-section-hd">
            <div class="prof-section-ico ico-red">
                <svg viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"/><path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"/><path d="M10 11v6"/><path d="M14 11v6"/><path d="M9 6V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2"/></svg>
            </div>
            <div>
                <div class="prof-section-title">Hapus Akun</div>
                <div class="prof-section-sub">Tindakan ini permanen dan tidak bisa dibatalkan</div>
            </div>
        </div>

        <div class="prof-section-body">
            <div class="delete-warn">
                <svg viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>
                <div>
                    <div class="delete-warn-title">Perhatian!</div>
                    <div class="delete-warn-desc">Setelah akun dihapus, semua data termasuk riwayat absensi, izin, dan informasi profil akan dihapus secara permanen. Pastikan kamu sudah menyimpan data yang diperlukan.</div>
                </div>
            </div>
            <button onclick="document.getElementById('modal-delete').classList.add('open')" class="btn btn-danger btn-sm">
                <svg viewBox="0 0 24 24" fill="none" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"/><path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"/></svg>
                Hapus Akun Saya
            </button>
        </div>
    </div>

</div>

{{-- DELETE MODAL --}}
<div class="modal-overlay" id="modal-delete" onclick="if(event.target===this)this.classList.remove('open')">
    <div class="modal-box">
        <div class="modal-hd">
            <div class="modal-hd-ico">
                <svg viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"/><path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"/></svg>
            </div>
            <div>
                <div class="modal-hd-title">Hapus Akun?</div>
                <div class="modal-hd-sub">Masukkan password untuk konfirmasi</div>
            </div>
        </div>
        <div class="modal-body">
            <form method="post" action="{{ route('profile.destroy') }}" id="form-delete">
                @csrf
                @method('delete')
                <div class="fg" style="margin-bottom:0;">
                    <label>Password Kamu</label>
                    <input type="password" name="password" placeholder="Masukkan password" required autofocus>
                    @error('password', 'userDeletion')
                        <span class="ferr">{{ $message }}</span>
                    @enderror
                </div>
            </form>
        </div>
        <div class="modal-ft">
            <button onclick="document.getElementById('modal-delete').classList.remove('open')" class="btn btn-ghost btn-sm">Batal</button>
            <button type="submit" form="form-delete" class="btn btn-danger btn-sm">
                <svg viewBox="0 0 24 24" fill="none" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"/><path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"/></svg>
                Ya, Hapus Akun
            </button>
        </div>
    </div>
</div>

@push('scripts')
<script>
document.addEventListener('keydown', e => { if(e.key === 'Escape') document.getElementById('modal-delete').classList.remove('open'); });
// Auto show modal if there are deletion errors
@if($errors->userDeletion->isNotEmpty())
document.getElementById('modal-delete').classList.add('open');
@endif
</script>
@endpush

</x-app-layout>