@extends('portal.layouts.app', [
'class' => '',
'elementActive' => ''
])
@section('title','Users')

@section('css')
<style>
/* Optional styling tweaks */
#generated_link {
  font-size: 0.9rem;
}
</style>
@endsection

@section('content')
<div id="content-page" class="content-page">
  <div class="container-fluid">
    <div class="row">
      <div class="col-sm-12">
        <div class="iq-card">
          <div class="iq-card-header d-flex justify-content-between">
            <div class="iq-header-title">
              <h4 class="card-title">User List</h4>
            </div>

            @can('create user')
              <button type="button" class="btn btn-primary float-left" data-toggle="modal" data-target=".bd-example-modal-lg">
                <i class="fa fa-plus"></i> Add User
              </button>

              <div class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" data-backdrop="static" aria-hidden="true">
                <div class="modal-dialog modal-lg">
                  <div class="modal-content">
                    <div class="modal-header">
                      <h5 class="modal-title">User Details</h5> <br>
                      <button type="button" class="close" data-dismiss="modal">&times;</button>
                    </div>
                    <div class="modal-body">
                      <p class="text-warning">The User will receive an Email with Login Credentials</p>
                      <div class="iq-card-body">
                        <form class="form-horizontal autosubmit" action="{{ route('admin.createuser') }}" method="POST">
                          @csrf
                          <div class="form-group row">
                            <label class="control-label col-sm-2 align-self-center mb-0">Name:</label>
                            <div class="col-sm-10">
                              <input type="text" name="name" class="form-control" placeholder="eg. Keen Doe">
                            </div>
                          </div>

                          <div class="form-group row">
                            <label class="control-label col-sm-2 align-self-center mb-0">Phone:</label>
                            <div class="col-sm-10">
                              <input type="text" name="phone" class="form-control" placeholder="eg. 0712345678">
                            </div>
                          </div>

                          <div class="form-group row">
                            <label class="control-label col-sm-2 align-self-center mb-0">Email:</label>
                            <div class="col-sm-10">
                              <input type="email" name="email" class="form-control" placeholder="eg. user@gmail.com">
                            </div>
                          </div>

                          <div class="form-group row">
                            <label class="control-label col-sm-2 align-self-center mb-0">National ID:</label>
                            <div class="col-sm-10">
                              <input type="text" name="national_id" class="form-control" placeholder="eg. 00000000">
                            </div>
                          </div>

                          <div class="form-group row">
                            <label class="control-label col-sm-2 align-self-center mb-0">User Role:</label>
                            <div class="col-sm-10">
                              <input type="text" name="user_role" class="form-control" placeholder="eg. Front Office Admin">
                            </div>
                          </div>

                          <div class="form-group row">
                            <label class="control-label col-sm-2 align-self-center mb-0">System Role:</label>
                            <div class="col-sm-10">
                              <select name="role" class="form-control select2">
                                <option value="">Choose Role</option>
                                @foreach ($roles as $item)
                                  <option value="{{ $item->name }}">{{ $item->name }}</option>
                                @endforeach
                              </select>
                            </div>
                          </div>

                          <div class="form-group">
                            <div class="float-left">
                              <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                            </div>
                            <div class="float-right">
                              <button type="submit" class="btn btn-primary">Add</button>
                            </div>
                          </div>
                        </form>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            @endcan
          </div>

          <div class="iq-card-body">
            <div class="table-responsive">
              <table id="datatable" class="table downloadable table-striped table-bordered">
                <thead>
                  <tr>
                    <th>#</th>
                    <th>Name</th>
                    <th>Role</th>
                    <th>Phone</th>
                    <th>ID No</th>
                    <th>Email</th>
                    <th>Created On</th>
                    <th>Action</th>
                  </tr>
                </thead>
                <tbody>
                  @foreach($data as $k => $item)
                    <tr>
                      <td>{{ $k + 1 }}</td>
                      <td>
                        {{ $item->name }} <br>
                        @if ($item->account_status)
                          <span class="badge badge-info">Active</span>
                        @else
                          <span class="badge badge-danger">Suspended</span>
                        @endif
                      </td>
                      <td>
                        <span>{{ $item->role }}</span><br/>
                        @if($item->roles->isNotEmpty())
                          @foreach($item->roles as $role)
                            <span class="badge badge-primary">{{ $role->name }}</span>
                          @endforeach
                        @else
                          <span class="badge badge-secondary">No Role</span>
                        @endif
                      </td>
                      <td>{{ $item->phone }}</td>
                      <td>{{ $item->national_id }}</td>
                      <td>{{ $item->email }}</td>
                      <td>{{ \Carbon\Carbon::parse($item->created_at)->format('M jS Y, g:i A') }}</td>
                      <td>
                        <div class="dropdown">
                          <button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown">
                            Menu
                          </button>
                          <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                            @can('update user')
                              <a class="dropdown-item text-primary editUserBtn"
                                 href="#"
                                 data-id="{{ $item->id }}"
                                 data-name="{{ $item->name }}"
                                 data-phone="{{ $item->phone }}"
                                 data-email="{{ $item->email }}"
                                 data-national_id="{{ $item->national_id }}"
                                 data-user_role="{{ $item->role }}"
                                 data-toggle="modal"
                                 data-target="#editUserModal">
                                 Edit
                              </a>
                            @endcan
                            @can('update user permissions')
                              <a class="dropdown-item" href="{{ route('admin.userpermissions',['user'=>$item->id]) }}">Permissions</a>
                            @endcan
                            @can('delete user')
                              <a class="dropdown-item text-danger" href="{{ route('admin.deleteuser',['user'=>$item->id]) }}">Delete</a>
                            @endcan
                            @can('update user account status')
                              @if ($item->account_status)
                                <a class="dropdown-item" href="{{ route('admin.updateuseraccountstatus',['user'=>$item->id]) }}">De-Activate</a>
                              @else
                                <a class="dropdown-item" href="{{ route('admin.updateuseraccountstatus',['user'=>$item->id]) }}">Activate</a>
                              @endif
                            @endcan
                            @can('generate auto login link')
                              <a class="dropdown-item autologinbtn"
                                 href="{{ route('admin.generateautologinlink',['user'=>$item->id]) }}"
                                 data-name="{{ $item->name }}">
                                 Auto Login Link
                              </a>
                            @endcan
                          </div>
                        </div>
                      </td>
                    </tr>
                  @endforeach
                </tbody>
              </table>
            </div>
          </div>

        </div>
      </div>
    </div>
  </div>
</div>
      <!-- Edit User Modal -->
<div class="modal fade" id="editUserModal" tabindex="-1" role="dialog" aria-hidden="true">
   <div class="modal-dialog modal-lg" role="document">
      <form method="POST" class="autosubmit" id="editUserForm">
         @csrf
         @method('PUT')
         <div class="modal-content">
             <!-- Loading Icon -->
            <div class="form-group loadingIcon" style="display: none;">
                <div class="alert text-white bg-info" role="alert">
                    <div class="iq-alert-icon p-4 border-1"><i class="fa fa-spinner fa-spin"></i></div>
                    <div class="iq-alert-text btn">Processing, please wait...</div>
                </div>
            </div>
            <div class="modal-header">
               <h5 class="modal-title">Edit User</h5>
               <button type="button" class="close" data-dismiss="modal">
                  <span>&times;</span>
               </button>
            </div>
            <div class="modal-body">
               <div class="form-group row">
                  <label class="col-sm-2">Name:</label>
                  <div class="col-sm-10">
                     <input type="text" class="form-control" name="name" id="edit_name">
                  </div>
               </div>
               <div class="form-group row">
                  <label class="col-sm-2">Phone:</label>
                  <div class="col-sm-10">
                     <input type="text" class="form-control" name="phone" id="edit_phone">
                  </div>
               </div>
               <div class="form-group row">
                  <label class="col-sm-2">Email:</label>
                  <div class="col-sm-10">
                     <input type="email" class="form-control" name="email" id="edit_email">
                  </div>
               </div>
               <div class="form-group row">
                  <label class="col-sm-2">National ID:</label>
                  <div class="col-sm-10">
                     <input type="text" class="form-control" name="national_id" id="edit_national_id">
                  </div>
               </div>
               <div class="form-group row">
                  <label class="col-sm-2">User Role:</label>
                  <div class="col-sm-10">
                     <input type="text" class="form-control" name="user_role" id="edit_user_role">
                  </div>
               </div>
               <div class="form-group row">
                  <label class="col-sm-2">System Role: <span class="text-warning">Only edit this field when updating role otherwise leave it blank</span></label>

                  <div class="col-sm-10">
                     <select name="role" class="form-control" id="edit_role">
                       <option value="">Choose Role</option>
                       @foreach ($roles as $role)
                          <option value="{{ $role->name }}">{{ $role->name }}</option>
                       @endforeach
                    </select>
                  </div>
               </div>
              
            </div>
            <div class="modal-footer">
               <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
               <button type="submit" class="btn btn-primary">Update</button>
            </div>
         </div>
      </form>
   </div>
</div>

<!-- Generate Login Link Modal -->
<div class="modal fade" id="generateLoginLinkModal" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Generate Link</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <div class="form-group">
          <label>Name</label>
          <input type="text" id="link_name" class="form-control" readonly>
        </div>
        <div class="form-group">
          <label>Link</label>
          <div class="input-group">
            <input type="text" id="generated_link" class="form-control" readonly>
            <div class="input-group-append">
              <button class="btn btn-outline-secondary" id="copyBtn" type="button">Copy</button>
            </div>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary" id="generateBtn">Generate</button>
      </div>
    </div>
  </div>
</div>
@endsection

@section('script')
<script src="{{ asset('portal/js/formsubmission.js') }}"></script>
<script>
$(function() {
    $(document).on('click','.editUserBtn', function(){
         let userId = $(this).data('id');
         const url = "{{route('admin.updateuser',['user'=>':user'])}}";
         var actionUrl = url.replace(':user',userId);
         $('#editUserForm').attr('action', actionUrl);

         $('#edit_name').val($(this).data('name'));
         $('#edit_phone').val($(this).data('phone'));
         $('#edit_email').val($(this).data('email'));
         $('#edit_national_id').val($(this).data('national_id'));
         $('#edit_user_role').val($(this).data('user_role'));
      });

  // When Auto Login button is clicked
  $(document).on('click', '.autologinbtn', function(e) {
    e.preventDefault();
    const url = $(this).attr('href');
    const name = $(this).data('name');

    $('#link_name').val(name);
    $('#generated_link').val('');
    $('#generateBtn').data('url', url).text('Generate').prop('disabled', false);
    $('#generateLoginLinkModal').modal('show');
  });

  // Generate or Regenerate link
  $(document).on('click', '#generateBtn', function() {
    const $btn = $(this);
    const url = $btn.data('url');
    if (!url) return;

    $btn.prop('disabled', true).text('Generating...');

    $.ajax({
      url: url,
      type: 'GET',
      success: function(res) {
        const link = res.link || res;
        $('#generated_link').val(link);
        $btn.text('Regenerate');
      },
      error: function() {
        alert('Failed to generate link');
        $btn.text('Generate');
      },
      complete: function() {
        $btn.prop('disabled', false);
      }
    });
  });

  // Copy link to clipboard
  $(document).on('click', '#copyBtn', function() {
    const link = $('#generated_link').val();
    if (!link) return;

    navigator.clipboard.writeText(link);
    const $btn = $(this);
    $btn.text('Copied!');
    setTimeout(() => $btn.text('Copy'), 2000);
  });

});
</script>
@endsection