@extends('admin.layout.app')
@section('title','Employee Salary')
@push('headerscript')
    <link href="{{asset('theme/plugins/bootstrap-datepicker/css/bootstrap-datepicker.min.css')}}" rel="stylesheet">
@endpush
@section('content')
    <div class="content">
        <div class="container">
            <div class="row">
                <div class="col-xs-12">
                    <div class="page-title-box">
                        <h4 class="page-title">Employee Salary</h4>
                        <div class="pull-right">
                            {{--                            <a href="{{route('employee-salary.index')}}"--}}
                            {{--                               class="btn btn-custom btn-rounded waves-effect waves-light m-b-2"><i--}}
                            {{--                                    class=" mdi mdi-keyboard-backspace"></i> Back</a>--}}
                        </div>
                        <div class="clearfix"></div>
                    </div>
                </div>
            </div>
            {!! Form::open(['route'=>array('employee-salary.store'), 'onsubmit'=>'BtnSubmit.disabled = true','method' => 'post']) !!}
            <div class="row">
                <div class="form-group col-sm-3 col-12">
                    <label for="salary_month">Month</label>
                    <input type="text" name="salary_month" id="salary_month"
                           value="{{date('M-Y')}}"
                           class="form-control datepicker1">
                    <div class="text-danger">{{$errors->first('salary_month')}}</div>
                </div>
                <div class="form-group col-sm-2 col-12" id="assets">
                    <label for="assets_account_id">Paid From ( Asset Account )<span class="text-danger">*</span></label>
                    {!! Form::select("assets_account_id", [''=>'Select']+$assets, old("assets_account_id"), ['class'=>'form-control select2' ,'id' => 'assets_account_id','required'=>'required']  ) !!}
                    <div class="text-danger">{{$errors->first('assets_account_id')}}</div>
                </div>
                <div class="form-group col-sm-2 col-12" id="expense">
                    <label for="salary_month">Paid to ( Expense Account )<span class="text-danger">*</span></label>
                    {!! Form::select("expense_account_id", [''=>'Select']+$expenses, old("expense_account_id",), ['class'=>'form-control select2' ,'id' => 'expense_account_id','required'=>'required']  ) !!}
                    <div class="text-danger">{{$errors->first('expense_account_id')}}</div>
                </div>
                <div class="form-group col-sm-2 col-12">
                    <label for="branch_id">Branch<span class="text-danger">*</span></label>
                    {!! Form::select("branch_id", \App\Http\Helpers\Helper::getBranchData(), old("branch_id"), ['class'=>'form-control' ,'id' => 'branch_id','required'=>'required']  ) !!}
                </div>
                <div class="form-group col-sm-2 col-12">
                    <label for="journal_voucher_no">Journal Voucher No.</label>
                    <input type="text" name="journal_voucher_no" id="journal_voucher_no" readonly
                           value="{{old('journal_voucher_no',$journalVchNo+1 < 10 ? 'JNL-0'.$journalVchNo+1 : 'JNL-'.$journalVchNo+1 )}}"
                           class="form-control">
                    <div class="text-danger">{{$errors->first('journal_voucher_no')}}</div>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-12 col-12 table-responsive">
                    <table class="table table-striped dataTable" id="datatable">
                        <thead>
                        <tr>
                            <th style="width: 15%">Employee Name</th>
                            <th>Attendance</th>
                            <th style="width: 15%">Basic Salary</th>
                            <th>OT Hours</th>
                            <th style="width: 15%">OT Amount</th>
                            <th style="width: 10%">Transp.</th>
                            <th style="width: 10%">Accomm.</th>
                            <th style="width: 10%">Insurance</th>
                            <th style="width: 10%">Others</th>
                            <th>Reimbursement</th>
                            <th>Deductions</th>
                            {{--                            <th>Deductions Reason</th>--}}
                            <th style="width: 15%">Total Salary</th>
                        </tr>
                        </thead>
                        <tbody>

                        </tbody>
                    </table>
                </div>
                <div class="form-group text-center m-t-10">
                    <div class="col-xs-12 m-t-20">
                        <button type="submit"
                                id="BtnSubmit"
                                class="btn w-md btn-bordered btn-success waves-effect waves-light">
                            Submit
                        </button>
                    </div>
                </div>
                {!! Form::close() !!}
            </div>
        </div>
    </div>
@endsection

@push('footerscript')
    <script src="{{asset('theme/plugins/moment/moment.js')}}"></script>
    <script src="{{asset('theme/plugins/bootstrap-datepicker/js/bootstrap-datepicker.min.js')}}"></script>
    <script>
        $(window).load(function () {
            $('#salary_month').change();
        });

        $(".datepicker1").datepicker({
            format: "M-yyyy",
            startView: "months",
            minViewMode: "months",
            autoclose: true,
        });

        $(function () {
            if ({{count($employees)}} == 1
            ) {
                $('#employee_id option:eq(1)').prop('selected', true)
            }
        });

        $('.number').keyup(function (e) {
            if (/\D/g.test(this.value)) {
                this.value = this.value.replace(/\D/g, '');
            }
        });

        $('.floatnumber').on('input', function () {
            this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');
        });

        $('#salary_month').on('change', function (e) {
            var month = $('#salary_month').val();
            $.ajax({
                url: '{{route('employeeSalary.salaryDetail')}}',
                type: 'GET',
                data: {
                    month: month
                },
                success: function (response) {
                    $("table#datatable").find("tr:gt(0)").remove();
                    $.each(response[0], function (key, val) {

                        var employee_salary_id = val.id;

                        if (val.assets_account_id) {
                            $('#assets_account_id').val(val.assets_account_id).prop('selected', true);
                        }
                        if (val.expense_account_id) {
                            $('#expense_account_id').val(val.expense_account_id).prop('selected', true);
                        }

                        let total_salary = (Number(val.basic_salary) + Number(val.transportation) + Number(val.accommodation) + Number(val.insurance) + Number(val.others) + Number(val.total_ot_amount) + (Number(val.reimbursement) ? Number(val.reimbursement) : 0)) - (Number(val.deductions) ? Number(val.deductions) : 0);

                        var col = "<tr>";
                        col += '<td><select name="employee_id[]"  id="employee_id' + key + '" class="form-control">' +
                            '<option value="' + val.employee_id + '">' + val.name + '</option> </select></td>';
                        col += '<td> <input type="text" value="' + val.total_days + '" name="total_days[]" id="total_days' + key + '" class="form-control" readonly> </td>';
                        col += '<td> <input type="text" value="' + val.basic_salary + '" name="basic_salary[]" id="basic_salary' + key + '" class="form-control" readonly> </td>';
                        col += '<td> <input type="text" value="' + (val.total_ot_hours ? val.total_ot_hours : 0) + '" name="ot_hours[]" id="ot_hours' + key + '" class="form-control" readonly> </td>';
                        col += '<td> <input type="text" value="' + (val.total_ot_amount ? val.total_ot_amount : 0) + '" name="ot_amount[]" id="ot_amount' + key + '" class="form-control" readonly> </td>';
                        col += '<td> <input type="text" value="' + val.transportation + '" name="transportation[]" id="transportation' + key + '" class="form-control" readonly> </td>';
                        col += '<td> <input type="text" value="' + val.accommodation + '" name="accommodation[]" id="accommodation' + key + '" class="form-control" readonly> </td>';
                        col += '<td> <input type="text" value="' + val.insurance + '" name="insurance[]" id="insurance' + key + '" class="form-control" readonly> </td>';
                        col += '<td> <input type="text" value="' + val.others + '" name="others[]" id="others' + key + '" class="form-control" readonly> </td>';

                        col += '<td> <input type="text" value="' + (val.reimbursement ? val.reimbursement : 0) + '" name="reimbursement[]" id="reimbursement' + key + '" class="form-control"> </td>';
                        col += '<td> <input type="text" value="' + (val.deductions ? val.deductions : 0) + '" name="deductions[]" id="deductions' + key + '" class="form-control"> </td>';
                        // col += '<td> <input type="text" value="' + (val.deduction_resson ? val.deduction_resson : "") + '" name="deduction_resson[]" id="deduction_resson' + key + '" class="form-control"> </td>';

                        col += '<td> <input type="text" value="' + total_salary + '" name="total_salary[]" id="total_salary' + key + '" class="form-control floatnumber" required> </td>';
                        if (response[1] == 'yes') {
                            var url = '{{url("employee-salary/slip/:employee_salary_id/:page")}}';
                            url = url.replace(':employee_salary_id', employee_salary_id).replace(':page', 1);
                            col += `<td><a href="${url}" class="btn btn-xs btn-primary" style="margin-top: 8px" title="Print Pay Slip"><i class="fa fa-print"></i></a></td>`;
                        }


                        $("table#datatable").append(col);
                        $('.floatnumber').on('input', function () {
                            this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');
                        });

                        $('input[id^=reimbursement]').keyup(function () {
                            var lastnum = $(this).attr('id').slice(13);
                            totalSalary(lastnum);
                        })
                        $('input[id^=deductions]').keyup(function () {
                            var lastnum = $(this).attr('id').slice(10);
                            totalSalary(lastnum);
                        })

                        function totalSalary(lastnum) {
                            var basic_salary = $('#basic_salary' + lastnum).val();
                            var transportation = $('#transportation' + lastnum).val();
                            var accommodation = $('#accommodation' + lastnum).val();
                            var insurance = $('#insurance' + lastnum).val();
                            var others = $('#others' + lastnum).val();
                            var ot_amount = $('#ot_amount' + lastnum).val();
                            var reimbursement = $('#reimbursement' + lastnum).val();
                            var deductions = $('#deductions' + lastnum).val();
                            $('#total_salary' + lastnum).val((Number(basic_salary) + Number(transportation) + Number(accommodation) + Number(insurance) + Number(others) + Number(ot_amount) + Number(reimbursement)) - Number(deductions));
                        }
                    })
                }
            })
        });
    </script>
@endpush