@extends('layouts.app')
@push('style')
    <style>
        tbody,
        th {
            padding: 0.75rem;
            vertical-align: top;
            border: 1px solid #ced4da;
        }

        tbody,
        td input.form-control {
            border-radius: 0;
        }

        .form-select {
            border-radius: 0;
        }

        .add-border-red {
            border: 1px solid #E2788A !important;
        }

        td.text-end {
            padding: 0 !important;
        }

        td.text-end input.form-control {
            border-radius: 0;
            border: none;
            width: 100%;
        }

        td.text-end select.form-select.form-control {
            border-radius: 0;
            border: none;
        }

        td.text-end textarea.form-control {
            border-radius: 0;
            border: none;
        }
    </style>
@endpush
@section('content')
    <div class="page-wrapper">
        <div class="page-content">
            <div class="row tablerow">
                <div class="left-card">
                    <form method="post" action="{{ route('salary_type.store') }}" id ="ajax_form_data">
                        @csrf
                        <h1 class="badge text-bg-primary"> @lang('Salary Type Information') </h1>
                        <input type="hidden" name="employee_type" value="local">
                        <div class="table-responsive mt-3">
                            <table class="form-table" role="presentation" style="width: 100%;">
                                <tbody>
                                    <tr class="active">
                                        <th style="width: 20%;">@lang('Type Name') <span style="color: red;">*</span></th>
                                        <th style="width: 20%;">@lang('Designation') <span style="color: red;">*</span></th>
                                        <th style="width: 20%;">@lang('Gross Salary')<span style="color: red;">*</span></th>
                                        <th style="width: 20%;">@lang('Status') <span style="color: red;">*</span></th>
                                    </tr>
                                    <tr>
                                        <td>
                                            <input type="text" class="form-control" name="name">
                                        </td>
                                        <td>
                                            <select name="designation_id" class="form-control">
                                                @foreach ($designations as $designation)
                                                    <option value="{{ $designation->id }}">{{ $designation->name }}</option>
                                                @endforeach
                                            </select>
                                        </td>
                                        <td>
                                            <input type="number" class="form-control" name="gross_amount"
                                                id="gross_amount">
                                        </td>
                                        <td>
                                            <select class="form-select form-control" name="status">
                                                <option value="1">Active</option>
                                                <option value="0">Inactive</option>
                                            </select>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>

                        <h1 class="mt-3 badge text-bg-primary"> @lang('Salary Head Information') </h1>
                        <div class="table-responsive mt-3">
                            <table class="form-table table head_table" role="presentation" style="width: 100%;">
                                <thead>
                                    <tr>
                                        <th width="1%" rowspan="2">@lang('SL')</th>
                                        <th rowspan="2">@lang('Head Name')</th>
                                        <th colspan="2">Payment</th>
                                        <th colspan="2">Deduction</th>
                                    </tr>
                                    <tr class="active">

                                        <th style="width: 10%;">@lang('Parcentage')</th>
                                        <th style="width: 10%;">@lang('Amount')</th>
                                        <th style="width: 10%;">@lang('Parcentage')</th>
                                        <th style="width: 10%;">@lang('Amount')</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($payroll_heads as $key => $payroll_head)
                                        <tr>
                                            <td>{{ $key + 1 }}</td>
                                            <td>
                                                <span>{{ $payroll_head['head_name'] }}</span>
                                                <input type="hidden" class="form-control" name="head_name[]"
                                                    value="{{ $payroll_head['head_name'] }}">
                                                <input type="hidden" class="form-control" name="head_id[]"
                                                    value="{{ $payroll_head['id'] }}">
                                            </td>
                                            @if ($payroll_head['operation_type'] == 'pay')
                                                <td class="text-end">
                                                    <input type="text" class="form-control parcentage"
                                                        name="parcentage[]" value="0.00" min="0" max="100">
                                                    <input type="hidden" class="form-control parcentage_deduction"
                                                        value="0">
                                                </td>
                                                <td>
                                                    <span class="amount">0.00</span>
                                                    <input type="hidden" class="form-control salary_amount" name="amount[]"
                                                        value="0.00">
                                                </td>
                                                <td></td>
                                                <td></td>
                                            @else
                                                <td></td>
                                                <td></td>
                                                <td class="text-end">
                                                    <input type="number" class="form-control parcentage_deduction"
                                                        name="parcentage[]" value="0.00" min="0" max="100">

                                                    <input type="hidden" class="form-control parcentage" value="0">
                                                </td>
                                                <td>
                                                    <span class="amount_deduction">0.00</span>
                                                    <input type="hidden" class="form-control salary_amount_deduction"
                                                        name="amount[]" value="0.00">
                                                </td>
                                            @endif
                                        </tr>
                                    @endforeach
                                </tbody>
                                <tfoot>
                                    <tr>
                                        <td colspan="2" align="right">Total</td>
                                        <td><span id="netpercentage"></span>
                                            <input type="hidden" id="totalparcentage" name="totalparcentage">
                                        </td>
                                        <td><span id="netsalary"></span>
                                            <input type="hidden" id="totalsalary" name="totalsalary">
                                        </td>

                                        <td><span id="netpercentage_deduction"></span>
                                            <input type="hidden" id="totalparcentage_deduction"
                                                name="totalparcentage_deduction">
                                        </td>
                                        <td><span id="netsalary_deduction"></span>
                                            <input type="hidden" id="totalsalary_deduction"
                                                name="totalsalary_deduction">
                                        </td>
                                    </tr>
                                </tfoot>
                            </table>
                        </div>
                        <div class="row mt-4 mb-4">
                            <div class="col-12 d-flex justify-content-end">
                                <a href="{{ route('salary_types') }}" class="btn btn-secondary me-2">Back</a>
                                <button type="submit" class="btn primary-button">Submit</button>
                            </div>
                        </div>
                    </form>
                </div>

            </div>
        </div>
    </div>
@endsection
@push('script')
    <script>
        $(document).ready(function() {
            // insert data 
            function CalCulation() {
                let gross_amount = 0;
                if ($("#gross_amount").val() == "") {
                    gross_amount = 0;
                } else {
                    gross_amount = parseFloat($("#gross_amount").val());
                }
                let totalparcentage = 0;
                let totalamount = 0;

                $('.head_table > tbody  > tr').each(function(index, tr) {
                    let parcentage = 0;
                    if ($(this).closest('tr').find('.parcentage').val() == '') {
                        parcentage = 0;
                    } else {
                        parcentage = parseFloat($(this).closest('tr').find('.parcentage').val());
                    }

                    totalparcentage += parcentage;
                });



                $('.head_table > tbody  > tr').each(function(index, tr) {
                    let parcentage = 0;
                    if ($(this).closest('tr').find('.parcentage').val() == '') {
                        parcentage = 0;
                    } else {
                        parcentage = parseFloat($(this).closest('tr').find('.parcentage').val());
                    }
                    if (totalparcentage <= 100 && gross_amount > 0) {

                        let amount = gross_amount * parcentage / 100;
                        totalamount += amount;
                        $(this).closest('tr').find('.amount').html(amount);
                        $(this).closest('tr').find('.parcentage').css("border", "1px solid green");
                        $(this).closest('tr').find('.salary_amount').val(amount);

                    } else {
                        $(this).closest('tr').find('.amount').html("");
                        $(this).closest('tr').find('.parcentage').css("border", "1px solid red");
                        $(this).closest('tr').find('.salary_amount').val(0);
                    }

                });

                $("#netsalary").html(totalamount);
                $("#netpercentage").html(totalparcentage + '%');

                $("#totalsalary").val(totalamount);
                $("#totalparcentage").val(totalparcentage);


                //Deduction
                let totalparcentage_deduction = 0;
                let totalamount_deduction = 0;
                $('.head_table > tbody  > tr').each(function(index, tr) {
                    let parcentage = 0;
                    if ($(this).closest('tr').find('.parcentage_deduction').val() == '') {
                        parcentage = 0;
                    } else {
                        parcentage = parseFloat($(this).closest('tr').find('.parcentage_deduction').val());
                    }

                    totalparcentage_deduction += parcentage;
                });

                $('.head_table > tbody  > tr').each(function(index, tr) {
                    let parcentage = 0;
                    if ($(this).closest('tr').find('.parcentage_deduction').val() == '') {
                        parcentage = 0;
                    } else {
                        parcentage = parseFloat($(this).closest('tr').find('.parcentage_deduction').val());
                    }
                    if (totalparcentage_deduction <= 100 && gross_amount > 0) {

                        let amount = gross_amount * parcentage / 100;
                        totalamount_deduction += amount;
                        $(this).closest('tr').find('.amount_deduction').html(amount);
                        $(this).closest('tr').find('.parcentage_deduction').css("border",
                            "1px solid green");
                        $(this).closest('tr').find('.salary_amount_deduction').val(amount);

                    } else {
                        $(this).closest('tr').find('.amount_deduction').html("");
                        $(this).closest('tr').find('.parcentage_deduction').css("border", "1px solid red");
                        $(this).closest('tr').find('.salary_amount_deduction').val(0);
                    }

                });
                //deduction
                $("#netsalary_deduction").html(totalamount_deduction);
                $("#netpercentage_deduction").html(totalparcentage_deduction + '%');

                $("#totalsalary_deduction").val(totalamount_deduction);
                $("#totalparcentage_deduction").val(totalparcentage_deduction);

            }

            $(document).keyup('#gross_amount', function() {
                CalCulation();
            })
            $(document).on('blur', '.parcentage', function() {
                CalCulation();
            })
            /*   $("input[type=number]").bind('keyup input', function() {
                  CalCulation();
              }); */

        });
    </script>
@endpush