{{-- Assessment Rule Details Modal --}}
<div id="dvAssessmentRuleModal" class="hidden fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50">
  <div class="relative top-20 mx-auto p-5 border w-11/12 md:w-2/3 shadow-lg rounded-md bg-white">
      <div class="flex justify-between items-center pb-3 border-b">
          <h3 class="text-xl font-semibold text-gray-900">Assessment Rule Details</h3>
          <button onclick="closeAssessmentRuleModal()" class="text-gray-400 hover:text-gray-600">
              <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
              </svg>
          </button>
      </div>
      <div class="mt-4">
          <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
              <div class="bg-gray-50 p-3 rounded-lg">
                  <dt class="text-sm font-medium text-gray-500">Item Name</dt>
                  <dd id="dvAssessmentRuleItemName" class="mt-1 text-sm text-gray-900 font-semibold">-</dd>
              </div>
              <div class="bg-gray-50 p-3 rounded-lg">
                  <dt class="text-sm font-medium text-gray-500">Profile Description</dt>
                  <dd id="dvProfileDescription" class="mt-1 text-sm text-gray-900 font-semibold">-</dd>
              </div>
              <div class="bg-gray-50 p-3 rounded-lg">
                  <dt class="text-sm font-medium text-gray-500">Amount</dt>
                  <dd id="dvAssessmentRuleAmount" class="mt-1 text-sm text-gray-900 font-semibold">-</dd>
              </div>
              <div class="bg-gray-50 p-3 rounded-lg">
                  <dt class="text-sm font-medium text-gray-500">Tax Year</dt>
                  <dd id="dvARTaxYear" class="mt-1 text-sm text-gray-900 font-semibold">-</dd>
              </div>
              <div class="bg-gray-50 p-3 rounded-lg">
                  <dt class="text-sm font-medium text-gray-500">Payment Frequency</dt>
                  <dd id="dvPaymentFrequencyName" class="mt-1 text-sm text-gray-900 font-semibold">-</dd>
              </div>
              <div class="bg-gray-50 p-3 rounded-lg">
                  <dt class="text-sm font-medium text-gray-500">Payment Option</dt>
                  <dd id="dvARPaymentOptionName" class="mt-1 text-sm text-gray-900 font-semibold">-</dd>
              </div>
              <div class="bg-gray-50 p-3 rounded-lg col-span-2">
                  <dt class="text-sm font-medium text-gray-500">Settlement Method</dt>
                  <dd id="dvARSettlementMethodName" class="mt-1 text-sm text-gray-900 font-semibold">-</dd>
              </div>
          </div>
      </div>
  </div>
</div>

{{-- Assessment Rule Item List Modal --}}
<div id="dvAssessmentRuleItemModal" class="hidden fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50">
  <div class="relative top-20 mx-auto p-5 border w-11/12 md:w-3/4 shadow-lg rounded-md bg-white">
      <div class="flex justify-between items-center pb-3 border-b">
          <h3 class="text-xl font-semibold text-gray-900">Assessment Rule Items</h3>
          <button onclick="closeAssessmentRuleItemModal()" class="text-gray-400 hover:text-gray-600">
              <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
              </svg>
          </button>
      </div>
      <div class="mt-4 overflow-x-auto" id="dvAssessmentRuleItemData">
          <!-- Table will be populated by server -->
      </div>
  </div>
</div>

{{-- Profile Modal --}}
<div id="dvProfileModal" class="hidden fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50">
  <div class="relative top-20 mx-auto p-5 border w-11/12 md:w-3/4 shadow-lg rounded-md bg-white">
      <div class="flex justify-between items-center pb-3 border-b">
          <h3 class="text-xl font-semibold text-gray-900">Profile Details</h3>
          <button onclick="closeProfileModal()" class="text-gray-400 hover:text-gray-600">
              <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
              </svg>
          </button>
      </div>
      <div class="mt-4 overflow-x-auto" id="dvProfileData">
          <!-- Table will be populated by server -->
      </div>
  </div>
</div>