{{-- MDA Service Details Modal --}}
<div id="dvMDAServiceModal" 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">MDA Service Details</h3>
          <button onclick="closeMDAServiceModal()" 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">Service Item Name</dt>
                  <dd id="dvMDAServiceItemName" 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="dvMDAProfileDescription" 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">Service Amount</dt>
                  <dd id="dvMDAServiceAmount" 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="dvMDATaxYear" 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="dvMDAPaymentFrequencyName" 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="dvMDAPaymentOptionName" 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="dvMDASettlementMethodName" class="mt-1 text-sm text-gray-900 font-semibold">-</dd>
              </div>
          </div>
      </div>
  </div>
</div>

{{-- MDA Service Item List Modal --}}
<div id="dvMDAServiceItemModal" 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">MDA Service Items</h3>
          <button onclick="closeMDAServiceItemModal()" 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="dvMDAServiceItemData">
          <!-- Table will be populated by server -->
      </div>
  </div>
</div>