@extends('layouts.app')

@push('style')
    <style>
        .table td {
            font-size: 15px;
            font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif !important;
        }

        .income,
        .deduction,
        .adjustment {
            font-size: 15px !important;
            font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif !important;
            padding: 5px !important;
            margin: 0 !important;
            width: 100px;
        }

        input::-webkit-outer-spin-button,
        input::-webkit-inner-spin-button {
            -webkit-appearance: none !important;
            margin: 0;
        }

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

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

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

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

        .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="left-card">
                    <div class="row">
                        <div class="col-12">
                            <div class="ledger_top text-center">
                                <form action="{{ route('salarysheet.row') }}" method="POST" id="add_row_form">
                                    @csrf
                                    <div class="row d-flex justify-content-center">
                                        <div class="col-auto">
                                            {{-- type="month" expects YYYY-MM --}}
                                            <input type="month" name="month" class="form-control"
                                                value="{{ date('Y-m') }}" required>
                                        </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('salarysheet.store') }}" method="POST" id="ajax_form_data">
                        @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">
                                <button type="submit" class="btn primary-button">Save</button>
                            </div>
                        </div>
                    </form>

                </div>
            </div>
        </div>
    </div>
@endsection

@push('script')
    <script>
        $(function() {
            // Load rows (month -> table)
            $('#add_row_form').on('submit', function(e) {
                e.preventDefault();
                const formData = new FormData(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 && data.errors) {
                            $.each(data.errors, function(field, error) {
                                if (error) toastr.error(error);
                            });
                        } else {
                            $("#containerForNewTable").html(data);
                            // after injecting, run initial grand totals
                            recalcGrandTotals();
                        }
                    },
                    error: function(xhr) {
                        console.error(xhr);
                        toastr.error('Failed to load rows.');
                    }
                });
            });

            // Delegate change handlers for dynamic rows
            $(document).on('input', '.income, .deduction, .adjustment', function() {
                const $row = $(this).closest('tr');
                updateRowTotal($row);
                recalcGrandTotals();
            });

            function parseNum(v) {
                const n = parseFloat(v);
                return isNaN(n) ? 0 : n;
            }

            function updateRowTotal($row) {
                // per-row calculations
                let total_payment = 0,
                    total_deduction = 0;

                $row.find('.income').each(function() {
                    total_payment += parseNum($(this).val());
                });
                $row.find('.deduction').each(function() {
                    total_deduction += parseNum($(this).val());
                });

                const total_salary = total_payment - total_deduction;

                $row.find('.total_payment').text(total_payment.toFixed(2));
                $row.find('.total_payment_input').val(total_payment.toFixed(2));

                $row.find('.total_deduction').text(total_deduction.toFixed(2));
                $row.find('.total_deduction_input').val(total_deduction.toFixed(2));

                $row.find('.total_salary').text(total_salary.toFixed(2));
                $row.find('.total_salary_input').val(total_salary.toFixed(2));

                const advanced = parseNum($row.find('.advanced_input').val());
                const adjustment = parseNum($row.find('.adjustment').val());

                const net_salary = total_salary - adjustment;
                $row.find('.net_salary').text(net_salary.toFixed(2));
                $row.find('.net_salary_input').val(net_salary.toFixed(2));

                // Adjustment/advance panel
                $row.find('.salary_adjustment').text(adjustment.toFixed(2));
                $row.find('.remain_advance').text((advanced - adjustment).toFixed(2));
            }

            function recalcGrandTotals() {
                // recompute across all rows
                let all_total = 0;
                let net_salary_all = 0;

                $('table.payrol_table tbody tr').each(function() {
                    all_total += parseNum($(this).find('.total_salary_input').val());
                    net_salary_all += parseNum($(this).find('.net_salary_input').val());
                });

                $("#alltotal").text(all_total.toFixed(2));
                $("#net_salary_all").text(net_salary_all.toFixed(2));
            }

            // Save salary sheet
            $('#ajax_form_data').on('submit', function(e) {
                e.preventDefault();
                const formData = new FormData(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(resp) {
                        if (resp?.status) {
                            toastr.success(resp.msg || 'Saved');
                            if (resp.url) window.location.href = resp.url;
                        } else {
                            toastr.error(resp?.msg || 'Save failed');
                        }
                    },
                    error: function(xhr) {
                        console.error(xhr);
                        toastr.error('Save failed');
                    }
                });
            });
        });
    </script>
@endpush