@extends('layouts.app')
@section('title', 'Create Task |')
@section('content')

<div class="container">
  <div class="panel panel-default tech-service-page"> 
     <div class = "panel-heading">
      <div class="row">
        <div class="col-md-8">
          <h2>Create New Task</h2><div class="star" ></div>
        </div>       
       </div>
      </div>
      <div class="panel-body minh750"> 
          <div class="tools has_tools_in_project has_tools_not_in_project">
            <div class="group in_project">              
                <span class="">Create Your Task</span>              
            </div>          
          </div> 

          <div class="col-md-12">

           {!! Form::open(['route' => ['task/create'] ]) !!}            
            <div class="formCover taskformwrapper" style="padding: 20px 140px 60px; ">              

              <div class="form-group {{ $errors->has('name') ? 'has-error' : ''}}">
                <label class="tasklable" for="exampleInputEmail1">Task Name</label>
                <input type="text" class="form-control" name="name"  style="height: 50px; font-size: 22px;" placeholder="Enter a task name" value="{{ old('name') }}">
                @if ($errors->has('name')) <p class="help-block">{{ $errors->first('name') }}</p> @endif              
              </div>

              <div class="form-group">
                <label class="tasklable" for="">Project</label>
                <select class="form-control" name="project_id" id="project_id"  style="height: 50px; font-size: 22px;" >
                  <option value="">Select a Project</option>
                  @foreach($project as $item)
                  <option value="{{$item->id}}">{{$item->name}}</option>
                  @endforeach
               </select> 
              </div>

               <div class="form-group">
                <label class="tasklable" for="">Assign to an User </label>
                <select class="form-control" name="assign_to"  style="height: 50px; font-size: 22px;" >
                  <option value="">Select an user</option>                                    
               </select> 
              </div>
              
              <div class="form-group">
                <label class="tasklable" for="">Priority</label>

                 <label class="radio-inline">
                    <input type="radio" name="priority" checked value="normal"> <span class="text-success">Normal</span>
                  </label>
                  <label class="radio-inline">
                    <input type="radio" name="priority" value="high"><span class="text-danger"> High</span>
                  </label>
                  <label class="radio-inline">
                    <input type="radio" name="priority" value="low"> <span class="text-warning">Low</span>
                  </label>           
              </div>

               <div class="form-group {{ $errors->has('due_date') ? 'has-error' : ''}}" >
                <label class="tasklable" for=""></span> Due Date</label>
                <div class="input-group mar-btm">
                     <span class="input-group-addon glyphicon glyphicon-calendar"></span>
                <input type="text" class="form-control currentFutureDate" name="due_date"  style="height: 50px; font-size: 22px;" placeholder="DD-MM-YYYY" value="{{ old('due_date') }}"> 
              </div>
              @if ($errors->has('due_date')) <p class="help-block">{{ $errors->first('due_date') }}</p> @endif 
            </div>

              <div class="form-group">
                <label class="tasklable" for="">Description</label>
                <textarea  class="form-control" name="description" rows="7" cols="30"></textarea>
                @if ($errors->has('description')) <p class="help-block">{{ $errors->first('description') }}</p> @endif 
              </div>

               <div class="form-group">
                <input type="submit" class="btn btn-sm btn-success" name="" value="Save Now">
               </div>            
            </div>
            {!! Form::close() !!}
          </div>  
       </div>
  </div>
</div>

@stack('scripts')

<script type="text/javascript">
                          
//populate users list on changed project

 $('#project_id').on('change', function(event){
  
  var project_id = $(this).val();

  event.preventDefault();

  $.ajax({
   url: "/projectUsers",
   method:"POST",
   data:{"project_id":project_id,"_token": "{{ csrf_token() }}"},   
   success:function(data)
   {
     console.log(data);    
     if(data.status == 'ok')
     {
          //alert('test ok');
            $('select[name="assign_to"]').empty();
            $('select[name="assign_to"]').append('<option value="">Select an user</option>');
            $.each(data.users, function(key, value) {

            $('select[name="assign_to"]').append('<option value="'+ value.id +'">'+ value.full_name +'</option>');

            });
     }
   }
  })
 });

</script>          

@endsection