@extends('layouts.main')
@section('title', 'Users')

@section('breadcrumb')
  <li class="breadcrumb-item"><a href="/">Home</a></li>
  <li class="breadcrumb-item active">Users</li>
@endsection

@section('content')

  <script src="{{ env('APP_PREFIX') }}/js/user.js"></script>

  <div class="row">

    <div class="col-lg-12">
      <div class="card-box">

        @if (session()->get('status') == 'success')
          <div class="alert alert-success alert-dismissible fade show text-center" role="alert">
            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
              <span aria-hidden="true">×</span>
            </button>
            <h4>User Information Has Been Saved Successfully</h4>
          </div>
        @endif

        <a href="{{ route('add.user.layout') }}" type="button" class="btn btn-sm btn-dark waves-effect waves-light float-right">
          <i class="mdi mdi-plus-circle mr-1"></i>Add New User
        </a>

        <div class="table-responsive">
          <table class="table table-hover mt-3">

            <thead class="thead-light">
            <tr>
              {{--<th>#</th>--}}
              <th></th>
              <th>Name</th>
              <th>Email</th>
              <th>Phone</th>
              <th>Role</th>
              <th>Designation</th>
              <th>Status</th>
              <th width="17%">Action</th>
            </tr>
            </thead>

            <tbody id="user_table">

            @foreach($users as $user)

              <tr class="pointer" id="user_{{ $user->id }}">
                {{--<td>{{ $loop->index + 1 }}</td>--}}
                <td><img src="{{ env('APP_PREFIX') }}/images/users/{{ $user->user_img }}" alt="image" class="img-fluid avatar-sm rounded mt-2"></td>
                <td>
                  @if($user->status == '1')
                    {{ $user->name }}
                  @else
                    <strike>{{ $user->name }}</strike>
                  @endif
                </td>
                <td>{{ $user->email }}</td>
                <td>{{ $user->phone }}</td>
                <td>{{ camelize($user->role) }}</td>
                <td>{{ $user->designation_name }}</td>
                <td>
                  @if($user->status == '1')
                    <span class="badge badge-success font-16">Active</span>
                  @else
                    <span class="badge badge-danger font-16">Inactive</span>
                  @endif
                </td>
                <td>


                  <button type="button" class="btn btn-warning waves-effect waves-light" title="Change Password"
                          onclick="editPassword({{ $user->id }})" >
                    <i class="fe-lock"></i>
                  </button>


                  <a href="{{ env('APP_PREFIX') }}/edit/user/{{ $user->id }}" type="button" class="btn btn-blue waves-effect waves-light" title="Edit User">
                    <i class="fe-edit"></i>
                  </a>

                  @if($user->status == '1')
                    <button type="button" class="btn btn-danger waves-effect waves-light" title="Ban User"
                            onclick="banUser({{ $user->id }})">
                      <i class="mdi mdi-account-off
"></i>
                    </button>
                  @else
                    <button type="button" class="btn btn-success waves-effect waves-light" title="Activate User"
                            onclick="activateUser({{ $user->id }})">
                      <i class="mdi mdi-account-multiple-check"></i>
                    </button>
                  @endif

                </td>
              </tr>

            @endforeach


            </tbody>
          </table>

        </div>

      </div>
    </div>

  </div>

  <div id="edit_password_modal" class="modal bounceInDown animated">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h4 class="modal-title">Change Password</h4>
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        </div>
        <div class="modal-body p-4">

          <input type="hidden" id="edit_password_id" value="0">

          <form class="">
            <div class="row">
              <div class="col-md-12">
                <div class="form-group">
                  <label for="new_password" class="control-label">New Password</label>
                  <input type="password" class="form-control" id="new_password" autocomplete="off">
                </div>
              </div>
            </div>

            <div class="row">
              <div class="col-md-12">
                <div class="form-group">
                  <label for="retype_password" class="control-label">Retype Password</label>
                  <input type="password" class="form-control" id="retype_password" autocomplete="off">
                </div>
              </div>
            </div>
          </form>

        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary waves-effect" data-dismiss="modal">Close</button>
          <button type="button" class="btn btn-blue waves-effect waves-light" data-dismiss="modal" id="edit_password_button">Save</button>
        </div>
      </div>
    </div>
  </div>

@endsection