@extends('layouts.admin_default')
@section('title', 'Manage Users/Customers')
@section('page', 'Users / Customers List')
@section('content')

@section('content')
<style type="text/css">
    .w-content{
        display: flex;
        justify-content: space-between;
    }
    .w-info {
        display: flex;
        justify-content: space-between;
        font-size: 18px;
        font-weight: 600;
    }
    .w-info h6{
        padding: 6px 20px;
        font-weight: bold;
    }
    .w-icon {
        width: 40px;
        padding: 8px;
        border-radius: 50%;
        color: #fff;
    }
</style>
<div class="layout-px-spacing">
    <div class="row layout-top-spacing">
        
        <div class="col-xl-12 col-lg-12 col-sm-12  layout-spacing">

            <div class="widget-content widget-content-area br-6">

                <div id="delete_bd_ms"></div>
                @if(session()->has('message'))
                    <div class="alert alert-success alert-block">
                        <button type="button" class="close" data-dismiss="alert">×</button>
                        <strong>{{ session()->get('message') }}</strong>
                    </div>
                @endif
                <div class="text-right mt-4">
    <!-- <a href="{{url('add-user')}}" class="btn btn-primary mb-4">Add +</a> -->
</div>
                <div class="table-responsive mb-4 mt-4">

                    <table id="multi-column-ordering" class="table table-hover">
                        <thead>
                            <tr>
                                <th>Name</th>
                                <th>Email</th>
                                <th>Mobile</th>
                                <th>Role</th>
                                
                                <th>Created Date</th>
                                <th>Status</th>
                                <th>Action</th>
                                
                            </tr>
                        </thead>
                        <tbody id="tableItem">

                        </tbody>
                        <!-- <tfoot>
                            <tr>
                                <th>Name</th>
                                <th>Email</th>
                                <th>Mobile</th>
                                <th>Role</th>          
                                <th>Created Date</th>
                                <th>Status</th>
                                <th>Action</th>
                                
                            </tr>
                        </tfoot> -->
                    </table>
                </div>
            </div>
        </div>
    </div>

</div>

@endsection

@section('footer')

  <script type="text/javascript">
    $(document).ready(function(){

      // DataTable
      $('#multi-column-ordering').DataTable({
         processing: true,
         serverSide: true,
         ajax: "{{route('getCustomerList')}}",
         columns: [
            { data: 'name' },
            { data: 'email' },
            { data: 'mobile' },
            { data: 'role' },
           
            { data: 'created_at' },
            { data: 'status' },
            { data: 'action', orderable: false, searchable: false }
         ],
         drawCallback: function (settings) {

            var response = settings.json;
            $('#totalRecords').text(response.totalRecords);
            $('#activeRecords').text(response.activeRecords);
            $('#inactiveRecords').text(response.inactiveRecords);
            $('#deletedRecords').text(response.deletedRecords);
            console.log(response);
            updateIcon()

        },
      });
    });
    </script>

<!-- footer script if required -->
@endsection