@extends('layouts.header')

@section('content')
<h2 class="page-title my-4">Add Department</h2>
	 
	<div class="row">
		<div class="col-md-8">
			<P><a href="{{ URL('/manage/departments')}}" 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="departmentForm" method="POST" action="javascript:void(0)">
                  @csrf
                 <div class="row">
                     <div class="col-md-12 mb-3">
                         <label>Department</label><span class="text-danger">*</span>
                         <input type="text" class="form-control" name="department" id="department" placeholder="Enter department name" value="{{ old('department')}}">
                         @if ($errors->has('department'))
                          <span id="department-error" class="error text-danger" for="department">{{ $errors->first('department') }}</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="btnAdd" onclick="submitForm()">Save</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(){

$("#departmentForm").validate({
  errorElement:'div',
  rules: {
    department:{
        required: true,
    }
   
  },

  messages: {
    department:{
        required: "Please enter department name",
    },
   
  },

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

      var form = $('#departmentForm')[0];
      var formData = new FormData(form);
      $.ajax({
        url: '/add/departments' ,
        type: "POST",
        data: formData,
        processData: false,
        contentType: false,
        beforeSend: function(){
              $('#btnAdd').addClass('btn-disabled');
              $('#btnAdd').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); 
              $('#departmentForm')[0].reset();
              setTimeout(() => {
                window.location.href="/manage/departments";
            }, 2000); 
            }else{
              toastr.error(data.error); 
            }
            
        },
        complete: function(){
          setTimeout(function(){
              $('#btnAdd').removeClass('btn-disabled');
              $('#btnAdd').html('Save');
            },1000);
        },
        error: function(xhr,status,error){
                var err = JSON.parse(xhr.responseText);
                if(err.errors.department != undefined ){
                    toastr.error(err.errors.department);
                }
            },
      });

   },

  });

}


</script>

@endsection