@extends('layout.app')
@section('content')

    <div class="inner-banner-sec"
         style="background-image: url('{{ $user->getFirstMediaUrl('banner_image') ? $user->getFirstMediaUrl('banner_image') : asset('images/no-banner.jpg') }}');">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">

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

    <section class="chat-page profile-page pt-0">
        <div class="container">
            <div class="row align-items-end mb-4">
                <div class="col-md-3">
                    <div class="profile-following-card text-center">
                        <figure>
                            <img
                                src="{{$user->getFirstMediaUrl('profile_image') ?? ''}}"
                                class="img-fluid" alt="img" style="border-radius: 100px; width: 194px; height: 206px;">
                            <label for="profile-image" class="profile-label"><input id="profile-image" type="file"><i
                                    class="fas fa-camera"></i></label>
                        </figure>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="profile-following-card">
                        <h2>{{$user->name ?? ''}}</h2>
                        <div class="flex-center-one profile-status-rating">
                            <p>{{$user->title ?? ''}}</p>
                            <div class="stars"><i class="fas fa-star"></i><i class="fas fa-star"></i><i
                                    class="fas fa-star"></i><i class="fas fa-star"></i><i
                                    class="fas fa-star-half-alt"></i></div>
                            <a href="#">status</a>
                        </div>
                    </div>
                </div>

                @php
                    $authId = auth()->id();

                    // Find any friendship row between auth and this $user
                    $friendship = \App\Models\FriendShip::where(function ($query) use ($authId, $user) {
                        $query->where(function ($q) use ($authId, $user) {
                            $q->where('sender_id', $authId)
                              ->where('receiver_id', $user->id);
                        })->orWhere(function ($q) use ($authId, $user) {
                            $q->where('sender_id', $user->id)
                              ->where('receiver_id', $authId);
                        });
                    })->first();
                @endphp

                <div class="col-md-3">
                    <div class="setting-btn">
                        @if($friendship)
                            {{-- 1) PENDING --}}
                            @if($friendship->status === 'pending')
                                @if($friendship->sender_id === $authId)
                                    {{-- Auth has sent to $user --}}
                                    <a style="margin-bottom: 60px" class="themeBtn" href="javascript:void(0)">Request
                                        Sent</a>
                                @else
                                    {{-- Auth is the receiver; show Accept / Pass --}}
                                    <ul style="margin-bottom: 60px" class="friend-request-list">
                                        <li>
                                            <form action="{{ route('follow.accept.request') }}" method="POST">
                                                @csrf
                                                <input type="hidden" name="sender" value="{{ $user->id }}">
                                                <button type="submit">Accept</button>
                                            </form>
                                        </li>
                                        <li>
                                            <form action="{{ route('follow.cancel.request') }}" method="POST">
                                                @csrf
                                                <input type="hidden" name="sender" value="{{ $user->id }}">
                                                <button type="submit">Pass</button>
                                            </form>
                                        </li>
                                    </ul>
                                @endif

                                {{-- 2) ACCEPTED --}}
                            @elseif($friendship->status === 'accepted')
                                <a class="themeBtn" style="background: green; margin-bottom: 60px"
                                   href="javascript:void(0)">
                                    Followed
                                </a>

                                {{-- 3) DECLINED or CANCELED --}}
                            @elseif(in_array($friendship->status, ['declined','canceled']))
                                <a class="themeBtn"
                                   style="color: white; background-color: orangered; margin-bottom: 60px"
                                   href="javascript:void(0)">
                                    Passed
                                </a>

                                {{-- 4) Safety fallback --}}
                            @else
                                <a class="themeBtn" href="javascript:void(0)">Unknown</a>
                            @endif

                            {{-- 5) NO friendship row at all: show Follow button --}}
                        @else
                            <a style="margin-bottom: 60px" href="{{ route('send.follow.request.view', $user->id) }}"
                               class="themeBtn">
                                <i class="fas fa-user"></i> Follow
                            </a>
                        @endif
                    </div>
                </div>


                <div class="row">
                    <div class="col-md-3">
                        <ul class="follow">
                            <li>
                                <h3>Following</h3>
                                <a href="{{ route( 'user.following',$user->id) }}"><span>{{$user->following->count()}}</span></a>
                            </li>
                            <li>
                                <h3>Followers</h3>
                                <a href="{{ route( 'user.follower',$user->id) }}"><span>{{$user->followers->count()}}</span></a>
                            </li>
                        </ul>


                        <ul class="profile-social-links">
                            @if($user->socialLinks->isEmpty())
                                <label>No Social links Updated</label>
                            @else
                                @foreach($user->socialLinks as $link)
                                    <li><a href="{{ $link->url }}"><i class="{{ $link->icon }}"></i> {{ $link->url }}
                                        </a></li>
                                @endforeach
                            @endif
                        </ul>

                        {{--                        <div class="suggestion-card">--}}
                        {{--                            <div class="d-flex">--}}
                        {{--                                <h2>People Viewed Profile</h2>--}}
                        {{--                                <div class="dropdown">--}}
                        {{--                                    <button class="btn btn-secondary dropdown-toggle" type="button"--}}
                        {{--                                            id="dropdownMenuButton"--}}
                        {{--                                            data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">--}}
                        {{--                                        <i class="far fa-ellipsis-v"></i>--}}
                        {{--                                    </button>--}}
                        {{--                                    <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">--}}
                        {{--                                        <a class="dropdown-item" href="#">Action</a>--}}
                        {{--                                        <a class="dropdown-item" href="#">Another action</a>--}}
                        {{--                                        <a class="dropdown-item" href="#">Something else here</a>--}}
                        {{--                                    </div>--}}
                        {{--                                </div>--}}
                        {{--                            </div>--}}
                        {{--                            <ul>--}}
                        {{--                                @forelse ($viewers as $view)--}}
                        {{--                                <li>--}}
                        {{--                                    <div class="jesi-flex">--}}
                        {{--                                        <figure>--}}
                        {{--                                            <img src="{{$view->viewer->getFirstMediaUrl('profile_image') }}" class="img-fluid" alt="img" style="width: 50px;--}}
                        {{--    border-radius: 30px;">--}}
                        {{--                                        </figure>--}}
                        {{--                                        <div>--}}
                        {{--                                            <h4>{{$view->viewer->name ?? ''}}</h4>--}}
                        {{--                                            <span>{{$view->viewer->title ?? ''}}</span>--}}
                        {{--                                        </div>--}}
                        {{--                                    </div>--}}
                        {{--                                    <a href="#"><i class="fal fa-plus"></i></a>--}}
                        {{--                                </li>--}}
                        {{--                                @empty--}}
                        {{--                                    <li>No one has viewed this profile yet.</li>--}}
                        {{--                                @endforelse--}}
                        {{--                            </ul>--}}
                        {{--                            <a href="#" class="profile-btn">View More</a>--}}
                        {{--                        </div>--}}
                    </div>
                    <div class="col-md-6">

                        <div class="tab-content" id="myTabContent">
                            <div class="tab-pane fade show active" id="feed" role="tabpanel" aria-labelledby="feed-tab">
                                @if($user->chat->isEmpty())
                                    <label>No Feed Posted</label>
                                @else
                                    @foreach($user->chat as $chat)
                                        @php
                                            $chat->userHasLiked = $chat->likes()->where('user_id', auth()->id())->exists();

                                        @endphp
                                        <div class="post-coment">
                                            <div class="cmnt-jhn">
                                                <div class="d-flex">
                                                    <figure>
                                                        <img src="{{$chat->user->getFirstMediaUrl('profile_image')}}"
                                                             class="img-fluid profileImage"
                                                             alt="img">
                                                    </figure>
                                                    <div>
                                                        <h4>{{$chat->user->name ?? ''}}</h4>
                                                        <span><i class="fad fa-clock"></i>{{$chat->created_at->diffForHumans()}}</span>
                                                    </div>
                                                </div>
                                                <div class="dropdown">
                                                    <button class="btn btn-secondary dropdown-toggle" type="button"
                                                            id="dropdownMenuButton" data-toggle="dropdown"
                                                            aria-haspopup="true"
                                                            aria-expanded="false">
                                                        <i class="far fa-ellipsis-v"></i>
                                                    </button>
                                                    <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                                                        <a class="dropdown-item" href="#">Delete</a>
                                                        <a class="dropdown-item" href="#">Report Abuse</a>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="senir-wrodpres">
                                                <h3>{{$chat->title ?? ''}}</h3>
                                                <h6>{{$chat->sub_title ?? ''}}</h6>
                                                @php
                                                    $words = explode(' ', $chat->description);
                                                    $shortDescription = implode(' ', array_slice($words, 0, 50));
                                                    $fullDescription = implode(' ', array_slice($words, 50));
                                                @endphp

                                                <p>
                                                    {!! $shortDescription !!}
                                                    @if (count($words) > 50)
                                                        <span style="color: #666666;
    font-size: 0.9rem;
    line-height: 24px;
    font-family: 'Source Sans Pro';
    margin-bottom: 7px;
    width: 95%;" class="more-text d-none">{!! $fullDescription !!}</span>
                                                        <a href="javascript:void(0);" class="view toggle-more">View
                                                            More</a>
                                                    @endif
                                                </p>

                                            </div>
                                            <div class="like-comnt">
                                                <ul>
                                                    <li>
                                                        <a href="#" class="like-btn" data-chat-id="{{ $chat->id }}">
                                                            <i class="fas fa-heart {{ $chat->userHasLiked ? 'text-danger' : '' }}"></i>
                                                            Like
                                                        </a>
                                                        <figure>
                                                            <img src="{{ asset('images/likeimg.png') }}"
                                                                 class="img-fluid"
                                                                 alt="img">
                                                            <span class="like-count"
                                                                  id="like-count-{{ $chat->id }}">{{ $chat->likes->count() }}</span>
                                                        </figure>
                                                        <a href="{{route('chat.comment',$chat->id)}}"><i
                                                                class="fas fa-comment-alt"></i>
                                                            Comment {{$chat->comments->count()}}</a>
                                                    </li>

                                                </ul>
                                                {{--                                        <div class="view-50">--}}
                                                {{--                                            <a href="#"><i class="far fa-eye"></i> Views 50</a>--}}
                                                {{--                                        </div>--}}
                                            </div>
                                        </div>
                                    @endforeach
                                @endif
                            </div>

                        </div>

                    </div>
                    <div class="col-md-3">
                        <div class="top-jobs">
                            <div class="heading">
                                <h3>Portfolio</h3>
                                <div class="dropdown">
                                    <div>
                                        <i class="far fa-images"></i>
                                    </div>
                                </div>
                            </div>

                            <ul class="portfolio-list">
                                @if($user->getMedia('portfolio')->isEmpty())
                                    <lable>No Portfolio Update</lable>
                                @else
                                    @foreach($user->getMedia('portfolio') as $media)
                                        <li>
                                            <figure>
                                                <img src="{{ $media->getUrl() }}" alt="">
                                            </figure>
                                        </li>
                                    @endforeach
                                @endif
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

@endsection
@push('script')
    <script>
        document.querySelectorAll('.toggle-more').forEach(function (btn) {
            btn.addEventListener('click', function () {
                const moreText = this.previousElementSibling;
                moreText.classList.toggle('d-none');
                this.textContent = moreText.classList.contains('d-none') ? 'View More' : 'View Less';
            });
        });
    </script>
@endpush