@extends('layouts.app')

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

<div class="container">
    <!-- Contadores globais de todas as ONUs -->
    <div class="mb-3 d-flex align-items-center">
        <span class="badge badge-primary mr-3" style="font-size: 1em;" data-filter="">TOTAL: {{ $totalOnus }}</span>
        <span class="badge badge-success mr-3" style="font-size: 1em;" data-filter="online">ONLINE: {{ $onlineCount }}</span>
        <span class="badge badge-danger mr-3" style="font-size: 1em;" data-filter="offline">OFFLINE: {{ $offlineCount }}</span>
        <button class="btn btn-warning" style="font-size: 1em;" id="criticalFilter">CRÍTICO: {{ $criticalCount }}</button>
    </div>

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

        <div class="form-group mr-2">
            <select name="placa" id="placa" class="form-control" style="width: 100px;">
                <option value="">Placa</option>
                @for ($i = 1; $i <= 7; $i++)
                    <option value="{{ $i }}" {{ request('placa') == $i ? 'selected' : '' }}>{{ $i }}</option>
                @endfor
            </select>
        </div>

        <div class="form-group mr-2">
            <select name="pon" id="pon" class="form-control" style="width: 100px;">
                <option value="">PON</option>
                @for ($i = 1; $i <= 16; $i++)
                    <option value="{{ $i }}" {{ request('pon') == $i ? 'selected' : '' }}>{{ $i }}</option>
                @endfor
            </select>
        </div>

        <button type="submit" class="btn btn-primary mr-2">Pesquisar</button>
        <a href="{{ route('onus.unprovisioned') }}" class="btn btn-success">Provisionar ONUs</a>
    </form>

    <!-- Contadores da página atual -->
    <div class="mb-3">
        <span class="badge badge-success mr-2" style="font-size: 1em;">UP: {{ $statusUpCount }}</span>
        <span class="badge badge-danger" style="font-size: 1em;">DOWN: {{ $statusDownCount }}</span>
    </div>

    <!-- Tabela de ONUs -->
    @if(isset($onus) && count($onus) > 0)
    <table class="table table-striped">
        <thead>
            <tr>
                <th>ONT</th>
                <th>Sernum</th>
                <th>Status</th>
                <th>Level</th>
                <th>Login</th>
                <th>Ações</th>
            </tr>
        </thead>
        <tbody>
        @foreach($onus as $onu)
        @php
            $rowClass = ($onu->status2 === 'down') ? 'offline' : (($onu->level >= -50 && $onu->level <= -27) ? 'critical' : '');
        @endphp

        <tr class="{{ $rowClass }}">
            <td>{{ $onu->ont }}</td>
            <td>{{ $onu->sernum }}</td>
            <td>{{ $onu->status2 }}</td>
            <td>{{ $onu->level }}</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" data-id="{{ $onu->id }}">Editar</button>
                    <button type="button" class="btn btn-warning btn-sm btn-restart mr-2" data-id="{{ $onu->id }}">Reiniciar</button>
                    <button type="button" class="btn btn-info btn-sm btn-wifi mr-2"
        data-serial="{{ $onu->sernum }}"
        data-wifi2_4="{{ $onu->wifiSetting->wifi_name_2_4 ?? 'Não registrado' }}"
        data-password2_4="{{ $onu->wifiSetting->wifi_password_2_4 ?? 'Não registrado' }}"
        data-wifi5g="{{ $onu->wifiSetting->wifi_name_5g ?? 'Não registrado' }}"
        data-password5g="{{ $onu->wifiSetting->wifi_password_5g ?? 'Não registrado' }}">
    WiFi
</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" onclick="return confirm('Tem certeza que deseja deletar esta ONU?')">Deletar</button>
                    </form>
                </div>
            </td>
        </tr>
        @endforeach
        </tbody>
    </table>
    @else
        <p>Nenhuma ONU encontrada.</p>
    @endif

</div>

<!-- Modal para Exibir WiFi -->
<div class="modal fade" id="wifiModal" tabindex="-1" aria-labelledby="wifiModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="wifiModalLabel">Dados de WiFi</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Fechar">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <p><strong>Serial:</strong> <span id="wifiSerial"></span></p>
                <p><strong>WiFi 2.4G:</strong> <span id="wifiName2_4"></span></p>
                <p><strong>Senha 2.4G:</strong> <span id="wifiPassword2_4"></span></p>
                <hr>
                <p><strong>WiFi 5G:</strong> <span id="wifiName5G"></span></p>
                <p><strong>Senha 5G:</strong> <span id="wifiPassword5G"></span></p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Fechar</button>
            </div>
        </div>
    </div>
</div>

<style>
    .offline {
        background-color: #f8d7da;
    }
    .critical {
        background-color: #fff3cd;
    }
</style>

<script>
    $(document).ready(function() {
        // Evento de clique no botão WiFi
        $(document).on('click', '.btn-wifi', function () {
            var serial = $(this).data('serial');
            var wifi2_4 = $(this).data('wifi2_4');
            var password2_4 = $(this).data('password2_4');
            var wifi5g = $(this).data('wifi5g');
            var password5g = $(this).data('password5g');

            // Preenche o modal com os dados da ONU
            $('#wifiSerial').text(serial);
            $('#wifiName2_4').text(wifi2_4);
            $('#wifiPassword2_4').text(password2_4);
            $('#wifiName5G').text(wifi5g);
            $('#wifiPassword5G').text(password5g);

            // Exibe o modal
            $('#wifiModal').modal('show');
        });
    });
</script>

@endsection