@extends('layouts.main')

@push('styles')
    <link href="{{ asset('elite/bower_components/icheck/skins/all.css') }}" rel="stylesheet">
@endpush

@section('content')
    <div class="row bg-title">
        <div class="col-lg-3 col-md-4 col-sm-4 col-xs-12">
            <h4 class="page-title">Edit Payslip</h4>
        </div>
        <div class="col-lg-9 col-sm-8 col-md-8 col-xs-12">
            <ol class="breadcrumb">
                <li><a href="{{ route('home') }}"><i class="fa fa-home"></i> Home</a></li>
                <li><a href="{{ route('finance') }}"><i class="fa fa-money"></i> Finance Home</a></li>
                <li><a href="{{ route('payroll.index') }}"><i class="fa fa-eye"></i> Payroll</a></li>
                <li class="active"><i class="fa fa-pencil"></i> Edit Payslip</li>
            </ol>
        </div>
    </div>

    <div class="white-box">
        <!--Flash messages at the top -->
        @include('flash::message')

        {{ Form::open(['route' => 'payroll.update_payslip', 'data-toggle' => 'validator']) }}

        {{ Form::hidden('id', $payslip->id) }}

        <h3>Staff Member Information</h3>

        <div class="row">
            <div class="col-sm-6">
                <table class="table table-striped table-bordered">
                    <tr>
                        <th>Member Name</th>
                        <td>{{ $member->first_name }} {{ $member->last_name }}</td>
                    </tr>
                    <tr>
                        <th>Member Contact</th>
                        <td>{{ $member->contact }}</td>
                    </tr>
                </table>
            </div>
            <div class="col-sm-6">
                <table class="table table-striped table-bordered">
                    <tr>
                        <th>Member Position</th>
                        <td>{{ $positions[$member->position] }}</td>
                    </tr>
                    <tr>
                        <th>Member Department</th>
                        <td>{{ $departments[$member->department] }}</td>
                    </tr>
                </table>
            </div>
        </div>

        <h3>Salary and allowances</h3>

        <div class="row">
            <div class="col-sm-6">
                <div class="form-group">
                    {{ Form::label('year','Payment Year') }}
                    {{ Form::select('year',$years,$payslip->year,['class' => 'form-control compulsory','required', 'id' => 'year']) }}
                    <div class="help-block with-errors"></div>
                </div>

                <div class="form-group">
                    {{ Form::label('basic_pay','Basic Pay') }}
                    {{ Form::number('basic_pay',$payslip->basic_pay,['class' => 'form-control compulsory allowance_changes', 'required', 'readonly', 'id' => 'basic_pay']) }}
                </div>

                <div class="form-group">
                    {{ Form::label('allowances','Allowances') }}
                    {{ Form::number('allowances','0',['class' => 'form-control', 'id' => 'allowances', 'readonly']) }}
                </div>
            </div>
            <div class="col-sm-6">
                <div class="form-group">
                    {{ Form::label('month','Payment Month') }}
                    {{ Form::select('month',$months,$payslip->month,['class' => 'form-control compulsory','required', 'id' => 'month']) }}
                    <div class="help-block with-errors"></div>
                </div>

                <div class="form-group">
                    {{ Form::label('gross_pay','Gross Pay') }}
                    {{ Form::number('gross_pay',$payslip->gross_pay,['class' => 'form-control compulsory', 'required', 'readonly', 'id' => 'gross_pay']) }}
                </div>
            </div>
        </div>

        <h3>Deductions</h3>

        <div class="row">
            <div class="col-sm-6">
                <div class="form-group">
                    {{ Form::label('nssf_payment','NSSF') }}
                    {{ Form::number('nssf_payment',$payslip->nssf_payment,['class' => 'form-control compulsory deduction_changes', 'required', 'readonly', 'id' => 'nssf_payment']) }}
                </div>

                <div class="form-group">
                    {{ Form::label('deductions','Deductions') }}
                    {{ Form::number('deductions','0',['class' => 'form-control deduction_changes', 'id' => 'deductions', 'readonly']) }}
                </div>
            </div>
            <div class="col-sm-6">
                <div class="form-group">
                    {{ Form::label('paye_payment','PAYE') }}
                    {{ Form::number('paye_payment',$payslip->paye_payment,['class' => 'form-control compulsory deduction_changes', 'required', 'readonly', 'id' => 'paye_payment']) }}
                </div>

                <div class="form-group">
                    {{ Form::label('total_deductions','Total Deductions') }}
                    {{ Form::number('total_deductions',$payslip->total_deductions,['class' => 'form-control compulsory', 'required', 'readonly', 'id' => 'total_deductions']) }}
                </div>
            </div>
        </div>

        <h3>Totals</h3>

        <div class="row">
            <div class="col-sm-3"></div>
            <div class="col-sm-6">

                <div class="form-group">
                    {{ Form::label('net_pay','Net Pay') }}
                    {{ Form::number('net_pay',$payslip->net_pay,['class' => 'form-control compulsory', 'required', 'readonly', 'id' => 'net_pay']) }}
                </div>
            </div>
            <div class="col-sm-3"></div>
        </div>

        {{ Form::button('Submit',['type'=>'submit','class'=>'btn btn-success waves-effect waves-light m-r-10']) }}
        {{ Form::button('Cancel',['type'=>'reset','class'=>'btn btn-default waves-effect waves-light']) }}

        {{ Form::close() }}
    </div>
@endsection

@push('scripts')
    <script src="{{ asset('elite/js/validator.js') }}"></script>

    <script src="{{ asset('elite/bower_components/icheck/icheck.min.js') }}"></script>
    <script src="{{ asset('elite/bower_components/icheck/icheck.init.js') }}"></script>

    <script src="{{ asset('elite/js/mask.js') }}"></script>

    <script>
        let month = '';
        let year = '';
        let member_id = <?php echo $member->id; ?>;

        $(document).ready(function () {

            // check if any value in the allowance section has been changed
            $(".allowance_changes").change(function(){
                // call the function which changes allowance total
                calculateAllowances();
            });

            $("#year").change(function(){
                year = this.value;
                checkAllowancesOrDeductions();
            });

            $("#month").change(function(){
                month = this.value;
                checkAllowancesOrDeductions();
            });

            // check if any value in the deductions section has been changed
            $(".deduction_changes").change(function(){
                // call the function which changes deductions total
                calculateDeductions();
            });
        });

        function checkAllowancesOrDeductions(){
            if (month !== '' || year !== '') {
                $.ajax({
                    type: "POST",
                    url: "/payroll/get_allowance_or_deductions",
                    data: {month: month, year: year, member_id: member_id},
                    cache: false,
                    success: function (result) {
                        let split_result = result.split(",");
                        $('#deductions').val(split_result[1]);
                        $('#allowances').val(split_result[0]);
                    }
                });
            }
        }

        // calculate the total deductions value
        function calculateDeductions() {
            // loop through all with class of deduction_changes adding the totals
            let amount = 0;

            $('.deduction_changes').each(function(){
                amount += +this.value;
            });

            $('#total_deductions').val(amount);

            // calculate total pay
            calculateNetpay();
        }

        // calculate the total allowances value
        function calculateAllowances() {
            // loop through all with class of allowance_changes adding the totals
            let amount = 0;

            $('.allowance_changes').each(function(){
                amount += +this.value;
            });

            $('#gross_pay').val(amount);

            // calculate total pay
            calculateNetpay();
        }

        // calculate total amount to pay staff
        function calculateNetpay() {
            // get the gross pay
            let gross_pay = $('#gross_pay').val();

            // get the deductions pay
            let total_deductions = $('#total_deductions').val();

            let net_pay = +gross_pay - +total_deductions;

            $('#net_pay').val(net_pay);
        }

    </script>
@endpush