<div class="modal fade" id="addGradePay">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Add Grade Pay</h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <!-- Main content -->
                <form id="addGradePayform">
                    <input type="hidden" name="_token" id="token_gradepay" value="<?php echo e(csrf_token()); ?>">
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group mb-">
                                  <label class="mb-0" for="Pay Scale">Pay Scale/Pay Commision <span class="text-danger">*</label></label>
                                  <select class="form-control form-control-sm select2" style="width: 100%;" aria-hidden="true" name="PayScaleId" id="PayScaleIdGradePay" data-placeholder="Select PayScale" required>
                                  <option value="" disabled selected>Select PayScale</option>
                                </select>
                                </div>
                              </div>
                            <div class="col-md-6">
                                <div class="form-group mb-">
                                  <label class="mb-0" for="Pay Band">Pay Band <span class="text-danger">*</label></label>
                                  <select class="form-control form-control-sm select2" style="width: 100%;" aria-hidden="true" name="PayBandId" id="PayBandIdGradePay" data-placeholder="Select Pay Band" required>
                                  <option value="" disabled selected>Select Pay Band</option>
                                </select>
                                </div>
                              </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-group mb-2">
                                    <label class="mb-0" for="name">GradePay Name <span class="text-danger">*</label>
                                    <input type="text" class="form-control form-control-sm" id="GradePayName" name="GradePayName" required>
                                </div>
                            </div>
                        </div>
                        <hr />
                        <div class="row">
                            <div class="col-12">
                                <div class="d-flex align-items-center justify-content-center">
                                    <button type="button" class="btn btn-sm btn-outline-secondary mx-1"
                                        data-dismiss="modal" aria-label="Close">Cancel</button>
                                    <button type="submit" id="btn-save-new-gradepay"
                                        class="btn btn-sm btn-outline-info mx-1">Save &amp; New</button>
                                    <button type="submit" id="btn-save-gradepay"
                                        class="btn btn-sm btn-info mx-1">Save</button>
                                </div>
                            </div>
                        </div>
                </form>
            </div>
        </div>
    </div>
    <!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->


<div class="modal fade" id="updateGradePay">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Grade Pay <span id="GradePayName" class="text-info"></span></h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <!-- Main content -->
                <form id="updateGradePayform">
                    <input type="hidden" name="_token" id="token_gradepay_update" value="<?php echo e(csrf_token()); ?>">
                    <input type="hidden" id="GradePayId" name="GradePayId">
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-group mb-2">
                                    <label class="mb-0" for="name">GradePay Name<span class="text-danger">*</span></label>
                                    <input type="text" class="form-control form-control-sm"
                                        id="editGradePayName" name="GradePayName"
                                        onkeyup="checkDuplicateGradePay(this);" required>
                                    <span id='editCheckGradePay'></span>
                                </div>
                            </div>
                        </div>
                        <hr />
                        <div class="row">
                            <div class="col-12">
                                <div class="d-flex align-items-center justify-content-center">
                                    <button type="button" class="btn btn-sm btn-outline-secondary mx-1"
                                        data-dismiss="modal" aria-label="Close">Cancel</button>
                                    <button type="button" id="btn-update-gradepay" name="Update" value="Update"
                                        class="btn btn-sm btn-info mx-1" disabled>Update</button>
                                </div>
                            </div>
                        </div>
                </form>
            </div>
        </div>
    </div>
    <!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->



<script>
    $(document).ready(function() {
        $.ajax({
          type: "GET",
          url: "<?php echo e(url('/payscale-list')); ?>",
          dataType: "json",
          success: function(response) {
            var json = response.PayScale;
            $.each(json, function(i, payscale) {
              $("#PayScaleIdGradePay").append("<option value='" + payscale.PayScaleId + "'>" + payscale.PayScaleName + "</option>");
              $('#PayScaleIdGradePay').trigger('change');
            });
          }
        });
    });
</script>


<script>
    $('#PayScaleIdGradePay').on('select2:select', function (e) {
      //alert(e.params.data);
        var data = e.params.data;
        var PayScaleID = data.id;
        getPayBandList(PayScaleID);
    });
    function getPayBandList(PayScaleID){
        var PayScaleID = PayScaleID;
        $('#PayBandIdGradePay').empty();
            $.ajax({
            type: "GET",
            url: "<?php echo e(url('/')); ?>/get-payband-list/" +PayScaleID,
            dataType: "json",
            success: function(response) {
                var json = response.PayBand;
                $.each(json, function(i, payband) {
                    $("#PayBandIdGradePay").append("<option value='" + payband.PayBandId + "'>" + payband.PayBandName + "</option>");
                    $('#PayBandIdGradePay').val(null).trigger('change');
                    
                });
            }
        });
    }
</script>


<script>
    function checkDuplicateGradePay(element, id){
        var id = id;
        var GradePay = $(element).val();
        if (GradePay == "") {
            $('span#CheckGradePay, #editCheckGradePay').css("display", "none");
        } else {
            $('span#CheckGradePay, #editCheckGradePay').css("display", "block");
        }
        //alert (GradePay);
        $.ajax({
            type: "GET",
            url: '<?php echo e(url("/")); ?>/check-grade-pay/',
            data: {GradePay:GradePay, id:id},
            dataType: "json",
            success: function(res) {
                if(res.exists){
                    $('span#CheckGradePay, span#editCheckGradePay').html('<span class="text-danger">GradePay name is already exist!</span>');
                    $('#btn-save-new-gradepay, #btn-save-gradepay, #btn-update-gradepay').attr('disabled', true);
                } else {
                    $('span#CheckGradePay, span#editCheckGradePay').html('<span class="text-success">GradePay name is available!</span>');
                    $('#btn-save-new-gradepay, #btn-save-gradepay, #btn-update-gradepay').attr('disabled', false);
                }
            },
            error: function (jqXHR, exception) {
            }
        });
    }
</script>


<script>
    var reload = 0;
    $(function () {
      $.validator.setDefaults({
        submitHandler: function () {
            saveGradePayRecord();
        }
      });
      // Reload page after data save 
      $('#btn-save-gradepay').click(function(){
        reload = 1;
      });

      // Validate Fields
      $('#addGradePayform').validate({
        rules: {
            GradePayName: {
            required: true,
            remote: {
                type: "POST",
                url:'<?php echo e(url("/")); ?>/check-duplicate-gradepay',
                data: {
                    GradePayName: function() {
                    return $( "#GradePayName" ).val();
                    },
                    PayScaleId: function() {
                        return $('#PayScaleIdGradePay').find(":selected").val();
                    },
                    PayBandId: function() {
                        return $('#PayBandIdGradePay').find(":selected").val();
                    },
                    '_token':$('meta[name="csrf-token"]').attr('content')
                    }
            },
          },
        },
        messages: {
          GradePayName: {
            required: "Please enter the GradePay name",
            remote: "The GradePay already exists in the selected PayBand.",
          },
        },
        errorElement: 'span',
        errorPlacement: function (error, element) {
          error.addClass('invalid-feedback');
          element.closest('.form-group').append(error);
        },
        highlight: function (element, errorClass, validClass) {
          $(element).addClass('is-invalid');
        },
        unhighlight: function (element, errorClass, validClass) {
          $(element).removeClass('is-invalid');
        }
      });
    });
</script>


<script>
    function saveGradePayRecord() {
        event.preventDefault();
        $.ajax({
            type: "post",
            url: "<?php echo e(url('store-grade-pay')); ?>",
            dataType: "json",
            data: $('form#addGradePayform').serialize(),
            success: function(response) {
                const Toast = Swal.mixin({
                      toast: true,
                      position: 'top-end',
                      showConfirmButton: false,
                      timer: 2000,
                      timerProgressBar: true,
                      didOpen: (toast) => {
                        toast.addEventListener('mouseenter', Swal.stopTimer)
                        toast.addEventListener('mouseleave', Swal.resumeTimer)
                      }
                    })
                    Toast.fire({
                      icon: 'success',
                      title: 'GradePay added successfully!'
                    });
                    $('#PayScaleIdGradePay').val(null).trigger('change');
                    $('#PayBandIdGradePay').val(null).trigger('change');
                    $('form#addGradePayform').each(function() {
                    this.reset();
                });
                $('span#CheckGradePay').html('');

                if(reload)
                {
                    location.reload();
                }
            },
            error: function(response) {
                const Toast = Swal.mixin({
                      toast: true,
                      position: 'top-end',
                      showConfirmButton: false,
                      timer: 3000,
                      timerProgressBar: true,
                      didOpen: (toast) => {
                        toast.addEventListener('mouseenter', Swal.stopTimer)
                        toast.addEventListener('mouseleave', Swal.resumeTimer)
                      }
                    })
                    Toast.fire({
                      icon: 'error',
                      title: 'Sorry, Something went wrong!'
                    })
            }
        });
    }
</script>

<script>
    // Activate
    function activateGradePay(GradePayId) {
        var GradePayId = GradePayId;
        Swal.fire({
            title: 'Activate GradePay?',
            text: "Are you sure you want to activate GradePay!",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: 'Yes, activate it!'
        }).then((result) => {
            if (result.isConfirmed) {
                $.ajax({
                    type: "get",
                    url: "<?php echo e(url('/')); ?>/change-status-grade-pay/" + GradePayId,
                    success: function(response) {
                        Swal.fire({
                            icon: 'success',
                            title: 'GradePay has been activated!',
                            showConfirmButton: false,
                            timer: 1500
                        }).then(function() {
                            location.reload();
                        });
                    }
                });
            }
        });
    }
    // Deactivate
    function deactivateGradePay(GradePayId) {
        var GradePayId = GradePayId;
        Swal.fire({
            title: 'De-activate GradePay?',
            text: "Are you sure you want to De-activate GradePay!",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: 'Yes, De-activate it!'
        }).then((result) => {
            if (result.isConfirmed) {
                $.ajax({
                    type: "get",
                    url: "<?php echo e(url('/')); ?>/change-status-grade-pay/" + GradePayId,
                    success: function(response) {
                        Swal.fire({
                            icon: 'success',
                            title: 'GradePay has been De-activated!',
                            showConfirmButton: false,
                            timer: 1500
                        }).then(function() {
                            location.reload();
                        });
                    }
                });
            }
        });
    }
</script>

<script>
    function editGradePay(GradePayId)
  {
      var GradePayId = GradePayId;
      $('#updateGradePay').modal('show');
      $.ajax({
          type: "GET",
          url: "<?php echo e(url('/')); ?>/edit-grade-pay/" +GradePayId,
          success: function (response) {
              $('#editGradePayName').val(response.GradePay.GradePayName);
              $('#GradePayId').val(GradePayId);
              $('span#GradePayName').html('#' +response.GradePay.GradePayName);
          }
      });
  }
</script>


<script>
    $("#btn-update-gradepay").click(function (event) {
    event.preventDefault();
    var Name = $("#editGradePayName").val();
    if (Name == "") {
        Swal.fire({
            icon: "warning",
            title: "Name is required!",
            showConfirmButton: false,
            timer: 2000,
        });
    } else {
        $.ajax({
            type: "post",
            url: "<?php echo e(url('update-grade-pay')); ?>",
            dataType: "json",
            data: $("form#updateGradePayform").serialize(),
            success: function (response) {
                Swal.fire({
                    icon: "success",
                    title: "GradePay has been updated!",
                    showConfirmButton: false,
                    timer: 2000,
                }).then(function () {
                    location.reload();
                });
            },
            error: function (response) {
                Swal.fire({
                    icon: "error",
                    title: "Some thing went wrong!",
                    showConfirmButton: false,
                    timer: 2000,
                });
            },
        });
    }
    });

</script>


<script>
    //Delete Grade Pay
    function deleteGradePay(GradePayId) {
    var GradePayId = GradePayId;
    $.ajax({
        type: "GET",
        url: "<?php echo e(url('/')); ?>/check-employee-grade-pay/" +GradePayId,
        success: function (response) {
            if (response.exists) {
                Swal.fire({
                    icon: "warning",
                    title: "Can't be deleted!",
                    text: "This GradePay is associated with empolyee(s)!",
                    showConfirmButton: true,
                });
            } else {
                Swal.fire({
                    title: "Delete GradePay?",
                    text: "Are you sure you want to delete this GradePay?",
                    icon: "warning",
                    showCancelButton: true,
                    confirmButtonColor: "#3085d6",
                    cancelButtonColor: "#d33",
                    confirmButtonText: "Yes, delete it!",
                }).then((result) => {
                    if (result.isConfirmed) {
                        $.ajax({
                            type: "get",
                            url:
                                "<?php echo e(url('/')); ?>/delete-grade-pay/" +
                                GradePayId,
                            success: function (response) {
                                Swal.fire({
                                    icon: "success",
                                    title: "GradePay has been deleted!",
                                    showConfirmButton: false,
                                    timer: 1500,
                                }).then(function () {
                                    location.reload();
                                });
                            },
                        });
                    }
                });
            }
        },
    });
    }

</script><?php /**PATH /var/www/html/hrms/resources/views/components/grade-pay-modal.blade.php ENDPATH**/ ?>