@extends('layouts.sidebar')

@section('content')
    <div class="container mx-auto">
        <div class="w-full mt-8">
            <h2 class="mb-4 text-xl font-bold">Existing DCWD Accounts</h2>

            <table id="lightTable" class="min-w-full text-center bg-white border-collapse rounded shadow-md">
                <thead class="bg-gray-200">
                    <tr>
                        <th class="px-4 py-2 border">ID</th>
                        <th class="px-4 py-2 border">Account Number</th>
                        <th class="px-4 py-2 border">Property</th>
                        <th class="px-4 py-2 border">Actions</th>
                    </tr>
                </thead>

            </table>
        </div>


        <script>
            $(document).ready(function() {
                $('#lightTable').DataTable({
                    processing: true,
                    serverSide: true,
                    ajax: '{{ route('water1.index') }}',
                    columns: [{
                            data: 'id',
                            name: 'id'
                        },
                        {
                            data: 'account_number',
                            name: 'account_number'
                        },
                        {
                            data: 'property',
                            name: 'property'
                        },

                        {
                            data: 'actions2',
                            name: 'actions2',
                            orderable: false,
                            searchable: false
                        }
                    ]
                });
            });
        </script>
    @endsection