@extends('layouts.authenticated')
@section('title','Payslip')
@section('payslip','active')
@section('style')
    <style>

        .book {
            height: 25px;
            width: 25px;
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 50%;
            background-color: red;
            color: #fff;
            font-size: 15px
        }

        .recipient {
            height: 33px;
            width: 33px;
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 50%;
            background-color: orange;
            color: #fff;
            font-size: 21px
        }

        .sent {
            height: 33px;
            width: 33px;
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 50%;
            background-color: green;
            color: #fff;
            font-size: 21px
        }

        .fail {
            height: 33px;
            width: 33px;
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 50%;
            background-color: red;
            color: #fff;
            font-size: 21px
        }

        .sending {
            height: 33px;
            width: 33px;
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 50%;
            background-color: deepskyblue;
            color: #fff;
            font-size: 21px
        }

        .video {
            color: #b5b2b2;
            font-size: 13px
        }

        .fw-400 {
            font-weight: 400
        }

        .dots {
            height: 10px;
            width: 10px;
            background-color: blue;
            border-radius: 50%
        }

        .my-button {
            border-radius: 20px;
            padding-right: 60px;
            padding-left: 60px
        }

        tbody tr {
            cursor: pointer;
        }

        .table-payslip th, .table-payslip td {
            white-space: nowrap;
        }

        .btn-send {
            background: #17a2b8;
            border-color: #17a2b8;
        }

        .btn-upload, .btn-history {
            background: #007bff;
            border-color: #007bff;
        }

        .btn-export {
            background: #007bff;
            border-color: #007bff;
        }

        .btn-colvis {
            background: #007bff;
            border-color: #007bff;
        }

        .btn-colvis:hover, .btn-export:hover, .btn-upload:hover, .btn-history:hover, .btn-send:hover, .btn-add:hover {
            color: #fff;
            background-color: #17a2b8;
            border-color: #17a2b8;
        }

        .dt-buttons {
            margin-bottom: 1rem;
        }

        .failed {
            background-image: linear-gradient(white, white, #ffcccc 99%);
        }

        .delivered {
            background-image: linear-gradient(white, white, #99ff99 99%);
        }

    </style>
@endsection
@section('content')
    <div class="wrapper">
        <section class="content-header">
        </section>
        <section class="content">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-12">
                        <div class="card card-cyan">
                            <div class="card-header">
                                <h3 class="card-title"><i class="fas fa-envelope"></i> Payslip</h3>
                            </div>
                            <div class="card-body">
                                <div class="dataTable_wrapper table-responsive">
                                    <table id="payslip-table" class="table table-payslip"
                                           style="width: 100%">
                                        <thead>
                                        <tr>
                                            <th><input class="selectall" name="select_all" id="selectall"
                                                       type="checkbox" {{--checked--}}> To
                                                send
                                            </th>
                                            <th>Employee Name</th>
                                            <th>RGOC Entity</th>
                                            <th>Employee Number</th>
                                            <th>Gross Income</th>
                                            <th>Total Deductions</th>
                                            <th>Net Income</th>
                                            <th>Pay Period</th>
                                            <th>Designated Email</th>
                                            <th>Processing Status</th>
                                            <th>Delivery Status</th>
                                        </tr>
                                        </thead>
                                        <tbody>

                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>
    <div id="modal-add" class="modal fade">
        <div class="modal-dialog modal-md">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">Send E-Payslip</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <p>Confirm Send?</p>
                </div>
                <div class="modal-footer justify-content-between">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-success btn-confirm">Confirm</button>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>
    <div id="modal-upload" class="modal fade">
        <div class="modal-dialog modal-md">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title"><i class="fas fa-upload" style="color: #17a2b8"></i> Upload Payroll</h5>
                    <a type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </a>
                </div>
                <div class="modal-body">
                    <form id="income-file" method="POST" enctype="multipart/form-data" class="form-horizontal">
                        @csrf
                        <div class="form-group">
                            <label for="exampleInputFile">Income File</label>
                            <span class="float-right income-spinner" style="display: none"><i
                                    class="fas fa-spinner fa-spin"></i> validating</span>
                            <div class="input-group">
                                <div class="custom-file">
                                    <input type="hidden" class="hidden" name="table" value="file_incomes">
                                    <input type="file" class="custom-file-input " id="incomeFile"
                                           name="file" data-file="income">
                                    <label class="custom-file-label" for="incomeFile"
                                           id="incomeFileLabel">Choose
                                        file</label>
                                </div>
                                {{--  <div class="input-group-append">
                                      <button type="submit" class="btn btn-info income-validate" id="incomeValidate">
                                          Validate
                                      </button>
                                  </div>--}}
                            </div>
                        </div>
                    </form>
                    <form id="loan-balance-file" for="loanBalanceFile" method="POST" enctype="multipart/form-data"
                          class="form-horizontal">
                        @csrf
                        <div class="form-group">
                            <label for="exampleInputFile">Loan Balance File</label>
                            <span class="float-right loan-spinner" style="display: none"><i
                                    class="fas fa-spinner fa-spin"></i> validating</span>
                            <div class="input-group">
                                <div class="custom-file">
                                    <input type="hidden" class="hidden" name="table"
                                           value="file_loan_balances">
                                    <input type="file" class="custom-file-input file-dependent" id="loanBalanceFile"
                                           name="file" data-file="loan"
                                           disabled>
                                    <label class="custom-file-label" for="loanBalanceFile" id="loanBalanceFileLabel">Choose
                                        file</label>
                                </div>
                                {{--  <div class="input-group-append">
                                      <button type="submit" class="btn btn-info loan-balance-validate file-dependent"
                                              id="loanBalanceValidate" disabled>
                                          Validate
                                      </button>
                                  </div>--}}
                            </div>
                        </div>
                    </form>
                    <form id="remarks-file" method="POST" enctype="multipart/form-data" class="form-horizontal">
                        @csrf
                        <div class="form-group">
                            <label for="exampleInputFile">Remarks File</label>
                            <span class="float-right remarks-spinner" style="display: none"><i
                                    class="fas fa-spinner fa-spin"></i> validating</span>
                            <div class="input-group">
                                <div class="custom-file">
                                    <input type="hidden" class="hidden" name="table" value="file_remarks">
                                    <input type="file" class="custom-file-input file-dependent" id="remarksFile"
                                           name="file" data-file="remarks" disabled>
                                    <label class="custom-file-label" for="remarksFile" id="remarksLabel">Choose
                                        file</label>
                                </div>
                                {{--  <div class="input-group-append">
                                      <button type="submit" class="btn btn-info remarks-validate file-dependent"
                                              id="remarksValidate" disabled>
                                          Validate
                                      </button>
                                  </div>--}}
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-danger" id="terminate" data-dismiss="modal" aria-label="Close">
                        Terminate
                    </button>
                    <button type="button" class="btn btn-success" id="compile" disabled>Compile</button>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>
    <div class="modal fade" id="modal-view" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle"
         aria-hidden="true">
        <div class="modal-dialog modal-dialog modal-xl" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title"><i class="fas fa-envelope-open-text" style="color: sandybrown"></i> Payslip
                    </h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body" id="payslipView">

                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="modal-error" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle"
         aria-hidden="true">
        <div class="modal-dialog modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title"><i class="fas fa-check" style="color: sandybrown"></i> Validation Logs</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body" id="errorView">

                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="modal-email" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-dialog modal-md modal-dialog-scrollable" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title"><i class="fas fa-reply-all" style="color: sandybrown"></i> Send
                        Payslip</h5>
                    <a type="button" class="close" id="send-close" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </a>
                </div>
                <div class="modal-body" id="recipient">

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-success send-mail" id="send-mail">Send</button>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('customjs')
    <script>
        $(document).ready(function () {
            $('.popover').popover()
            const timer = ms => new Promise(res => setTimeout(res, ms))
            var income, loan, remarks, required_company, required_payperiod, table, show_receipt = true;
            var selected = [];
            var sent = [];

            toastr.options = {
                "closeButton": true,
                "preventDuplicates": false,
                "tapToDismiss": false
            }

            $.fn.DataTable.ext.pager.simple_numbers = function (page, pages) {
                var numbers = [];
                //  var buttons = $.fn.DataTable.ext.pager.numbers_length;
                var buttons = 3;
                var half = Math.floor(buttons / 2);
                var _range = function (len, start) {
                    var end;

                    if (typeof start === "undefined") {
                        start = 0;
                        end = len;

                    } else {
                        end = start;
                        start = len;
                    }

                    var out = [];
                    for (var i = start; i < end; i++) {
                        out.push(i);
                    }

                    return out;
                };


                if (pages <= buttons) {
                    numbers = _range(0, pages);

                } else if (page <= half) {
                    numbers = _range(0, buttons);

                } else if (page >= pages - 1 - half) {
                    numbers = _range(pages - buttons, pages);

                } else {
                    numbers = _range(page - half, page + half + 1);
                }

                numbers.DT_el = 'span';

                return ['first', 'previous', numbers, 'next', 'last'];
            };

            drawTable()

            function drawTable() {
                table = $("#payslip-table").DataTable({
                    language: {
                        paginate: {
                            previous: 'Prev',
                        }
                    },
                    iDisplayLength: 10,
                    destroy: true,
                    mark: true,
                    scrollY: "500px",
                    scrollX: true,
                    scrollCollapse: true,
                    rowId: function (a) {
                        return 'tr' + a.id;
                    },
                    ajax: {
                        url: "{{ url("payslip/get-payslip") }}",
                        dataType: "json",
                        type: "GET",
                        error: function (e) {
                            if (e.status == 0) {
                                Command: toastr["info"]("Session timeout detected.", "Session Timeout!")
                                setTimeout(function (e) {
                                    window.location.href = "/"
                                }, 3000)
                            }
                        },
                    },
                    columns: [
                        {
                            'targets': 0,
                            'searchable': false,
                            'orderable': false,
                            'width': '1%',
                            'className': 'dt-body-center',
                            'data': 'id',
                            'render': function (data, type, row, meta) {
                                if (row['is_status'] && !row['is_delivered']) {
                                    return '<input type="checkbox" id="' + data + '" value="' + data + '" class="row-select id' + data + '">';
                                    /* return '<input type="checkbox" id="' + data + '" value="' + data + '" class="row-select id' + data + '" checked>';*/
                                }
                                return '';
                            }
                        },
                        {
                            data: "emp_name",
                            render: function (data, type, row) {
                                return '<a href="">' + data + '</a>';
                            }
                        },
                        {
                            data: "company_code"
                        },
                        {
                            className: 'text-right',
                            data: 'emp_number'
                        },
                        {
                            data: "gross_income",
                            className: 'text-right',
                            render: function (data, type, row) {
                                return Number(data).toLocaleString('en', {
                                    minimumFractionDigits: 2,
                                    maximumFractionDigits: 2
                                });
                            }
                        },
                        {
                            data: "total_deduction",
                            className: 'text-right',
                            render: function (data, type, row) {
                                return Number(data).toLocaleString('en', {
                                    minimumFractionDigits: 2,
                                    maximumFractionDigits: 2
                                });
                            }
                        },
                        {
                            data: "net_income",
                            className: 'text-right',
                            render: function (data, type, row) {
                                return Number(data).toLocaleString('en', {
                                    minimumFractionDigits: 2,
                                    maximumFractionDigits: 2
                                });
                            }
                        },
                        {
                            className: 'text-right',
                            data: 'pay_period'
                        },
                        {data: 'designated_email'},
                        {
                            data: "is_status",
                            render: function (data, type, row) {
                                var status;
                                switch (data) {
                                    case 1:
                                        status = "Success"
                                        break;
                                    default:
                                        status = "Failed"
                                }
                                return status;
                            }
                        },
                        {
                            data: "is_delivered",
                            render: function (data, type, row) {
                                var status;
                                switch (data) {
                                    case 1:
                                        status = "Sent"
                                        break;
                                    default:
                                        status = "Draft"
                                }
                                return status;
                            }
                        },
                    ],
                    /*stateSave: true,*/
                    fixedColumns: {
                        iLeftColumns: 1
                    },
                    columnDefs: [
                        {
                            orderable: false,
                            targets: 0
                        },
                    ],
                    order: [1, 'asc'],
                    createdRow: function (row, data, dataIndex) {
                        $(row).addClass('tr' + data['id']);
                        if (data['is_status'] != 1) {
                            $(row).addClass('failed');
                        }
                        if (data['is_delivered'] == 1) {
                            $(row).addClass('delivered');
                        }
                    },
                    fnInitComplete: function (oSettings, json) {
                        selected = [];
                        /*  selected = [];
                          $.each(table.data(), function (i, item) {
                              var index = $.inArray(item['id'], selected);
                              if (item['is_status'] && !item['is_delivered']) {
                                  if (index === -1) {
                                      selected.push(item['id']);
                                  }
                              }
                          });*/
                        enableSend(selected.length)
                    },
                    /*       drawCallback: function (settings) {
                               if (table != undefined) {
                                   selected = [];
                                   $.each(table.data(), function (i, item) {
                                       var index = $.inArray(item['id'], selected);
                                       if (item['is_status'] && !item['is_delivered']) {
                                           if (index === -1) {
                                               selected.push(item['id']);
                                           }
                                       }
                                   });
                                   enableSend(selected.length)
                               }
                           },*/
                    buttons: [
                        {
                            text: '<i class="fas fa-reply" data-toggle="tooltip" title="Send Email"/></i> Send',
                            className: "btn-send btn-flat",
                            autoClose: 'true',
                            action: function (e, dt, node, config) {
                                showSendMail(show_receipt)
                            }
                        },
                        {
                            text: '<i class="fas fa-upload" data-toggle="tooltip" title="Upload a file"/></i> Upload',
                            className: "btn-upload btn-flat",
                            autoClose: 'true',
                            action: function (e, dt, node, config) {
                                clearInputs()
                                $('#modal-upload').modal({backdrop: 'static', keyboard: false})
                            }
                        }, {
                            text: '<i class="fas fa-history" data-toggle="tooltip" title="Upload History"/></i> History',
                            className: "btn-history btn-flat",
                            autoClose: 'true',
                            action: function (e, dt, node, config) {
                                window.location.href = "{{url('payslip/history')}}";
                            }
                        },/* {
                        extend: 'collection',
                        className: "btn-upload",
                        autoClose: 'true',
                        text: '<i class="fas fa-upload" data-toggle="tooltip" title="Uploader"/></i> Upload',
                        buttons:
                            [{
                                className: "btn-uploader",
                                text: '<i class="fas fa-upload" data-toggle="tooltip" title="Upload a file"/></i> Upload',
                                autoClose: 'true',
                                action: function (e, dt, node, config) {
                                    clearInputs()
                                    $('#modal-upload').modal({backdrop: 'static', keyboard: false})
                                }
                            }, {
                                className: "btn-history",
                                text: '<i class="fas fa-history" data-toggle="tooltip" title="Upload History"/></i> History'
                            }],
                    },{
                        extend: 'collection',
                        className: "btn-export",
                        autoClose: 'true',
                        text: '<i class="fas fa-file-export" data-toggle="tooltip" title="Send Email"/></i> Export',
                        buttons:
                            [{
                                extend: "pdf",
                                className: "btn-primary",
                                text: '<i class="fas fa-file-pdf" data-toggle="tooltip" title="Send Email"/></i> .pdf',
                            }, {
                                extend: "csv",
                                className: "btn-primary",
                                text: '<i class="fas fa-file-excel" data-toggle="tooltip" title="Send Email"/></i> .csv'
                            }],
                    },*/
                        {
                            extend: 'colvis',
                            className: "btn-colvis btn-flat",
                            columns: ":not(':first')",
                            text: '<i class="fas fa-columns" data-toggle="tooltip" title="Select columns"/></i> Column Visibility',
                        }],
                    dom: "<'row'<'col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12'B>>" +
                        "<'row'<'col-xs-6 col-sm-6'l><'col-xs-6 col-sm-6'f>>" +
                        "<'row'<'col-sm-12'tr>>" +
                        "<'row'<'col-sm-5'i><'col-sm-7'p>>",
                });
            }

            bsCustomFileInput.init();
            $(document).on('change', '#income-file', function (event) {
                event.preventDefault();
                $('.income-spinner').show()
                var filename = $('#incomeFileLabel').text().toUpperCase();
                var filenameNoExt = filename.substr(0, filename.lastIndexOf("."));
                var requiredName = filenameNoExt.includes("INCOME");
                var fileSplit = filenameNoExt.split('_');
                required_company = fileSplit[0]
                required_payperiod = fileSplit[2]

                if ($('#incomeFile').val() == '') {
                    income = false
                    enableCompile()
                    validateInput('income', income)
                    $('.income-spinner').hide()
                    Command: toastr["error"]("Please select a income file.", "Failed!")
                } else {
                    if (requiredName == true) {
                        if (fileSplit.length != 3) {
                            income = false
                            enableCompile()
                            validateInput('income', income)
                            $('.income-spinner').hide()
                            Command: toastr["error"]('Expected filename <br> < entity >_Income_< pay_period >', "Failed!")
                        } else {
                            if (required_payperiod != 'P1' && required_payperiod != 'P2') {
                                income = false
                                enableCompile()
                                validateInput('income', income)
                                $('.income-spinner').hide()
                                Command: toastr["error"]('Pay period must be P1 or P2.', "Failed!")
                            } else {
                                var formData = new FormData();
                                formData.append('file', $('#incomeFile')[0].files[0]);
                                $.ajax({
                                    url: "payslip/upload",
                                    method: "POST",
                                    data: new FormData(this),
                                    dataType: "json",
                                    contentType: false,
                                    cache: false,
                                    processData: false,
                                    beforeSend: function () {
                                    },
                                    success: function (data) {
                                        if (data['status'] === 'success') {
                                            income = true
                                            Command: toastr["success"]("Income file validation successful.", "Success!")
                                        } else {
                                            console.log(data)
                                            Command: toastr["error"]("Income file validation failed due to:<li>" + data['header'].join('<li>'), "Failed!")
                                        }
                                    },
                                    error: function (e) {
                                        if (e.status == 0) {
                                            Command: toastr["info"]("Session timeout detected.", "Session Timeout!")
                                            setTimeout(function (e) {
                                                window.location.href = "/"
                                            }, 3000)
                                        } else {
                                            Command: toastr["error"]("Income file seems not from eric system or manual modification detected", "Failed!")
                                        }
                                    },
                                    complete: function () {
                                        $('.income-spinner').hide()
                                        enableCompile()
                                        validateInput('income', income)
                                    }
                                })
                            }
                        }
                    } else {
                        income = false
                        enableCompile()
                        validateInput('income', income)
                        $('.income-spinner').hide()
                        Command: toastr["error"]('Expected filename <br> < entity >_Income_< pay_period >', "Failed!")
                    }
                }

            });
            $(document).on('change', '#loan-balance-file', function (event) {
                event.preventDefault();
                $('.loan-spinner').show()
                var filename = $('#loanBalanceFileLabel').text().toUpperCase();
                var filenameNoExt = filename.substr(0, filename.lastIndexOf("."));
                var requiredName = filenameNoExt.includes("LOANBALANCE");
                var fileSplit = filenameNoExt.split('_');
                var error;

                if ($('#loanBalanceFile').val() == '') {
                    error = true;
                    loan = false
                    enableCompile()
                    validateInput('loan', loan)
                    $('.loan-spinner').hide()
                    Command: toastr["error"]("Please select a Loan balance file.", "Failed!")
                } else {
                    if (requiredName != true) {
                        error = true;
                        loan = false
                        enableCompile()
                        validateInput('loan', loan)
                        $('.loan-spinner').hide()
                        Command: toastr["error"]('Expected filename <br> < entity >_loanbalance_< pay_period >', "Failed!")
                    } else {
                        if (required_company != fileSplit[0] && required_payperiod != fileSplit[2]) {
                            error = true;
                            loan = false
                            enableCompile()
                            validateInput('loan', loan)
                            $('.loan-spinner').hide()
                            Command: toastr["error"]("Company & Pay period does not match.", "Failed!")
                        } else if (required_company != fileSplit[0]) {
                            error = true;
                            loan = false
                            enableCompile()
                            validateInput('loan', loan)
                            $('.loan-spinner').hide()
                            Command: toastr["error"]("Company does not match.", "Failed!")
                        } else if (required_payperiod != fileSplit[2]) {
                            error = true;
                            loan = false
                            enableCompile()
                            validateInput('loan', loan)
                            $('.loan-spinner').hide()
                            Command: toastr["error"]("Pay period does not match.", "Failed!")
                        } else {
                            error = false;
                        }
                    }
                }

                if (!error) {
                    $.ajax({
                        url: "payslip/upload",
                        method: "POST",
                        data: new FormData(this),
                        dataType: "json",
                        contentType: false,
                        cache: false,
                        processData: false,
                        beforeSend: function () {

                        },
                        success: function (data) {
                            if (data['status'] === 'success') {
                                loan = true
                                Command: toastr["success"]("Loan balance file validation successful.", "Success!")
                            } else {
                                loan = false
                                Command: toastr["error"]("Loan Balance file validation failed due to:<li>" + data['header'].join("<li>"), "Failed!")
                            }
                        },
                        error: function (e) {
                            if (e.status == 0) {
                                Command: toastr["info"]("Session timeout detected.", "Session Timeout!")
                                setTimeout(function (e) {
                                    window.location.href = "/"
                                }, 3000)
                            } else {
                                Command: toastr["error"]("Loan Balance seems not from eric system or manual modification detected", "Failed!")
                            }
                        },
                        complete: function () {
                            $('.loan-spinner').hide()
                            enableCompile()
                            validateInput('loan', loan)
                        }
                    })
                }
            });
            $(document).on('change', '#remarks-file', function (event) {
                event.preventDefault();
                $('.remarks-spinner').show()
                var filename = $('#remarksLabel').text().toUpperCase();
                var filenameNoExt = filename.substr(0, filename.lastIndexOf("."));
                var requiredName = filenameNoExt.includes("REMARKS");
                var fileSplit = filenameNoExt.split('_');
                var error;

                if ($('#remarksFile').val() == '') {
                    error = true;
                    remarks = false
                    enableCompile()
                    validateInput('remarks', remarks)
                    $('.remarks-spinner').hide()
                    Command: toastr["error"]("Please select a remarks file.", "Failed!")
                } else {
                    if (requiredName != true) {
                        error = true;
                        remarks = false
                        enableCompile()
                        validateInput('remarks', remarks)
                        $('.remarks-spinner').hide()
                        Command: toastr["error"]('Expected filename <br> < entity >_Remarks_< pay_period >', "Failed!")
                    } else {
                        if (required_company != fileSplit[0] && required_payperiod != fileSplit[2]) {
                            error = true;
                            remarks = false
                            enableCompile()
                            validateInput('remarks', remarks)
                            $('.remarks-spinner').hide()
                            Command: toastr["error"]("Company & Pay period does not match.", "Failed!")
                        } else if (required_company != fileSplit[0]) {
                            error = true;
                            remarks = false
                            enableCompile()
                            validateInput('remarks', remarks)
                            $('.remarks-spinner').hide()
                            Command: toastr["error"]("Company does not match.", "Failed!")
                        } else if (required_payperiod != fileSplit[2]) {
                            error = true;
                            remarks = false
                            enableCompile()
                            validateInput('remarks', remarks)
                            $('.remarks-spinner').hide()
                            Command: toastr["error"]("Pay period does not match.", "Failed!")
                        } else {
                            error = false;
                        }
                    }
                }

                if (!error) {
                    $.ajax({
                        url: "payslip/upload",
                        method: "POST",
                        data: new FormData(this),
                        dataType: "json",
                        contentType: false,
                        cache: false,
                        processData: false,
                        beforeSend: function () {
                        },
                        success: function (data) {
                            if (data['status'] === 'success') {
                                remarks = true
                                Command: toastr["success"]("Remarks file validation successful.", "Success!")
                            } else {
                                remarks = false
                                Command: toastr["error"]("Remarks file validation failed due to:<li>" + data['header'].join("<li>"), "Failed!")
                            }
                        },
                        error: function (e) {
                            if (e.status == 0) {
                                Command: toastr["info"]("Session timeout detected.", "Session Timeout!")
                                setTimeout(function (e) {
                                    window.location.href = "/"
                                }, 3000)
                            } else {
                                Command: toastr["error"]("Remarks file seems not from eric system or manual modification detected", "Failed!")
                            }
                        },
                        complete: function () {
                            $('.remarks-spinner').hide()
                            enableCompile()
                            validateInput('remarks', remarks)
                        }
                    })
                }
            });
            $(document).on('click', '#selectall', function () {
                if (this.checked) {
                    if (table.$('.row-select:not(:checked)').length != 0) {
                        var row = table.row(this.closest('tr')).data()
                        table.$('.row-select:not(:checked)').addClass('checked').prop('checked', true);
                        $('.row-select:not(:checked)').addClass('checked').prop('checked', true);
                        if (show_receipt) {
                            $.each(table.data(), function (i, item) {
                                var index = $.inArray(item['id'], selected);
                                if (item['is_status'] && !item['is_delivered']) {
                                    if (index === -1) {
                                        selected.push(item['id']);
                                    }
                                }
                            });
                        }
                    } else {
                        Command: toastr["error"]('No available rows to select', "Failed!")
                    }
                } else {
                    table.$('.row-select:checked').removeClass('checked').prop('checked', false);
                    $('.row-select:checked').removeClass('checked').prop('checked', false);
                    if (show_receipt) {
                        $.each(table.data(), function (i, item) {
                            var index = $.inArray(item['id'], selected);
                            selected.splice(index, 1)
                        });
                    }
                }

                enableSend(selected.length)
            })
            $(document).on('change', '#incomeFile , #loanBalanceFile, #remarksFile', function (e) {
                var fileType = $(this).data('file')
                $('#compile').prop('disabled', true)
                if (fileType == 'income') {
                    if (this.value != '') {
                        $('#incomeFileLabel').css('border', '')

                        $('#loanBalanceFile').val('').prop('disabled', true)
                        $('#loanBalanceFileLabel').text('Choose file').css('border', '')
                        $('#loanBalanceValidate').prop('disabled', true)

                        $('#remarksFile').val('').prop('disabled', true)
                        $('#remarksLabel').text('Choose file').css('border', '')
                        $('#remarksValidate').prop('disabled', true)

                    } else {
                        $('#incomeFileLabel').css('border', '1px solid red')

                        $('#loanBalanceFile').val('').prop('disabled', true)
                        $('#loanBalanceFileLabel').text('Choose file').css('border', '')
                        $('#loanBalanceValidate').prop('disabled', true)

                        $('#remarksFile').val('').prop('disabled', true)
                        $('#remarksLabel').text('Choose file').css('border', '')
                        $('#remarksValidate').prop('disabled', true)

                    }
                } else if (fileType == 'loan') {
                    if (this.value != '') {
                        $('#loanBalanceFileLabel').css('border', '')

                        $('#remarksFile').val('').prop('disabled', true)
                        $('#remarksLabel').text('Choose file').css('border', '')
                        $('#remarksValidate').prop('disabled', true)

                    } else {
                        $('#loanBalanceFileLabel').css('border', '1px solid red')

                        $('#remarksFile').val('').prop('disabled', true)
                        $('#remarksLabel').text('Choose file').css('border', '')
                        $('#remarksValidate').prop('disabled', true)

                    }
                } else if (fileType == 'remarks') {
                    if (this.value != '') {
                        $('#remarksLabel').css('border', '')
                    } else {
                        $('#remarksLabel').css('border', '1px solid red')
                    }
                }

            })
            $(document).on('click', '#compile', function (e) {
                $(this).prop('disabled', true)
                var formData = new FormData();
                formData.append('fileIncome', $('#incomeFile')[0].files[0]);
                formData.append('fileLoan', $('#loanBalanceFile')[0].files[0]);
                formData.append('fileRemarks', $('#remarksFile')[0].files[0]);
                formData.append('compilerId', Math.random().toString(36).substring(2, 10 + 2));
                $.ajax({
                    url: "payslip/compile",
                    method: "POST",
                    headers: {
                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                    },
                    data: formData,
                    dataType: "html",
                    contentType: false,
                    cache: false,
                    processData: false,
                    beforeSend: function () {

                    },
                    success: function (data) {
                        Command: toastr["success"]("Compiling success!", "Success!")
                        $('#modal-upload').modal('hide')
                    },
                    complete: function () {
                        table.clear().destroy();
                        drawTable()
                    },
                    error: function (e) {
                        if (e.status == 0) {
                            Command: toastr["info"]("Session timeout detected.", "Session Timeout!")
                            setTimeout(function (e) {
                                window.location.href = "/"
                            }, 3000)
                        }
                    },
                })
            })

            $(document).on('click', '#send-close', function (e) {
                // $("#payslip-table").DataTable().ajax.reload();
                if (show_receipt) {
                    $('#modal-email').modal('hide')
                } else {
                    Command: toastr["info"]("Please wait for sending of payslip/s to complete.", "Sending")
                }
            })

            $(document).on('click', '.btn-send-mail', function (e) {
                e.preventDefault()
                toggleSend(true, 'Sending')
                send(selected)
            })

            $('#payslip-table tbody ').on('change', 'input[type="checkbox"]', function (event) {
                var id = parseInt(this.value);
                var index = $.inArray(id, selected);
                if (show_receipt) {
                    if (index === -1) {
                        selected.push(id);
                    } else {
                        selected.splice(index, 1);
                    }
                }
                $('.id' + id).toggleClass('checked').prop('checked', this.checked)

                enableSend(selected.length)
            });
            $('#payslip-table tbody').on('click', 'td:not(:nth-child(1))', function (e) {
                e.preventDefault()
                var data = $("#payslip-table").DataTable().row(this).data();
                if (!data['is_delivered']) {
                    var url = data['is_status'] ? 'payslip/show/' + data['id'] : 'payslip/error/' + data['id']
                    $.ajax({
                        url: url,
                        type: 'get',
                        dataType: 'html',
                        beforeSend: function () {
                            $('#payslipView').html()
                        },
                        success: function (response) {
                            if (data['is_status']) {
                                $('#modal-view').modal('show')
                                $('#payslipView').html(response)
                            } else {
                                $('#modal-error').modal('show')
                                $('#errorView').html(response)
                            }
                        },
                        complete: function () {
                        },
                        error: function (e) {
                            if (e.status == 0) {
                                Command: toastr["info"]("Session timeout detected.", "Session Timeout!")
                                setTimeout(function (e) {
                                    window.location.href = "/"
                                }, 3000)
                            }
                        },
                    });
                } else {
                    Command: toastr["info"]("The payslip is already delivered and the extracted file has been deleted.", "Information")
                }
                return false
            });

            function enableSend(count) {
                var rows = table.rows().data().filter(function (item, index) {
                    return item['is_status'] && !item['is_delivered'] ? true : false;
                }).length;

                $('.btn-send').prop('disabled', count > 0 ? false : true)
                $('.selectall').prop('checked', rows != 0 && count != 0 ? rows == count ? true : false : false);
            }

            function clearInputs() {
                income = false
                loan = false
                remarks = false
                $('.custom-file-input').val('')
                $('.custom-file-label').text('Choose file').css('border', '')
                $('.file-dependent').prop('disabled', true)
                $('#compile').prop('disabled', true)
            }

            function validateInput(fileType, response) {
                if (fileType == 'income') {
                    if (response) {
                        $('#incomeFileLabel').css('border', '')

                        $('#loanBalanceFile').prop('disabled', false)
                        $('#loanBalanceValidate').prop('disabled', false)
                    } else {
                        $('#incomeFileLabel').css('border', '1px solid red')

                        $('#loanBalanceFile').val('').prop('disabled', true)
                        $('#loanBalanceFileLabel').text('Choose file')
                        $('#loanBalanceValidate').prop('disabled', true)

                        $('#remarksFile').val('').prop('disabled', true)
                        $('#remarksLabel').text('Choose file')
                        $('#remarksValidate').prop('disabled', true)

                        income = false
                        loan = false
                        remarks = false
                    }
                } else if (fileType == 'loan') {
                    if (response) {
                        $('#loanBalanceFileLabel').css('border', '')

                        $('#remarksFile').prop('disabled', false)
                        $('#remarksValidate').prop('disabled', false)
                    } else {
                        $('#loanBalanceFileLabel').css('border', '1px solid red')

                        $('#remarksFile').val('').prop('disabled', true)
                        $('#remarksLabel').text('Choose file')
                        $('#remarksValidate').prop('disabled', true)

                        loan = false
                        remarks = false
                    }
                } else if (fileType == 'remarks') {
                    if (response) {
                        $('#remarksLabel').css('border', '')
                    } else {
                        $('#remarksLabel').css('border', '1px solid red')
                        remarks = false
                    }
                }
            }

            function enableCompile() {
                var isDisabled;
                if (income == true && loan == true && remarks == true) {
                    isDisabled = false
                } else {
                    isDisabled = true
                }
                $('#compile').prop('disabled', isDisabled)
            }

            function showSendMail(show_receipt) {
                if (show_receipt) {
                    if (selected.length != 0) {
                        var recipient = [];
                        table.$('.row-select:checked').each(function (val, e, i) {
                            //var row = table.row(val).data();
                            var row = table.row(this.closest('tr')).data()
                            // console.log(row['id'])
                            recipient.push(row)
                        })
                        $.ajax({
                            url: 'payslip/recipient',
                            type: 'POST',
                            data: {
                                _token: "{{ csrf_token() }}",
                                recipient: recipient
                            },
                            dataType: 'html',
                            beforeSend: function () {
                                toggleSend(false, 'Send')
                            },
                            success: function (response) {
                                $('#recipient').html(response)
                            },
                            complete: function () {
                                $('#modal-email').modal({backdrop: 'static', keyboard: false})
                            },
                            error: function (e) {
                                if (e.status == 0) {
                                    Command: toastr["info"]("Session timeout detected.", "Session Timeout!")
                                    setTimeout(function (e) {
                                        window.location.href = "/"
                                    }, 3000)
                                }
                            },
                        });
                    }
                } else {
                    $('#modal-email').modal({backdrop: 'static', keyboard: false})
                }
            }

            async function send(ids) { // We need to wrap the loop into an async function for this to work
                sent = []
                console.log(ids)
                var success = 1
                var fail = 1
                show_receipt = false
                for (var i = 0; i < ids.length; i++) {
                    var id = ids[i]
                    // $('#payslip-table').DataTable().ajax.reload();
                    var xhr = $.ajax({
                        url: 'payslip/send/' + id,
                        type: 'get',
                        dataType: 'json',
                        beforeSend: function () {
                            $('.send' + id).removeClass('recipient').addClass('sending')
                            $('.ico' + id).toggleClass('fa-envelope fa-reply')
                        },
                        success: function (response) {
                            sent.push(parseInt(response['id']))
                            if (response['status_code'] == 200) {
                                $('.send' + response['id']).removeClass('sending').addClass('sent')
                                $('.ico' + response['id']).toggleClass('fa-reply fa-check')
                                $('.mail-sent').text('Sent: ' + success++)
                                $('.send' + response['id']).attr('data-content', response['message'])
                                $('.tr' + response['id']).addClass('delivered').find("td:eq(10)").text('Sent')
                                $('.id' + response['id']).hide();
                            } else {
                                $('.send' + response['id']).removeClass('sending').addClass('fail')
                                $('.ico' + response['id']).toggleClass('fa-reply fa-times')
                                $('.mail-failed').text(' Failed: ' + fail++)
                                $('.send' + response['id']).attr('data-content', response['message'])
                            }
                        },
                        complete: function (response) {
                            if (sent.length == selected.length) {
                                toggleSend(false, 'Close')
                                table.clear().destroy();
                                drawTable()
                                show_receipt = true
                            }
                        },
                        error: function (e) {
                            if (e.status == 0) {
                                Command: toastr["info"]("Session timeout detected.", "Session Timeout!")
                                setTimeout(function (e) {
                                    window.location.href = "/"
                                }, 3000)
                            }
                        },
                    });
                    await timer(3000); // then the created Promise can be awaited
                }
            }

            function toggleSend(bool, text) {
                if (text == 'Close') {
                    $('#send-mail').attr('data-dismiss', "modal").prop('disabled', bool).text(text).addClass('btn-danger btn-close').removeClass('btn-success btn-send-mail')
                } else {
                    $('#send-mail').removeAttr('data-dismiss').prop('disabled', bool).text(text).addClass('btn-success btn-send-mail').removeClass('btn-danger btn-close')
                }
            }
        });
    </script>
@endsection