@extends('admin.layouts.master')
@section('styles')
<link rel="stylesheet" href="{{asset('admin/plugins/select2/css/select2.min.css')}}">
  <link rel="stylesheet" href="{{asset('admin/plugins/select2-bootstrap4-theme/select2-bootstrap4.min.css')}}">
<style type="text/css">
  .wizsteps {
  list-style-type: square; /* Change the list style type */
  color: #336699; /* Change text color */
} 

.wizsteps li {
  margin: 5px 0; /* Add some margin between list items */
}
.wizsteps .current .step-circle-outer {
    background-color: #03a503;
}

.wizsteps .step-circle-outer {
    border: 2px solid #cdcdcd;
    border-radius: 12px;
    height: 16px;
    width: 16px;
    background-color: #efefef;
    position: relative;
    top: 12px;
    margin: 0 auto;
}
.step-circle-outer{
  border: 2px solid #cdcdcd;
  border-radius: 12px;
  height: 16px;
  width: 16px;
  background-color: #efefef;
  position: relative;
  top: -24px;
  margin: 0 auto;
}
.step-div{
  text-align: center;
  padding-bottom: 47px;
}
.step-text{
  font-size: 13px;
  font-family: emoji;
  color: #198ae3;
}
.active-step{
  background-color: #03a503;
}
.row{
  margin-top: 5px;
  margin-bottom: 5px;
   
}
.col-md-12{
  margin-top: 10px;
  margin-bottom: 10px;
   
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #444;
    line-height: 13px;
}
</style>
@endsection
@section('contents')

 <div class="content-wrapper">
    <div class="page-header">
      <h3 class="page-title">{{$link}} </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">{{$link}}</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">{{$link}} </h4>
            <span>The Generate Letter wizard guides you through the process of generating a letter for an employee. You can also send it to one or multiple employees in one effort. Note: You can download a copy of the letter in the Generate Letter: Summary Page..</span><br><br>
            <div class="row">
                <div class="col-md-3 step-div "><hr><div class="step-circle-outer active-step" ></div><span class="step-text"> Genral </span></div>
                <div class="col-md-3 step-div"><hr><div class="step-circle-outer" ></div><span class="step-text"> SELECT EMPLOYEES </span></div>
                <div class="col-md-3 step-div"><hr><div class="step-circle-outer" ></div><span class="step-text"> PREVIEW </span></div>
            </div>

            <div class="row">
              <div class="col-md-12">
                <span >Step 1: General</span>
              </div>
               <div class="col-md-12">
                <div class="row">
                  <div class="col-md-3">
                 <label for="balance_for_penalty_leave" class="control-label mb-10">Select Letter Template</label>
                  </div>
                  <div class="col-md-4">
                  <select name="Import Type" class="form-control select2"  id="penalty_leave" >
                   <optgroup label="Templates">
                   <option value="Appointment Order" >Appointment Order</option>
                   <option value="Confirmation Letter" >Confirmation Letter</option>
                   <option value="Relieving Letter" >Relieving Letter</option>
                   
                  </select>
                </div>
                <div class="col-md-3">
                 <span>
                 <a class="btn btn-info" onclick="field_info2()"  >Select Employee</a></span>
                </div>

                
                </div>
              </div>
              <div class="col-md-12">
                <div id="field_info">
                        
                </div>
              </div>

            </div>
        <!--     <div class="row">
              <div class="col-md-4">
               <a href="{{route('employee-hub')}}" class="btn btn-success btn-fw" > Add Employee </a>
              </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>
        </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">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 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