@extends('user.layouts.app')
@section('breadcrumb-first', $breadcrumb->first)
@section('breadcrumb-second', $breadcrumb->second)
@section('content')
<div class="row">
	<div class="col-lg-12">
        @include('user.page.service.monitoring.filter')
        <div class="card card-custom">
            <div class="card-body">
                <div class="table-responsive">
                    {!! $dataTable->table(['class' => 'table table-striped table-borderless table-hover mb-0'], false) !!}
                </div>
			</div>
		</div>
	</div>
</div>
{!! $dataTable->scripts() !!}
<script>
	$(document).ready(function () {
        document.getElementById("data-table").children[0].className = "thead-light";
        $('#filter_form').on('submit', function(element) {
            element.preventDefault();
            $('#preloader').fadeIn('slow');
            $.when(window.LaravelDataTables["data-table"].page.len($('#filter_row').val()).draw()).done(function() {
                $('#preloader').fadeOut('slow');
            });
        });
        $('#filter_form').on('reset', function(element) {
            $('[data-toggle="select2"], select, input').val(null).trigger('change');
            $('#filter_row').val('10').trigger('change');
            $('#preloader').fadeIn('slow');
            $.when(window.LaravelDataTables["data-table"].page.len('10').draw()).done(function() {
                $('#preloader').fadeOut('slow');
            });
        });
    });
</script>
@endsection