{"id":98,"date":"2026-01-07T09:58:58","date_gmt":"2026-01-07T09:58:58","guid":{"rendered":"https:\/\/naqqal.net\/?page_id=98"},"modified":"2026-07-18T11:50:47","modified_gmt":"2026-07-18T11:50:47","slug":"elementor-98","status":"publish","type":"page","link":"https:\/\/naqqal.net\/en\/elementor-98\/","title":{"rendered":"flatbed"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"98\" class=\"elementor elementor-98\">\n\t\t\t\t<div class=\"elementor-element elementor-element-97a3b71 e-flex e-con-boxed e-con e-parent\" data-id=\"97a3b71\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-2ceadb6 elementor-widget elementor-widget-heading\" data-id=\"2ceadb6\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">\u062e\u062f\u0645\u0629 \u0633\u0637\u062d\u0629 <\/h2>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-649104a elementor-widget__width-inherit elementor-widget elementor-widget-html\" data-id=\"649104a\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<div class=\"nq-tow-location-wrap\" dir=\"rtl\">\r\n\r\n  <!-- \u0645\u0648\u0642\u0639 \u0627\u0644\u0633\u064a\u0627\u0631\u0629 -->\r\n  <div class=\"nq-location-header\">\r\n    <strong>\u062d\u062f\u062f \u0645\u0648\u0642\u0639 \u0627\u0644\u0633\u064a\u0627\u0631\u0629<\/strong>\r\n\r\n    <div class=\"nq-location-actions\">\r\n      <input\r\n        id=\"towPickupSearch\"\r\n        type=\"text\"\r\n        placeholder=\"\u0627\u0628\u062d\u062b \u062f\u0627\u062e\u0644 \u0627\u0644\u0631\u064a\u0627\u0636: \u062d\u064a\u060c \u0634\u0627\u0631\u0639 \u0623\u0648 \u0645\u0639\u0644\u0645\"\r\n        autocomplete=\"off\"\r\n      \/>\r\n\r\n      <button type=\"button\" id=\"tow_my_loc\" class=\"nq-btn nq-btn-dark\">\r\n        \ud83d\udccd \u0645\u0648\u0642\u0639\u064a \u0627\u0644\u0622\u0646\r\n      <\/button>\r\n\r\n      <button type=\"button\" id=\"togglePickup\" class=\"nq-btn\">\r\n        \u062a\u0643\u0628\u064a\u0631\r\n      <\/button>\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <div id=\"towPickupResults\" class=\"nq-search-results\"><\/div>\r\n\r\n  <div id=\"pickupMap\" class=\"nq-map\"><\/div>\r\n\r\n\r\n  <!-- \u0645\u0648\u0642\u0639 \u0627\u0644\u062a\u0633\u0644\u064a\u0645 -->\r\n  <div class=\"nq-location-header nq-dropoff-header\">\r\n    <strong>\u062d\u062f\u062f \u0645\u0648\u0642\u0639 \u0627\u0644\u062a\u0633\u0644\u064a\u0645<\/strong>\r\n\r\n    <div class=\"nq-location-actions\">\r\n      <input\r\n        id=\"towDropoffSearch\"\r\n        type=\"text\"\r\n        placeholder=\"\u0627\u0628\u062d\u062b \u062f\u0627\u062e\u0644 \u0627\u0644\u0631\u064a\u0627\u0636: \u062d\u064a\u060c \u0634\u0627\u0631\u0639 \u0623\u0648 \u0645\u0639\u0644\u0645\"\r\n        autocomplete=\"off\"\r\n      \/>\r\n\r\n      <button type=\"button\" id=\"tow_dropoff_my_loc\" class=\"nq-btn nq-btn-dark\">\r\n        \ud83d\udccd \u0645\u0648\u0642\u0639\u064a \u0627\u0644\u0622\u0646\r\n      <\/button>\r\n\r\n      <button type=\"button\" id=\"toggleDropoff\" class=\"nq-btn\">\r\n        \u062a\u0643\u0628\u064a\u0631\r\n      <\/button>\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <div id=\"towDropoffResults\" class=\"nq-search-results\"><\/div>\r\n\r\n  <div id=\"dropoffMap\" class=\"nq-map\"><\/div>\r\n\r\n\r\n  <!-- \u0627\u0644\u0633\u0639\u0631 -->\r\n  <div id=\"priceBox\" class=\"nq-price-box\">\r\n    <div class=\"nq-price-placeholder\">\r\n      \u0627\u062e\u062a\u0631 \u0645\u0648\u0642\u0639 \u0627\u0644\u0633\u064a\u0627\u0631\u0629 \u0648\u0645\u0648\u0642\u0639 \u0627\u0644\u062a\u0633\u0644\u064a\u0645 \u0644\u0627\u062d\u062a\u0633\u0627\u0628 \u0627\u0644\u0645\u0633\u0627\u0641\u0629 \u0648\u0627\u0644\u0625\u062c\u0645\u0627\u0644\u064a.\r\n    <\/div>\r\n  <\/div>\r\n\r\n<\/div>\r\n\r\n<style>\r\n.nq-tow-location-wrap {\r\n  width: 100%;\r\n  font-family: inherit;\r\n}\r\n\r\n.nq-location-header {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: space-between;\r\n  gap: 12px;\r\n  flex-wrap: wrap;\r\n  margin-bottom: 10px;\r\n}\r\n\r\n.nq-location-header strong {\r\n  font-size: 16px;\r\n  color: #0f172a;\r\n}\r\n\r\n.nq-dropoff-header {\r\n  margin-top: 24px;\r\n}\r\n\r\n.nq-location-actions {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 8px;\r\n  flex-wrap: wrap;\r\n}\r\n\r\n.nq-location-actions input {\r\n  width: 320px;\r\n  max-width: 100%;\r\n  height: 44px;\r\n  padding: 0 14px;\r\n  border: 1px solid #dbe2ea;\r\n  border-radius: 12px;\r\n  background: #fff;\r\n  color: #0f172a;\r\n  font-size: 14px;\r\n  outline: none;\r\n  transition: 0.2s ease;\r\n}\r\n\r\n.nq-location-actions input:focus {\r\n  border-color: #0b5cff;\r\n  box-shadow: 0 0 0 3px rgba(11, 92, 255, 0.10);\r\n}\r\n\r\n.nq-btn {\r\n  min-height: 42px;\r\n  padding: 8px 14px;\r\n  border: 1px solid #dbe2ea;\r\n  border-radius: 11px;\r\n  background: #fff;\r\n  color: #111827;\r\n  font-weight: 700;\r\n  cursor: pointer;\r\n  transition: 0.2s ease;\r\n}\r\n\r\n.nq-btn:hover {\r\n  background: #f8fafc;\r\n  border-color: #b8c3d1;\r\n}\r\n\r\n.nq-btn-dark {\r\n  background: #111827;\r\n  color: #fff;\r\n  border-color: #111827;\r\n}\r\n\r\n.nq-btn-dark:hover {\r\n  background: #1f2937;\r\n}\r\n\r\n.nq-map {\r\n  width: 100%;\r\n  height: 240px;\r\n  border: 1px solid #e2e8f0;\r\n  border-radius: 16px;\r\n  overflow: hidden;\r\n  background: #f1f5f9;\r\n  transition: height 0.25s ease;\r\n}\r\n\r\n.nq-search-results {\r\n  display: none;\r\n  position: relative;\r\n  z-index: 20;\r\n  max-width: 620px;\r\n  max-height: 280px;\r\n  overflow-y: auto;\r\n  padding: 6px;\r\n  margin: -3px 0 12px;\r\n  border: 1px solid #e2e8f0;\r\n  border-radius: 14px;\r\n  background: #fff;\r\n  box-shadow: 0 14px 35px rgba(15, 23, 42, 0.10);\r\n}\r\n\r\n.nq-search-result-item {\r\n  padding: 11px 12px;\r\n  border-radius: 10px;\r\n  cursor: pointer;\r\n  transition: background 0.2s ease;\r\n}\r\n\r\n.nq-search-result-item:hover {\r\n  background: #f1f5f9;\r\n}\r\n\r\n.nq-result-title {\r\n  color: #0f172a;\r\n  font-size: 14px;\r\n  font-weight: 800;\r\n}\r\n\r\n.nq-result-address {\r\n  margin-top: 4px;\r\n  color: #64748b;\r\n  font-size: 12px;\r\n  line-height: 1.6;\r\n}\r\n\r\n.nq-price-box {\r\n  margin-top: 18px;\r\n  padding: 16px;\r\n  border: 1px solid #dbe4ef;\r\n  border-radius: 16px;\r\n  background: linear-gradient(180deg, #f8fbff, #fff);\r\n}\r\n\r\n.nq-price-placeholder {\r\n  color: #64748b;\r\n  text-align: center;\r\n  font-weight: 700;\r\n}\r\n\r\n.nq-price-loading {\r\n  padding: 14px;\r\n  color: #0b5cff;\r\n  text-align: center;\r\n  font-weight: 800;\r\n}\r\n\r\n.nq-price-error {\r\n  padding: 13px 15px;\r\n  border: 1px solid #fecaca;\r\n  border-radius: 12px;\r\n  background: #fef2f2;\r\n  color: #b91c1c;\r\n  font-weight: 700;\r\n}\r\n\r\n.nq-price-grid {\r\n  display: grid;\r\n  grid-template-columns: repeat(4, minmax(0, 1fr));\r\n  gap: 10px;\r\n}\r\n\r\n.nq-price-item {\r\n  padding: 13px;\r\n  border: 1px solid #e2e8f0;\r\n  border-radius: 13px;\r\n  background: #fff;\r\n}\r\n\r\n.nq-price-item span {\r\n  display: block;\r\n  margin-bottom: 7px;\r\n  color: #64748b;\r\n  font-size: 12px;\r\n}\r\n\r\n.nq-price-item strong {\r\n  display: block;\r\n  color: #0f172a;\r\n  font-size: 17px;\r\n}\r\n\r\n.nq-price-total {\r\n  border-color: #bfdbfe;\r\n  background: #eff6ff;\r\n}\r\n\r\n.nq-price-total strong {\r\n  color: #0b5cff;\r\n  font-size: 20px;\r\n}\r\n\r\n.nq-price-note {\r\n  margin-top: 12px;\r\n  color: #64748b;\r\n  font-size: 12px;\r\n  line-height: 1.7;\r\n}\r\n\r\n@media (max-width: 800px) {\r\n  .nq-location-header {\r\n    align-items: stretch;\r\n  }\r\n\r\n  .nq-location-actions {\r\n    width: 100%;\r\n  }\r\n\r\n  .nq-location-actions input {\r\n    width: 100%;\r\n  }\r\n\r\n  .nq-location-actions .nq-btn {\r\n    flex: 1;\r\n  }\r\n\r\n  .nq-price-grid {\r\n    grid-template-columns: repeat(2, minmax(0, 1fr));\r\n  }\r\n\r\n  .nq-map {\r\n    height: 260px;\r\n  }\r\n}\r\n\r\n@media (max-width: 480px) {\r\n  .nq-price-grid {\r\n    grid-template-columns: 1fr;\r\n  }\r\n}\r\n<\/style>\r\n\r\n<link\r\n  href=\"https:\/\/api.mapbox.com\/mapbox-gl-js\/v2.15.0\/mapbox-gl.css\"\r\n  rel=\"stylesheet\"\r\n\/>\r\n\r\n<script src=\"https:\/\/api.mapbox.com\/mapbox-gl-js\/v2.15.0\/mapbox-gl.js\"><\/script>\r\n\r\n<script>\r\n(function () {\r\n  'use strict';\r\n\r\n  \/*\r\n   * \u0625\u0639\u062f\u0627\u062f\u0627\u062a \u062e\u062f\u0645\u0629 \u0627\u0644\u0633\u0637\u062d\u0629\r\n   * \u0633\u0639\u0631 \u0627\u0644\u062e\u062f\u0645\u0629 \u0627\u0644\u0623\u0633\u0627\u0633\u064a \u064a\u064f\u0642\u0631\u0623 \u0645\u0646 WooCommerce \u0639\u0628\u0631 \u0643\u0648\u062f \u0627\u0644\u0631\u0628\u0637 PHP.\r\n   *\/\r\n  const PRICE_PER_KM = 5;\r\n\r\n  function getServicePrice() {\r\n    const injected = Number(\r\n      window.NAQQAL_TOW_PRODUCT &&\r\n      window.NAQQAL_TOW_PRODUCT.price\r\n    );\r\n\r\n    if (Number.isFinite(injected) && injected > 0) {\r\n      return injected;\r\n    }\r\n\r\n    const fallbackField = document.querySelector(\r\n      '[name=\"tow_base_price\"],' +\r\n      '[name=\"service_base_price\"],' +\r\n      '[name=\"product_price\"]'\r\n    );\r\n\r\n    if (fallbackField) {\r\n      const parsed = parseFloat(\r\n        String(fallbackField.value || '')\r\n          .replace(\/,\/g, '')\r\n          .replace(\/[^\\d.-]\/g, '')\r\n      );\r\n\r\n      if (Number.isFinite(parsed) && parsed > 0) {\r\n        return parsed;\r\n      }\r\n    }\r\n\r\n    return 0;\r\n  }\r\n\r\n  \/*\r\n   * \u062d\u062f\u0648\u062f \u0645\u062f\u064a\u0646\u0629 \u0627\u0644\u0631\u064a\u0627\u0636\r\n   *\/\r\n  const RIYADH_BOUNDS = {\r\n    west: 46.25,\r\n    south: 24.35,\r\n    east: 47.25,\r\n    north: 25.20\r\n  };\r\n\r\n  const RIYADH_CENTER = [46.6753, 24.7136];\r\n\r\n  const MAPBOX_TOKEN =\r\n    'pk.eyJ1IjoiZmFyZXMyNDkiLCJhIjoiY21qcjBzOXJxMW1lYzNjc2U2c2liNHMybiJ9.z84AG3zlC7J3FKvAL-yDHg';\r\n\r\n  if (typeof mapboxgl === 'undefined') {\r\n    console.error('Mapbox GL JS \u063a\u064a\u0631 \u0645\u062d\u0645\u0651\u0644.');\r\n    return;\r\n  }\r\n\r\n  const towRoot = document.querySelector('.nq-tow-location-wrap');\r\n\r\n  if (!towRoot || towRoot.dataset.nqReady === '1') {\r\n    return;\r\n  }\r\n\r\n  towRoot.dataset.nqReady = '1';\r\n  mapboxgl.accessToken = MAPBOX_TOKEN;\r\n\r\n  const priceBox = document.getElementById('priceBox');\r\n\r\n  const initialServicePrice = getServicePrice();\r\n\r\n  if (priceBox && initialServicePrice > 0) {\r\n    priceBox.innerHTML =\r\n      '<div class=\"nq-price-grid\">' +\r\n        '<div class=\"nq-price-item\">' +\r\n          '<span>\u0627\u0644\u0645\u0633\u0627\u0641\u0629<\/span>' +\r\n          '<strong>\u2014 \u0643\u0645<\/strong>' +\r\n        '<\/div>' +\r\n        '<div class=\"nq-price-item\">' +\r\n          '<span>\u0633\u0639\u0631 \u0627\u0644\u062e\u062f\u0645\u0629<\/span>' +\r\n          '<strong>' + initialServicePrice.toFixed(2) + ' \u0631\u064a\u0627\u0644<\/strong>' +\r\n        '<\/div>' +\r\n        '<div class=\"nq-price-item\">' +\r\n          '<span>\u0631\u0633\u0648\u0645 \u0627\u0644\u0645\u0633\u0627\u0641\u0629<\/span>' +\r\n          '<strong>0.00 \u0631\u064a\u0627\u0644<\/strong>' +\r\n        '<\/div>' +\r\n        '<div class=\"nq-price-item nq-price-total\">' +\r\n          '<span>\u0627\u0644\u0625\u062c\u0645\u0627\u0644\u064a \u0627\u0644\u0646\u0647\u0627\u0626\u064a<\/span>' +\r\n          '<strong>' + initialServicePrice.toFixed(2) + ' \u0631\u064a\u0627\u0644<\/strong>' +\r\n        '<\/div>' +\r\n      '<\/div>' +\r\n      '<div class=\"nq-price-note\">' +\r\n        '\u062d\u062f\u062f \u0627\u0644\u0645\u0648\u0642\u0639\u064a\u0646 \u0644\u064a\u062a\u0645 \u0627\u062d\u062a\u0633\u0627\u0628 \u0631\u0633\u0648\u0645 \u0627\u0644\u0645\u0633\u0627\u0641\u0629 \u0648\u0625\u0638\u0647\u0627\u0631 \u0627\u0644\u0625\u062c\u0645\u0627\u0644\u064a \u0627\u0644\u0646\u0647\u0627\u0626\u064a.' +\r\n      '<\/div>';\r\n  }\r\n\r\n  let pickupMarker = null;\r\n  let dropoffMarker = null;\r\n\r\n  let pickupPoint = null;\r\n  let dropoffPoint = null;\r\n\r\n  let priceRequestNumber = 0;\r\n\r\n\r\n  \/*\r\n   * \u0627\u0644\u062a\u062d\u0642\u0642 \u0645\u0646 \u0623\u0646 \u0627\u0644\u0645\u0648\u0642\u0639 \u062f\u0627\u062e\u0644 \u0627\u0644\u0631\u064a\u0627\u0636\r\n   *\/\r\n  function insideRiyadh(lat, lng) {\r\n    lat = Number(lat);\r\n    lng = Number(lng);\r\n\r\n    return (\r\n      Number.isFinite(lat) &&\r\n      Number.isFinite(lng) &&\r\n      lng >= RIYADH_BOUNDS.west &&\r\n      lng <= RIYADH_BOUNDS.east &&\r\n      lat >= RIYADH_BOUNDS.south &&\r\n      lat <= RIYADH_BOUNDS.north\r\n    );\r\n  }\r\n\r\n\r\n  \/*\r\n   * \u0631\u0633\u0627\u0644\u0629 \u0631\u0641\u0636 \u0627\u0644\u0645\u0648\u0642\u0639\r\n   *\/\r\n  function showOutsideRiyadhMessage() {\r\n    alert(\r\n      '\u0627\u0644\u062e\u062f\u0645\u0629 \u0645\u062a\u0627\u062d\u0629 \u062f\u0627\u062e\u0644 \u0645\u062f\u064a\u0646\u0629 \u0627\u0644\u0631\u064a\u0627\u0636 \u0641\u0642\u0637.\\n' +\r\n      '\u064a\u0631\u062c\u0649 \u062a\u062d\u062f\u064a\u062f \u0645\u0648\u0642\u0639 \u062a\u062d\u0645\u064a\u0644 \u0648\u0625\u0646\u0632\u0627\u0644 \u062f\u0627\u062e\u0644 \u0646\u0637\u0627\u0642 \u0627\u0644\u0631\u064a\u0627\u0636.'\r\n    );\r\n  }\r\n\r\n\r\n  \/*\r\n   * \u062d\u0645\u0627\u064a\u0629 \u0627\u0644\u0646\u0635 \u0627\u0644\u0645\u0639\u0631\u0648\u0636 \u062f\u0627\u062e\u0644 HTML\r\n   *\/\r\n  function escapeHtml(value) {\r\n    return String(value || '')\r\n      .replace(\/&\/g, '&amp;')\r\n      .replace(\/<\/g, '&lt;')\r\n      .replace(\/>\/g, '&gt;')\r\n      .replace(\/\"\/g, '&quot;')\r\n      .replace(\/'\/g, '&#039;');\r\n  }\r\n\r\n\r\n  \/*\r\n   * \u062a\u0642\u0631\u064a\u0628 \u0627\u0644\u0633\u0639\u0631 \u0625\u0644\u0649 \u0645\u0646\u0632\u0644\u062a\u064a\u0646\r\n   *\/\r\n  function roundMoney(value) {\r\n    return Math.round((Number(value) + Number.EPSILON) * 100) \/ 100;\r\n  }\r\n\r\n\r\n  \/*\r\n   * \u062a\u062d\u062f\u064a\u062b \u062d\u0642\u0648\u0644 \u0627\u0644\u0646\u0645\u0648\u0630\u062c\r\n   *\/\r\n  function setFieldValue(fieldName, value) {\r\n    const fields = document.querySelectorAll(\r\n      `input[name=\"${fieldName}\"],\r\n       textarea[name=\"${fieldName}\"],\r\n       select[name=\"${fieldName}\"]`\r\n    );\r\n\r\n    if (!fields.length) {\r\n      return false;\r\n    }\r\n\r\n    fields.forEach(function (field) {\r\n      field.value = value;\r\n\r\n      field.dispatchEvent(\r\n        new Event('input', {\r\n          bubbles: true\r\n        })\r\n      );\r\n\r\n      field.dispatchEvent(\r\n        new Event('change', {\r\n          bubbles: true\r\n        })\r\n      );\r\n    });\r\n\r\n    return true;\r\n  }\r\n\r\n\r\n  \/*\r\n   * \u062a\u062d\u062f\u064a\u062b \u0639\u062f\u0629 \u0623\u0633\u0645\u0627\u0621 \u0645\u062d\u062a\u0645\u0644\u0629 \u0644\u0646\u0641\u0633 \u0627\u0644\u0642\u064a\u0645\u0629\r\n   *\/\r\n  function setPossibleFields(fieldNames, value) {\r\n    fieldNames.forEach(function (fieldName) {\r\n      setFieldValue(fieldName, value);\r\n    });\r\n  }\r\n\r\n\r\n  \/*\r\n   * \u062a\u0641\u0631\u064a\u063a \u0628\u064a\u0627\u0646\u0627\u062a \u0627\u0644\u0633\u0639\u0631\r\n   *\/\r\n  function resetPriceFields() {\r\n    setPossibleFields(['distance_km'], '');\r\n    setPossibleFields(['distance_fee', 'distance_price'], '');\r\n    setPossibleFields(\r\n      ['base_service_price', 'service_base_price', 'tow_base_price'],\r\n      ''\r\n    );\r\n\r\n    setPossibleFields(\r\n      ['service_price', 'distance_fee', 'distance_price', 'extra_fee'],\r\n      ''\r\n    );\r\n\r\n    setPossibleFields(\r\n      ['total_price', 'final_price', 'tow_total'],\r\n      ''\r\n    );\r\n  }\r\n\r\n\r\n  \/*\r\n   * \u062c\u0644\u0628 \u0627\u0633\u0645 \u0627\u0644\u0639\u0646\u0648\u0627\u0646\r\n   *\/\r\n  async function getAddress(lat, lng) {\r\n    try {\r\n      const url =\r\n        'https:\/\/api.mapbox.com\/geocoding\/v5\/mapbox.places\/' +\r\n        encodeURIComponent(lng + ',' + lat) +\r\n        '.json' +\r\n        '?access_token=' + encodeURIComponent(mapboxgl.accessToken) +\r\n        '&language=ar' +\r\n        '&country=sa' +\r\n        '&types=address,poi,place,locality,neighborhood';\r\n\r\n      const response = await fetch(url);\r\n\r\n      if (!response.ok) {\r\n        return '';\r\n      }\r\n\r\n      const data = await response.json();\r\n\r\n      if (!data.features || !data.features.length) {\r\n        return '';\r\n      }\r\n\r\n      return data.features[0].place_name || '';\r\n    } catch (error) {\r\n      console.error('Reverse geocoding error:', error);\r\n      return '';\r\n    }\r\n  }\r\n\r\n\r\n  \/*\r\n   * \u062d\u0633\u0627\u0628 \u0645\u0633\u0627\u0641\u0629 \u0627\u0644\u0642\u064a\u0627\u062f\u0629\r\n   *\/\r\n  async function getDistanceKm(pickup, dropoff) {\r\n    const url =\r\n      'https:\/\/api.mapbox.com\/directions\/v5\/mapbox\/driving\/' +\r\n      pickup.lng + ',' + pickup.lat + ';' +\r\n      dropoff.lng + ',' + dropoff.lat +\r\n      '?geometries=geojson' +\r\n      '&overview=false' +\r\n      '&steps=false' +\r\n      '&access_token=' + encodeURIComponent(mapboxgl.accessToken);\r\n\r\n    const response = await fetch(url);\r\n\r\n    if (!response.ok) {\r\n      throw new Error('\u0641\u0634\u0644 \u0627\u0644\u0627\u062a\u0635\u0627\u0644 \u0628\u062e\u062f\u0645\u0629 \u062d\u0633\u0627\u0628 \u0627\u0644\u0645\u0633\u0627\u0641\u0629.');\r\n    }\r\n\r\n    const data = await response.json();\r\n\r\n    if (!data.routes || !data.routes.length) {\r\n      return null;\r\n    }\r\n\r\n    return Number(data.routes[0].distance) \/ 1000;\r\n  }\r\n\r\n\r\n  \/*\r\n   * \u0625\u0646\u0634\u0627\u0621 \u0627\u0644\u062e\u0631\u064a\u0637\u0629\r\n   *\/\r\n  function createMap(containerId) {\r\n    const map = new mapboxgl.Map({\r\n      container: containerId,\r\n      style: 'mapbox:\/\/styles\/mapbox\/streets-v12',\r\n      center: RIYADH_CENTER,\r\n      zoom: 11,\r\n      minZoom: 9,\r\n      maxZoom: 18,\r\n      maxBounds: [\r\n        [RIYADH_BOUNDS.west, RIYADH_BOUNDS.south],\r\n        [RIYADH_BOUNDS.east, RIYADH_BOUNDS.north]\r\n      ]\r\n    });\r\n\r\n    map.addControl(\r\n      new mapboxgl.NavigationControl(),\r\n      'top-right'\r\n    );\r\n\r\n    return map;\r\n  }\r\n\r\n\r\n  const pickupMap = createMap('pickupMap');\r\n  const dropoffMap = createMap('dropoffMap');\r\n\r\n\r\n  \/*\r\n   * \u0639\u0631\u0636 \u062d\u0627\u0644\u0629 \u062d\u0633\u0627\u0628 \u0627\u0644\u0633\u0639\u0631\r\n   *\/\r\n  function showPriceLoading() {\r\n    if (!priceBox) {\r\n      return;\r\n    }\r\n\r\n    priceBox.innerHTML =\r\n      '<div class=\"nq-price-loading\">' +\r\n      '\u062c\u0627\u0631\u064a \u062d\u0633\u0627\u0628 \u0627\u0644\u0645\u0633\u0627\u0641\u0629 \u0648\u0631\u0633\u0648\u0645 \u0627\u0644\u062e\u062f\u0645\u0629...' +\r\n      '<\/div>';\r\n  }\r\n\r\n\r\n  \/*\r\n   * \u0639\u0631\u0636 \u062e\u0637\u0623 \u0627\u0644\u0633\u0639\u0631\r\n   *\/\r\n  function showPriceError(message) {\r\n    if (!priceBox) {\r\n      return;\r\n    }\r\n\r\n    priceBox.innerHTML =\r\n      '<div class=\"nq-price-error\">' +\r\n      escapeHtml(message) +\r\n      '<\/div>';\r\n  }\r\n\r\n\r\n  \/*\r\n   * \u0639\u0631\u0636 \u062a\u0641\u0627\u0635\u064a\u0644 \u0627\u0644\u0633\u0639\u0631\r\n   *\/\r\n  function renderPriceDetails(\r\n    distanceKm,\r\n    distanceFee,\r\n    servicePrice,\r\n    totalPrice\r\n  ) {\r\n    if (!priceBox) {\r\n      return;\r\n    }\r\n\r\n    priceBox.innerHTML = `\r\n      <div class=\"nq-price-grid\">\r\n\r\n        <div class=\"nq-price-item\">\r\n          <span>\u0627\u0644\u0645\u0633\u0627\u0641\u0629<\/span>\r\n          <strong>${distanceKm.toFixed(1)} \u0643\u0645<\/strong>\r\n        <\/div>\r\n\r\n        <div class=\"nq-price-item\">\r\n          <span>\u0633\u0639\u0631 \u0627\u0644\u062e\u062f\u0645\u0629<\/span>\r\n          <strong>${servicePrice.toFixed(2)} \u0631\u064a\u0627\u0644<\/strong>\r\n        <\/div>\r\n\r\n        <div class=\"nq-price-item\">\r\n          <span>\u0631\u0633\u0648\u0645 \u0627\u0644\u0645\u0633\u0627\u0641\u0629<\/span>\r\n          <strong>${distanceFee.toFixed(2)} \u0631\u064a\u0627\u0644<\/strong>\r\n        <\/div>\r\n\r\n        <div class=\"nq-price-item nq-price-total\">\r\n          <span>\u0627\u0644\u0625\u062c\u0645\u0627\u0644\u064a \u0627\u0644\u0646\u0647\u0627\u0626\u064a<\/span>\r\n          <strong>${totalPrice.toFixed(2)} \u0631\u064a\u0627\u0644<\/strong>\r\n        <\/div>\r\n\r\n      <\/div>\r\n\r\n      <div class=\"nq-price-note\">\r\n        \u064a\u062a\u0645 \u0627\u062d\u062a\u0633\u0627\u0628 \u0631\u0633\u0648\u0645 \u0627\u0644\u0645\u0633\u0627\u0641\u0629 \u0628\u0642\u064a\u0645\u0629\r\n        <b>${PRICE_PER_KM} \u0631\u064a\u0627\u0644 \u0644\u0643\u0644 \u0643\u064a\u0644\u0648\u0645\u062a\u0631<\/b>\r\n        \u0628\u0627\u0644\u0625\u0636\u0627\u0641\u0629 \u0625\u0644\u0649 \u0633\u0639\u0631 \u062e\u062f\u0645\u0629 \u0627\u0644\u0633\u0637\u062d\u0629 \u0627\u0644\u0645\u0633\u062c\u0644 \u0641\u064a WooCommerce.\r\n      <\/div>\r\n    `;\r\n  }\r\n\r\n\r\n  \/*\r\n   * \u062d\u0633\u0627\u0628 \u0627\u0644\u0633\u0639\u0631\r\n   *\/\r\n  async function updateDistanceAndPrice() {\r\n    if (!pickupPoint || !dropoffPoint) {\r\n      resetPriceFields();\r\n      return;\r\n    }\r\n\r\n    if (\r\n      !insideRiyadh(pickupPoint.lat, pickupPoint.lng) ||\r\n      !insideRiyadh(dropoffPoint.lat, dropoffPoint.lng)\r\n    ) {\r\n      showPriceError('\u064a\u062c\u0628 \u0623\u0646 \u064a\u0643\u0648\u0646 \u0645\u0648\u0642\u0639 \u0627\u0644\u0633\u064a\u0627\u0631\u0629 \u0648\u0627\u0644\u0625\u0646\u0632\u0627\u0644 \u062f\u0627\u062e\u0644 \u0627\u0644\u0631\u064a\u0627\u0636.');\r\n      resetPriceFields();\r\n      return;\r\n    }\r\n\r\n    const currentRequest = ++priceRequestNumber;\r\n\r\n    showPriceLoading();\r\n\r\n    try {\r\n      const distance = await getDistanceKm(\r\n        pickupPoint,\r\n        dropoffPoint\r\n      );\r\n\r\n      if (currentRequest !== priceRequestNumber) {\r\n        return;\r\n      }\r\n\r\n      if (\r\n        distance === null ||\r\n        !Number.isFinite(distance) ||\r\n        distance <= 0\r\n      ) {\r\n        showPriceError(\r\n          '\u062a\u0639\u0630\u0651\u0631 \u062d\u0633\u0627\u0628 \u0627\u0644\u0645\u0633\u0627\u0641\u0629. \u064a\u0631\u062c\u0649 \u0625\u0639\u0627\u062f\u0629 \u062a\u062d\u062f\u064a\u062f \u0627\u0644\u0645\u0648\u0642\u0639\u064a\u0646.'\r\n        );\r\n\r\n        resetPriceFields();\r\n        return;\r\n      }\r\n\r\n      const servicePrice = getServicePrice();\r\n\r\n      if (!Number.isFinite(servicePrice) || servicePrice <= 0) {\r\n        showPriceError(\r\n          '\u0644\u0645 \u064a\u062a\u0645 \u0627\u0644\u0639\u062b\u0648\u0631 \u0639\u0644\u0649 \u0633\u0639\u0631 \u0645\u0646\u062a\u062c \u0627\u0644\u0633\u0637\u062d\u0629. \u0641\u0639\u0651\u0644 \u0643\u0648\u062f \u0631\u0628\u0637 \u0633\u0639\u0631 WooCommerce \u0623\u0648\u0644\u064b\u0627.'\r\n        );\r\n\r\n        resetPriceFields();\r\n        return;\r\n      }\r\n\r\n      const distanceKm = Math.round(distance * 10) \/ 10;\r\n      const distanceFee = roundMoney(distance * PRICE_PER_KM);\r\n      const totalPrice = roundMoney(\r\n        servicePrice + distanceFee\r\n      );\r\n\r\n      \/*\r\n       * \u062d\u0641\u0638 \u0627\u0644\u0642\u064a\u0645 \u0641\u064a \u062d\u0642\u0648\u0644 \u0627\u0644\u0646\u0645\u0648\u0630\u062c.\r\n       * WooCommerce \u064a\u0636\u064a\u0641 \u0633\u0639\u0631 \u0627\u0644\u0645\u0646\u062a\u062c \u0627\u0644\u0623\u0633\u0627\u0633\u064a \u062a\u0644\u0642\u0627\u0626\u064a\u064b\u0627\u060c\r\n       * \u0644\u0630\u0644\u0643 service_price \u064a\u062d\u062a\u0648\u064a \u0631\u0633\u0648\u0645 \u0627\u0644\u0645\u0633\u0627\u0641\u0629 \u0641\u0642\u0637 \u0644\u0645\u0646\u0639 \u062a\u0636\u0627\u0639\u0641 \u0627\u0644\u0633\u0639\u0631.\r\n       *\/\r\n      setPossibleFields(\r\n        ['distance_km'],\r\n        distanceKm\r\n      );\r\n\r\n      setPossibleFields(\r\n        ['distance_fee', 'distance_price', 'extra_fee'],\r\n        distanceFee\r\n      );\r\n\r\n      setPossibleFields(\r\n        ['base_service_price', 'service_base_price', 'tow_base_price'],\r\n        servicePrice\r\n      );\r\n\r\n      setPossibleFields(\r\n        ['service_price'],\r\n        distanceFee\r\n      );\r\n\r\n      setPossibleFields(\r\n        ['total_price', 'final_price', 'tow_total'],\r\n        totalPrice\r\n      );\r\n\r\n      renderPriceDetails(\r\n        distanceKm,\r\n        distanceFee,\r\n        servicePrice,\r\n        totalPrice\r\n      );\r\n\r\n    } catch (error) {\r\n      console.error('Distance calculation error:', error);\r\n\r\n      showPriceError(\r\n        '\u062a\u0639\u0630\u0651\u0631 \u062d\u0633\u0627\u0628 \u0627\u0644\u0645\u0633\u0627\u0641\u0629 \u062d\u0627\u0644\u064a\u064b\u0627. \u062d\u0627\u0648\u0644 \u0645\u0631\u0629 \u0623\u062e\u0631\u0649.'\r\n      );\r\n\r\n      resetPriceFields();\r\n    }\r\n  }\r\n\r\n\r\n  \/*\r\n   * \u062a\u0637\u0628\u064a\u0642 \u0645\u0648\u0642\u0639 \u0627\u0644\u0633\u064a\u0627\u0631\u0629\r\n   *\/\r\n  async function applyPickup(lat, lng, label) {\r\n    lat = Number(lat);\r\n    lng = Number(lng);\r\n\r\n    if (!insideRiyadh(lat, lng)) {\r\n      showOutsideRiyadhMessage();\r\n      return false;\r\n    }\r\n\r\n    if (pickupMarker) {\r\n      pickupMarker.remove();\r\n    }\r\n\r\n    pickupMarker = new mapboxgl.Marker({\r\n      color: '#1769d2',\r\n      draggable: true\r\n    })\r\n      .setLngLat([lng, lat])\r\n      .addTo(pickupMap);\r\n\r\n    pickupPoint = {\r\n      lat: lat,\r\n      lng: lng\r\n    };\r\n\r\n    setFieldValue('pickup_lat', lat);\r\n    setFieldValue('pickup_lng', lng);\r\n\r\n    pickupMap.easeTo({\r\n      center: [lng, lat],\r\n      zoom: 15,\r\n      duration: 700\r\n    });\r\n\r\n    const address = await getAddress(lat, lng);\r\n    const finalAddress = address || label || '\u0645\u0648\u0642\u0639 \u062f\u0627\u062e\u0644 \u0627\u0644\u0631\u064a\u0627\u0636';\r\n\r\n    setFieldValue('pickup_address', finalAddress);\r\n    setFieldValue('pickup_address_view', finalAddress);\r\n\r\n    const pickupSearch =\r\n      document.getElementById('towPickupSearch');\r\n\r\n    if (pickupSearch) {\r\n      pickupSearch.value = finalAddress;\r\n    }\r\n\r\n    pickupMarker.on('dragend', function () {\r\n      const point = pickupMarker.getLngLat();\r\n\r\n      if (!insideRiyadh(point.lat, point.lng)) {\r\n        pickupMarker.setLngLat([\r\n          pickupPoint.lng,\r\n          pickupPoint.lat\r\n        ]);\r\n\r\n        showOutsideRiyadhMessage();\r\n        return;\r\n      }\r\n\r\n      applyPickup(point.lat, point.lng, '');\r\n    });\r\n\r\n    updateDistanceAndPrice();\r\n\r\n    return true;\r\n  }\r\n\r\n\r\n  \/*\r\n   * \u062a\u0637\u0628\u064a\u0642 \u0645\u0648\u0642\u0639 \u0627\u0644\u062a\u0633\u0644\u064a\u0645\r\n   *\/\r\n  async function applyDropoff(lat, lng, label) {\r\n    lat = Number(lat);\r\n    lng = Number(lng);\r\n\r\n    if (!insideRiyadh(lat, lng)) {\r\n      showOutsideRiyadhMessage();\r\n      return false;\r\n    }\r\n\r\n    if (dropoffMarker) {\r\n      dropoffMarker.remove();\r\n    }\r\n\r\n    dropoffMarker = new mapboxgl.Marker({\r\n      color: '#dc2626',\r\n      draggable: true\r\n    })\r\n      .setLngLat([lng, lat])\r\n      .addTo(dropoffMap);\r\n\r\n    dropoffPoint = {\r\n      lat: lat,\r\n      lng: lng\r\n    };\r\n\r\n    setFieldValue('dropoff_lat', lat);\r\n    setFieldValue('dropoff_lng', lng);\r\n\r\n    dropoffMap.easeTo({\r\n      center: [lng, lat],\r\n      zoom: 15,\r\n      duration: 700\r\n    });\r\n\r\n    const address = await getAddress(lat, lng);\r\n    const finalAddress = address || label || '\u0645\u0648\u0642\u0639 \u062f\u0627\u062e\u0644 \u0627\u0644\u0631\u064a\u0627\u0636';\r\n\r\n    setFieldValue('dropoff_address', finalAddress);\r\n    setFieldValue('dropoff_address_view', finalAddress);\r\n\r\n    const dropoffSearch =\r\n      document.getElementById('towDropoffSearch');\r\n\r\n    if (dropoffSearch) {\r\n      dropoffSearch.value = finalAddress;\r\n    }\r\n\r\n    dropoffMarker.on('dragend', function () {\r\n      const point = dropoffMarker.getLngLat();\r\n\r\n      if (!insideRiyadh(point.lat, point.lng)) {\r\n        dropoffMarker.setLngLat([\r\n          dropoffPoint.lng,\r\n          dropoffPoint.lat\r\n        ]);\r\n\r\n        showOutsideRiyadhMessage();\r\n        return;\r\n      }\r\n\r\n      applyDropoff(point.lat, point.lng, '');\r\n    });\r\n\r\n    updateDistanceAndPrice();\r\n\r\n    return true;\r\n  }\r\n\r\n\r\n  \/*\r\n   * \u0627\u0644\u0627\u062e\u062a\u064a\u0627\u0631 \u0628\u0627\u0644\u0646\u0642\u0631 \u0639\u0644\u0649 \u0627\u0644\u062e\u0631\u064a\u0637\u0629\r\n   *\/\r\n  pickupMap.on('click', function (event) {\r\n    applyPickup(\r\n      event.lngLat.lat,\r\n      event.lngLat.lng,\r\n      ''\r\n    );\r\n  });\r\n\r\n  dropoffMap.on('click', function (event) {\r\n    applyDropoff(\r\n      event.lngLat.lat,\r\n      event.lngLat.lng,\r\n      ''\r\n    );\r\n  });\r\n\r\n\r\n  \/*\r\n   * \u0645\u0648\u0642\u0639\u064a \u0627\u0644\u062d\u0627\u0644\u064a\r\n   *\/\r\n  function useCurrentLocation(applyFunction) {\r\n    if (!navigator.geolocation) {\r\n      alert('\u0627\u0644\u0645\u062a\u0635\u0641\u062d \u0644\u0627 \u064a\u062f\u0639\u0645 \u062a\u062d\u062f\u064a\u062f \u0627\u0644\u0645\u0648\u0642\u0639 \u0627\u0644\u062c\u063a\u0631\u0627\u0641\u064a.');\r\n      return;\r\n    }\r\n\r\n    navigator.geolocation.getCurrentPosition(\r\n      function (position) {\r\n        const lat = position.coords.latitude;\r\n        const lng = position.coords.longitude;\r\n\r\n        if (!insideRiyadh(lat, lng)) {\r\n          showOutsideRiyadhMessage();\r\n          return;\r\n        }\r\n\r\n        applyFunction(\r\n          lat,\r\n          lng,\r\n          '\u0645\u0648\u0642\u0639\u064a \u0627\u0644\u0622\u0646'\r\n        );\r\n      },\r\n\r\n      function (error) {\r\n        let message = '\u062a\u0639\u0630\u0651\u0631 \u062a\u062d\u062f\u064a\u062f \u0645\u0648\u0642\u0639\u0643.';\r\n\r\n        if (error.code === 1) {\r\n          message =\r\n            '\u0644\u0645 \u064a\u062a\u0645 \u0627\u0644\u0633\u0645\u0627\u062d \u0628\u0627\u0644\u0648\u0635\u0648\u0644 \u0625\u0644\u0649 \u0627\u0644\u0645\u0648\u0642\u0639. \u0641\u0639\u0651\u0644 \u0625\u0630\u0646 \u0627\u0644\u0645\u0648\u0642\u0639 \u0645\u0646 \u0627\u0644\u0645\u062a\u0635\u0641\u062d.';\r\n        } else if (error.code === 2) {\r\n          message =\r\n            '\u062a\u0639\u0630\u0651\u0631 \u0627\u0644\u0648\u0635\u0648\u0644 \u0625\u0644\u0649 \u0628\u064a\u0627\u0646\u0627\u062a \u0645\u0648\u0642\u0639 \u0627\u0644\u062c\u0647\u0627\u0632.';\r\n        } else if (error.code === 3) {\r\n          message =\r\n            '\u0627\u0646\u062a\u0647\u062a \u0645\u0647\u0644\u0629 \u062a\u062d\u062f\u064a\u062f \u0627\u0644\u0645\u0648\u0642\u0639. \u062d\u0627\u0648\u0644 \u0645\u0631\u0629 \u0623\u062e\u0631\u0649.';\r\n        }\r\n\r\n        alert(message);\r\n      },\r\n\r\n      {\r\n        enableHighAccuracy: true,\r\n        timeout: 15000,\r\n        maximumAge: 3000\r\n      }\r\n    );\r\n  }\r\n\r\n\r\n  const pickupLocationButton =\r\n    document.getElementById('tow_my_loc');\r\n\r\n  if (pickupLocationButton) {\r\n    pickupLocationButton.addEventListener(\r\n      'click',\r\n      function () {\r\n        useCurrentLocation(applyPickup);\r\n      }\r\n    );\r\n  }\r\n\r\n\r\n  const dropoffLocationButton =\r\n    document.getElementById('tow_dropoff_my_loc');\r\n\r\n  if (dropoffLocationButton) {\r\n    dropoffLocationButton.addEventListener(\r\n      'click',\r\n      function () {\r\n        useCurrentLocation(applyDropoff);\r\n      }\r\n    );\r\n  }\r\n\r\n\r\n  \/*\r\n   * \u0627\u0644\u0628\u062d\u062b \u062f\u0627\u062e\u0644 \u0627\u0644\u0631\u064a\u0627\u0636 \u0641\u0642\u0637\r\n   *\/\r\n  async function forwardGeocode(query) {\r\n    const bbox = [\r\n      RIYADH_BOUNDS.west,\r\n      RIYADH_BOUNDS.south,\r\n      RIYADH_BOUNDS.east,\r\n      RIYADH_BOUNDS.north\r\n    ].join(',');\r\n\r\n    const url =\r\n      'https:\/\/api.mapbox.com\/geocoding\/v5\/mapbox.places\/' +\r\n      encodeURIComponent(query) +\r\n      '.json' +\r\n      '?access_token=' + encodeURIComponent(mapboxgl.accessToken) +\r\n      '&language=ar' +\r\n      '&country=sa' +\r\n      '&autocomplete=true' +\r\n      '&limit=7' +\r\n      '&bbox=' + encodeURIComponent(bbox) +\r\n      '&proximity=' + RIYADH_CENTER.join(',');\r\n\r\n    const response = await fetch(url);\r\n\r\n    if (!response.ok) {\r\n      throw new Error('Search request failed');\r\n    }\r\n\r\n    return await response.json();\r\n  }\r\n\r\n\r\n  \/*\r\n   * \u062a\u0623\u062e\u064a\u0631 \u0627\u0644\u0628\u062d\u062b \u0623\u062b\u0646\u0627\u0621 \u0627\u0644\u0643\u062a\u0627\u0628\u0629\r\n   *\/\r\n  function debounce(callback, delay) {\r\n    let timer;\r\n\r\n    return function () {\r\n      const args = arguments;\r\n\r\n      clearTimeout(timer);\r\n\r\n      timer = setTimeout(function () {\r\n        callback.apply(null, args);\r\n      }, delay);\r\n    };\r\n  }\r\n\r\n\r\n  \/*\r\n   * \u0639\u0631\u0636 \u0646\u062a\u0627\u0626\u062c \u0627\u0644\u0628\u062d\u062b\r\n   *\/\r\n  function renderResults(box, features, onPick) {\r\n    box.innerHTML = '';\r\n\r\n    const validFeatures = Array.isArray(features)\r\n      ? features.filter(function (feature) {\r\n          if (\r\n            !feature.center ||\r\n            feature.center.length < 2\r\n          ) {\r\n            return false;\r\n          }\r\n\r\n          const lng = Number(feature.center[0]);\r\n          const lat = Number(feature.center[1]);\r\n\r\n          return insideRiyadh(lat, lng);\r\n        })\r\n      : [];\r\n\r\n    if (!validFeatures.length) {\r\n      box.innerHTML =\r\n        '<div class=\"nq-search-result-item\">' +\r\n        '<div class=\"nq-result-title\">\u0644\u0627 \u062a\u0648\u062c\u062f \u0646\u062a\u0627\u0626\u062c \u062f\u0627\u062e\u0644 \u0627\u0644\u0631\u064a\u0627\u0636<\/div>' +\r\n        '<div class=\"nq-result-address\">\u062c\u0631\u0651\u0628 \u0643\u062a\u0627\u0628\u0629 \u0627\u0633\u0645 \u0627\u0644\u062d\u064a \u0623\u0648 \u0627\u0644\u0634\u0627\u0631\u0639 \u0628\u0634\u0643\u0644 \u0623\u0648\u0636\u062d.<\/div>' +\r\n        '<\/div>';\r\n\r\n      box.style.display = 'block';\r\n      return;\r\n    }\r\n\r\n    validFeatures.forEach(function (feature) {\r\n      const item = document.createElement('div');\r\n\r\n      item.className = 'nq-search-result-item';\r\n\r\n      item.innerHTML =\r\n        '<div class=\"nq-result-title\">' +\r\n        escapeHtml(feature.text || '\u0645\u0648\u0642\u0639') +\r\n        '<\/div>' +\r\n        '<div class=\"nq-result-address\">' +\r\n        escapeHtml(feature.place_name || '') +\r\n        '<\/div>';\r\n\r\n      item.addEventListener('click', function () {\r\n        onPick(feature);\r\n      });\r\n\r\n      box.appendChild(item);\r\n    });\r\n\r\n    box.style.display = 'block';\r\n  }\r\n\r\n\r\n  \/*\r\n   * \u0625\u0639\u062f\u0627\u062f \u062d\u0642\u0644 \u0627\u0644\u0628\u062d\u062b\r\n   *\/\r\n  function setupSearch(\r\n    inputId,\r\n    resultsId,\r\n    map,\r\n    applyFunction\r\n  ) {\r\n    const input = document.getElementById(inputId);\r\n    const box = document.getElementById(resultsId);\r\n\r\n    if (!input || !box) {\r\n      return;\r\n    }\r\n\r\n    const performSearch = debounce(\r\n      async function () {\r\n        const query = input.value.trim();\r\n\r\n        if (query.length < 3) {\r\n          box.style.display = 'none';\r\n          box.innerHTML = '';\r\n          return;\r\n        }\r\n\r\n        box.innerHTML =\r\n          '<div class=\"nq-search-result-item\">' +\r\n          '<div class=\"nq-result-title\">\u062c\u0627\u0631\u064a \u0627\u0644\u0628\u062d\u062b...<\/div>' +\r\n          '<\/div>';\r\n\r\n        box.style.display = 'block';\r\n\r\n        try {\r\n          const data = await forwardGeocode(query);\r\n\r\n          renderResults(\r\n            box,\r\n            data.features,\r\n            function (feature) {\r\n              const lng = Number(feature.center[0]);\r\n              const lat = Number(feature.center[1]);\r\n\r\n              if (!insideRiyadh(lat, lng)) {\r\n                showOutsideRiyadhMessage();\r\n                return;\r\n              }\r\n\r\n              input.value =\r\n                feature.place_name || feature.text || '';\r\n\r\n              box.style.display = 'none';\r\n\r\n              applyFunction(\r\n                lat,\r\n                lng,\r\n                feature.place_name || feature.text || ''\r\n              );\r\n\r\n              map.easeTo({\r\n                center: [lng, lat],\r\n                zoom: 15,\r\n                duration: 700\r\n              });\r\n            }\r\n          );\r\n\r\n        } catch (error) {\r\n          console.error('Search error:', error);\r\n\r\n          box.innerHTML =\r\n            '<div class=\"nq-search-result-item\">' +\r\n            '<div class=\"nq-result-title\">\u062a\u0639\u0630\u0651\u0631 \u0627\u0644\u0628\u062d\u062b \u062d\u0627\u0644\u064a\u064b\u0627<\/div>' +\r\n            '<div class=\"nq-result-address\">\u062d\u0627\u0648\u0644 \u0645\u0631\u0629 \u0623\u062e\u0631\u0649 \u0628\u0639\u062f \u0642\u0644\u064a\u0644.<\/div>' +\r\n            '<\/div>';\r\n\r\n          box.style.display = 'block';\r\n        }\r\n      },\r\n      350\r\n    );\r\n\r\n    input.addEventListener('input', performSearch);\r\n\r\n    document.addEventListener('click', function (event) {\r\n      if (\r\n        !box.contains(event.target) &&\r\n        event.target !== input\r\n      ) {\r\n        box.style.display = 'none';\r\n      }\r\n    });\r\n  }\r\n\r\n\r\n  setupSearch(\r\n    'towPickupSearch',\r\n    'towPickupResults',\r\n    pickupMap,\r\n    applyPickup\r\n  );\r\n\r\n  setupSearch(\r\n    'towDropoffSearch',\r\n    'towDropoffResults',\r\n    dropoffMap,\r\n    applyDropoff\r\n  );\r\n\r\n\r\n  \/*\r\n   * \u062a\u0643\u0628\u064a\u0631 \u0648\u062a\u0635\u063a\u064a\u0631 \u0627\u0644\u062e\u0631\u064a\u0637\u0629\r\n   *\/\r\n  function setupToggle(\r\n    buttonId,\r\n    mapId,\r\n    mapInstance\r\n  ) {\r\n    const button = document.getElementById(buttonId);\r\n    const mapElement = document.getElementById(mapId);\r\n\r\n    if (!button || !mapElement) {\r\n      return;\r\n    }\r\n\r\n    let expanded = false;\r\n\r\n    button.addEventListener('click', function () {\r\n      expanded = !expanded;\r\n\r\n      mapElement.style.height = expanded\r\n        ? '520px'\r\n        : '240px';\r\n\r\n      button.textContent = expanded\r\n        ? '\u062a\u0635\u063a\u064a\u0631'\r\n        : '\u062a\u0643\u0628\u064a\u0631';\r\n\r\n      setTimeout(function () {\r\n        mapInstance.resize();\r\n      }, 300);\r\n\r\n      if (expanded) {\r\n        mapElement.scrollIntoView({\r\n          behavior: 'smooth',\r\n          block: 'center'\r\n        });\r\n      }\r\n    });\r\n  }\r\n\r\n\r\n  setupToggle(\r\n    'togglePickup',\r\n    'pickupMap',\r\n    pickupMap\r\n  );\r\n\r\n  setupToggle(\r\n    'toggleDropoff',\r\n    'dropoffMap',\r\n    dropoffMap\r\n  );\r\n\r\n\r\n  \/*\r\n   * \u0636\u0628\u0637 \u062d\u062c\u0645 \u0627\u0644\u062e\u0631\u0627\u0626\u0637 \u0628\u0639\u062f \u062a\u062d\u0645\u064a\u0644 \u0627\u0644\u0635\u0641\u062d\u0629\r\n   *\/\r\n  setTimeout(function () {\r\n    pickupMap.resize();\r\n    dropoffMap.resize();\r\n  }, 500);\r\n\r\n})();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-ee86db3 e-flex e-con-boxed e-con e-parent\" data-id=\"ee86db3\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-7f66f47 elementor-widget elementor-widget-heading\" data-id=\"7f66f47\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">\u0633\u0639\u0631 \u0627\u0644\u062e\u062f\u0645\u0629 150 \u0631\u064a\u0627\u0644 + \u0631\u0633\u0648\u0645 \u0627\u0644\u0645\u0633\u0627\u0641\u0629<\/h2>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-9c3879c e-flex e-con-boxed e-con e-parent\" data-id=\"9c3879c\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-794ac1b elementor-widget-divider--view-line elementor-widget elementor-widget-divider\" data-id=\"794ac1b\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"divider.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-divider\">\n\t\t\t<span class=\"elementor-divider-separator\">\n\t\t\t\t\t\t<\/span>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-0e454e2 elementor-widget elementor-widget-html\" data-id=\"0e454e2\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<div id=\"priceBox\" style=\"\r\n  margin:20px 0;\r\n  padding:15px;\r\n  border:1px dashed #ddd;\r\n  border-radius:8px;\r\n  font-size:18px;\r\n  font-weight:bold;\r\n\">\r\n  \u0627\u0644\u0633\u0639\u0631 \u0633\u064a\u0638\u0647\u0631 \u0647\u0646\u0627 \u0628\u0639\u062f \u062a\u062d\u062f\u064a\u062f \u0627\u0644\u0645\u0648\u0642\u0639\u064a\u0646\r\n<\/div>\r\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-59cc584 fluentform-widget-submit-button-custom elementor-widget elementor-widget-fluent-form-widget\" data-id=\"59cc584\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"fluent-form-widget.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\n            <div class=\"fluentform-widget-wrapper\">\n\n            \n            <div class='fluentform ff-default fluentform_wrapper_3 ffs_default_wrap'><form data-form_id=\"3\" id=\"fluentform_3\" class=\"frm-fluent-form fluent_form_3 ff-el-form-top ff_form_instance_3_1 ff-form-loading ffs_default\" data-form_instance=\"ff_form_instance_3_1\" method=\"POST\" ><fieldset  style=\"border: none!important;margin: 0!important;padding: 0!important;background-color: transparent!important;box-shadow: none!important;outline: none!important; min-inline-size: 100%;\">\n                    <legend class=\"ff_screen_reader_title\" style=\"display: block; margin: 0!important;padding: 0!important;height: 0!important;text-indent: -999999px;width: 0!important;overflow:hidden;\">\u062d\u062c\u0632 \u0633\u064a\u0627\u0631\u0629 \u0633\u0637\u062d\u0629<\/legend><input type='hidden' name='__fluent_form_embded_post_id' value='98' \/><input type=\"hidden\" id=\"_fluentform_3_fluentformnonce\" name=\"_fluentform_3_fluentformnonce\" value=\"195ed5124c\" \/><input type=\"hidden\" name=\"_wp_http_referer\" value=\"\/en\/wp-json\/wp\/v2\/pages\/98\" \/><input type=\"hidden\" name=\"pickup_lng\" data-name=\"pickup_lng\" ><input type=\"hidden\" name=\"pickup_lat\" data-name=\"pickup_lat\" ><input type=\"hidden\" name=\"dropoff_lng\" data-name=\"dropoff_lng\" ><input type=\"hidden\" name=\"dropoff_lat\" data-name=\"dropoff_lat\" ><input type=\"hidden\" name=\"distance_km\" data-name=\"distance_km\" ><input type=\"hidden\" name=\"service_price\" data-name=\"service_price\" ><div class='ff-el-group'><div class=\"ff-el-input--label ff-el-is-required asterisk-right\"><label for='ff_3_pickup_address' id='label_ff_3_pickup_address' aria-label=\"\u0645\u0648\u0642\u0639 \u0627\u0644\u062a\u0633\u0644\u064a\u0645\">\u0645\u0648\u0642\u0639 \u0627\u0644\u062a\u0633\u0644\u064a\u0645<\/label><\/div><div class='ff-el-input--content'><textarea aria-required=\"true\" aria-labelledby=\"label_ff_3_pickup_address\" name=\"pickup_address\" id=\"ff_3_pickup_address\" class=\"ff-el-form-control\" rows=\"3\" cols=\"2\" data-name=\"pickup_address\" ><\/textarea><\/div><\/div><div class='ff-el-group'><div class=\"ff-el-input--label ff-el-is-required asterisk-right\"><label for='ff_3_dropoff_address' id='label_ff_3_dropoff_address' aria-label=\"\u0645\u0648\u0642\u0647 \u0627\u0644\u0625\u0646\u0632\u0627\u0644\">\u0645\u0648\u0642\u0647 \u0627\u0644\u0625\u0646\u0632\u0627\u0644<\/label><\/div><div class='ff-el-input--content'><textarea aria-required=\"true\" aria-labelledby=\"label_ff_3_dropoff_address\" name=\"dropoff_address\" id=\"ff_3_dropoff_address\" class=\"ff-el-form-control\" rows=\"3\" cols=\"2\" data-name=\"dropoff_address\" ><\/textarea><\/div><\/div><div class='ff-el-group ff-text-left ff_submit_btn_wrapper'><button type=\"submit\" class=\"ff-btn ff-btn-submit ff-btn-md ff_btn_style\"  aria-label=\"\u062a\u0623\u0643\u064a\u062f\">\u062a\u0623\u0643\u064a\u062f<\/button><\/div><\/fieldset><\/form><div id='fluentform_3_errors' class='ff-errors-in-stack ff_form_instance_3_1 ff-form-loading_errors ff_form_instance_3_1_errors'><\/div><\/div>            <script type=\"text\/javascript\">\n                window.fluent_form_ff_form_instance_3_1 = {\"id\":\"3\",\"ajaxUrl\":\"https:\\\/\\\/naqqal.net\\\/wp-admin\\\/admin-ajax.php\",\"settings\":{\"layout\":{\"labelPlacement\":\"top\",\"asteriskPlacement\":\"asterisk-right\",\"helpMessagePlacement\":\"with_label\",\"errorMessagePlacement\":\"inline\",\"cssClassName\":\"\"},\"restrictions\":{\"denyEmptySubmission\":{\"enabled\":false}}},\"form_instance\":\"ff_form_instance_3_1\",\"form_id_selector\":\"fluentform_3\",\"rules\":{\"pickup_address\":{\"required\":{\"value\":true,\"message\":\"This field is required\",\"global_message\":\"This field is required\",\"global\":true}},\"dropoff_address\":{\"required\":{\"value\":true,\"message\":\"This field is required\",\"global_message\":\"This field is required\",\"global\":true}}},\"debounce_time\":300};\n                            <\/script>\n                        <\/div>\n\n            \t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>\u062e\u062f\u0645\u0629 \u0633\u0637\u062d\u0629 \u062d\u062f\u062f \u0645\u0648\u0642\u0639 \u0627\u0644\u0633\u064a\u0627\u0631\u0629 \ud83d\udccd \u0645\u0648\u0642\u0639\u064a \u0627\u0644\u0622\u0646 \u062a\u0643\u0628\u064a\u0631 \u062d\u062f\u062f \u0645\u0648\u0642\u0639 \u0627\u0644\u062a\u0633\u0644\u064a\u0645 \ud83d\udccd \u0645\u0648\u0642\u0639\u064a \u0627\u0644\u0622\u0646 \u062a\u0643\u0628\u064a\u0631 \u0627\u062e\u062a\u0631 \u0645\u0648\u0642\u0639 \u0627\u0644\u0633\u064a\u0627\u0631\u0629 \u0648\u0645\u0648\u0642\u0639 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-98","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/naqqal.net\/en\/wp-json\/wp\/v2\/pages\/98","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/naqqal.net\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/naqqal.net\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/naqqal.net\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/naqqal.net\/en\/wp-json\/wp\/v2\/comments?post=98"}],"version-history":[{"count":91,"href":"https:\/\/naqqal.net\/en\/wp-json\/wp\/v2\/pages\/98\/revisions"}],"predecessor-version":[{"id":1783,"href":"https:\/\/naqqal.net\/en\/wp-json\/wp\/v2\/pages\/98\/revisions\/1783"}],"wp:attachment":[{"href":"https:\/\/naqqal.net\/en\/wp-json\/wp\/v2\/media?parent=98"}],"curies":[{"name":"Wordpress","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}