@extends('admin.layout.app')
@section('content')
    <!-- Content -->
    <main class="grow pt-5" id="content" role="content">
    @include('admin.user.header')
    <!-- Container -->
        <div class="kt-container-fixed">
            <!-- begin: grid -->
            <div class="grid grid-cols-1 lg:grid-cols-3 gap-5 lg:gap-7.5">
                <div class="col-span-1">
                    <div class="grid gap-5 lg:gap-7.5">
                        <div class="kt-card">
                            <div class="kt-card-content">
                                <div class="flex flex-wrap justify-center gap-2 py-1">
                                    <div class="flex flex-col items-center gap-1.5">
             <span class="text-mono text-2xl lg:text-2xl font-semibold">
             {{$user->sender()->where('status','accepted')->count() ?? ''}}
             </span>
                                        <span class="text-secondary-foreground text-sm font-normal">
              Connections
             </span>
                                    </div>
                                    <span class="sm:ms-8 sm:ps-8 border-s border-s-border">
            </span>
                                    <div class="flex flex-col items-center gap-1.5">
             <span class="text-mono text-2x lg:text-2xl font-semibold">
              {{$user->followers()->count() ?? ''}}
             </span>
                                        <span class="text-secondary-foreground text-sm">
              Followers
             </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="kt-card">
                            <div class="kt-card-header">
                                <h3 class="kt-card-title">
                                    Profile
                                </h3>
                            </div>
                            <div class="kt-card-content">
                                {{--                                    <p class="text-sm text-foreground leading-5.5 mb-4">--}}
                                {{--                                        Experienced and creative professional with a passion great--}}
                                {{--                                        as for problem-solving and a commitment to excellence.--}}
                                {{--                                    </p>--}}
                                <div class="grid gap-y-3.5">
                                    <div class="flex items-center gap-2.5">
                                        <i class="ki-filled ki-abstract-41 text-base text-muted-foreground">
                                        </i>
                                        <a class="text-sm leading-none text-mono hover:text-primary" href="#">
                                            {{$user->name ?? ''}}
                                        </a>
                                    </div>
                                    <div class="flex items-center gap-2.5">
                                        <i class="ki-filled ki-crown-2 text-base text-muted-foreground">
                                        </i>
                                        <a class="text-sm leading-none text-mono hover:text-primary" href="#">
                                            {{$user->gender ?? ''}}
                                        </a>
                                    </div>
                                    <div class="flex items-center gap-2.5">
                                        <i class="ki-filled ki-briefcase text-base text-muted-foreground">
                                        </i>
                                        <a class="text-sm leading-none text-mono hover:text-primary" href="#">
                                            {{$user->title ?? ''}}
                                        </a>
                                    </div>
                                    <div class="flex items-center gap-2.5">
                                        <i class="ki-filled ki-sms text-base text-muted-foreground">
                                        </i>
                                        <a class="text-sm leading-none text-mono hover:text-primary" href="#">
                                            {{$user->email ?? ''}}
                                        </a>
                                    </div>
                                    {{--                                        <div class="flex items-center gap-2.5">--}}
                                    {{--                                            <i class="ki-filled ki-abstract-39 text-base text-muted-foreground">--}}
                                    {{--                                            </i>--}}
                                    {{--                                            <a class="text-sm leading-none text-mono hover:text-primary" href="#">--}}
                                    {{--                                                https://keenthemes.com--}}
                                    {{--                                            </a>--}}
                                    {{--                                        </div>--}}
                                    @foreach($user->socialLinks as $link)
                                        @php
                                            // Extract the icon class (e.g. fab fa-facebook-f)
                                            $iconClass = explode(' ', $link->icon)[1];  // Get the second part of the class, e.g., 'fa-facebook-f'

                                            // Remove 'fa-' and '-f' dynamically
                                            $platform = str_replace('fa-', '', $iconClass);  // Remove 'fa-'

                                            // Handle special cases like Facebook 'fa-facebook-f' and 'google-plus-square'
                                            if (strpos($platform, '-f') !== false) {
                                                $platform = str_replace('-f', '', $platform);  // Remove '-f' for Facebook and similar
                                            }

                                            // Platform mapping for supported icons
                                            $platforms = [
                                                'facebook' => 'Facebook',
                                                'twitter' => 'Twitter',
                                                'instagram' => 'Instagram',
                                                'youtube' => 'YouTube',
                                                'google-plus-square' => 'Google+',
                                                'behance-square' => 'Behance',
                                                'pinterest' => 'Pinterest',
                                                'globe-americas' => 'Website',
                                            ];

                                            // Check if the platform is available in the list
                                            if (array_key_exists($platform, $platforms)) {
                                                $platformName = $platforms[$platform];
                                            } else {
                                                $platformName = 'Abstract';  // Fallback name
                                                $platform = 'abstract-22';  // Fallback icon
                                            }
                                        @endphp

                                        <div class="flex items-center gap-2.5">
                                            <!-- Render icon dynamically with fallback to 'abstract-22' if not in the list -->
                                            <i class="ki-filled ki-{{ $platform ?? 'abstract-22' }} text-base text-muted-foreground"></i>
                                            <a class="text-sm leading-none text-mono hover:text-primary"
                                               href="{{ $link->url }}" target="_blank">
                                            {{ $platformName }}  <!-- Display platform name dynamically -->
                                            </a>
                                        </div>
                                    @endforeach


                                </div>
                            </div>
                        </div>

                    </div>
                </div>
                <div class="col-span-2">
                    <div class="flex flex-col gap-5 lg:gap-7.5">
                        @if($user->chat->isEmpty())
                        <label class="text-center">No Feed Found!</label>
                        @else
                            @foreach($user->chat as $chat)
                                <div class="kt-card">
                                    <div class="flex justify-between items-center mb-5 p-7.5 pb-0">
                                        <div class="flex items-center gap-3">
                                            <div class="">
                                                <img class="rounded-full size-[50px]"
                                                     src="{{asset($user->getFirstMediaURL('profile_image') ?? '')}}">
                                            </div>
                                            <div class="flex flex-col">
                                                <a class="text-base font-medium text-mono hover:text-primary mb-1"
                                                   href="#">
                                                    {{$user->name ??''}}
                                                </a>
                                                <time class="text-sm text-secondary-foreground">
                                                    {{$chat->created_at->format('M d, Y g:i A') ?? ''}}
                                                </time>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="grid gap-5 mb-5 px-7.5">
                                        <h5>{{ $chat->title ?? '' }}</h5>
                                        <h3>{{ $chat->sub_title ?? '' }}</h3>
                                        <p class="text-sm text-foreground leading-5.5">
                                            {{$chat->description ?? ''}}
                                        </p>
                                    </div>

                                    <div>
                                        <div
                                            class="flex flex-col sm:flex-row items-stretch sm:items-center flex-wrap gap-2.5 border-input border-t border-b border-dashed py-3 mb-4 mx-7.5"
                                            data-kt-tabs="true">
                                            <button
                                                class="active group kt-btn shadow-none bg-transparent px-3 text-secondary-foreground hover:text-primary kt-tab-active:bg-primary/10 kt-tab-active:border-primary/10 kt-tab-active:text-primary"
                                                data-kt-tab-toggle="#post_{{ $chat->id }}_comments">
                                                <i class="ki-filled ki-message-text text-muted-foreground group-hover:text-primary kt-tab-active:text-primary"></i>
                                                {{$chat->comments->count()}} Comments
                                            </button>
                                            <button
                                                class="group kt-btn shadow-none bg-transparent px-3 text-secondary-foreground hover:text-primary kt-tab-active:bg-primary/10 kt-tab-active:border-primary/10 kt-tab-active:text-primary"
                                                data-kt-tab-toggle="#post_{{ $chat->id }}_likes">
                                                <i class="ki-filled ki-heart text-muted-foreground group-hover:text-primary kt-tab-active:text-primary"></i>
                                                {{$chat->likes->count()}} Likes
                                            </button>
                                        </div>

                                        <div id="post_{{ $chat->id }}_comments">
                                            <div class="grid gap-2 lg:gap-5 p-7.5 pt-0">
                                                @foreach($chat->comments->take(2) as $comment)
                                                    <div class="flex items-start gap-2.5">
                                                        <img alt=""
                                                             class="rounded-full w-9 h-9 lg:w-[50px] lg:h-[50px] mt-1"
                                                             src="{{$comment->user->getFirstMediaURL('profile_image') ?? ''}}"/>
                                                        <div class="grid gap-2.5 grow">
                                                            <div class="flex justify-between items-center">
                                                                <div class="flex items-center gap-1.5">
                                                                    <a class="text-base font-medium text-mono hover:text-primary"
                                                                       href="#">
                                                                        {{$comment->user->name ?? ''}}
                                                                    </a>
                                                                    <span class="text-sm text-secondary-foreground">
                                                    {{$comment->created_at->diffForHumans() ?? ''}}
                                                </span>
                                                                </div>
                                                                <div class="justify-center">
                                                                    <a class="kt-link kt-link-underlined kt-link-dashed"
                                                                       href="">
                                                                        Report
                                                                    </a>
                                                                </div>
                                                            </div>
                                                            <p class="text-sm text-foreground heading-5.5">
                                                                {{$comment->comment ?? ''}}
                                                            </p>
                                                        </div>
                                                    </div>
                                                @endforeach
                                            </div>
                                            <div class="kt-card-footer justify-center">
                                                <a class="kt-link kt-link-underlined kt-link-dashed" href="">
                                                    Show more Comments
                                                </a>
                                            </div>
                                        </div>

                                        <div class="hidden" id="post_{{ $chat->id }}_likes">
                                            <div class="flex flex-col gap-2 lg:gap-5 pt-3.5 px-7.5 mb-5">
                                                @foreach($chat->likes->take(2) as $like)
                                                    <div class="flex items-center flex-wrap gap-2">
                                                        <div class="flex items-center grow gap-2.5">
                                                            <img alt="" class="rounded-full size-10 shrink-0"
                                                                 src="{{asset($like->user->getFirstMediaURL('profile_image') ?? '')}}"/>
                                                            <div class="flex flex-col">
                                                                <a class="text-base font-medium text-mono hover:text-primary mb-px"
                                                                   href="#">
                                                                    {{$like->user->name ?? ''}}
                                                                </a>
                                                            </div>
                                                        </div>
                                                        <a class="kt-btn kt-btn-sm kt-btn-primary">
                                                            <i class="ki-filled ki-people">
                                                            </i>
                                                            View
                                                        </a>
                                                    </div>
                                                @endforeach
                                            </div>
                                            <div class="kt-card-footer justify-center">
                                                <a class="kt-link kt-link-underlined kt-link-dashed" href="">
                                                    Show more Likes
                                                </a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                            <div class="flex justify-center">
                                <a class="kt-link kt-link-underlined kt-link-dashed" href="#">
                                    Show more posts
                                </a>
                            </div>
                        @endif
                    </div>
                </div>

            </div>
            <!-- end: grid -->
        </div>
        <!-- End of Container -->
    </main>
    <!-- End of Content -->
@endsection