@extends('admin.layouts.master')
@section('styles')

  <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>
              
            </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>
          </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> 
@endsection
@section('scripts')
<script src='https://cdn.jsdelivr.net/npm/fullcalendar@6.0.0/index.global.min.js'></script>
<script src="{{asset('admin/plugins/select2/js/select2.full.min.js')}}"></script>
<script>

  $(document).ready(function(){
     $( "#penalty_leave" ).select2();
  });
  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>');
            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;
 }
 function changeData(type) {
    $.ajax({
        url: '{{route('change-data-type')}}',
        type: "get",
        data: {department:department},
        success: function (response) {
          alert(response.success);
           
        },
        error: function(jqXHR, textStatus, errorThrown) {
           console.log(textStatus, errorThrown);
        }
    });
 }
 function field_info() {
   $type = $('#penalty_leave').val();
   alert($type);
    // $.ajax({
    //     url: '{{route('get_field_info')}}',
    //     type: "get",
    //     data: {department:department},
    //     success: function (response) {
    //       alert(response.success);
          
    //     },
    //     error: function(jqXHR, textStatus, errorThrown) {
    //        console.log(textStatus, errorThrown);
    //     }
    // });
 }
 function field_info2() {
   type = $('#penalty_leave').val();
   alert(type);
    $.ajax({
        url: '{{route('get_field_info')}}',
        type: "get",
        data: {type:type},
        success: function (response) {
          $('#field_info').html(response.success);
        
        },
        error: function(jqXHR, textStatus, errorThrown) {
           console.log(textStatus, errorThrown);
        }
    });
 }
</script>

@endsection