@extends('layouts.main-layout')

@section('content')

<style>
    
</style>
<div class="row">
    {{-- <div class="dt-buttons btn-group">
        <button class="btn btn-secondary buttons-excel">Excel</button>
        <button class="btn btn-secondary buttons-pdf">PDF</button>
        <button class="btn btn-secondary buttons-print">Print</button>
    </div> --}}
    
    <div class="col-lg-12">
        {{-- <div class="card card-statistics"> --}}
            <div class="card-body" style="background-color: #fff;">
                <div class="datatable-wrapper table-responsive text-dark table-bordered"
                style="min-height: 500px; padding:20px;">
                <div class="row d-flex justify-content-end"
                style="margin-bottom: 20px; margin-right: 5px;">
                    <a class="btn btn-primary" href="{{ route('users.show.create') }}"
                    style="width: 150px;">Create User</a>
                </div>
                    {{-- {!! $dataTable->table() !!} --}}
                    <table id="users_table" class="table">
                        <thead>
                            <tr>
                                <th>Name</th>
                                <th>Phone</th>
                                <th>Email</th>
                                {{-- <th>Two Sure</th> --}}
                                {{-- <th>Three Direct</th> --}}
                                {{-- <th>Permutations</th> --}}
                                {{-- <th>Message</th> --}}
                                <th>Created At</th>
                                <th>Updated At</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>
        {{-- </div> --}}
    </div>
</div>

{{-- {{ $dataTable->scripts() }} --}}

<script>
    $(function() {
        var table = $('#users_table').DataTable({
            // processing: true,
            serverSide: true,
            ajax: "{{ route('users') }}",
            columns: [
                // { data: 'id', name: 'id' },
                { data: 'name', name: 'name' },
                { data: 'phone', name: 'phone' },
                { data: 'email', name: 'email' },
                { data: 'created_at', name: 'created_at',
                    render: function(data) {
                    return moment(data).format('YYYY-MM-DD HH:mm:ss'); // Format using moment.js
                    }
                },{ data: 'updated_at', name: 'updated_at',
                    render: function(data) {
                    return moment(data).format('YYYY-MM-DD HH:mm:ss'); // Format using moment.js
                    }
                },
                { data: 'action', name: 'action' },
            ],
            dom: 'Bfrtip', // Include export buttons
            buttons: [
            {
                extend: 'copy',
                exportOptions: {
                    columns: [0, 1, 2, 3, 4] // Indexes of the columns to include in the export (0-based index)
                }
            },
            {
                extend: 'excel',
                exportOptions: {
                    columns: [0, 1, 2, 3, 4]
                },
                title: 'Users Data'
            },
            {
                extend: 'csv',
                exportOptions: {
                    columns: [0, 1, 2, 3, 4]
                },
                title: 'Users Data'
            },
            {
                extend: 'pdf',
                exportOptions: {
                    columns: [0, 1, 2, 3, 4]
                },
                title: 'Users Data'
            },
            {
                extend: 'print',
                exportOptions: {
                    columns: [0, 1, 2, 3, 4]
                },
                title: 'Users Data'
            }
        ]
        });

        // Adjust column visibility when exporting
        // table.on('preXhr.dt', function (e, settings, data) {
        //     if (data.draw == 1) {
        //         table.columns([2]).visible(false);
        //     }
        // });

        // table.on('draw.dt', function () {
        //     table.columns([2, 3, 4]).visible(true);
        // });
    });
</script>

@endsection