@extends('layouts.app')

@section('content')
<div class="container">
    <h1>ONUs Não Provisionadas</h1>

    @if(isset($unprovisionedOnus) && count($unprovisionedOnus) > 0)
        <table class="table table-striped">
            <thead>
                <tr>
                    <th>GPON Index</th>
                    <th>Serial Number</th>
                    <th>Ações</th>
                </tr>
            </thead>
            <tbody>
                @foreach($unprovisionedOnus as $onu)
                    <tr>
                        <td>{{ $onu->gpon_index }}</td>
                        <td>{{ $onu->serial_number }}</td>
                        <td>
                            <button type="button" class="btn btn-success" data-toggle="modal" data-target="#includeModal"
                                    data-gpon="{{ $onu->gpon_index }}" data-serial="{{ $onu->serial_number }}">
                                Incluir
                            </button>
                        </td>
                    </tr>
                @endforeach
            </tbody>
        </table>
    @else
        <p>Nenhuma ONU não provisionada encontrada.</p>
    @endif
</div>

<!-- Modal -->
<!-- Modal -->
<div class="modal fade" id="includeModal" tabindex="-1" aria-labelledby="includeModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <form id="includeForm">
                @csrf
                <div class="modal-header">
                    <h5 class="modal-title" id="includeModalLabel">Incluir ONU</h5>
                    <button type="button" class="btn btn-close" data-dismiss="modal" aria-label="Fechar"></button>
                </div>
                <div class="modal-body">
                    <p>Deseja incluir a ONU abaixo?</p>
                    <p><strong>GPON Index:</strong> <span id="modal-gpon"></span></p>
                    <p><strong>Serial Number:</strong> <span id="modal-serial"></span></p>

                    <!-- PPOE Section -->
                    <div class="form-group">
                        <label for="usuario_ppoe">Usuário PPOE</label>
                        <input type="text" class="form-control" id="usuario_ppoe" name="usuario_ppoe" placeholder="Digite o usuário PPOE" required>
                    </div>
                    <div class="form-group">
                        <label for="senha_ppoe">Senha PPOE</label>
                        <input type="password" class="form-control" id="senha_ppoe" name="senha_ppoe" placeholder="Digite a senha PPOE" required>
                    </div>

                    <!-- WiFi 5G Section -->
                    <hr>
                   
                    <div class="form-group">
                        <label for="wifi_5g">Nome WiFi 5G</label>
                        <input type="text" class="form-control" id="wifi_5g" name="wifi_5g" placeholder="Digite o nome da rede WiFi 5G" required>
                    </div>
                    <div class="form-group">
                        <label for="senha_5g">Senha WiFi 5G</label>
                        <input type="password" class="form-control" id="senha_5g" name="senha_wifi_5g" placeholder="Digite a senha WiFi 5G" required>
                    </div>

                    <!-- WiFi 2.4G Section -->
                    <hr>
                    
                    <div class="form-group">
                        <label for="wifi_2_4">Nome WiFi 2.4G</label>
                        <input type="text" class="form-control" id="wifi_2_4" name="wifi_2_4" placeholder="Digite o nome da rede WiFi 2.4G" required>
                    </div>
                    <div class="form-group">
                        <label for="senha_2_4">Senha WiFi 2.4G</label>
                        <input type="password" class="form-control" id="senha_2_4" name="senha_wifi_2_4" placeholder="Digite a senha WiFi 2.4G" required>
                    </div>

                    <!-- GPON Index Section -->
                    <div class="form-group mt-3">
                        <label for="next_gpon_index">Próximo GPON Index</label>
                        <input type="text" class="form-control" id="next_gpon_index" name="next_gpon_index" readonly>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary btn-cancel" data-dismiss="modal">Cancelar</button>
                    <button type="submit" class="btn btn-primary btn-include">Incluir</button>
                </div>
            </form>
        </div>
    </div>
</div>


<!-- Tela de carregamento -->
<div id="loadingOverlay" style="display: none;">
    <div class="loading-message">
        <h3>Aguarde Foi enviado o Comando</h3>
    </div>
</div>

<!-- CSS específico para essa página -->
<style>
    #loadingOverlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 9999;
    }

    .loading-message {
        background-color: white;
        padding: 20px;
        border-radius: 8px;
        text-align: center;
        font-size: 1.5rem;
    }

    button:disabled {
        background-color: grey;
        cursor: not-allowed;
        color: white;
    }
</style>


<!-- jQuery and Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<script>
    $(document).ready(function(){
        $('#includeModal').on('show.bs.modal', function (event) {
            var button = $(event.relatedTarget); // Botão que acionou o modal
            var gpon = button.data('gpon'); // Extrai informação dos atributos data-*
            var serial = button.data('serial'); // Extrai informação dos atributos data-*

            var modal = $(this);
            modal.find('#modal-gpon').text(gpon);
            modal.find('#modal-serial').text(serial);

            // Fazer a requisição AJAX para obter a próxima posição
            $.ajax({
                url: '{{ route("onus.nextPosition") }}',
                method: 'GET',
                data: { gpon_index: gpon },
                success: function(response) {
                    var nextGponIndex = response.next_position.replace(/\//g, '-');
                    modal.find('#next_gpon_index').val(nextGponIndex);
                },
                error: function(xhr, status, error) {
                    console.error('Erro ao obter a próxima posição:', error);
                }
            });
        });

        $('#includeForm').on('submit', function(e) {
            e.preventDefault(); // Impede o envio normal do formulário

            var button = $(this).find('button[type="submit"]');
            button.prop('disabled', true); // Desativa o botão

            // Exibe o overlay de "Aguarde..."
            $('#loadingOverlay').show();

            var gpon = $('#modal-gpon').text();
            var serial = $('#modal-serial').text();
            var usuario_ppoe = $('#usuario_ppoe').val();
            var senha_ppoe = $('#senha_ppoe').val();
            var wifi_5g = $('#wifi_5g').val();
            var senha_5g = $('#senha_5g').val();
            var wifi_2_4 = $('#wifi_2_4').val();
            var senha_2_4 = $('#senha_2_4').val();
            var next_gpon_index = $('#next_gpon_index').val();

            $.ajax({
                url: '{{ route("onus.includeUnprovisioned") }}',
                method: 'POST',
                data: {
                    _token: '{{ csrf_token() }}',
                    gpon_index: gpon,
                    serial_number: serial,
                    usuario_ppoe: usuario_ppoe,
                    senha_ppoe: senha_ppoe,
                    wifi_5g: wifi_5g,
                    senha_wifi_5g: senha_5g,
                    wifi_2_4: wifi_2_4,
                    senha_wifi_2_4: senha_2_4,
                    next_gpon_index: next_gpon_index
                },
                success: function(response) {
                    alert('ONU provisionada com sucesso!');
                    $('#includeModal').modal('hide');
                    location.reload(); // Atualiza a página
                },
                error: function(xhr, status, error) {
                    alert('Erro ao provisionar a ONU: ' + xhr.responseText);
                    $('#includeModal').modal('hide');
                    location.reload(); // Atualiza a página mesmo em caso de erro
                }
            });
        });

        $('#includeModal').on('hidden.bs.modal', function () {
            location.reload(); // Recarrega a página quando o modal é fechado
        });
    });
</script>
@endsection