@extends('layouts.panel')

@section('title', $title)

@push('css')
@endpush

@section('breadcrumb')
<x-admin.breadcrumb />
@endsection

@section('content')
<x-admin.panel-card>
    @slot('title')
        <div class="card-title border-bottom">
            <h5>@lang('User Details')</h5>
        </div>
    @endslot
    <div class="row">
        <div class="col-md-4 text-center">
            <img src="{{ $user->image_url }}" alt="Photo" class="rounded-circle img-thumbnail" height="200" width="200" style="width:200px;height:200px">
        </div>
        <div class="col-md-8">
            <div class="row">
                <div class="col-md-6">
                    <strong class="small text-secondary">{{ __('Full Name') }}</strong>
                    <p class="text-dark">{{ $user->name }}</p>
                </div>
                <div class="col-md-12">
                    <strong class="small text-secondary">{{ __('Email') }}</strong>
                    <p class="text-dark">{{ $user->email }}</p>
                </div>
                <div class="col-md-6">
                    <strong class="small text-secondary">{{ __('Date of Birth') }}</strong>
                    <p class="text-dark">{{ formatDate($user->date_of_birth) }} ({{ getAge($user->date_of_birth) }} {{ __('years') }})</p>
                </div>
                <div class="col-md-12">
                    <strong class="small text-secondary">{{ __('Address') }}</strong>
                    <p class="text-dark">
                        <span class="d-block">{{ $user->address }}, {{ $user->city }}, {{ $user->state }},</span>
                    </p>
                </div>
            </div>
        </div>
    </div>
</x-admin.panel-card>
@endsection

@push('js')
@endpush