@extends('layouts.app')
@push('style')
    <style>
        .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;

        }


        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="page-wrapper">
        <div class="page-content">
            <div class="row tablerow">
                <div class="col-md-12">
                    @php
                        $page_name = 'Hr >Department';
                        $page_number = 1;
                    @endphp
                    @include('layouts.table_top')
                </div>
                <div class="col-md-12">
                    <div class="left-card">
                        <div class="mb-2">
                            <form action="{{ route('get-payroll-row') }}" method="POST" id="add_row_form">
                                <div class="row d-flex justify-content-center">

                                    <div class="col-auto">
                                        <div class="dropdown bootstrap-select form-select form-control">
                                            <select class="form-select form-control selectpicker" name="financial_year"
                                                id="fin_year" aria-label="Default select example" data-live-search="true">
                                                {{--  <option value="">@lang('Select Income Year')</option> --}}
                                                @foreach (FinancialYearList() as $list)
                                                    <option value="{{ $list['financial_year'] }}"
                                                        {{ CurrentFinalcialYear() == $list['financial_year'] ? 'selected' : '' }}>
                                                        {{ $list['financial_year'] }}
                                                    </option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </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)
                                                    <option value="{{ $employee->id }}">
                                                        {{ $employee->name }}
                                                    </option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-auto">
                                        <button type="submit" class="btn primary-button">@lang('Select')</button>
                                    </div>
                                </div>
                            </form>
                        </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"></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="btn primary-button">Save</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('script')
    <script>
        $(document).ready(function() {
            // ===== AJAX: Load the payroll row table (months grid) =====
            $('#add_row_form').submit(function(e) {
                e.preventDefault();

                var formData = new FormData(this);
                var $this = $(this);

                $.ajax({
                    type: 'POST',
                    url: $this.attr('action'),
                    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().append(data);
                            // ensure row totals + footer totals render immediately
                            recalcAll();
                        }
                    },
                    error: function(xhr) {
                        console.log(xhr);
                    }
                });
            });

            // ===== AJAX: Save payroll grid =====
            $(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);
                            // reload the grid for the same filters
                            $("#add_row_form").submit();
                        } else {
                            toastr.error(res.msg || 'Something went wrong');
                        }
                    },
                    error: function(response) {
                        $("#overlay").fadeOut();
                        $(".validation_error").empty();
                        if (response && response.responseJSON && response.responseJSON.errors) {
                            $.each(response.responseJSON.errors, function(field_name, error) {
                                $(document).find("[name=" + field_name + "]")
                                    .after(
                                        '<span class="validation_error" style="color:red">' +
                                        error + "</span>");
                            });
                        } else {
                            toastr.error('Unexpected error');
                        }
                    },
                });
            });

            // ===== Helpers: Row total + Footer totals =====
            function updateRowTotal(row) {
                var total = 0;
                row.find('.income').each(function() {
                    var value = parseFloat($(this).val()) || 0;
                    total += value;
                });
                // Always show numeric text (including 0.00) so first load isn't blank
                row.find('.total').text(total.toFixed(2));
                row.find('.all_total').val(total.toFixed(2));

                // Keep live footer updates
                netTotalCalculation();
            }

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

                $('.payrol_table > tbody > tr').each(function() {
                    var $tr = $(this);

                    var j = parseFloat($tr.find('.january').val()) || 0;
                    january += ($tr.find('.january').attr('data-type') === 'pay') ? j : -j;

                    var f = parseFloat($tr.find('.february').val()) || 0;
                    february += ($tr.find('.february').attr('data-type') === 'pay') ? f : -f;

                    var m = parseFloat($tr.find('.march').val()) || 0;
                    march += ($tr.find('.march').attr('data-type') === 'pay') ? m : -m;

                    var a = parseFloat($tr.find('.april').val()) || 0;
                    april += ($tr.find('.april').attr('data-type') === 'pay') ? a : -a;

                    var ma = parseFloat($tr.find('.may').val()) || 0;
                    may += ($tr.find('.may').attr('data-type') === 'pay') ? ma : -ma;

                    var ju = parseFloat($tr.find('.june').val()) || 0;
                    june += ($tr.find('.june').attr('data-type') === 'pay') ? ju : -ju;

                    var jul = parseFloat($tr.find('.july').val()) || 0;
                    july += ($tr.find('.july').attr('data-type') === 'pay') ? jul : -jul;

                    var au = parseFloat($tr.find('.august').val()) || 0;
                    august += ($tr.find('.august').attr('data-type') === 'pay') ? au : -au;

                    var se = parseFloat($tr.find('.september').val()) || 0;
                    september += ($tr.find('.september').attr('data-type') === 'pay') ? se : -se;

                    var oc = parseFloat($tr.find('.october').val()) || 0;
                    october += ($tr.find('.october').attr('data-type') === 'pay') ? oc : -oc;

                    var nov = parseFloat($tr.find('.november').val()) || 0;
                    november += ($tr.find('.november').attr('data-type') === 'pay') ? nov : -nov;

                    var dec = parseFloat($tr.find('.december').val()) || 0;
                    december += ($tr.find('.december').attr('data-type') === 'pay') ? dec : -dec;
                });

                var all_total = january + february + march + april + may + june +
                    july + august + september + october + november + december;

                $('#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));
                $('#alltotal').text(all_total.toFixed(2));
            }

            // Recalc everything (rows + footer). Call after injecting new table.
            function recalcAll() {
                $("#containerForNewTable .payrol_table > tbody > tr").each(function() {
                    updateRowTotal($(this));
                });
                // netTotalCalculation() already called inside updateRowTotal for each row,
                // but we can call it once more to be extra safe after loop:
                netTotalCalculation();
            }

            // Live update per cell change
            $(document).on('input', '.income', function() {
                updateRowTotal($(this).closest('tr'));
            });

            // If any rows were server-rendered on first page load, initialize totals:
            recalcAll();
        });
    </script>
@endpush