@extends('layout.app')
@section('content')
    <section class="sign-sec">
        <div class="container">
            <div class="row align-items-center">
                <div class="chat-sec p-50">
                    <div class="container">
                        <div class="row">
                            <div class="col-lg-4 col-md-12">
                                <div class="suggestion-card setting-card">
                                    <ul class="user-chat-tabing-list setting-tabing-list">
                                        <li data-targetit="box-1">
                                            <div class="user-profile chat-user-profile user-chat-image-and-title">
                                                <div class="user-profile-img">
                                                    <img src="{{asset('images/s1.png')}}" alt="">
                                                </div>
                                                <div class="user-profile-content">
                                                    <h6 class="mb-10">Account Setting</h6>
                                                </div>
                                            </div>
                                        </li>
                                        <li data-targetit="box-2">
                                            <div class="user-profile chat-user-profile user-chat-image-and-title">
                                                <div class="user-profile-img">
                                                    <img src="{{asset('images/s2.png')}}" alt="">
                                                </div>
                                                <div class="user-profile-content">
                                                    <h6 class="mb-10">Status</h6>
                                                </div>
                                            </div>
                                        </li>
                                        <li data-targetit="box-3">
                                            <div class="user-profile chat-user-profile user-chat-image-and-title">
                                                <div class="user-profile-img">
                                                    <img src="{{asset('images/s3.png')}}" alt="">
                                                </div>
                                                <div class="user-profile-content">
                                                    <h6 class="mb-10">Change Password</h6>
                                                </div>
                                            </div>
                                        </li>
                                        <li data-targetit="box-5">
                                            <div class="user-profile chat-user-profile user-chat-image-and-title">
                                                <div class="user-profile-img">
                                                    <img src="{{asset('images/s5.png')}}" alt="">
                                                </div>
                                                <div class="user-profile-content">
                                                    <h6 class="mb-10">Requests</h6>
                                                </div>
                                            </div>
                                        </li>
                                        <li data-targetit="box-6">
                                            <div class="user-profile chat-user-profile user-chat-image-and-title">
                                                <div class="user-profile-img">
                                                    <img src="{{asset('images/s6.png')}}" alt="">
                                                </div>
                                                <div class="user-profile-content">
                                                    <h6 class="mb-10">Security and Login</h6>
                                                </div>
                                            </div>
                                        </li>
                                        <li data-targetit="box-7">
                                            <div class="user-profile chat-user-profile user-chat-image-and-title">
                                                <div class="user-profile-img">
                                                    <img src="{{asset('images/s7.png')}}" alt="">
                                                </div>
                                                <div class="user-profile-content">
                                                    <h6 class="mb-10">Privacy</h6>
                                                </div>
                                            </div>
                                        </li>
                                        <li data-targetit="box-8">
                                            <div class="user-profile chat-user-profile user-chat-image-and-title">
                                                <div class="user-profile-img">
                                                    <img src="{{asset('images/s8.png')}}" alt="">
                                                </div>
                                                <div class="user-profile-content">
                                                    <h6 class="mb-10">Blocking</h6>
                                                </div>
                                            </div>
                                        </li>
                                        {{--                                        <li data-targetit="box-9">--}}
                                        {{--                                            <div class="user-profile chat-user-profile user-chat-image-and-title">--}}
                                        {{--                                                <div class="user-profile-img">--}}
                                        {{--                                                    <img src="{{asset('images/s9.png')}}" alt="">--}}
                                        {{--                                                </div>--}}
                                        {{--                                                <div class="user-profile-content">--}}
                                        {{--                                                    <h6 class="mb-10">Deactivate Account</h6>--}}
                                        {{--                                                </div>--}}
                                        {{--                                            </div>--}}
                                        {{--                                        </li>--}}
                                    </ul>
                                </div>
                            </div>
                            <div class="col-lg-8 col-md-12">
                                <div class="chat-box-2 shadow-box">
                                    <div class="box-1 showfirst">
                                        <div class="setting-box">
                                            <h4>Account Setting</h4>
                                            <hr>
                                            <div class="setting-wrap">
                                                <div>
                                                    <h5>notification sound</h5>
                                                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus
                                                        pretium nulla quis erat dapibus,
                                                        varius hendrerit neque suscipit. Integer in ex euismod, posuere
                                                        lectus id</p>
                                                </div>
                                                <div class="toggle-btn">
                                                    <label class="switch">
                                                        <input type="checkbox">
                                                        <span class="slider"></span>
                                                    </label>
                                                </div>
                                            </div>

                                            <div class="setting-wrap">
                                                <div>
                                                    <h5>notification sound</h5>
                                                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus
                                                        pretium nulla quis erat dapibus,
                                                        varius hendrerit neque suscipit. Integer in ex euismod, posuere
                                                        lectus id</p>
                                                </div>
                                                <div class="toggle-btn">
                                                    <label class="switch">
                                                        <input type="checkbox">
                                                        <span class="slider"></span>
                                                    </label>
                                                </div>
                                            </div>
                                            <div class="setting-wrap">
                                                <div>
                                                    <h5>notification sound</h5>
                                                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus
                                                        pretium nulla quis erat dapibus,
                                                        varius hendrerit neque suscipit. Integer in ex euismod, posuere
                                                        lectus id</p>
                                                </div>
                                                <div class="toggle-btn">
                                                    <label class="switch">
                                                        <input type="checkbox">
                                                        <span class="slider"></span>
                                                    </label>
                                                </div>
                                            </div>
                                            <div class="setting-wrap setting-btn-wrap">
                                                <div>
                                                    <button>save setting</button>
                                                </div>
                                                <div class="toggle-btn">
                                                    <button>restore setting</button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="box-2">
                                        <div class="setting-box">
                                            <h4>Account Status</h4>
                                            <hr>
                                            <div style="background: bisque" class="setting-wrap">
                                                <div>
                                                    <style>
                                                        @keyframes blink {
                                                            50% {
                                                                opacity: 0;
                                                            }
                                                        }
                                                    </style>
                                                    <h5 style="color: green; animation: blink 1s step-start infinite;">
                                                        {{ \Illuminate\Support\Facades\Auth::user()->status ? "Active" : '' }}
                                                    </h5>
                                                </div>
                                            </div>

                                            <div class="setting-wrap setting-btn-wrap">
                                                <div>
                                                    <form action="{{route('deactivate.account')}}" method="GET">
                                                        <button type="submit">Deactivate Account</button>
                                                    </form>
                                                </div>
                                                <div class="toggle-btn">
                                                    <form action="{{route('delete.account')}}" method="GET">
                                                        <button type="submit" style="color: red">Delete Account</button>
                                                    </form>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="box-3">
                                        <div class="setting-box">
                                            <h4>Change Password</h4>
                                            <hr>
                                            <form action="{{route('password.reset')}}" method="POST">
                                                @csrf
                                                <div class="setting-wrap">
                                                    <div class="col-md-12">
                                                        <h5>Current Password</h5>
                                                        <input type="password" name="current_password"
                                                               class="form-control">
                                                        @error('current_password')
                                                        <label class="text-danger">{{$message}}</label>
                                                        @enderror
                                                    </div>


                                                </div>
                                                <div class="setting-wrap">
                                                    <div class="col-md-12">
                                                        <h5>New Password</h5>
                                                        <input type="password" name="password" class="form-control">
                                                        @error('password')
                                                        <label class="text-danger">{{$message}}</label>
                                                        @enderror
                                                    </div>
                                                </div>
                                                <div class="setting-wrap">
                                                    <div class="col-md-12">
                                                        <h5>Confirm New Password</h5>
                                                        <input type="password" name="password_confirmation"
                                                               class="form-control">
                                                        @error('password_confirmation')
                                                        <label class="text-danger">{{$message}}</label>
                                                        @enderror
                                                    </div>
                                                </div>
                                                <div class="setting-wrap setting-btn-wrap">
                                                    <div class="toggle-btn">
                                                        <button>Update Password</button>
                                                    </div>
                                                </div>
                                            </form>
                                        </div>
                                    </div>

                                    <div class="box-5">
                                        <div class="setting-box">
                                            <h4 class="mb-4">Pending Requests</h4>
                                            <hr>

                                            <div class="row">
                                                @forelse($pendingRequests as $request)

                                                    <div class="col-md-4 mb-4">
                                                        <div class="card h-100 shadow-sm">
                                                            <div class="card-body text-center">
                                                                <img
                                                                    src="{{ $request->userReceiver->getFirstMediaUrl('profile_image') ?? '/default-avatar.png' }}"
                                                                    alt="User Avatar"
                                                                    class="rounded-circle mb-3" width="100"
                                                                    height="100">
                                                                <h5 class="card-title">{{ $request->userReceiver->name }}</h5>
                                                                <p class="card-text text-muted">{{ $request->userReceiver->title ?? 'No title' }}</p>

                                                                <form action="{{ route('sender.cancel.request') }}"
                                                                      method="POST" class="d-inline-block mt-3">
                                                                    @csrf
                                                                    <input type="hidden" name="request_id"
                                                                           value="{{ $request->id }}">
                                                                    <button type="submit"
                                                                            class="btn btn-outline-danger btn-sm">Cancel
                                                                    </button>
                                                                </form>
                                                            </div>
                                                            <div class="card-footer text-center bg-white">
                                                                <a href="{{route('view.profile',['id' => $request->userReceiver->id,'name' => $request->userReceiver->name])}}"
                                                                   class="btn btn-link text-primary">View Profile</a>
                                                            </div>
                                                        </div>
                                                    </div>
                                                @empty
                                                    <div class="col-12">
                                                        <p class="text-center text-muted">No pending requests.</p>
                                                    </div>
                                                @endforelse
                                            </div>
                                        </div>
                                    </div>

                                    <div class="box-6">
                                        <div class="setting-box">
                                            <h4>Account Setting</h4>
                                            <hr>
                                            <div class="setting-wrap">
                                                <div>
                                                    <h5>notification sound</h5>
                                                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus
                                                        pretium nulla quis erat dapibus,
                                                        varius hendrerit neque suscipit. Integer in ex euismod, posuere
                                                        lectus id</p>
                                                </div>
                                                <div class="toggle-btn">
                                                    <label class="switch">
                                                        <input type="checkbox">
                                                        <span class="slider"></span>
                                                    </label>
                                                </div>
                                            </div>
                                            <div class="setting-wrap">
                                                <div>
                                                    <h5>notification sound</h5>
                                                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus
                                                        pretium nulla quis erat dapibus,
                                                        varius hendrerit neque suscipit. Integer in ex euismod, posuere
                                                        lectus id</p>
                                                </div>
                                                <div class="toggle-btn">
                                                    <label class="switch">
                                                        <input type="checkbox">
                                                        <span class="slider"></span>
                                                    </label>
                                                </div>
                                            </div>
                                            <div class="setting-wrap">
                                                <div>
                                                    <h5>notification sound</h5>
                                                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus
                                                        pretium nulla quis erat dapibus,
                                                        varius hendrerit neque suscipit. Integer in ex euismod, posuere
                                                        lectus id</p>
                                                </div>
                                                <div class="toggle-btn">
                                                    <label class="switch">
                                                        <input type="checkbox">
                                                        <span class="slider"></span>
                                                    </label>
                                                </div>
                                            </div>
                                            <div class="setting-wrap setting-btn-wrap">
                                                <div>
                                                    <button>save setting</button>
                                                </div>
                                                <div class="toggle-btn">
                                                    <button>restore setting</button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="box-7">
                                        <div class="setting-box">
                                            <h4>Account Setting</h4>
                                            <hr>
                                            <div class="setting-wrap">
                                                <div>
                                                    <h5>notification sound</h5>
                                                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus
                                                        pretium nulla quis erat dapibus,
                                                        varius hendrerit neque suscipit. Integer in ex euismod, posuere
                                                        lectus id</p>
                                                </div>
                                                <div class="toggle-btn">
                                                    <label class="switch">
                                                        <input type="checkbox">
                                                        <span class="slider"></span>
                                                    </label>
                                                </div>
                                            </div>
                                            <div class="setting-wrap">
                                                <div>
                                                    <h5>notification sound</h5>
                                                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus
                                                        pretium nulla quis erat dapibus,
                                                        varius hendrerit neque suscipit. Integer in ex euismod, posuere
                                                        lectus id</p>
                                                </div>
                                                <div class="toggle-btn">
                                                    <label class="switch">
                                                        <input type="checkbox">
                                                        <span class="slider"></span>
                                                    </label>
                                                </div>
                                            </div>
                                            <div class="setting-wrap">
                                                <div>
                                                    <h5>notification sound</h5>
                                                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus
                                                        pretium nulla quis erat dapibus,
                                                        varius hendrerit neque suscipit. Integer in ex euismod, posuere
                                                        lectus id</p>
                                                </div>
                                                <div class="toggle-btn">
                                                    <label class="switch">
                                                        <input type="checkbox">
                                                        <span class="slider"></span>
                                                    </label>
                                                </div>
                                            </div>
                                            <div class="setting-wrap setting-btn-wrap">
                                                <div>
                                                    <button>save setting</button>
                                                </div>
                                                <div class="toggle-btn">
                                                    <button>restore setting</button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="box-8">
                                        <div class="setting-box">
                                            <h4>Account Setting</h4>
                                            <hr>
                                            <div class="setting-wrap">
                                                <div>
                                                    <h5>notification sound</h5>
                                                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus
                                                        pretium nulla quis erat dapibus,
                                                        varius hendrerit neque suscipit. Integer in ex euismod, posuere
                                                        lectus id</p>
                                                </div>
                                                <div class="toggle-btn">
                                                    <label class="switch">
                                                        <input type="checkbox">
                                                        <span class="slider"></span>
                                                    </label>
                                                </div>
                                            </div>
                                            <div class="setting-wrap">
                                                <div>
                                                    <h5>notification sound</h5>
                                                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus
                                                        pretium nulla quis erat dapibus,
                                                        varius hendrerit neque suscipit. Integer in ex euismod, posuere
                                                        lectus id</p>
                                                </div>
                                                <div class="toggle-btn">
                                                    <label class="switch">
                                                        <input type="checkbox">
                                                        <span class="slider"></span>
                                                    </label>
                                                </div>
                                            </div>
                                            <div class="setting-wrap">
                                                <div>
                                                    <h5>notification sound</h5>
                                                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus
                                                        pretium nulla quis erat dapibus,
                                                        varius hendrerit neque suscipit. Integer in ex euismod, posuere
                                                        lectus id</p>
                                                </div>
                                                <div class="toggle-btn">
                                                    <label class="switch">
                                                        <input type="checkbox">
                                                        <span class="slider"></span>
                                                    </label>
                                                </div>
                                            </div>
                                            <div class="setting-wrap setting-btn-wrap">
                                                <div>
                                                    <button>save setting</button>
                                                </div>
                                                <div class="toggle-btn">
                                                    <button>restore setting</button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="box-9">
                                        <div class="setting-box">
                                            <h4>Account Setting</h4>
                                            <hr>
                                            <div class="setting-wrap">
                                                <div>
                                                    <h5>notification sound</h5>
                                                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus
                                                        pretium nulla quis erat dapibus,
                                                        varius hendrerit neque suscipit. Integer in ex euismod, posuere
                                                        lectus id</p>
                                                </div>
                                                <div class="toggle-btn">
                                                    <label class="switch">
                                                        <input type="checkbox">
                                                        <span class="slider"></span>
                                                    </label>
                                                </div>
                                            </div>
                                            <div class="setting-wrap">
                                                <div>
                                                    <h5>notification sound</h5>
                                                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus
                                                        pretium nulla quis erat dapibus,
                                                        varius hendrerit neque suscipit. Integer in ex euismod, posuere
                                                        lectus id</p>
                                                </div>
                                                <div class="toggle-btn">
                                                    <label class="switch">
                                                        <input type="checkbox">
                                                        <span class="slider"></span>
                                                    </label>
                                                </div>
                                            </div>
                                            <div class="setting-wrap">
                                                <div>
                                                    <h5>notification sound</h5>
                                                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus
                                                        pretium nulla quis erat dapibus,
                                                        varius hendrerit neque suscipit. Integer in ex euismod, posuere
                                                        lectus id</p>
                                                </div>
                                                <div class="toggle-btn">
                                                    <label class="switch">
                                                        <input type="checkbox">
                                                        <span class="slider"></span>
                                                    </label>
                                                </div>
                                            </div>
                                            <div class="setting-wrap setting-btn-wrap">
                                                <div>
                                                    <button>save setting</button>
                                                </div>
                                                <div class="toggle-btn">
                                                    <button>restore setting</button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

@endsection