@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">
        </div>
        <button type="submit" class="btn btn-primary mr-2">Pesquisar</button>
        <button type="button" class="btn btn-success" data-toggle="modal" data-target="#provisionModal">Provisionar ONUs</button>
    </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>
    @else
        <p>Nenhuma ONU encontrada.</p>
    @endif

    <!-- Modal de Provisionamento e Resultados SSH -->
    <div class="modal fade" id="provisionModal" tabindex="-1" aria-labelledby="provisionModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="provisionModalLabel">ONUs Não Provisionadas</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div id="loading" style="display:none;">
                        <p>Aguarde enquanto busca as ONUs não provisionadas...</p>
                    </div>
                    
                    <div id="onusList" style="display:none;">
                        <h4>ONUs Não Provisionadas:</h4>
                        <table class="table table-striped">
                            <thead>
                                <tr>
                                    <th>GPON Index</th>
                                    <th>Serial Number</th>
                                </tr>
                            </thead>
                            <tbody id="onusListItems">
                                <!-- Resultados das ONUs serão adicionados aqui -->
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    $(document).ready(function(){
        $('#provisionModal').on('shown.bs.modal', function() {
            $('#loading').show();
            $('#onusList').hide();
            $('#onusListItems').empty();

            $.ajax({
                url: '{{ route("onus.unprovisioned") }}',
                method: 'POST',
                data: {
                    _token: '{{ csrf_token() }}'
                },
                success: function(response) {
                    $('#loading').hide();
                    console.log('Response:', response); // Log para verificar a resposta
                    if(response.unprovisionedOnus && response.unprovisionedOnus.length > 0) {
                        response.unprovisionedOnus.forEach(function(onu) {
                            $('#onusListItems').append('<tr><td>' + onu.gpon_index + '</td><td>' + onu.serial_number + '</td></tr>');
                        });
                    } else {
                        $('#onusListItems').append('<tr><td colspan="2">Nenhuma ONU não provisionada encontrada.</td></tr>');
                    }
                    $('#onusList').show();
                },
                error: function(xhr, status, error) {
                    console.error('Error:', xhr.responseText); // Log para verificar erros
                    $('#loading').hide();
                    $('#onusListItems').append('<tr><td colspan="2">Ocorreu um erro ao buscar as ONUs: ' + xhr.responseText + '</td></tr>');
                    $('#onusList').show();
                }
            });
        });
    });
</script>
@endsection