<%- header %>
<main class="dashboard-main">
  <%- navbar %>
  
  <script>let NODE_API_BASE_URL = "<%= NODE_API_BASE_URL %>";</script>
  
  <%- include('./partials/styles/edit-trip-styles') %>
  
  <% 
    // Define masking functions
    const isMasking = typeof enableMasking !== "undefined" ? enableMasking : true;

    function maskName(name) {
      if (!name) return "N/A";
      if (!isMasking) return name;
      return name.substring(0, 3) + "***";
    }

    function maskEmail(email) {
      if (!email) return "N/A";
      if (!isMasking) return email;

      const parts = email.split("@");
      if (parts.length < 2) return email;

      const user = parts[0].slice(0, 2) + "***";
      const domain = "******." + parts[1].split(".").pop();
      return user + "@" + domain;
    }

    function maskPhone(phone) {
      if (!phone) return "N/A";
      if (!isMasking) return phone;

      const visible = phone.slice(0, 2);
      const masked = "*".repeat(phone.length - 2);
      return visible + masked;
    }
  %>
  
  <div class="container mx-auto pt-20">
    <%- include('../../partials/utils/title.ejs', {title: "Trip Edit Manager"}) %>
    
    <% 
      const breadcrumbs = [
        { label: "Dashboard", href: "/admin/dashboard", icon: "bi bi-house-door" },
        { label: "Trips Manager", href: "/admin/trips" },
        { label: "Trip Edit Manager" }
      ];
    %>
    <%- include('../../partials/utils/breadcrumb', { breadcrumbs }) %>
    
    <div class="bg-white rounded-xl shadow-md overflow-hidden">
      <div class="bg-gradient-to-r from-blue-600 to-blue-800 px-6 py-4">
        <div class="flex items-center">
          <h2 class="text-xl font-semibold">Trip Information</h2>
        </div>
      </div>
      <hr />
      
      <div class="p-6">
        <form id="edittrip" class="space-y-6">
          <%- include('./partials/form/hidden-fields', { trip, api_key }) %>
          
          <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
            <!-- Left Column -->
            <div class="space-y-6" style="padding-inline: 10px;">
              <%- include('./partials/form/trip-settings', { trip }) %>
              <%- include('./partials/form/passenger-info', { trip, maskName, maskEmail, maskPhone }) %>
              <%- include('./partials/form/category-distance', { trip, dunit }) %>
              <%- include('./partials/form/pickup-location', { trip }) %>
              <%- include('./partials/form/drop-location', { trip }) %>
              <%- include('../../partials/TripManager/edit-trip-multistops.ejs') %>
              <%- include('./partials/form/promo-code', { trip, city_cur }) %>
            </div>
            
            <!-- Right Column -->
            <div class="space-y-6" style="padding-inline: 10px;">
              <%- include('./partials/form/driver-selection', { trip }) %>
              <%- include('./partials/form/fare-summary', { trip, city_cur, city_tax }) %>
              <%- include('./partials/form/pod-section', { trip, IMAGE_FOLDER_PATH }) %>
              <%- include('./partials/form/trip-status', { trip, tripStatus, city_cur, status }) %>
              <!-- Meter Readings Section - Hidden for now -->
              <div style="display: none;">
                <%- include('./partials/form/meter-readings', { trip, IMAGE_FOLDER_PATH }) %>
              </div>
              <%- include('./partials/form/delivery-section', { trip, IMAGE_FOLDER_PATH }) %>
              <%- include('../../partials/TripManager/trip-co-pass-info.ejs') %>
              <%- include('../../partials/TripManager/trip-extra-options.ejs') %>
            </div>
          </div>

          <!-- Form Actions -->
          <div class="flex justify-end border-t border-gray-200 " style="padding-bottom: 15px; padding-top: 20px; padding-right: 10px; gap: 10px ;">
            <button id="button" onclick="window.location.href='/admin/trips'" style="background-color: rgb(162, 162, 162);  padding-inline: 20px; color: white;"> Cancel
            </button>
            <button type="submit" id="submitButton" class="inline-flex items-center py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500" style="padding-inline: 20px;">
              Update Trip
            </button>
          </div>
        </form>
      </div>
    </div>
  </div>
</main>

<!-- Fare Calculation Popup -->
<%- include('./partials/modals/fare-calc-modal', { trip, city_cur, city_tax }) %>

<!-- JavaScript Includes -->
<%- include('./partials/scripts/datetime-handler', { trip }) %>
<%- include('./partials/scripts/delivery-handler', { trip }) %>
<%- include('./partials/scripts/receiver-country-code', { trip }) %>
<%- include('./partials/scripts/fare-calc-display', { trip, city_cur, city_tax }) %>
<%- include('./partials/scripts/trip-type-handler') %>
<%- include('./partials/scripts/select2-init', { trip }) %>
<%- include('./partials/scripts/form-submit', { trip }) %>
<%- include('./partials/scripts/google-maps-init', { trip, dunit, city_cur, city_id, city_tax, GoogleMapsAPIKey }) %>

<%- footer %>
