@extends('backend.layouts.app')
@section('main')
@section('title', 'Daftar ONU')

        <div class="row">
            <div class="col-lg-12">
                <div class="card card-header-actions h-100">
                    <div class="card-header">
                        <div class="h5 col-auto">DAFTAR ONU</div>
                    </div>
                    <div class="row ms-3 me-3 mt-3">
                    <div class="col-auto">
                        <a href="/olt/device/dashboard"
                            class="btn btn-primary text-light me-2 mb-2">
                            <i class="fas fa-backward me-1"></i>KEMBALI
                        </a>
                    </div>
                    <div class="col-lg-3">
                        <div class="form-group">
                            @php
                            $port = request()->segment(4);
                            @endphp
                            <select class="form-select" id="filter_pon" name="filter_pon">
                                <option value="all">ALL</option> 
                                @foreach ($data['pon'] as $row)         
                                <option value="{{$row['port_id']}}"  selected="selected">PON {{ $row['port_id'] }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    </div>
                    @include('backend.olt.modal.create')
                    @include('backend.olt.modal.edit')
                    <div class="card-body table-responsive">
    
                        <table id="myTable" class="table table-hover display nowrap" width="100%">
                            <thead>
                                <tr>
                                    <th>ONU ID</th>
                                    <th>ONU NAME</th>
                                    <th>MEMBER NAME</th>
                                    <th>AREA</th>
                                    <th>ODP</th>
                                    <th>MAC ADDRESS</th>
                                    <th style="text-align:left!important">RX POWER</th>
                                    <th style="text-align:left!important">STATUS</th>
                                    <th style="text-align:left!important">LAST DEREGISTER TIME</th>
                                    <th style="text-align:left!important">LAST DEREGISTER REASON</th>
                                </tr>
                            </thead>
                            <tbody>

                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
@endsection
@push('scripts')
<script type="text/javascript">
    let table = $('#myTable').DataTable({
        processing: true,
        serverSide: true,
        // scrollX: true,
        lengthMenu: [50, 100, 200, 300, 500],
        ajax: '{{ url()->current() }}',
        columns: [{
                data: 'onu_id',
                name: 'onu_id',
                render: function(data, type, row) {
                    return row.port_id + '/' + row.onu_id
                },
            },
            {
                data: 'onu_name',
                name: 'onu_name',
                width:'2000px',
               render: function(data,type,row) {
                return '<a href="/olt/device/pon/'+row.port_id+'/onu/'+row.onu_id+'" class="btn btn-sm btn-primary">'+data+'</a>';
                }
            },
            {
                data: 'member',
                name: 'member',
                width:'400px',
            },
            {
                data: 'area',
                name: 'area',
            },
            {
                data: 'odp',
                name: 'odp',
                width: '300px',
            },
            {
                data: 'macaddr',
                name: 'macaddr',
                width: '200px',
                // render: function(data) {
                //     return '<span class="badge bg-light text-dark">'+data+'</span>'
                // }
            },
            {
                data: 'receive_power',
                name: 'receive_power',
                render: function(data) {
                    if (data > -8) {
                        return '<span class="btn btn-sm btn-success">' + data + '</span>';
                    } else if (data < -8 && data > -25) {
                        return '<span class="btn btn-sm btn-success">' + data + '</span>';
                    } else if (data <= -25) {
                        return '<span class="btn btn-sm btn-warning">' + data + '</span>';
                    } else {
                        return '<span class="btn btn-sm btn-danger">' + data + '</span>';
                    }
                },
            },
            {
                data: 'status',
                name: 'status',
                render: function(data) {
                    if (data === 'Online') {
                        return '<span class="text-success">Online</span>'
                    } else if (data === 'Offline') {
                        return '<span class="text-danger">Offline</span>'
                    } else if (data === 'Initial') {
                        return '<span class="text-warning">Initial</span>'
                    } else {
                        return data
                    }
                }
            },
            {
                data: 'last_down_time',
                name: 'last_down_time'
            },
            {
                data: 'last_down_reason',
                name: 'last_down_reason',
            },
        ]
    });
    $('#filter_pon').change(function() {
        window.location.href = '/olt/device/pon/'+ $('#filter_pon').val();
    });

</script>
@endpush