@extends('admin.layouts.master')
@section('styles')
@endsection
@section('contents')
 <div class="content-wrapper">
    <div class="page-header">
      <h3 class="page-title">Employee 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"> Employee 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">Employee Manage </h4>
            <div class="row">
            	<div class="col-md-4">
           		 <button class="btn btn-success btn-fw" onclick="addMember()"> Add Employee </button>
            	</div>
            <div class="col-md-3">
            	<a class="btn btn-info btn-fw" href="{{asset('/format/employee_import_format.csv')}}" > Import Format </a>
         		</div>
            <div class="col-md-5" style="float:right;">
            	<form method="post" action="{{route('import-employee')}}" id="import-form" enctype="multipart/form-data">
            		@csrf
	            	<input type="file" class="" name="csv_file" id="import-file" value="please upload csv file" required>
	            	<button class="btn btn-success btn-fw" onclick="$('#import-form').submit()"> Import Employee </button>
            	</form>
         		</div>
            </div>
           
            <div class="table-responsive" style="margin-top: 10px;">
              <table class="table table-striped">
                <thead>
                  <tr>
                    <th>Title</th>
                    <th>Name</th>
                    <th>Department</th>
                    <th>Designation</th>
                    <th>Email</th>
                    <th>Mobile</th>
                    <th>Other Details</th>
                    <th>Action</th>
                  </tr>
                </thead>
                <tbody>
                  @if(count($employee)>0)
                  @foreach($employee as $key=>$value)
                    <tr>
	                    <td>{{$value->title}}</td>
	                    <td>{{$value->name}}</td>
	                    <td>{{$value->department}}</td>
	                    <td>{{$value->designation}}</td>
	                    <td>{{$value->email}}</td>
	                    <td>{{$value->mobile}}</td>
	                    <td><a  href="{{route('manage_other_details',['id'=>base64_encode($value->id)])}}" >Other Details</a></td>
	                    <td>
	                    	<button type="button" class="btn btn-info btn-icon-text" onclick="editSubAdmin('{{$value->id}}','{{$value->department}}','{{$value->designation}}','{{$value->title}}','{{$value->name}}','{{$value->email}}','{{$value->mobile}}','{{$value->joining_Date}}')"> 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('save-employee')}}" id="sub-admin-form" method="post" enctype="multipart/form-data">
					@csrf
					<div class="form-group">
						<div class="add-id">
						</div>
						
						<label for="recipient-name" class="control-label mb-10">Title *:</label>
						<select class="form-control all-clean" name="title" id="title"  required>
							<option value="">Please select Titile</option>
							<option value="Mr.">Mr.</option>
							<option value="Mrs.">Mrs.</option>
							<option value="M/s">M/s</option>
						</select>
					</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 *:</label>
						<select class="form-control all-clean" id="designation" name="designation" required>
							<option value="">Please select designation</option>
						</select>
						<span style="display:none" id="designation-span"><a class="btn btn-success" href="{{route('designation')}}">Add Designation</a></span>
					</div>
					
					<div class="form-group">
						<label for="recipient-name" class="control-label mb-10">Name *:</label>
						<input type="text" class="form-control all-clean" id="name" name="name" value="{{old('name')}}" placeholder="Please Enter Name" required>
					</div>
					<div class="form-group">
						<label for="recipient-name" class="control-label mb-10">Moblie *:</label>
						<input type="text" class="form-control all-clean" id="mobile" name="mobile" value="{{old('mobile')}}"  onkeypress="return isNumberKey(event)" maxlength="10" placeholder="Please Enter mobile" required>
					</div>
					<div class="form-group">
						<label for="recipient-name" class="control-label mb-10">Email *:</label>
						<input type="email" class="form-control all-clean" id="email" name="email" value="{{old('email')}}" placeholder="Please Enter email" required>
					</div>
					<div class="form-group">
						<label for="recipient-name" class="control-label mb-10">Joining Date *:</label>
						<input type="date" class="form-control all-clean" id="joining_Date" name="joining_Date" value="{{old('joining_Date')}}" placeholder="Please Enter email" 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('Admin');
		$('.modal-add').modal('toggle');
	}
	function editSubAdmin(id,department,designation,title,name,email,mobile,joining_Date) {
		$('.add-id').html('<input type="hidden" name="id" value="'+id+'">');
		$('#title').val(title);
		$('#department').val(department);
		$('#designation').val(designation);
		$('#name').val(name);
		$('#email').val(email);
		$('#mobile').val(mobile);
		$('#joining_Date').val(joining_Date);
		$('#title-button').html('Update');
		$('.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>');
            if(response.status == 3)
            for ( var i = 0, l = response.designation.length; i < l; i++ ) {
               $("#designation").append('<option value=' + response.designationId[i] + '>' + response.designation[i] + '</option>');

               $('#designation-span').css('display','none');
            }else{
            	$('#designation-span').css('display','block');
            }
          },
          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