@extends('layouts.master')

@section('css')
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.20/css/dataTables.bootstrap4.min.css">
@endsection

@section('title')
VoiceSync:Users
@endsection

@section('content.header.title')

@endsection

@section('content.header.info')

@endsection

@section('content')
<section class="content">
  <div class="container-fluid">
    <div class="row">
      <!-- left column -->
      <div class="col-md-12">
        <div class="card">
          <div class="card-header">
            <h2 class="card-title">Users</h2>
            <div class="card-tools">
              <a class="btn btn-warning" href="{{ route('users-download') }}" role="button">Download
                Report</span>
              </a>
            </div>
          </div>
          <div class="card-body">
            <form role="" method="POST" action="">
              @csrf
            </form>
            <table id="users" class="table table-bordered table-striped table-hover">
              <thead>
                <tr>
                  <th>VSID</th>
                  <th>First Name</th>
                  <th>Last Name</th>
                  <th>Email</th>
                  <th>Referred By</th>
                  <th>Account Type</th>
                  <th>Renewal Date</th>
                  <th>Expiration Date</th>
                  <th>Status</th>
                </tr>
              </thead>
              <tbody>
                @foreach($users as $user)
                <tr>
                  <td><a href="{{ url('users')}}/{{ $user->id }}">{{ $user->vsid }}</a></td>
                  <td>{{ $user->first_name }}</td>
                  <td>{{ $user->last_name }}</td>
                  <td>{{ $user->email }}</td>
                  <td>
                    @if($user->referral_user_id > 0)
                    <a
                      href="{{ url('users')}}/{{ $user->referral_user_id }}">{{ $user->referral_id }}</a>
                    @endif
                  </td>
                  <td>{{$user->account_type}}</td>
                  <td>{{ \Carbon\Carbon::parse($user->renewal_date)->format('m/d/Y')}}</td>
                  <td>{{ \Carbon\Carbon::parse($user->expiration_date)->format('m/d/Y')}}</td>
                  <td>@if ($user->current_flag == 1)
                    <button type="button" class="btn btn-primary" user-id="{{ $user->id }}"
                      name="statusButton" act="1" data-toggle="tooltip"
                      data-placement="top"
                      title="Click to deactivate User">Active</button>
                    @else
                    <button type="button" class="btn btn-danger" user-id="{{ $user->id }}"
                      name="statusButton" act="0" data-toggle="tooltip"
                      data-placement="top"
                      title="Click to activate User">Inactive</button>
                    @endif
                  </td>
                </tr>
                @endforeach
              </tbody>
            </table>
          </div>
          <!-- /.card-body -->
        </div>
      </div>
    </div>
    <!-- /.row -->
  </div><!-- /.container-fluid -->
</section>
@endsection('content')

@section('javascript')
<script type="text/javascript" src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script src="{{ asset('js/plugins/datatables/dataTables.bootstrap4.min.js') }}"></script>

<script>
    $(document).ready(function () {
      var table = $('#users').DataTable();

      funcClick();

      table.on( 'draw', function () {
        funcClick();
      } );

      function funcClick() {
        $('button[name="statusButton"]').click(function () {
          var userID = $(this).attr("user-id");
          var actStatus = $(this).attr("act");

          $.ajaxSetup({
            headers: {
              'X-CSRF-TOKEN': $('input[name="_token"]').attr('value')
            }
          });

          $.ajax({
            type: 'POST',
            url: '{{route('user-toggle')}}',
            data: {
              userid: userID,
              status: actStatus
            },
            success: function (data) {
              if (data.status == "1")
              {
                var btn = $('button[user-id="'+ userID +'"]');
                $(btn).attr("act", (actStatus == 1? "0" : "1"));
                $(btn).attr("title", (actStatus == 0? "Click to activate User" : "Click to deactivate User"));
                $(btn).html((actStatus == 0? "Active" : "Inactive"));
                $(btn).attr("class", (actStatus == 0? "btn btn-primary" : "btn btn-danger"));
              }
            }
          });
        });
      }



    });
  </script>
@endsection