<%- header %>
  <main class="dashboard-main">
    <%- navbar %>
      <style>
        .strikethrough-red {
          color: red;
          text-decoration: line-through;
        }

        .p-5 {
          padding: 1.25rem !important;
        }
      </style>
      <script>
        let NODE_API_BASE_URL = "<%= NODE_API_BASE_URL %>";
        let userCompanyId = "<%= user.user_id %>";
        let userGroupId = "<%= user.group_id %>";
      </script>
      <div class="container mx-auto pt-20">
        <%- include('../../partials/utils/title.ejs', { title: "Add Trip Manager" }) %>
          <%- include('../../partials/utils/breadcrumb', { breadcrumbs: [ { label: "Dashboard" ,
            href: "/admin/dashboard" , icon: "bi bi-house-door" }, { label: "Add Trip Manager" } ] }) %>

            <!-- Main Form Card -->
            <div class="bg-white rounded-xl shadow-md overflow-hidden">
              <div class="bg-gradient-to-r px-6 py-8">
                <h2 class="text-xl font-semibold">Trip Information</h2>
              </div>
              <hr>
              <div class="p-6">
                <form id="edittrip" class="space-y-6">
                  <input type="hidden" id="pickupLat" name="pickupLat">
                  <input type="hidden" id="pickupLng" name="pickupLng">
                  <input type="hidden" id="dropLat" name="dropLat">
                  <input type="hidden" id="dropLng" name="dropLng">
                  <input type="hidden" id="tripDistance" name="tripDistance">
                  <input type="hidden" id="tripTime" name="tripTime">
                  <input type="hidden" id="polyline" name="polyline">
                  <input type="hidden" id="api_key" name="api_key">
                  <input type="hidden" id="user_id" name="user_id">
                  <input type="hidden" id="u_gender" name="u_gender">

                  <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
                    <!-- Left Column -->
                    <div class="space-y-6 px-2.5">
                      <%- include('../../partials/TripManager/add-trip-settings.ejs') %>
                        <div class="mt-3">
                          <label class="block text-sm font-medium text-gray-700 mb-1">Start Date</label>
                          <input type="datetime-local" id="trip_datetime" name="trip_datetime"
                            class="block w-full px-3 py-2 h-12 border border-gray-300 rounded-md shadow-sm sm:text-sm">
                          <p class="mt-1 text-xs text-blue-600 text-right">**Change ride mode to modify trip date</p>
                        </div>
                        <%- include('../../partials/TripManager/add-trip-passenger.ejs') %>
                          <%- include('../../partials/TripManager/add-trip-details.ejs') %>
                            <%- include('../../partials/TripManager/add-trip-multistops.ejs') %>
                              <%- include('../../partials/TripManager/add-trip-promo.ejs') %>
                    </div>
                    <!-- Right Column -->
                    <div class="space-y-6 px-2.5">
                      <%- include('../../partials/TripManager/add-trip-driver.ejs') %>
                        <%- include('../../partials/TripManager/add-trip-fare-summary.ejs') %>
                          <%- include('../../partials/TripManager/add-trip-status.ejs') %>
                    </div>
                  </div>

                  <div class="flex justify-end border-t border-gray-200 pt-5 pb-3.5 pr-2.5">
                    <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">Add
                      Trip</button>
                  </div>
                </form>
              </div>
            </div>
      </div>
  </main>

  <%- include('../../partials/TripManager/fare-calc-modal.ejs') %>

    <!-- All JavaScript moved here, before the footer -->
    <script>
      document.getElementById("trip_genderl").style.display = "none";
      // document.getElementById("specialPreferenceData").style.display = "none";

      document.addEventListener("DOMContentLoaded", function () {
        var dt = document.getElementById("trip_datetime");
        if (dt) {
          var now = new Date();
          now.setMinutes(now.getMinutes() + 10);
          dt.value = new Date(now.getTime() - now.getTimezoneOffset() * 60000).toISOString().slice(0, 16);
        }
      });
    </script>

    <script>
      fetch("/countryCode.json")
        .then(res => res.json())
        .then(data => {
          const $select = $('#receiverCountryCode');
          if (!$select.length) return;

          window.countryCodes = data; // Store globally

          data.forEach(country => {
            const flag = [...country.code.toUpperCase()]
              .map(c => 127397 + c.charCodeAt())
              .map(code => String.fromCodePoint(code))
              .join('');
            const isSelected = country.id === '<%= country_code %>';
            const option = new Option(`${flag} +${country.id} (${country.name})`, `+${country.id}`, isSelected, isSelected);
            option.dataset.iso = country.code;
            $select.append(option);
          });
          $select.val('+<%= country_code %>').trigger('change');
        })
        .catch(console.error);
    </script>

    <script>
      // Utility: Get emoji flag from country code
      function getFlagEmoji(code) {
        return code.toUpperCase().replace(/./g, char =>
          String.fromCodePoint(127397 + char.charCodeAt())
        );
      }

      fetch("/countryCode.json")
        .then(res => res.json())
        .then(data => {
          window.countryCodes = data; // Store globally
          const $select = $('#specialPreferenceCountryId');
          if (!$select.length) return;

          data.forEach(country => {
            const isSelected = country.id === '<%= country_code %>';
            const option = new Option(
              `${getFlagEmoji(country.code)} +${country.id} (${country.name})`,
              `+${country.id}`,
              isSelected,
              isSelected
            );
            option.dataset.iso = country.code;
            $select.append(option);
          });
          $select.val('+<%= country_code %>').trigger('change');
        })
        .catch(console.error);
    </script>

    <script>
      // Validation rules in JSON format
      const validationRules = {
        trip_type: {
          required: true,
          message: "Please select a trip type"
        },
        is_ride_later: {
          required: true,
          message: "Please select ride mode"
        },
        is_oneway: {
          requiredWhen: {
            field: "trip_type",
            value: "outstation"
          },
          message: "Please select trip mode for outstation"
        },
        trip_end_date: {
          requiredWhen: {
            field: "trip_type",
            value: "outstation",
            andField: "is_oneway",
            andValue: "0"
          },
          message: "Return date is required for round trips",
          validate: (value) => {
            const startDate = new Date(document.querySelector('[name="trip_datetime"]').value);
            const endDate = new Date(value);
            return endDate > startDate;
          },
          invalidMessage: "Return date must be after start date"
        },
        trip_datetime: {
          required: true,
          message: "Start date is required",
          validate: (value) => {
            const now = new Date();
            const selectedDate = new Date(value);
            return selectedDate > now;
          },
          invalidMessage: "Start date must be in the future"
        },
        riderSelect: {
          required: true,
          message: "Please select a passenger",
          validate: (value) => {
            const select = document.getElementById('riderSelect');
            return select && $(select).val() !== null && $(select).val() !== '';
          },
          invalidMessage: "Please select a passenger"
        },
        category_id: {
          required: true,
          message: "Please select a category"
        },
        rental_package: {
          requiredWhen: {
            field: "trip_type",
            value: "rental"
          },
          message: "Please select a rental package"
        },
        trip_from_loc: {
          required: true,
          message: "Pickup location is required"
        },
        trip_to_loc: {
          required: true,
          message: "Drop location is required"
        },
        trip_distance: {
          requiredWhen: { field: "trip_type", value: "outstation" },
          message: "Distance is required for outstation trips",
          validate: (value) => !value || (!isNaN(parseFloat(value)) && parseFloat(value) >= 0),
          invalidMessage: "Distance must be 0 or a positive number"
        }
      };

      // Function to validate a field
      function validateField(fieldName) {
        const field = document.querySelector(`[name="${fieldName}"]`) ||
          document.getElementById(fieldName);
        const rules = validationRules[fieldName];
        if (!rules) return true; // No validation rules for this field

        // Remove existing error message
        const existingError = field?.parentElement?.querySelector('.error-message');
        if (existingError) {
          existingError.remove();
        }

        // Check if field is required
        let value = field?.value;
        if (field?.type === 'select-one') {
          const select = $(field).data('select2');
          value = select ? select.$container.find('.select2-selection__rendered').attr('title') : field.value;
        }

        // Check conditional required
        if (rules.requiredWhen) {
          const conditionField = document.querySelector(`[name="${rules.requiredWhen.field}"]`);
          const conditionValue = conditionField ? conditionField.value : null;

          if (rules.requiredWhen.notValue) {
            if (conditionValue !== rules.requiredWhen.notValue) {
              if (!value) {
                showError(field, rules.message);
                return false;
              }
            }
          } else if (conditionValue === rules.requiredWhen.value) {
            if (rules.requiredWhen.andField) {
              const andField = document.querySelector(`[name="${rules.requiredWhen.andField}"]`);
              const andValue = andField ? andField.value : null;
              if (andValue === rules.requiredWhen.andValue && !value) {
                showError(field, rules.message);
                return false;
              }
            } else if (!value) {
              showError(field, rules.message);
              return false;
            }
          }
        } else if (rules.required && !value) {
          showError(field, rules.message);
          return false;
        }

        // Custom validation
        if (rules.validate && value && (typeof value !== 'string' || value.trim() !== '')) {
          if (!rules.validate(value)) {
            showError(field, rules.invalidMessage || "This field is required");
            return false;
          }
        }

        return true;
      }

      // Function to show error message
      function showError(field, message) {
        if (!field) return;

        const errorElement = document.createElement('div');
        errorElement.className = 'error-message text-red-500 text-xs mt-1';
        errorElement.textContent = message;

        // Insert after the field
        if (field.type === 'select-one' && $(field).data('select2')) {
          // For Select2 fields
          $(field).next('.select2-container').after(errorElement);
        } else {
          field.parentNode.insertBefore(errorElement, field.nextSibling);
        }
      }

      // Function to validate the entire form
      function validateForm() {
        let isValid = true;

        // Validate all fields
        Object.keys(validationRules).forEach(fieldName => {
          if (!validateField(fieldName)) {
            isValid = false;
          }
        });

        return isValid;
      }

      // Add event listeners for real-time validation
      document.addEventListener('DOMContentLoaded', function () {
        // Add blur event listeners for all validated fields
        Object.keys(validationRules).forEach(fieldName => {
          const field = document.querySelector(`[name="${fieldName}"]`) ||
            document.getElementById(fieldName);
          if (field) {
            field.addEventListener('blur', () => validateField(fieldName));

            // For Select2 fields, listen to change events
            if ($(field).data('select2')) {
              $(field).on('select2:close', () => validateField(fieldName));
            }
          }
        });
      });
    </script>

    <script>
      document.addEventListener("DOMContentLoaded", function () {
        $('#receiverCountryCode').select2({
          placeholder: "Select Country Code",
          width: "100%"
        });

        $('#specialPreferenceCountryId').select2({
          placeholder: "Select Country Code",
          width: "100%"
        });

        function toggleDeliveryFields(tripType) {
          const section = document.getElementById("deliverySections");
          if (section) {
            section.style.display = tripType === "delivery" ? "block" : "none";
          }
        }

        function updateDeliveryValidationRules(tripType) {
          if (tripType === "delivery") {
            // Make drop location mandatory for delivery trips
            validationRules.trip_to_loc = {
              required: true,
              message: "Drop location is required for courier trips"
            };

            // Update the drop location label to show it's required
            const dropLabel = document.querySelector('label[for="trip_to_loc"]');
            if (dropLabel) {
              dropLabel.innerHTML = 'Drop Location <span class="text-red-500">*</span>';
            }

            validationRules.receiverName = {
              required: true,
              message: "Receiver name is required"
            };

            validationRules.receiverCountryCode = {
              required: true,
              message: "Country code is required"
            };

            validationRules.receiverPhone = {
              required: true,
              message: "Receiver phone number is required",
              validate: (value) => /^\d{5,15}$/.test(value),
              invalidMessage: "Please enter a valid phone number"
            };
          } else {
            // Keep drop location required for all trip types
            validationRules.trip_to_loc = {
              required: true,
              message: "Drop location is required"
            };

            // Keep the drop location label showing it's required
            const dropLabel = document.querySelector('label[for="trip_to_loc"]');
            if (dropLabel) {
              dropLabel.innerHTML = 'Drop Location <span class="text-red-500">*</span>';
            }

            // Remove delivery rules when NOT delivery
            delete validationRules.receiverName;
            delete validationRules.receiverCountryCode;
            delete validationRules.receiverPhone;
          }
        }

        const tripTypeElement = document.getElementById("tripType");
        if (tripTypeElement) {
          tripTypeElement.addEventListener("change", function () {
            toggleDeliveryFields(this.value);
            updateDeliveryValidationRules(this.value);
          });

          // Initialize validation rules on page load based on current trip type
          const initialTripType = tripTypeElement.value;
          if (initialTripType) {
            updateDeliveryValidationRules(initialTripType);
          }
        }

        // Handle Special Preference changes
        function updateSpecialPreferenceValidationRules() {
          const checkedBoxes = document.querySelectorAll(
            'input[name="specialPreferenceExtraOptionId[]"]:checked'
          );

          const specialPreference = Array.from(checkedBoxes).map(cb => cb.value);

          if (Array.isArray(specialPreference) && specialPreference.length > 0) {
            validationRules.specialPreferenceName = {
              required: true,
              message: "Special preference name is required"
            };

            validationRules.specialPreferenceCountryId = {
              required: true,
              message: "Country code is required"
            };

            validationRules.specialPreferencePhone = {
              required: true,
              message: "Special preference phone number is required",
              validate: (value) => /^\d{5,15}$/.test(value),
              invalidMessage: "Please enter a valid phone number"
            };
          } else {
            // Remove rules when no special preference
            delete validationRules.specialPreferenceName;
            delete validationRules.specialPreferenceCountryId;
            delete validationRules.specialPreferencePhone;
          }
        }

        // Handle Special Preference changes
        const extraOptionCheckboxes = document.querySelectorAll(
          'input[name="specialPreferenceExtraOptionId[]"]'
        );

        if (extraOptionCheckboxes.length > 0) {
          extraOptionCheckboxes.forEach(checkbox => {
            checkbox.addEventListener('change', function () {
              updateSpecialPreferenceValidationRules();
            });
          });
        }

        const rideModeSelect =
          document.getElementById("ride_mode") ||
          document.querySelector('select[name="is_ride_later"]');
        const tripDateInput = document.getElementById("trip_datetime");
        const tripTypeSelect = document.getElementById("tripType");

        function toggleTripDate() {
          if (!rideModeSelect || !tripDateInput) return;

          const tripType = tripTypeSelect ? tripTypeSelect.value : '';

          // For delivery trips, always enable the date field
          if (tripType === 'delivery') {
            tripDateInput.disabled = false;
            tripDateInput.classList.remove("bg-gray-100", "cursor-not-allowed");
            return;
          }

          // For other trip types, check ride mode
          if (rideModeSelect.value === "0") {
            // disable editing but keep value visible
            tripDateInput.disabled = true;
            tripDateInput.classList.add("bg-gray-100", "cursor-not-allowed");
          } else {
            tripDateInput.disabled = false;
            tripDateInput.classList.remove("bg-gray-100", "cursor-not-allowed");
          }
        }

        // Run once on load
        toggleTripDate();

        // Listen for changes
        if (rideModeSelect) {
          rideModeSelect.addEventListener("change", toggleTripDate);
        }
        if (tripTypeSelect) {
          tripTypeSelect.addEventListener("change", toggleTripDate);
        }
      });
    </script>

    <!-- Optimized JavaScript -->
    <script>
      document.addEventListener('DOMContentLoaded', function () {
        const tripTypeSelect = document.getElementById('tripType');
        const normalOptions = document.getElementById('normalOptions');
        const outstationOptions = document.getElementById('outstationOptions');
        const returnDateContainer = document.getElementById('returnDateContainer');
        const rentalOptions = document.getElementById('rentalOptions');
        let curr = "<%= city_cur %>";

        // Initial setup
        updateTripOptions();

        // Handle trip type changes
        if (tripTypeSelect) {
          tripTypeSelect.addEventListener('change', updateTripOptions);
        }

        // Handle outstation trip mode changes
        const onewayElement = document.querySelector('[name="is_oneway"]');
        if (onewayElement) {
          onewayElement.addEventListener('change', function () {
            if (this.value === '0') { // Round trip selected
              if (returnDateContainer) returnDateContainer.classList.remove('hidden');
              // Set default return date (start date + 1 day)
              const startDate = document.querySelector('[name="trip_datetime"]')?.value;
              if (startDate) {
                const date = new Date(startDate);
                date.setDate(date.getDate() + 1);
                const returnDateEl = document.querySelector('[name="trip_end_date"]');
                if (returnDateEl) {
                  returnDateEl.value = date.toISOString().slice(0, 16);
                }
              }
            } else {
              if (returnDateContainer) returnDateContainer.classList.add('hidden');
            }
          });
        }

        // Handle package selection changes
        document.getElementById('rentalPackageSelect')?.addEventListener('change', function () {
          const selectedOption = this.options[this.selectedIndex];
          if (selectedOption.value) {
            // Update fare display with package details
            const basePriceEl = document.getElementById('basePrice');
            const totalFareEl = document.getElementById('totalFare');
            const grossFareEl = document.getElementById('grossFare');
            const tripPayAmountEl = document.getElementById('trip_pay_amount');

            if (basePriceEl) basePriceEl.innerText = `${curr} ${selectedOption.dataset.price}`;
            if (totalFareEl) totalFareEl.innerText = `${curr} ${selectedOption.dataset.price}`;
            if (grossFareEl) grossFareEl.innerText = `${curr} ${selectedOption.dataset.price}`;
            if (tripPayAmountEl) tripPayAmountEl.value = selectedOption.dataset.price;

            // You may want to store the package details in your form data
            window.estData = {
              package_id: selectedOption.value,
              package_name: selectedOption.text,
              package_price: selectedOption.dataset.price,
              package_hours: selectedOption.dataset.hours
            };
          }
        });

        function updateTripOptions() {
          if (!tripTypeSelect) return;

          const tripType = tripTypeSelect.value;
          if (normalOptions) normalOptions.classList.add('hidden');
          if (outstationOptions) outstationOptions.classList.add('hidden');
          if (returnDateContainer) returnDateContainer.classList.add('hidden');
          if (rentalOptions) rentalOptions.classList.add('hidden');

          const multistopsEl = document.getElementById('multistopsContainer');
          const dropEl = document.getElementById('dropLocationContainer');
          const rentalPkgEl = document.getElementById('rentalPackageContainer');
          const categoryIdV1 = document.getElementById("categorySelect")?.value;

          if (categoryIdV1) {
            checkIsExtrasCategoryFlag(categoryIdV1);
          }

          if (tripType === 'normal') {
            if (normalOptions) normalOptions.classList.remove('hidden');
            if (dropEl) dropEl.classList.remove('hidden');
            // Multistop hidden - removed: if (multistopsEl) multistopsEl.classList.remove('hidden');
            if (rentalPkgEl) rentalPkgEl.classList.add('hidden');
          } else if (tripType === 'outstation') {
            if (outstationOptions) outstationOptions.classList.remove('hidden');
            if (dropEl) dropEl.classList.remove('hidden');
            if (multistopsEl) multistopsEl.classList.add('hidden');
            if (rentalPkgEl) rentalPkgEl.classList.add('hidden');
          } else if (tripType === 'rental') {
            if (dropEl) dropEl.classList.add('hidden');
            if (multistopsEl) multistopsEl.classList.add('hidden');
            if (rentalPkgEl) rentalPkgEl.classList.remove('hidden');
          } else if (tripType === 'delivery') {
            if (dropEl) dropEl.classList.remove('hidden');
            if (multistopsEl) multistopsEl.classList.add('hidden');
            if (rentalPkgEl) rentalPkgEl.classList.add('hidden');
          }
        }
      });
    </script>

    <script>
      document.addEventListener('DOMContentLoaded', function () {
        const elements = {
          riderSelect: $('#riderSelect'),
          driverSelect: $('#driverSelect'),
          categorySelect: $('#categorySelect'),
          clientName: $('#clientName'),
          clientPhone: $('#clientPhone'),
          clientEmail: $('#clientEmail'),
          user_id: $('#user_id'),
          api_key: $('#api_key')
        };

        // Generalized Select2 initializer with working processResults
        const initSelect2 = (element, url, template, minInputLength = 0, formatData) => {
          if (!element.length) {
            console.warn('Select2 init skipped: element not found:', element);
            return;
          }

          element.select2({
            placeholder: element.data('placeholder') || 'Search...',
            allowClear: true,
            width: '100%',
            minimumInputLength: minInputLength,
            ajax: {
              url: url,
              dataType: 'json',
              delay: 300,
              data: params => ({
                search: params.term,
                page: params.page || 1
              }),
              processResults: (data, params) => {
                params.page = params.page || 1;

                const list = Array.isArray(data.data) ? data.data : data;

                const results = list.map(item => {
                  // 🧠 Only apply formatData if provided
                  const formatted = typeof formatData === 'function' ? formatData(item) : item;

                  return {
                    id: formatted.user_id || formatted.driver_id || formatted.id,
                    text: formatted.u_name || formatted.d_name || formatted.text || 'Unknown',
                    type: formatted.type || formatted.d_device_type,
                    token: formatted.token || formatted.d_device_token || formatted.d_fcm_device_token,
                    ...formatted
                  };
                });

                return {
                  results,
                  pagination: {
                    more: false
                  }
                };
              },
              cache: true
            },
            templateResult: template,
            templateSelection: item => item.text || item.u_name || item.d_name
          });

          // ✅ Attach dataset for driver select only (won’t affect passengers)
          element.on('select2:select', function (e) {
            const data = e.params.data;
            const option = $(this).find(`option[value="${data.id}"]`);
            if (option.length && data.token) {
              option.attr('data-type', data.type || '');
              option.attr('data-token', data.token || '');
            }
          });
        };

        // Initialize rider select
        initSelect2(
          elements.riderSelect,
          '/admin/all/passengers/options?is_delete=0',
          user => {
            if (user.loading) return user.text;
            const div = document.createElement('div');
            div.innerHTML = `${user.u_name || user.text} <span class="text-muted">(ID: ${user.user_id || user.id})</span>`;
            return div;
          },
          1
        );

        // Initialize driver select
        initSelect2(
          elements.driverSelect,
          '/admin/active/driver/options?d_active=1&is_delete=0&d_is_available=1&d_is_verified=1',
          driver => {
            if (driver.loading) return driver.text;
            const div = document.createElement('div');
            div.innerHTML = `
          ${driver.d_name || driver.text}
          <span class="text-muted">(ID: ${driver.driver_id || driver.id})</span>
        `;
            return div;
          },
          0,
          driver => {
            const deviceType = driver.d_device_type?.toLowerCase() || driver.device_type?.toLowerCase() || '';
            const token = deviceType === 'android' ?
              driver.d_device_token || '' :
              driver.d_fcm_device_token || '';
            return {
              driver_id: driver.driver_id,
              d_name: driver.d_name,
              type: deviceType,
              token: token
            };
          }
        );

        // Handle rider selection
        elements.riderSelect.on('select2:select', function (e) {
          const user = e.params.data;
          console.log('Rider selected:', user);
          elements.clientName.val(user.u_name || '');
          elements.clientPhone.val(`+${user.c_code || ''} ${user.u_phone || ''}`.trim());
          elements.clientEmail.val(user.u_email || '');
          elements.user_id.val(user.user_id || user.id || '');
          elements.api_key.val(user.api_key || '');
          document.getElementById("u_gender").value = user.u_gender || '';

          // Hide trip_gender if male or null/empty
          if (user.u_gender?.toLowerCase() == "female") {
            document.getElementById("trip_genderl").style.display = "block";
            // Preselect Female in gender preference dropdown
            const tripGenderSelect = document.getElementById("trip_gender");
            if (tripGenderSelect) {
              tripGenderSelect.value = "Female";
            }
            // Reload categories to filter by female
            loadCategories();
          } else {
            document.getElementById("trip_genderl").style.display = "none";
            // Reset gender preference to "Both" when hidden
            const tripGenderSelect = document.getElementById("trip_gender");
            if (tripGenderSelect) {
              tripGenderSelect.value = "B";
            }
            // Reload categories to show all
            loadCategories();
          }
        });

        // Clear rider selection
        elements.riderSelect.on('select2:clear', function () {
          elements.clientName.val('');
          elements.clientPhone.val('');
          elements.clientEmail.val('');
          elements.user_id.val('');
          elements.api_key.val('');
        });

        // Load categories dropdown
        function loadCategories() {
          fetch('/admin/allCatData')
            .then(res => res.json())
            .then(data => {
              if (data.data) {
                const userGender = document.getElementById("u_gender")?.value;
                const tripGender = document.getElementById("trip_gender")?.value;
                const tripGenderField = document.getElementById("trip_genderl");

                // Only filter by gender if the gender preference field is visible
                const isGenderFieldVisible = tripGenderField && tripGenderField.style.display !== "none";

                // Check if female preference is selected
                // tripGender can be "Female", "F", or other values. "B" means no preference
                const isFemalePreference = isGenderFieldVisible && (
                  (tripGender === 'Female' || tripGender === 'F') ||
                  (userGender?.toLowerCase() === 'female' && tripGender !== 'B')
                );

                elements.categorySelect.empty().append('<option value="">Select Category</option>');

                data.data.forEach(cat => {
                  // If female preference is selected AND gender field is visible, only show categories with is_female = 1
                  if (isFemalePreference && cat.is_female != 1) {
                    return; // Skip this category
                  }

                  const option = new Option(cat.cat_name, cat.category_id, false, false);
                  $(option).attr({
                    'data-base': cat.cat_base_price,
                    'data-fare-per-km': cat.cat_fare_per_km,
                    'data-fare-per-min': cat.cat_fare_per_min
                  });
                  elements.categorySelect.append(option);
                });
              }
            })
            .catch(console.error);
        }

        loadCategories();

        // Reload categories when gender preference changes
        const tripGenderSelect = document.getElementById("trip_gender");
        if (tripGenderSelect) {
          tripGenderSelect.addEventListener('change', function () {
            loadCategories();
          });
        }
      });
    </script>

    <!-- <script>
  // Check categories is_extras flag
  async function checkIsExtrasCategoryFlag(catId) {
    if (!catId) return;
    fetch(`/admin/getCheckCatIsExtras?catId=${catId}`)
      .then(res => res.json())
      .then(response => {
        const isExtras = Number(response.data) === 1;
        const tripTypeV1 = document.getElementById('tripType')?.value;
        const specialPrefEl = document.getElementById("specialPreferenceData");
        
        if (specialPrefEl) {
          if (tripTypeV1 === 'normal' && isExtras) {
            specialPrefEl.style.display = "block";
          } else {
            specialPrefEl.style.display = "none";
          }
        }
      })
      .catch(err => {
        console.error("Error checking extras category:", err);
      });
  }
</script> -->

    <script>
      let estData;
      let ADMIN_URL = "<%= ADMIN_URL %>";
      let curr = "<%= city_cur %>";
      let deliveriesData;

      document.getElementById("edittrip").addEventListener("submit", async function (e) {
        e.preventDefault();

        if (!validateForm()) {
          console.log("Form validation failed.");
          return;
        }

        const form = e.target;
        const tripType = document.getElementById('tripType').value;
        const isRideLater = document.querySelector('[name="is_ride_later"]')?.value === '1';
        const selectTime = document.querySelector('[name="trip_datetime"]')?.value;
        console.log('Common Data:', tripType);

        // Temporarily enable disabled fields
        const disabledFields = form.querySelectorAll("[disabled]");
        disabledFields.forEach(el => el.removeAttribute("disabled"));

        let formattedGMTDate;

        if (selectTime) {
          const gmtDate = new Date(selectTime);

          // Format to 'YYYY-MM-DD HH:mm:ss'
          const yyyy = gmtDate.getUTCFullYear();
          const mm = String(gmtDate.getUTCMonth() + 1).padStart(2, '0');
          const dd = String(gmtDate.getUTCDate()).padStart(2, '0');
          const hh = String(gmtDate.getUTCHours()).padStart(2, '0');
          const mi = String(gmtDate.getUTCMinutes()).padStart(2, '0');
          const ss = String(gmtDate.getUTCSeconds()).padStart(2, '0');

          formattedGMTDate = `${yyyy}-${mm}-${dd} ${hh}:${mi}:${ss}`;
        } else {
          console.error("Trip date input is missing or empty.");
        }

        // Create FormData object
        const formData = new FormData();

        // Common parameters for all trip types
        const commonData = {
          trip_date: formattedGMTDate,
          city_id: "<%= city_id %>",
          user_id: document.querySelector('[name="user_id"]')?.value || '',
          trip_currency: "<%= city_cur %>",
          seats: "1",
          trip_status: document.querySelector('[name="trip_status"]')?.value || 'request',
          is_share: "0",
          is_delivery: "0",
          trip_pay_mode: document.querySelector('[name="trip_pay_mode"]')?.value || 'Cash',
          trip_gender: document.getElementById("u_gender")?.value == "Male" ? "B" : document.getElementById("trip_gender")?.value,
          pay_card: document.querySelector('[name="trip_pay_mode"]')?.value === 'Card' ? localStorage.getItem("pm") : "",
          pickup_notes: document.getElementById("p_notes")?.value || '',
          api_key: document.querySelector('[name="api_key"]')?.value || '',
          trip_dunit: "<%= dunit %>",
          is_ride_later: isRideLater ? "1" : "0"
        };

        // Add comp_id for sub-admins
        if (parseInt(userGroupId) !== 1) {
          commonData.comp_id = userCompanyId;
        }

        // ❌ Remove pay_card if empty
        if (!commonData.pay_card) {
          delete commonData.pay_card;
        }

        // ❌ Remove pickup_notes if empty
        if (!commonData.pickup_notes) {
          delete commonData.pickup_notes;
        }

        // Add common data to formData
        Object.entries(commonData).forEach(([key, value]) => {
          if (value !== undefined && value !== null) {
            formData.append(key, value);
          }
        });

        let extraOptions = '';
        let extraOptionsText = '';
        let coPassInfo = '';

        const extraOptionCheckboxValue = document.querySelectorAll(
          'input[name="specialPreferenceExtraOptionId[]"]'
        );

        if (extraOptionCheckboxValue.length > 0) {
          extraOptionCheckboxValue.forEach(checkbox => {
            const extraOptionCheckedBox = document.querySelectorAll(
              'input[name="specialPreferenceExtraOptionId[]"]:checked'
            );

            const extraOptionIds = Array.from(extraOptionCheckedBox).map(cb => cb.value);

            if (Array.isArray(extraOptionIds) && extraOptionIds.length > 0) {
              const extraOptionLabels = Array.from(extraOptionCheckedBox)
                .map(cb => cb.dataset.title)
                .filter(Boolean);

              // Pipe-separated label string
              const specialPreferenceLabels = extraOptionLabels.join('|');

              extraOptions = extraOptionIds.join(',');
              extraOptionsText = specialPreferenceLabels;

              const countryCodeV1 = document.getElementById("specialPreferenceCountryId").value;
              const countryCodeV = countryCodeV1.replace('+', '');
              // iso code find
              const isoCode = $('#specialPreferenceCountryId option:selected').data('iso');

              coPassInfo = JSON.stringify({
                co_pass_name: document.getElementById("specialPreferenceName")?.value || "",
                co_pass_phone: countryCodeV + document.getElementById("specialPreferencePhone")?.value || "",
                co_pass_cc: countryCodeV || "",
                extra_options_text: extraOptionsText
              });
            }
          });
        }

        // Handle trip type specific parameters
        if (tripType === 'normal') {
          const selectedCategory = document.getElementById("categorySelect")?.selectedOptions[0];

          const stopsVal = document.getElementById('stopsInput')?.value || '[]';

          // Get drop location values
          const tripToLoc = document.querySelector('[name="trip_to_loc"]')?.value || '';
          const dropLat = document.querySelector('[name="dropLat"]')?.value || '';
          const dropLng = document.querySelector('[name="dropLng"]')?.value || '';

          const normalData = {
            trip_type: "normal",
            cat_name: selectedCategory?.text || '',
            trip_from_loc: document.querySelector('[name="trip_from_loc"]')?.value || '',
            trip_scheduled_pick_lat: document.querySelector('[name="pickupLat"]')?.value || '',
            trip_scheduled_pick_lng: document.querySelector('[name="pickupLng"]')?.value || '',
            trip_distance: document.querySelector('[name="trip_distance"]')?.value || '',
            trip_total_time: document.querySelector('[name="tripTime"]')?.value || '',
            category_id: selectedCategory?.value || '',
            trip_pay_amount: estData?.trip_pay_amount || '',
            tax_amt: estData?.tax_amt || '',
            trip_base_fare: estData?.trip_base_fare || '',
            trip_driver_commision: estData?.trip_driver_commision || '',
            trip_comp_commision: estData?.trip_comp_commision || '',
            est_data: JSON.stringify(estData) || '',
            stops: stopsVal,
            extra_options: extraOptions,
            co_pass_info: coPassInfo
          };

          // Only add drop location fields if they have valid values
          if (tripToLoc && tripToLoc.trim() !== '' && tripToLoc !== 'null' && tripToLoc !== 'undefined') {
            normalData.trip_to_loc = tripToLoc;
          }
          if (dropLat && dropLat.trim() !== '' && dropLat !== 'null' && dropLat !== 'undefined') {
            normalData.trip_scheduled_drop_lat = dropLat;
          }
          if (dropLng && dropLng.trim() !== '' && dropLng !== 'null' && dropLng !== 'undefined') {
            normalData.trip_scheduled_drop_lng = dropLng;
          }

          // ❌ Remove extra_options if empty
          if (!normalData.extra_options) {
            delete normalData.extra_options;
          }

          // ❌ Remove co_pass_info if empty
          if (!normalData.co_pass_info) {
            delete normalData.co_pass_info;
          }

          Object.entries(normalData).forEach(([key, value]) => {
            if (value !== undefined && value !== null) {
              formData.append(key, value);
            }
          });

        } else if (tripType === 'outstation') {
          const isRound = document.querySelector('[name="is_oneway"]')?.value === '0';

          const tripEndDateEl = document.querySelector('[name="trip_end_date"]');
          const tripEndDate = tripEndDateEl?.value?.trim();

          const stopsValOs = document.getElementById('stopsInput')?.value || '[]';
          const outstationData = {
            trip_type: "outstation",
            is_oneway: isRound ? "0" : "1",
            ...(tripEndDate ? { trip_end_date: tripEndDate } : {}),
            cat_name: document.querySelector('[name="category_id"]')?.selectedOptions[0]?.text || '',
            trip_from_loc: document.querySelector('[name="trip_from_loc"]')?.value || '',
            trip_to_loc: document.querySelector('[name="trip_to_loc"]')?.value || '',
            trip_scheduled_pick_lat: document.querySelector('[name="pickupLat"]')?.value || '',
            trip_scheduled_pick_lng: document.querySelector('[name="pickupLng"]')?.value || '',
            trip_scheduled_drop_lat: document.querySelector('[name="dropLat"]')?.value || '',
            trip_scheduled_drop_lng: document.querySelector('[name="dropLng"]')?.value || '',
            trip_distance: document.querySelector('[name="trip_distance"]')?.value || '',
            trip_total_time: document.querySelector('[name="tripTime"]')?.value || '',
            category_id: document.querySelector('[name="category_id"]')?.value || '',
            trip_pay_amount: estData?.trip_pay_amount || '',
            tax_amt: estData?.tax_amt || '',
            trip_base_fare: estData?.trip_base_fare || '',
            trip_driver_commision: estData?.trip_driver_commision || '',
            trip_comp_commision: estData?.trip_comp_commision || '',
            est_data: JSON.stringify(estData) || '',
            stops: stopsValOs
          };

          Object.entries(outstationData).forEach(([key, value]) => {
            if (value !== undefined && value !== null) {
              formData.append(key, value);
            }
          });

        } else if (tripType === 'rental') {
          const packageSelect = document.getElementById('rentalPackageSelect');
          const selectedPackage = packageSelect?.options[packageSelect.selectedIndex];

          const rentalData = {
            trip_type: "rental",
            pkg_cat_id: selectedPackage?.value || '',
            pkg_cat_name: selectedPackage?.parentElement.label || '',
            cat_name: selectedPackage?.dataset.categoryName || '',
            trip_from_loc: document.querySelector('[name="trip_from_loc"]')?.value || '',
            trip_scheduled_pick_lat: document.querySelector('[name="pickupLat"]')?.value || '',
            trip_scheduled_pick_lng: document.querySelector('[name="pickupLng"]')?.value || '',
            trip_distance: selectedPackage?.dataset.distance || '',
            trip_total_time: selectedPackage?.dataset.duration || '',
            category_id: selectedPackage?.dataset.categoryId || '',
            trip_pay_amount: selectedPackage?.dataset.price || '',
            trip_base_fare: selectedPackage?.dataset.baseFare || '',
            tax_amt: selectedPackage?.dataset.tax || '',
            est_data: JSON.stringify({
              package_id: selectedPackage?.value,
              package_name: selectedPackage?.parentElement.label,
              package_price: selectedPackage?.dataset.price,
              package_hours: selectedPackage?.dataset.duration,
              package_distance: selectedPackage?.dataset.distance,
              extra_km_fare: selectedPackage?.dataset.extraKmFare,
              extra_hrs_fare: selectedPackage?.dataset.extraHrsFare,
              night_charges: selectedPackage?.dataset.nightCharges
            })
          };

          Object.entries(rentalData).forEach(([key, value]) => {
            if (value !== undefined && value !== null) {
              formData.append(key, value);
            }
          });
        } else if (tripType === 'delivery') {
          const selectedCategory = document.getElementById("categorySelect")?.selectedOptions[0];

          deliveriesData = {
            trip_type: "delivery",
            delivery_notes: document.getElementById("deliveryNotes")?.value || "",
            cat_name: selectedCategory?.text || "",
            u_phone: document.getElementById("receiverPhone")?.value || "",
            c_code: (document.getElementById("receiverCountryCode")?.value || "").replace("+", ""), // must be without +
            u_fname: document.getElementById("receiverName")?.value || "",

            // Locations
            trip_from_loc: document.querySelector('[name="trip_from_loc"]')?.value || "",
            trip_to_loc: document.querySelector('[name="trip_to_loc"]')?.value || "",
            trip_search_result_addr: document.querySelector('[name="trip_to_loc"]')?.value || "",
            trip_searched_addr: document.querySelector('[name="trip_to_loc"]')?.value || "",

            trip_scheduled_pick_lat: document.querySelector('[name="pickupLat"]')?.value || "",
            trip_scheduled_pick_lng: document.querySelector('[name="pickupLng"]')?.value || "",
            trip_scheduled_drop_lat: document.querySelector('[name="dropLat"]')?.value || "",
            trip_scheduled_drop_lng: document.querySelector('[name="dropLng"]')?.value || "",

            trip_distance: document.querySelector('[name="trip_distance"]')?.value || "",
            trip_total_time: document.querySelector('[name="tripTime"]')?.value || "",
            trip_dunit: "<%= dunit %>",

            category_id: selectedCategory?.value || "",
            city_id: "<%= city_id %>",
            user_id: document.querySelector('[name="user_id"]')?.value || "",

            trip_currency: "<%= city_cur %>",
            seats: "1",

            // Price fields MUST be strings
            trip_pay_amount: String(estData?.trip_pay_amount || ""),
            tax_amt: String(estData?.tax_amt || ""),
            trip_base_fare: String(estData?.trip_base_fare || ""),
            trip_driver_commision: String(estData?.trip_driver_commision || ""),
            trip_comp_commision: String(estData?.trip_comp_commision || ""),

            // Required identical format
            est_data: JSON.stringify(estData) || "",

            trip_date: formattedGMTDate,
            trip_status: "request",
            is_share: "0",
            is_delivery: "1",
            is_ride_later: "0", // MUST be string "0" same as working CURL

            trip_pay_mode: document.querySelector('[name="trip_pay_mode"]')?.value || "Cash",

            pay_card: document.querySelector('[name="trip_pay_mode"]')?.value === "Card" ?
              localStorage.getItem("pm") : "",

            pickup_notes: document.getElementById("p_notes")?.value || ""
          };

          // Add comp_id for sub-admins
          if (parseInt(userGroupId) !== 1) {
            deliveriesData.comp_id = userCompanyId;
          }
        }

        function fileToBase64(file) {
          return new Promise((resolve, reject) => {
            const reader = new FileReader();
            reader.onload = () => resolve(reader.result.split(",")[1]); // Remove base64 prefix
            reader.onerror = reject;
            reader.readAsDataURL(file);
          });
        }

        async function submitDelivery() {
          const loaderOverlay = document.getElementById("loaderOverlay");
          if (loaderOverlay) loaderOverlay.style.display = "flex";

          const file = document.getElementById("deliveryImage")?.files[0];
          let base64Image = "";

          // Convert file to base64 (if exists)
          if (file) {
            base64Image = await fileToBase64(file);
          }

          console.log("Base64 Image Ready:", base64Image);

          // 🔥 1) STRINGIFY DELIVERY OBJECT
          const deliveryObjString = JSON.stringify(deliveriesData);

          // 🔥 2) ARRAY WITH STRING AS ITEMS
          const deliveriesArrayString = JSON.stringify([deliveryObjString]);

          // 🔥 3) FINAL BODY EXACTLY LIKE YOUR WORKING cURL
          const deliveryParams = {
            api_key: document.querySelector('[name="api_key"]')?.value,
            user_id: document.querySelector('[name="user_id"]')?.value,
            deliveries: deliveriesArrayString
          };

          console.log("Final Delivery Payload:", deliveryParams);

          // 🔥 4) SEND DELIVERY REQUEST
          const deliveryResponse = await fetch(`${NODE_API_BASE_URL}deliveryapi/addmultipledelivery`, {
            method: "POST",
            headers: {
              "Content-Type": "application/json"
            },
            body: JSON.stringify(deliveryParams)
          });

          const deliveryRes = await deliveryResponse.json();
          console.log("Courier API Response:", deliveryRes);

          // Extract trip_id and user_id from response
          const trip_id = deliveryRes?.data?.resDecrypt?.response[0]?.Trip[0]?.trip_id ||
            deliveryRes?.resDecrypt?.response[0]?.Trip[0]?.trip_id;
          const user_id = deliveryRes?.data?.resDecrypt?.response[0]?.Trip[0]?.user_id ||
            deliveryRes?.resDecrypt?.response[0]?.Trip[0]?.user_id;

          console.log("Extracted trip_id:", trip_id, "user_id:", user_id);

          if (!trip_id) {
            alert("Failed to create courier trip.");
            if (loaderOverlay) loaderOverlay.style.display = "none";
            return;
          }

          // 🔥 5) UPLOAD IMAGE AFTER TRIP IS CREATED (if image exists)
          if (base64Image && trip_id) {
            const imageParams = {
              ref_id: trip_id,
              api_key: document.querySelector('[name="api_key"]')?.value,
              ref_type: "Delivery",
              image_type: "jpg",
              upload_image: base64Image
            };

            console.log("Uploading Image Params:", imageParams);

            const uploadResponse = await fetch(
              `${NODE_API_BASE_URL}imageapi/addimage?api_key=${imageParams.api_key}`, {
              method: "POST",
              headers: {
                "Content-Type": "application/json"
              },
              body: JSON.stringify(imageParams)
            }
            );

            const uploadResJson = await uploadResponse.json();
            console.log("Image Upload Response:", uploadResJson);
          }

          // 🔥 6) HANDLE DRIVER ASSIGNMENT AND NOTIFICATIONS (moved outside image block)
          const driver_id = document.querySelector('[name="driver"]')?.value;
          console.log("Driver ID:", driver_id);

          if (driver_id && driver_id.trim() !== '') {
            console.log("Assigning trip to driver:", driver_id);
            // Assign trip to driver
            await fetch(`${NODE_API_BASE_URL}tripapi/tripassigned`, {
              method: 'POST',
              headers: {
                'Content-Type': 'application/json',
              },
              body: JSON.stringify({
                u_name: document.querySelector('[name="client_name"]')?.value,
                driver_id: driver_id,
                trip_id: trip_id,
                trip_status: "assigned",
                api_key: document.querySelector('[name="api_key"]')?.value,
                user_id: user_id,
                u_email: document.querySelector('[name="client_email"]')?.value
              })
            });

            // Send notification if needed
            const is_send_notification = document.getElementById("notificationCheckbox")?.checked ? "1" : "0";
            console.log("Send notification to assigned driver:", is_send_notification);

            if (is_send_notification == "1") {
              const select = document.querySelector("select[name='driver']");
              const selectedOption = select.options[select.selectedIndex];

              const notificationData = new FormData();
              notificationData.append('trip_id', trip_id);
              notificationData.append('is_share', '0');
              notificationData.append('trip_status', 'request');
              notificationData.append('api_key', document.querySelector('[name="api_key"]')?.value || '');
              notificationData.append((selectedOption.dataset.type?.toLowerCase() === "ios" ? "ios" : "android"),
                selectedOption.dataset.token || '');
              notificationData.append('content-available', '1');
              notificationData.append('message', 'Hey, You received a new Ride Request. Act Fast');
              notificationData.append('drivers', driver_id);

              await fetch(`${NODE_API_BASE_URL}tripapi/sendnotificationontripsave`, {
                method: 'POST',
                body: notificationData
              });
              console.log("Notification sent to assigned driver");
            }
          } else {
            const is_send_notification = document.getElementById("notificationCheckbox")?.checked ? "1" : "0";
            console.log("No driver assigned, checking if should send to nearby drivers:", is_send_notification);

            if (is_send_notification == "1") {
              // No driver assigned - send notification to all nearby drivers
              try {
                // Get pickup location coordinates
                const pickupLat = document.querySelector('[name="pickupLat"]')?.value;
                const pickupLng = document.querySelector('[name="pickupLng"]')?.value;
                const category_id = document.querySelector('[name="category_id"]')?.value ||
                  document.getElementById("categorySelect")?.value;

                if (!pickupLat || !pickupLng || !category_id) {
                  throw new Error("Missing required location or category information");
                }

                // Get nearby drivers
                const driversResponse = await fetch(`${NODE_API_BASE_URL}driverapi/getnearbydriverlistsVer2`, {
                  method: 'POST',
                  headers: {
                    'Content-Type': 'application/x-www-form-urlencoded',
                  },
                  body: new URLSearchParams({
                    api_key: document.querySelector('[name="api_key"]')?.value || '',
                    category_id: category_id,
                    lat: pickupLat,
                    lng: pickupLng,
                    miles: "<%= driver_radius %>",
                    city_id: "<%= city_id %>",
                    is_share: "0",
                    d_gender: document.getElementById("u_gender")?.value == "Male" ? "B" : document.getElementById("trip_gender")?.value,
                    seats: "1"
                  })
                });

                const driversData = await driversResponse.json();

                if (driversData.resDecrypt?.response?.length > 0) {
                  const nearbyDrivers = driversData.resDecrypt.response;
                  const androidTokens = [];
                  const iosTokens = [];
                  const driverIds = [];

                  // Organize tokens by device type
                  nearbyDrivers.forEach(driver => {
                    if (driver.d_device_token) {
                      if (driver.d_device_type?.toLowerCase() === 'ios') {
                        iosTokens.push(driver.d_device_token);
                      } else {
                        androidTokens.push(driver.d_device_token);
                      }
                      driverIds.push(driver.driver_id);
                    }
                  });

                  if (androidTokens.length > 0 || iosTokens.length > 0) {
                    // Prepare notification data
                    const notificationData = new FormData();
                    notificationData.append('trip_id', trip_id);
                    notificationData.append('is_share', '0');
                    notificationData.append('trip_status', 'request');
                    notificationData.append('api_key', document.querySelector('[name="api_key"]')?.value || '');

                    if (androidTokens.length > 0) {
                      notificationData.append('android', androidTokens.join(','));
                    }
                    if (iosTokens.length > 0) {
                      notificationData.append('ios', iosTokens.join(','));
                    }

                    notificationData.append('content-available', '1');
                    notificationData.append('message', 'Hey, You received a new Ride Request. Act Fast');
                    notificationData.append('drivers', driverIds.join(','));

                    // Send notification to all nearby drivers
                    await fetch(`${NODE_API_BASE_URL}tripapi/sendnotificationontripsave`, {
                      method: 'POST',
                      headers: {
                        'Content-Type': 'application/x-www-form-urlencoded'
                      },
                      body: new URLSearchParams(notificationData)
                    });
                  }
                }
              } catch (error) {
                console.error("Error sending notifications to nearby drivers:", error);
                await Swal.fire({
                  title: 'Warning',
                  text: 'Trip was saved but there was an issue notifying nearby drivers.',
                  icon: 'warning',
                  confirmButtonText: 'OK'
                });
              }
            }
          }

          // Show success message and redirect (moved outside image upload block)
          if (loaderOverlay) loaderOverlay.style.display = "none";

          await Swal.fire({
            title: 'Trip Saved!',
            text: 'The courier trip has been successfully saved.',
            icon: 'success',
            confirmButtonText: 'OK'
          });

          window.location.href = `/admin/trips`;
        }

        if (tripType === 'delivery') {
          await submitDelivery();
          return;
        }

        const loaderOverlay = document.getElementById("loaderOverlay");
        if (loaderOverlay) loaderOverlay.style.display = "flex";

        fetch(`${NODE_API_BASE_URL}tripapi/save`, {
          method: "POST",
          headers: {
            "Content-Type": "application/x-www-form-urlencoded",
          },
          body: new URLSearchParams(formData)
        })
          .then(res => res.json())
          .then(async data => {
            console.log("API Response:", data);
            if (loaderOverlay) loaderOverlay.style.display = "none";

            if (data.resDecrypt?.response) {
              const { trip_id, user_id } = data.resDecrypt.response;

              const driver_id = document.querySelector('[name="driver"]')?.value;
              if (driver_id) {
                // Assign trip to driver
                await fetch(`${NODE_API_BASE_URL}tripapi/tripassigned`, {
                  method: 'POST',
                  headers: {
                    'Content-Type': 'application/json',
                  },
                  body: JSON.stringify({
                    u_name: document.querySelector('[name="client_name"]')?.value,
                    driver_id: driver_id,
                    trip_id: trip_id,
                    trip_status: "assigned",
                    api_key: document.querySelector('[name="api_key"]')?.value,
                    user_id: user_id,
                    u_email: document.querySelector('[name="client_email"]')?.value
                  })
                });

                // Send notification if needed
                const is_send_notification = document.getElementById("notificationCheckbox")?.checked ? "1" : "0";
                if (is_send_notification == "1") {
                  const select = document.querySelector("select[name='driver']");
                  const selectedOption = select.options[select.selectedIndex];

                  const notificationData = new FormData();
                  notificationData.append('trip_id', trip_id);
                  notificationData.append('is_share', '0');
                  notificationData.append('trip_status', 'request');
                  notificationData.append('api_key', document.querySelector('[name="api_key"]')?.value || '');
                  notificationData.append((selectedOption.dataset.type?.toLowerCase() === "ios" ? "ios" : "android"),
                    selectedOption.dataset.token || '');
                  notificationData.append('content-available', '1');
                  notificationData.append('message', 'Hey, You received a new Ride Request. Act Fast');
                  notificationData.append('drivers', driver_id);

                  await fetch(`${NODE_API_BASE_URL}tripapi/sendnotificationontripsave`, {
                    method: 'POST',
                    headers: {
                      'Content-Type': 'application/x-www-form-urlencoded'
                    },
                    body: new URLSearchParams(notificationData)
                  });
                }
              } else {
                const is_send_notification = document.getElementById("notificationCheckbox")?.checked ? "1" : "0";
                console.log("No driver assigned, sending notifications to nearby drivers:", is_send_notification);

                if (is_send_notification == "1") {
                  // No driver assigned - send notification to all nearby drivers
                  try {
                    // Get pickup location coordinates
                    const pickupLat = document.querySelector('[name="pickupLat"]')?.value;
                    const pickupLng = document.querySelector('[name="pickupLng"]')?.value;
                    const category_id = document.querySelector('[name="category_id"]')?.value ||
                      document.getElementById("categorySelect")?.value;

                    if (!pickupLat || !pickupLng || !category_id) {
                      throw new Error("Missing required location or category information");
                    }

                    // Get nearby drivers
                    const driversResponse = await fetch(`${NODE_API_BASE_URL}driverapi/getnearbydriverlistsVer2`, {
                      method: 'POST',
                      headers: {
                        'Content-Type': 'application/x-www-form-urlencoded',
                      },
                      body: new URLSearchParams({
                        api_key: document.querySelector('[name="api_key"]')?.value || '',
                        category_id: category_id,
                        lat: pickupLat,
                        lng: pickupLng,
                        miles: "<%= driver_radius %>",
                        city_id: "<%= city_id %>",
                        is_share: "0",
                        d_gender: document.getElementById("u_gender")?.value == "Male" ? "B" : document.getElementById("trip_gender")?.value,
                        seats: "1"
                      })
                    });

                    const driversData = await driversResponse.json();

                    if (driversData.resDecrypt?.response?.length > 0) {
                      const nearbyDrivers = driversData.resDecrypt.response;
                      const androidTokens = [];
                      const iosTokens = [];
                      const driverIds = [];

                      // Organize tokens by device type
                      nearbyDrivers.forEach(driver => {
                        if (driver.d_device_token) {
                          if (driver.d_device_type?.toLowerCase() === 'ios') {
                            iosTokens.push(driver.d_device_token);
                          } else {
                            androidTokens.push(driver.d_device_token);
                          }
                          driverIds.push(driver.driver_id);
                        }
                      });

                      if (androidTokens.length > 0 || iosTokens.length > 0) {
                        // Prepare notification data
                        const notificationData = new FormData();
                        notificationData.append('trip_id', trip_id);
                        notificationData.append('is_share', '0');
                        notificationData.append('trip_status', 'request');
                        notificationData.append('api_key', document.querySelector('[name="api_key"]')?.value || '');

                        if (androidTokens.length > 0) {
                          notificationData.append('android', androidTokens.join(','));
                        }
                        if (iosTokens.length > 0) {
                          notificationData.append('ios', iosTokens.join(','));
                        }

                        notificationData.append('content-available', '1');
                        notificationData.append('message', 'Hey, You received a new Ride Request. Act Fast');
                        notificationData.append('drivers', driverIds.join(','));

                        // Send notification to all nearby drivers
                        await fetch(`${NODE_API_BASE_URL}tripapi/sendnotificationontripsave`, {
                          method: 'POST',
                          headers: {
                            'Content-Type': 'application/x-www-form-urlencoded'
                          },
                          body: new URLSearchParams(notificationData)
                        });
                      }
                    }
                  } catch (error) {
                    console.error("Error sending notifications to nearby drivers:", error);
                    await Swal.fire({
                      title: 'Warning',
                      text: 'Trip was saved but there was an issue notifying nearby drivers.',
                      icon: 'warning',
                      confirmButtonText: 'OK'
                    });
                  }
                }
              }
              await Swal.fire({
                title: 'Trip Saved!',
                text: 'The trip details have been successfully saved.',
                icon: 'success',
                confirmButtonText: 'OK'
              });

              window.location.href = `/admin/trips`;
            }
          })
          .catch(err => {
            if (loaderOverlay) loaderOverlay.style.display = "none";

            Swal.fire({
              title: 'Error!',
              text: err.message || 'There was a problem saving the trip. Please try again.',
              icon: 'error',
              confirmButtonText: 'OK'
            });
          })
          .finally(() => {
            disabledFields.forEach(el => el.setAttribute("disabled", true));
          });
      });
    </script>

    <script>
      let map, directionsService, directionsRenderer;

      function initMap() {
        directionsService = new google.maps.DirectionsService();
        let curr = "<%= city_cur %>";

        let pickupInput = document.getElementById("trip_from_loc");
        let dropInput = document.getElementById("trip_to_loc");

        if (!pickupInput || !dropInput) return;

        let pickupAutocomplete = new google.maps.places.Autocomplete(pickupInput);
        let dropAutocomplete = new google.maps.places.Autocomplete(dropInput);

        let pickupLat = document.getElementById("pickupLat");
        let pickupLng = document.getElementById("pickupLng");
        let dropLat = document.getElementById("dropLat");
        let dropLng = document.getElementById("dropLng");
        let tripDistance = document.getElementById("tripDistance");
        let tripTime = document.getElementById("tripTime");

        function extractLatLng(place, latElement, lngElement) {
          if (place.geometry && place.geometry.location) {
            latElement.value = place.geometry.location.lat();
            lngElement.value = place.geometry.location.lng();
          }
        }

        function applyNoDestinationFare() {
          if (tripDistance) tripDistance.value = "0";
          if (tripTime) tripTime.value = "0";
          const tripDistEl = document.getElementById("trip_distance");
          if (tripDistEl) tripDistEl.value = "0";

          const jobDistanceEl = document.getElementById("jobDistance");
          if (jobDistanceEl) jobDistanceEl.innerText = "0 <%=dunit%>";

          var jdi = document.getElementById("jobDistanceInput");
          if (jdi) jdi.value = "0";

          var jti = document.getElementById("jobTimeInput");
          if (jti) jti.value = "0";

          const jobTimeEl = document.getElementById("jobTime");
          if (jobTimeEl) jobTimeEl.innerText = "0 min";

          var polyEl = document.getElementById("polyline");
          if (polyEl) polyEl.value = "";

          var cat = document.getElementById("categorySelect");
          if (cat && cat.value) calculateFare(cat.value);
        }

        pickupAutocomplete.addListener("place_changed", function () {
          var place = pickupAutocomplete.getPlace();
          if (pickupLat && pickupLng) {
            extractLatLng(place, pickupLat, pickupLng);
          }
          if (dropLat && dropLat.value && dropLng && dropLng.value) {
            calculateRoute();
          } else {
            applyNoDestinationFare();
          }
        });

        dropAutocomplete.addListener("place_changed", function () {
          var place = dropAutocomplete.getPlace();
          if (dropLat && dropLng) {
            extractLatLng(place, dropLat, dropLng);
          }
          calculateRoute();
        });

        var MAX_STOPS = Math.max(1, parseInt("<%= typeof max_stops !== 'undefined' ? max_stops : 3 %>", 10) || 3);

        console.log("Max Stops Allowed:", MAX_STOPS);
        var stopsData = [];

        function syncStopsInput() {
          var el = document.getElementById("stopsInput");
          var complete = (stopsData || []).filter(function (s) { return s.lat && s.lng && s.address; });
          if (el) el.value = JSON.stringify(complete);
          if (pickupLat && pickupLat.value && pickupLng && pickupLng.value && dropLat && dropLat.value && dropLng && dropLng.value) {
            calculateRoute();
          }
        }

        function addStopRow(stop, index) {
          var list = document.getElementById("stopsList");
          if (!list) return;
          var wrap = document.createElement("div");
          wrap.className = "flex gap-2 items-center stop-row";
          wrap.dataset.stopIndex = index;
          var stopId = "Stop_" + (index + 1);
          wrap.innerHTML =
            '<div class="flex-1 relative">' +
            '<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none h-[42px]"><i class="fas fa-map-pin text-amber-500 text-sm"></i></div>' +
            '<input type="text" class="stop-address block w-full pl-9 pr-10 py-2 border border-gray-300 rounded-md text-sm" placeholder="Stop address" data-idx="' + index + '" value="' + (stop.address || '').replace(/"/g, '&quot;') + '">' +
            '</div>' +
            '<input type="hidden" class="stop-lat" data-idx="' + index + '" value="' + (stop.lat || '') + '">' +
            '<input type="hidden" class="stop-lng" data-idx="' + index + '" value="' + (stop.lng || '') + '">' +
            '<button type="button" class="remove-stop text-red-600 hover:text-red-800 p-2" data-idx="' + index + '" title="Remove stop"><i class="fas fa-trash-alt text-sm"></i></button>';
          list.appendChild(wrap);
          var inp = wrap.querySelector(".stop-address");
          var ac = new google.maps.places.Autocomplete(inp);
          ac.addListener("place_changed", function () {
            var p = ac.getPlace();
            if (p.geometry && p.geometry.location) {
              var idx = parseInt(inp.dataset.idx, 10);
              stopsData[idx] = stopsData[idx] || {};
              stopsData[idx].lat = String(p.geometry.location.lat());
              stopsData[idx].lng = String(p.geometry.location.lng());
              stopsData[idx].address = p.formatted_address || inp.value;
              stopsData[idx].status = "active";
              stopsData[idx].id = "Stop_" + (idx + 1);
              stopsData[idx].zoneId = stopsData[idx].zoneId || "0";
              wrap.querySelector(".stop-lat").value = stopsData[idx].lat;
              wrap.querySelector(".stop-lng").value = stopsData[idx].lng;
              syncStopsInput();
            }
          });
          var rm = wrap.querySelector(".remove-stop");
          rm.addEventListener("click", function () {
            wrap.remove();
            var rows = list.querySelectorAll(".stop-row");
            stopsData = [];
            for (var r = 0; r < rows.length; r++) {
              var row = rows[r];
              var addr = row.querySelector(".stop-address");
              var lat = row.querySelector(".stop-lat");
              var lng = row.querySelector(".stop-lng");
              if (addr && lat && lng) {
                stopsData.push({ status: "active", lat: lat.value, lng: lng.value, id: "Stop_" + (stopsData.length + 1), zoneId: "0", address: addr.value });
              }
              row.dataset.stopIndex = r;
              if (addr) addr.dataset.idx = r;
              if (lat) lat.dataset.idx = r;
              if (lng) lng.dataset.idx = r;
              var rb = row.querySelector(".remove-stop");
              if (rb) rb.dataset.idx = r;
            }
            syncStopsInput();
          });
        }

        document.getElementById("addStopBtn")?.addEventListener("click", function () {
          if (stopsData.length >= MAX_STOPS) {
            Swal.fire({ icon: "warning", title: "Max stops", text: "You can add at most " + MAX_STOPS + " stops." });
            return;
          }
          var stop = { status: "active", lat: "", lng: "", id: "Stop_" + (stopsData.length + 1), zoneId: "0", address: "" };
          stopsData.push(stop);
          addStopRow(stop, stopsData.length - 1);
          syncStopsInput();
        });

        const promoButton = document.getElementById("submitPromo");

        let p = false;
        if (promoButton) {
          promoButton.addEventListener("click", async function () {
            const promoCodeInput = document.getElementById("promo_code");
            const promoCode = promoCodeInput.value.trim();
            if (!promoCode) {
              Swal.fire({
                icon: "warning",
                title: "Missing Promo Code",
                text: "Please enter a promo code.",
              });
              return;
            }
            const categorySelect = document.getElementById("categorySelect");
            console.log("Selected Category ID:", categorySelect.value);
            p = true;
            calculateFare(categorySelect.value);
          });
        }

        function calculateRoute() {
          if (!pickupLat || !pickupLat.value || !pickupLng || !pickupLng.value || !dropLat || !dropLat.value || !dropLng || !dropLng.value) return;
          var waypoints = [];
          var validStops = (stopsData || []).filter(function (s) { return s.lat && s.lng; });
          for (var i = 0; i < validStops.length; i++) {
            waypoints.push({ location: new google.maps.LatLng(parseFloat(validStops[i].lat), parseFloat(validStops[i].lng)), stopover: true });
          }
          var request = {
            origin: new google.maps.LatLng(parseFloat(pickupLat.value), parseFloat(pickupLng.value)),
            destination: new google.maps.LatLng(parseFloat(dropLat.value), parseFloat(dropLng.value)),
            travelMode: google.maps.TravelMode.DRIVING,
          };
          if (waypoints.length) request.waypoints = waypoints;

          directionsService.route(request, function (result, status) {
            if (status !== google.maps.DirectionsStatus.OK) {
              console.error("Directions request failed: " + status);
              return;
            }
            var legs = (result.routes[0] && result.routes[0].legs) || [];
            var distance = 0, time = 0;
            for (var i = 0; i < legs.length; i++) {
              distance += (legs[i].distance && legs[i].distance.value) ? legs[i].distance.value : 0;
              time += (legs[i].duration && legs[i].duration.value) ? legs[i].duration.value : 0;
            }
            distance = distance / 1000;
            time = Math.ceil(time / 60);

            if (tripDistance) tripDistance.value = distance;
            if (tripTime) tripTime.value = time;

            const tripDistEl = document.getElementById("trip_distance");
            if (tripDistEl) tripDistEl.value = distance.toFixed(2);

            const jobDistEl = document.getElementById("jobDistance");
            if (jobDistEl) jobDistEl.innerText = distance.toFixed(2) + " <%=dunit%>";

            var jdi = document.getElementById("jobDistanceInput");
            if (jdi) jdi.value = distance.toFixed(2);

            const jobTimeEl = document.getElementById("jobTime");
            if (jobTimeEl) jobTimeEl.innerText = time + (time <= 1 ? " min" : " mins");

            var jti = document.getElementById("jobTimeInput");
            if (jti) jti.value = time;

            var ov = result.routes[0] && result.routes[0].overview_polyline;
            var polyStr = (ov && ov.points) ? ov.points : (typeof ov === "string" ? ov : "");

            const polylineEl = document.getElementById("polyline");
            if (polylineEl) polylineEl.value = polyStr;

            var cat = document.getElementById("categorySelect");
            if (cat && cat.value) calculateFare(cat.value);

            var pc = document.getElementById("promo_code");
            if (pc) pc.value = "";
          });
        }

        async function calculateFare(cat_id) {
          // Get all required form values
          const tripType = document.getElementById('tripType').value;
          const isShare = document.getElementById("is_share")?.value || "0";
          const seats = document.getElementById("seats")?.value || "1";
          const distance = document.getElementById("trip_distance")?.value || "0";
          const duration = document.getElementById("tripTime")?.value || "0";
          const pickupLat = document.getElementById("pickupLat")?.value;
          const pickupLng = document.getElementById("pickupLng")?.value;
          const dropLat = document.getElementById("dropLat")?.value;
          const dropLng = document.getElementById("dropLng")?.value;
          const pickupAddress = document.getElementById("trip_from_loc")?.value;
          const dropAddress = document.getElementById("trip_to_loc")?.value;
          const polyline = document.getElementById("polyline")?.value;
          const apiKey = document.getElementById("api_key")?.value;
          const userId = document.getElementById("user_id")?.value;
          const tripDate = (() => {
            const raw = document.getElementById("trip_datetime")?.value;
            if (!raw) return "";
            const d = new Date(raw);
            const yyyy = d.getUTCFullYear();
            const mm = String(d.getUTCMonth() + 1).padStart(2, '0');
            const dd = String(d.getUTCDate()).padStart(2, '0');
            const hh = String(d.getUTCHours()).padStart(2, '0');
            const mi = String(d.getUTCMinutes()).padStart(2, '0');
            const ss = String(d.getUTCSeconds()).padStart(2, '0');
            return `${yyyy}-${mm}-${dd} ${hh}:${mi}:${ss}`;
          })();
          const cityId = "<%= city_id %>";
          const promoCodeInput = document.getElementById("promo_code");
          const promo_code = promoCodeInput?.value.trim();
          const promoAmt = document.getElementById("promoAmtvalue");
          const isRound = tripType === 'outstation' ?
            (document.querySelector('[name="is_oneway"]')?.value === '0' ? 1 : 0) : 0;

          console.log("Calculating fare for trip type:", tripType);

          // Validate promo code first if it exists
          if (promo_code) {
            const loaderOverlay = document.getElementById("loaderOverlay");
            if (loaderOverlay) loaderOverlay.style.display = "flex";
            p = false;
            try {
              const validationResponse = await fetch(`${NODE_API_BASE_URL}promoapi/validatepromos`, {
                method: 'POST',
                headers: {
                  'Content-Type': 'application/json',
                },
                body: JSON.stringify({
                  promo_code: promo_code,
                  user_id: userId,
                  city_id: cityId,
                  api_key: apiKey
                })
              });

              if (!validationResponse.ok) {
                throw new Error('Promo code validation failed');
              }
              Swal.fire({
                icon: 'success',
                title: 'Promo code applied successfully',
              });
              const validationResult = await validationResponse.json();

              if (!validationResult.resDecrypt.code) {
                // Invalid promo code
                if (loaderOverlay) loaderOverlay.style.display = "none";

                Swal.fire({
                  icon: 'error',
                  title: 'Invalid Promo Code',
                  text: validationResult.resDecrypt.message || 'The promo code you entered is invalid or expired.'
                });
                if (promoCodeInput) promoCodeInput.value = ''; // Clear the invalid promo code
                return;
              }
            } catch (error) {
              console.error('Error validating promo code:', error);
              const loaderOverlay = document.getElementById("loaderOverlay");
              if (loaderOverlay) loaderOverlay.style.display = "none";
              Swal.fire({
                icon: 'error',
                title: 'Invalid Promo Code',
                text: 'The promo code you entered is invalid or expired.'
              });
              return;
            }
          }

          // For rental trips, we don't need drop location or distance calculations
          if (tripType === 'rental') {
            try {
              const data = {
                city_id: cityId
              };

              const response = await fetch(`${NODE_API_BASE_URL}tripapi/estimatepackagetripfare?api_key=${apiKey}&user_id=${userId}`, {
                method: "POST",
                headers: {
                  "Accept": "application/json",
                  "Content-Type": "application/json",
                },
                body: JSON.stringify(data)
              });

              const result = await response.json();
              const packages = result.resDecrypt.response;

              // Populate package dropdown grouped by duration
              const packageSelect = document.getElementById('rentalPackageSelect');
              if (packageSelect) {
                packageSelect.innerHTML = '<option value="">Select Rental Package</option>';

                // Group packages by duration first
                const packagesByDuration = {};
                packages.forEach(pkg => {
                  if (!packagesByDuration[pkg.name]) {
                    packagesByDuration[pkg.name] = [];
                  }
                  packagesByDuration[pkg.name].push(...pkg.Category);
                });

                // Create optgroups for each duration
                for (const [durationName, categories] of Object.entries(packagesByDuration)) {
                  const optgroup = document.createElement('optgroup');
                  optgroup.label = durationName;

                  categories.forEach(category => {
                    const option = document.createElement('option');
                    option.value = category.pkg_cat_id;
                    option.textContent = `${category.cat_name} - ${category.est.trip_pay_amount}`;
                    option.dataset.price = category.est.trip_pay_amount;
                    option.dataset.baseFare = category.est.trip_base_fare;
                    option.dataset.tax = category.est.tax_amt;
                    option.dataset.duration = durationName.match(/\d+/)[0];
                    option.dataset.distance = durationName.match(/\d+/g)[1];
                    option.dataset.categoryId = category.category_id;
                    option.dataset.categoryName = category.cat_name;
                    option.dataset.extraKmFare = category.est.pkg_category.extra_km_fare || 0;
                    option.dataset.extraHrsFare = category.est.pkg_category.extra_hrs_fare || 0;
                    option.dataset.nightCharges = category.est.pkg_category.night_charges || 0;

                    optgroup.appendChild(option);
                  });

                  packageSelect.appendChild(optgroup);
                }
              }
              const loaderOverlay = document.getElementById("loaderOverlay");
              if (loaderOverlay) loaderOverlay.style.display = "none";

              return;
            } catch (error) {
              const loaderOverlay = document.getElementById("loaderOverlay");
              if (loaderOverlay) loaderOverlay.style.display = "none";

              console.error('Error fetching rental packages:', error);
              Swal.fire({
                icon: 'error',
                title: 'Error',
                text: 'Failed to load rental packages. Please try again.'
              });
              return;
            }
          }

          // For normal and outstation trips, proceed with normal validation
          if (tripType !== 'outstation' && tripType !== 'normal' && tripType !== 'delivery') {
            const loaderOverlay = document.getElementById("loaderOverlay");
            if (loaderOverlay) loaderOverlay.style.display = "none";

            return;
          }

          if (!pickupLat || !pickupLng) {
            const loaderOverlay = document.getElementById("loaderOverlay");
            if (loaderOverlay) loaderOverlay.style.display = "none";

            console.error("Missing required location data", pickupLat, pickupLng, dropLat, dropLng);
            return;
          }

          try {
            let response, data;

            if (tripType === 'outstation') {
              // Call outstation fare estimate API
              const outstationData = {
                trip_scheduled_pick_lat: pickupLat,
                trip_scheduled_pick_lng: pickupLng,
                trip_scheduled_drop_lat: dropLat,
                trip_scheduled_drop_lng: dropLng,
                trip_distance: distance,
                trip_hrs: duration,
                trip_from_loc: pickupAddress,
                trip_to_loc: dropAddress,
                trip_date: tripDate,
                api_key: apiKey,
                city_id: cityId,
                user_id: userId,
                is_round: isRound,
                polyline: polyline || "0",
                promo_code: promo_code || undefined
              };

              response = await fetch(`${NODE_API_BASE_URL}tripapi/estimateoutstationtripfare`, {
                method: 'POST',
                headers: {
                  'Content-Type': 'application/json',
                },
                body: JSON.stringify(outstationData)
              });

              if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);

              const result = await response.json();
              data = result.resDecrypt.response[cat_id];
            } else if (tripType === 'normal') {
              // Call normal fare estimate API
              const formData = new FormData();
              formData.append('is_share', isShare);
              formData.append('trip_scheduled_pick_lng', pickupLng);
              formData.append('trip_scheduled_pick_lat', pickupLat);
              formData.append('trip_from_loc', pickupAddress);

              // Only append drop location fields if they have valid values (not empty, null, or undefined)
              if (dropAddress && dropAddress.trim() !== '' && dropAddress !== 'null' && dropAddress !== 'undefined') {
                formData.append('trip_to_loc', dropAddress);
              }
              if (dropLat && dropLat !== '' && dropLat !== 'null' && dropLat !== 'undefined' && dropLat !== null && dropLat !== undefined) {
                formData.append('trip_scheduled_drop_lat', dropLat);
              }
              if (dropLng && dropLng !== '' && dropLng !== 'null' && dropLng !== 'undefined' && dropLng !== null && dropLng !== undefined) {
                formData.append('trip_scheduled_drop_lng', dropLng);
              }

              formData.append('polyline', polyline || '0');
              formData.append('seats', seats);
              formData.append('trip_distance', distance);
              formData.append('api_key', apiKey);
              formData.append('user_id', userId);
              formData.append('trip_date', tripDate);
              formData.append('trip_hrs', duration);
              formData.append('city_id', cityId);
              if (promo_code) formData.append('promo_code', promo_code);

              response = await fetch(`${NODE_API_BASE_URL}tripapi/estimatetripfare`, {
                method: 'POST',
                headers: {
                  'Content-Type': 'application/x-www-form-urlencoded'
                },
                body: new URLSearchParams(formData)
              });

              if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);

              const result = await response.json();
              data = result.resDecrypt.response[cat_id];
            } else {
              // delivery: reuse normal estimate API
              const formData = new FormData();
              formData.append('is_share', isShare);
              formData.append('trip_scheduled_pick_lng', pickupLng);
              formData.append('trip_scheduled_pick_lat', pickupLat);
              formData.append('trip_from_loc', pickupAddress);

              // Only append drop location fields if they have valid values (not empty, null, or undefined)
              if (dropAddress && dropAddress.trim() !== '' && dropAddress !== 'null' && dropAddress !== 'undefined') {
                formData.append('trip_to_loc', dropAddress);
              }
              if (dropLat && dropLat !== '' && dropLat !== 'null' && dropLat !== 'undefined' && dropLat !== null && dropLat !== undefined) {
                formData.append('trip_scheduled_drop_lat', dropLat);
              }
              if (dropLng && dropLng !== '' && dropLng !== 'null' && dropLng !== 'undefined' && dropLng !== null && dropLng !== undefined) {
                formData.append('trip_scheduled_drop_lng', dropLng);
              }

              formData.append('polyline', polyline || '0');
              formData.append('seats', seats);
              formData.append('trip_distance', distance);
              formData.append('api_key', apiKey);
              formData.append('user_id', userId);
              formData.append('trip_date', tripDate);
              formData.append('trip_hrs', duration);
              formData.append('city_id', cityId);
              if (promo_code) formData.append('promo_code', promo_code);

              response = await fetch(`${NODE_API_BASE_URL}tripapi/estimatetripfare`, {
                method: 'POST',
                headers: {
                  'Content-Type': 'application/x-www-form-urlencoded'
                },
                body: new URLSearchParams(formData)
              });

              if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);

              const result = await response.json();
              data = result.resDecrypt.response[cat_id];
            }

            console.log("API Response:", data);

            if (data) {
              const loaderOverlay = document.getElementById("loaderOverlay");
              if (loaderOverlay) loaderOverlay.style.display = "none";

              // Handle promo code display if applicable
              if (promo_code && data.trip_pay_amount_without_promo) {
                // promoAmt.innerText = ` ${data.trip_pay_amount_without_promo?.toFixed(2)}`;
              }

              estData = data;

              // Get category details (for normal trips)
              let selectedCategory = document.getElementById("categorySelect")?.selectedOptions[0];
              let base_price = tripType === 'outstation' ?
                (data.trip_base_fare || 0) :
                (parseFloat(selectedCategory?.getAttribute("data-base")) || 0);

              let fare_per_km = tripType === 'outstation' ?
                (data.trip_fare_per_km || 0) :
                (parseFloat(selectedCategory?.getAttribute("data-fare-per-km")) || 0);

              let fare_per_min = tripType === 'outstation' ?
                (data.trip_fare_per_min || 0) :
                (parseFloat(selectedCategory?.getAttribute("data-fare-per-min")) || 0);

              // Update the fare display with API response
              const basePriceEl = document.getElementById("basePrice");
              if (basePriceEl) basePriceEl.innerText = `<%= city_cur %>${Number(base_price).toFixed(2)}`;

              const basePriceInputEl = document.getElementById("basePriceInput");
              if (basePriceInputEl) basePriceInputEl.value = base_price;

              const farePerKMEl = document.getElementById("farePerKM");
              if (farePerKMEl) farePerKMEl.innerText = `<%= city_cur %>${Number(fare_per_km).toFixed(2)}`;

              const farePerKMInputEl = document.getElementById("farePerKMInput");
              if (farePerKMInputEl) farePerKMInputEl.value = fare_per_km;

              const farePerMinEl = document.getElementById("farePerMin");
              if (farePerMinEl) farePerMinEl.innerText = `<%= city_cur %>${Number(fare_per_min).toFixed(2)}`;

              const farePerMinInputEl = document.getElementById("farePerMinInput");
              if (farePerMinInputEl) farePerMinInputEl.value = fare_per_min;

              const totalFareInputEl = document.getElementById("totalFareInput");
              if (totalFareInputEl) totalFareInputEl.innerText = data.trip_base_fare || '0.00';

              const promoAmountEl = document.getElementById("promoAmount");
              if (promoAmountEl) promoAmountEl.innerText = `-<%= city_cur %>${Number(data.trip_promo_amt)?.toFixed(2) || '0.00'}`;

              const promoAmountInputEl = document.getElementById("promoAmountInput");
              if (promoAmountInputEl) promoAmountInputEl.value = data.trip_promo_amt || '0.00';

              const promoAmtEl = document.getElementById("promo_amt");
              if (promoAmtEl) promoAmtEl.value = data.trip_promo_amt || '0.00';

              const gstAmountEl = document.getElementById("gstAmount");
              if (gstAmountEl) gstAmountEl.innerText = `<%= city_cur %>${Number(data.tax_amt)?.toFixed(2) || '0.00'}`;

              const gstAmountInputEl = document.getElementById("gstAmountInput");
              if (gstAmountInputEl) gstAmountInputEl.value = data.tax_amt || '0.00';

              const adjustAmountEl = document.getElementById("adjustAmount");
              if (adjustAmountEl) adjustAmountEl.innerText = `<%= city_cur %>${Number(data.adjust_amt)?.toFixed(2) || '0.00'}`;

              const adjustAmountInputEl = document.getElementById("adjustAmountInput");
              if (adjustAmountInputEl) adjustAmountInputEl.value = data.adjust_amt || '0.00';

              const grossFareEl = document.getElementById("grossFare");
              if (grossFareEl) grossFareEl.innerText = `<%= city_cur %>${Number(data.trip_pay_amount)?.toFixed(2) || '0.00'}`;

              const grossFareInputEl = document.getElementById("grossFareInput");
              if (grossFareInputEl) grossFareInputEl.value = data.trip_pay_amount || '0.00';

              const tripPayAmountEl = document.getElementById("trip_pay_amount");
              if (tripPayAmountEl) tripPayAmountEl.value = data.trip_pay_amount || '0.00';

              const cur = "<%= city_cur %>";

              const calcBaseFareEl = document.getElementById("calcBaseFare");
              if (calcBaseFareEl) calcBaseFareEl.innerText = `${cur}${Number(base_price).toFixed(2)}`;

              const calcFarePerKMEl = document.getElementById("calcFarePerKM");
              if (calcFarePerKMEl) calcFarePerKMEl.innerText = `<%= city_cur %>${Number(fare_per_km).toFixed(2)}`;

              const calcDistanceKMEl = document.getElementById("calcDistanceKM");
              if (calcDistanceKMEl) calcDistanceKMEl.innerText = Number(distance).toFixed(2);

              const calcFarePerMinEl = document.getElementById("calcFarePerMin");
              if (calcFarePerMinEl) calcFarePerMinEl.innerText = `${cur}${Number(fare_per_min || 0).toFixed(2)}`;

              const calcJobTimeEl = document.getElementById("calcJobTime");
              if (calcJobTimeEl) calcJobTimeEl.innerText = Number(duration).toFixed(0);

              const calcGstRateEl = document.getElementById("calcGstRate");
              if (calcGstRateEl) calcGstRateEl.innerText = Number(<%= city_tax %> || 0).toFixed(0);

              // TJF
              const calcTjfFormulaEl = document.getElementById("calcTjfFormula");
              if (calcTjfFormulaEl) {
                calcTjfFormulaEl.innerText = `(${Number(base_price)} + (${Number(fare_per_km)} × ${distance}) + (${Number(fare_per_min)} × ${duration}))`;
              }

              const calcTjfValueEl = document.getElementById("calcTjfValue");
              if (calcTjfValueEl) calcTjfValueEl.innerText = `${cur}${Number(data.trip_base_fare).toFixed(2)}`;

              // Promo
              const calcPromoEl = document.getElementById("calcPromo");
              if (calcPromoEl) calcPromoEl.innerText = `${cur}${Number(data.trip_promo_amt || 0).toFixed(2)}`;

              // TJF After Promo
              const calcTjfAfterPromoFormulaEl = document.getElementById("calcTjfAfterPromoFormula");
              if (calcTjfAfterPromoFormulaEl) {
                calcTjfAfterPromoFormulaEl.innerText = `(${Number(data.trip_pay_amount_without_promo).toFixed(2)} - ${Number(data.trip_promo_amt).toFixed(2)})`;
              }

              const calcTjfAfterPromoValueEl = document.getElementById("calcTjfAfterPromoValue");
              if (calcTjfAfterPromoValueEl) calcTjfAfterPromoValueEl.innerText = `${cur}${Number(data.trip_pay_amount).toFixed(2)}`;

              // GST
              const calcGstFormulaEl = document.getElementById("calcGstFormula");
              if (calcGstFormulaEl) {
                calcGstFormulaEl.innerText = `((${Number(data.trip_base_fare).toFixed(2)} × ${Number(<%= city_tax %> || 0)}) / 100)`;
              }

              const calcGstValueEl = document.getElementById("calcGstValue");
              if (calcGstValueEl) calcGstValueEl.innerText = `${cur}${Number(data.tax_amt || 0).toFixed(2)}`;

              // Gross Fare
              const calcGrossFareFormulaEl = document.getElementById("calcGrossFareFormula");
              if (calcGrossFareFormulaEl) {
                calcGrossFareFormulaEl.innerText = `(${Number(data.trip_base_fare).toFixed(2)} + ${Number(data.tax_amt).toFixed(2)})`;
              }

              const calcGrossFareValueEl = document.getElementById("calcGrossFareValue");
              if (calcGrossFareValueEl) calcGrossFareValueEl.innerText = `${cur}${Number(data.trip_pay_amount).toFixed(2)}`;

            } else {
              console.error("No fare data returned from API");
              Swal.fire({
                icon: 'warning',
                title: 'Category Not Available',
                text: 'This category is not available currently. Please choose another.',
                confirmButtonText: 'Okay'
              });
            }
          } catch (error) {
            if (promo_code) {
              Swal.fire({
                icon: 'error',
                title: 'Invalid Promo Code',
              });
            }

            console.error('Error calculating fare:', error);
            const loaderOverlay = document.getElementById("loaderOverlay");
            if (loaderOverlay) loaderOverlay.style.display = "none";
          }
        }

        // Add this event listener for package selection changes
        document.getElementById('rentalPackageSelect')?.addEventListener('change', function () {
          const selectedOption = this.options[this.selectedIndex];

          if (selectedOption.value) {
            const packagePrice = parseFloat(selectedOption.dataset.price);
            const baseFare = parseFloat(selectedOption.dataset.baseFare);
            const taxAmount = parseFloat(selectedOption.dataset.tax);

            // Update fare display with package details
            const basePriceEl = document.getElementById('basePrice');
            if (basePriceEl) basePriceEl.innerText = ` ${curr}${Number(baseFare).toFixed(2)}`;

            const basePriceInputEl = document.getElementById('basePriceInput');
            if (basePriceInputEl) basePriceInputEl.value = baseFare;

            const farePerKMEl = document.getElementById('farePerKM');
            if (farePerKMEl) farePerKMEl.innerText = ` ${curr}0.00`;

            const farePerKMInputEl = document.getElementById('farePerKMInput');
            if (farePerKMInputEl) farePerKMInputEl.value = 0;

            const farePerMinEl = document.getElementById('farePerMin');
            if (farePerMinEl) farePerMinEl.innerText = ` ${curr}0.00`;

            const farePerMinInputEl = document.getElementById('farePerMinInput');
            if (farePerMinInputEl) farePerMinInputEl.value = 0;

            const totalFareEl = document.getElementById('totalFare');
            if (totalFareEl) totalFareEl.innerText = ` ${curr}${Number(baseFare).toFixed(2)}`;

            const gstAmountEl = document.getElementById('gstAmount');
            if (gstAmountEl) gstAmountEl.innerText = ` ${curr}${Number(taxAmount).toFixed(2)}`;

            const gstAmountInputEl = document.getElementById('gstAmountInput');
            if (gstAmountInputEl) gstAmountInputEl.value = taxAmount;

            const grossFareEl = document.getElementById('grossFare');
            if (grossFareEl) grossFareEl.innerText = ` ${curr}${Number(packagePrice).toFixed(2)}`;

            const grossFareInputEl = document.getElementById('grossFareInput');
            if (grossFareInputEl) grossFareInputEl.value = packagePrice;

            const tripPayAmountEl = document.getElementById('trip_pay_amount');
            if (tripPayAmountEl) tripPayAmountEl.value = packagePrice;

            // Store package details in estData for form submission
            estData = {
              package_id: selectedOption.value,
              package_name: selectedOption.parentElement.label,
              category_id: selectedOption.dataset.categoryId,
              category_name: selectedOption.dataset.categoryName,
              package_price: packagePrice,
              trip_base_fare: baseFare,
              tax_amt: taxAmount,
              trip_pay_amount: packagePrice,
              duration_hours: selectedOption.dataset.duration,
              distance_km: selectedOption.dataset.distance,
              extra_km_fare: selectedOption.dataset.extraKmFare,
              extra_hrs_fare: selectedOption.dataset.extraHrsFare,
              night_charges: selectedOption.dataset.nightCharges
            };
          }
        });

        function manualFareCalculation() {
          // Fallback manual calculation if API fails
          let selectedCategory = document.getElementById("categorySelect")?.selectedOptions[0];
          if (!selectedCategory) return;

          let basePrice = parseFloat(selectedCategory.getAttribute("data-base")) || 0;
          let farePerKM = parseFloat(selectedCategory.getAttribute("data-fare-per-km")) || 0;
          let farePerMin = parseFloat(selectedCategory.getAttribute("data-fare-per-min")) || 0;
          let distance = parseFloat(tripDistance?.value) || 0;
          let time = parseFloat(tripTime?.value) || 0;

          let totalFare = basePrice + (distance * farePerKM) + (time * farePerMin);

          // Preserve existing promo amount if it exists
          let promoAmount = parseFloat(document.getElementById("promoAmountInput")?.value) || 0;

          let gstAmount = totalFare * 0.10;
          let adjustAmount = 0;
          let grossFare = totalFare - promoAmount + gstAmount + adjustAmount;

          const basePriceEl = document.getElementById("basePrice");
          if (basePriceEl) basePriceEl.innerText = `${curr} ${Number(basePrice).toFixed(2)}`;

          const basePriceInputEl = document.getElementById("basePriceInput");
          if (basePriceInputEl) basePriceInputEl.value = `${Number(basePrice).toFixed(2)}`;

          const farePerKMEl = document.getElementById("farePerKM");
          if (farePerKMEl) farePerKMEl.innerText = `${curr} ${Number(farePerKM).toFixed(2)}`;

          const farePerKMInputEl = document.getElementById("farePerKMInput");
          if (farePerKMInputEl) farePerKMInputEl.value = `${Number(farePerKM).toFixed(2)}`;

          const farePerMinEl = document.getElementById("farePerMin");
          if (farePerMinEl) farePerMinEl.innerText = `${curr} ${Number(farePerMin).toFixed(2)}`;

          const farePerMinInputEl = document.getElementById("farePerMinInput");
          if (farePerMinInputEl) farePerMinInputEl.value = `${Number(farePerMin).toFixed(2)}`;

          const totalFareEl = document.getElementById("totalFare");
          if (totalFareEl) totalFareEl.innerText = `${curr} ${Number(totalFare).toFixed(2)}`;

          const promoAmountEl = document.getElementById("promoAmount");
          if (promoAmountEl) promoAmountEl.innerText = `-${curr} ${Number(promoAmount).toFixed(2)}`;

          const promoAmountInputEl = document.getElementById("promoAmountInput");
          if (promoAmountInputEl) promoAmountInputEl.value = `${Number(promoAmount).toFixed(2)}`;

          const gstAmountEl = document.getElementById("gstAmount");
          if (gstAmountEl) gstAmountEl.innerText = `${curr} ${Number(gstAmount).toFixed(2)}`;

          const gstAmountInputEl = document.getElementById("gstAmountInput");
          if (gstAmountInputEl) gstAmountInputEl.value = `${Number(gstAmount).toFixed(2)}`;

          const adjustAmountEl = document.getElementById("adjustAmount");
          if (adjustAmountEl) adjustAmountEl.innerText = `${curr} ${Number(adjustAmount).toFixed(2)}`;

          const adjustAmountInputEl = document.getElementById("adjustAmountInput");
          if (adjustAmountInputEl) adjustAmountInputEl.value = `${Number(adjustAmount).toFixed(2)}`;

          const grossFareEl = document.getElementById("grossFare");
          if (grossFareEl) grossFareEl.innerText = `${Number(grossFare).toFixed(2)}`;

          const grossFareInputEl = document.getElementById("grossFareInput");
          if (grossFareInputEl) grossFareInputEl.value = `${Number(grossFare).toFixed(2)}`;

          const tripPayAmountEl = document.getElementById("trip_pay_amount");
          if (tripPayAmountEl) tripPayAmountEl.value = `${Number(grossFare).toFixed(2)}`;
        }

        document.getElementById("categorySelect")?.addEventListener("change", function () {
          const categorySelect = document.getElementById("categorySelect");
          console.log("Selected Category ID:", categorySelect.value);

          if (categorySelect.value) {
            let catId = categorySelect.value;
            checkIsExtrasCategoryFlag(catId);
          }

          calculateFare(categorySelect.value);
        });
      }
    </script>

    <%- footer %>

      <!-- Google Maps API script - moved to the end -->
      <script
        src="https://maps.googleapis.com/maps/api/js?key=<%= GoogleMapsAPIKey %>&libraries=places&callback=initMap"
        async defer></script>