<div class="container" style="padding-bottom: 2rem;">
  <div class="card bg-light-transparent" style="margin-bottom: 2rem;">
    <div class="card-header bg-light">
      <div class="row">
        <div class="col float-left">
          <h5 class="card-title">Entitlement</h5>
        </div>
        <div class="col-sm-6 float-right">
          <div class="row">
            <label class="col-3 text-right" for="entitlementType">Type: </label>
            <select class="form-control col" id="entitlementType">
              <?php foreach($types as $type): ?>
                <option <?php if($type['id'] == $leave_type['id']) echo 'selected'; ?> value="<?php echo $type['id'] ?>"><?php echo $type['name'] ?></option>
              <?php endforeach; ?>
            </select>
            <label class="col-2 text-right" for="entitlementYear">Year: </label>
            <select class="form-control col-2 mr-3" id="entitlementYear">
              <?php foreach($years as $year): ?>
                <option <?php if($year['year'] == $curr_year) echo 'selected'; ?> value="<?php echo $year['year']; ?>"><?php echo $year['year'] ?></option>
              <?php endforeach; ?>
            </select>
          </div>
        </div>
      </div>
    </div>
    <div class="card-body">
      <div class="row justify-content-center">
        <?php $count = 0; ?>
        <?php if ($entitlements) { ?>
          <?php foreach($entitlements as $entitlement): ?>
            <?php if($count == 2): ?>
              <div class="w-100" style="padding-top: 0.75rem; padding-bottom: 0.75rem;"></div>
            <?php $count = 0; endif; ?>
            <div class="col">
              <div class="card no-shadow h-100 d-flex flex-column justify-content-between">
                <div class="card-header">
                  <h5 class="card-title float-left"><?php echo $entitlement['position']; ?></h5>
                  <div class="btn-group btn-group-sm float-right">
                    <button class="btn btn-primary" id="toggleBtn-<?php echo $entitlement['id']; ?>" onclick="toggleEntitlementForm(<?php echo $entitlement['id']; ?>);">Edit</button>
                    <button class="btn btn-primary" id="updateBtn-<?php echo $entitlement['id']; ?>" onclick="updateEntitlement(<?php echo $entitlement['id']; ?>)" style="display: none;">Save</button>
                  </div>
                </div>
                <form id="entitlementForm-<?php echo $entitlement['id']; ?>" class="form">
                  <fieldset disabled>
                    <div class="card-body">
                      <div class="form-row">
                        <div class="col">
                          <div class="form-group">
                            <label for="entitledLeave-<?php echo $entitlement['id']; ?>">Entitled Leave</label>
                            <input type="text" required class="form-control text-right" name="entitledLeave-<?php echo $entitlement['id']; ?>" id="entitledLeave-<?php echo $entitlement['id']; ?>" placeholder="" value="<?php echo $entitlement['entitled_leave']; ?>">
                          </div>
                        </div>
                        <div class="col">
                          <div class="form-group">
                            <label for="maxEntitlement-<?php echo $entitlement['id']; ?>">Max Entitlement</label>
                            <input type="text" required class="form-control text-right" name="maxEntitlement-<?php echo $entitlement['id']; ?>" id="maxEntitlement-<?php echo $entitlement['id']; ?>" placeholder="" value="<?php echo $entitlement['max_entitlement']; ?>">
                          </div>
                        </div>
                      </div>
                      <div class="form-row">
                        <div class="col">
                          <div class="form-group">
                            <label for="additionalLeave-<?php echo $entitlement['id']; ?>">Additional Leave</label>
                            <input type="text" required class="form-control text-right" name="additionalLeave-<?php echo $entitlement['id']; ?>" id="additionalLeave-<?php echo $entitlement['id']; ?>" placeholder="" value="<?php echo $entitlement['additional_leave']; ?>">
                          </div>
                        </div>
                        <div class="col">
                          <div class="form-group">
                            <label for="additionalLeaveMonth-<?php echo $entitlement['id']; ?>">Additional Leave Every</label>
                            <input type="text" required class="form-control text-right" name="additionalLeaveMonth-<?php echo $entitlement['id']; ?>" id="additionalLeaveMonth-<?php echo $entitlement['id']; ?>" placeholder="" value="<?php echo $entitlement['month_of_service_add_leave']; ?>">
                          </div>
                        </div>
                      </div>
                      <div class="form-row">
                        <div class="col">
                          <div class="form-group">
                            <label for="bringForwardPercent-<?php echo $entitlement['id']; ?>">Bring Forward (%)</label>
                            <input type="text" required class="form-control text-right" name="bringForwardPercent-<?php echo $entitlement['id']; ?>" id="bringForwardPercent-<?php echo $entitlement['id']; ?>" placeholder="" value="<?php echo $entitlement['bring_forward_percentage']; ?>">
                          </div>
                        </div>
                        <div class="col">
                          <div class="form-group">
                            <label for="remarks-<?php echo $entitlement['id']; ?>">Remarks</label>
                            <input type="text" class="form-control" name="remarks-<?php echo $entitlement['id']; ?>" id="remarks-<?php echo $entitlement['id']; ?>" placeholder="" value="<?php echo $entitlement['remarks']; ?>">
                          </div>
                        </div>
                      </div>
                    </div>
                  </fieldset>
                </form>
              </div>
            </div>
          <?php $count++; endforeach; ?>
        <?php } else { ?>
          <h5>Entitlement for this leave type have not been setup. <a href="<?php echo base_url('hr/leave/entitlement'); ?>">Click Here To Proceed.</a></h5>
        <?php } ?>
      </div>
    </div>
  </div>
</div>
<script>
  $(function() {
    $('#entitlementYear, #entitlementType').change(() => {
      var year = $('#entitlementYear').find(':selected').val();
      var type = $('#entitlementType').find(':selected').val();
      location.href = "<?php echo base_url('hr/leave/entitlement/'); ?>"+year+'/'+type;
    });
  });

  function toggleEntitlementForm(position_id) {
    var toggleBtn = $('#toggleBtn-'+position_id);
    var updateBtn = $('#updateBtn-'+position_id);
    var fieldset  = $('#entitlementForm-'+position_id).find('fieldset');
    
    if(fieldset.prop('disabled')) {
      fieldset.attr('disabled', false);
      toggleBtn.removeClass('btn-primary').addClass('btn-danger').html('Cancel');
      updateBtn.show();
    } else {
      fieldset.attr('disabled', true);
      toggleBtn.removeClass('btn-danger').addClass('btn-primary').html('Edit');
      updateBtn.hide();

      $('#entitlementForm-'+position_id).parsley().reset();
    }
  }

  function updateEntitlement(entitlement_id) {
    validateForm('#entitlementForm-'+entitlement_id, 'Are you sure you want to update this entitlement?', () => {
      $.ajax({
        url: "<?php echo base_url('hr/leave/updateEntitlement'); ?>",
        type: 'POST',
        data: {
          id: entitlement_id,
          entitled_leave: $('#entitledLeave-'+entitlement_id).val(),
          max_entitlement_per_year: $('maxEntitlement-'+entitlement_id).val(),
          additional_leave: $('#additionalLeave-'+entitlement_id).val(),
          month_of_service_add_leave: $('#additionalLeaveMonth-'+entitlement_id).val(),
          bring_forward_percentage: $('#bringForwardPercent-'+entitlement_id).val(),
          remarks : $('#remarks-'+entitlement_id).val()
        },
        dataType: 'JSON',
        success: (data) => {
          if (data.status.toLowerCase() == 'success') {
            console.log(data);
            localStorage.setItem("status", data.status);
            localStorage.setItem("msg", data.msg);

            location.reload();
          }
        }
      });
    });
  }
</script>