@extends('layout.app')

@section('content')
    <div class="card card-outline card-primary">
        <div class="card-header d-flex align-items-center">
            <h3 class="card-title">OLT List <span class="badge badge-primary ml-1">{{ $oltinfos->count() }}</span></h3>
            <button type="button" id="btn-add-olt" class="btn btn-info btn-sm ml-auto">
                <i class="fas fa-plus"></i> Add OLT
            </button>
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table id="newDataTable" class="table table-bordered table-striped table-hover table-sm">
                    <thead>
                        <tr>
                            <th>Id</th>
                            <th>OLT Address</th>
                            <th>Community</th>
                            <th>Port</th>
                            <th>Company</th>
                            <th>Type</th>
                            <th>Remarks</th>
                            <th>MikroTik</th>
                            <th>Status</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($oltinfos as $oltinfo)
                            <tr>
                                <td>{{ $oltinfo->id }}</td>
                                <td>{{ $oltinfo->olt_address }}</td>
                                <td>{{ $oltinfo->community }}</td>
                                <td>{{ $oltinfo->port }}</td>
                                <td>{{ $oltinfo->olt_company }}</td>
                                <td>{{ $oltinfo->olt_type }}</td>
                                <td>{{ $oltinfo->olt_remarks ?? '—' }}</td>
                                <td>
                                    @isset($oltMikrotikMap[$oltinfo->id])
                                        @foreach($oltMikrotikMap[$oltinfo->id] as $mk)
                                            <span class="badge badge-secondary">{{ $mk->nasname }}</span>
                                        @endforeach
                                    @else
                                        <span class="text-muted">—</span>
                                    @endisset
                                </td>
                                <td>
                                    <span class="olt-status" data-id="{{ $oltinfo->id }}">
                                        <span class="text-muted small">Pending…</span>
                                    </span>
                                </td>
                                <td>
                                    <a href="{{ route('oltinfo.run', $oltinfo->id) }}"
                                        class="btn btn-success btn-xs">Run</a>
                                    <button type="button" class="btn btn-info btn-xs btn-edit"
                                        data-id="{{ $oltinfo->id }}">Edit</button>
                                    <form action="{{ route('oltinfo.destroy', $oltinfo->id) }}" method="POST"
                                        style="display:inline">
                                        @csrf
                                        @method('DELETE')
                                        <button type="submit" class="btn btn-danger btn-xs"
                                            onclick="return confirm('Are you sure you want to delete?')">Delete</button>
                                    </form>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    {{-- Run Log --}}
    @if(session('olt_run_log'))
    <div class="card card-outline card-secondary mt-3">
        <div class="card-header d-flex align-items-center">
            <h3 class="card-title"><i class="fas fa-list-alt mr-1"></i> Run Log</h3>
            <a href="{{ route('oltinfo.index', ['clear_run_log' => 1]) }}"
               class="btn btn-xs btn-outline-danger ml-auto">
                <i class="fas fa-trash"></i> Clear Log
            </a>
        </div>
        <div class="card-body p-0" style="max-height: 300px; overflow-y: auto;">
            <table class="table table-sm table-bordered mb-0">
                <thead class="thead-dark">
                    <tr>
                        <th style="width:160px">Time</th>
                        <th style="width:150px">OLT</th>
                        <th>Message</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach(session('olt_run_log') as $entry)
                    @php
                        $rowClass = $entry['type'] === 'success' ? 'table-success' : ($entry['type'] === 'warning' ? 'table-warning' : 'table-danger');
                    @endphp
                    <tr class="{{ $rowClass }}">
                        <td class="text-muted small">{{ $entry['time'] }}</td>
                        <td class="small"><code>{{ $entry['olt'] }}</code></td>
                        <td class="small">{{ $entry['message'] }}</td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>
    @endif

    {{-- Create / Edit Modal --}}
    <div class="modal fade" id="oltModal" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header bg-primary">
                    <h5 class="modal-title text-white" id="oltModalTitle">Add OLT</h5>
                    <button type="button" class="close text-white" data-dismiss="modal">
                        <span>&times;</span>
                    </button>
                </div>
                <form id="oltForm">
                    @csrf
                    <input type="hidden" id="form-id" value="">
                    <div class="modal-body">
                        <div class="form-group">
                            <label>OLT Address <span class="text-danger">*</span></label>
                            <input type="text" name="olt_address" id="m-olt_address" class="form-control"
                                placeholder="e.g. 172.18.9.18">
                        </div>
                        <div id="snmp-fields">
                            <div class="form-group">
                                <label>Community <span class="text-danger">*</span></label>
                                <input type="text" name="community" id="m-community" class="form-control"
                                    placeholder="e.g. public">
                            </div>
                        </div>
                        <div id="telnet-fields" style="display:none;">
                            <div class="form-group">
                                <label>Telnet Username <span class="text-danger">*</span></label>
                                <input type="text" name="telnet_username" id="m-telnet_username" class="form-control"
                                    placeholder="e.g. admin">
                            </div>
                            <div class="form-group">
                                <label>Telnet Password <span class="text-danger">*</span></label>
                                <input type="password" name="telnet_password" id="m-telnet_password" class="form-control"
                                    placeholder="Telnet password">
                            </div>
                            <div class="form-group">
                                <label>Telnet Port <span class="text-danger">*</span></label>
                                <input type="number" name="telnet_port" id="m-telnet_port" class="form-control"
                                    placeholder="23" value="23" min="1" max="65535">
                            </div>
                        </div>
                        <div class="form-group">
                            <label>OLT Company <span class="text-danger">*</span></label>
                            <select name="olt_company" id="m-olt_company" class="form-control">
                                <option value="">Select OLT Company</option>
                                @if (globalPermission('huawei-telnet-service'))
                                    <option value="Huawei">Huawei</option>
                                @endif
                                @if (globalPermission('aurora-olt'))
                                    <option value="Aurora">Aurora</option>
                                @endif
                                <option value="CoreLink">Core Link</option>
                                <option value="BDCom">BDCom</option>
                                <option value="Vsol">Vsol</option>
                                <option value="Cdata">C-data</option>
                                <option value="Ecom">Ecom</option>
                                <option value="TBS">TBS</option>

                            </select>
                        </div>
                        <div class="form-group">
                            <label>OLT Type <span class="text-danger">*</span></label>
                            <select name="olt_type" id="m-olt_type" class="form-control">
                                <option value="">Select OLT Type</option>
                                <option value="Epon">Epon</option>
                                <option value="Gpon">Gpon</option>
                            </select>
                        </div>
                        <div id="snmp-port-field">
                            <div class="form-group">
                                <label>Port <span class="text-danger">*</span></label>
                                <input type="text" name="port" id="m-port" class="form-control" placeholder="e.g. 161">
                            </div>
                        </div>
                        <div class="form-group">
                            <label>Remarks</label>
                            <input type="text" name="olt_remarks" id="m-olt_remarks" class="form-control"
                                placeholder="Optional">
                        </div>
                        <div class="form-group">
                            <label>MikroTik <small class="text-muted">(optional, select one or more)</small></label>
                            <select name="mikrotik_ids[]" id="m-mikrotik_ids" class="form-control" multiple>
                                @foreach($mikrotiks as $mk)
                                    <option value="{{ $mk->id }}">{{ $mk->shortname }} ({{ $mk->nasname }})</option>
                                @endforeach
                            </select>
                        </div>
                        <div id="form-errors" class="alert alert-danger d-none mb-0"></div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn btn-success" id="btn-save">
                            <i class="fas fa-save"></i> Save
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@section('ajax')
    <script>
        $(document).ready(function() {
            var csrfToken = '{{ csrf_token() }}';
            var baseUrl = '{{ rtrim(route('oltinfo.index'), '/') }}';
            var editingRow = null;

            var table = $('#newDataTable').DataTable({
                responsive: true,
                autoWidth: false,
                pageLength: 100,
                order: [
                    [0, 'asc']
                ],
                columnDefs: [{
                    orderable: false,
                    targets: [7, 8, 9]
                }]
            });

            function statusCell(id) {
                return '<span class="olt-status" data-id="' + id + '">' +
                    '<span class="text-muted small">Pending…</span></span>';
            }

            function buildActions(id) {
                return '<a href="' + baseUrl + '/run/' + id + '" class="btn btn-success btn-xs">Run</a> ' +
                    '<button type="button" class="btn btn-info btn-xs btn-edit" data-id="' + id +
                    '">Edit</button> ' +
                    '<form action="' + baseUrl + '/' + id + '" method="POST" style="display:inline">' +
                    '<input type="hidden" name="_token" value="' + csrfToken + '">' +
                    '<input type="hidden" name="_method" value="DELETE">' +
                    '<button type="submit" class="btn btn-danger btn-xs" onclick="return confirm(\'Are you sure?\')">Delete</button>' +
                    '</form>';
            }

            // Escape text so a device message can be safely used in a title attribute / cell.
            function esc(str) {
                return $('<div>').text(str == null ? '' : String(str)).html();
            }

            // ---- OLT connectivity status ------------------------------------
            // With up to ~1000 OLTs we only check the rows currently on screen
            // (DataTables paginates), re-checking as the user changes page/search.
            // Results are cached by id so they survive DataTable redraws, and at
            // most CONCURRENCY checks run at once so we never flood the server.
            var CONCURRENCY   = 20;
            var statusCache   = {}; // id -> final result HTML (rendered after redraws)
            var statusQueued  = {}; // id -> true once queued/in-progress
            var statusQueue   = [];
            var statusActive  = 0;

            function renderConnected(res) {
                return '<span class="badge badge-success" title="' + esc(res.message) + '">' +
                    '<i class="fas fa-check"></i> Connected</span>';
            }

            function renderNotConnected(message) {
                return '<span class="badge badge-danger"><i class="fas fa-times"></i> Not connected</span>' +
                    '<div class="small text-danger mt-1" style="white-space:normal;word-break:break-word;">' +
                    esc(message) + '</div>';
            }

            function renderFailed(message) {
                return '<span class="badge badge-secondary">Check failed</span>' +
                    '<div class="small text-muted mt-1" style="white-space:normal;word-break:break-word;">' +
                    esc(message) + '</div>';
            }

            function statusEl(id) {
                return $('#newDataTable tbody').find('.olt-status[data-id="' + id + '"]');
            }

            function checkOltStatus(id) {
                statusEl(id).html('<span class="text-muted small"><i class="fas fa-spinner fa-spin"></i> Checking…</span>');
                $.ajax({
                    url: baseUrl + '/check/' + id,
                    method: 'GET',
                    timeout: 45000
                }).done(function(res) {
                    statusCache[id] = (res && res.connected)
                        ? renderConnected(res)
                        : renderNotConnected((res && res.message) ? res.message : 'Not connected');
                }).fail(function(xhr) {
                    var m = (xhr.responseJSON && xhr.responseJSON.message) ? xhr.responseJSON.message :
                        ('HTTP ' + xhr.status);
                    statusCache[id] = renderFailed(m);
                }).always(function() {
                    statusEl(id).html(statusCache[id]);
                    statusActive--;
                    pumpStatusQueue();
                });
            }

            function pumpStatusQueue() {
                while (statusActive < CONCURRENCY && statusQueue.length) {
                    statusActive++;
                    checkOltStatus(statusQueue.shift());
                }
            }

            // Apply cached results to the visible rows and queue any not-yet-checked ones.
            function scanVisibleStatuses() {
                $('#newDataTable tbody').find('.olt-status').each(function() {
                    var id = $(this).data('id');
                    if (!id) return;
                    if (statusCache[id] !== undefined) {
                        $(this).html(statusCache[id]);   // re-apply after a redraw
                    } else if (!statusQueued[id]) {
                        statusQueued[id] = true;
                        statusQueue.push(id);
                    }
                });
                pumpStatusQueue();
            }

            // Force a fresh check for one OLT (e.g. after create/edit).
            function recheckOlt(id) {
                delete statusCache[id];
                statusQueued[id] = true;
                statusQueue.push(id);
                pumpStatusQueue();
            }

            // Re-scan whenever the table is (re)drawn: page change, search, sort.
            table.on('draw', scanVisibleStatuses);
            scanVisibleStatuses();

            // Telnet-based vendors show username/password/telnet-port instead of
            // community/port. Sourced from OltInfo::TELNET_COMPANIES so the form
            // and the server-side validation can never drift apart.
            var telnetCompanies = @json(\App\Models\OltInfo::TELNET_COMPANIES);

            function toggleCompanyFields(company) {
                var isTelnet = telnetCompanies.indexOf(company) !== -1;
                $('#snmp-fields, #snmp-port-field').toggle(!isTelnet);
                $('#telnet-fields').toggle(isTelnet);
            }

            $('#m-olt_company').on('change', function() {
                toggleCompanyFields($(this).val());
            });

            // Init Select2 on the MikroTik field inside the modal
            $('#oltModal').on('shown.bs.modal', function() {
                if (!$('#m-mikrotik_ids').data('select2')) {
                    $('#m-mikrotik_ids').select2({
                        dropdownParent: $('#oltModal'),
                        placeholder: 'Select MikroTik(s)',
                        allowClear: true,
                        width: '100%'
                    });
                }
            });

            function resetModal() {
                $('#oltForm')[0].reset();
                $('#m-mikrotik_ids').val(null).trigger('change');
                $('#form-id').val('');
                $('#form-errors').addClass('d-none').html('');
                $('#btn-save').prop('disabled', false).html('<i class="fas fa-save"></i> Save');
                toggleCompanyFields('');
                editingRow = null;
            }

            // Open create modal
            $('#btn-add-olt').on('click', function() {
                resetModal();
                $('#oltModalTitle').text('Add OLT');
                $('#oltModal').modal('show');
            });

            // Open edit modal — store the row reference for in-place update
            $(document).on('click', '.btn-edit', function() {
                var id = $(this).data('id');
                editingRow = $(this).closest('tr');
                resetModal();
                editingRow = table.row($(this).closest('tr')); // re-set after resetModal clears it
                $('#oltModalTitle').text('Edit OLT');
                $('#btn-save').html('<i class="fas fa-spinner fa-spin"></i>');

                $.ajax({
                    url: baseUrl + '/' + id + '/edit',
                    method: 'GET',
                    success: function(data) {
                        $('#form-id').val(data.id);
                        $('#m-olt_address').val(data.olt_address);
                        $('#m-community').val(data.community);
                        $('#m-olt_company').val(data.olt_company);
                        $('#m-olt_type').val(data.olt_type);
                        $('#m-port').val(data.port);
                        $('#m-olt_remarks').val(data.olt_remarks || '');
                        $('#m-telnet_username').val(data.telnet_username || '');
                        $('#m-telnet_password').val(data.telnet_password || '');
                        $('#m-telnet_port').val(data.telnet_port || 23);
                        toggleCompanyFields(data.olt_company);
                        if (data.mikrotik_ids) {
                            $('#m-mikrotik_ids').val(data.mikrotik_ids).trigger('change');
                        }
                        $('#btn-save').html('<i class="fas fa-save"></i> Update');
                        $('#oltModal').modal('show');
                    },
                    error: function() {
                        alert('Failed to load OLT data.');
                        resetModal();
                    }
                });
            });

            // Submit create or update
            $('#oltForm').on('submit', function(e) {
                e.preventDefault();
                var id = $('#form-id').val();
                var url = id ? baseUrl + '/' + id : baseUrl;
                var method = id ? 'PUT' : 'POST';

                $('#btn-save').prop('disabled', true).html('<i class="fas fa-spinner fa-spin"></i>');
                $('#form-errors').addClass('d-none').html('');

                $.ajax({
                    url: url,
                    method: method,
                    data: $(this).serialize(),
                    headers: {
                        'X-CSRF-TOKEN': csrfToken
                    },
                    success: function(res) {
                        if (!res.success) return;
                        var r = res.record;
                        $('#oltModal').modal('hide');

                        // Build MikroTik IP badges from selected options in the modal
                        var mkHtml = '';
                        $('#m-mikrotik_ids').find(':selected').each(function() {
                            var match = $(this).text().match(/\(([^)]+)\)/);
                            var ip = match ? match[1] : $(this).text();
                            mkHtml += '<span class="badge badge-secondary">' + ip + '</span> ';
                        });
                        var mkCell = mkHtml.trim() || '<span class="text-muted">—</span>';

                        if (id && editingRow) {
                            // Update cells of the existing row in-place
                            var d = editingRow.data();
                            d[1] = r.olt_address;
                            d[2] = r.community;
                            d[3] = r.port;
                            d[4] = r.olt_company;
                            d[5] = r.olt_type;
                            d[6] = r.olt_remarks || '—';
                            d[7] = mkCell;
                            d[8] = statusCell(r.id);
                            d[9] = buildActions(r.id);
                            editingRow.data(d).draw(false);
                        } else {
                            // Add new row and bump the badge count
                            var sl = table.rows().count() + 1;
                            table.row.add([
                                sl,
                                r.olt_address,
                                r.community,
                                r.port,
                                r.olt_company,
                                r.olt_type,
                                r.olt_remarks || '—',
                                mkCell,
                                statusCell(r.id),
                                buildActions(r.id)
                            ]).draw(false);
                            var badge = $('.card-title .badge');
                            badge.text(parseInt(badge.text()) + 1);
                        }

                        // Refresh connectivity status for the added/edited OLT.
                        recheckOlt(r.id);

                        resetModal();
                    },
                    error: function(xhr) {
                        var html = '';
                        if (xhr.status === 422 && xhr.responseJSON && xhr.responseJSON.errors) {
                            $.each(xhr.responseJSON.errors, function(field, msgs) {
                                html += '<div>' + msgs.join(' ') + '</div>';
                            });
                        } else if (xhr.responseJSON && xhr.responseJSON.message) {
                            html = '[' + xhr.status + '] ' + xhr.responseJSON.message;
                        } else if (xhr.responseText) {
                            html = '[' + xhr.status + '] ' + xhr.responseText.substring(0, 300);
                        } else {
                            html = 'HTTP ' + xhr.status + ' — ' + (xhr.statusText ||
                                'Unknown error');
                        }
                        $('#form-errors').html(html).removeClass('d-none');
                        var label = id ? '<i class="fas fa-save"></i> Update' :
                            '<i class="fas fa-save"></i> Save';
                        $('#btn-save').prop('disabled', false).html(label);
                    }
                });
            });
        });
    </script>
@endsection