@extends('layouts.app')

@section('form-title') {{ __('Users') }} @endsection
@section('form-sub-title') {{ __('Click a user to view more information') }} @endsection

@section('breadcrumb') 
<li class="breadcrumb-item"><a href="{{ route('users.index') }}">{{ __('Users') }}</a> </li> 
@endsection
    
@section('content')

<div class="pcoded-inner-content">
  <div class="main-body">
    <div class="page-wrapper">
      <div class="page-body">
        <div class="row">
          @if(canViewUpdate('add users of own organization') || canViewUpdate('add users of other organizations'))
          {{-- Add new organisation start --}}
          <div class="col-sm-5">
            <div class="card mb-0">
              <div class="card-header">
                <h5>{{ __('New user') }}</h5>
              </div>
              <div class="card-block">
                <div class="input-group">
                  <a class="btn btn-primary" href="{{ route('users.create') }}"> 
                    {{ __('Add new user') }} 
                  </a>
                </div>
              </div>
            </div>
          </div>
          @endif
          {{-- Add new organisation end --}}
          <div class="col-sm-7">
            <div class="card">
              <div class="card-header">
                <h5>{{ __('Search user') }}</h5>
              </div>
              <div class="card-block">
                <div class="user-box">
                  <form action="{{ route('users.search') }}" method="post">
                    @csrf
                    <div class="input-group chat-search-box">
                      <input type="text" name="search" id="search_user" class="form-control" placeholder="{{ __('Search for') }}" value="@if(!empty($search)) {{ $search }} @endif">
                      <input type="hidden" name="user_type" id="user_type" value="">
                      <button class="btn btn-primary" type="submit" id="btn_search_user">
                        <span id="search_spinner" class="spinner-border spinner-border-sm" style="display: none;"></span>
                        {{ __('Search') }}
                      </button>
                    </div>
                  </form>
                  <div id="search-box"></div>
                </div>
              </div>
            </div>
          </div>
          {{-- Search end --}}
        </div>
        <div class="row">
          <div class="card">
            <div class="card-header">
              <h5>{{ __('Users') }}</h5>
            </div>
            <div class="card-block">
              <div class="row mb-3">
                <div class="table-responsive">
                  <table class="table table-striped data-table">
                    <thead>
                      <tr>
                        <th>{{ __('User') }}</th>
                        <th>{{ __('Organisation') }}</th>
                        <th>{{ __('Email address') }}</th>
                        <th data-sortable="false">{{ __('Phone') }}</th>
                        <th data-sortable="false">{{ __('Mobile') }}</th>
                        <th>{{ __('Role') }}</th>
                        <th>{{ __('Status') }}</th>
                      </tr>
                    </thead>
                    <tbody>
                      @forelse ($users as $user)
                        <tr>
                          <td><a class="a-blue" href="{{ route('users.show', $user->uuid) }}"> {{ $user->name }}</a></td>
                          <td>
                            @if(!empty($user->organisation)) 
                            <a class="a-blue" href="{{ route('organisations.show', $user->organisation->uuid) }}"> {{ $user->organisation->name }}</a>
                            @else
                            {{ '' }} 
                            @endif
                          </td>
                          <td><a class="a-blue" href="mailto:{{ $user->email }}">{{ $user->email }}</a></td>
                          <td><a class="a-blue" href="tel:{{ formatPhoneNumber($user->phone) }}">{{ formatPhoneNumber($user->phone) }}</a></td>
                          <td><a class="a-blue" href="tel:{{ formatPhoneNumber($user->mobile) }}">{{ formatPhoneNumber($user->mobile) }}</a></td>
                          <td>{{ $user->displayRole($user) }}</td>
                          <td>{{ $user->display_status }}</td>
                        </tr>
                      @empty
                        <tr>
                          <td colspan="7" class="text-center">
                            {{ __('No result found') }}
                          </td>
                        </tr>
                      @endforelse
                    </tbody>
                  </table>
                </div>
              </div>
              <div class="row text-center">
                {{ $users->links() }}
              </div>
            </div>
          </div>
        </div>
        {{-- Organisation listing end --}}
      </div>
    </div>
  </div>
</div>
@endsection

@push('child-scripts')
<script>
  $('.data-table').footable({
    "paging": {
      "enabled": false,
    },
    "sorting": {
      "enabled": true
    }
  });

  $("#search_user").keyup(function(){
    let search_text = $(this).val();
    let user_type = $('#user_type').val();
    
    if(search_text.length >= 3){
      $.ajax({
          url: "{{ route('users.search') }}",
          method: 'post',
          data: {search: search_text, user_type: user_type},
          beforeSend: function(){
            $('#search_spinner').show();
          },
          headers: {
              'X-CSRF-TOKEN': '{{ csrf_token() }}'
          },
          success: function(data){
            $('#search-box').html(data);
            $('#search_spinner').hide();
          }
      });
    }else if(search_text.length == 0){
      $('#search-box').html('');
    }
  });
</script>
@endpush