@extends('backend.layouts.app')
@section('backend_title', 'Admin Brand Create')

@section('backend_content')

    <div class="row">
        <div class="col-lg-7 col-lg-offset-5">
            <div class="card">
                <div class="card-body">
                    <div class="d-flex justify-content-between">
                        <h5 class="font-weight-bolder">Individual salary edit</h5>
                    </div>
                        <form action="{{ route('individual_salary_Update',$salaryInfo->id )}}" method="POST">
                            @csrf
                            <div class="row">

                                <div class="col-4 mb-2">
                                    <label>Employee Id</label>
                                    <input class="form-control" readonly type="test" name="date" id="date"
                                        value="{{ $salaryInfo->employees?->employee_id }}" />
                                </div>

                                <div class="col-4 mb-2">
                                    <label>Employee Name</label>
                                    <input class="form-control" readonly type="test" name="date" id="date"
                                        value="{{ $salaryInfo->employees?->name }}" />
                                </div>

                                <div class="col-4 mb-2">
                                    <label>Monthly Salary</label>
                                    <input type="text" class="form-control" id="salary" name="" readonly
                                        value="{{ $salaryInfo->basic_salary }}">
                                </div>

                                <div class="col-4 mb-2">
                                    <label>Over Time</label>
                                    <input type="text" class="form-control" id="ot" name="ot"
                                        value="{{ $salaryInfo->ot }}">
                                </div>

                                <div class="col-4 mb-2">
                                    <label>Benefit</label>
                                    <input type="text" class="form-control" name="" readonly
                                        value="{{ $salaryInfo->benefit }}">
                                </div>

                                <div class="col-4 mb-2">
                                    <label>Total OT/Benefit</label>
                                    <input type="text" class="form-control" id="total_ot" name="total_ot" readonly
                                        value="{{ $salaryInfo->total_ot_benefit }}">
                                </div>

                                <div class="col-4 mb-2">
                                    <label>Loan Deduction</label>
                                    <input type="text" class="form-control" id="loan_deduc" name="loan_deduc"
                                        value="{{ $salaryInfo->loan_deduc }}">
                                </div>

                                <div class="col-4 mb-2">
                                    <label>Ohters Deduction</label>
                                    <input type="text" class="form-control" id="other_deduc" name="other_deduc"
                                        value="{{ $salaryInfo->deduc }}">
                                </div>

                                <div class="col-4 mb-2">
                                    <label>Total Deduction</label>
                                    <input type="text" class="form-control" id="total_deduc" name="total_deduc" readonly
                                        value="{{ $salaryInfo->total_deduc }}">
                                </div>

                                <div class="col-4 mb-2">
                                    <label>Net Payable</label>
                                    <input class="form-control" id="net_payable" readonly type="text" name="net_payable" id="amount" placeholder=""
                                        value="{{ $salaryInfo->net_payable }}" required />
                                </div>

                                <div class="col-4 mb-2">
                                    <label>Net Received</label>
                                    <input class="form-control" id="net_payment" readonly type="text" name="net_payment" id="amount" placeholder=""
                                        value="{{ $salaryInfo->net_payment }}" required />
                                </div>

                                <div class="col-12 mb-2">
                                    <label>Note</label>
                                    <textarea class="form-control" name="note" id="" cols="20" rows="2">{{ $salaryInfo->note }}</textarea>
                                    @error('note')
                                        <div class="form-text text-danger">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>

                            <div class="mt-3">
                                <button type="submit" class="btn btn-success">Update</button>
                                <a href="{{ route('salary_sheet') }}" class="btn btn-info">Return List</a>
                            </div>
                        </form>


                </div>
            </div>
        </div>
    </div>


    <script>
        document.addEventListener('DOMContentLoaded', function () {
            // Input fields
            const salary = parseFloat(document.getElementById('salary').value);
            const otInput = document.getElementById('ot');
            const loanDeducInput = document.getElementById('loan_deduc');
            const otherDeducInput = document.getElementById('other_deduc');
            const totalOtBenefitInput = document.getElementById('total_ot');
            const totalDeducInput = document.getElementById('total_deduc');
            const netPayableInput = document.getElementById('net_payable');
            const netPaymentInput = document.getElementById('net_payment');
    
            // Initial values
            let ot = parseFloat(otInput.value) || 0;
            let totalOtBenefit = parseFloat(totalOtBenefitInput.value) || 0;
            let loanDeduc = parseFloat(loanDeducInput.value) || 0;
            let otherDeduc = parseFloat(otherDeducInput.value) || 0;
            let totalDeduc = parseFloat(totalDeducInput.value) || 0;
            let netPayable = parseFloat(netPayableInput.value) || 0;
            let netPayment = parseFloat(netPaymentInput.value) || 0;
    
            // Function to update total OT/Benefit
            function updateTotalOtBenefit() {
                totalOtBenefit = ot;
                totalOtBenefitInput.value = totalOtBenefit.toFixed(2);
                updateNetPayable();
            }
    
            // Function to update total Deduction
            function updateTotalDeduc() {
                totalDeduc = loanDeduc + otherDeduc;
                totalDeducInput.value = totalDeduc.toFixed(2);
                updateNetPayable();
            }
    
            // Function to update Net Payable and Net Payment
            function updateNetPayable() {
                netPayable = (salary + totalOtBenefit) - totalDeduc;
                netPayableInput.value = netPayable.toFixed(2);
                netPaymentInput.value = netPayable.toFixed(2);
            }
    
            // Event listeners for input changes
            otInput.addEventListener('input', function () {
                ot = parseFloat(otInput.value) || 0;
                updateTotalOtBenefit();
            });
    
            loanDeducInput.addEventListener('input', function () {
                loanDeduc = parseFloat(loanDeducInput.value) || 0;
                updateTotalDeduc();
            });
    
            otherDeducInput.addEventListener('input', function () {
                otherDeduc = parseFloat(otherDeducInput.value) || 0;
                updateTotalDeduc();
            });
    
        });
    </script>
    

@endsection

@section('beackend_scripts')

@endsection