@extends('layout.app')

@section('content')
<div class="page-header">
    <ol class="breadcrumb">
        <li class="breadcrumb-item">Home</li>
        <li class="breadcrumb-item active">My Profile</li>
    </ol>
</div>

<div class="row gutters">
    {{-- Sisi Kiri: Foto & Ringkasan --}}
    <div class="col-xl-4 col-lg-4 col-md-12">
        <div class="card h-100 shadow-sm border-0">
            <div class="card-body p-0">
                <div class="text-center p-4" style="background: linear-gradient(135deg, #28a745 0%, #1e7e34 100%); border-radius: 4px 4px 0 0;">
                    <div class="mb-3 d-flex justify-content-center">
                        <div class="avatar-container">
                            <img src="{{ asset('assetdashboard/img/profile.jpg') }}" alt="Profile Photo" class="profile-avatar">
                        </div>
                    </div>
                    <h5 class="text-white font-weight-bold mb-1">{{ $user->nama_lengkap }}</h5>
                    <span class="badge badge-pill badge-light text-success font-weight-bold px-3 mt-1">{{ strtoupper($user->role) }}</span>
                </div>
                <div class="p-4">
                    <ul class="list-group list-group-flush">
                        <li class="list-group-item d-flex justify-content-between align-items-center px-0">
                            <span class="text-muted small font-weight-bold uppercase">Username</span>
                            <span class="text-dark font-weight-bold">{{ $user->username }}</span>
                        </li>
                        <li class="list-group-item d-flex justify-content-between align-items-center px-0">
                            <span class="text-muted small font-weight-bold uppercase">Status Akun</span>
                            <span class="text-success font-weight-bold"><i class="icon-check-circle"></i> Aktif</span>
                        </li>
                        <li class="list-group-item d-flex justify-content-between align-items-center px-0">
                            <span class="text-muted small font-weight-bold uppercase">Terdaftar Sejak</span>
                            <span class="text-dark">{{ $user->created_at->format('d M Y') }}</span>
                        </li>
                    </ul>
                    <button type="button" id="btn-edit-mode" class="btn btn-outline-success btn-block mt-3 font-weight-bold shadow-sm">
                        <i class="icon-edit1"></i> Edit Profil
                    </button>
                </div>
            </div>
        </div>
    </div>

    {{-- Sisi Kanan: Form Edit --}}
    <div class="col-xl-8 col-lg-8 col-md-12">
        <div class="card h-100 shadow-sm border-0">
            <div class="card-header bg-white border-bottom py-3">
                <h5 class="mb-0 text-dark font-weight-bold"><i class="icon-user1 text-success mr-2"></i> Detail Informasi Akun</h5>
            </div>
            <div class="card-body">
                @if(session('success'))
                    <div class="alert alert-success border-0 shadow-sm mb-4">
                        <i class="icon-check"></i> {{ session('success') }}
                    </div>
                @endif

                <form action="{{ route('account.updateProfile') }}" method="POST">
                    @csrf
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="font-weight-bold small text-muted text-uppercase">Nama Lengkap</label>
                                <input type="text" name="nama_lengkap" class="form-control profile-input" value="{{ $user->nama_lengkap }}" required readonly>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="font-weight-bold small text-muted text-uppercase">Username</label>
                                <input type="text" name="username" class="form-control profile-input" value="{{ $user->username }}" required readonly>
                            </div>
                        </div>
                        <div class="col-md-12">
                            <div class="form-group">
                                <label class="font-weight-bold small text-muted text-uppercase">Alamat Tempat Tinggal</label>
                                <textarea name="alamat" class="form-control profile-input" rows="3" readonly>{{ $user->alamat }}</textarea>
                            </div>
                        </div>
                    </div>

                    {{-- BAGIAN INFO TAMBAHAN: Muncul saat mode baca agar card tidak kosong --}}
                    <div id="info-additional" class="mt-4 p-3 rounded" style="background-color: #f9f9f9; border-left: 4px solid #28a745;">
                        <h6 class="font-weight-bold text-dark mb-2 small text-uppercase">Hak Akses Pengguna</h6>
                        <p class="small text-muted mb-0">
                            Anda login sebagai <strong>{{ ucfirst($user->role) }}</strong>. Sebagai {{ $user->role }}, Anda memiliki otoritas untuk
                            @if($user->role == 'admin')
                                mengelola kriteria, melakukan perhitungan perbandingan pakar, dan mengatur periode seleksi bansos.
                            @else
                                memverifikasi data dokumen warga dan meninjau hasil perangkingan sebelum dipublikasikan.
                            @endif
                        </p>
                    </div>

                    {{-- PASSWORD SECTION: Muncul hanya saat edit --}}
                    <div id="password-section" style="display: none;">
                        <hr class="my-4">
                        <h6 class="text-success font-weight-bold mb-3 small text-uppercase"><i class="icon-shield"></i> Keamanan Akun (Ganti Password)</h6>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label class="font-weight-bold small text-muted text-uppercase">Password Baru</label>
                                    <input type="password" name="password_baru" class="form-control profile-input" placeholder="Minimal 8 karakter">
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label class="font-weight-bold small text-muted text-uppercase">Konfirmasi Password Baru</label>
                                    <input type="password" name="password_baru_confirmation" class="form-control profile-input" placeholder="Ulangi password">
                                </div>
                            </div>
                        </div>
                        <div class="alert alert-light border-0 mt-2 py-2">
                            <small class="text-muted"><i class="icon-info"></i> Kosongkan jika tidak ingin mengganti password.</small>
                        </div>
                    </div>

                    <div class="text-right mt-4">
                        <button type="button" id="btn-cancel" class="btn btn-light px-4 mr-2 shadow-sm font-weight-bold" style="display: none;">Batal</button>
                        <button type="submit" id="btn-save" class="btn btn-success px-5 shadow-sm font-weight-bold" style="display: none;">
                            <i class="icon-save"></i> Simpan Perubahan
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function () {
        const btnEdit = document.getElementById('btn-edit-mode');
        const btnCancel = document.getElementById('btn-cancel');
        const btnSave = document.getElementById('btn-save');
        const inputs = document.querySelectorAll('.profile-input');
        const passwordSection = document.getElementById('password-section');
        const infoAdditional = document.getElementById('info-additional');

        btnEdit.addEventListener('click', function() {
            inputs.forEach(input => {
                input.removeAttribute('readonly');
                input.style.backgroundColor = "#fff";
                input.classList.add('border-success');
            });
            passwordSection.style.display = 'block';
            infoAdditional.style.display = 'none'; // Sembunyikan info tambahan agar fokus edit
            btnSave.style.display = 'inline-block';
            btnCancel.style.display = 'inline-block';
            btnEdit.style.display = 'none';
        });

        btnCancel.addEventListener('click', function() {
            inputs.forEach(input => {
                input.setAttribute('readonly', true);
                input.style.backgroundColor = "#f8f9fa";
                input.classList.remove('border-success');
            });
            passwordSection.style.display = 'none';
            infoAdditional.style.display = 'block'; // Munculkan kembali info tambahan
            btnSave.style.display = 'none';
            btnCancel.style.display = 'none';
            btnEdit.style.display = 'block';
        });
    });
</script>

<style>
    .avatar-container {
        width: 140px; height: 140px; border-radius: 50%; padding: 4px;
        background: rgba(255, 255, 255, 0.2); box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
    }
    .profile-avatar {
        width: 100%; height: 100%; object-fit: cover; object-position: top;
        border-radius: 50%; border: 4px solid #ffffff;
    }
    .uppercase { text-transform: uppercase; }
    .form-control:focus { border-color: #28a745; box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.1); }
    .profile-input[readonly] { background-color: #f8f9fa; border-color: #e9ecef; cursor: default; }
    .btn-success { background-color: #28a745; border: none; }
    .btn-success:hover { background-color: #1e7e34; }
</style>
@endsection