@include('pages.taxpayer.individual.partials.assessment-bill-detail', [
    'assessment' => $assessment,
    'assessmentRules' => $assessmentRules,
    'assessmentItems' => $assessmentItems,
    'assessmentRuleSettlement' => $assessmentRuleSettlement,
    'adjustments' => $adjustments,
    'lateCharges' => $lateCharges,
    'settlements' => $settlements,
])

<div class="mt-6 space-y-6">
    <!-- Add Notes and Approve/Disapprove actions -->
    <div class="bg-white border border-gray-200 rounded-lg p-4">
        <h4 class="text-sm font-semibold text-gray-800 mb-3">Approval Decision</h4>
        <input type="hidden" id="pendingAssessmentId" value="{{ $assessment->AssessmentID }}">
        <div class="space-y-4">
            <div>
                <label for="pendingDecisionNote" class="block text-sm font-medium text-gray-700 mb-1">
                    Add Notes <span class="text-red-500">*</span>
                </label>
                <textarea
                    id="pendingDecisionNote"
                    class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-teal-500 focus:ring-teal-500 text-sm"
                    rows="3"
                    placeholder="Enter reason for approval decision (required for disapproval)"></textarea>
            </div>
            <div class="flex flex-wrap items-center gap-3">
                <button
                    type="button"
                    id="btnPendingDisapprove"
                    class="inline-flex items-center justify-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-red-600 hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500">
                    Disapprove
                </button>
                <button
                    type="button"
                    id="btnPendingApprove"
                    class="inline-flex items-center justify-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-teal-600 hover:bg-teal-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-teal-500">
                    Approve
                </button>
                <p class="text-xs text-gray-500">
                    Disapproval requires a note. On success, the pending list will refresh automatically.
                </p>
            </div>
        </div>
    </div>

    <!-- Disapproval notes history -->
    <div class="bg-gray-50 border border-gray-200 rounded-lg p-4">
        <h4 class="text-sm font-semibold text-gray-800 mb-3">Disapproval Notes</h4>
        <div class="overflow-x-auto">
            <table class="min-w-full divide-y divide-gray-200 text-sm">
                <thead class="bg-gray-100">
                    <tr>
                        <th class="px-4 py-2 text-left font-medium text-gray-600">Date</th>
                        <th class="px-4 py-2 text-left font-medium text-gray-600">Notes</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-200">
                    @foreach($disapprovalNotes as $note)
                        <tr>
                            <td class="px-4 py-2 whitespace-nowrap text-gray-700">
                                {{ $note->DateCreated ? \Carbon\Carbon::parse($note->DateCreated)->format('d-M-Y') : '-' }}
                            </td>
                            <td class="px-4 py-2 text-gray-700">
                                {{ $note->Notes }}
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>
</div>