@extends('layouts.app')
@push('style')
    <style>
        .table td {
            padding-left: 3px !important;
            padding-top: 3px !important;
            padding-bottom: 3px !important;
        }

        .table th {
            padding: 7px !important;

        }

        .table th {
            color: #212529;
            font-size: 15px !important;
            font-weight: 550 !important;
            line-height: 1.2 !important;
            font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif !important;
        }

        .income {
            border: none !important;
            font-size: 15px !important;
            font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif !important;
            padding: 5px !important;
            margin: 0 !important;
            width: 80px;

        }

        .income:active {
            border: none !important;


        }

        input::-webkit-outer-spin-button,
        input::-webkit-inner-spin-button {
            /* display: none; <- Crashes Chrome on hover */
            -webkit-appearance: none !important;
            margin: 0;
            /* <-- Apparently some margin are still there even though it's hidden */
        }

        input[type=number] {
            -moz-appearance: textfield !important;
            /* Firefox */
            border-radius: none !important;
        }

        .box-title {
            font-size: 16px;
            font-weight: 600;
            padding: 10px;
            background: #d7daea;
        }
    </style>
@endpush
@section('content')
    <div class="main-wrapper">
        <div id="pageWrapper" class="pageWrapper">
            <div class="index page">
                <div class="container">
                    <div class="row tablerow">
                        <div class="left-card">
                            <div class="row">
                                <div class="col-12">
                                    <div class="ledger_top text-center">
                                        <form action="{{ route('get-payroll-row') }}" method="POST" id="add_row_form">
                                            <div class="row d-flex justify-content-center">

                                                <div class="col-auto">
                                                    <select class="form-select form-control selectpicker"
                                                        name="financial_year" id="fin_year"
                                                        aria-label="Default select example" data-live-search="true">
                                                        @foreach (FinancialYearList() as $list)
                                                            <option value="{{ $list['financial_year'] }}"
                                                                {{ $financial_year == $list['financial_year'] ? 'selected' : '' }}>
                                                                {{ $list['financial_year'] }}
                                                            </option>
                                                        @endforeach
                                                    </select>
                                                </div>

                                                <div class="col-auto">
                                                    <div class="dropdown bootstrap-select form-select form-control">
                                                        <select class="form-select form-control selectpicker"
                                                            name="emp_id" id="emp_id"
                                                            aria-label="Default select example" data-live-search="true">
                                                            <option value="">Select Employee ID</option>
                                                            @foreach ($employees as $employee_data)
                                                                <option value="{{ $employee_data->id }}"
                                                                    {{ $employee_data->id == $id ? 'selected' : '' }}>
                                                                    {{ $employee_data->eid }}
                                                                </option>
                                                            @endforeach
                                                        </select>
                                                    </div>
                                                </div>
                                                <div class="col-auto">
                                                    <button type="submit"
                                                        class="btn primary-button">@lang('Select')</button>
                                                </div>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                                <div class="col-12">
                                    <hr>
                                </div>
                            </div>
                            <form action="{{ route('payroll.store') }}" method="POST" id="ajax_form_payroll">
                                @csrf
                                <div class="col-lg-12 col-sm-12 col-12">
                                    <div id="containerForNewTable">
                                        @include('payroll::payroll.row')
                                    </div>
                                </div>
                                <div class="row mt-4 mb-4">
                                    <div class="col-12 d-flex justify-content-end">
                                        <a href="{{ route('payrolls') }}" class="btn btn-secondary me-2">Back</a>
                                        <button type="submit" class="submitButton btn primary-button">Update</button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('script')
    <script>
        $(document).ready(function() {
            // Add Row Form Submission

            $('#add_row_form').submit(function(e) {
                e.preventDefault();

                var formData = new FormData(this);
                var $this = $(this); // Cache the jQuery form object

                $.ajax({
                    type: 'POST',
                    url: $this.attr('action'), // Use the cached $this object
                    data: formData,
                    processData: false,
                    contentType: false,
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    success: function(data) {
                        if (data.errors) {
                            var errors = data.errors;
                            $.each(errors, function(field, error) {
                                $('#' + field).addClass('add-border-red');
                                if (error) {
                                    toastr.error(error);
                                }
                            });
                        } else {
                            $("#containerForNewTable").empty();
                            $("#containerForNewTable").append(data);
                        }
                    },
                    error: function(data) {
                        console.log(data);
                    }
                });
            });
            $(document).on("submit", "form#ajax_form_payroll", function(e) {
                e.preventDefault();
                $("#overlay").fadeIn();
                $("span.textdanger").text("");
                var url = $(this).attr("action");
                var method = $(this).attr("method");
                var formData = new FormData($(this)[0]);
                $.ajax({
                    type: method,
                    url: url,
                    data: formData,
                    async: false,
                    processData: false,
                    contentType: false,
                    success: function(res) {
                        $("#overlay").fadeOut();
                        if (res.status == true) {
                            toastr.success(res.msg);
                            $("#add_row_form").submit();
                        } else if (res.status == false) {
                            toastr.error(res.msg);
                        }
                    },
                    error: function(response) {
                        $(".validation_error").empty();
                        $.each(response.responseJSON.errors, function(field_name, error) {
                            $(document).find("[name=" + field_name + "]")
                                .after(
                                    '<span class="validation_error" style="color:red">' +
                                    error +
                                    "</span>");
                            /*   toastr.error(error); */
                            //  $(document).find("[name=" + field_name + "]").css("border","1px red solid");
                        });
                    },
                });
            });

            // Remove Row
            $(document).on('click', 'button.removeTable', function() {
                $(this).closest('.tableDive').remove();
            });

            function updateRowTotal(row) {
                var total = 0;
                row.find('.income').each(function() {
                    var value = parseFloat($(this).val()) || 0;
                    total += value;
                });
                row.find('.total').text(total > 0 ? total.toFixed(2) : '');
                row.find('.all_total').val(total.toFixed(2));

                netTotalCalculation();

            }

            function netTotalCalculation() {
                var january = 0;
                var february = 0;
                var march = 0;
                var april = 0;
                var may = 0;
                var june = 0;
                var july = 0;
                var august = 0;
                var september = 0;
                var october = 0;
                var november = 0;
                var december = 0;

                $('.payrol_table > tbody  > tr').each(function(index, row) {

                    var j = parseFloat($(this).closest('tr').find('.january').val()) || 0;
                    if ($(this).closest('tr').find('.january').attr('data-type') == 'pay') {
                        january += j;
                    } else {
                        january -= j;
                    }

                    var f = parseFloat($(this).closest('tr').find('.february').val()) || 0;

                    if ($(this).closest('tr').find('.february').attr('data-type') == 'pay') {
                        february += f;
                    } else {
                        february -= f;
                    }



                    var m = parseFloat($(this).closest('tr').find('.march').val()) || 0;

                    if ($(this).closest('tr').find('.march').attr('data-type') == 'pay') {
                        march += m;
                    } else {
                        march -= m;
                    }



                    var a = parseFloat($(this).closest('tr').find('.april').val()) || 0;
                    if ($(this).closest('tr').find('.april').attr('data-type') == 'pay') {
                        april += a;
                    } else {
                        april -= a;
                    }




                    var ma = parseFloat($(this).closest('tr').find('.may').val()) || 0;
                    if ($(this).closest('tr').find('.may').attr('data-type') == 'pay') {
                        may += ma;
                    } else {
                        may -= ma;
                    }




                    var ju = parseFloat($(this).closest('tr').find('.june').val()) || 0;
                    if ($(this).closest('tr').find('.june').attr('data-type') == 'pay') {
                        june += ju;
                    } else {
                        june -= ju;
                    }



                    var jul = parseFloat($(this).closest('tr').find('.july').val()) || 0;

                    if ($(this).closest('tr').find('.july').attr('data-type') == 'pay') {
                        july += jul;
                    } else {
                        july -= jul;
                    }





                    var au = parseFloat($(this).closest('tr').find('.august').val()) || 0;
                    if ($(this).closest('tr').find('.august').attr('data-type') == 'pay') {
                        august += au;
                    } else {
                        august -= au;
                    }




                    var se = parseFloat($(this).closest('tr').find('.september').val()) || 0;
                    if ($(this).closest('tr').find('.september').attr('data-type') == 'pay') {
                        september += se;
                    } else {
                        september -= se;
                    }




                    var oc = parseFloat($(this).closest('tr').find('.october').val()) || 0;
                    if ($(this).closest('tr').find('.october').attr('data-type') == 'pay') {
                        october += oc;
                    } else {
                        october -= oc;
                    }



                    var nov = parseFloat($(this).closest('tr').find('.november').val()) || 0;
                    if ($(this).closest('tr').find('.november').attr('data-type') == 'pay') {
                        november += nov;
                    } else {
                        november -= nov;
                    }


                    var dec = parseFloat($(this).closest('tr').find('.december').val()) || 0;
                    if ($(this).closest('tr').find('.december').attr('data-type') == 'pay') {
                        december += dec;
                    } else {
                        december -= dec;
                    }



                });
                $('#january').text(january.toFixed(2));
                $('#february').text(february.toFixed(2));
                $('#march').text(march.toFixed(2));
                $('#april').text(april.toFixed(2));
                $('#may').text(may.toFixed(2));
                $('#june').text(june.toFixed(2));
                $('#july').text(july.toFixed(2));
                $('#august').text(august.toFixed(2));
                $('#september').text(september.toFixed(2));
                $('#october').text(october.toFixed(2));
                $('#november').text(november.toFixed(2));
                $('#december').text(december.toFixed(2));
                all_total = january + february + march + april + may + june + july + august + september + october +
                    november + december;
                $('#alltotal').text(all_total.toFixed(2));
            }

            $('tr').each(function() {
                updateRowTotal($(this));
            });


            $(document).on('input', '.income', function() {
                updateRowTotal($(this).closest('tr'));
            });


            $(document).on('change', '#emp_id', function() {
                var selectedValue = $(this).val();
                $('#employee_id').val(selectedValue);
            });

            $(document).on('change', '#fin_year', function() {
                var selectedValue = $(this).val();
                $('#financial_year').val(selectedValue);
            });
        });
    </script>
@endpush