@extends('layouts.authUser')

@section('content')
<h2>Profil</h2>
<div class="content-container">
    <div class="profile">
        <i class="bx bxs-user-circle icon-profile"></i>
        <p><b>{{ $user->username }}</b></p>
    </div>

    <div class="content-info mt-4">
        <p>Nama penuh:</p><p>{{ $user->name }}</p>
        <p>Pengguna:</p><p>{{ $user->role }}</p>
        <p>Nama pengguna:</p><p>{{ $user->username }}</p>
        <p>E-mel:</p><p>{{ $user->email }}</p>
        <p>Nombor telefon:</p><p>{{ $user->phone_num }}</p>
        <p>Akaun didaftar pada:</p><p>{{ $user->created_at->format('j M Y, g:i a') }}</p>
        <p>Akaun dikemaskini pada:</p><p>{{ $user->updated_at->format('j M Y, g:i a') }}</p>
    </div>

    <a href="{{ route('ManageUser.EditUserProfile', ['user' => $user->id]) }}" class="btn btn-Kemaskini-Profil mt-4 mb-2">{{ __('Kemaskini Profil') }}</a>
</div>

<div id="alert-message">
    @if (session('failure'))
        <div class="alert alert-danger">
            {{ session('failure') }}
        </div>
    @endif <!--Red pop up message-->

    @if (session('success'))
        <div class="alert alert-success">
            {{ session('success') }}
        </div>
    @endif <!--Green pop up message-->
</div>

<script>
    // Hide alert message after 5 seconds if it exists
setTimeout(function() {
    const alertMessage = document.getElementById("alert-message");
    if (alertMessage) {
        alertMessage.style.display = "none";
    }
}, 5000);
</script>
@endsection