@extends('layouts.main')
@section('content')
<div class="row">
    <div class="col-md-12 col-sm-12 col-xs-12" >
        <div class="card">
            <div class="card-header">
                <h1 class="form-section">{{ __('strings.range_alerts') }} <span class="float-sm-right"> <a href="{{route('temp_alerts_create_view')}}" class="btn btn-primary">{{__('strings.submit_register')}}</a></span></h1>
            </div>
            <hr>
            <div class="table-responsive">
                <table id="devices-table" class="table hover mb-0">
                    <thead class="thead-inverse">
                        <tr>
                            <th>Id</th>
                            <th>Alias</th>
                            <th>{{ __('strings.devices') }}</th>
                            <th>{{ __('strings.alert_type') }}</th>
                            <th>{{__('strings.created_at')}}</th>
                            <th></th>
                        </tr>
                    </thead>
                </table>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
$(document).ready(function () {
    $('#devices-table').DataTable({
            processing: true,
            data: {!!$alerts->toJson()!!},
            paging: true,
            pageLength: 25,
            columns: [
            { data: 'id', name: 'id', defaultContent: "<i>{{__('strings.undefined')}}</i>" },
            { data: 'alert.alias', name: 'alert.alias', type: "string", defaultContent: "<i>{{__('strings.undefined')}}</i>" },
            { data: 'alert', name: 'alert',type: "html", render: function(data, type, row){
                    return Object.keys(data.devices).join("<br>");
            }},
            { data: 'alert.alert_type', name: 'alert.alert_type', type: "string", defaultContent: "<i>{{__('strings.undefined')}}</i>" },
            { data: 'created_at', name: 'created_at', render: function ( data, type, row ) {
                    if(data) {
                        return moment.utc(data).local().format("YYYY-MM-DD HH:mm");
                    } else {
                        return "0000-00-00 00:00";
                    }
                } 
            },
            { data: 'id', name: 'id', render: function(data, type, row) {
                    return "<a href='{{URL::to('/')}}/alerts/range/" + data + "/edit'>{{__('strings.submit_upgrade')}}</a>";
                }
            },
            ],
            dom: 'Bfrtip',
            buttons: [
                'pageLength','copy', 'excel',
                /*{
                    extend: 'pdfHtml5',
                    orientation: 'landscape',
                    pageSize: 'A4'
                }*/
            ],
            language: {
                url: "{{asset('DataTables/languages')}}/{{App::getLocale()}}.json"
            },
            order: [[ 0, "desc" ]]
        });
        
});


</script>
@endpush