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

    <section class="chat-page profile-page notification-sec">
        <div class="container">
            <div class="row">
                <div class="col-lg-3 col-md-3">
                    <div class="suggestion-card">
                        <div class="d-flex">
                            <h2>Filters</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>
                        <div class="notification-content">
                            <h5>All notifications</h5>
                        </div>
                        <ul>
                            <li>
                                <div class="jesi-flex">
                                    <!-- <figure>
                                        <img src="images/sugstimg1.png" class="img-fluid" alt="img">
                                    </figure> -->
                                    <div>
                                        <h4>Jessica William</h4>
                                        <span>Graphic Designer</span>
                                    </div>
                                </div>
                                <a href="#"><i class="fal fa-plus"></i></a>
                            </li>
                            <li>
                                <div class="jesi-flex">
                                    <!-- <figure>
                                        <img src="images/sugstimg2.png" class="img-fluid" alt="img">
                                    </figure> -->
                                    <div>
                                        <h4>John Doe</h4>
                                        <span>PHP Developer</span>
                                    </div>
                                </div>
                                <a href="#"><i class="fal fa-plus"></i></a>
                            </li>
                            <li>
                                <div class="jesi-flex">
                                    <!-- <figure>
                                        <img src="images/sugstimg3.png" class="img-fluid" alt="img">
                                    </figure> -->
                                    <div>
                                        <h4>Poonam</h4>
                                        <span>Wordpress Developer</span>
                                    </div>
                                </div>
                                <a href="#"><i class="fal fa-plus"></i></a>
                            </li>
                            <li>
                                <div class="jesi-flex">
                                    <!-- <figure>
                                        <img src="images/sugstimg3.png" class="img-fluid" alt="img">
                                    </figure> -->
                                    <div>
                                        <h4>Bill Gates</h4>
                                        <span>C & C++ Developer</span>
                                    </div>
                                </div>
                                <a href="#"><i class="fal fa-plus"></i></a>
                            </li>
                            <li>
                                <div class="jesi-flex">
                                    <!-- <figure>
                                        <img src="images/sugstimg4.png" class="img-fluid" alt="img">
                                    </figure> -->
                                    <div>
                                        <h4>Jessica William</h4>
                                        <span>Graphic Designer</span>
                                    </div>
                                </div>
                                <a href="#"><i class="fal fa-plus"></i></a>
                            </li>
                            <li>
                                <div class="jesi-flex">
                                    <!-- <figure>
                                        <img src="images/sugstimg5.png" class="img-fluid" alt="img">
                                    </figure> -->
                                    <div>
                                        <h4>John Doe</h4>
                                        <span>PHP Developer</span>
                                    </div>
                                </div>
                                <a href="#"><i class="fal fa-plus"></i></a>
                            </li>
                        </ul>
                        <a href="#" class="profile-btn">View More</a>
                    </div>

                    <div class="help-card mt-4">
                        <ul>
                            <li>
                                <a href="#">Help Center</a>
                                <a href="#">About</a>
                                <a href="#">Privacy Policy</a>
                            </li>
                            <li>
                                <a href="#">Community Guidelines</a>
                                <a href="#">Cookies Policy</a>
                            </li>
                            <li>
                                <a href="#">Career</a>
                                <a href="#">Language</a>
                                <a href="#">Copyright Policy</a>
                            </li>
                        </ul>
                        <div class="copyrght-chat">
                            <a href="#" class="cht-bold">404 Chats</a>
                            <span><i class="fas fa-copyright"></i>Copyright 2025</span>
                        </div>
                    </div>

                </div>
                <div class="col-lg-6 col-md-6">
                    <div class="notification">
                        <h2>Notifications</h2>
                        <button>Mark All As Read Settings</button>
                    </div>
                    <div class="post-coment">
                        <div class="cmnt-jhn">
                            <div class="d-flex">
                                <figure>
                                    <img src="images/n1.png" class="img-fluid" alt="img">
                                </figure>
                                <div>
                                    <h4>Yanisha</h4>
                                    <span><i class="fad fa-clock"></i>3 min ago</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="#">Action</a>
                                    <a class="dropdown-item" href="#">Another action</a>
                                    <a class="dropdown-item" href="#">Something else here</a>
                                </div>
                            </div>
                        </div>
                        <div class="epic-flex">
                            <div class="loc-flex">
                                <a href="#"><img src="images/epic-icon.png" class="img-fluid" alt="img">Epic Coder</a>
                                <a href="#"><img src="images/loc-icon.png" class="img-fluid" alt="img">Location</a>
                            </div>
                            <div class="bokmark">
                                <a href="#"><i class="fal fa-bookmark"></i></a>
                                <a href="#"><i class="fal fa-envelope"></i></a>
                            </div>
                        </div>
                        <div class="senir-wrodpres">
                            <h3>Senior Wordpress Developer</h3>
                            <div class="full-time">
                                <a href="#" class="time">Full Time</a>
                                <span>$30 / hr</span>
                            </div>
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam luctus
                                hendrerit metus, ut ullamcorper quam finibus at. Etiam id magna sit amet...</p>
                            <a href="#" class="view">View More</a>
                            <ul class="course">
                                <li><a href="#">HTML</a></li>
                                <li><a href="#">PHP</a></li>
                                <li><a href="#">PHP</a></li>
                                <li><a href="#">Javascript</a></li>
                                <li><a href="#">Wordpress</a></li>
                            </ul>
                        </div>
                        <div class="like-comnt">
                            <ul>
                                <li>
                                    <a href="#"><i class="fas fa-heart"></i>Like</a>
                                    <figure>
                                        <img src="images/likeimg.png" class="img-fluid" alt="img">
                                        <span>25</span>
                                    </figure>
                                    <a href="#"><i class="fas fa-comment-alt"></i> Comment 15</a>
                                </li>
                            </ul>
                            <div class="view-50">
                                <a href="#"><i class="far fa-eye"></i> Views 50</a>
                            </div>
                        </div>
                    </div>

                </div>
                <div class="col-lg-3 col-md-3">
                    <div class="notification">
                        <h2>Friend Request</h2>
                    </div>
                    @if($friend_users->isEmpty())
                        <label>No Pending Requests!</label>
                    @else
                        @foreach($friend_users as $request)
                            <div class="post-coment">
                                <div class="cmnt-jhn">
                                    <div class="d-flex">
                                        <figure>
                                            <img src="{{$request->getFirstMediaUrl('profile_image')}}" alt=""
                                                 style="    width: 98px;
    border-radius: 50px;
    height: 55px;
">
                                        </figure>
                                        <div>
                                            <h4>{{$request->name ?? ''}}</h4>
                                            <p>{{$request->title ?? ''}}</p>
                                            <span><i
                                                    class="fad fa-clock"></i>{{$request->created_at->DiffForHumans() ?? ''}}</span>
                                       <br>
                                        </div>
                                    </div>
                                </div>
                                <ul class="friend-request-list">
                                    <li>
                                        <form action="{{ route('follow.accept.request') }}"
                                              method="POST">
                                            <input type="hidden" name="sender" value="{{$request->id}}">
                                            @csrf
                                            <button type="submit">Accept</button>
                                        </form>

                                    </li>
                                    <li>
                                        <button><i class="fas fa-envelope"></i></button>
                                    </li>
                                    <li>
                                        <form action="{{ route('follow.cancel.request') }}"
                                              method="POST">
                                            <input type="hidden" name="sender" value="{{$request->id}}">
                                            @csrf
                                            <button type="submit">Pass</button>
                                        </form>
                                    </li>
                                </ul>
                                <div class="friend-request-box-bottom">
                                    <a href="{{route('view.profile',['id' => $request->id,'name' => $request->name])}}">view profile</a>
                                </div>
                            </div>
                        @endforeach
                    @endif
                </div>
            </div>
        </div>

    </section>
@endsection