@extends('admin.layouts.master')
@section('styles')
@endsection
@section('contents')
 <div class="content-wrapper">
    <div class="page-header">
      <h3 class="page-title">department 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"> department 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">department Manage </h4>
            <div class="row">
            	<div class="col-md-6">
           		 <button class="btn btn-success btn-fw" onclick="addMember()"> Add department </button>
            	</div>
          
           
            </div>
           
            <div class="table-responsive" style="margin-top: 10px;">
              <table class="table table-striped">
                <thead>
                  <tr>
                    <th>Sno</th>
                    <th>Name</th>
                    <th>Action</th>
                  </tr>
                </thead>
                <tbody>
                  @if(count($department)>0)
                  @foreach($department as $key=>$value)
                    <tr>
	                    <td>{{$key+1}}</td>
	                    <td>{{$value->Department}}</td>
	                    <td>
	                    	<button type="button" class="btn btn-info btn-icon-text" onclick="editSubAdmin('{{$value->id}}','{{$value->Department}}')"> 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('department-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">Department 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 Department');
		$('.modal-add').modal('toggle');
	}
	function editSubAdmin(id,department) {
		$('.add-id').html('<input type="hidden" name="id" value="'+id+'">');
		$('#name').val(department);
		$('#title-button').html('Update Department');
		$('.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