@extends('layouts.tropa', ['title' => 'Tropa do FiniN | Grupos', 'page' => 'admin-grupos'])

@section('content')
    <main class="screen screen-admin">
        <section class="home-hero admin-hero">
            <div class="home-brand admin-brand">
                <img src="{{ asset('images/tropa-do-finin-logo.png') }}" alt="Logo Tropa do FiniN">
                <div>
                    <span class="eyebrow">Gerenciar grupos</span>
                    <h1>Grupos da tropa</h1>
                    <p id="admin-subtitle">
                        Crie um grupo ou abra um grupo existente para cadastrar as peladas.
                    </p>
                </div>
            </div>

            <div class="hero-actions">
                <a href="{{ route('admin') }}" class="secondary-button">Voltar ao admin</a>
                <a href="{{ route('home') }}" class="ghost-link">Area dos peladeiros</a>
                <form method="POST" action="{{ route('logout') }}" class="logout-form">
                    @csrf
                    <button type="submit" class="ghost-button">Sair</button>
                </form>
            </div>
        </section>

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

        @if ($errors->any())
            <div class="form-feedback form-feedback-box">
                {{ $errors->first() }}
            </div>
        @endif

        <section class="admin-grid grupos-admin-grid">
            <article class="dashboard-card admin-panel">
                <div class="card-heading">
                    <div>
                        <span class="card-label">Novo grupo</span>
                        <h2>Criar grupo</h2>
                    </div>
                </div>

                <form method="POST" action="{{ route('admin.grupos.store') }}" class="admin-form">
                    @csrf

                    <div class="form-grid">
                        <label class="input-group input-group-full">
                            <span>Nome do grupo</span>
                            <input type="text" name="nome" value="{{ old('nome') }}" placeholder="Tropa de domingo">
                        </label>

                        <label class="input-group input-group-full">
                            <span>Descricao</span>
                            <textarea name="descricao" rows="4" placeholder="Observacoes do grupo">{{ old('descricao') }}</textarea>
                        </label>
                    </div>

                    <div class="form-actions">
                        <button type="submit" class="primary-button">Salvar grupo</button>
                    </div>
                </form>
            </article>

            <article class="dashboard-card admin-panel">
                <div class="card-heading">
                    <div>
                        <span class="card-label">Meus grupos</span>
                        <h2>Grupos criados</h2>
                    </div>
                </div>

                @if ($grupos->isEmpty())
                    <div class="admin-empty">Nenhum grupo criado ainda.</div>
                @else
                    <div class="grupo-card-list">
                        @foreach ($grupos as $grupo)
                            <a href="{{ route('admin.grupos.show', $grupo) }}" class="grupo-card">
                                <div>
                                    <strong>{{ $grupo->nome }}</strong>
                                    <p>{{ $grupo->descricao ?: 'Sem descricao informada.' }}</p>
                                </div>
                                <div class="grupo-card-counters">
                                    <span class="status-badge">{{ $grupo->peladeiros->count() }} peladeiro(s)</span>
                                    <span class="status-badge">{{ $grupo->peladas->count() }} pelada(s)</span>
                                </div>
                            </a>
                        @endforeach
                    </div>
                @endif
            </article>
        </section>
    </main>
@endsection