@extends('layouts.main')
@section('title', $data['title'])
@section('content')

    <style>
        .dashboard-card h3 {
            margin-bottom: 20px;
        }

        .dashboard-card {
            max-width: 1000px;
            margin-top: 30px;
            margin-left: 30px;
        }

        .user-card {
            background-color: #fff;
            border-radius: 15px;
            padding: 40px 40px;
            max-width: 400px;
            width: 90%;
            box-shadow: 0 1px 2px #0003, 1px -1px 2px #00000012, 0 -1px 2px #0000001a;
            text-align: center;
        }

        .user-card img {
            width: 120px;
            height: 120px;
            border-radius: 50%;
            border: 3px solid var(--gold);
            object-fit: cover;
            margin-bottom: 15px;
        }

        .user-card h2 {
            margin: 0;
            font-size: 1.8rem;
            color: var(--gold);
        }

        .user-card p {
            margin: 5px 0;
            color: var(--text-dark);
        }

        .user-card .role {
            background-color: var(--gold);
            color: white;
            display: inline-block;
            padding: 5px 12px;
            border-radius: 50px;
            font-size: 0.9rem;
            margin-top: 10px;
        }
    </style>
    <div class="page-content">
        <div class="dashboard-card">
            <div>
                <h3 class="">Welcome To Dashboard!!</h3>
            </div>

            <div class="user-card">
                @php
                    $avatarPath = $data['userDetail']->avatar;
                    $finalAvatar =
                        $avatarPath && file_exists(public_path($avatarPath))
                            ? asset($avatarPath)
                            : asset('assets/user_profile/default.png');
                @endphp

                <img src="{{ $finalAvatar }}" alt="User Image">

                <h2 style="color: #000;font-weight: 500;">
                    {{ $data['userDetail']->first_name }} {{ $data['userDetail']->last_name }}
                </h2>

                <p style="padding-right: 27px;">
                    <b>User Type :</b> {{ $data['userDetail']->user_type_name }}
                </p>

                <p><b>Email:</b> {{ $data['userDetail']->email }}</p>

                <p style="padding-right: 42px;">
                    <b>Mobile:</b> {{ $data['userDetail']->phone_number }}
                </p>
            </div>
        </div>
    </div>

@endsection('content')
@section('custom-scripts')