@extends('layouts.app')

@section('title', 'Adicionar amigo')

@section('content')
<style>
    .friends-search-page {
        padding: 28px 0;
    }

    .friends-search-shell {
        max-width: 1100px;
        margin: 0 auto;
    }

    .friends-search-card {
        background: linear-gradient(180deg, rgba(20, 28, 45, 0.96) 0%, rgba(13, 19, 31, 0.98) 100%);
        border: 1px solid rgba(255,255,255,0.06);
        border-radius: 22px;
        box-shadow: 0 18px 45px rgba(0,0,0,0.28);
        overflow: hidden;
    }

    .friends-search-hero {
        padding: 26px 28px;
        border-bottom: 1px solid rgba(255,255,255,0.06);
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 18px;
        flex-wrap: wrap;
    }

    .friends-search-title {
        margin: 0 0 6px;
        color: #fff;
        font-size: 26px;
        font-weight: 800;
        letter-spacing: -0.02em;
    }

    .friends-search-subtitle {
        margin: 0;
        color: rgba(255,255,255,0.65);
        font-size: 14px;
        line-height: 1.6;
    }

    .friends-search-back {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 44px;
        padding: 0 16px;
        border-radius: 14px;
        text-decoration: none;
        font-weight: 700;
        color: #fff;
        background: rgba(255,255,255,0.05);
        border: 1px solid rgba(255,255,255,0.07);
    }

    .friends-search-back:hover {
        color: #fff;
        background: rgba(255,255,255,0.08);
    }

    .friends-search-body {
        padding: 24px 28px 28px;
    }

    .friends-search-form {
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 12px;
        margin-bottom: 22px;
    }

    .friends-search-input {
        height: 48px;
        border-radius: 14px;
        border: 1px solid rgba(255,255,255,0.08);
        background: rgba(255,255,255,0.04);
        color: #fff;
        padding: 0 14px;
        outline: none;
    }

    .friends-search-input::placeholder {
        color: rgba(255,255,255,0.42);
    }

    .friends-search-button {
        min-width: 130px;
        height: 48px;
        border: 0;
        border-radius: 14px;
        background: linear-gradient(135deg, #3b82f6, #2563eb);
        color: #fff;
        font-weight: 800;
    }

    .friends-search-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
    }

    .friends-user-card {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
        padding: 16px;
        border-radius: 18px;
        background: rgba(255,255,255,0.03);
        border: 1px solid rgba(255,255,255,0.05);
        transition: .18s ease;
        flex-wrap: wrap;
    }

    .friends-user-card:hover {
        transform: translateY(-1px);
        background: rgba(255,255,255,0.05);
        border-color: rgba(255,255,255,0.08);
    }

    .friends-user-main {
        display: flex;
        align-items: center;
        gap: 14px;
        min-width: 0;
        flex: 1;
    }

    .friends-user-avatar-wrap {
        position: relative;
        flex-shrink: 0;
    }

    .friends-user-avatar {
        width: 54px;
        height: 54px;
        border-radius: 50%;
        object-fit: cover;
        border: 1px solid rgba(255,255,255,0.08);
        background: rgba(255,255,255,0.04);
    }

    .friends-user-status-dot {
        position: absolute;
        right: 0;
        bottom: 0;
        width: 13px;
        height: 13px;
        border-radius: 50%;
        border: 2px solid #131b2b;
    }

    .friends-user-status-dot.online {
        background: #22c55e;
    }

    .friends-user-status-dot.offline {
        background: #94a3b8;
    }

    .friends-user-meta {
        min-width: 0;
    }

    .friends-user-name {
        color: #fff;
        font-size: 15px;
        font-weight: 800;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .friends-user-status {
        margin-top: 4px;
        font-size: 12px;
        color: rgba(255,255,255,0.62);
    }

    .friends-user-status.online {
        color: #22c55e;
    }

    .friends-user-status.offline {
        color: #94a3b8;
    }

    .friends-user-action form {
        margin: 0;
    }

    .friends-user-btn {
        min-height: 40px;
        padding: 0 14px;
        border: 0;
        border-radius: 12px;
        background: linear-gradient(135deg, #22c55e, #16a34a);
        color: #fff;
        font-size: 12px;
        font-weight: 800;
    }

    .friends-search-empty {
        padding: 22px;
        border-radius: 18px;
        background: rgba(255,255,255,0.03);
        border: 1px dashed rgba(255,255,255,0.08);
        color: rgba(255,255,255,0.58);
        text-align: center;
        font-size: 13px;
    }

    @media (max-width: 768px) {
        .friends-search-hero,
        .friends-search-body {
            padding: 18px;
        }

        .friends-search-form,
        .friends-search-grid {
            grid-template-columns: 1fr;
        }
    }


/* ==========================================================
   GIGAX ARENA - DASHBOARD COMPACT PATCH
   Visual mais compacto mantendo a estrutura/rotas/variáveis.
   ========================================================== */
.friends-page,.friends-search-page,.private-chat-page{padding:12px 0!important;}
.friends-shell{gap:14px!important;grid-template-columns:minmax(0,1.75fr) minmax(280px,.82fr)!important;}
.friends-main,.friends-sidebar{gap:14px!important;}
.friends-card,.friends-search-card,.private-chat-card{border-radius:16px!important;box-shadow:0 10px 28px rgba(0,0,0,.24)!important;}
.friends-hero{padding:18px 20px!important;}
.friends-title,.friends-search-title{font-size:22px!important;margin-bottom:4px!important;}
.friends-subtitle,.friends-section-text,.friends-search-subtitle,.private-chat-side-text{font-size:12px!important;line-height:1.35!important;}
.friends-hero-actions{gap:8px!important;}
.friends-btn{min-height:34px!important;padding:0 12px!important;border-radius:11px!important;font-size:13px!important;}
.friends-stats{gap:9px!important;margin-top:14px!important;}
.friends-stat{padding:11px 13px!important;border-radius:13px!important;}
.friends-stat-label,.friends-mini-label{font-size:10px!important;}
.friends-stat-value{font-size:22px!important;margin-top:4px!important;}
.friends-section,.friends-search-box{padding:15px!important;}
.friends-section-head{margin-bottom:10px!important;gap:10px!important;}
.friends-section-title{font-size:16px!important;}
.friends-toolbar{gap:8px!important;margin-bottom:10px!important;}
.friends-realtime-search,.friends-search-input{height:38px!important;border-radius:11px!important;font-size:12px!important;}
.friends-chip{min-height:38px!important;padding:0 11px!important;border-radius:11px!important;font-size:11px!important;}
.friends-list,.invite-list{gap:8px!important;}
.friend-row,.invite-row{padding:9px 11px!important;border-radius:13px!important;gap:10px!important;}
.friend-main,.invite-main{gap:10px!important;}
.friend-avatar-wrap{width:40px!important;height:40px!important;}
.invite-avatar-wrap{width:36px!important;height:36px!important;}
.friend-name,.invite-name{font-size:13px!important;}
.friend-subline,.invite-text{font-size:11px!important;margin-top:2px!important;line-height:1.25!important;}
.friend-actions,.invite-actions{gap:7px!important;}
.friend-action-btn,.invite-btn{min-height:32px!important;padding:0 10px!important;border-radius:10px!important;font-size:11px!important;}
.friends-search-form{gap:8px!important;}
.friends-search-button{height:38px!important;min-width:96px!important;border-radius:11px!important;font-size:12px!important;}
.friends-mini-grid{gap:8px!important;margin-top:10px!important;}
.friends-mini-box{padding:10px!important;border-radius:12px!important;}
.friends-mini-value{font-size:16px!important;margin-top:3px!important;}
.friends-empty{padding:12px!important;border-radius:13px!important;font-size:12px!important;}
.chat-drawer{top:10px!important;right:10px!important;height:calc(100vh - 20px)!important;border-radius:16px!important;}
.chat-drawer-header{padding:10px!important;gap:8px!important;}
.chat-drawer-close{width:34px!important;height:34px!important;border-radius:10px!important;}
.chat-drawer-avatar-wrap{width:36px!important;height:36px!important;}
.chat-drawer-name{font-size:14px!important;}
.chat-drawer-body{padding:10px!important;gap:8px!important;}
.chat-bubble{padding:8px 10px!important;font-size:12px!important;border-radius:12px!important;}
.chat-drawer-compose{padding:9px!important;gap:7px!important;}
.chat-drawer-input{height:38px!important;border-radius:11px!important;font-size:12px!important;}
.chat-drawer-send{width:40px!important;height:40px!important;border-radius:11px!important;}
.private-chat-shell{max-width:1180px!important;grid-template-columns:220px minmax(0,1fr)!important;gap:12px!important;}
.private-chat-sidebar{padding:11px!important;}
.private-chat-side-title{font-size:15px!important;margin-bottom:4px!important;}
.private-chat-side-list{gap:6px!important;}
.private-chat-friend{padding:8px 9px!important;border-radius:12px!important;gap:8px!important;}
.private-chat-avatar-wrap{width:34px!important;height:34px!important;}
.private-chat-friend-name{font-size:12px!important;}
.private-chat-friend-status{font-size:10px!important;margin-top:1px!important;}
.private-chat-main{height:calc(100vh - 120px)!important;max-height:720px!important;}
.private-chat-header{padding:9px 12px!important;}
.private-chat-title{font-size:14px!important;}
.private-chat-subtitle{font-size:10px!important;}
.private-chat-header-btn{min-height:30px!important;border-radius:10px!important;font-size:11px!important;padding:0 10px!important;}
.private-chat-messages{padding:10px 12px!important;gap:5px!important;}
.private-chat-bubble{padding:7px 10px!important;border-radius:12px!important;font-size:12px!important;}
.private-chat-footer{padding:8px 10px 10px!important;}
.private-chat-input-wrap{border-radius:13px!important;}
.private-chat-input{font-size:12px!important;padding:9px 0!important;}
.private-chat-send{height:38px!important;min-width:96px!important;border-radius:12px!important;font-size:12px!important;}
.friends-search-hero{padding:16px 18px!important;}
.friends-search-body{padding:16px 18px 18px!important;}
.friends-search-grid{gap:10px!important;}
.friends-user-card{padding:11px!important;border-radius:13px!important;}
.friends-user-main{gap:10px!important;}
.friends-user-avatar{width:42px!important;height:42px!important;}
.friends-user-name{font-size:13px!important;}
.friends-user-status{font-size:11px!important;margin-top:2px!important;}
.friends-user-btn{min-height:32px!important;border-radius:10px!important;font-size:11px!important;padding:0 10px!important;}
@media(max-width:1100px){.friends-shell,.private-chat-shell{grid-template-columns:1fr!important}.friends-stats{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@media(max-width:720px){.friends-toolbar,.friends-search-form,.friends-search-grid{grid-template-columns:1fr!important}.friend-row,.invite-row{grid-template-columns:1fr!important}.friend-actions,.invite-actions{justify-content:flex-start!important}.friends-stats{grid-template-columns:1fr 1fr!important}.private-chat-main{height:auto!important;min-height:520px!important}}

</style>

<div class="container friends-search-page">
    <div class="friends-search-shell">
        <div class="friends-search-card">
            <div class="friends-search-hero">
                <div>
                    <h1 class="friends-search-title">Adicionar amigo</h1>
                    <p class="friends-search-subtitle">Pesquise jogadores pelo nickname e envie convites de amizade de forma rápida.</p>
                </div>

                <a href="{{ url('/amigos') }}" class="friends-search-back">Voltar</a>
            </div>

            <div class="friends-search-body">
                <form method="GET" action="{{ url('/amigos/buscar') }}" class="friends-search-form">
                    <input type="text" name="q" class="friends-search-input" placeholder="Digite o nickname do jogador" value="{{ $term ?? '' }}">
                    <button class="friends-search-button" type="submit">Buscar</button>
                </form>

                <div class="friends-search-grid">
                    @forelse($users ?? collect() as $user)
                        <div class="friends-user-card">
                            <div class="friends-user-main">
                                <div class="friends-user-avatar-wrap">
                                    <img src="{{ $user->avatar ?? '/default-avatar.png' }}"
                                         alt="{{ $user->nickname }}"
                                         class="friends-user-avatar"
                                         onerror="this.onerror=null; this.src='/default-avatar.png';">
                                    <span class="friends-user-status-dot {{ !empty($user->is_online) ? 'online' : 'offline' }}"></span>
                                </div>

                                <div class="friends-user-meta">
                                    <div class="friends-user-name">{{ $user->nickname }}</div>
                                    <div class="friends-user-status {{ !empty($user->is_online) ? 'online' : 'offline' }}">
                                        {{ !empty($user->is_online) ? '● Online' : '● Offline' }}
                                    </div>
                                </div>
                            </div>

                            <div class="friends-user-action">
                                <form method="POST" action="{{ route('friends.send') }}">
                                    @csrf
                                    <input type="hidden" name="friend_id" value="{{ $user->id }}">
                                    <button class="friends-user-btn" type="submit">Adicionar</button>
                                </form>
                            </div>
                        </div>
                    @empty
                        <div class="friends-search-empty">
                            Nenhum jogador encontrado.
                        </div>
                    @endforelse
                </div>
            </div>
        </div>
    </div>
</div>
@endsection