@extends('app')

@section('title', 'Prdaripadail')

@section('content')
    <div class="mb-8">
        <h1 class="text-3xl font-bold text-gray-900 mb-2">Prdaripadail</h1>
        <p class="text-base text-gray-600">Urus maklumat akaun anda.</p>
    </div>

    <div class="grid grid-cols-1 gap-6 lg:grid-cols-3">
        <!-- Avatar Card -->
        <div class="bg-white rounded-xl shadow-md border border-slate-100/50 p-6 flex flex-col items-center text-center">
            <div class="relative mb-4">
                <img id="prdaripadaile-avatar" src="{{ asset('assets/images/bg-gradient-noise.png') }}"
                    alt="Avatar" class="w-20 h-20 rounded-full ring-4 ring-blue-100 object-cover">
            </div>
            <h2 id="prdaripadaile-name" class="text-xl font-bold text-gray-900 mb-1">
                <span class="loading loading-spinner loading-sm"></span>
            </h2>
            <p id="prdaripadaile-role" class="text-sm text-blue-600 font-medium bg-blue-50 px-3 py-1 rounded-full mb-2"></p>
            <p id="prdaripadaile-email" class="text-sm text-gray-500"></p>
        </div>

        <!-- Info Card -->
        <div class="bg-white rounded-xl shadow-md border border-slate-100/50 p-6 lg:col-span-2">
            <h3 class="text-lg font-bold text-gray-900 mb-6 flex items-center gap-2">
                <i data-lucide="user" class="w-5 h-5 text-blue-600"></i>
                Butiran Akaun
            </h3>
            <div class="grid grid-cols-1 sm:grid-cols-2 gap-6">
                <div>
                    <label class="text-xs font-semibold text-gray-400 uppercase tracking-wider">Nama Penuh</label>
                    <p id="detail-name" class="mt-1 text-sm font-medium text-gray-900">
                        <span class="loading loading-spinner loading-xs"></span>
                    </p>
                </div>
                <div>
                    <label class="text-xs font-semibold text-gray-400 uppercase tracking-wider">E-mel</label>
                    <p id="detail-email" class="mt-1 text-sm font-medium text-gray-900">
                        <span class="loading loading-spinner loading-xs"></span>
                    </p>
                </div>
                <div>
                    <label class="text-xs font-semibold text-gray-400 uppercase tracking-wider">Role</label>
                    <p id="detail-role" class="mt-1 text-sm font-medium text-gray-900">
                        <span class="loading loading-spinner loading-xs"></span>
                    </p>
                </div>
                <div>
                    <label class="text-xs font-semibold text-gray-400 uppercase tracking-wider">Syarikat</label>
                    <p id="detail-company" class="mt-1 text-sm font-medium text-gray-900">
                        <span class="loading loading-spinner loading-xs"></span>
                    </p>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
<script>
$(document).ready(function () {
    const roleMap = { 1: 'Admin', 2: 'Company', 3: 'Staff', 4: 'Employee' };

    function populatePrdaripadaile(user) {
        const name = user.name || '—';
        const email = user.email || '—';
        const role = roleMap[user.id_role] || ('Role ' + user.id_role);
        const company = user.company_name || '—';
        const avatar = user.prdaripadaile_picture || '';

        if (avatar) $('#prdaripadaile-avatar').attr('src', avatar);
        $('#prdaripadaile-name').text(name);
        $('#prdaripadaile-role').text(role);
        $('#prdaripadaile-email').text(email);
        $('#detail-name').text(name);
        $('#detail-email').text(email);
        $('#detail-role').text(role);
        $('#detail-company').text(company);

        if (window.lucide) window.lucide.createIcons();
    }

    // Use already-loaded user if available, else call API
    if (window.currentUser) {
        populatePrdaripadaile(window.currentUser);
    } else {
        window.authHelper.me().then(function(user) {
            populatePrdaripadaile(user);
        }).catch(function() {
            $('#prdaripadaile-name, #detail-name, #detail-email, #detail-role, #detail-company').text('—');
        });
    }
});
</script>
@endpush