@extends('admin::layouts.admin')

@section('title', 'Profile')

@section('content')
<div class="profile-container">
    {{-- Left Sidebar - User Info & Menu --}}
    <div class="profile-sidebar">
        <div class="profile-sidebar-card">
            {{-- User Avatar --}}
            <div class="profile-avatar-wrapper">
                <div class="profile-avatar-large">
                    @if(Auth::check() && Auth::user()->avatar)
                        <img src="{{ asset('storage/' . Auth::user()->avatar) }}" alt="{{ Auth::user()->name }}" id="avatarPreview">
                    @else
                        <div class="avatar-placeholder-large" id="avatarPlaceholder">
                            <span>{{ Auth::check() ? strtoupper(substr(Auth::user()->name, 0, 1)) : 'G' }}</span>
                        </div>
                    @endif
                </div>
                <button class="avatar-edit-btn" title="Edit Avatar" onclick="openAvatarModal()">
                    <i class="fas fa-pen"></i>
                </button>
            </div>

            {{-- User Info --}}
            <div class="profile-user-info">
                <h4 class="profile-user-name">{{ Auth::check() ? Auth::user()->name : 'Guest' }}</h4>
                <p class="profile-user-email">{{ Auth::check() ? Auth::user()->email : 'guest@example.com' }}</p>
                <span class="profile-user-role">{{ Auth::check() && Auth::user()->role === 'admin' ? 'Administrator' : 'User' }}</span>
            </div>

            {{-- Profile Menu --}}
            <nav class="profile-menu">
                <a href="#setting-profil" class="profile-menu-item active" data-tab="setting-profil">
                    <i class="fas fa-user"></i>
                    <span>Setting Profil</span>
                </a>
                <a href="#kata-sandi" class="profile-menu-item" data-tab="kata-sandi">
                    <i class="fas fa-lock"></i>
                    <span>Kata Sandi dan Keamanan</span>
                </a>
            </nav>
        </div>
    </div>

    {{-- Right Content Area --}}
    <div class="profile-content">
        {{-- Tab 1: Setting Profil --}}
        <div class="profile-tab active" id="setting-profil">
            <div class="profile-content-card">
                <h3 class="profile-content-title">INFORMASI PROFIL</h3>

                <form action="{{ route('admin.profile.update') }}" method="POST" class="profile-form">
                    @csrf
                    @method('PUT')

                    {{-- Nama --}}
                    <div class="form-group">
                        <label class="form-label">Nama</label>
                        <input type="text" name="name" class="form-input @error('name') is-invalid @enderror" value="{{ old('name', Auth::user()->name ?? '') }}" placeholder="Masukkan nama">
                        @error('name')
                            <span class="invalid-feedback">{{ $message }}</span>
                        @enderror
                    </div>

                    {{-- Email & Phone --}}
                    <div class="form-row">
                        <div class="form-group">
                            <label class="form-label">Email</label>
                            <input type="email" name="email" class="form-input @error('email') is-invalid @enderror" value="{{ old('email', Auth::user()->email ?? '') }}" placeholder="Masukkan email">
                            @error('email')
                                <span class="invalid-feedback">{{ $message }}</span>
                            @enderror
                        </div>
                        <div class="form-group">
                            <label class="form-label">Nomor Telepon</label>
                            <input type="text" name="phone" class="form-input @error('phone') is-invalid @enderror" value="{{ old('phone', Auth::user()->phone ?? '') }}" placeholder="Masukkan nomor telepon">
                            @error('phone')
                                <span class="invalid-feedback">{{ $message }}</span>
                            @enderror
                        </div>
                    </div>

                    {{-- Country & City --}}
                    <div class="form-row">
                        <div class="form-group">
                            <label class="form-label">Negara</label>
                            <input type="text" name="country" class="form-input" value="{{ old('country', Auth::user()->country ?? '') }}" placeholder="Masukkan negara">
                        </div>
                        <div class="form-group">
                            <label class="form-label">Kabupaten/Kota</label>
                            <input type="text" name="city" class="form-input" value="{{ old('city', Auth::user()->city ?? '') }}" placeholder="Masukkan kabupaten/kota">
                        </div>
                    </div>

                    {{-- Postal Code & Address --}}
                    <div class="form-row">
                        <div class="form-group">
                            <label class="form-label">Kode Pos</label>
                            <input type="text" name="postal_code" class="form-input" value="{{ old('postal_code', Auth::user()->postal_code ?? '') }}" placeholder="Kode pos">
                        </div>
                        <div class="form-group">
                            <label class="form-label">Alamat Lengkap</label>
                            <input type="text" name="address" class="form-input" value="{{ old('address', Auth::user()->address ?? '') }}" placeholder="Masukkan alamat lengkap">
                        </div>
                    </div>

                    {{-- Buttons --}}
                    <div class="form-actions">
                        <button type="button" class="btn-cancel" onclick="resetForm(this.form)">Batal</button>
                        <button type="submit" class="btn-save">
                            <i class="fas fa-save"></i>
                            Simpan data
                        </button>
                    </div>
                </form>
            </div>
        </div>

        {{-- Tab 2: Kata Sandi dan Keamanan --}}
        <div class="profile-tab" id="kata-sandi">
            {{-- Change Password --}}
            <div class="profile-content-card mb-3">
                <h3 class="profile-content-title">GANTI KATA SANDI</h3>

                <form action="{{ route('admin.profile.password') }}" method="POST" class="profile-form">
                    @csrf
                    @method('PUT')

                    <div class="form-group">
                        <label class="form-label">Email <span style="color: red;">*</span></label>
                        <input type="email" name="email" class="form-input @error('email') is-invalid @enderror"
                               value="{{ old('email', Auth::user()->email) }}"
                               placeholder="Masukkan email Anda untuk verifikasi" required>
                        @error('email')
                            <span class="invalid-feedback">{{ $message }}</span>
                        @enderror
                        <small style="color: #666; font-size: 12px;">Kami akan mengirimkan link verifikasi ke email ini</small>
                    </div>

                    <div class="form-group">
                        <label class="form-label">Kata Sandi Lama</label>
                        <div class="input-password-wrapper">
                            <input type="password" name="current_password" class="form-input @error('current_password') is-invalid @enderror" placeholder="********" required>
                            <button type="button" class="password-toggle" onclick="togglePassword(this)">
                                <i class="fas fa-eye-slash"></i>
                            </button>
                        </div>
                        @error('current_password')
                            <span class="invalid-feedback">{{ $message }}</span>
                        @enderror
                    </div>

                    <div class="form-group">
                        <label class="form-label">Kata Sandi Baru</label>
                        <div class="input-password-wrapper">
                            <input type="password" name="new_password" class="form-input @error('new_password') is-invalid @enderror" placeholder="********" required>
                            <button type="button" class="password-toggle" onclick="togglePassword(this)">
                                <i class="fas fa-eye-slash"></i>
                            </button>
                        </div>
                        @error('new_password')
                            <span class="invalid-feedback">{{ $message }}</span>
                        @enderror
                    </div>

                    <div class="form-group">
                        <label class="form-label">Konfirmasi Kata Sandi Baru</label>
                        <div class="input-password-wrapper">
                            <input type="password" name="new_password_confirmation" class="form-input" placeholder="********" required>
                            <button type="button" class="password-toggle" onclick="togglePassword(this)">
                                <i class="fas fa-eye-slash"></i>
                            </button>
                        </div>
                    </div>

                    <div class="form-actions">
                        <button type="button" class="btn-cancel" onclick="resetForm(this.form)">Batal</button>
                        <button type="submit" class="btn-save">
                            <i class="fas fa-paper-plane"></i>
                            Kirim Verifikasi Email
                        </button>
                    </div>
                </form>
            </div>

            {{-- 2FA Settings --}}
            <div class="profile-content-card" style="margin-top: 20px;">
                <h3 class="profile-content-title">AUTENTIKASI DUA FAKTOR (2FA)</h3>

                <div class="twofa-info-box">
                    <div class="twofa-icon">
                        <i class="fas fa-shield-alt"></i>
                    </div>
                    <div class="twofa-content">
                        <h4 class="twofa-title">Tingkatkan Keamanan Akun Anda</h4>
                        <p class="twofa-description">
                            Dengan mengaktifkan 2FA, setiap kali Anda login, sistem akan mengirimkan kode verifikasi 6 digit ke email Anda.
                            Ini memberikan lapisan keamanan tambahan untuk melindungi akun Anda dari akses yang tidak sah.
                        </p>
                    </div>
                </div>

                <div class="twofa-status-wrapper">
                    <span class="twofa-label">
                        <i class="fas fa-lock"></i>
                        Status Saat Ini:
                    </span>
                    <span class="twofa-status {{ (Auth::user()->two_factor_enabled ?? false) ? 'active' : 'inactive' }}">
                        {{ (Auth::user()->two_factor_enabled ?? false) ? 'Aktif' : 'Nonaktif' }}
                    </span>
                </div>

                @if(Auth::user()->two_factor_enabled ?? false)
                <form action="{{ route('admin.profile.2fa') }}" method="POST" class="profile-form">
                    @csrf
                    @method('PUT')
                    <input type="hidden" name="action" value="disable">

                    <div class="form-group">
                        <label class="form-label">Email <span style="color: red;">*</span></label>
                        <input type="email" name="email" class="form-input @error('email') is-invalid @enderror"
                               value="{{ old('email', Auth::user()->email) }}"
                               placeholder="Masukkan email Anda untuk verifikasi" required>
                        @error('email')
                            <span class="invalid-feedback">{{ $message }}</span>
                        @enderror
                        <small style="color: #666; font-size: 12px;">Kami akan mengirimkan link verifikasi untuk menonaktifkan 2FA</small>
                    </div>

                    <div class="form-actions">
                        <button type="submit" class="btn-danger">
                            <i class="fas fa-shield-alt"></i>
                            Nonaktifkan 2FA
                        </button>
                    </div>
                </form>
                @else
                <form action="{{ route('admin.profile.2fa') }}" method="POST" class="profile-form">
                    @csrf
                    @method('PUT')
                    <input type="hidden" name="action" value="enable">

                    <div class="form-group">
                        <label class="form-label">Email <span style="color: red;">*</span></label>
                        <input type="email" name="email" class="form-input @error('email') is-invalid @enderror"
                               value="{{ old('email', Auth::user()->email) }}"
                               placeholder="Masukkan email Anda untuk verifikasi" required>
                        @error('email')
                            <span class="invalid-feedback">{{ $message }}</span>
                        @enderror
                        <small style="color: #666; font-size: 12px;">Kami akan mengirimkan link verifikasi untuk mengaktifkan 2FA</small>
                    </div>

                    <div class="form-actions">
                        <button type="submit" class="btn-save">
                            <i class="fas fa-paper-plane"></i>
                            Kirim Verifikasi Email
                        </button>
                    </div>
                </form>
                @endif
            </div>
        </div>
    </div>
</div>

{{-- Avatar Edit Modal --}}
<div class="modal-overlay" id="avatarModal">
    <div class="modal-content avatar-modal">
        <div class="modal-header">
            <h3 class="modal-title">EDIT AVATAR</h3>
            <button type="button" class="modal-close" onclick="closeAvatarModal()">
                <i class="fas fa-times"></i>
            </button>
        </div>
        <div class="modal-body">
            <form action="{{ route('admin.profile.avatar') }}" method="POST" enctype="multipart/form-data" id="avatarForm">
                @csrf
                @method('PUT')

                <div class="avatar-upload-wrapper">
                    <div class="avatar-preview" id="modalAvatarPreview">
                        @if(Auth::check() && Auth::user()->avatar)
                            <img src="{{ asset('storage/' . Auth::user()->avatar) }}" alt="{{ Auth::user()->name }}">
                        @else
                            <div class="avatar-placeholder-modal">
                                <span>{{ Auth::check() ? strtoupper(substr(Auth::user()->name, 0, 1)) : 'G' }}</span>
                            </div>
                        @endif
                    </div>

                    <div class="avatar-upload-actions">
                        <label for="avatarInput" class="btn-upload">
                            <i class="fas fa-camera"></i>
                            Pilih Foto
                        </label>
                        <input type="file" id="avatarInput" name="avatar" accept="image/*" style="display: none;" onchange="previewAvatar(this)">

                        @if(Auth::check() && Auth::user()->avatar)
                            <button type="button" class="btn-delete-avatar" onclick="deleteAvatar()">
                                <i class="fas fa-trash"></i>
                                Hapus Avatar
                            </button>
                        @endif
                    </div>

                    <p class="avatar-upload-hint">Format: JPG, PNG, WEBP. Maksimal 2MB</p>
                </div>

                <div class="form-actions form-actions-right">
                    <button type="submit" class="btn-save btn-save-sm">
                        <i class="fas fa-save"></i>
                        Simpan
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<style>
/* Profile Container */
.profile-container {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 24px;
    max-width: 1400px;
    margin: 0 auto;
}

/* Profile Sidebar */
.profile-sidebar-card {
    background: rgba(26, 23, 48, 0.6);
    border-radius: 16px;
    padding: 32px;
    position: sticky;
    top: 24px;
}

.profile-avatar-wrapper {
    position: relative;
    width: fit-content;
    margin: 0 auto 24px;
}

.profile-avatar-large {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid rgba(139, 92, 246, 0.5);
}

.profile-avatar-large img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.avatar-placeholder-large {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--purple-primary) 0%, var(--purple-dark) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 3rem;
    font-weight: 600;
}

.avatar-edit-btn {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 36px;
    height: 36px;
    background: var(--cyan-primary);
    border: 3px solid var(--background-main);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    cursor: pointer;
    transition: all 0.3s ease;
}

.avatar-edit-btn:hover {
    background: var(--purple-primary);
    transform: scale(1.1);
}

.profile-user-info {
    text-align: center;
    margin-bottom: 24px;
    padding-bottom: 24px;
    border-bottom: 1px solid rgba(139, 92, 246, 0.2);
}

.profile-user-name {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.profile-user-email {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin-bottom: 8px;
}

.profile-user-role {
    display: inline-block;
    padding: 4px 12px;
    background: rgba(6, 182, 212, 0.2);
    border: 1px solid rgba(6, 182, 212, 0.3);
    border-radius: 20px;
    color: var(--cyan-primary);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
}

/* Profile Menu */
.profile-menu {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.profile-menu-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: transparent;
    border-radius: 10px;
    color: var(--text-secondary);
    text-decoration: none;
    transition: all 0.3s ease;
}

.profile-menu-item:hover {
    background: rgba(139, 92, 246, 0.1);
    color: var(--purple-secondary);
}

.profile-menu-item.active {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.2) 0%, rgba(109, 40, 217, 0.1) 100%);
    color: var(--cyan-primary);
    font-weight: 600;
}

.profile-menu-item i {
    width: 20px;
    text-align: center;
}

/* Profile Content */
.profile-content {
    min-height: 400px;
}

.profile-tab {
    display: none;
}

.profile-tab.active {
    display: block;
}

.profile-content-card {
    background: rgba(26, 23, 48, 0.6);
    border-radius: 16px;
    padding: 32px;
}

.profile-content-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--purple-secondary);
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 2px solid rgba(139, 92, 246, 0.3);
}

/* Form Styles */
.profile-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.form-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.form-row-3 {
    grid-template-columns: repeat(3, 1fr);
}

.form-label {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
}

.form-input {
    padding: 12px 16px;
    background: rgba(139, 92, 246, 0.1);
    border: 1px solid rgba(139, 92, 246, 0.3);
    border-radius: 10px;
    color: var(--text-primary);
    font-size: 0.9rem;
    transition: all 0.3s ease;
}

.form-input:focus {
    outline: none;
    border-color: var(--cyan-primary);
    background: rgba(6, 182, 212, 0.05);
    box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.1);
}

.form-input.is-invalid {
    border-color: #ef4444;
}

.invalid-feedback {
    font-size: 0.85rem;
    color: #f87171;
    margin-top: -4px;
}

.input-password-wrapper {
    position: relative;
}

.input-password-wrapper .form-input {
    padding-right: 48px;
}

.password-toggle {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 8px;
    transition: all 0.3s ease;
}

.password-toggle:hover {
    color: var(--cyan-primary);
}

.form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 12px;
}

.form-actions-right {
    justify-content: flex-end;
}

.btn-cancel,
.btn-save {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 32px;
    border: none;
    border-radius: 10px;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-cancel {
    background: transparent;
    border: 1px solid rgba(239, 68, 68, 0.5);
    color: #f87171;
}

.btn-cancel:hover {
    background: rgba(239, 68, 68, 0.1);
    border-color: #ef4444;
}

.btn-save {
    background: linear-gradient(135deg, var(--cyan-primary) 0%, #0891b2 100%);
    color: white;
}

.btn-save:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(6, 182, 212, 0.4);
}

.btn-save-sm {
    padding: 10px 24px;
}

/* Modal Styles */
.modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: 10000;
    align-items: center;
    justify-content: center;
}

.modal-overlay.show {
    display: flex;
}

.modal-content {
    background: var(--background-card);
    border-radius: 16px;
    width: 90%;
    max-width: 500px;
    max-height: 90vh;
    overflow: auto;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid rgba(139, 92, 246, 0.2);
}

.modal-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--purple-secondary);
}

.modal-close {
    width: 32px;
    height: 32px;
    background: transparent;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.modal-close:hover {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

.modal-body {
    padding: 24px;
}

/* Avatar Upload */
.avatar-upload-wrapper {
    text-align: center;
}

.avatar-preview {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid rgba(139, 92, 246, 0.5);
    margin: 0 auto 20px;
}

.avatar-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.avatar-placeholder-modal {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--purple-primary) 0%, var(--purple-dark) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 4rem;
    font-weight: 600;
}

.avatar-upload-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-bottom: 12px;
}

.btn-upload {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 24px;
    background: linear-gradient(135deg, var(--cyan-primary) 0%, #0891b2 100%);
    border: none;
    border-radius: 10px;
    color: white;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-upload:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(6, 182, 212, 0.4);
}

.btn-delete-avatar {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 24px;
    background: transparent;
    border: 1px solid rgba(239, 68, 68, 0.5);
    border-radius: 10px;
    color: #f87171;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-delete-avatar:hover {
    background: rgba(239, 68, 68, 0.1);
    border-color: #ef4444;
}

.avatar-upload-hint {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-bottom: 20px;
}

/* 2FA Styles */
.twofa-info-box {
    display: flex;
    gap: 16px;
    padding: 20px;
    background: rgba(139, 92, 246, 0.1);
    border: 1px solid rgba(139, 92, 246, 0.3);
    border-radius: 12px;
    margin-bottom: 24px;
}

.twofa-icon {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, var(--cyan-primary) 0%, #0891b2 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.5rem;
    flex-shrink: 0;
}

.twofa-content {
    flex: 1;
}

.twofa-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.twofa-description {
    font-size: 0.85rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0;
}

.twofa-toggle-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    background: rgba(26, 23, 48, 0.4);
    border-radius: 12px;
    margin-bottom: 20px;
}

.twofa-label {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
}

.twofa-label i {
    color: var(--cyan-primary);
}

.toggle-switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 30px;
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(107, 114, 128, 0.3);
    border: 1px solid rgba(107, 114, 128, 0.5);
    transition: all 0.3s ease;
    border-radius: 30px;
}

.toggle-slider:before {
    position: absolute;
    content: "";
    height: 22px;
    width: 22px;
    left: 4px;
    bottom: 3px;
    background: white;
    transition: all 0.3s ease;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.toggle-switch input:checked + .toggle-slider {
    background: linear-gradient(135deg, var(--cyan-primary) 0%, #0891b2 100%);
    border-color: var(--cyan-primary);
}

.toggle-switch input:checked + .toggle-slider:before {
    transform: translateX(30px);
}

/* Responsive */
@media (max-width: 1024px) {
    .profile-container {
        grid-template-columns: 1fr;
    }

    .profile-sidebar-card {
        position: relative;
        top: 0;
    }
}

@media (max-width: 768px) {
    .form-row,
    .form-row-3 {
        grid-template-columns: 1fr;
    }

    .profile-content-card {
        padding: 20px;
    }

    .form-actions {
        flex-direction: column;
    }

    .btn-cancel,
    .btn-save {
        width: 100%;
        justify-content: center;
    }
}
</style>

<script>
// Show success/error message if exists
@if(session('success'))
Swal.fire({
    icon: 'success',
    title: 'Berhasil!',
    text: '{{ session('success') }}',
    confirmButtonColor: '#8b5cf6',
    background: 'rgba(26, 23, 48, 0.95)',
    color: '#e2e8f0',
    timer: 3000,
    timerProgressBar: true
});
@endif

@if(session('error'))
Swal.fire({
    icon: 'error',
    title: 'Gagal!',
    text: '{{ session('error') }}',
    confirmButtonColor: '#8b5cf6',
    background: 'rgba(26, 23, 48, 0.95)',
    color: '#e2e8f0'
});
@endif

// Tab Navigation
document.querySelectorAll('.profile-menu-item').forEach(item => {
    item.addEventListener('click', function(e) {
        e.preventDefault();

        // Remove active from all menu items and tabs
        document.querySelectorAll('.profile-menu-item').forEach(m => m.classList.remove('active'));
        document.querySelectorAll('.profile-tab').forEach(t => t.classList.remove('active'));

        // Add active to clicked item and corresponding tab
        this.classList.add('active');
        const tabId = this.getAttribute('data-tab');
        document.getElementById(tabId).classList.add('active');
    });
});

// Password Toggle
function togglePassword(btn) {
    const input = btn.parentElement.querySelector('input');
    const icon = btn.querySelector('i');

    if (input.type === 'password') {
        input.type = 'text';
        icon.classList.remove('fa-eye-slash');
        icon.classList.add('fa-eye');
    } else {
        input.type = 'password';
        icon.classList.remove('fa-eye');
        icon.classList.add('fa-eye-slash');
    }
}

// Reset Form
function resetForm(form) {
    form.reset();
}

// Avatar Modal
function openAvatarModal() {
    document.getElementById('avatarModal').classList.add('show');
}

function closeAvatarModal() {
    document.getElementById('avatarModal').classList.remove('show');
}

// Preview Avatar
function previewAvatar(input) {
    if (input.files && input.files[0]) {
        const file = input.files[0];

        // Validate file type
        if (!file.type.startsWith('image/')) {
            Swal.fire({
                icon: 'error',
                title: 'File Tidak Valid',
                text: 'Mohon pilih file gambar (JPG, PNG, WEBP)',
                confirmButtonColor: '#8b5cf6',
                background: 'rgba(26, 23, 48, 0.95)',
                color: '#e2e8f0'
            });
            input.value = '';
            return;
        }

        // Validate file size (max 2MB)
        if (file.size > 2 * 1024 * 1024) {
            Swal.fire({
                icon: 'error',
                title: 'Ukuran File Terlalu Besar',
                text: 'Ukuran gambar maksimal 2MB',
                confirmButtonColor: '#8b5cf6',
                background: 'rgba(26, 23, 48, 0.95)',
                color: '#e2e8f0'
            });
            input.value = '';
            return;
        }

        const reader = new FileReader();
        reader.onload = function(e) {
            const preview = document.getElementById('modalAvatarPreview');
            preview.innerHTML = `<img src="${e.target.result}" alt="Avatar Preview">`;
        }
        reader.readAsDataURL(file);
    }
}

// Delete Avatar
function deleteAvatar() {
    Swal.fire({
        title: 'Konfirmasi Hapus',
        text: 'Yakin ingin menghapus avatar?',
        icon: 'warning',
        showCancelButton: true,
        confirmButtonColor: '#8b5cf6',
        cancelButtonColor: '#6b7280',
        confirmButtonText: 'Ya, Hapus!',
        cancelButtonText: 'Batal',
        background: 'rgba(26, 23, 48, 0.95)',
        color: '#e2e8f0'
    }).then((result) => {
        if (result.isConfirmed) {
            window.location.href = '{{ route('admin.profile.avatar.delete') }}';
        }
    });
}

// Close modal on overlay click
document.getElementById('avatarModal')?.addEventListener('click', function(e) {
    if (e.target === this) {
        closeAvatarModal();
    }
});
</script>

@endsection