@extends('admin.layouts.index')

@push('style')

<!-- third party css end -->
@endpush

@section('content')

<style>
     a {
          color: #47a0b6;
     }
</style>

<!-- Overlay For Sidebars -->
<div class="overlay"></div><!-- Search  -->
<div class="search-bar">
     <div class="search-icon"> <i class="material-icons">search</i> </div>
     <input type="text" placeholder="Explore Nexa...">
     <div class="close-search"> <i class="material-icons">close</i> </div>
</div>


<section class="content">
     <div class="block-header">
          <div class="row">
               <div class="col-lg-7 col-md-6 col-sm-12">
                    <h2>Users Data Tables
                         <small class="text-muted">Welcome to Language Cafe</small>
                    </h2>
               </div>
               <div class="col-lg-5 col-md-6 col-sm-12">
                    <ul class="breadcrumb float-md-right">
                         <li class="breadcrumb-item"><a href="{{route('admin.home')}}"><i class="zmdi zmdi-home"></i>Dashboard</a></li>
                         <li class="breadcrumb-item active">Users DataTables</li>
                    </ul>
               </div>
          </div>
     </div>


     <div class="container-fluid">
          <div class="row clearfix">
               <div class="col-lg-12 col-md-12 col-sm-12">
                    <div class="card">
                         <div class="header">
                              <h2> Users Data</h2>
                              <ul class="header-dropdown">
                                   <li class="dropdown"> <a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"> <i class="zmdi zmdi-more-vert"></i> </a>
                                        <ul class="dropdown-menu pull-right">
                                             <li><a href="javascript:void(0);">Action</a></li>
                                             <li><a href="javascript:void(0);">Another action</a></li>
                                             <li><a href="javascript:void(0);">Something else here</a></li>
                                        </ul>
                                   </li>
                              </ul>
                         </div>
                         <div class="body">
                              <div class="form-outline">
                                   <input type="text" id="search-input" class="form-control" placeholder="Search here" />
                              </div>
                              <div class="table-responsive">
                                   <table id="user_table" class="table table-bordered table-striped table-hover js-basic-example dataTable">
                                        <thead>
                                             <tr>
                                                  <th>Id</th>
                                                  <th>First Name</th>
                                                  <th>Last Name</th>
                                                  <th>Email</th>
                                                  <th>Country Code</th>
                                                  <th>Mobile Number</th>
                                                  <th>Mother Language</th>
                                                  <th>Location</th>
                                                  <th>Practice Language</th>
                                                  <th>Action</th>
                                             </tr>
                                        </thead>
                                        <tbody>

                                        </tbody>
                                   </table>
                              </div>
                         </div>
                    </div>
               </div>
          </div>

     </div>
</section>
@endsection

@push('script')

<script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>

<script>
     var table;

     $(document).ready(function() {

          table = $('#user_table').DataTable({
               searching: false,
               processing: true,
               serverSide: true,
               responsive: false,
               aaSorting: [
                    [0, 'asc']
               ],
               "ajax": {
                    type: 'GET',
                    url: "{{route('admin.get_user_listing')}}",
                    data: function(d) {
                         d.keyword = $('#search-input').val();
                    }
               },
               "columns": [{
                         data: 'id',
                         render: function(data, type, row, meta) {
                              var serialNumber = meta.row + meta.settings._iDisplayStart + 1;
                              return serialNumber;
                         },
                    },
                    {
                         data: 'first_name',
                         orderable: false,
                    },
                    {
                         data: 'last_name',
                         orderable: false,
                    },
                    {
                         data: 'email',
                         orderable: false,
                    },
                    {
                         data: 'country_code',
                         orderable: false,
                    },
                    {
                         data: 'mobile_number',
                         orderable: false,
                    },
                    {
                         data: 'mother_language',
                         orderable: false,
                    },
                    {
                         data: 'location',
                         orderable: false,
                    },
                    {
                         data: 'practice_language',
                         orderable: false,
                    },
                    {
                         data: 'action',
                         orderable: false,
                    },

               ],
          });

          $('#search-input').on('keyup', function() {
               table.search($(this).val()).draw();
          });




          $(document).on('click', '.btnBlockUser', function() {
               var userId = $(this).data('id');

               Swal.fire({
                    title: 'Confirmation',
                    text: 'Are you sure you want to block this user?',
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#3085d6',
                    cancelButtonColor: '#d33',
                    confirmButtonText: 'Yes, block user'
               }).then((result) => {
                    if (result.isConfirmed) {
                         $.ajax({
                              url: '{{ route("admin.block_user") }}',
                              type: 'POST',
                              dataType: 'json',
                              data: {
                                   _token: '{{ csrf_token() }}',
                                   user_id: userId
                              },

                              success: function(response) {
                                   $('.btnBlockUser[data-id="' + userId + '"]').replaceWith('<a href="javascript:void(0)" class="btn btn-xs btn-warning mx-2 btnUnblockUser" data-id="' + userId + '" title="Unblock"><i class="fa fa-lock-open"></i> Unblock</a>');
                                   Swal.fire('Success', response.success, 'success');
                              },
                              error: function(xhr, status, error) {
                                   console.log(xhr.responseText);
                              }
                         });
                    }
               });
          });


          $(document).on('click', '.btnUnblockUser', function() {
               var userId = $(this).data('id');

               Swal.fire({
                    title: 'Confirmation',
                    text: 'Are you sure you want to unblock this user?',
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#3085d6',
                    cancelButtonColor: '#d33',
                    confirmButtonText: 'Yes, unblock user'
               }).then((result) => {
                    if (result.isConfirmed) {
                         $.ajax({
                              url: '{{ route("admin.unblock_user") }}',
                              type: 'POST',
                              dataType: 'json',
                              data: {
                                   _token: '{{ csrf_token() }}',
                                   user_id: userId
                              },
                              success: function(response) {
                                   $('.btnUnblockUser[data-id="' + userId + '"]').replaceWith('<a href="javascript:void(0)" class="btn btn-xs btn-danger mx-2 btnBlockUser" data-id="' + userId + '"  title="Block"><i class="fa fa-lock"></i> Block</a>');
                                   Swal.fire('Success', response.success, 'success');
                              },
                              error: function(xhr, status, error) {
                                   console.log(xhr.responseText);
                              }
                         });
                    }
               });
          });


     });
</script>

@endpush




















<!-- 
@extends('admin.layouts.index')

@push('style')


@endpush

@section('content')

<body class="theme-orange">

     <div class="overlay"></div>
     <div class="search-bar">
          <div class="search-icon"> <i class="material-icons">search</i> </div>
          <input type="text" placeholder="Explore Nexa...">
          <div class="close-search"> <i class="material-icons">close</i> </div>
     </div>




     <section class="content">
          <div class="block-header">
               <div class="row">
                    <div class="col-lg-7 col-md-6 col-sm-12">
                         <h2>Jquery DataTables
                              <small class="text-muted">Welcome to Nexa Application</small>
                         </h2>
                    </div>
                    <div class="col-lg-5 col-md-6 col-sm-12">
                         <ul class="breadcrumb float-md-right">
                              <li class="breadcrumb-item"><a href="index.html"><i class="zmdi zmdi-home"></i> Nexa</a></li>
                              <li class="breadcrumb-item"><a href="javascript:void(0);">Tables</a></li>
                              <li class="breadcrumb-item active">Jquery DataTables</li>
                         </ul>
                    </div>
               </div>
          </div>


          <div class="container-fluid">
               <div class="row clearfix">
                    <div class="col-lg-12 col-md-12 col-sm-12">
                         <div class="card">
                              <div class="header">
                                   <h2> BASIC EXAMPLE </h2>
                                   <ul class="header-dropdown">
                                        <li class="dropdown"> <a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
                                                  <i class="zmdi zmdi-more-vert"></i> </a>
                                             <ul class="dropdown-menu pull-right">
                                                  <li><a href="javascript:void(0);">Action</a></li>
                                                  <li><a href="javascript:void(0);">Another action</a></li>
                                                  <li><a href="javascript:void(0);">Something else here</a></li>
                                             </ul>
                                        </li>
                                   </ul>
                              </div>
                              <div class="body">
                                   <div class="table-responsive">
                                        <table id="user_table" class="table table-bordered table-striped table-hover js-basic-example dataTable">
                                             <thead>
                                                  <tr>
                                                       <th>Id</th>
                                                       <th>First Name</th>
                                                       <th>Last Name</th>
                                                       <th>Email</th>
                                                       <th>Country Code</th>
                                                       <th>Mobile Number</th>
                                                       <th>Mother Language</th>
                                                       <th>Location</th>
                                                       <th>Practice Language</th>
                                                       <th>Action</th>
                                                  </tr>
                                             </thead>
                                             <tbody>

                                             </tbody>
                                        </table>
                                   </div>
                              </div>
                         </div>
                    </div>
               </div>

          </div>
     </section>

     @endsection

     @push('script')

     <script src="{{asset('assets/libs/datatables.net/js/jquery.dataTables.min.js')}}"></script>

     <script>
          var table;

          $(document).ready(function() {

               table = $('#user_table').DataTable({
                    searching: false,
                    processing: true,
                    serverSide: true,
                    responsive: false,
                    aaSorting: [
                         [0, 'asc']
                    ],
                    "ajax": {
                         type: 'GET',
                         url: "{{route('admin.get_user_listing')}}",
                         data: function(d) {
                              d.keyword = $('#search-input').val();
                         }
                    },
                    "columns": [{
                              data: 'id',
                              render: function(data, type, row, meta) {
                                   var serialNumber = meta.row + meta.settings._iDisplayStart + 1;
                                   return serialNumber;
                              },
                         },
                         {
                              data: 'first_name',
                              orderable: false,
                         },
                         {
                              data: 'last_name',
                              orderable: false,
                         },
                         {
                              data: 'email',
                              orderable: false,
                         },
                         {
                              data: 'country_code',
                              orderable: false,
                         },
                         {
                              data: 'mobile_number',
                              orderable: false,
                         },
                         {
                              data: 'mother_language',
                              orderable: false,
                         },
                         {
                              data: 'location',
                              orderable: false,
                         },
                         {
                              data: 'practice_language',
                              orderable: false,
                         },
                         {
                              data: 'action',
                              orderable: false,
                         },

                    ],
               });

               $('#search-input').on('keyup', function() {
                    table.search($(this).val()).draw();
               });




               $(document).on('click', '.btnBlockUser', function() {
                    var userId = $(this).data('id');

                    Swal.fire({
                         title: 'Confirmation',
                         text: 'Are you sure you want to block this user?',
                         icon: 'warning',
                         showCancelButton: true,
                         confirmButtonColor: '#3085d6',
                         cancelButtonColor: '#d33',
                         confirmButtonText: 'Yes, block user'
                    }).then((result) => {
                         if (result.isConfirmed) {
                              $.ajax({
                                   url: '{{ route("admin.block_user") }}',
                                   type: 'POST',
                                   dataType: 'json',
                                   data: {
                                        _token: '{{ csrf_token() }}',
                                        user_id: userId
                                   },

                                   success: function(response) {
                                        $('.btnBlockUser[data-id="' + userId + '"]').replaceWith('<a href="javascript:void(0)" class="btn btn-xs btn-warning mx-2 btnUnblockUser" data-id="' + userId + '" title="Unblock"><i class="fa fa-lock-open"></i> Unblock</a>');
                                        Swal.fire('Success', response.success, 'success');
                                   },
                                   error: function(xhr, status, error) {
                                        console.log(xhr.responseText);
                                   }
                              });
                         }
                    });
               });


               $(document).on('click', '.btnUnblockUser', function() {
                    var userId = $(this).data('id');

                    Swal.fire({
                         title: 'Confirmation',
                         text: 'Are you sure you want to unblock this user?',
                         icon: 'warning',
                         showCancelButton: true,
                         confirmButtonColor: '#3085d6',
                         cancelButtonColor: '#d33',
                         confirmButtonText: 'Yes, unblock user'
                    }).then((result) => {
                         if (result.isConfirmed) {
                              $.ajax({
                                   url: '{{ route("admin.unblock_user") }}',
                                   type: 'POST',
                                   dataType: 'json',
                                   data: {
                                        _token: '{{ csrf_token() }}',
                                        user_id: userId
                                   },
                                   success: function(response) {
                                        $('.btnUnblockUser[data-id="' + userId + '"]').replaceWith('<a href="javascript:void(0)" class="btn btn-xs btn-danger mx-2 btnBlockUser" data-id="' + userId + '"  title="Block"><i class="fa fa-lock"></i> Block</a>');
                                        Swal.fire('Success', response.success, 'success');
                                   },
                                   error: function(xhr, status, error) {
                                        console.log(xhr.responseText);
                                   }
                              });
                         }
                    });
               });


          });
     </script>
     <script src="{{asset('assets/js/pages/tables/jquery-datatable.js')}}"></script>

     @endpush -->