@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>
                         </div>
                         <div class="body">
                              <div class="form-outline">
                                   
                                   <div class="form-group form-float">
                                        <div class="form-line" style="width: 20%; margin-left: 13px;">
                                        <input type="text" id="search-input" class="form-control" placeholder="Search here"/>
                                        </div>
                                   </div>
                              </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="{{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>

@endpush