<!-- Meter Readings Section (for Outstation and Rental) -->
<div id="meterReadingsSection" class="hidden">
  <div class="bg-gray-50 rounded-lg   border border-gray-200" style="padding: 20px;">
    <h3 class="text-lg font-semibold text-gray-800 mb-4">Meter Readings</h3>
    
    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
      <!-- Start Meter Reading -->
      <div>
        <label class="block text-sm font-medium text-gray-700 mb-1">Start Meter Reading</label>
        <input 
          type="text" 
          name="sr_meter" 
          value="<%= trip.sr_meter || '' %>" 
          placeholder="Enter start reading"
          disabled
          class="block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm bg-gray-100 cursor-not-allowed sm:text-sm"
        >
      </div>

      <!-- End Meter Reading -->
      <div>
        <label class="block text-sm font-medium text-gray-700 mb-1">End Meter Reading</label>
        <input 
          type="text" 
          name="er_meter" 
          value="<%= trip.er_meter || '' %>" 
          placeholder="Enter end reading"
          disabled
          class="block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm bg-gray-100 cursor-not-allowed sm:text-sm"
        >
      </div>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4">
      <!-- Start Meter Image -->
      <div>
        <label class="block text-sm font-medium text-gray-700 mb-1">Start Meter Image</label>
        <% if (trip.startMeterImage && trip.startMeterImage.img_path) { %>
          <div class="mb-2">
            <img 
              src="<%= IMAGE_FOLDER_PATH %><%= trip.startMeterImage.img_path %>" 
              alt="Start Meter" 
              class="w-full h-48 object-cover rounded-md border border-gray-300"
            >
          </div>
        <% } else { %>
          <div class="flex items-center justify-center h-48 bg-gray-100 rounded-md border border-gray-300">
            <div class="text-center text-gray-400">
              <i class="bi bi-image text-4xl"></i>
              <p class="text-sm mt-2">No image available</p>
            </div>
          </div>
        <% } %>
      </div>

      <!-- End Meter Image -->
      <div>
        <label class="block text-sm font-medium text-gray-700 mb-1">End Meter Image</label>
        <% if (trip.endMeterImage && trip.endMeterImage.img_path) { %>
          <div class="mb-2">
            <img 
              src="<%= IMAGE_FOLDER_PATH %><%= trip.endMeterImage.img_path %>" 
              alt="End Meter" 
              class="w-full h-48 object-cover rounded-md border border-gray-300"
            >
          </div>
        <% } else { %>
          <div class="flex items-center justify-center h-48 bg-gray-100 rounded-md border border-gray-300">
            <div class="text-center text-gray-400">
              <i class="bi bi-image text-4xl"></i>
              <p class="text-sm mt-2">No image available</p>
            </div>
          </div>
        <% } %>
      </div>
    </div>
  </div>
</div>
