@extends('layouts.admin')

@section('content')
@if(Auth::check())
<style type="text/css">
.center {
  margin: 30px;
  width: 100%;
  padding: 30px;
}
</style>
<div class="col-12 col-sm-12">
    <div class="card card-primary card-outline card-tabs">
        <div class="card-header p-0 pt-1 border-bottom-0">
            <ul class="nav nav-tabs" >
                @can('user_access',Auth::user())
                <li class="nav-item">
                    <a class="nav-link active"  href="{{route('users.index')}}"  aria-selected="false"  role="tabpanel">Users</a>
                </li>
                @endcan
            </ul>
        </div>
        @endif
    </div><small>
        <div class="card card card-secondary">
            <div class="card-header-new">
                <span class="card-title">Manage User</span>
                <div class="card-tools">
                    <button type="button" class="btn btn-tool" data-card-widget="collapse"><i class="fas fa-minus"></i></button>
                </div>
            </div>

            
            <!-- /.card-header -->
            <div class="card-body">
         <table border="2px solid black" width="100%">
                <thead style="font-family:Georgia, Garamond, Serif;color:black;font-style:italic;">
                    <tr class="table-primary" style="height:50px;" >
                    <td>Name</td>
                    <td>Designation</td>
                    <td>Departement</td>
                    <td>Employee Code</td>
                </tr>
            </thead>
 
                <tr>
                    <td>{{$user->name}}</td>
                    <td>{{$user->designation}}</td>
                    <td>{{$user->departement}}</td>
                    <td>{{$user->empcode}}</td>
                </tr>
            </table>
          <br>
            <div class="card-body center">
                
                <form method="POST" action="{{ route('users.saveotheruser') }}">
                    @csrf
                <input type="hidden" name="user_id" value="{{$user->id}}">
				 <div class="form-group row">
                        <label for="role" class="col-sm-2 col-form-label">Role:</label>
                        <div class="col-sm-6">
						
                               <select class="form-control" id="role" name='role'>
							   <option	value="">Select Role</option>
                                @foreach($roles as $r)
								
                                <option value="{{$r->id}}">{{$r->name}}</option>
                                @endforeach
                              </select>
                              </div>
                          </div>        
                <div class="form-group row">
                        <label for="project" class="col-sm-2 col-form-label">Project:</label>
                        <div class="col-sm-6">
                               <select class="form-control" id="project" name='project'>
                                <option selected disabled>Project</option>
                                @foreach($projects as $pr)
                                <option value="{{$pr->id}}">{{$pr->code}}</option>
                               @endforeach
                              </select>
                              </div>
                          </div>
                        
                            <div class="form-group row">
                        <label for="sector" class="col-sm-2 col-form-label">Project Sector:</label>
                        <div class="col-sm-6">
                               <select class="form-control" id="sector" name='sector'>
                                @foreach($sectors as $s)
                                <option value="{{$s->id}}">{{$s->description}}</option>
                                @endforeach
                              </select>
                              </div>
                          </div>


                                             
                           
                  <label>Project Districts</label>
                     <div class="row text-muted" id="dlist">
                  
                   
                </div> 
             
            <div class="form-group row mb-0">
                <div class="col-md-6 offset-md-4">
                    <button type="submit" class="btn btn-primary">
                        {{ __('Register') }}
                    </button>
                </div>
            </div>
            
        </form>
    </div>
</div>
</div>
</small>
</div>

<script type="text/javascript">
$(document).ready(function(){

		 $('#role').change(function(){
			 var selected=$('#role :selected').text();
			 if(selected=='Administrator' || selected=='Senior Manager')
			 {
				 $('#project').prop("disabled", true);
				 $('#sector').prop("disabled", true);
				 $('#dlist :input').prop("disabled", true);
                

			 }
			 else 
			 {
				 $('#project').prop("disabled", false);
				  $('#sector').prop("disabled", false);
				  $('#dlist :input').prop("disabled", false);
			 }
		 });
      // Project Change
      $('#project').change(function(){
         var id = $(this).val();
    
         $.ajax({
            url: 'getDistrict/'+id,
            type: 'get',
            dataType: 'json',
            success: function(response){
                var len = 0;
             //if there are values present in database
             if(response['data'] != null){
                len = response['data'].length;
             }

             if(len > 0){
               
               for(var i=0; i<len; i++){
                var id = response['data'][i].id;
                var district = response['data'][i].name;
              
               $("#dlist").append("<div class='col-sm-3'><input type='checkbox' name=district[] value='"+id+"' /> " + district+"</div>");
                 
           }

           
       }
   }
         
     });
       });
      
       });
</script>

@endsection