@section('title', 'Estatísticas KS')
@include('admin/includes/header')
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
@section('head')
@endsection

<main class="flex-shrink-0 mt-2">
    <div class="container">

        <div class="row mb-3">
            <div class="col-md-12 d-flex align-middle">
                <div>
                    @isset($s)
                        <h4 class="mb-0">Buscando por: {{ $s }}</h4>
                    @else
                        <h4 class="mb-0">Estatísticas KS</h4>
                    @endisset
                    <small class="text-muted">Audiência registrada no painel antigo (KS)</small>
                </div>
                <div class="ms-auto">
                    <div class="input-group mb-3">
                        <input type="text" class="form-control" id="pSea" value="{{ $s }}" placeholder="Porta, Auto DJ ou identificação" autocapitalize="off">
                        <button class="btn btn-outline-secondary" type="button" id="sea">Buscar</button>
                    </div>
                </div>
            </div>
        </div>

        <div class="btn-group me-3">
            <a href="{{ route('admin.estatisticas-ks') }}"
               class="btn btn-sm {{ url()->current() == route('admin.estatisticas-ks') ? 'btn-success' : 'btn-secondary' }}">
                Todos
            </a>

            @foreach($allServers as $server)
                <a href="{{ route('admin.estatisticas-ks.servidor', [$server->id]) }}"
                   class="btn btn-sm {{ (int) $servidorAtual === (int) $server->id ? 'btn-success opacity-75' : 'btn-secondary' }}">
                    {{ strtoupper($server->name) }}
                </a>
            @endforeach
        </div>

        <hr class="mt-2 mb-2 col-5">

        @if($allStreams->count() == 0)
            <div class="py-4 text-center">Nenhuma porta encontrada com esse filtro.</div>
        @else
            <table class="table align-middle">
                <thead>
                <tr>
                    <th scope="col">Porta</th>
                    <th scope="col">Servidor</th>
                    <th scope="col">Identificação</th>
                    <th scope="col">Revenda</th>
                    <th class="pe-1 text-end" scope="col">Ação</th>
                </tr>
                </thead>
                <tbody>
                @foreach($allStreams as $stream)
                    <tr>
                        <th scope="row">{{ $stream->port }} ({{ $stream->autodj_port }})</th>
                        <td>{{ $stream->server_name ? strtoupper($stream->server_name) : 'N/A' }}</td>
                        <td>{{ $stream->streamtitle ?: '---' }}</td>
                        <td>{{ $stream->revenda ?: '---' }}</td>
                        <td class="pe-1 text-end">
                            <a href="{{ route('admin.estatisticas-ks.porta', [$stream->port]) }}" class="btn btn-success btn-sm">
                                <i class="bi bi-bar-chart-line"></i> Estatísticas
                            </a>
                        </td>
                    </tr>
                @endforeach
                </tbody>
            </table>

            {{ $allStreams->links('vendor.pagination.default') }}
        @endif
    </div>
</main>

@include('admin/includes/footer')

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>

<script>
    function buscarPorta () {
        var valor = $('#pSea').val();
        window.location = "{{ route('admin.estatisticas-ks') }}?s=" + encodeURIComponent(valor);
    }

    $('#pSea').on('keyup', function (e) {
        if (e.key === 'Enter' || e.keyCode === 13) {
            buscarPorta();
        }
    });

    $('#sea').on('click', function () {
        buscarPorta();
    });
</script>