@extends('layouts.app')

@section('content')

<!-- PAGE HEADER -->
<div class="page-header">
    <div>
        <h1>Meter Units <small>List & Management</small></h1>
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="#">Home</a></li>
            <li class="breadcrumb-item active" aria-current="page">Meter Units</li>
        </ol>
    </div>
</div>
<!-- PAGE HEADER END -->

<div class="content mt-3">
    <div class="card shadow mb-4">
        <div class="card-header">
            Meter Unit List
        </div>
        <div class="card-body">
            <table class="table table-bordered dt-responsive data-table" id="meterUnitsTable" width="100%" cellspacing="0">
                <thead>
                    <tr>
                        <th>S.No.</th>
                        <th>Customer</th>
                        <th>Month</th>
                        <th>Billed Unit</th>
                        <th>Created At</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
    </div>
</div>

@stop

@section('scripting')

<script>
    $(document).ready(function() {
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });

       var table = $('#meterUnitsTable').DataTable({
    processing: true,
    serverSide: true,
    ajax: "{{ url('get_meter_unit_list') }}",
    columns: [
        { data: 'DT_RowIndex', name: 'DT_RowIndex', orderable: false, searchable: false },
        { data: 'customer_name', name: 'users.name' },
        { data: 'month', name: 'month' },
        { data: 'billed_unit', name: 'billed_unit' },
        { data: 'created_at', name: 'created_at' },
    ],
    order: [[1, 'asc']],
    language: {
        search: "_INPUT_",
        searchPlaceholder: "Search meter units",
    }
});

    });
</script>

@endsection