@extends('main')

@section('css')
@endsection
<style>
    .fixTableHead {
        overflow-y: auto;
        height: 70vh;
    }
    .fixTableHead thead th {
        position: sticky;
        top: 0;
    }
    table {
        border-collapse: collapse;
        width: 100%;
    }
    th {
        background: #eee;
    }
</style>
@section('content')
    <div id="main-content">
        <div class="container-fluid">
            <div class="block-header">
                <div class="row">
                    <div class="col-lg-6 col-md-8 col-sm-12">
                        <h2><a href="javascript:void(0);" class="btn btn-xs btn-link btn-toggle-fullwidth"><i class="fa fa-arrow-left"></i></a>Payroll</h2>
                        <ul class="breadcrumb">
                            <li class="breadcrumb-item"><a href="#"><i class="icon-home"></i></a></li>
                            <li class="breadcrumb-item">Payroll</li>
                            <li class="breadcrumb-item active">Monthly Allowed Deduction</li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="row clearfix">
                <div class="col-lg-12">
                    <div class="card mb-0">
                        <form id="monthlyAllowedDeductionForm" class="mb-0">
                            @csrf
                            <div class="header pb-1">
                                <div class="row align-items-center">
                                    <h2 class="col-4">Monthly Allowed Deduction</h2>
                                    <label class="col-1">Select Month</label>
                                    <div class="col-3">
                                        <input type="month" id="month" class="form-control" onchange="getPreviousMonthlyAllowedDeduction()" required>
                                    </div>
                                    <div class="col-4 text-right">
                                        <button type="button" class="btn btn-success" onclick="viewMonthlyAllowedDeduction()">View</button>
                                    </div>
                                </div>
                            </div>
                            <div class="body pt-1 pb-2">
                                <div class="fixTableHead table-responsive mb-3">
                                    <table class="table table-bordered table-hover table-striped">
                                        <thead>
                                        <tr>
                                            <th class="text-center">Employee Id</th>
                                            <th class="text-center">Employee Name</th>
                                            <th class="text-center">Department</th>
                                            <th class="text-center">Gross Salary</th>
                                            <th class="text-center">Increment</th>
                                            <th class="text-center">Other Allowance</th>
                                            <th class="text-center">Sales Commission</th>
                                            <th class="text-center">Festival Bonus</th>
                                            <th class="text-center">Arrear</th>
                                            <th class="text-center">Security Deposit</th>
                                            <th class="text-center">Loan/Advance</th>
                                            <th class="text-center">Adjustment</th>
                                            <th class="text-center">Late Deduction</th>
                                            <th class="text-center">Total Late</th>
                                            <th class="text-center">LWP/Absence</th>
                                            <th class="text-center">Other Adjustment</th>
                                            <th class="text-center">Action</th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        @foreach( $employees as $employee )
                                            <tr>
                                                <td class="text-center">{{ @$employee->user->accessPin }}</td>
                                                <td class="text-center">{{ @$employee->firstName.' '.@$employee->middleName.' '.@$employee->lastName }}</td>
                                                <td class="text-center">{{ @$employee->department->departmentName }}</td>
                                                <td class="text-center">{{ @$employee->salaryMain->gross_salary }}</td>
                                                <td class="text-center"></td>{{--<input type="number" step="0.1" min="0" id="{{ 'increment'.'_'.$employee->id }}" name="increment[{{ $employee->id  }}]" style="width: 80px;">--}}
                                                <td class="text-center"><input type="number" step="0.01" min="0" id="{{ 'otherAllowance'.'_'.$employee->id }}" name="otherAllowance[{{ $employee->id  }}]" style="width: 80px;"></td>
                                                <td class="text-center"><input type="number" step="0.01" min="0" id="{{ 'salesComission'.'_'.$employee->id }}" name="salesComission[{{ $employee->id  }}]" style="width: 80px;"></td>
                                                <td class="text-center"><input type="number" step="0.01" min="0" id="{{ 'festivalBonus'.'_'.$employee->id }}" name="festivalBonus[{{ $employee->id  }}]" style="width: 80px;"></td>
                                                <td class="text-center"><input type="number" step="0.01" min="0" id="{{ 'arrear'.'_'.$employee->id }}" name="arrear[{{ $employee->id  }}]" style="width: 80px;"></td>
                                                <td class="text-center"><input type="number" step="0.01" min="0" id="{{ 'securityDeposit'.'_'.$employee->id }}" name="securityDeposit[{{ $employee->id  }}]" style="width: 80px;"></td>
                                                <td class="text-center"><input type="number" step="0.01" min="0" id="{{ 'loan'.'_'.$employee->id }}" name="loan[{{ $employee->id  }}]" style="width: 80px;"></td>
                                                <td class="text-center"><input type="number" step="0.01" min="0" id="{{ 'adjustment'.'_'.$employee->id }}" name="adjustment[{{ $employee->id  }}]" style="width: 80px;"></td>
                                                <td class="text-center"><input type="number" step="0.01" min="0" id="{{ 'lateDeduction'.'_'.$employee->id }}" name="lateDeduction[{{ $employee->id  }}]" style="width: 80px;"></td>
                                                <td class="text-center"><input type="number" step="0.01" min="0" id="{{ 'totalLate'.'_'.$employee->id }}" name="totalLate[{{ $employee->id  }}]" style="width: 80px;" readonly></td>
                                                <td class="text-center"><input type="number" step="0.01" min="0" id="{{ 'lwp'.'_'.$employee->id }}" name="lwp[{{ $employee->id  }}]" style="width: 80px;"></td>
                                                <td class="text-center"><input type="number" step="0.01" min="0" id="{{ 'otherAdjustment'.'_'.$employee->id }}" name="otherAdjustment[{{ $employee->id  }}]" style="width: 80px;"></td>
                                                <td class="text-center"><button type="button" title="See Attendance" class="btn btn-sm btn-info" data-toggle="modal" data-target="#exampleModal" onclick="getLateDates('{{ $employee->id }}')"><i class="fa fa-eye"></i></button></td>
                                            </tr>
                                        @endforeach
                                        </tbody>
                                    </table>
                                </div>
                                <div class="text-center">
                                    <button type="submit" class="btn btn-lg btn-primary">Save</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal -->
    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Lates</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <table class="table table-striped">
                        <thead>
                        <tr>
                            <th>Date</th>
                            <th>Schedule In</th>
                            <th>Schedule Out</th>
                            <th>Check In</th>
                            <th>Check Out</th>
                            <th>Late Time</th>
                        </tr>
                        </thead>
                        <tbody id="lateDatesTableBody">
                        </tbody>
                    </table>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>

@endsection
@section('js')
    <script>
        $(document).ready( function () {

        });

        function getLateDates(empId) {
            $('#lateDatesTableBody').empty()
            if($('#month').val() !== '') {
                $.ajax({
                    type: 'GET',
                    url: "{{ route('getLateDates') }}",
                    data: {month: $('#month').val(), empId: empId},
                    success: function (response) {
                        if (response.status === 200) {
                            response.lateDates.forEach((v,i) => {
                                if (v.late === "Y") {
                                    $('#lateDatesTableBody').append(`
                                        <tr>
                                            <td>${v.attendanceDate}</td>
                                            <td>${v.scheduleIn}</td>
                                            <td>${v.scheduleOut}</td>
                                            <td>${v.checkIn}</td>
                                            <td>${v.checkOut}</td>
                                            <td>${v.lateTime}</td>
                                        </tr>
                                    `)
                                }
                            })
                        }
                    },
                    error: function (error) {
                        console.log(error)
                    }
                });
            } else {
                toastr.error('Please select month first!')
            }
        }

        function viewMonthlyAllowedDeduction() {
            if ($('#month').val() === '') {
                toastr.error('Please select month first!')
            } else {
                let url = '{{ route("viewMonthlyAllowedDeduction", ":month") }}';
                url = url.replace(':month', $('#month').val());
                window.location.href = url
            }
        }

        function getPreviousMonthlyAllowedDeduction() {
            if ($('#month').val() !== '') {
                $.ajax({
                    type: 'GET',
                    url: "{{ route('monthlyAllowedDeductionByMonth') }}",
                    data: {month: $('#month').val()},
                    success: function (response) {
                        if (response.status === 200) {
                            if(response.monthlyAllowedDeduction.length !== 0) {
                                response.lateLeave.forEach((v) => {
                                    response.monthlyAllowedDeduction.map(function (item){
                                        if (item.empId === v.employeeId) {
                                            item.lateLeave = v
                                        }
                                        return item
                                    });
                                })

                                response.monthlyAllowedDeduction.forEach((v,i) => {
                                    // $(`#increment_${v.empId}`).val(v.increment)
                                    $(`#otherAllowance_${v.empId}`).val(v.other_allowance)
                                    $(`#salesComission_${v.empId}`).val(v.sales_comission)
                                    $(`#festivalBonus_${v.empId}`).val(v.festival_bonus)
                                    $(`#arrear_${v.empId}`).val(v.arrear)
                                    $(`#securityDeposit_${v.empId}`).val(v.security_deposit_d)
                                    $(`#loan_${v.empId}`).val(v.loan_d)
                                    $(`#adjustment_${v.empId}`).val(v.adjustment_d)
                                    if(v.lateLeave) {
                                        if (v.salaryMain) {
                                            let tot_late = Math.floor(parseInt(v.lateLeave.tot_late)/3)
                                            let late_fee = parseFloat(v.salaryMain.gross_salary)/30
                                            $(`#lateDeduction_${v.empId}`).val((tot_late*late_fee).toFixed(2))
                                        }
                                        $(`#totalLate_${v.empId}`).val(v.lateLeave.tot_late)
                                    }
                                    $(`#lwp_${v.empId}`).val(v.lwp_d)
                                    $(`#otherAdjustment_${v.empId}`).val(v.other_adjustment_d)
                                })
                            } else {
                                @foreach( $employees as $employee )
                                $(`#otherAllowance_{{ $employee->id }}`).val('')
                                $(`#salesComission_{{ $employee->id }}`).val('')
                                $(`#festivalBonus_{{ $employee->id }}`).val('')
                                $(`#arrear_{{ $employee->id }}`).val('')
                                $(`#securityDeposit_{{ $employee->id }}`).val('')
                                $(`#loan_{{ $employee->id }}`).val('')
                                $(`#adjustment_{{ $employee->id }}`).val('')
                                $(`#lateDeduction_{{ $employee->id }}`).val('')
                                $(`#totalLate_{{ $employee->id }}`).val('')
                                $(`#lwp_{{ $employee->id }}`).val('')
                                $(`#otherAdjustment_{{ $employee->id }}`).val('')
                                @endforeach
                            }

                        }
                    },
                    error: function (error) {
                        console.log(error)
                    }
                });
            }
        }

        $('#monthlyAllowedDeductionForm').on('submit', function (e) {
            e.preventDefault()

            let object = {};
            @foreach( $employees as $employee )
                object[{{ $employee->id }}] = {
                    {{--'increment': $('#increment_{{ $employee->id }}').val(),--}}
                    'otherAllowance': $('#otherAllowance_{{ $employee->id }}').val(),
                    'salesComission': $('#salesComission_{{ $employee->id }}').val(),
                    'festivalBonus': $('#festivalBonus_{{ $employee->id }}').val(),
                    'arrear': $('#arrear_{{ $employee->id }}').val(),
                    'securityDeposit': $('#securityDeposit_{{ $employee->id }}').val(),
                    'loan': $('#loan_{{ $employee->id }}').val(),
                    'adjustment': $('#adjustment_{{ $employee->id }}').val(),
                    'lateDeduction': $('#lateDeduction_{{ $employee->id }}').val(),
                    'lwp': $('#lwp_{{ $employee->id }}').val(),
                    'otherAdjustment': $('#otherAdjustment_{{ $employee->id }}').val(),
                }
            @endforeach
            let json = JSON.stringify(object);

            $.ajax({
                type: 'POST',
                url: "{{ route('storeMonthlyAllowedDeduction') }}",
                data: {_token: '{{ csrf_token() }}', data: json, month: $('#month').val()},
                success: function (response) {
                    if (response.status === 200) {
                        if (response.message === "created") {
                            toastr.success('Monthly Allowed Deduction Created Successfully!')
                        } else {
                            toastr.success('Monthly Allowed Deduction Updated Successfully!')
                        }
                    }
                },
                error: function (error) {
                    console.log(error)
                }
            });
        });
    </script>
@endsection