@extends('layout.app')

@section('content')
    <section class="content">
        <div class="container-fluid">

            <div class="card card-outline card-primary">
                <div class="card-header">
                    <h3 class="card-title"><i class="fas fa-bolt"></i> ONU Optical Power Info</h3>
                </div>
                <div class="card-body">
                    {{-- Hidden dummy fields to stop browser autofill bleeding into prompt fields --}}
                    <input type="text"     style="display:none" aria-hidden="true">
                    <input type="password" style="display:none" aria-hidden="true">

                    <div class="row">
                        <div class="col-md-2">
                            <div class="form-group">
                                <label>Host / IP</label>
                                <input type="text" id="host" class="form-control form-control-sm"
                                    autocomplete="off" value="10.254.3.46">
                            </div>
                        </div>
                        <div class="col-md-1">
                            <div class="form-group">
                                <label>Port</label>
                                <input type="number" id="port" class="form-control form-control-sm"
                                    autocomplete="off" value="23">
                            </div>
                        </div>
                        <div class="col-md-1">
                            <div class="form-group">
                                <label>Username</label>
                                <input type="text" id="username" class="form-control form-control-sm"
                                    autocomplete="off" value="yetfix">
                            </div>
                        </div>
                        <div class="col-md-1">
                            <div class="form-group">
                                <label>Password</label>
                                <input type="password" id="password" class="form-control form-control-sm"
                                    autocomplete="new-password" value="yetfix2026">
                            </div>
                        </div>
                        <div class="col-md-2">
                            <div class="form-group">
                                <label>Login Prompt</label>
                                <input type="text" id="login_prompt" class="form-control form-control-sm"
                                    autocomplete="off" value="User name:">
                            </div>
                        </div>
                        <div class="col-md-1">
                            <div class="form-group">
                                <label>Pass Prompt</label>
                                <input type="text" id="pass_prompt" class="form-control form-control-sm"
                                    autocomplete="off" value="User password:">
                            </div>
                        </div>
                        <div class="col-md-2">
                            <div class="form-group">
                                <label>Frame/Slot/Port <small class="text-muted">(blank = scan all)</small></label>
                                <input type="text" id="fsp" class="form-control form-control-sm"
                                    autocomplete="off" value="" placeholder="e.g. 0/1/0 or leave blank">
                            </div>
                        </div>
                        <div class="col-md-2 d-flex align-items-end">
                            <div class="form-group w-100">
                                <button type="button" id="btn-fetch" class="btn btn-primary btn-sm btn-block">
                                    <i class="fas fa-sync-alt"></i> Fetch
                                </button>
                                <button type="button" id="btn-check-boards" class="btn btn-secondary btn-sm btn-block mt-1">
                                    <i class="fas fa-list"></i> Check Boards
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            {{-- Board check result --}}
            <div id="board-result" class="card d-none mb-3">
                <div class="card-header bg-secondary text-white py-1">
                    <strong><i class="fas fa-list"></i> Detected GPON Boards</strong>
                </div>
                <div class="card-body p-2">
                    <table class="table table-sm table-bordered mb-2" id="board-table">
                        <thead class="thead-dark">
                            <tr><th>Slot</th><th>Board Name</th><th>Port Count</th></tr>
                        </thead>
                        <tbody id="board-table-body"></tbody>
                    </table>
                    <pre id="board-raw" class="bg-dark text-success p-2 small" style="max-height:200px;overflow-y:auto;"></pre>
                </div>
            </div>

            {{-- Status bar --}}
            <div id="status-bar" class="alert d-none mb-2"></div>

            {{-- Results table --}}
            <div class="card d-none" id="result-card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h3 class="card-title"><i class="fas fa-table"></i> Results</h3>
                    <small id="command-label" class="text-muted"></small>
                </div>
                <div class="card-body p-0">
                    <div class="table-responsive">
                        <table class="table table-bordered table-sm table-striped mb-0">
                            <thead style="background:#115548; color:#fff;">
                                <tr>
                                    <th>F/S/P</th>
                                    <th>ONT ID</th>
                                    <th>MAC</th>
                                    <th>Username</th>
                                    <th>RX Power (dBm)</th>
                                    <th>TX Power (dBm)</th>
                                    <th>OLT RX (dBm)</th>
                                    <th>Signal</th>
                                </tr>
                            </thead>
                            <tbody id="power-table-body"></tbody>
                        </table>
                    </div>
                </div>
            </div>

        </div>
    </section>
@endsection

@section('ajax')
    <script>
        $(document).ready(function () {
            var fetchUrl  = '{{ route("olt-telnet.power.fetch") }}';
            var csrfToken = '{{ csrf_token() }}';

            function statusBadge(state) {
                if (!state) return '<span class="badge badge-secondary">—</span>';
                if (state.toLowerCase() === 'online')  return '<span class="badge badge-success">Online</span>';
                if (state.toLowerCase() === 'offline') return '<span class="badge badge-danger">Offline</span>';
                return '<span class="badge badge-secondary">' + state + '</span>';
            }

            function signalBadge(rx) {
                var val = parseFloat(rx);
                if (isNaN(val)) return '<span class="badge badge-secondary">—</span>';
                if (val >= -20)  return '<span class="badge badge-success">Good</span>';
                if (val >= -25)  return '<span class="badge badge-warning">Fair</span>';
                return '<span class="badge badge-danger">Weak</span>';
            }

            function doFetch() {
                var payload = {
                    _token:       csrfToken,
                    host:         $('#host').val().trim(),
                    port:         $('#port').val().trim(),
                    username:     $('#username').val().trim(),
                    password:     $('#password').val().trim(),
                    login_prompt: $('#login_prompt').val().trim(),
                    pass_prompt:  $('#pass_prompt').val().trim(),
                    fsp:          $('#fsp').val().trim(),
                };

                $('#btn-fetch').prop('disabled', true).html('<i class="fas fa-spinner fa-spin"></i> Connecting...');
                $('#status-bar').removeClass('alert-success alert-danger').addClass('alert-info d-block').text('Connecting to OLT...');
                $('#result-card').addClass('d-none');
                $('#raw-output').addClass('d-none');

                $.ajax({
                    url:     fetchUrl,
                    method:  'POST',
                    data:    payload,
                    timeout: 300000,
                    success: function (res) {
                        $('#status-bar').removeClass('alert-info alert-danger')
                            .addClass('alert-success')
                            .text('Connected. Command: ' + res.command + ' — ' + res.rows.length + ' ONU(s) found.');

                        $('#command-label').text(res.command);

                        var tbody = '';
                        if (res.rows.length === 0) {
                            tbody = '<tr><td colspan="8" class="text-center text-muted">No ONU data found.</td></tr>';
                        } else {
                            $.each(res.rows, function (i, row) {
                                var userCell = row.username
                                    ? '<span class="badge badge-success">' + row.username + '</span>'
                                    : '<span class="text-muted">null</span>';
                                tbody += '<tr>' +
                                    '<td><code style="font-size:11px">' + (row.fsp || '—') + '</code></td>' +
                                    '<td>' + row.ont_id + '</td>' +
                                    '<td><code style="font-size:11px">' + (row.mac || '—') + '</code></td>' +
                                    '<td>' + userCell + '</td>' +
                                    '<td>' + row.rx_power + '</td>' +
                                    '<td>' + row.tx_power + '</td>' +
                                    '<td>' + row.olt_rx   + '</td>' +
                                    '<td>' + signalBadge(row.rx_power) + '</td>' +
                                '</tr>';
                            });
                        }
                        $('#power-table-body').html(tbody);
                        $('#result-card').removeClass('d-none');
                    },
                    error: function (xhr) {
                        var msg;
                        if (xhr.responseJSON) {
                            if (xhr.responseJSON.errors) {
                                // Laravel validation errors — show each field + message
                                var parts = [];
                                $.each(xhr.responseJSON.errors, function (field, msgs) {
                                    parts.push('[' + field + '] ' + msgs.join(', '));
                                });
                                msg = 'Validation failed: ' + parts.join(' | ');
                            } else {
                                msg = xhr.responseJSON.error
                                   || xhr.responseJSON.message
                                   || JSON.stringify(xhr.responseJSON).substring(0, 500);
                            }
                        } else {
                            msg = 'HTTP ' + xhr.status + ' — ' + (xhr.responseText || 'no response').substring(0, 300);
                        }
                        $('#status-bar').removeClass('alert-info alert-success')
                            .addClass('alert-danger').text('Error: ' + msg);
                    },
                    complete: function () {
                        $('#btn-fetch').prop('disabled', false).html('<i class="fas fa-sync-alt"></i> Fetch');
                    }
                });
            }

            $('#btn-fetch').on('click', doFetch);

            $('#btn-check-boards').on('click', function () {
                var btn = $(this);
                btn.prop('disabled', true).html('<i class="fas fa-spinner fa-spin"></i> Checking...');
                $('#board-result').addClass('d-none');

                $.ajax({
                    url:    '{{ route("olt-telnet.check-boards") }}',
                    method: 'POST',
                    data: {
                        _token:       csrfToken,
                        host:         $('#host').val().trim(),
                        port:         $('#port').val().trim(),
                        username:     $('#username').val().trim(),
                        password:     $('#password').val().trim(),
                        login_prompt: $('#login_prompt').val().trim(),
                        pass_prompt:  $('#pass_prompt').val().trim(),
                    },
                    timeout: 120000,
                    success: function (res) {
                        var tbody = '';
                        if (res.boards.length === 0) {
                            tbody = '<tr><td colspan="3" class="text-center text-muted">No GPON boards detected.</td></tr>';
                        } else {
                            $.each(res.boards, function (i, b) {
                                tbody += '<tr><td>Slot ' + b.slot + '</td><td>' + b.board_name + '</td><td>' + b.port_count + ' ports</td></tr>';
                            });
                        }
                        $('#board-table-body').html(tbody);
                        $('#board-raw').text(res.raw);
                        $('#board-result').removeClass('d-none');
                    },
                    error: function (xhr) {
                        var msg = (xhr.responseJSON && (xhr.responseJSON.error || xhr.responseJSON.message))
                            ? (xhr.responseJSON.error || xhr.responseJSON.message)
                            : 'HTTP ' + xhr.status;
                        alert('Board check failed: ' + msg);
                    },
                    complete: function () {
                        btn.prop('disabled', false).html('<i class="fas fa-list"></i> Check Boards');
                    }
                });
            });
        });
    </script>
@endsection