<!-- Trip Status Section -->
<div class="bg-yellow-50 rounded-lg  border border-yellow-100" style="padding: 20px;">
  <h3 class="text-sm font-medium text-yellow-800 mb-3 flex items-center">
    <i class="fas fa-clipboard-check mr-2"></i>Status
  </h3>

  <div>
    <label class="block text-sm font-medium text-gray-700 mb-1">Trip Status</label>
    <select name="trip_status" class="block w-full pl-3 pr-10 h-12 form-select text-base border border-gray-300 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm rounded-md">
      <% 
        const isPaidCancel = trip.trip_status === "paid_cancel";
      
        tripStatus.forEach(item => { 
          let isDisabled = true;
          
          if (!isPaidCancel) {
            if (trip.trip_status == "arrive" && (item.slug === "begin" || item.slug === "cancel")) {
              isDisabled = false;
            }

            if (trip.trip_status == "request" && (item.slug === "cancel" || item.slug === "expired" || item.slug === "assigned")) {
              isDisabled = false;
            }

            if (trip.trip_status == "begin" && item.slug === "completed") {
              isDisabled = false;
            }

            if (trip.trip_status == "assigned" && (item.slug === "cancel" || item.slug === "accept")) {
              isDisabled = false;
            }

            if (trip.trip_status == "accept" && (item.slug === "cancel" || item.slug === "arrive")) {
              isDisabled = false;
            }
          }

          let isSelected = false;
          if (isPaidCancel) {
            isSelected = item.slug === "paid_cancel";
          } else {
            isSelected = trip.trip_status === item.slug;
          }
      %>

      <option value="<%= item.slug %>" <%= isSelected ? "selected" : "" %> <%= isDisabled ? "disabled" : "" %>>
        <%= (isPaidCancel && item.slug === "paid_cancel") 
            ? "Payment Awaited" 
            : item.name %>
      </option>

      <% }); %>
    </select>
  </div>

  <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4">
    <div style="padding-bottom: 10px;">
      <label class="block text-sm font-medium text-gray-700 mb-1">Payment Status</label>
      <select name="trip_pay_status" class="block w-full pl-3 pr-10 h-12 form-select text-base border border-gray-300 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm rounded-md" <%= trip.trip_status === "completed" && trip.trip_pay_status?.toLowerCase() === "paid" ? "disabled" : "" %>>
        <option value="Paid" <%= trip.trip_pay_status?.toLowerCase() === "paid" ? "selected" : "" %> <%= (trip.trip_status !== "completed" && trip.trip_status !== "paid_cancel") ? "disabled" : "" %>>
          Paid
        </option>
        <option value="" <%= trip.trip_pay_status?.toLowerCase() !== "paid" ? "selected" : '' %>>
          Unpaid
        </option>
      </select>
    </div>

    <div>
      <label class="block text-sm font-medium text-gray-700 mb-1">Payment Method</label>
      <select <%=   trip.trip_status == "completed" && trip.trip_pay_status?.toLowerCase() == "paid"  ? 'disabled' : '' %> name="trip_pay_mode" class="block w-full pl-3 pr-10 h-12 form-select text-base border border-gray-300 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm rounded-md">
        <option value="Cash" <%= trip.trip_pay_mode === 'Cash' ? 'selected' : '' %>>Cash</option>
        <option value="Wallet" <%= trip?.trip_pay_mode?.toLowerCase() === 'wallet' ? 'selected' : '' %>>Wallet</option>
        <option value="Card" <%= trip.trip_pay_mode === 'Card' ? 'selected' : '' %>>Card</option>
      </select>
    </div>
  </div>

  <div class="mt-4" style="padding-top: 10px;">
    <label class="block text-sm font-medium text-gray-700 mb-1">Tip Amount (<%= city_cur %>)</label>
    <input type="number" name="tip" value="<%= trip.trip_tip %>" class="block w-full px-3 py-2 border h-12 border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm" <%= status ? 'disabled' : '' %>>
  </div>

  <!-- Status-based fields: sent with form so backend can save accept/arrive/begin/completed logs and times -->
  <input type="hidden" name="otp" value="<%= trip.otp || '' %>">
  <input type="hidden" name="actual_from_loc" value="<%= trip.actual_from_loc || '' %>">
  <input type="hidden" name="actual_to_loc" value="<%= trip.actual_to_loc || '' %>">
  <input type="hidden" name="trip_pickup_time" value="<%= trip.trip_pickup_time || '' %>">
  <input type="hidden" name="trip_drop_time" value="<%= trip.trip_drop_time || '' %>">
  <input type="hidden" name="trip_actual_pick_lat" value="<%= trip.trip_actual_pick_lat ?? '' %>">
  <input type="hidden" name="trip_actual_pick_lng" value="<%= trip.trip_actual_pick_lng ?? '' %>">
  <input type="hidden" name="trip_actual_drop_lat" value="<%= trip.trip_actual_drop_lat ?? '' %>">
  <input type="hidden" name="trip_actual_drop_lng" value="<%= trip.trip_actual_drop_lng ?? '' %>">
</div>
