@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 Excel Importer page enables you to import data using an Excel file. Select the category of data that you want to import from Importer Type. Once you select the type, you get a sample or a template file. Ensure that the file you intend to use for import is in this format before proceeding further.

Learn more about the process by watching the video here. To view frequently asked questions click here.</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"> EXCEL IMPORTER </span></div>
                <div class="col-md-3 step-div"><hr><div class="step-circle-outer" ></div><span class="step-text"> EXCEL IMPORTER MAPPING </span></div>
                <div class="col-md-3 step-div"><hr><div class="step-circle-outer" ></div><span class="step-text"> EXCEL IMPORTER VALIDATE </span></div>
                <div class="col-md-3 step-div"><hr><div class="step-circle-outer" ></div><span class="step-text"> SUMMARY </span></div>
            </div>

            <div class="row">
              <div class="col-md-12">
                <span >Step 1: Excel Importer</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">Importer Type</label>
                  </div>
                  <div class="col-md-4">
                  <select name="Import Type" class="form-control select2"  id="penalty_leave" >
                   <optgroup label="Profile Details">
                   <option value="1" >Add Employee Personal Details</option>
                   <option value="2" >Employee Bank Details</option>
                   <optgroup label="Family">
                   <option value="3" >Family Details</option>
                   <option value="4" >Employee Post Details</option>
                   <optgroup label="Address">
                   <option value="5" >Employee Permanent Address</option>
                   <option value="6" >Employee Temporary Address</option>
                   
                  </select>
                </div>
                <div class="col-md-3">
                  <span ><buton onclick="field_info()"  class="btn btn-info" > Download a sample file <i class="mdi mdi-briefcase-download menu-icon"></i></buton>
                 <a class="btn btn-info" onclick="field_info2()"  >View Field Info</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">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>
          </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 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