@extends('admin.layouts.master')
@section('styles')
@endsection
@section('contents')
 <div class="content-wrapper">
    <div class="page-header">
      <h3 class="page-title">Designation Manage</h3>
      <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
          <li class="breadcrumb-item"><a href="#">Dashboard</a></li>
          <li class="breadcrumb-item active" aria-current="page"> Designation Manage</li>
        </ol>
      </nav>
    </div>
    <div class="row">
      
      <div class="col-lg-12 grid-margin stretch-card">
        <div class="card">
          <div class="card-body">
            <h4 class="card-title">Designation Manage </h4>
            <div class="row">
            	<div class="col-md-6">
           		 <button class="btn btn-success btn-fw" onclick="addMember()"> Add Designation </button>
            	</div>
          
           
            </div>
           
            <div class="table-responsive" style="margin-top: 10px;">
              <table class="table table-striped">
                <thead>
                  <tr>
                    <th>Sno</th>
                    <th>Level</th>
                    <th>Department</th>
                    <th>Designation</th>
                    <th>Action</th>
                  </tr>
                </thead>
                <tbody>
                  @if(count($designation)>0)
                  @foreach($designation as $key=>$value)
                    <tr>
	                    <td>{{$key+1}}</td>
	                    <td>{{$value->level}}</td>
	                    <td>{{$value['getDepartment']->Department}}</td>
	                    <td>{{$value->Designation}}</td>

	                    <td>
	                    	<button type="button" class="btn btn-info btn-icon-text" onclick="editSubAdmin('{{$value->id}}','{{$value->Department}}','{{$value["getDepartment"]->Department}}','{{$value->level}}','{{$value->Designation}}')"> Edit <i class="mdi mdi-file-check btn-icon-append"></i></button>
                      </td>
            		</tr>
                  @endforeach
                  @else
                  <tr>
	              	<td colspan="7" style="text-align:center;">Data not Found</td>
	              </tr>  
	              @endif
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
     
    </div>
  </div>
<div class="modal modal-add fade show" id="modal-default" aria-modal="true" role="dialog" style="padding-right: 17px; display: none;">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<h4 class="modal-title">Add Employee</h4>
				<button type="button" class="close" data-dismiss="modal" aria-label="Close">
				 <span aria-hidden="true">×</span>
				</button>
			</div>
			<div class="modal-body">
				<form action="{{route('designation-save')}}" id="sub-admin-form" method="post" enctype="multipart/form-data">
					@csrf
					<div class="form-group">
						<div class="add-id">
						</div>
					</div>
					<div class="form-group">
						<label for="recipient-name" class="control-label mb-10">Level *:</label>
						<input type="number" class="form-control all-clean" id="level" name="level" value="{{old('level')}}" placeholder="Please Enter level" required>
					</div>
					<div class="form-group">
						<label for="recipient-name" class="control-label mb-10">Department *:</label>
						<select class="form-control all-clean" id="department" name="department" required>
							<option value="">Please select department</option>
							@foreach($department as $value)
							<option value="{{$value->id}}">{{$value->Department}}</option>
							@endforeach
						</select>
					</div>
					<div class="form-group">
						<label for="recipient-name" class="control-label mb-10">Designation Name *:</label>
						<input type="text" class="form-control all-clean" id="name" name="name" value="{{old('name')}}" placeholder="Please Enter Name" required>
					</div>
				</form>
				
			</div>
			<div class="modal-footer justify-content-between">
				<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
				<button type="button" class="btn btn-primary" onclick="$('#sub-admin-form').submit()"><spam id="title-button">Add</spam></button>
			</div>
		</div>
	</div>
</div>       	
@endsection
@section('scripts')
<script>
	function addMember(){

		$('.add-id').html('');
		$('.all-clean').val('');
		$('#title-button').html('Add Designation');
		$('.modal-add').modal('toggle');
	}
	function editSubAdmin(id,department_id,department,level,designation) {
		$('.add-id').html('<input type="hidden" name="id" value="'+id+'">');
		$('#name').val(designation);
		$('#level').val(level);
		$('#department').val(department_id);
		$('#title-button').html('Update Designation');
		$('.modal-add').modal('toggle');
	}
	$('#department').on('change', function() {
      var department = $('#department').val();
      $.ajax({
          url: '{{route('get-designation')}}',
          type: "get",
          data: {department:department},
          success: function (response) {
            // alert(response.success);
            console.log(response);
            $("#designation").empty();
            $("#designation").append('<option value="">Plese select designation</option>');
            for ( var i = 0, l = response.designation.length; i < l; i++ ) {
               $("#designation").append('<option value=' + response.designationId[i] + '>' + response.designation[i] + '</option>');
            }
          },
          error: function(jqXHR, textStatus, errorThrown) {
             console.log(textStatus, errorThrown);
          }
      });
  });
	function isNumberKey(evt) {
    var charCode = (evt.which) ? evt.which : event.keyCode;
    if ((charCode < 48 || charCode > 57))
        return false;

    return true;
 }
</script>

@endsection