@extends('layouts.app')


@section('content')

    {{-- <div class="row">
        <div class="col-6">
            <div class="card mt-4">
                <div class="card-header">
                  <h4 class="text-success">App Supports on Duty</h4>
                </div>
                <div class="card-body">
                  <ul class="list-unstyled user-details list-unstyled-border list-unstyled-noborder">
                   
                    <li class="media">
                      <img alt="image" class="mr-3 rounded-circle" width="50" src="{{ asset('app/img/user.png') }}">
                      <div class="media-body">
                        <div class="media-title">Name of User</div>
                      </div>
                      <div class="media-items">
                        <div class="media-item">
                          <div class="media-value">4,872</div>
                          <div class="media-label">Tickets closed</div>
                        </div>
                        <div class="media-item">
                          <div class="media-value">123</div>
                          <div class="media-label">Tickets Opened</div>
                        </div>
                        <div class="media-item">
                          <div class="media-value">Contact</div>
                          <div class="media-label">0501234567</div>
                        </div>
                      </div>
                    </li>
                    <li class="media">
                      <img alt="image" class="mr-3 rounded-circle" width="50" src="{{ asset('app/img/user.png') }}">
                      <div class="media-body">
                        <div class="media-title">Name of user</div>
                      </div>
                      <div class="media-items">
                        <div class="media-item">
                          <div class="media-value">1,821</div>
                          <div class="media-label">Tickets closed</div>
                        </div>
                        <div class="media-item">
                          <div class="media-value">1234</div>
                          <div class="media-label">Tickets Opened</div>
                        </div>
                        <div class="media-item">
                          <div class="media-value">2,891</div>
                          <div class="media-label">0501234567</div>
                        </div>
                      </div>
                    </li>
                  </ul>
                </div>
              </div>
        </div>
        <div class="col-6">
            <div class="card mt-4">
                <div class="card-header">
                  <h4 class="text-success">C.E. On Duty</h4>
                </div>
                <div class="card-body">
                  <ul class="list-unstyled user-details list-unstyled-border list-unstyled-noborder">
                    
                    <li class="media">
                      <img alt="image" class="mr-3 rounded-circle" width="50" src="{{ asset('app/img/user.png') }}">
                      <div class="media-body">
                        <div class="media-title">Name of User</div>
                      </div>
                      <div class="media-items">
                        <div class="media-item">
                          <div class="media-value">4,872</div>
                          <div class="media-label">Tickets closed</div>
                        </div>
                        <div class="media-item">
                          <div class="media-value">123</div>
                          <div class="media-label">Tickets Opened</div>
                        </div>
                        <div class="media-item">
                          <div class="media-value">Contact</div>
                          <div class="media-label">0501234567</div>
                        </div>
                      </div>
                    </li>
                    <li class="media">
                      <img alt="image" class="mr-3 rounded-circle" width="50" src="{{ asset('app/img/user.png') }}">
                      <div class="media-body">
                        <div class="media-title">Name of user</div>
                      </div>
                      <div class="media-items">
                        <div class="media-item">
                          <div class="media-value">1,821</div>
                          <div class="media-label">Tickets closed</div>
                        </div>
                        <div class="media-item">
                          <div class="media-value">1234</div>
                          <div class="media-label">Tickets Opened</div>
                        </div>
                        <div class="media-item">
                          <div class="media-value">2,891</div>
                          <div class="media-label">0501234567</div>
                        </div>
                      </div>
                    </li>
                  </ul>
                </div>
              </div>
        </div>
    </div> --}}

    <div class="row">
        <div class="col-12">
          <div class="card">
            <div class="card-header">
              <h4>All Users</h4>
              <div class="card-header-form">
                @if (auth()->user()->role->id == 1)
                    <button type="button" class="btn btn-sm btn-success" data-toggle="modal"
                    data-target="#newUserModal"><i class="fas fa-user-plus"></i>Add User</button>
                @endif
              </div>
            </div>
            <div class="card-body p-0">
              <div class="table-responsive">
                <table class="table table-striped">
                  <tr class="text-center">
                    <th>Name</th>
                    <th>Role</th>
                    <th>Phone</th>
                    <th>Email</th>
                    <th>Action</th>
                  </tr>
                  @foreach ($users as $user)
                    <tr class="text-center">
                        <td>{{ $user->first_name.' '.$user->middle_name.' '.$user->last_name }}</td>
                        <td>
                            {{ $user->role->title }}
                        </td>
                        <td>
                            {{ $user->phone }}
                        </td>
                        <td>{{ $user->email }}</td>
                        <td style="font-size: 1.2rem">
                            <a href="{{ route('user.detail.view',['user_id'=>$user->id]) }}" class="btn btn-sm btn-info p-1 mr-1"><i class="fas fa-eye"></i></a>
                            @if (auth()->user()->role->id == 1) 
                                {{-- <a href="{{ route('user.edit',['user_id'=>$user->id]) }}" class="btn btn-sm btn-success p-1 mr-1"><i class="fas fa-pen"></i></a> --}}
                                <a href="{{ route('user.delete',['user_id'=>$user->id]) }}" class="btn btn-sm btn-dark p-1 mr-1"><i class="fas fa-trash"></i></a>
                            @endif
                        </td>
                    </tr>
                  @endforeach
                </table>
              </div>
            </div>
          </div>
        </div>
      </div>

      @if ($errors->has('email') || $errors->has('first_name') || $errors->has('last_name')|| $errors->has('phone')|| $errors->has('role')|| $errors->has('password'))
          <script>
            setTimeout(() => {
                $('#newUserModal').modal('show');
            }, 500);
          </script>
      @endif

    @endsection
      @if (auth()->user()->role->id == 1)
        <div class="modal fade " id="newUserModal" tabindex="-1" role="dialog"
        aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
            <div class="modal-dialog modal-lg modal-dialog-centered" role="document">
                <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalCenterTitle">Add New User</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <form action="{{ route('admin.user.create') }}" method="POST">
                    @csrf
                    <div class="modal-body text-center">
                        <div class="form-row">
                            <div class="form-group col-md-6 row">
                                <div class="col-sm-4">
                                    <label for="first_name">First Name</label>
                                </div>
                                <div class="col-sm-8">
                                    <input type="text" name="first_name" class="form-control form-control-sm" >
                                    @error('first_name')
                                        <span class="text-danger">{{ $message }}</span>
                                     @enderror
                                </div>
                            </div>  
                            <div class="form-group col-md-6 row">
                                <div class="col-sm-4">
                                    <label for="middle_name">Middle Name</label>
                                </div>
                                <div class="col-sm-8">
                                    <input type="text" name="middle_name" class="form-control form-control-sm" >
                                </div>
                            </div>  
                        </div>
                        <div class="form-row">
                            <div class="form-group col-md-6 row">
                                <div class="col-sm-4">
                                    <label for="last_name">Last Name</label>
                                </div>
                                <div class="col-sm-8">
                                    <input type="text" name="last_name" class="form-control form-control-sm" >
                                    @error('last_name')
                                    <span class="text-danger">{{ $message }}</span>
                                 @enderror
                                </div>
                            </div>  
                            <div class="form-group col-md-6 row">
                                <div class="col-sm-4">
                                    <label for="email">Email:</label>
                                </div>
                                <div class="col-sm-8">
                                    <input type="text" name="email" class="form-control form-control-sm" >
                                    @error('email')
                                    <span class="text-danger">{{ $message }}</span>
                                 @enderror
                                </div>
                            </div>  
                        </div>
                        <div class="form-row"> 
                            <div class="form-group col-md-6 row">
                                <div class="col-sm-4">
                                    <label for="phone">Phone</label>
                                </div>
                                <div class="col-sm-8">
                                    <input type="text" name="phone" class="form-control form-control-sm" placeholder="eg. 233*********" >
                                    @error('phone')
                                        <span class="text-danger">{{ $message }}</span>
                                     @enderror
                                </div>
                            </div>  
                            <div class="form-group col-md-6 row">
                                <div class="col-sm-4">
                                    <label for="password">Password</label>
                                </div>
                                <div class="col-sm-8">
                                    <input type="password" name="password" class="form-control form-control-sm" >
                                    @error('password')
                                        <span class="text-danger">{{ $message }}</span>
                                     @enderror
                                </div>
                            </div>  
                             
                        </div>
                        <div class="form-row"> 
                            <div class="col-md-3"></div> 
                            <div class="form-group col-md-6 row">
                                <div class="col-sm-3">
                                    <label for="role">Role</label>
                                </div>
                                <div class="col-sm-9">
                                    <select type="text" name="role" class="form-control form-control-sm">
                                       <option value="" selected>--select role--</option>
                                        @foreach ($roles as $role)
                                           <option value="{{ $role->id }}">{{ $role->title }}</option>
                                       @endforeach 
                                    </select>
                                    @error('role')
                                    <span class="text-danger">{{ $message }}</span>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-3"></div> 
                        </div>
                    </div>
                    <div class="modal-footer bg-whitesmoke br">
                        <button type="submit" class="btn btn-primary">Submit</button>
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                    </div>
                </form>
                </div>
            </div>
        </div>
      @endif
{{-- @include('layouts.toaster') --}}