@extends('layouts.admin')


@section('content')
    <!-- Main content -->
    <section class="content">
        <div class="container-fluid mt-4">
            <div class="row">
                <!-- left column -->
                <div class="col-md-12">
                    <!-- jquery validation -->
                    <div class="card card-info">
                        <div class="card-header">
                            <h3 class="card-title">Salary Update</h3>

                            <a href="{{ route('salary.index') }}" style="float: right;padding: 3px 26px;"
                                class="btn btn-outline-dark btn-flat">Salary List</a>

                        </div>

                        <form id="SalaryForm" method="POST" action="{{ route('salary.update') }}"
                            enctype="multipart/form-data">

                            @csrf

                            <input type="hidden" value="{{ $payroll->id }}" name="id">

                            <div class="card-body">
                                <div class="table-responsive">
                                    <table class="table table-stripe">
                                        <thead>
                                            <tr>
                                                <th>Pay Date</th>
                                                <th>Emp.ID</th>
                                                <th>Gross Salary</th>
                                                <th>Overtime</th>
                                                <th>Bonus</th>
                                                <th>Deduction</th>
                                                <th>Net Salary</th>
                                                <th>Status</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr>
                                                <td>
                                                    <input type="date" class="form-control form-control-sm"
                                                        name="pay_date" id="pay_date" value="{{ $payroll->pay_date }}"
                                                        placeholder="Pay Date.." tabindex="1" required>
                                                </td>
                                                <td>
                                                    <input name="emp_id" id="emp_id"
                                                        class="form-control form-control-sm" tabindex="2"
                                                        style="width: 50px;" value="{{ $payroll->emp_id }}" readonly>
                                                </td>

                                                <td>
                                                    <input type="number" class="form-control form-control-sm"
                                                        name="gross_salary" id="gross_salary"
                                                        value="{{ $payroll->gross_salary }}" placeholder="Gross salary.."
                                                        style="width: 100px" tabindex="5" min="0" readonly>
                                                </td>
                                                
                                                <td>
                                                    <input type="number" class="form-control form-control-sm"
                                                        name="overtime" id="overtime" value="{{ $payroll->overtime }}"
                                                        placeholder="Overtime" style="width: 100px" tabindex="6"
                                                        min="0">
                                                </td>
                                                <td>
                                                    <input type="number" class="form-control form-control-sm"
                                                        name="bonus" id="bonus" value="{{ $payroll->bonus }}"
                                                        style="width: 100px" placeholder="Bonus" tabindex="7"
                                                        min="0">
                                                </td>
                                                <td>
                                                    <input type="number" class="form-control form-control-sm"
                                                        name="deduction" id="deduction" value="{{ $payroll->deduction }}"
                                                        placeholder="Deduction" style="width: 100px" tabindex="8"
                                                        min="0">
                                                </td>
                                                <td>
                                                    <input type="number" class="form-control form-control-sm"
                                                        name="net_salary" id="net_salary"
                                                        value="{{ $payroll->net_salary }}" placeholder="Net salary"
                                                        style="width: 100px" tabindex="9" min="0" readonly>
                                                </td>
                                                <td>
                                                    <select name="status" id="status"
                                                        class="form-control form-control-sm" tabindex="10"
                                                        style="width: 80px">
                                                        <option value="No"
                                                            {{ isset($payroll->status) && $payroll->status == 'No' ? 'selected' : '' }}>
                                                            No</option>
                                                        <option value="Yes"
                                                            {{ isset($payroll->status) && $payroll->status == 'Yes' ? 'selected' : '' }}>
                                                            Yes</option>
                                                    </select>
                                                </td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                                <div class="row float-right">
                                    <button type="submit" class="btn btn-info mt-3 mr-3">Submit</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- /.content -->
@endsection

@push('scripts')
    <script src="{{ asset('plugins/select2/js/select2.full.min.js') }}"></script>
    <script src="{{ asset('plugins/moment/moment.min.js') }}"></script>
    <script src="{{ asset('plugins/inputmask/jquery.inputmask.min.js') }}"></script>

    <script type="text/javascript">
        // Function to calculate net salary
        function calculateNetSalary() {
            // Get the values of the gross salary, overtime, bonus, and deduction
            let grossSalary = parseFloat(document.getElementById('gross_salary').value) || 0;
            let overtime = parseFloat(document.getElementById('overtime').value) || 0;
            let bonus = parseFloat(document.getElementById('bonus').value) || 0;
            let deduction = parseFloat(document.getElementById('deduction').value) || 0;

            // Calculate the net salary
            let netSalary = grossSalary + overtime + bonus - deduction;

            // Update the net salary field
            document.getElementById('net_salary').value = netSalary.toFixed(2);
        }

        // Add event listeners to calculate net salary when any input changes
        document.addEventListener('DOMContentLoaded', function() {
            // Add event listeners to input fields
            document.getElementById('gross_salary').addEventListener('input', calculateNetSalary);
            document.getElementById('overtime').addEventListener('input', calculateNetSalary);
            document.getElementById('bonus').addEventListener('input', calculateNetSalary);
            document.getElementById('deduction').addEventListener('input', calculateNetSalary);
        });


        $(function() {

            //Initialize Select2 Elements
            // $('.select2').select2();
            $('.myselect2').select2();

            //Initialize Select2 Elements
            $('.select2bs4').select2({
                theme: 'bootstrap4'
            })


            $(document).on('select2:open', () => {
                document.querySelector('.select2-search__field').focus();
            });

        });
    </script>
@endpush