@extends('layouts.app')

@section('content')

{{-- HERO BANNER --}}
<div class="profile-hero">
    <div class="profile-hero-icon">
        <i class="fas fa-user-cog"></i>
    </div>
    <div>
        <div class="profile-hero-title">Pengaturan Akun</div>
        <div class="profile-hero-sub">Kelola informasi profil dan keamanan akun Anda</div>
    </div>
</div>

<div class="profile-wrap">

     {{-- NOTIFIKASI --}}
    @if(session('success'))
    <div style="background:#f0fdf4; border:1px solid #bbf7d0; border-left:4px solid #064e3b;
                color:#065f46; border-radius:10px; padding:12px 16px; font-size:13px;
                font-weight:600; display:flex; align-items:center; gap:8px; margin-bottom:18px;">
        <i class="fas fa-check-circle"></i> {{ session('success') }}
    </div>
    @endif

    @if($errors->any())
    <div style="background:#fef2f2; border:1px solid #fecaca; border-left:4px solid #dc2626;
                color:#dc2626; border-radius:10px; padding:12px 16px; font-size:13px;
                font-weight:600; margin-bottom:18px;">
        <i class="fas fa-exclamation-circle"></i>
        @foreach($errors->all() as $error)
            <div>{{ $error }}</div>
        @endforeach
    </div>
    @endif

    <div class="profile-grid">

        {{-- KOLOM KIRI --}}
        <div class="profile-left">

            {{-- FOTO CARD --}}
            <div class="pcard">
                <div class="pcard-avatar-wrap">
                    <img id="previewImg"
                        src="{{ Auth::user()->photo
                            ? asset('profile/' . Auth::user()->photo) . '?' . time()
                            : 'https://i.pravatar.cc/150?img=12' }}"
                        class="pcard-avatar" alt="avatar">
                </div>
                <div class="pcard-name">{{ $user->name }}</div>
                <div class="pcard-email">{{ $user->email }}</div>

               <form action="{{ route('rt.upload.photo') }}" method="POST"
                    enctype="multipart/form-data" class="pcard-upload-form">
                    @csrf
                    <label class="btn-pilih-foto" for="fotoInput">
                        <i class="fas fa-image me-1"></i> Pilih Foto
                    </label>
                    <input type="file" name="photo" id="fotoInput" accept="image/*" hidden>
                    <button type="submit" class="btn-upload-foto">
                        <i class="fas fa-cloud-upload-alt me-1"></i> Upload Foto
                    </button>
                    <div class="pcard-hint">JPG, PNG maks. 2MB</div>
                </form>
            </div>

            {{-- INFO CARD --}}
            <div class="pcard pcard-info">
                <div class="pinfo-row">
                    <div class="pinfo-icon"><i class="fas fa-user"></i></div>
                    <div>
                        <div class="pinfo-label">USERNAME</div>
                        <div class="pinfo-value">{{ $user->username ?? $user->name }}</div>
                    </div>
                </div>
                <div class="pinfo-row">
                    <div class="pinfo-icon pinfo-icon-blue"><i class="fas fa-envelope"></i></div>
                    <div>
                        <div class="pinfo-label">EMAIL</div>
                        <div class="pinfo-value">{{ $user->email }}</div>
                    </div>
                </div>
            </div>

        </div>

        {{-- KOLOM KANAN --}}
        <div class="profile-right">
            <div class="pcard">

                <div class="pform-header">
                    <div class="pform-header-icon"><i class="fas fa-edit"></i></div>
                    <div>
                        <div class="pform-title">Edit Profil</div>
                        <div class="pform-sub">Perbarui data diri Anda</div>
                    </div>
                </div>

                <form action="{{ route('rt.updateprofile') }}" method="POST" id="profileForm">
                    @csrf

                    <div class="pform-section-label">
                        <i class="fas fa-user-circle me-1"></i> INFORMASI DASAR
                    </div>

                    <div class="pform-row-2">
                        <div class="pform-group">
                            <label class="pform-label"><i class="fas fa-id-card me-1"></i> Nama Lengkap</label>
                            <input type="text" name="name" class="pform-input" value="{{ $user->name }}">
                        </div>
                        <div class="pform-group">
                            <label class="pform-label"><i class="fas fa-at me-1"></i> Username</label>
                            <input type="text" name="username" class="pform-input" value="{{ $user->username ?? '' }}">
                        </div>
                    </div>

                    <div class="pform-group">
                        <label class="pform-label"><i class="fas fa-envelope me-1"></i> Alamat Email</label>
                        <input type="email" name="email" class="pform-input" value="{{ $user->email }}">
                    </div>

                    <div class="pform-section-label mt-2">
                        <i class="fas fa-lock me-1"></i> KEAMANAN AKUN
                        <span class="pform-section-hint">Kosongkan jika tidak ingin mengubah password</span>
                    </div>

                    <div class="pform-row-2">
                        <div class="pform-group">
                            <label class="pform-label">Password Baru</label>
                            <div class="pform-input-wrap">
                                <input type="password" name="password" id="pw1" class="pform-input pform-input-icon" placeholder="Min. 8 karakter">
                                <span class="pform-eye" onclick="togglePw('pw1', this)"><i class="fas fa-eye"></i></span>
                            </div>
                        </div>
                        <div class="pform-group">
                            <label class="pform-label">Konfirmasi Password</label>
                            <div class="pform-input-wrap">
                                <input type="password" name="password_confirmation" id="pw2" class="pform-input pform-input-icon" placeholder="Ulangi password baru">
                                <span class="pform-eye" onclick="togglePw('pw2', this)"><i class="fas fa-eye"></i></span>
                            </div>
                        </div>
                    </div>

                    <div class="pform-actions">
                        <button type="reset" class="btn-reset">
                            <i class="fas fa-undo me-1"></i> Reset
                        </button>
                        <button type="submit" class="btn-simpan">
                            <i class="fas fa-check me-1"></i> Simpan Perubahan
                        </button>
                    </div>

                </form>
            </div>
        </div>

    </div>
</div>

<style>
/* =================================================
   WARNA UTAMA: #064e3b (hijau tua) — sama dgn Edit User
================================================= */

.profile-hero {
    display: flex;
    align-items: center;
    gap: 18px;
    background: linear-gradient(135deg, #064e3b 0%, #0a6b52 100%);
    border-radius: 16px;
    padding: 28px 32px;
    margin: 0 0 28px 0;
    box-shadow: 0 4px 20px rgba(6,78,59,0.2);
}

.profile-hero-icon {
    width: 52px; height: 52px;
    background: rgba(255,255,255,0.12);
    border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    font-size: 22px; color: #fff; flex-shrink: 0;
}

.profile-hero-title { font-size: 20px; font-weight: 800; color: #fff; line-height: 1.2; }
.profile-hero-sub   { font-size: 13px; color: rgba(255,255,255,0.65); margin-top: 3px; }

.profile-wrap { padding: 0; }

.profile-grid {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 24px;
    align-items: start;
}

.pcard {
    background: #fff;
    border-radius: 16px;
    padding: 28px 24px;
    box-shadow: 0 2px 16px rgba(0,0,0,0.07);
    border: 1px solid #e5e7eb;
}

.profile-left { display: flex; flex-direction: column; gap: 16px; }

.pcard-avatar-wrap { display: flex; justify-content: center; margin-bottom: 14px; }

.pcard-avatar {
    width: 110px; height: 110px;
    border-radius: 50%; object-fit: cover;
    border: 4px solid #a7f3d0;
    box-shadow: 0 4px 16px rgba(6,78,59,0.15);
}

.pcard-name  { text-align: center; font-size: 16px; font-weight: 700; color: #111827; }
.pcard-email { text-align: center; font-size: 12.5px; color: #6b7280; margin-top: 3px; margin-bottom: 18px; }

.pcard-upload-form { display: flex; flex-direction: column; gap: 10px; }

.btn-pilih-foto {
    display: block; text-align: center; padding: 10px;
    border-radius: 10px; border: 2px dashed #6ee7b7;
    color: #064e3b; font-size: 13.5px; font-weight: 600;
    cursor: pointer; transition: all 0.2s; background: #f0fdf4;
}
.btn-pilih-foto:hover { background: #d1fae5; }

.btn-upload-foto {
    display: block; width: 100%; padding: 11px;
    border-radius: 10px;
    background: linear-gradient(135deg, #064e3b, #0d6e4f);
    color: #fff; font-size: 13.5px; font-weight: 700; border: none;
    cursor: pointer; box-shadow: 0 4px 12px rgba(6,78,59,0.25); transition: opacity 0.2s;
}
.btn-upload-foto:hover { opacity: 0.88; }

.pcard-hint { text-align: center; font-size: 11.5px; color: #9ca3af; }

.pcard-info { padding: 20px 24px; }

.pinfo-row {
    display: flex; align-items: center; gap: 14px;
    padding: 10px 0; border-bottom: 1px solid #f3f4f6;
}
.pinfo-row:last-child { border-bottom: none; }

.pinfo-icon {
    width: 36px; height: 36px; border-radius: 10px;
    background: #f0fdf4; display: flex; align-items: center;
    justify-content: center; color: #064e3b; font-size: 14px; flex-shrink: 0;
}
.pinfo-icon-blue { background: #eff6ff; color: #2563eb; }

.pinfo-label  { font-size: 10px; font-weight: 700; color: #9ca3af; letter-spacing: 1px; text-transform: uppercase; }
.pinfo-value  { font-size: 13.5px; font-weight: 600; color: #111827; margin-top: 2px; }

.pform-header {
    display: flex; align-items: center; gap: 14px;
    margin-bottom: 24px; padding-bottom: 18px; border-bottom: 1px solid #f3f4f6;
}

.pform-header-icon {
    width: 40px; height: 40px; background: #f0fdf4; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    color: #064e3b; font-size: 16px; flex-shrink: 0;
}

.pform-title { font-size: 16px; font-weight: 700; color: #111827; }
.pform-sub   { font-size: 12.5px; color: #6b7280; margin-top: 2px; }

.pform-section-label {
    font-size: 11px; font-weight: 800; color: #064e3b;
    letter-spacing: 1px; text-transform: uppercase;
    margin: 0 0 14px; display: flex; align-items: center; gap: 4px;
}

.pform-section-hint {
    font-size: 11px; font-weight: 400; color: #9ca3af;
    letter-spacing: 0; text-transform: none; margin-left: auto;
}

.pform-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }

.pform-group { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.pform-row-2 .pform-group { margin-bottom: 0; }

.pform-label { font-size: 12.5px; font-weight: 600; color: #374151; }

.pform-input {
    padding: 11px 14px; border: 1.5px solid #e5e7eb; border-radius: 10px;
    font-size: 13.5px; color: #111827; background: #fafafa;
    transition: border 0.2s, box-shadow 0.2s; outline: none; width: 100%; box-sizing: border-box;
}
.pform-input:focus {
    border-color: #064e3b;
    box-shadow: 0 0 0 3px rgba(6,78,59,0.1);
    background: #fff;
}

.pform-input-wrap { position: relative; }
.pform-input-icon { padding-right: 42px; }

.pform-eye {
    position: absolute; right: 13px; top: 50%; transform: translateY(-50%);
    color: #9ca3af; cursor: pointer; font-size: 14px; transition: color 0.15s;
}
.pform-eye:hover { color: #064e3b; }

.pform-actions {
    display: flex; justify-content: flex-end; gap: 12px;
    margin-top: 8px; padding-top: 20px; border-top: 1px solid #f3f4f6;
}

.btn-reset {
    padding: 11px 22px; border-radius: 10px; border: 1.5px solid #e5e7eb;
    background: #fff; color: #6b7280; font-size: 13.5px; font-weight: 600;
    cursor: pointer; transition: all 0.2s;
}
.btn-reset:hover { background: #f9fafb; border-color: #d1d5db; color: #374151; }

.btn-simpan {
    padding: 11px 28px; border-radius: 10px;
    background: linear-gradient(135deg, #064e3b, #0d6e4f);
    color: #fff; font-size: 13.5px; font-weight: 700; border: none;
    cursor: pointer; transition: opacity 0.2s;
    box-shadow: 0 4px 14px rgba(6,78,59,0.3);
}
.btn-simpan:hover { opacity: 0.88; }

/* ── MOBILE RESPONSIVE ── */
@media (max-width: 768px) {
    .profile-hero {
        padding: 20px 18px;
        gap: 14px;
        border-radius: 12px;
        margin-bottom: 20px;
    }
    .profile-hero-title { font-size: 17px; }
    .profile-hero-sub   { font-size: 12px; }

    .profile-grid {
        grid-template-columns: 1fr;   /* ← kolom jadi 1, stack ke bawah */
    }

    .pform-row-2 {
        grid-template-columns: 1fr;   /* ← 2 kolom form jadi 1 kolom */
        gap: 0;
    }
    .pform-row-2 .pform-group { margin-bottom: 16px; }

    .pform-actions {
        flex-direction: column;
    }
    .btn-reset,
    .btn-simpan {
        width: 100%;
        text-align: center;
    }

    .pcard { padding: 20px 16px; }
    .pcard-info { padding: 16px; }

    .pform-section-hint {
        display: block;
        margin-left: 0;
        margin-top: 4px;
    }
    .pform-section-label {
        flex-wrap: wrap;
    }
}
</style>

<script>
document.getElementById('fotoInput').addEventListener('change', function(e) {
    if (e.target.files[0]) {
        document.getElementById('previewImg').src = URL.createObjectURL(e.target.files[0]);
    }
});

function togglePw(id, el) {
    const input = document.getElementById(id);
    const isHidden = input.type === 'password';
    input.type = isHidden ? 'text' : 'password';
    el.innerHTML = isHidden ? '<i class="fas fa-eye-slash"></i>' : '<i class="fas fa-eye"></i>';
}
</script>

@endsection