@extends('admin.layouts.home.main')

@section('main')
    <main class="container-fluid mt-4">
        <div class="card rounded-4 p-4">
            <h4 class="fw-bold mb-4">Profile Information</h4>
            <div class="row g-4 align-items-start">
                {{-- Avatar + Button --}}
                <div class="col-md-3 text-center">
                    <img id="avatarImg"
                        src="{{ $user->image ? Storage::url($user->image) : asset('images/user.png') }}"
                        alt="Avatar" class="img-fluid rounded-circle mb-2"
                        style="width: 120px; height: 120px; object-fit: cover;" />

                    {{-- <div class="d-grid mt-2">
                        <button class="btn btn-outline-secondary" disabled>
                            Change Picture <i class="bi bi-pencil"></i>
                        </button>
                    </div> --}}
                </div>

                {{-- User Fields --}}
                <div class="col-md-9">
                    <div class="row g-3">
                        <div class="col-md-6">
                            <label class="form-label fw-medium">Full Name</label>
                            <input type="text" class="form-control" value="{{ $user->name }}" readonly>
                        </div>

                        <div class="col-md-6">
                            <label class="form-label fw-medium">Role</label>
                            <input type="text" class="form-control" value="{{ ucwords(str_replace('_', ' ', $role)) }}"
                                readonly>
                        </div>

                        <div class="col-md-6">
                            <label class="form-label fw-medium">Email</label>
                            <input type="email" class="form-control" value="{{ $user->email }}" readonly>
                        </div>

                        <div class="col-md-6">
                            <label class="form-label fw-medium">Gender</label>
                            <input type="text" class="form-control" value="{{ $user->gender ?? 'Not specified' }}"
                                readonly>
                        </div>

                        <div class="col-md-6">
                            <label class="form-label fw-medium">Date of Birth</label>
                            <input type="text" class="form-control" value="{{ $user->birthday ?? 'Not provided' }}"
                                readonly>
                        </div>


                    </div>
                </div>
            </div>
        </div>
    </main>
@endsection