@extends('layouts.app')

@section('content')
<div class="container">
    <h1>Pesquisar ONUs Cadastradas</h1>

    <!-- Formulário de pesquisa -->
    <form action="{{ route('onus.pesquisa2') }}" method="GET" class="d-flex mb-4">
        <div class="form-group mr-2">
            <input type="text" name="search" class="form-control" placeholder="Pesquisar ONUs" value="{{ request('search') }}">
        </div>
        <button type="submit" class="btn btn-primary mr-2">Pesquisar</button>
        <a href="{{ route('onus.unprovisioned') }}" class="btn btn-success">Provisionar3 ONUs</a>
    </form>

    <!-- Tabela de ONUs -->
    @if(isset($onus) && count($onus) > 0)
    <table class="table table-striped">
        <thead>
            <tr>
             <!--   <th>ONT</th>!-->
                <th>Sernum</th>
                <th>Status2</th>
                <th>Level</th>
                <th>Distance</th>
                <th>Desc1</th>
            </tr>
        </thead>
        <tbody>
            @foreach($onus as $onu)
                <tr>
                    <!--<td>{{ $onu->ont }}</td>!-->
                    <td>{{ $onu->sernum }}</td>
                    <td>{{ $onu->status2 }}</td>
                    <td>{{ $onu->level }}</td>
                    <td>{{ $onu->distance }}</td>
                    <td>{{ $onu->desc1 }}</td>
                </tr>
            @endforeach
        </tbody>
    </table>

    <!-- Links de paginação -->
    <div class="pagination-links">
        {{ $onus->links('pagination::bootstrap-4') }}
    </div>
@else
    <p>Nenhuma ONU encontrada.</p>
@endif

</div>

<script>
    $(document).ready(function() {
        console.log('Documento pronto');

        // Função para carregar os dados de ONUs com AJAX
        function fetchOnus(page = 1) {
            $.ajax({
                url: '{{ route("onus.pesquisa2") }}?page=' + page,
                method: 'GET',
                data: {
                    search: $('input[name="search"]').val()
                },
                success: function(response) {
                    // Atualiza o corpo da tabela com os novos dados
                    $('tbody').empty();
                    response.onus.data.forEach(function(onu) {
                        $('tbody').append(`
                            <tr>
                                <td>${onu.ont}</td>
                                <td>${onu.sernum}</td>
                                <td>${onu.status2}</td>
                                <td>${onu.level}</td>
                                <td>${onu.distance}</td>
                                <td>${onu.desc1}</td>
                            </tr>
                        `);
                    });

                    // Atualiza os links de paginação
                    $('.pagination-links').html(response.pagination);
                },
                error: function(xhr, status, error) {
                    console.error('Erro ao obter as ONUs cadastradas:', error);
                }
            });
        }

        // Detecta o clique nos links de paginação e carrega a página correta via AJAX
        $(document).on('click', '.pagination-links a', function(e) {
            e.preventDefault();
            var page = $(this).attr('href').split('page=')[1];
            fetchOnus(page);
        });

        // Desativado temporariamente para teste
        // setInterval(fetchOnus, 300000); // 300000 ms = 5 minutos
    });
</script>
@endsection