@extends('layouts.authenticated')
@section('title','Payslip')
@section('payslip','active')
@section('style')
    <style>
        th, td {
            white-space: nowrap;
        }

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

        .btn-upload {
            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-send:hover {
            color: #fff;
            background-color: #17a2b8;
            border-color: #17a2b8;
        }

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

    </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">Payslip</h3>
                            </div>
                            <div class="card-body">
                                <table id="payslip-table" class="table stripe row-border order-column"
                                       style="width: 100%">
                                    <thead>
                                    <tr>
                                        <th><input name="select_all" class="selectall" value="1" type="checkbox"> To
                                            send
                                        </th>
                                        <th>Employee Name</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>
        </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">Upload Employee</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" 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 class="btn btn-danger" id="terminate">Terminate</button>
                    <button class="btn btn-success" id="compile" disabled>Compile</button>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>
@endsection
@section('customjs')
    <script>
        $(document).ready(function () {
            var income, loan, remarks;
            toastr.options = {
                "closeButton": true,
                "preventDuplicates": false,
                "tapToDismiss": false
            }

            $("#payslip-table").DataTable({
                mark: true,
                scrollY: "500px",
                scrollX: true,
                scrollCollapse: true,
                paging: true,
                ajax: {
                    url: "payslip/get-payslip",
                },
                columns: [
                    {data: 'id'},
                    {data: 'emp_name'},
                    {data: 'emp_number'},
                    {data: 'gross_income'},
                    {data: 'total_deduction'},
                    {data: 'net_income'},
                    {data: 'pay_period'},
                    {data: 'designated_email'},
                    {data: 'processing_status_id'},
                    {data: 'is_delivered'},
                ],
                fixedColumns: {
                    iLeftColumns: 2
                },
                columnDefs: [
                    {
                        orderable: false,
                        targets: 0
                    }
                ],
                order: [1, 'asc'],
                buttons: [{
                    text: '<i class="fas fa-envelope" data-toggle="tooltip" title="Send Email"/></i> Send',
                    className: "btn-send disabled",
                    autoClose: 'true',
                    action: function (e, dt, node, config) {
                        $('#modal-add').modal('show')
                    }
                }, {
                    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",
                        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', '#incomeFile , #loanBalanceFile, #remarksFile', function (e) {
                var fileType = $(this).data('file')
                //   validateInput(fileType, false)
                /*   if (this.value == '') {
                       validateInput(fileType, false)
                     // $('#' + this.id + 'Label').css('border', '1px solid red')
                   } else {
                       validateInput(fileType, true)
                     //  $('#' + this.id + 'Label').css('border', '')
                   }*/
                $('#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')
                    }
                }

            })

            function clearInputs() {
                $('.custom-file-input').val('')
                $('.custom-file-label').text('Choose file')
                $('.file-dependent').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
                    }
                }
            }

            $('#income-file').on('change', 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('_');

                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) {
                        $.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 successfully.", "Success!")
                                } else {
                                    income = false
                                    Command: toastr["error"]("Income file validation failed due to required header missing in the template.<li>" + data['header'][0].join("<li>"), "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!")
                    }
                }

            });
            $('#loan-balance-file').on('change', 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('_');

                if ($('#loanBalanceFile').val() == '') {
                    loan = false
                    enableCompile()
                    validateInput('loan', loan)
                    $('.loan-spinner').hide()
                    Command: toastr["error"]("Please select a Loan balance file.", "Failed!")
                } else {
                    if (requiredName == true) {
                        $.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 successfully.", "Success!")
                                } else {
                                    loan = false
                                    Command: toastr["error"]("Loan Balance file validation failed due to required header missing in the template.<li>" + data['header'][0].join("<li>"), "Failed!")
                                }
                            },
                            complete: function () {
                                $('.loan-spinner').hide()
                                enableCompile()
                                validateInput('loan', loan)
                            }
                        })
                    } else {
                        loan = false
                        enableCompile()
                        validateInput('loan', loan)
                        $('.loan-spinner').hide()
                        Command: toastr["error"]('Expected filename <br> < entity >_loanbalance_< pay_period >', "Failed!")
                    }
                }
            });
            $('#remarks-file').on('change', 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('_');

                if ($('#remarksFile').val() == '') {
                    remarks = false
                    enableCompile()
                    validateInput('remarks', remarks)
                    $('.remarks-spinner').hide()
                    Command: toastr["error"]("Please select a Loan balance file.", "Failed!")
                } else {
                    if (requiredName == true) {
                        $.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 successfully.", "Success!")
                                } else {
                                    remarks = false
                                    Command: toastr["error"]("Remarks file validation failed due to required header missing in the template.<li>" + data['header'][0].join("<li>"), "Failed!")
                                }
                            },
                            complete: function () {
                                $('.remarks-spinner').hide()
                                enableCompile()
                                validateInput('remarks', remarks)
                            }
                        })
                    } else {
                        remarks = false
                        enableCompile()
                        validateInput('remarks', remarks)
                        $('.remarks-spinner').hide()
                        Command: toastr["error"]('Expected filename <br> < entity >_Remarks_< pay_period >', "Failed!")
                    }
                }
            });

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


            $(document).on('click', '#compile', function (e) {
                $.ajax({
                    url: "payslip/compile",
                    method: "POST",
                    data: {
                        '_token': '{{csrf_token()}}',
                        'compiler_id': Math.random().toString(36).substring(2, 10 + 2)
                    },
                    dataType: "html",
                    beforeSend: function () {

                    },
                    success: function (data) {
                        Command: toastr["success"]("Compiling success!", "Success!")
                        $('#modal-upload').modal('hide')

                    },
                    complete: function () {
                        $('#payslip-table').DataTable().ajax.reload();
                    }
                })
            })

            $(document).on('click', '.close', function (e) {
                $('.income-validate').popover('hide');
            })


            $('thead input[name="select_all"]').on('click', function (e) {
                if (this.checked) {
                    $('.selectrow:not(:checked)').trigger('click');
                    $('thead input[name="select_all"]').removeClass('unselectall').addClass('selectall');
                } else {
                    $('.selectrow:checked').trigger('click');
                    $('thead input[name="select_all"]').removeClass('selectall').addClass('unselectall');
                }
            });

        });
    </script>
@endsection