@extends('layouts.tropa', ['title' => 'Tropa do FiniN | '.$grupo->nome, 'page' => 'admin-grupo-detalhe'])

@section('content')
    @php
        $modalComErro = old('_modal');
        $modalInicial = $modalComErro ?: (request()->query('pelada') && $peladaSelecionada ? 'pelada-modal-'.$peladaSelecionada->id : null);
        $opcoesJogadores = [];
        $opcoesFormacoes = [];

        foreach ($catalogoFormacoes as $tipo => $configuracao) {
            foreach ($configuracao['jogadores'] as $total => $formacoes) {
                $opcoesJogadores[] = (int) $total;

                foreach ($formacoes as $formacao) {
                    $opcoesFormacoes[] = $formacao;
                }
            }
        }

        $opcoesJogadores = array_values(array_unique($opcoesJogadores));
        sort($opcoesJogadores);
        $opcoesFormacoes = array_values(array_unique($opcoesFormacoes));
        sort($opcoesFormacoes);

        $oldCreateModal = $modalComErro === 'create-pelada-modal';
        $createTipoCampo = $oldCreateModal ? old('tipo_campo', 'society') : 'society';
        $createJogadoresPorTime = $oldCreateModal ? old('jogadores_por_time', 7) : 7;
        $createFormacao = $oldCreateModal ? old('formacao', '2-3-1') : '2-3-1';
    @endphp

    <main class="screen screen-admin" data-initial-modal="{{ $modalInicial }}">
        <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">Grupo aberto</span>
                    <h1>{{ $grupo->nome }}</h1>
                    <p id="admin-subtitle">
                        Cadastre as peladas do grupo e acompanhe os peladeiros confirmados.
                    </p>
                </div>
            </div>

            <div class="hero-actions">
                <button type="button" class="primary-button" data-modal-target="create-pelada-modal">Cadastrar pelada</button>
                <a href="{{ route('admin.grupos') }}" class="secondary-button">Voltar aos grupos</a>
                <a href="{{ route('admin') }}" class="ghost-link">Painel admin</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-overview grupo-detail-overview">
            <article class="dashboard-card stat-card">
                <span class="card-label">Peladeiros</span>
                <strong>{{ $grupo->peladeiros->count() }}</strong>
                <p>Vinculados ao grupo.</p>
            </article>

            <article class="dashboard-card stat-card">
                <span class="card-label">Peladas</span>
                <strong>{{ $grupo->peladas->count() }}</strong>
                <p>Cadastradas neste grupo.</p>
            </article>

            <article class="dashboard-card stat-card">
                <span class="card-label">Confirmados</span>
                <strong>{{ $peladaSelecionada ? $peladaSelecionada->confirmados->count() : 0 }}</strong>
                <p>Na pelada selecionada.</p>
            </article>
        </section>

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

                <form method="POST" action="{{ route('admin.grupos.update', $grupo) }}" class="admin-form">
                    @csrf
                    @method('PUT')

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

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

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

                <form method="POST" action="{{ route('admin.grupos.destroy', $grupo) }}" onsubmit="return confirm('Excluir este grupo?')">
                    @csrf
                    @method('DELETE')
                    <button type="submit" class="ghost-button danger-button">Excluir grupo</button>
                </form>
            </article>

            <article class="dashboard-card admin-panel">
                <div class="card-heading">
                    <div>
                        <span class="card-label">Peladeiros do grupo</span>
                        <h2>Vinculados</h2>
                    </div>
                </div>

                @php
                    $idsVinculados = $grupo->peladeiros->pluck('id')->all();
                    $peladeirosDisponiveis = $peladeiros->reject(function ($peladeiro) use ($idsVinculados) {
                        return in_array($peladeiro->id, $idsVinculados);
                    });
                @endphp

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

                    <div class="form-grid">
                        <label class="input-group input-group-full">
                            <span>Peladeiro</span>
                            <select name="peladeiro_id">
                                <option value="">Escolha um peladeiro</option>
                                @foreach ($peladeirosDisponiveis as $peladeiro)
                                    <option value="{{ $peladeiro->id }}">{{ $peladeiro->nome }}</option>
                                @endforeach
                            </select>
                        </label>
                    </div>

                    <div class="form-actions">
                        <button type="submit" class="primary-button" {{ $peladeirosDisponiveis->isEmpty() ? 'disabled' : '' }}>Vincular peladeiro</button>
                    </div>
                </form>

                @if ($grupo->peladeiros->isEmpty())
                    <div class="admin-empty">Nenhum peladeiro vinculado ao grupo.</div>
                @else
                    <div class="grupo-members-grid compact-members-grid">
                        @foreach ($grupo->peladeiros->sortBy('nome') as $peladeiro)
                            <article class="grupo-member-card">
                                <div class="admin-player-cell">
                                    <span
                                        class="avatar-preview admin-avatar"
                                        @if ($peladeiro->foto) style="background-image: url('{{ $peladeiro->foto }}')" @endif
                                    >
                                        @unless ($peladeiro->foto)
                                            {{ collect(explode(' ', trim($peladeiro->nome)))->filter()->take(2)->map(function ($parte) { return strtoupper(substr($parte, 0, 1)); })->implode('') ?: 'TF' }}
                                        @endunless
                                    </span>
                                    <div>
                                        <strong>{{ $peladeiro->nome }}</strong>
                                        <span>{{ $peladeiro->posicoes_preferidas[0] ?? 'Sem posicao definida' }}</span>
                                    </div>
                                </div>

                                <form method="POST" action="{{ route('admin.grupos.peladeiros.destroy', [$grupo, $peladeiro]) }}">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" class="action-chip danger">Remover</button>
                                </form>
                            </article>
                        @endforeach
                    </div>
                @endif
            </article>

            <article class="dashboard-card admin-panel admin-panel-wide">
                <div class="card-heading card-heading-split">
                    <div>
                        <span class="card-label">Peladas do grupo</span>
                        <h2>Selecionar pelada</h2>
                    </div>
                    <button type="button" class="primary-button" data-modal-target="create-pelada-modal">Cadastrar pelada</button>
                </div>

                @if ($grupo->peladas->isEmpty())
                    <div class="admin-empty">Nenhuma pelada cadastrada neste grupo.</div>
                @else
                    <div class="pelada-card-list">
                        @foreach ($grupo->peladas as $pelada)
                            <a
                                href="{{ route('admin.grupos.show', ['grupo' => $grupo->id, 'pelada' => $pelada->id]) }}"
                                class="pelada-card {{ $peladaSelecionada && $peladaSelecionada->id === $pelada->id ? 'is-selected' : '' }}"
                                data-modal-target="pelada-modal-{{ $pelada->id }}"
                            >
                                <div>
                                    <strong>{{ $pelada->nome }}</strong>
                                    <p>
                                        {{ $pelada->data_pelada ? $pelada->data_pelada->format('d/m/Y') : 'Sem data' }}
                                        @if ($pelada->hora_pelada)
                                            as {{ substr($pelada->hora_pelada, 0, 5) }}
                                        @endif
                                        @if ($pelada->local)
                                            - {{ $pelada->local }}
                                        @endif
                                    </p>
                                </div>
                                <div class="grupo-card-counters">
                                    <span class="status-badge">{{ $pelada->statusFormatado() }}</span>
                                    <span class="status-badge">{{ $pelada->tipoCampoFormatado() }} {{ $pelada->jogadores_por_time }}x{{ $pelada->jogadores_por_time }}</span>
                                    <span class="status-badge">{{ $pelada->confirmados->count() }} confirmado(s)</span>
                                </div>
                            </a>
                        @endforeach
                    </div>
                @endif
            </article>
        </section>
    </main>

    <div class="app-modal" id="create-pelada-modal" role="dialog" aria-modal="true" aria-labelledby="create-pelada-title" hidden>
        <button type="button" class="modal-backdrop" data-modal-close aria-label="Fechar popup"></button>
        <section class="modal-panel pelada-modal-panel" tabindex="-1">
            <div class="modal-heading">
                <div>
                    <span class="card-label">Nova pelada</span>
                    <h2 id="create-pelada-title">Cadastrar pelada</h2>
                </div>
                <button type="button" class="modal-close" data-modal-close aria-label="Fechar popup">Fechar</button>
            </div>

            <form method="POST" action="{{ route('admin.grupos.peladas.store', $grupo) }}" class="admin-form pelada-config-form">
                @csrf
                <input type="hidden" name="_modal" value="create-pelada-modal">

                <div class="form-grid">
                    <label class="input-group input-group-full">
                        <span>Nome da pelada</span>
                        <input type="text" name="nome" value="{{ $oldCreateModal ? old('nome') : '' }}" placeholder="Domingao da Tropa">
                    </label>

                    <label class="input-group">
                        <span>Data</span>
                        <input type="date" name="data_pelada" value="{{ $oldCreateModal ? old('data_pelada') : '' }}">
                    </label>

                    <label class="input-group">
                        <span>Hora</span>
                        <input type="time" name="hora_pelada" value="{{ $oldCreateModal ? old('hora_pelada') : '' }}">
                    </label>

                    <label class="input-group">
                        <span>Local</span>
                        <input type="text" name="local" value="{{ $oldCreateModal ? old('local') : '' }}" placeholder="Arena da resenha">
                    </label>

                    <label class="input-group">
                        <span>Status</span>
                        <select name="status">
                            <option value="aberta" {{ ($oldCreateModal ? old('status', 'aberta') : 'aberta') === 'aberta' ? 'selected' : '' }}>Aberta</option>
                            <option value="fechada" {{ ($oldCreateModal ? old('status') : '') === 'fechada' ? 'selected' : '' }}>Fechada</option>
                            <option value="cancelada" {{ ($oldCreateModal ? old('status') : '') === 'cancelada' ? 'selected' : '' }}>Cancelada</option>
                        </select>
                    </label>

                    <label class="input-group">
                        <span>Tipo de campo</span>
                        <select name="tipo_campo" data-field-type>
                            @foreach ($catalogoFormacoes as $tipo => $configuracao)
                                <option value="{{ $tipo }}" {{ $createTipoCampo === $tipo ? 'selected' : '' }}>{{ $configuracao['label'] }}</option>
                            @endforeach
                        </select>
                    </label>

                    <label class="input-group">
                        <span>Jogadores por time</span>
                        <select name="jogadores_por_time" data-field-players>
                            @foreach ($opcoesJogadores as $total)
                                <option value="{{ $total }}" {{ (int) $createJogadoresPorTime === (int) $total ? 'selected' : '' }}>{{ $total }} por time</option>
                            @endforeach
                        </select>
                    </label>

                    <label class="input-group">
                        <span>Formacao</span>
                        <select name="formacao" data-field-formation>
                            @foreach ($opcoesFormacoes as $formacao)
                                <option value="{{ $formacao }}" {{ $createFormacao === $formacao ? 'selected' : '' }}>{{ $formacao }}</option>
                            @endforeach
                        </select>
                    </label>

                    <label class="input-group input-group-full">
                        <span>Descricao</span>
                        <textarea name="descricao" rows="3" placeholder="Observacoes da pelada">{{ $oldCreateModal ? old('descricao') : '' }}</textarea>
                    </label>
                </div>

                <div class="field-preview" data-field-preview data-type="{{ $createTipoCampo }}" data-players="{{ $createJogadoresPorTime }}" data-formation="{{ $createFormacao }}" aria-label="Visual do campo"></div>

                <div class="form-actions">
                    <button type="submit" class="primary-button">Salvar pelada</button>
                </div>
            </form>
        </section>
    </div>

    @foreach ($grupo->peladas as $pelada)
        @php
            $modalId = 'pelada-modal-'.$pelada->id;
            $oldEditModal = $modalComErro === $modalId;
            $idsConfirmados = $pelada->confirmados->pluck('id')->all();
            $peladeirosParaConfirmar = $grupo->peladeiros->reject(function ($peladeiro) use ($idsConfirmados) {
                return in_array($peladeiro->id, $idsConfirmados);
            });
            $editTipoCampo = $oldEditModal ? old('tipo_campo', $pelada->tipo_campo ?: 'society') : ($pelada->tipo_campo ?: 'society');
            $editJogadoresPorTime = $oldEditModal ? old('jogadores_por_time', $pelada->jogadores_por_time ?: 7) : ($pelada->jogadores_por_time ?: 7);
            $editFormacao = $oldEditModal ? old('formacao', $pelada->formacao ?: '2-3-1') : ($pelada->formacao ?: '2-3-1');
        @endphp

        <div class="app-modal" id="{{ $modalId }}" role="dialog" aria-modal="true" aria-labelledby="{{ $modalId }}-title" hidden>
            <button type="button" class="modal-backdrop" data-modal-close aria-label="Fechar popup"></button>
            <section class="modal-panel pelada-modal-panel" tabindex="-1">
                <div class="modal-heading">
                    <div>
                        <span class="card-label">Pelada selecionada</span>
                        <h2 id="{{ $modalId }}-title">{{ $pelada->nome }}</h2>
                    </div>
                    <button type="button" class="modal-close" data-modal-close aria-label="Fechar popup">Fechar</button>
                </div>

                <div class="pelada-modal-grid">
                    <section class="pelada-summary-panel">
                        <div class="pelada-detail-grid">
                            <article>
                                <span>Status</span>
                                <strong>{{ $pelada->statusFormatado() }}</strong>
                            </article>
                            <article>
                                <span>Data</span>
                                <strong>{{ $pelada->data_pelada ? $pelada->data_pelada->format('d/m/Y') : 'Sem data' }}</strong>
                            </article>
                            <article>
                                <span>Hora</span>
                                <strong>{{ $pelada->hora_pelada ? substr($pelada->hora_pelada, 0, 5) : 'Sem hora' }}</strong>
                            </article>
                            <article>
                                <span>Local</span>
                                <strong>{{ $pelada->local ?: 'Sem local' }}</strong>
                            </article>
                            <article>
                                <span>Campo</span>
                                <strong>{{ $pelada->tipoCampoFormatado() }} {{ $pelada->jogadores_por_time }}x{{ $pelada->jogadores_por_time }}</strong>
                            </article>
                            <article>
                                <span>Formacao</span>
                                <strong>{{ $pelada->formacao }}</strong>
                            </article>
                        </div>

                        @if ($pelada->descricao)
                            <p class="pelada-description">{{ $pelada->descricao }}</p>
                        @endif

                        <div class="field-preview" data-field-preview data-type="{{ $pelada->tipo_campo ?: 'society' }}" data-players="{{ $pelada->jogadores_por_time ?: 7 }}" data-formation="{{ $pelada->formacao ?: '2-3-1' }}" aria-label="Visual do campo">
                            <span class="field-goalkeeper">GOL</span>
                            @foreach ($pelada->linhasFormacao() as $indiceLinha => $quantidade)
                                <div class="field-line" style="--line-count: {{ $quantidade }}">
                                    @for ($jogador = 1; $jogador <= $quantidade; $jogador++)
                                        <span class="field-player">{{ $indiceLinha + 1 }}</span>
                                    @endfor
                                </div>
                            @endforeach
                        </div>
                    </section>

                    <section class="pelada-summary-panel">
                        <div class="card-heading">
                            <div>
                                <span class="card-label">Confirmados</span>
                                <h2>{{ $pelada->confirmados->count() }} jogador(es)</h2>
                            </div>
                        </div>

                        <form method="POST" action="{{ route('admin.grupos.peladas.confirmacoes.store', [$grupo, $pelada]) }}" class="admin-form">
                            @csrf
                            <input type="hidden" name="_modal" value="{{ $modalId }}">

                            <div class="form-grid">
                                <label class="input-group input-group-full">
                                    <span>Confirmar peladeiro</span>
                                    <select name="peladeiro_id">
                                        <option value="">Escolha um peladeiro do grupo</option>
                                        @foreach ($peladeirosParaConfirmar as $peladeiro)
                                            <option value="{{ $peladeiro->id }}" {{ (int) old('peladeiro_id') === (int) $peladeiro->id ? 'selected' : '' }}>{{ $peladeiro->nome }}</option>
                                        @endforeach
                                    </select>
                                </label>
                            </div>

                            <div class="form-actions">
                                <button type="submit" class="primary-button" {{ $peladeirosParaConfirmar->isEmpty() ? 'disabled' : '' }}>Confirmar presenca</button>
                            </div>
                        </form>

                        @if ($pelada->confirmados->isEmpty())
                            <div class="admin-empty">Nenhum peladeiro confirmou esta pelada ainda.</div>
                        @else
                            <div class="confirmados-list modal-confirmados-list">
                                @foreach ($pelada->confirmados->sortBy('nome') as $peladeiro)
                                    <article class="grupo-member-card">
                                        <div class="admin-player-cell">
                                            <span
                                                class="avatar-preview admin-avatar"
                                                @if ($peladeiro->foto) style="background-image: url('{{ $peladeiro->foto }}')" @endif
                                            >
                                                @unless ($peladeiro->foto)
                                                    {{ collect(explode(' ', trim($peladeiro->nome)))->filter()->take(2)->map(function ($parte) { return strtoupper(substr($parte, 0, 1)); })->implode('') ?: 'TF' }}
                                                @endunless
                                            </span>
                                            <div>
                                                <strong>{{ $peladeiro->nome }}</strong>
                                                <span>{{ $peladeiro->posicoes_preferidas[0] ?? 'Confirmado' }}</span>
                                            </div>
                                        </div>

                                        <form method="POST" action="{{ route('admin.grupos.peladas.confirmacoes.destroy', [$grupo, $pelada, $peladeiro]) }}">
                                            @csrf
                                            @method('DELETE')
                                            <button type="submit" class="action-chip danger">Remover</button>
                                        </form>
                                    </article>
                                @endforeach
                            </div>
                        @endif
                    </section>
                </div>

                <section class="pelada-edit-box">
                    <div class="card-heading">
                        <div>
                            <span class="card-label">Editar pelada</span>
                            <h2>Dados da pelada</h2>
                        </div>
                    </div>

                    <form method="POST" action="{{ route('admin.grupos.peladas.update', [$grupo, $pelada]) }}" class="admin-form pelada-config-form">
                        @csrf
                        @method('PUT')
                        <input type="hidden" name="_modal" value="{{ $modalId }}">

                        <div class="form-grid">
                            <label class="input-group input-group-full">
                                <span>Nome da pelada</span>
                                <input type="text" name="nome" value="{{ $oldEditModal ? old('nome', $pelada->nome) : $pelada->nome }}">
                            </label>

                            <label class="input-group">
                                <span>Data</span>
                                <input type="date" name="data_pelada" value="{{ $oldEditModal ? old('data_pelada', $pelada->data_pelada ? $pelada->data_pelada->format('Y-m-d') : '') : ($pelada->data_pelada ? $pelada->data_pelada->format('Y-m-d') : '') }}">
                            </label>

                            <label class="input-group">
                                <span>Hora</span>
                                <input type="time" name="hora_pelada" value="{{ $oldEditModal ? old('hora_pelada', $pelada->hora_pelada ? substr($pelada->hora_pelada, 0, 5) : '') : ($pelada->hora_pelada ? substr($pelada->hora_pelada, 0, 5) : '') }}">
                            </label>

                            <label class="input-group">
                                <span>Local</span>
                                <input type="text" name="local" value="{{ $oldEditModal ? old('local', $pelada->local) : $pelada->local }}">
                            </label>

                            <label class="input-group">
                                <span>Status</span>
                                <select name="status">
                                    <option value="aberta" {{ ($oldEditModal ? old('status', $pelada->status) : $pelada->status) === 'aberta' ? 'selected' : '' }}>Aberta</option>
                                    <option value="fechada" {{ ($oldEditModal ? old('status', $pelada->status) : $pelada->status) === 'fechada' ? 'selected' : '' }}>Fechada</option>
                                    <option value="cancelada" {{ ($oldEditModal ? old('status', $pelada->status) : $pelada->status) === 'cancelada' ? 'selected' : '' }}>Cancelada</option>
                                </select>
                            </label>

                            <label class="input-group">
                                <span>Tipo de campo</span>
                                <select name="tipo_campo" data-field-type>
                                    @foreach ($catalogoFormacoes as $tipo => $configuracao)
                                        <option value="{{ $tipo }}" {{ $editTipoCampo === $tipo ? 'selected' : '' }}>{{ $configuracao['label'] }}</option>
                                    @endforeach
                                </select>
                            </label>

                            <label class="input-group">
                                <span>Jogadores por time</span>
                                <select name="jogadores_por_time" data-field-players>
                                    @foreach ($opcoesJogadores as $total)
                                        <option value="{{ $total }}" {{ (int) $editJogadoresPorTime === (int) $total ? 'selected' : '' }}>{{ $total }} por time</option>
                                    @endforeach
                                </select>
                            </label>

                            <label class="input-group">
                                <span>Formacao</span>
                                <select name="formacao" data-field-formation>
                                    @foreach ($opcoesFormacoes as $formacao)
                                        <option value="{{ $formacao }}" {{ $editFormacao === $formacao ? 'selected' : '' }}>{{ $formacao }}</option>
                                    @endforeach
                                </select>
                            </label>

                            <label class="input-group input-group-full">
                                <span>Descricao</span>
                                <textarea name="descricao" rows="3">{{ $oldEditModal ? old('descricao', $pelada->descricao) : $pelada->descricao }}</textarea>
                            </label>
                        </div>

                        <div class="field-preview" data-field-preview data-type="{{ $editTipoCampo }}" data-players="{{ $editJogadoresPorTime }}" data-formation="{{ $editFormacao }}" aria-label="Visual do campo"></div>

                        <div class="form-actions">
                            <button type="submit" class="primary-button">Atualizar pelada</button>
                        </div>
                    </form>

                    <form method="POST" action="{{ route('admin.grupos.peladas.destroy', [$grupo, $pelada]) }}" onsubmit="return confirm('Excluir esta pelada?')">
                        @csrf
                        @method('DELETE')
                        <button type="submit" class="ghost-button danger-button">Excluir pelada</button>
                    </form>
                </section>
            </section>
        </div>
    @endforeach

    <script>
        window.tropaDoFininFormacoes = @json($catalogoFormacoes);
    </script>
@endsection