@extends('layouts.app')

@section('title', 'Arenas — '.config('app.name'))

@section('content')
    <div class="page-head">
        <div>
            <h1 class="page-head__title">Arenas</h1>
            <p class="page-head__subtitle">Todas as arenas cadastradas.</p>
        </div>

        {{-- O "+" com menu ao passar o mouse é o mesmo padrão de Lançamentos
             (financial/reports/index): `.page-head__add` para o botão e
             `data-hover-dropdown` para a abertura por hover, já ligada
             globalmente pelo initCashFlow — não há JS nem CSS novo aqui.

             O clique CONTINUA valendo: em tela de toque não existe hover, e o
             `data-bs-toggle="dropdown"` do Bootstrap segue intacto. O hover só
             se soma a ele.

             UM ITEM SÓ, POR ORA. Um menu de uma opção é mais passo do que um
             botão direto — a escolha aqui é por consistência com o resto do
             sistema e porque o back-office deve ganhar outras criações. Se
             continuar sozinho, vale reavaliar. --}}
        <div class="dropdown" data-hover-dropdown>
            <button type="button" class="page-head__add dropdown-toggle"
                    data-bs-toggle="dropdown" aria-expanded="false"
                    aria-label="Adicionar">
                <i class="bi bi-plus-circle"></i>
            </button>

            <ul class="dropdown-menu dropdown-menu-end">
                <li>
                    <a class="dropdown-item" href="{{ route('platform.organizations.create') }}">
                        <i class="bi bi-buildings text-body-secondary me-2"></i>Adicionar arena
                    </a>
                </li>
            </ul>
        </div>
    </div>

    @include('partials.status')

    {{-- BUSCA AO VIVO, MAS O FORMULÁRIO CONTINUA SENDO UM FORMULÁRIO DE VERDADE.

         Method GET, action preenchida e botão de enviar: sem JavaScript a tela
         filtra exatamente como antes. O live-search.js apenas intercepta o
         envio, busca a mesma URL e troca o conteúdo de `#organizations-results`
         — e é ele quem esconde o botão "Filtrar", que só faz sentido quando o
         script não carregou.

         Construir isso como um campo solto disparando fetch deixaria a tela
         inutilizável se o bundle falhasse, e quebraria o link compartilhável:
         hoje a URL continua refletindo o filtro, porque o JS reescreve o
         endereço com a mesma query que o formulário produziria. --}}
    <form method="GET" action="{{ route('platform.organizations.index') }}" class="mb-3"
          data-live-search="#organizations-results">
        <div class="row g-2">
            <div class="col-md-8">
                <input type="search" name="search" value="{{ $search }}" class="form-control"
                       placeholder="Buscar por nome, documento ou e-mail" aria-label="Buscar arenas">
            </div>
            <div class="col-md-3">
                <select name="status" class="form-select" aria-label="Filtrar por situação">
                    <option value="">Todas</option>
                    <option value="ativas" @selected($status === 'ativas')>Somente ativas</option>
                    <option value="suspensas" @selected($status === 'suspensas')>Somente suspensas</option>
                </select>
            </div>
            <div class="col-md-1 d-grid" data-live-search-submit>
                <button class="btn btn-outline-secondary" type="submit">Filtrar</button>
            </div>
        </div>
    </form>

    {{-- `aria-live="polite"` porque a tabela passa a mudar sem que a página
         recarregue: sem isso, quem usa leitor de tela digitaria na busca e não
         receberia aviso nenhum de que o resultado mudou. "Polite" e não
         "assertive" para não interromper a digitação a cada tecla. --}}
    <div id="organizations-results" aria-live="polite">
        @include('platform.organizations._results')
    </div>
@endsection