@extends('layouts.app')

@section('content')
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<!-- Bootstrap JS -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<div class="container">
    <h1>Pesquisar ONUs Cadastradas</h1>

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

    <!-- Tabela de ONUs -->
    @if(isset($onus) && count($onus) > 0)
        <div class="table-responsive">
            <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>
                        <th>Ações</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>
                        <td>
                            <div class="d-flex flex-wrap">
                                <button type="button" class="btn btn-primary btn-sm btn-edit mr-2 mb-2" data-id="{{ $onu->id }}">Editar</button>
                                <button type="button" class="btn btn-warning btn-sm btn-restart mr-2 mb-2" data-id="{{ $onu->id }}">Reiniciar</button>
                                <form action="{{ route('onus.delete', $onu->id) }}" method="POST" style="display:inline;">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" class="btn btn-danger btn-sm mb-2" onclick="return confirm('Tem certeza que deseja deletar esta ONU?')">Deletar</button>
                                </form>
                            </div>
                        </td>
                    </tr>
                @endforeach
                </tbody>
            </table>
        </div>
    @else
        <p>Nenhuma ONU encontrada.</p>
    @endif
</div>

<!-- Modal de Edição -->
<div class="modal fade" id="editModal" tabindex="-1" aria-labelledby="editModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="editModalLabel">Configurações da ONU - <span id="modal-ont"></span></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 class="d-grid gap-2">
                    <button type="button" class="btn btn-info btn-block" id="btn-wifi24">Configurar Wi-Fi 2.4 GHz</button>
                    <button type="button" class="btn btn-info btn-block" id="btn-wifi5g">Configurar Wi-Fi 5 GHz</button>
                    <button type="button" class="btn btn-info btn-block" id="btn-ppoe">Configurar PPOE</button>
                    <button type="button" class="btn btn-info btn-block" id="btn-dns">Configurar DNS</button>
                    <button type="button" class="btn btn-info btn-block" id="btn-admin">Configurar Senha de Acesso</button>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Fechar</button>
            </div>
        </div>
    </div>
</div>

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

        // Variável global para armazenar o ID da ONU atual
        var currentOnuId = null;

        // Manipula o clique no botão de editar
        $(document).on('click', '.btn-edit', function() {
            currentOnuId = $(this).data('id');
            var modal = $('#editModal');

            // Faz a requisição AJAX para obter os dados da ONU
            $.ajax({
                url: '/onus/' + currentOnuId + '/edit',
                method: 'GET',
                success: function(response) {
                    console.log('Dados da ONU:', response);
                    modal.find('#modal-ont').text(response.ont); // Exibe o GPON Index no título
                    // Abre o modal de edição
                    modal.modal('show');
                },
                error: function(xhr, status, error) {
                    console.error('Erro ao obter os dados da ONU:', error);
                    alert('Erro ao obter os dados da ONU.');
                }
            });
        });

        // Manipula o clique nos botões dentro do modal
        $('#btn-wifi24').click(function() {
            var nomeWifi = prompt("Insira o nome do Wi-Fi 2.4 GHz:");
            var senhaWifi = prompt("Insira a senha do Wi-Fi 2.4 GHz:");
            if (nomeWifi && senhaWifi) {
                $.ajax({
                    url: '/onus/' + currentOnuId + '/configure-wifi24',
                    method: 'POST',
                    data: {
                        _token: '{{ csrf_token() }}',
                        nome_wifi: nomeWifi,
                        senha: senhaWifi
                    },
                    success: function(response) {
                        alert('Wi-Fi 2.4 GHz configurado com sucesso!');
                    },
                    error: function(xhr, status, error) {
                        console.error('Erro ao configurar o Wi-Fi 2.4 GHz:', error);
                        alert('Erro ao configurar o Wi-Fi 2.4 GHz.');
                    }
                });
            }
        });

        $('#btn-wifi5g').click(function() {
            var nomeWifi5G = prompt("Insira o nome do Wi-Fi 5 GHz:");
            var senhaWifi5G = prompt("Insira a senha do Wi-Fi 5 GHz:");
            if (nomeWifi5G && senhaWifi5G) {
                $.ajax({
                    url: '/onus/' + currentOnuId + '/configure-wifi5g',
                    method: 'POST',
                    data: {
                        _token: '{{ csrf_token() }}',
                        nome_wifi_5g: nomeWifi5G,
                        senha_5g: senhaWifi5G
                    },
                    success: function(response) {
                        alert('Wi-Fi 5 GHz configurado com sucesso!');
                    },
                    error: function(xhr, status, error) {
                        console.error('Erro ao configurar o Wi-Fi 5 GHz:', error);
                        alert('Erro ao configurar o Wi-Fi 5 GHz.');
                    }
                });
            }
        });

        $('#btn-ppoe').click(function() {
            var usuarioPpoe = prompt("Insira o usuário PPOE:");
            var senhaPpoe = prompt("Insira a senha PPOE:");
            if (usuarioPpoe && senhaPpoe) {
                $.ajax({
                    url: '/onus/' + currentOnuId + '/configure-ppoe',
                    method: 'POST',
                    data: {
                        _token: '{{ csrf_token() }}',
                        usuario: usuarioPpoe,
                        senha: senhaPpoe
                    },
                    success: function(response) {
                        alert('PPOE configurado com sucesso!');
                    },
                    error: function(xhr, status, error) {
                        console.error('Erro ao configurar o PPOE:', error);
                        alert('Erro ao configurar o PPOE.');
                    }
                });
            }
        });

        $('#btn-dns').click(function() {
            var dns1 = prompt("Insira o DNS 1:");
            var dns2 = prompt("Insira o DNS 2:");
            if (dns1 && dns2) {
                $.ajax({
                    url: '/onus/' + currentOnuId + '/configure-dns',
                    method: 'POST',
                    data: {
                        _token: '{{ csrf_token() }}',
                        dns1: dns1,
                        dns2: dns2
                    },
                    success: function(response) {
                        alert('DNS configurado com sucesso!');
                    },
                    error: function(xhr, status, error) {
                        console.error('Erro ao configurar o DNS:', error);
                        alert('Erro ao configurar o DNS.');
                    }
                });
            }
        });

        $('#btn-admin').click(function() {
            var senhaAdmin = prompt("Insira a senha do Admin GPON:");
            if (senhaAdmin) {
                $.ajax({
                    url: '/onus/' + currentOnuId + '/configure-admin-password',
                    method: 'POST',
                    data: {
                        _token: '{{ csrf_token() }}',
                        senha_admin: senhaAdmin
                    },
                    success: function(response) {
                        alert('Senha do Admin GPON configurada com sucesso!');
                    },
                    error: function(xhr, status, error) {
                        console.error('Erro ao configurar a senha do Admin GPON:', error);
                        alert('Erro ao configurar a senha do Admin GPON.');
                    }
                });
            }
        });

        // Manipula o clique no botão de reiniciar
        $(document).on('click', '.btn-restart', function() {
            var onuId = $(this).data('id');
            if (confirm('Tem certeza que deseja reiniciar esta ONU?')) {
                $.ajax({
                    url: '/onus/' + onuId + '/restart',
                    method: 'POST',
                    data: {
                        _token: '{{ csrf_token() }}'
                    },
                    success: function(response) {
                        alert('ONU reiniciada com sucesso!');
                    },
                    error: function(xhr, status, error) {
                        console.error('Erro ao reiniciar a ONU:', error);
                        alert('Erro ao reiniciar a ONU.');
                    }
                });
            }
        });

    });
</script>

@endsection