@if (!empty($rows))
    <form action="{{ route('salary_payment.store_bulk') }}" method="post" id="ajax_form_bulk">
        @csrf

        <input type="hidden" name="month_token" value="{{ $monthToken }}">
        <input type="hidden" name="year" value="{{ $year }}">

        <div class="row g-3 mb-3 align-items-end">
            <div class="col-md-3">
                <label class="form-label">Payment Date</label>
                <input type="date" class="form-control" id="payment_date" name="date" value="{{ date('Y-m-d') }}"
                    required>
            </div>
            <div class="col-md-3">
                <label class="form-label">Payment Account</label>
                <select class="form-control" id="payment_account" name="account_id" required>
                    <option value="">-- select account --</option>
                    @foreach ($accounts as $account)
                        <option value="{{ $account->id }}">{{ $account->account_name }}</option>
                    @endforeach
                </select>
            </div>

            {{-- Summary widgets --}}
            <div class="col-md-3">
                <label class="form-label">Employees Selected</label>
                <input type="text" class="form-control" id="summary_selected" value="0" readonly>
            </div>
            <div class="col-md-3">
                <label class="form-label">Total Payment</label>
                <input type="text" class="form-control" id="summary_total" value="0.00" readonly>
            </div>
        </div>

        <div class="mb-2 d-flex gap-2">
            <button type="button" class="btn btn-outline-secondary btn-sm" id="btn_select_all">Select all (with
                due)</button>
            <button type="button" class="btn btn-outline-secondary btn-sm" id="btn_clear_all">Clear all</button>
        </div>

        <div class="table-responsive" style="max-height:70vh; overflow:auto;">
            <table class="table table-bordered align-middle">
                <thead class="table-light sticky-top-0">
                    <tr>
                        <th style="width:44px;">
                            <input type="checkbox" id="chk_all" title="Select all visible">
                        </th>
                        <th>Employee</th>
                        <th>Department</th>
                        <th>Designation</th>
                        <th class="text-end">Addition ({{ ucfirst($monthKey) }})</th>
                        <th class="text-end">Deduction</th>
                        <th class="text-end">Net</th>
                        <th class="text-end">Paid</th>
                        <th class="text-end">Due</th>
                        <th style="min-width:140px">Pay Now</th>
                        <th>TrxID</th>
                        <th>Note</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach ($rows as $i => $r)
                        @php
                            $due = (float) $r['due'];
                            $disabled = $due <= 0 ? 'disabled' : '';
                        @endphp
                        <tr>
                            <td>
                                <input type="checkbox" class="chk_row" {{ $disabled }}>
                                <input type="hidden" name="rows[{{ $i }}][employee_id]"
                                    value="{{ $r['emp']->id }}">
                            </td>
                            <td>
                                <strong>{{ $r['emp']->employee_id }}</strong> — {{ $r['emp']->name }}
                            </td>
                            <td>{{ optional($r['emp']->department)->name }}</td>
                            <td>{{ optional($r['emp']->designation)->name }}</td>
                            <td class="text-end">{{ $r['add'] ? number_format($r['add'], 2) : '-' }}</td>
                            <td class="text-end">{{ $r['ded'] ? number_format($r['ded'], 2) : '-' }}</td>
                            <td class="text-end fw-semibold">{{ number_format($r['net'], 2) }}</td>
                            <td class="text-end">{{ $r['paid'] ? number_format($r['paid'], 2) : '-' }}</td>
                            <td class="text-end">{{ number_format($due, 2) }}</td>
                            <td>
                                <input type="number" step="0.01" min="0" max="{{ $due }}"
                                    data-due="{{ $due }}" class="form-control pay_input"
                                    name="rows[{{ $i }}][payment]" {{ $disabled }} placeholder="0.00">
                            </td>
                            <td>
                                <input type="text" class="form-control"
                                    name="rows[{{ $i }}][transection_no]" placeholder="optional">
                            </td>
                            <td>
                                <input type="text" class="form-control" name="rows[{{ $i }}][note]"
                                    placeholder="optional">
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>

        <div class="mt-3 d-flex justify-content-end gap-2">
            <button type="submit" id="btn_submit_bulk" class="btn btn-primary" disabled>Pay Selected</button>
        </div>
    </form>
@else
    <div class="alert alert-info mb-0">No employees with payable amount for the selected month.</div>
@endif