@extends('layout.app')

@section('content')
    <h4>Onu's information <span style="font-size: 14px">(ONU লেজার ১০ মিনিট পর পর আপডেট হয়। আপনাদের যদি ইনস্ট্যান্ট লেজার
            প্রয়োজন হয়, তাহলে Action থেকে বাটনে ক্লিক করুন।)</span></h4>

    <div class="container-fluid bg-white my-3 py-2 shadow-sm">
        <div class="d-flex justify-content-between align-items-center mb-2">
            <p id="totalDevices" class="mb-0">Total: Loading...</p>
            <div class="d-flex align-items-center">
                <select id="oltFilter" class="form-control form-control-sm mr-2" style="width: 250px;">
                    <option value="">All OLTs</option>
                    {{-- @dd($oltList) --}}
                    @foreach ($oltList as $olt)
                        <option value="{{ $olt->id }}">{{ $olt->id }} - {{ $olt->olt_address }} -
                            {{ $olt->olt_remarks ?? 'No Remarks' }}</option>
                    @endforeach
                </select>
                @can('onu_info_download')
                    <button id="btn-export" class="btn btn-success btn-sm mr-2">
                        <i class="fas fa-file-excel"></i> Download Excel
                    </button>
                @endcan
                @can('truncate_onu_info')
                    <a href="{{ route('oltOnuInformationTruncate') }}" class="btn btn-danger btn-sm">Delete All</a>
                @endcan

            </div>
        </div>
        <table id="devicesTable" class="display">
            <thead>
                <tr>
                    <th>ID</th>
                    <th>OLT</th>
                    <th>OLT Address</th>
                    <th>OLT Name</th>
                    <th>Username</th>
                    <th>ONU ID</th>
                    <th>MAC</th>
                    <th>VLAN</th>
                    <th>Interface</th>
                    <th>Laser(Power)</th>
                    <th>Updated At</th>
                    <th>Action</th>
                </tr>
            </thead>
            <tbody>
                <!-- Data will be loaded via AJAX -->
            </tbody>
        </table>
    </div>
@endsection

@section('ajax')
    <script>
        $(document).ready(function() {
            var table = $('#devicesTable').DataTable({
                "processing": true,
                "serverSide": true,
                "ajax": {
                    "url": "{{ route('onu-information-data') }}",
                    "type": "GET",
                    "data": function(d) {
                        d.olt_id = $('#oltFilter').val();
                    },
                    "error": function(xhr, error, code) {
                        console.log('Error:', error, code);
                        alert('Error loading data. Please refresh the page.');
                    }
                },
                "columns": [{
                        "data": "id",
                        "name": "id",
                        "width": "4%"
                    },
                    {
                        "data": "olt_label",
                        "name": "olt_label",
                        "width": "14%",
                        "orderable": false,
                        "searchable": false
                    },
                    {
                        "data": "oltaddress",
                        "name": "oltaddress",
                        "width": "9%"
                    },
                    {
                        "data": "oltName",
                        "name": "oltName",
                        "width": "9%"
                    },
                    {
                        "data": "username",
                        "name": "username",
                        "width": "10%"
                    },
                    {
                        "data": "onuid",
                        "name": "onuid",
                        "width": "8%"
                    },
                    {
                        "data": "mac",
                        "name": "mac",
                        "width": "12%"
                    },
                    {
                        "data": "Vlan",
                        "name": "Vlan",
                        "width": "8%"
                    },
                    {
                        "data": "interface",
                        "name": "interface",
                        "width": "12%"
                    },
                    {
                        "data": "laser",
                        "name": "laser",
                        "width": "10%"
                    },
                    {
                        "data": "updated_at",
                        "name": "updated_at",
                        "width": "13%"
                    },
                    {
                        "data": "onuid",
                        "name": "action",
                        "orderable": false,
                        "searchable": false,
                        "width": "5%",
                        "render": function(data, type, row) {
                            return '<button type="button" class="btn btn-sm btn-outline-primary refresh-laser" data-id="' +
                                data + '" data-mac="' + (row.mac || '') + '" data-olt="' + (row.olt_id || '') +
                                '"><i class="fas fa-sync-alt"></i></button>';
                        }
                    }
                ],
                "order": [
                    [10, "desc"]
                ],
                "pageLength": 100,
                "pagingType": "full_numbers",
                "lengthMenu": [
                    [25, 50, 100, -1],
                    [25, 50, 100, "All"]
                ],
                "searchDelay": 500,
                "language": {
                    "processing": "Loading data...",
                    "search": "Search all columns:",
                    "lengthMenu": "Show _MENU_ entries per page",
                    "info": "Showing _START_ to _END_ of _TOTAL_ entries",
                    "infoEmpty": "No entries found",
                    "infoFiltered": "(filtered from _MAX_ total entries)",
                    "zeroRecords": "No matching records found"
                },
                "drawCallback": function(settings) {
                    var api = this.api();
                    var recordsTotal = api.page.info().recordsTotal;
                    var recordsFiltered = api.page.info().recordsFiltered;

                    if (recordsFiltered < recordsTotal) {
                        $('#totalDevices').text('Total: ' + recordsFiltered + ' (filtered from ' +
                            recordsTotal + ')');
                    } else {
                        $('#totalDevices').text('Total: ' + recordsTotal);
                    }
                }
            });

            $('#oltFilter').on('change', function() {
                table.ajax.reload();
            });

            $('#btn-export').on('click', function() {
                var oltId = $('#oltFilter').val();
                var url = '{{ route('onu-information-export') }}';
                if (oltId) url += '?olt_id=' + oltId;
                window.location.href = url;
            });

            $('#devicesTable').on('click', '.refresh-laser', function() {
                var btn = $(this);
                var row = btn.closest('tr');
                var onuId = btn.data('id');
                var username = row.find('td:eq(4)').text().trim();
                // attr() not data(): jQuery coerces a value that looks numeric,
                // which would mangle a MAC stored without colons.
                var mac = btn.attr('data-mac');
                var oltId = btn.attr('data-olt');
                var laserCell = row.find('td:eq(9)');
                btn.prop('disabled', true).find('i').addClass('fa-spin');
                $.ajax({
                    url: "{{ route('singleonuinformation', ':id') }}".replace(':id', onuId),
                    type: 'GET',
                    data: {
                        username: username,
                        mac: mac,
                        olt_id: oltId
                    },
                    success: function(response) {
                        if (response.laserValue !== null && response.laserValue !== undefined) {
                            laserCell.text(response.laserValue);
                        } else {
                            toastr.error(response.message || 'Could not retrieve laser value');
                        }
                    },
                    error: function(xhr) {
                        var msg = (xhr.responseJSON && xhr.responseJSON.message) ?
                            xhr.responseJSON.message :
                            'Error ' + xhr.status + ': ' + xhr.statusText;
                        toastr.error(msg);
                        console.error('ONU sync error:', xhr.responseJSON || xhr.responseText);
                    },
                    complete: function() {
                        btn.prop('disabled', false).find('i').removeClass('fa-spin');
                    }
                });
            });
        });
    </script>
@endsection