@extends('admin.dashboard')
@section('content')
    <section class="contact pad-btm">

        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <div class="constes m3-h wow fadeInUp">
                        <h4>Users List</h4>
                    </div>
                    <div class="row">
                        <div class="col-md-3">
                            <label for="">Select Status</label>
                            <select name="status" id="status" class="form-control_profile" onchange="userListDetail()">
                                <option value="">Select All</option>
                                <option selected value="1">Active</option>
                                <option value="0">InActive</option>
                                <option value="2">Deleted</option>
                                <option value="3">Bad Email</option>
                                <option value="5">Sleeping</option>
                                <option value="6">Banned</option>
                                <option value="7">UnSubscribed</option>
                            </select>
                        </div>
                    </div>
                    <div class="table-responsive" id="tableData"></div>
                </div>
            </div>
        </div>
    </section>
@endsection
@section('script')
    <script>
        $(document).ready(function() {
            userListDetail();

            $('#data-table').DataTable({
                paging: true,
                order: [],
                lengthMenu: [25, 50, 100, 200],
                dom: '<"top"Bf>rt<"bottom"lp><"clear">', // Customize the DOM structure
                buttons: [
                    'excel', // Enable Excel export button
                    'pdf',   // Enable PDF export button
                    'print',
                    'colvis'
                ]
            });
        });

        function userListDetail() {
            var status = $('#status').val();
            $('#tableData').html('<div class="loader"></div>');
            $.ajax({
                url: '{{ url('/') }}/userListDetail',
                type: 'GET',
                data: {status: status},
                success: function (result) {
                    $('#tableData').html(result);
                    $('#data-table').DataTable({
                        "destroy": true, //use for reinitialize datatable
                        paging: true,
                        order: [],
                        lengthMenu: [25, 50, 100, 200],
                        dom: '<"top"Bf>rt<"bottom"lp><"clear">', // Customize the DOM structure
                        buttons: [
                            'excel', // Enable Excel export button
                            'pdf',   // Enable PDF export button
                            'print',
                            'colvis'
                        ]

                    });
                },
                error: function () {
                }
            });

        }
    </script>
@endsection