@extends('layouts.user_type.guest')
@section('header_title', __('دوستان'))

@push('extra_css')

    <link rel="stylesheet" href="{{url('/')}}/assets/css/style.css">
    <link rel="stylesheet" href="{{url('/')}}/assets/css/responsive.css">
    <style>
        .friends-page {
            --friend-card-bg: #111827;
            --friend-card-border: #243041;
            --friend-text: #f9fafb;
            --friend-muted: #9ca3af;
            --friend-input-bg: #182230;
            --friend-input-border: #324155;
            --friend-hover: #1f2b3b;
            --friend-row-border: #243041;
            --friend-shadow: none;
        }

        body.dark .friends-page,
        body.dark-mode .friends-page,
        .dark .friends-page {
            --friend-card-bg: #ffffff;
            --friend-card-border: #edf0f5;
            --friend-text: #111827;
            --friend-muted: #6b7280;
            --friend-input-bg: #ffffff;
            --friend-input-border: #d7dce5;
            --friend-hover: #f6f8fc;
            --friend-row-border: #eef1f6;
            --friend-shadow: 0 2px 15px rgba(0,0,0,.04);
        }

        .friends-page .iq-card {
            background: var(--friend-card-bg);
            border: 1px solid var(--friend-card-border);
            border-radius: 14px;
            box-shadow: var(--friend-shadow);
            overflow: hidden;
            margin-bottom: 25px;
        }

        .friends-page .iq-card-header {
            padding: 18px 22px;
            border-bottom: 1px solid var(--friend-card-border);
        }

        .friends-page .iq-card-body {
            padding: 20px;
        }

        .friends-page .card-title {
            color: var(--friend-text);
            font-size: 18px;
            font-weight: 700;
            margin: 0;
        }

        .friends-page .friend-label {
            display: block;
            margin-bottom: 10px;
            color: var(--friend-text);
            font-weight: 600;
            font-size: 14px;
        }

        .friends-page .friend-search-input {
            width: 100%;
            height: 48px;
            border-radius: 12px;
            border: 1px solid var(--friend-input-border);
            background: var(--friend-input-bg);
            color: var(--friend-text);
            padding: 0 16px;
            outline: none;
            transition: .2s;
        }

        .friends-page .friend-search-input:focus {
            border-color: #3b82f6;
        }

        .friends-page .friend-search-input::placeholder {
            color: var(--friend-muted);
        }

        .friends-page .friend-results {
            margin-top: 12px;
            border-radius: 12px;
            overflow: hidden;
            border: 1px solid var(--friend-card-border);
        }

        .friends-page .friend-search-item {
            padding: 14px 16px;
            border-bottom: 1px solid var(--friend-row-border);
            cursor: pointer;
            transition: .2s;
            background: var(--friend-card-bg);
        }

        .friends-page .friend-search-item:last-child {
            border-bottom: 0;
        }

        .friends-page .friend-search-item:hover {
            background: var(--friend-hover);
        }

        .friends-page .friend-search-name {
            color: var(--friend-text);
            font-weight: 600;
            margin-bottom: 3px;
        }

        .friends-page .friend-search-meta {
            color: var(--friend-muted);
            font-size: 13px;
        }

        .friends-page .friend-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 16px 0;
            border-bottom: 1px solid var(--friend-row-border);
        }

        .friends-page .friend-row:last-child {
            border-bottom: 0;
        }

        .friends-page .friend-user {
            display: flex;
            flex-direction: column;
        }

        .friends-page .friend-user-name {
            color: var(--friend-text);
            font-weight: 700;
            margin-bottom: 4px;
        }

        .friends-page .friend-user-meta {
            color: var(--friend-muted);
            font-size: 13px;
        }

        .friends-page .friend-actions {
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
        }

        .friends-page .friend-btn {
            border: 0;
            border-radius: 10px;
            padding: 10px 16px;
            font-size: 13px;
            font-weight: 600;
            transition: .2s;
        }

        .friends-page .friend-btn-primary {
            background: #3b82f6;
            color: #fff;
        }

        .friends-page .friend-btn-primary:hover {
            background: #2563eb;
        }

        .friends-page .friend-btn-danger {
            background: #ef4444;
            color: #fff;
        }

        .friends-page .friend-btn-danger:hover {
            background: #dc2626;
        }

        .friends-page .friend-btn-success {
            background: #10b981;
            color: #fff;
        }

        .friends-page .friend-btn-success:hover {
            background: #059669;
        }

        .friends-page .friend-badge {
            display: inline-flex;
            align-items: center;
            border-radius: 999px;
            padding: 6px 12px;
            background: rgba(59,130,246,.12);
            color: #3b82f6;
            font-size: 12px;
            font-weight: 700;
        }

        .friends-page .friend-empty {
            color: var(--friend-muted);
            text-align: center;
            padding: 15px 0;
        }

        .friends-page .selected-user-box {
            margin-top: 12px;
        }

        @media(max-width:768px) {

            .friends-page .friend-row {
                flex-direction: column;
                align-items: flex-start;
                gap: 15px;
            }

            .friends-page .friend-actions {
                width: 100%;
            }

            .friends-page .friend-btn {
                width: 100%;
            }
        }
    </style>
@endpush

@section('content')

    <div class="container mt-5 friends-page">

        <br>
        <br>

        {{ view('user.user_menu') }}

        <div class="container-fluid">

            @if ($errors->any())
                <div class="alert alert-danger">
                    <ul class="mb-0">
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif

            @if(session('success'))
                <div class="alert alert-success">
                    {{ session('success') }}
                </div>
            @endif

            @if(session('error'))
                <div class="alert alert-danger">
                    {{ session('error') }}
                </div>
            @endif

            <div class="row">

                <div class="col-lg-4">

                    <div class="iq-card">

                        <div class="iq-card-header">
                            <h4 class="card-title">
                                {{ __('ارسال درخواست دوستی') }}
                            </h4>
                        </div>

                        <div class="iq-card-body">

                            <form method="POST" action="{{ localized_route('user.friends.send') }}">
                                @csrf

                                <input type="hidden" name="receiver_id" id="receiver_id">

                                <label class="friend-label">
                                    {{ __('جستجوی کاربر با آیدی، نام') }}
                                </label>

                                <input type="text"
                                       id="friend_search"
                                       class="friend-search-input"
                                       autocomplete="off"
                                       autocorrect="off"
                                       autocapitalize="off"
                                       spellcheck="false"
                                       readonly
                                       onfocus="this.removeAttribute('readonly');"
                                       placeholder="{{ __('مثلا: 12 یا Amir') }}">

                                <div id="friend_search_results" class="friend-results"></div>

                                <div id="selected_friend_box" class="selected-user-box" style="display:none;">
                                    <span class="friend-badge" id="selected_friend_text"></span>
                                </div>

                                <button type="submit"
                                        class="friend-btn friend-btn-primary mt-3 w-100">
                                    {{ __('ارسال درخواست') }}
                                </button>
                            </form>

                        </div>
                    </div>

                    <div class="iq-card">

                        <div class="iq-card-header">
                            <h4 class="card-title">
                                {{ __('درخواست‌های ارسال‌شده') }}
                            </h4>
                        </div>

                        <div class="iq-card-body">

                            @forelse($sent as $request)

                                <div class="friend-row">

                                    <div class="friend-user">
                                        <div class="friend-user-name">
                                            {{ trim($request->receiver->fname . ' ' . $request->receiver->lname) ?: $request->receiver->email }}
                                        </div>

                                        <div class="friend-user-meta">
                                            #{{ $request->receiver->id }}
                                        </div>
                                    </div>

                                    <span class="friend-badge">
                                        {{ __('در انتظار تایید') }}
                                    </span>

                                </div>

                            @empty

                                <div class="friend-empty">
                                    {{ __('درخواست ارسالی وجود ندارد') }}
                                </div>

                            @endforelse

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

                <div class="col-lg-8">

                    <div class="iq-card">

                        <div class="iq-card-header">
                            <h4 class="card-title">
                                {{ __('درخواست‌های دریافتی') }}
                            </h4>
                        </div>

                        <div class="iq-card-body">

                            @forelse($requests as $request)

                                <div class="friend-row">

                                    <div class="friend-user">

                                        <div class="friend-user-name">
                                            {{ trim($request->sender->fname . ' ' . $request->sender->lname) ?: $request->sender->email }}
                                        </div>

                                        <div class="friend-user-meta">
                                            #{{ $request->sender->id }}
                                        </div>

                                    </div>

                                    <div class="friend-actions">

                                        <form method="POST"
                                              action="{{ localized_route('user.friends.accept', ['friendship' => $request->id]) }}">
                                            @csrf

                                            <button type="submit"
                                                    class="friend-btn friend-btn-success">
                                                {{ __('قبول') }}
                                            </button>
                                        </form>

                                        <form method="POST"
                                              action="{{ localized_route('user.friends.reject', ['friendship' => $request->id]) }}">
                                            @csrf

                                            <button type="submit"
                                                    class="friend-btn friend-btn-danger">
                                                {{ __('رد') }}
                                            </button>
                                        </form>

                                    </div>

                                </div>

                            @empty

                                <div class="friend-empty">
                                    {{ __('درخواست جدیدی وجود ندارد') }}
                                </div>

                            @endforelse

                        </div>
                    </div>

                    <div class="iq-card">

                        <div class="iq-card-header">
                            <h4 class="card-title">
                                {{ __('دوستان من') }}
                            </h4>
                        </div>

                        <div class="iq-card-body">

                            @forelse($friends as $friendship)

                                @php
                                    $friend = $friendship->sender_id == $user->id
                                        ? $friendship->receiver
                                        : $friendship->sender;
                                @endphp

                                <div class="friend-row">

                                    <div class="friend-user">

                                        <div class="friend-user-name">
                                            {{ trim($friend->fname . ' ' . $friend->lname) ?: $friend->email }}
                                        </div>

                                        <div class="friend-user-meta">
                                            #{{ $friend->id }}
                                        </div>

                                    </div>

                                    <div class="friend-actions">

                                        @if($friendship->chat_id)

                                            <a href="{{ localized_route('user.chat', ['chat_id' => $friendship->chat_id]) }}"
                                               class="friend-btn friend-btn-primary">
                                                {{ __('شروع چت') }}
                                            </a>

                                        @endif

                                        <form method="POST"
                                              action="{{ localized_route('user.friends.remove', ['friendship' => $friendship->id]) }}">
                                            @csrf
                                            @method('DELETE')

                                            <button type="submit"
                                                    class="friend-btn friend-btn-danger">
                                                {{ __('حذف') }}
                                            </button>
                                        </form>

                                    </div>

                                </div>

                            @empty

                                <div class="friend-empty">
                                    {{ __('هنوز دوستی ثبت نشده است') }}
                                </div>

                            @endforelse

                        </div>
                    </div>

                </div>

            </div>

        </div>

    </div>

    <script>

        const searchInput = document.getElementById('friend_search');
        const resultBox = document.getElementById('friend_search_results');
        const receiverInput = document.getElementById('receiver_id');
        const selectedBox = document.getElementById('selected_friend_box');
        const selectedText = document.getElementById('selected_friend_text');

        let timer = null;

        searchInput.addEventListener('keyup', function () {

            clearTimeout(timer);

            const q = this.value.trim();

            receiverInput.value = '';
            selectedBox.style.display = 'none';

            if (q.length < 3) {
                resultBox.innerHTML = '';
                return;
            }

            timer = setTimeout(() => {

                fetch(`{{ localized_route('user.friends.searchUsers') }}?q=${encodeURIComponent(q)}`)

                    .then(res => res.json())

                    .then(users => {

                        resultBox.innerHTML = '';

                        if (!users.length) {

                            resultBox.innerHTML = `
                                <div class="friend-search-item">
                                    <div class="friend-search-meta">
                                        {{ __('کاربری پیدا نشد') }}
                                    </div>
                                </div>
                            `;

                            return;
                        }

                        users.forEach(user => {

                            const item = document.createElement('div');

                            item.className = 'friend-search-item';

                            item.innerHTML = `
                                <div class="friend-search-name">
                                    ${user.name}
                                </div>

                                <div class="friend-search-meta">
                                    #${user.id}
                                </div>
                            `;

                            item.addEventListener('click', () => {

                                receiverInput.value = user.id;

                                searchInput.value =
                                    `#${user.id} - ${user.name || user.email}`;

                                selectedText.innerText =
                                    `${@json(__('انتخاب شده'))}: #${user.id} - ${user.name || user.email}`;

                                selectedBox.style.display = 'block';

                                resultBox.innerHTML = '';
                            });

                            resultBox.appendChild(item);
                        });
                    });

            }, 250);
        });

    </script>

@endsection