@extends('settings.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">
    .checkbox_button{
      margin-left: 14px;
      margin-top: 3px;
    }
  </style>
@endsection
@section('contents')
<div class="content-wrapper pb-0">
<div class="page-header flex-wrap">
  <h3 class="mb-0"> {{$category}}</h3>
  <div class="d-flex">
    <h5>Leave accounting for employees works like bank account. First the employees has to be granted so that the leave balance goes up. As and when employee avails leave, the leave balance goes down. Leaves can also be lapsed, encashed or carried forward to the next year</h5>
</div>
<div class="row">
  <div class="col-md-12 stretch-card grid-margin">
    <div class="card">
      <div class="card-body">
          <div class="col-md-12">
            <div class="form-group">
              <h5>
                <select name="rule-type" id="rule-type" onchange="getTheOther()" style="font-size: 20px;border: 0px;">
                  <option value="grant">Grant Settings</option>
                  <option value="prorating">Grant Prorating Settings</option>
                  <option value="covering">Weekends, Holidays, Clubbing and Covering</option>
                  <option value="availing">Limits For Availing Leaves</option>
                  <option value="criteria">Eligibility Criteria</option>
                  <option value="workflow">Workflow Settings</option>
                  <option value="encashment ">Leave Encashment</option>
                  <option value="processing">Year End Processing</option>
                  <option value="leave">Leave Processors</option>
                </select>
              </h5>
              <hr>
            </div>
          </div>
          <div id="changes">
         <form action="{{route('save_leave_rule_type')}}" id="sub-admin-form" method="post" enctype="multipart/form-data">
          <input type="hidden" name="eoption" value="eoption">
          @csrf 
          <div class="row">
   
          <div class="col-md-12">
            <div class="form-group">
              <label for="recipient-name" class="control-label mb-10">{{$category}}Leave Granting Frequency : </label>
               <select name="grant_frequency" id="grant_frequency" class="form-control"> 
                <option value="Monthly">Monthly</option>
                <option value="Quarterly">Quarterly</option>
                <option value="Half-Yearly">Half-Yearly</option>
                <option value="Annual">Annual</option>
                <option value="Defined Period">Defined Period</option>
              </select>
            </div>
          </div>
          <div class="col-md-12">
            <div class="form-group">
              <label for="recipient-name" class="control-label mb-10">Grant Mode :</label>
              <select name="grant_mode" id="grant_mode" class="form-control"> 
                <option value="Fixed, at begining of the period">Fixed, at begining of the period</option>
                <option value="Based on months in service">Based on months in service</option>
                <option value="Fixed, at begining of the period">Fixed, at begining of the period</option>
              </select>
            </div>
            </div>
            <div class="col-md-12">
            <div class="form-group">
              <label for="recipient-name" class="control-label mb-10">Maximum Leave For The Period :</label>
              <input type="number" class="form-control" name="max_leave" id="max_leave">
            </div>
          </div>
            <div class="col-md-6">
            <div class="form-group">
              <label for="recipient-name" class="control-label mb-10">Granted Leave Expires After : </label>
              <input type="number" class="form-control" name="grant_leave_expire" id="grant_leave_expire">
            </div>
            </div>
            <div class="col-md-6">
            <div class="form-group">
              <label for="recipient-name" class="control-label mb-10">Days/Year : </label>
              <select name="grant_mode" id="grant_mode" class="form-control"> 
                <option value="Days">Days</option>
                <option value="Months">Months</option>
              </select>
            </div>
            </div>
             <div class="col-md-12">
          <div class="form-group">
              <input type="checkbox" id="additional_laeve_grant"  name="additional_laeve_grant"  />
              <label for="additional_laeve_grant" class="checkbox_button">Allow employees to apply for additional leave grant (for compensatory off)</label>
            </div>
          </div>
           <div class="col-md-12">
          <div class="form-group">
              <input type="checkbox" id="define_grant_individually"  name="define_grant_individually"  />
              <label for="define_grant_individually" class="checkbox_button">Allow me to define grants individually for each month/quarter/year</label>
            </div>
          </div>
          <div class="col-md-12">
          <div class="form-group">
              <input type="checkbox" id="manual_leave_grant"  name="manual_leave_grant"  />
              <label for="manual_leave_grant" class="checkbox_button">Allow Manual leave grant for individual employees</label>
            </div>
          </div>
           <div class="col-md-12">
            <div class="form-group">
              <label for="recipient-name" class="control-label mb-10">Granted Leave Expires After : </label>
              <select name="grant_mode" id="grant_mode" class="form-control"> 
                <option value="Probation">Probation</option>
                <option value="Confirmed">Confirmed</option>
                <option value="Contract">Contract</option>
                <option value="Trainee">Trainee</option>
              </select>
            </div>
            </div>
             <div class="col-md-12">
             <div class="form-group">
              <input type="checkbox" id="grant_only_not_availed"  name="grant_only_not_availed"  />
              <label for="grant_only_not_availed" class="checkbox_button">Grant only if not availed</label>
            </div>
            </div>
             <div class="col-md-12">
             <div class="form-group">
              <input type="checkbox" id="allow_leave_application_granted_in_advance"  name="allow_leave_application_granted_in_advance"  />
              <label for="allow_leave_application_granted_in_advance" class="checkbox_button">Allow leave application to be granted in advance</label>
            </div>
            </div>
            <div class="col-md-12">
           <div class="form-group">
              <input type="checkbox" id="one_time_grant"  name="one_time_grant"  />
              <label for="one_time_grant" class="checkbox_button">Is One Time Grant</label>
            </div>
          </div>
          <div class="col-md-12">
           <div class="form-group">
              <input type="checkbox" id="auto_grant_schedule"  name="auto_grant_schedule"  />
              <label for="auto_grant_schedule" class="checkbox_button">Auto Grant Schedule</label>
            </div>
          </div>
          <div class="col-md-12">
           <div class="form-group">
              <input type="checkbox" id="based_on_previous_month"  name="based_on_previous_month"  />
              <label for="based_on_previous_month" class="checkbox_button">Grant based on previous month work days</label>
            </div>
          </div>
          
           <div class="form-group" style="text-align:center">
            <button type="button" class="btn btn-success" onclick="$('#sub-admin-form').submit()"><spam id="title-button">Save</spam></button>
            <a type="button" class="btn btn-primary" onclick="$('#sub-admin-form').submit()"><spam id="title-button">Next</spam></a>
          </div>
        </form>
      </div>
      </div>
    </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 type="text/javascript">
  function getTheOther() {
    // alert($('#rule-type').val());
    var type = $('#rule-type').val();
    var reqUrl = "http://127.0.0.1:8000/leave-rule-type-ajax/"+type;
    var reqData = "";
    console.log(reqUrl);
    $.ajax({
      type: "get",
      url: reqUrl,
      data: reqData,
      dataType: "json",
      headers: {
          'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
      },
      beforeSend: function() {
         console.log  ('not working');

      },
      complete: function() {
        console.log  ('not working');
      },
      success: function(response) {
        $('#changes').html(response.success);
      }
    });
  }
  function checkRehire(){
      if($('#rehire').is(':checked'))
      {
        
      }else
      {
        // alert('not checked');
      }
    }
  $(document).ready(function(){

    

    var stateData = '';

    
    $( "#state" ).select2(
    // {
    //     ajax: { 
    //       url: "{{route('getStateList')}}",
    //       type: "get",
    //       dataType: 'json',
    //       delay: 250,
    //       data: function (params) {
    //         return {
    //            search: params.term // search term
    //         };
    //       },
    //       processResults: function (response) {
    //         return {
    //           results: response
    //         };
    //       },
    //       cache: true
    //     }

    //  }
     );

   });
  $('#field').select2();

  $('#password_policy_attch_file').select2();
  function getTheMember() {
    member = $('#member').val();
    if(member.length > 3 ) 
      {
        $.ajax({
          type: "get",
          url: reqUrl,
          data: reqData,
          dataType: "json",
          headers: {
              'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
          },
          beforeSend: function() {
              

          },
          complete: function() {

          },
          success: function(response) {
              console.log(response);
          }
        });
      }
  }
  $(document).ready(function(){
    updateTime();
    setInterval(function(){ 
    updateTime();    
    }, 1000);
 });

  function updateTime(){
    // alert('working');
    var d = new Date();
    var curr_hour = d.getHours();
    var curr_min = d.getMinutes();

    var curr_sec = d.getSeconds();
    $('#time-change').html(curr_hour + ":" + curr_min + ":" + curr_sec);
  }


</script>
@endsection