@php
$client = new JoyPixels\Client(new JoyPixels\Ruleset());
$client->ascii = true;

$userId = (Auth::check()) ? auth()->user()->id : $user->id;
$coverpic = (Auth::check()) ? auth()->user()->coverpic : $user->coverpic;
$avatar = (Auth::check()) ? auth()->user()->avatar : $user->avatar;
$createdAt = (Auth::check()) ? auth()->user()->created_at->format('F d, Y') : $user->created_at->format('F d, Y');
$profileViews = (Auth::check()) ? number_format(auth()->user()->profile_views) : number_format($user->profile_views);
$gameListViews = (Auth::check()) ? number_format(auth()->user()->list_views) : number_format($user->list_views);
$blogViews = (Auth::check()) ? number_format(auth()->user()->blog_views) : number_format($user->blog_views);
$bio = (Auth::check()) ? auth()->user()->bio : $user->bio;

$gamesOnListCount = (Auth::check()) ? auth()->user()->gameList->count() : $user->gameList->count();
$averageGameRating = (Auth::check()) ? round(auth()->user()->gameList->average('rating'), 2) : round($user->gameList->average('rating'), 2);
@endphp

<x-base-layout>

    <!--begin::Row-->
    <div class="row gy-5 g-xl-8">
        <div class="col-xxl-12">
            <div class="card shadow-sm">
                <div class="card-body p-0">
                    <div class="card-rounded h-400px" style="background-image: url({{ Storage::url('assets/coverpics/') .  $coverpic }}); background-size: cover;">
                        <div class="d-flex flex-wrap flex-sm-nowrap pt-1 ps-9 mb-2">
                            <!--begin: Pic-->
                            <div class="symbol symbol-100px symbol-lg-160px symbol-fixed position-absolute bottom-0 mb-7">
                                <img class="img-thumbnail" src="{{ Storage::url('assets/avatars/') . $avatar }}" alt="image">
                                {{-- <div class="position-absolute translate-middle bottom-0 start-100 mb-6 bg-success rounded-circle border border-4 border-white h-20px w-20px"></div> --}}
                            </div>
                            <!--end::Pic-->
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row gy-5 g-xl-8 mt-0">
        <div class="col-md-3">
            <div class="card shadow-sm mb-2">
                <div class="card-header">
                    <h3 class="card-title">{{ auth()->user()->username ?? $user->username }}</h3>
                    {{-- <div class="card-toolbar">
                        <button type="button" class="btn btn-sm btn-light">
                            Add / Remove Friend
                        </button>
                    </div> --}}
                </div>
                <div class="card-body">
                    <div class="mb-3">
                        <span class="fw-bolder">Join Date:</span><br />
                        {{ $createdAt }}
                    </div>
                    <div class="mb-3">
                        <span class="fw-bolder">Profile Views:</span><br />
                        {{ $profileViews }}
                    </div>
                    <div class="mb-3">
                        <span class="fw-bolder">Games on List:</span> <br />
                        {{ $gamesOnListCount ?? '0'}}
                    </div>
                    <div class="mb-3">
                        <span class="fw-bolder">List Views:</span> <br />
                        {{ $gameListViews}}
                    </div>
                    <div class="mb-3">
                        <span class="fw-bolder">Average Game Rating:</span> <br />
                        {{ $averageGameRating ?? 'No games rated yet.'}}
                    </div>
                    <div class="mb-3">
                        <span class="fw-bolder">Game Reviews Written:</span> <br />
                        Coming soon...
                    </div>
                    <div class="mb-3">
                        <span class="fw-bolder">Favorited Games:</span> <br />
                        Coming soon...
                    </div>
                    <div class="mb-3">
                        <span class="fw-bolder">Wishlisted Games:</span> <br />
                        Coming soon...
                    </div>
                    <div class="mb-3">
                        <span class="fw-bolder">Blog Entries:</span> <br />
                        Coming soon...
                    </div>
                    <div class="mb-3">
                        <span class="fw-bolder">Blog Views:</span><br />
                        {{ $blogViews }}
                    </div>
                    <div class="mb-3">
                        <span class="fw-bolder">Profile Comments Left:</span> <br />
                        Coming soon...
                    </div>
                    <div class="mb-3">
                        <span class="fw-bolder">Friends:</span> <br />
                        Coming soon...
                    </div>
                    <div class="mb-3">
                        <span class="fw-bolder">Friends Of:</span> <br />
                        Coming soon...
                    </div>
                </div>
            </div>
            <div class="card shadow-sm mb-2">
                <div class="card-header">
                    <h3 class="card-title">Social Media Links</h3>
                </div>
                <div class="card-body">
                    <p class="mb-0">Coming soon...</p>
                </div>
            </div>
            <div class="card shadow-sm mb-2">
                <div class="card-header">
                    <h3 class="card-title">Gamertags</h3>
                </div>
                <div class="card-body">
                    <p class="mb-0">Coming soon...</p>
                </div>
            </div>
            <div class="card shadow-sm">
                <div class="card-header">
                    <h3 class="card-title">My Consoles</h3>
                </div>
                <div class="card-body">
                    <p class="mb-0">Coming soon...</p>
                </div>
            </div>
        </div>
        <div class="col-md-9">
            <div class="card shadow-sm mb-2">
                <div class="card-body">
                    <div id="user-bio">
                        @if ($userId == 1 || $userId == 2)
                            {!! Markdown::parse($client->shortnameToImage($bio), ['purifier' => false]) !!}
                        @else
                            @if (isset($bio))
                                {!! Markdown::parse($client->shortnameToImage($bio)) !!}
                            @else
                                <p>No bio yet. Check back later.</p>
                            @endif
                        @endif
                    </div>
                </div>
            </div>
            <div class="card shadow-sm">
                <div class="card-header">
                    <h3 class="card-title">Comments</h3>
                </div>
                <div class="card-body">
                    <p class="mb-0">Coming soon...</p>
                </div>
            </div>
        </div>
    </div>

</x-base-layout>