@extends('layouts.app')

@push('style')
    <style>
        .sticky-top-0 {
            position: sticky;
            top: 0;
            z-index: 3;
        }
    </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 > Salary Payments (Bulk)';
                        $page_number = 10;
                    @endphp
                    @include('layouts.table_top')
                </div>

                <div class="col-md-12">
                    <div class="left-card">

                        {{-- Filter / Selector --}}
                        <div class="mb-3">
                            <form method="post" action="{{ route('salary_payment.getrow') }}" id="add_row_form">
                                @csrf
                                <div class="row g-2 align-items-end">
                                    <div class="col-md-3">
                                        <label class="col-form-label">Select Month</label>
                                        <input type="month" class="form-control" name="month"
                                            value="{{ date('Y-m') }}">
                                    </div>
                                    <div class="col-md-2">
                                        <button type="submit" class="btn primary-button" style="margin-top:32px;">
                                            @lang('Load')
                                        </button>
                                    </div>
                                </div>
                            </form>
                        </div>

                        {{-- Bulk rows content gets injected here --}}
                        <div id="items-row"></div>

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


@push('script')
    <script>
        $(function() {
            // --- Load the bulk table for a month ---
            $('#add_row_form').on('submit', function(e) {
                e.preventDefault();
                var $form = $(this);
                var fd = new FormData(this);

                $.ajax({
                    url: $form.attr('action'),
                    method: 'POST',
                    data: fd,
                    processData: false,
                    contentType: false,
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    success: function(res) {
                        // If controller returned JSON errors, show them
                        if (res && res.errors) {
                            $.each(res.errors, function(k, arr) {
                                (arr || []).forEach(function(msg) {
                                    window.toastr && toastr.error(msg);
                                });
                            });
                            return;
                        }
                        // Otherwise it's HTML → inject
                        $('#items-row').html(res);
                        updateSummary(); // set initial summary once
                    },
                    error: function(xhr) {
                        console.error(xhr.responseText || xhr);
                        window.toastr && toastr.error('Failed to load rows.');
                    }
                });
            });

            // -------- Helpers bound to the injected form --------
            function toFixed2(n) {
                return (Math.round((n + Number.EPSILON) * 100) / 100).toFixed(2);
            }

            function $bulkForm() {
                return $('#items-row').find('#ajax_form_bulk');
            }

            function $rows() {
                return $bulkForm().find('tbody tr');
            }

            function $chks() {
                return $bulkForm().find('.chk_row');
            }

            function $payInputs() {
                return $bulkForm().find('.pay_input');
            }

            function $summarySelected() {
                return $bulkForm().find('#summary_selected');
            }

            function $summaryTotal() {
                return $bulkForm().find('#summary_total');
            }

            function $btnSubmit() {
                return $bulkForm().find('#btn_submit_bulk');
            }

            function $account() {
                return $bulkForm().find('#payment_account');
            }

            function $date() {
                return $bulkForm().find('#payment_date');
            }

            function $chkAll() {
                return $bulkForm().find('#chk_all');
            }

            function setRowEnabled($tr, enabled) {
                var $chk = $tr.find('.chk_row');
                var $inp = $tr.find('.pay_input');
                if (!$chk.length || !$inp.length) return;

                if ($chk.is(':disabled')) { // respect disabled (no due)
                    $chk.prop('checked', false);
                    $inp.val('').prop('disabled', true);
                    return;
                }
                $chk.prop('checked', !!enabled);
                if ($chk.is(':checked')) {
                    $inp.prop('disabled', false);
                    var due = parseFloat($inp.data('due') || 0) || 0;
                    var current = parseFloat($inp.val() || 0) || 0;
                    var max = parseFloat($inp.attr('max') || 0) || 0;
                    if (current <= 0) $inp.val(toFixed2(Math.min(due, max)));
                } else {
                    $inp.val('').prop('disabled', true);
                }
            }

            function updateSummary() {
                var $form = $bulkForm();
                if (!$form.length) return;

                var selectedCount = 0,
                    total = 0;
                $rows().each(function() {
                    var $tr = $(this);
                    if ($tr.find('.chk_row').is(':checked')) {
                        selectedCount++;
                        var v = parseFloat($tr.find('.pay_input').val() || 0) || 0;
                        total += v;
                    }
                });
                $summarySelected().val(String(selectedCount));
                $summaryTotal().val(toFixed2(total));

                var ok = !!$account().val() && !!$date().val() && total > 0;
                $btnSubmit().prop('disabled', !ok);
            }

            // -------- Delegated handlers on the injected area --------
            // Select-all in header
            $('#items-row').on('change', '#chk_all', function() {
                var check = $(this).is(':checked');
                $rows().each(function() {
                    setRowEnabled($(this), check);
                });
                updateSummary();
            });

            // Select all (only rows with due)
            $('#items-row').on('click', '#btn_select_all', function() {
                // (Removed the erroneous `alert("click"):` that broke JS)
                $rows().each(function() {
                    var $tr = $(this);
                    var $chk = $tr.find('.chk_row');
                    var $inp = $tr.find('.pay_input');
                    var due = parseFloat($inp.data('due') || 0) || 0;
                    if (!$chk.is(':disabled') && due > 0) setRowEnabled($tr, true);
                });
                var allChecked = true;
                $chks().each(function() {
                    if (!$(this).is(':disabled') && !$(this).is(':checked')) allChecked = false;
                });
                $chkAll().prop('checked', allChecked);
                updateSummary();
            });

            // Clear all
            $('#items-row').on('click', '#btn_clear_all', function() {
                $rows().each(function() {
                    setRowEnabled($(this), false);
                });
                $chkAll().prop('checked', false);
                updateSummary();
            });

            // Per-row checkbox
            $('#items-row').on('change', '.chk_row', function() {
                var $tr = $(this).closest('tr');
                setRowEnabled($tr, $(this).is(':checked'));
                updateSummary();
            });

            // Pay Now input clamp + summary
            $('#items-row').on('input', '.pay_input', function() {
                var max = parseFloat($(this).attr('max') || 0) || 0;
                var v = parseFloat($(this).val() || 0) || 0;
                if (v < 0) v = 0;
                if (v > max) v = max;
                $(this).val($(this).val() === '' ? '' : toFixed2(v));
                updateSummary();
            });

            // Date / Account changes
            $('#items-row').on('change', '#payment_account, #payment_date', updateSummary);

            // Bulk submit
            $('#items-row').on('submit', '#ajax_form_bulk', function(e) {
                e.preventDefault();
                var tot = parseFloat($summaryTotal().val() || 0) || 0;
                var selected = parseInt($summarySelected().val() || 0, 10) || 0;
                if (selected === 0 || tot <= 0) {
                    window.toastr && toastr.error(
                        'Select at least one employee and enter payment amounts.');
                    return;
                }
                var $form = $(this);
                var fd = new FormData(this);

                $.ajax({
                    url: $form.attr('action'),
                    method: 'POST',
                    data: fd,
                    processData: false,
                    contentType: false,
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    success: function(res) {
                        if (res && res.status) {
                            window.toastr && toastr.success(res.msg ||
                                'Payments recorded successfully.');
                            if (res.url) window.location = res.url;
                        } else {
                            window.toastr && toastr.error(res.msg ||
                                'Failed to save payments.');
                        }
                    },
                    error: function(xhr) {
                        console.error(xhr.responseText || xhr);
                        window.toastr && toastr.error('Server error.');
                    }
                });
            });
        });
    </script>
@endpush