@extends('layouts.header')

@section('content')
	
<h2 class="page-title my-4">Edit Responsibilities</h2>
	 
     <div class="row">
         <div class="col-md-8">
             <P><a href="{{ URL('/manage/responsibilities') }}" class="text-primary mb-3"><i class="fa fa-long-arrow-left" aria-hidden="true"></i> Back</a></P>
             <div class="card form-style bg-light p-md-5 p-3 ">
            
             <form id="responsibilityForm" method="POST" action="javascript:void(0)">
                  @csrf
                 <div class="row">

                    <input type="hidden" name="id" id="id" value="{{ $data->id }}">

                     <div class="col-md-12 mb-3">
                         <label>Responsibility Name</label><span class="text-danger">*</span>
                         <input type="text" class="form-control" name="responsibility" id="responsibility" placeholder="Enter responsibility name" value="{{ old('responsibility',$data->responsibility)}}">
                         @if ($errors->has('responsibility'))
                          <span id="responsibility-error" class="error text-danger" for="responsibility">{{ $errors->first('responsibility') }}</span>
                         @endif
                     </div>

                     <div class="col-md-12 mb-3">
                         <label>Description</label><span class="text-danger">*</span>
                         <textarea class="form-control h-auto" rows="4" name="description" id="description" placeholder="Enter description">{{ old('description',$data->description) }}</textarea>
                         @if ($errors->has('description'))
                          <span id="description-error" class="error text-danger" for="description">{{ $errors->first('description') }}</span>
                         @endif
                     </div>

                     <div class="col-md-12 mb-4">
                         <label>Responsibile Person</label><span class="text-danger">*</span>
                         <select class="form-control" value="" name="responsible_person" id="responsible_person">
                         <option value="" selected>Select responsible person</option>
                        @foreach($user_list  as $user)
                            <option value="{{ $user->id }}" {{ $data->user_id == $user->id ? 'selected':''}}>{{ $user->first_name}}&nbsp;{{ $user->last_name }}</option>
                        @endforeach
                        </select>
                         @if ($errors->has('responsible_person'))
                          <span id="responsible_person-error" class="error text-danger" for="responsible_person">{{ $errors->first('responsible_person') }}</span>
                         @endif
                     </div>


                     <div class="col-12 text- ">
                         <button type="button" class="btn btn-outline-primary mr-3" onClick="goBack();">Cancel</button>
                         <button type="submit" class="btn btn-primary" id="btnUpdate" onclick="submitForm()">Update</button>
                     </div>
                 </div>
                 </form>

             </div>
         </div>
     </div>
   
    
   
     
 </div>
 


   
        

@endsection

@section('append')
<script src="/assets/js/jquery.dataTables.min.js"></script>
	<script src="/assets/js/dataTables.bootstrap4.min.js"></script>
<script>
    
    $(document).ready(function(){

    });

function submitForm(){

$("#responsibilityForm").validate({
  errorElement:'div',
  rules: {
    responsibility:{
        required: true,
    },
    description:{
        required: true,
    },
    responsible_person:{
        required: true,
    },
  },

  messages: {
    responsibility:{
        required: "Please enter responsibility name",
    },
    description:{
        required: "Please enter description",
    },
    responsible_person:{
        required: "Select responsible person",
    }
   
  },

  errorPlacement: function(error, element) {
       if (element.hasClass('select2')) {
           error.insertAfter(element.parent());
        }
        else{
          error.appendTo( element.parent() );
        }
  },
  submitHandler: function(form) {
     //form.submit();

      var form = $('#responsibilityForm')[0];
      var formData = new FormData(form);
      $.ajax({
        url: '/update/responsibilities' ,
        type: "POST",
        data: formData,
        processData: false,
        contentType: false,
        beforeSend: function(){
              $('#btnUpdate').addClass('btn-disabled');
              $('#btnUpdate').html("<span class='spinner-border spinner-border' id='loader' style='width:20px;height:20px;'></span> Please wait...");
        },
        success: function( data ) {
          if(data.success != undefined){
              toastr.success(data.success); 
              $('#responsibilityForm')[0].reset();
              setTimeout(() => {
                // window.location.href="/manage/responsibilities";
                window.location.href = "javascript:goBack(-1)";
            }, 2000); 
            }else{
              toastr.error(data.error); 
            }
            
        },
        complete: function(){
          setTimeout(function(){
              $('#btnUpdate').removeClass('btn-disabled');
              $('#btnUpdate').html('Save');
            },1000);
        },
        error: function(xhr,status,error){
                var err = JSON.parse(xhr.responseText);
                if(err.errors.responsibility != undefined ){
                    toastr.error(err.errors.responsibility);
                }
            },
      });

   },

  });

}


</script>

@endsection