@extends('admin.layouts.app')

@section('title', 'Chat - Backoffice')

@push('styles')
    <style>
        .main:has(.chat-page){
            max-width: none;
            margin: 0;
            padding: 0;
        }
        .chat-page{
            min-height: calc(100dvh - var(--top-h));
            background:#f4f5f7;
        }
        .chat-topbar{
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:18px;
            padding:18px 24px;
            border-bottom:1px solid rgba(0,0,0,.08);
            background:#fff;
        }
        .chat-topbar__main{
            display:flex;
            align-items:center;
            gap:14px;
            min-width:0;
        }
        .chat-topbar__mark{
            width:44px;
            height:44px;
            border-radius:8px;
            display:flex;
            align-items:center;
            justify-content:center;
            background:#111827;
            color:#fff;
            font-weight:900;
            font-size:18px;
            flex:0 0 auto;
        }
        .chat-topbar__kicker{
            font-size:11px;
            font-weight:850;
            color:#6b7280;
            letter-spacing:.08em;
            text-transform:uppercase;
        }
        .chat-topbar__title{
            margin-top:2px;
            font-size:22px;
            font-weight:900;
            color:#111827;
            line-height:1.1;
            white-space:nowrap;
            overflow:hidden;
            text-overflow:ellipsis;
        }
        .chat-topbar__meta{
            margin-top:5px;
            color:#6b7280;
            font-size:12px;
            font-weight:700;
        }
        .chat-club-switcher{
            min-width:300px;
        }
        .chat-club-switcher label{
            display:block;
            margin-bottom:6px;
            color:#374151;
            font-size:11px;
            font-weight:850;
            text-transform:uppercase;
            letter-spacing:.06em;
        }
        .chat-club-switcher select{
            width:100%;
            height:42px;
            border-radius:8px;
            border:1px solid rgba(0,0,0,.14);
            background:#fff;
            color:#111827;
            padding:0 12px;
            font-weight:750;
        }
        .chat-content{
            padding:18px 24px 24px;
        }
        @media (max-width: 780px){
            .chat-topbar{
                align-items:stretch;
                flex-direction:column;
                padding:16px;
            }
            .chat-club-switcher{
                min-width:0;
                width:100%;
            }
            .chat-content{
                padding:12px;
            }
        }
    </style>
@endpush

@section('content')
    <div class="chat-page">
        <div class="chat-topbar">
            <div class="chat-topbar__main">
                <div class="chat-topbar__mark">
                    {{ strtoupper(mb_substr($club->name ?? 'C', 0, 1)) }}
                </div>
                <div style="min-width:0;">
                    <div class="chat-topbar__kicker">Clube ativo</div>
                    <div class="chat-topbar__title">{{ $club->name }}</div>
                    <div class="chat-topbar__meta">Chat interno, chat geral e grupos deste clube.</div>
                </div>
            </div>

            @if(($chatClubs ?? collect())->count() > 1)
                <form method="GET" action="{{ route('admin.chat.index') }}" class="chat-club-switcher">
                    <label for="chatClubSelect">Trocar clube</label>
                    <select id="chatClubSelect" name="club_id" onchange="this.form.submit()">
                        @foreach($chatClubs as $chatClub)
                            <option value="{{ $chatClub->id }}" {{ (int)$chatClub->id === (int)$club->id ? 'selected' : '' }}>
                                {{ $chatClub->name }}
                            </option>
                        @endforeach
                    </select>
                </form>
            @endif
        </div>

        <div class="chat-content">
            @include('admin.clubs._chat', [
                'club' => $club,
                'standaloneChat' => true,
            ])
        </div>
    </div>
@endsection