{"id":417,"date":"2026-01-19T11:46:53","date_gmt":"2026-01-19T11:46:53","guid":{"rendered":"https:\/\/naqqal.net\/?page_id=417"},"modified":"2026-07-17T23:05:34","modified_gmt":"2026-07-17T23:05:34","slug":"water-service","status":"publish","type":"page","link":"https:\/\/naqqal.net\/en\/water-service\/","title":{"rendered":"Water Transportation Service"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"417\" class=\"elementor elementor-417\">\n\t\t\t\t<div class=\"elementor-element elementor-element-056af68 e-flex e-con-boxed e-con e-parent\" data-id=\"056af68\" 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-37b4df6 elementor-widget elementor-widget-heading\" data-id=\"37b4df6\" 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 \u0646\u0642\u0644 \u0627\u0644\u0645\u064a\u0627\u0647<\/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-52b26cb e-flex e-con-boxed e-con e-parent\" data-id=\"52b26cb\" 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-ef5ce74 elementor-widget elementor-widget-heading\" data-id=\"ef5ce74\" 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 440 \u0631\u064a\u0627\u0644 + \u0628\u062f\u0648\u0646 \u0631\u0633\u0648\u0645  \u062a\u0648\u0635\u064a\u0644<\/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-0dd4262 e-flex e-con-boxed e-con e-parent\" data-id=\"0dd4262\" 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-865bfa0 elementor-widget elementor-widget-html\" data-id=\"865bfa0\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<div id=\"water_location_box\" dir=\"rtl\">\r\n\r\n  <div style=\"\r\n    display:flex;\r\n    justify-content:space-between;\r\n    align-items:center;\r\n    margin-bottom:10px;\r\n    gap:10px;\r\n    flex-wrap:wrap;\r\n  \">\r\n    <strong style=\"font-size:16px;color:#172033;\">\r\n      \u062d\u062f\u062f \u0645\u0648\u0642\u0639 \u0645\u0646\u0632\u0644\u0643\r\n    <\/strong>\r\n\r\n    <div style=\"\r\n      display:flex;\r\n      gap:8px;\r\n      flex-wrap:wrap;\r\n      align-items:center;\r\n      width:min(100%,650px);\r\n    \">\r\n      <div style=\"position:relative;flex:1 1 300px;min-width:0;\">\r\n        <input\r\n          id=\"waterSearch\"\r\n          type=\"search\"\r\n          autocomplete=\"off\"\r\n          placeholder=\"\u0627\u0628\u062d\u062b \u0639\u0646 \u0627\u0644\u062d\u064a \u0623\u0648 \u0627\u0644\u0634\u0627\u0631\u0639 \u0623\u0648 \u0627\u0644\u0645\u0639\u0644\u0645 \u062f\u0627\u062e\u0644 \u0627\u0644\u0631\u064a\u0627\u0636\"\r\n          style=\"\r\n            width:100%;\r\n            min-height:46px;\r\n            padding:10px 13px;\r\n            border:1px solid #dbe2ea;\r\n            border-radius:12px;\r\n            background:#fff;\r\n            color:#172033;\r\n            font-family:Cairo,Arial,sans-serif;\r\n            font-size:14px;\r\n            outline:none;\r\n            box-shadow:none;\r\n          \"\r\n        >\r\n\r\n        <div\r\n          id=\"waterSearchResults\"\r\n          style=\"\r\n            display:none;\r\n            position:absolute;\r\n            top:calc(100% + 6px);\r\n            right:0;\r\n            left:0;\r\n            max-height:290px;\r\n            overflow-y:auto;\r\n            padding:6px;\r\n            border:1px solid #e1e7ef;\r\n            border-radius:12px;\r\n            background:#fff;\r\n            box-shadow:0 14px 35px rgba(15,23,42,.15);\r\n            z-index:99999;\r\n          \"\r\n        ><\/div>\r\n      <\/div>\r\n\r\n      <button\r\n        type=\"button\"\r\n        id=\"water_my_loc\"\r\n        style=\"\r\n          min-height:44px;\r\n          padding:8px 13px;\r\n          border:1px solid #1769d2;\r\n          border-radius:11px;\r\n          background:#1769d2;\r\n          color:#fff;\r\n          font-family:Cairo,Arial,sans-serif;\r\n          font-size:13px;\r\n          font-weight:800;\r\n          white-space:nowrap;\r\n          cursor:pointer;\r\n        \"\r\n      >\r\n        \ud83d\udccd \u0645\u0648\u0642\u0639\u064a \u0627\u0644\u0622\u0646\r\n      <\/button>\r\n\r\n      <button\r\n        type=\"button\"\r\n        id=\"water_toggle\"\r\n        style=\"\r\n          min-height:44px;\r\n          padding:8px 13px;\r\n          border:1px solid #dbe2ea;\r\n          border-radius:11px;\r\n          background:#fff;\r\n          color:#172033;\r\n          font-family:Cairo,Arial,sans-serif;\r\n          font-size:13px;\r\n          font-weight:800;\r\n          white-space:nowrap;\r\n          cursor:pointer;\r\n        \"\r\n      >\r\n        \u062a\u0643\u0628\u064a\u0631\r\n      <\/button>\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <div\r\n    id=\"water_map_message\"\r\n    style=\"\r\n      display:none;\r\n      margin-bottom:10px;\r\n      padding:10px 12px;\r\n      border:1px solid #f0caca;\r\n      border-radius:11px;\r\n      background:#fff5f5;\r\n      color:#a42d2d;\r\n      font-family:Cairo,Arial,sans-serif;\r\n      font-size:12px;\r\n      font-weight:700;\r\n      line-height:1.7;\r\n    \"\r\n  ><\/div>\r\n\r\n  <div\r\n    id=\"waterMap\"\r\n    style=\"\r\n      width:100%;\r\n      height:280px;\r\n      overflow:hidden;\r\n      border:1px solid #e1e7ef;\r\n      border-radius:15px;\r\n      background:#eef2f6;\r\n      transition:height .25s ease;\r\n    \"\r\n  ><\/div>\r\n\r\n  <div\r\n    style=\"\r\n      margin-top:12px;\r\n      padding:13px 14px;\r\n      border:1px dashed #d5dee9;\r\n      border-radius:14px;\r\n      background:#fafbfd;\r\n      font-family:Cairo,Arial,sans-serif;\r\n    \"\r\n  >\r\n    <div style=\"\r\n      margin-bottom:6px;\r\n      color:#172033;\r\n      font-size:13px;\r\n      font-weight:900;\r\n    \">\r\n      \u0639\u0646\u0648\u0627\u0646 \u0627\u0644\u0645\u0646\u0632\u0644\r\n    <\/div>\r\n\r\n    <div\r\n      id=\"water_addr_preview\"\r\n      style=\"\r\n        color:#475569;\r\n        font-size:13px;\r\n        line-height:1.8;\r\n      \"\r\n    >\r\n      \u0644\u0645 \u064a\u062a\u0645 \u062a\u062d\u062f\u064a\u062f \u0627\u0644\u0645\u0648\u0642\u0639 \u0628\u0639\u062f.\r\n    <\/div>\r\n\r\n    <div style=\"\r\n      margin-top:6px;\r\n      color:#7b8799;\r\n      font-size:11px;\r\n      line-height:1.7;\r\n    \">\r\n      \u064a\u0645\u0643\u0646\u0643 \u0627\u0644\u0628\u062d\u062b \u0623\u0648 \u0627\u0644\u0636\u063a\u0637 \u0639\u0644\u0649 \u0627\u0644\u062e\u0631\u064a\u0637\u0629 \u0623\u0648 \u0627\u0633\u062a\u062e\u062f\u0627\u0645 \u0632\u0631 \u00ab\u0645\u0648\u0642\u0639\u064a \u0627\u0644\u0622\u0646\u00bb.\r\n      \u062e\u062f\u0645\u0629 \u0646\u0642\u0644 \u0627\u0644\u0645\u064a\u0627\u0647 \u0645\u062a\u0627\u062d\u0629 \u062f\u0627\u062e\u0644 \u0645\u062f\u064a\u0646\u0629 \u0627\u0644\u0631\u064a\u0627\u0636 \u0641\u0642\u0637.\r\n    <\/div>\r\n  <\/div>\r\n\r\n<\/div>\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    var mapContainer = document.getElementById('waterMap');\r\n\r\n    if (!mapContainer) {\r\n        return;\r\n    }\r\n\r\n    if (mapContainer.dataset.mapInitialized === '1') {\r\n        return;\r\n    }\r\n\r\n    mapContainer.dataset.mapInitialized = '1';\r\n\r\n    function startWaterMap() {\r\n        if (typeof mapboxgl === 'undefined') {\r\n            setTimeout(startWaterMap, 250);\r\n            return;\r\n        }\r\n\r\n        mapboxgl.accessToken =\r\n            'pk.eyJ1IjoiZmFyZXMyNDkiLCJhIjoiY21qcjBzOXJxMW1lYzNjc2U2c2liNHMybiJ9.z84AG3zlC7J3FKvAL-yDHg';\r\n\r\n        var 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        var RIYADH_CENTER = [46.6753, 24.7136];\r\n\r\n        var mapElement = document.getElementById('waterMap');\r\n        var searchInput = document.getElementById('waterSearch');\r\n        var resultsBox = document.getElementById('waterSearchResults');\r\n        var previewBox = document.getElementById('water_addr_preview');\r\n        var messageBox = document.getElementById('water_map_message');\r\n        var locationButton = document.getElementById('water_my_loc');\r\n        var toggleButton = document.getElementById('water_toggle');\r\n\r\n        if (\r\n            !mapElement ||\r\n            !searchInput ||\r\n            !resultsBox ||\r\n            !previewBox ||\r\n            !locationButton ||\r\n            !toggleButton\r\n        ) {\r\n            return;\r\n        }\r\n\r\n        function updateField(name, value) {\r\n            var fields = document.querySelectorAll(\r\n                '[name=\"' + name + '\"]'\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\r\n        function saveWaterLocation(lat, lng, address) {\r\n            updateField('water_lat', lat);\r\n            updateField('water_lng', lng);\r\n            updateField('water_address', address);\r\n            updateField('water_address_view', address);\r\n        }\r\n\r\n        function showMessage(message, type) {\r\n            messageBox.textContent = message;\r\n            messageBox.style.display = 'block';\r\n\r\n            if (type === 'success') {\r\n                messageBox.style.borderColor = '#bfe5cf';\r\n                messageBox.style.background = '#f1fbf5';\r\n                messageBox.style.color = '#167044';\r\n            } else {\r\n                messageBox.style.borderColor = '#f0caca';\r\n                messageBox.style.background = '#fff5f5';\r\n                messageBox.style.color = '#a42d2d';\r\n            }\r\n        }\r\n\r\n        function hideMessage() {\r\n            messageBox.style.display = 'none';\r\n            messageBox.textContent = '';\r\n        }\r\n\r\n        function isInsideRiyadh(lat, lng) {\r\n            return (\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        function debounce(callback, delay) {\r\n            var timer;\r\n\r\n            return function () {\r\n                var context = this;\r\n                var args = arguments;\r\n\r\n                clearTimeout(timer);\r\n\r\n                timer = setTimeout(function () {\r\n                    callback.apply(context, args);\r\n                }, delay);\r\n            };\r\n        }\r\n\r\n        async function reverseGeocode(lat, lng) {\r\n            var url =\r\n                'https:\/\/api.mapbox.com\/geocoding\/v5\/mapbox.places\/' +\r\n                encodeURIComponent(lng + ',' + lat) +\r\n                '.json' +\r\n                '?access_token=' +\r\n                encodeURIComponent(mapboxgl.accessToken) +\r\n                '&language=ar' +\r\n                '&country=sa' +\r\n                '&limit=1';\r\n\r\n            var response = await fetch(url, {\r\n                cache: 'no-store'\r\n            });\r\n\r\n            if (!response.ok) {\r\n                throw new Error('\u062a\u0639\u0630\u0631 \u062c\u0644\u0628 \u0639\u0646\u0648\u0627\u0646 \u0627\u0644\u0645\u0648\u0642\u0639.');\r\n            }\r\n\r\n            var data = await response.json();\r\n\r\n            if (\r\n                data.features &&\r\n                data.features.length\r\n            ) {\r\n                return data.features[0].place_name || '';\r\n            }\r\n\r\n            return '';\r\n        }\r\n\r\n        async function forwardGeocode(query) {\r\n            var 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            var url =\r\n                'https:\/\/api.mapbox.com\/geocoding\/v5\/mapbox.places\/' +\r\n                encodeURIComponent(query) +\r\n                '.json' +\r\n                '?access_token=' +\r\n                encodeURIComponent(mapboxgl.accessToken) +\r\n                '&language=ar' +\r\n                '&country=sa' +\r\n                '&limit=6' +\r\n                '&autocomplete=true' +\r\n                '&types=address,poi,place,locality,neighborhood' +\r\n                '&bbox=' +\r\n                encodeURIComponent(bbox) +\r\n                '&proximity=' +\r\n                encodeURIComponent(\r\n                    RIYADH_CENTER[0] + ',' + RIYADH_CENTER[1]\r\n                );\r\n\r\n            var response = await fetch(url, {\r\n                cache: 'no-store'\r\n            });\r\n\r\n            if (!response.ok) {\r\n                throw new Error('\u062a\u0639\u0630\u0631 \u062a\u0646\u0641\u064a\u0630 \u0627\u0644\u0628\u062d\u062b.');\r\n            }\r\n\r\n            return await response.json();\r\n        }\r\n\r\n        var map = new mapboxgl.Map({\r\n            container: 'waterMap',\r\n            style: 'mapbox:\/\/styles\/mapbox\/streets-v12',\r\n            center: RIYADH_CENTER,\r\n            zoom: 10.5,\r\n            minZoom: 9.5,\r\n            maxZoom: 18,\r\n            maxBounds: [\r\n                [\r\n                    RIYADH_BOUNDS.west,\r\n                    RIYADH_BOUNDS.south\r\n                ],\r\n                [\r\n                    RIYADH_BOUNDS.east,\r\n                    RIYADH_BOUNDS.north\r\n                ]\r\n            ],\r\n            attributionControl: false\r\n        });\r\n\r\n        map.addControl(\r\n            new mapboxgl.NavigationControl({\r\n                showCompass: false\r\n            }),\r\n            'top-right'\r\n        );\r\n\r\n        map.addControl(\r\n            new mapboxgl.AttributionControl({\r\n                compact: true\r\n            }),\r\n            'bottom-left'\r\n        );\r\n\r\n        var marker = null;\r\n        var applyingLocation = false;\r\n\r\n        function placeMarker(lat, lng) {\r\n            if (marker) {\r\n                marker.remove();\r\n            }\r\n\r\n            marker = new mapboxgl.Marker({\r\n                color: '#1769d2',\r\n                draggable: true\r\n            })\r\n                .setLngLat([lng, lat])\r\n                .addTo(map);\r\n\r\n            marker.on('dragend', function () {\r\n                var position = marker.getLngLat();\r\n\r\n                applyLocation(\r\n                    position.lat,\r\n                    position.lng,\r\n                    ''\r\n                );\r\n            });\r\n        }\r\n\r\n        async function applyLocation(lat, lng, providedAddress) {\r\n            lat = Number(lat);\r\n            lng = Number(lng);\r\n\r\n            if (\r\n                !Number.isFinite(lat) ||\r\n                !Number.isFinite(lng)\r\n            ) {\r\n                showMessage(\r\n                    '\u0627\u0644\u0625\u062d\u062f\u0627\u062b\u064a\u0627\u062a \u0627\u0644\u0645\u062e\u062a\u0627\u0631\u0629 \u063a\u064a\u0631 \u0635\u062d\u064a\u062d\u0629.',\r\n                    'error'\r\n                );\r\n                return;\r\n            }\r\n\r\n            if (!isInsideRiyadh(lat, lng)) {\r\n                showMessage(\r\n                    '\u062e\u062f\u0645\u0629 \u0646\u0642\u0644 \u0627\u0644\u0645\u064a\u0627\u0647 \u0645\u062a\u0627\u062d\u0629 \u062f\u0627\u062e\u0644 \u0645\u062f\u064a\u0646\u0629 \u0627\u0644\u0631\u064a\u0627\u0636 \u0641\u0642\u0637. \u0627\u062e\u062a\u0631 \u0645\u0648\u0642\u0639\u064b\u0627 \u062f\u0627\u062e\u0644 \u062d\u062f\u0648\u062f \u0627\u0644\u0631\u064a\u0627\u0636.',\r\n                    'error'\r\n                );\r\n\r\n                map.easeTo({\r\n                    center: RIYADH_CENTER,\r\n                    zoom: 10.5,\r\n                    duration: 600\r\n                });\r\n\r\n                return;\r\n            }\r\n\r\n            if (applyingLocation) {\r\n                return;\r\n            }\r\n\r\n            applyingLocation = true;\r\n            hideMessage();\r\n\r\n            placeMarker(lat, lng);\r\n\r\n            map.easeTo({\r\n                center: [lng, lat],\r\n                zoom: 15,\r\n                duration: 650\r\n            });\r\n\r\n            previewBox.textContent =\r\n                '\u062c\u0627\u0631\u064a \u062c\u0644\u0628 \u0639\u0646\u0648\u0627\u0646 \u0627\u0644\u0645\u0646\u0632\u0644...';\r\n\r\n            try {\r\n                var fetchedAddress = '';\r\n\r\n                try {\r\n                    fetchedAddress =\r\n                        await reverseGeocode(lat, lng);\r\n                } catch (error) {\r\n                    fetchedAddress = '';\r\n                }\r\n\r\n                var finalAddress =\r\n                    fetchedAddress ||\r\n                    providedAddress ||\r\n                    '\u0645\u0648\u0642\u0639 \u0627\u0644\u0645\u0646\u0632\u0644 \u062f\u0627\u062e\u0644 \u0627\u0644\u0631\u064a\u0627\u0636';\r\n\r\n                previewBox.textContent = finalAddress;\r\n                searchInput.value = finalAddress;\r\n\r\n                saveWaterLocation(\r\n                    lat.toFixed(7),\r\n                    lng.toFixed(7),\r\n                    finalAddress\r\n                );\r\n\r\n                showMessage(\r\n                    '\u062a\u0645 \u062a\u062d\u062f\u064a\u062f \u0639\u0646\u0648\u0627\u0646 \u0627\u0644\u0645\u0646\u0632\u0644 \u0628\u0646\u062c\u0627\u062d.',\r\n                    'success'\r\n                );\r\n\r\n                setTimeout(function () {\r\n                    hideMessage();\r\n                }, 3000);\r\n\r\n            } finally {\r\n                applyingLocation = false;\r\n            }\r\n        }\r\n\r\n        map.on('load', function () {\r\n            setTimeout(function () {\r\n                map.resize();\r\n            }, 200);\r\n        });\r\n\r\n        map.on('click', function (event) {\r\n            applyLocation(\r\n                event.lngLat.lat,\r\n                event.lngLat.lng,\r\n                ''\r\n            );\r\n        });\r\n\r\n        locationButton.addEventListener(\r\n            'click',\r\n            function () {\r\n                hideMessage();\r\n\r\n                if (!navigator.geolocation) {\r\n                    showMessage(\r\n                        '\u0627\u0644\u0645\u062a\u0635\u0641\u062d \u0644\u0627 \u064a\u062f\u0639\u0645 \u062e\u0627\u0635\u064a\u0629 \u062a\u062d\u062f\u064a\u062f \u0627\u0644\u0645\u0648\u0642\u0639.',\r\n                        'error'\r\n                    );\r\n                    return;\r\n                }\r\n\r\n                locationButton.disabled = true;\r\n                locationButton.textContent =\r\n                    '\u062c\u0627\u0631\u064a \u062a\u062d\u062f\u064a\u062f \u0627\u0644\u0645\u0648\u0642\u0639...';\r\n\r\n                navigator.geolocation.getCurrentPosition(\r\n                    function (position) {\r\n                        locationButton.disabled = false;\r\n                        locationButton.textContent =\r\n                            '\ud83d\udccd \u0645\u0648\u0642\u0639\u064a \u0627\u0644\u0622\u0646';\r\n\r\n                        var lat =\r\n                            position.coords.latitude;\r\n\r\n                        var lng =\r\n                            position.coords.longitude;\r\n\r\n                        if (!isInsideRiyadh(lat, lng)) {\r\n                            showMessage(\r\n                                '\u0645\u0648\u0642\u0639\u0643 \u0627\u0644\u062d\u0627\u0644\u064a \u062e\u0627\u0631\u062c \u062d\u062f\u0648\u062f \u0627\u0644\u0631\u064a\u0627\u0636\u060c \u0648\u062e\u062f\u0645\u0629 \u0646\u0642\u0644 \u0627\u0644\u0645\u064a\u0627\u0647 \u0645\u062a\u0627\u062d\u0629 \u062f\u0627\u062e\u0644 \u0627\u0644\u0631\u064a\u0627\u0636 \u0641\u0642\u0637.',\r\n                                'error'\r\n                            );\r\n                            return;\r\n                        }\r\n\r\n                        applyLocation(\r\n                            lat,\r\n                            lng,\r\n                            '\u0645\u0648\u0642\u0639\u064a \u0627\u0644\u062d\u0627\u0644\u064a'\r\n                        );\r\n                    },\r\n                    function (error) {\r\n                        locationButton.disabled = false;\r\n                        locationButton.textContent =\r\n                            '\ud83d\udccd \u0645\u0648\u0642\u0639\u064a \u0627\u0644\u0622\u0646';\r\n\r\n                        var message =\r\n                            '\u062a\u0639\u0630\u0631 \u0627\u0644\u0648\u0635\u0648\u0644 \u0625\u0644\u0649 \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 \u0625\u0639\u062f\u0627\u062f\u0627\u062a \u0627\u0644\u0645\u062a\u0635\u0641\u062d.';\r\n                        } else if (error.code === 2) {\r\n                            message =\r\n                                '\u062a\u0639\u0630\u0631 \u062a\u062d\u062f\u064a\u062f \u0645\u0648\u0642\u0639 \u0627\u0644\u062c\u0647\u0627\u0632 \u062d\u0627\u0644\u064a\u064b\u0627.';\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                        showMessage(message, 'error');\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        function renderResults(features) {\r\n            resultsBox.innerHTML = '';\r\n\r\n            var validFeatures = (features || []).filter(\r\n                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                    var lng =\r\n                        Number(feature.center[0]);\r\n\r\n                    var lat =\r\n                        Number(feature.center[1]);\r\n\r\n                    return isInsideRiyadh(lat, lng);\r\n                }\r\n            );\r\n\r\n            if (!validFeatures.length) {\r\n                resultsBox.innerHTML =\r\n                    '<div style=\"' +\r\n                    'padding:12px;' +\r\n                    'color:#7b8799;' +\r\n                    'font-family:Cairo,Arial,sans-serif;' +\r\n                    'font-size:12px;' +\r\n                    'text-align:center;' +\r\n                    '\">' +\r\n                    '\u0644\u0645 \u064a\u062a\u0645 \u0627\u0644\u0639\u062b\u0648\u0631 \u0639\u0644\u0649 \u0646\u062a\u0627\u0626\u062c \u062f\u0627\u062e\u0644 \u0627\u0644\u0631\u064a\u0627\u0636.' +\r\n                    '<\/div>';\r\n\r\n                resultsBox.style.display = 'block';\r\n                return;\r\n            }\r\n\r\n            validFeatures.forEach(function (feature) {\r\n                var item =\r\n                    document.createElement('button');\r\n\r\n                item.type = 'button';\r\n\r\n                item.style.cssText =\r\n                    'display:block;' +\r\n                    'width:100%;' +\r\n                    'padding:10px 11px;' +\r\n                    'border:0;' +\r\n                    'border-radius:9px;' +\r\n                    'background:transparent;' +\r\n                    'color:#172033;' +\r\n                    'font-family:Cairo,Arial,sans-serif;' +\r\n                    'text-align:right;' +\r\n                    'cursor:pointer;';\r\n\r\n                var primaryText =\r\n                    feature.text ||\r\n                    feature.place_name ||\r\n                    '\u0645\u0648\u0642\u0639';\r\n\r\n                var fullText =\r\n                    feature.place_name ||\r\n                    primaryText;\r\n\r\n                var title =\r\n                    document.createElement('div');\r\n\r\n                title.style.cssText =\r\n                    'font-size:13px;' +\r\n                    'font-weight:900;' +\r\n                    'line-height:1.6;';\r\n\r\n                title.textContent = primaryText;\r\n\r\n                var subtitle =\r\n                    document.createElement('div');\r\n\r\n                subtitle.style.cssText =\r\n                    'margin-top:2px;' +\r\n                    'color:#6b778a;' +\r\n                    'font-size:11px;' +\r\n                    'line-height:1.6;';\r\n\r\n                subtitle.textContent = fullText;\r\n\r\n                item.appendChild(title);\r\n                item.appendChild(subtitle);\r\n\r\n                item.addEventListener(\r\n                    'mouseenter',\r\n                    function () {\r\n                        item.style.background =\r\n                            '#f2f6fb';\r\n                    }\r\n                );\r\n\r\n                item.addEventListener(\r\n                    'mouseleave',\r\n                    function () {\r\n                        item.style.background =\r\n                            'transparent';\r\n                    }\r\n                );\r\n\r\n                item.addEventListener(\r\n                    'click',\r\n                    function () {\r\n                        var lng =\r\n                            Number(feature.center[0]);\r\n\r\n                        var lat =\r\n                            Number(feature.center[1]);\r\n\r\n                        searchInput.value = fullText;\r\n                        resultsBox.style.display = 'none';\r\n\r\n                        applyLocation(\r\n                            lat,\r\n                            lng,\r\n                            fullText\r\n                        );\r\n                    }\r\n                );\r\n\r\n                resultsBox.appendChild(item);\r\n            });\r\n\r\n            resultsBox.style.display = 'block';\r\n        }\r\n\r\n        var performSearch = debounce(\r\n            async function () {\r\n                var query =\r\n                    searchInput.value.trim();\r\n\r\n                if (query.length < 3) {\r\n                    resultsBox.style.display = 'none';\r\n                    resultsBox.innerHTML = '';\r\n                    return;\r\n                }\r\n\r\n                resultsBox.innerHTML =\r\n                    '<div style=\"' +\r\n                    'padding:12px;' +\r\n                    'color:#7b8799;' +\r\n                    'font-family:Cairo,Arial,sans-serif;' +\r\n                    'font-size:12px;' +\r\n                    'text-align:center;' +\r\n                    '\">' +\r\n                    '\u062c\u0627\u0631\u064a \u0627\u0644\u0628\u062d\u062b...' +\r\n                    '<\/div>';\r\n\r\n                resultsBox.style.display = 'block';\r\n\r\n                try {\r\n                    var data =\r\n                        await forwardGeocode(query);\r\n\r\n                    renderResults(\r\n                        data.features || []\r\n                    );\r\n                } catch (error) {\r\n                    resultsBox.innerHTML =\r\n                        '<div style=\"' +\r\n                        'padding:12px;' +\r\n                        'color:#a42d2d;' +\r\n                        'font-family:Cairo,Arial,sans-serif;' +\r\n                        'font-size:12px;' +\r\n                        'text-align:center;' +\r\n                        '\">' +\r\n                        '\u062a\u0639\u0630\u0631 \u062a\u0646\u0641\u064a\u0630 \u0627\u0644\u0628\u062d\u062b. \u062d\u0627\u0648\u0644 \u0645\u0631\u0629 \u0623\u062e\u0631\u0649.' +\r\n                        '<\/div>';\r\n                }\r\n            },\r\n            350\r\n        );\r\n\r\n        searchInput.addEventListener(\r\n            'input',\r\n            performSearch\r\n        );\r\n\r\n        searchInput.addEventListener(\r\n            'keydown',\r\n            function (event) {\r\n                if (event.key === 'Escape') {\r\n                    resultsBox.style.display = 'none';\r\n                }\r\n            }\r\n        );\r\n\r\n        document.addEventListener(\r\n            'click',\r\n            function (event) {\r\n                if (\r\n                    !resultsBox.contains(event.target) &&\r\n                    event.target !== searchInput\r\n                ) {\r\n                    resultsBox.style.display = 'none';\r\n                }\r\n            }\r\n        );\r\n\r\n        var expanded = false;\r\n\r\n        toggleButton.addEventListener(\r\n            'click',\r\n            function () {\r\n                expanded = !expanded;\r\n\r\n                mapElement.style.height =\r\n                    expanded ? '560px' : '280px';\r\n\r\n                toggleButton.textContent =\r\n                    expanded ? '\u062a\u0635\u063a\u064a\u0631' : '\u062a\u0643\u0628\u064a\u0631';\r\n\r\n                setTimeout(function () {\r\n                    map.resize();\r\n\r\n                    if (marker) {\r\n                        map.easeTo({\r\n                            center: marker.getLngLat(),\r\n                            duration: 300\r\n                        });\r\n                    }\r\n                }, 280);\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        window.addEventListener(\r\n            'resize',\r\n            function () {\r\n                setTimeout(function () {\r\n                    map.resize();\r\n                }, 150);\r\n            }\r\n        );\r\n    }\r\n\r\n    startWaterMap();\r\n\r\n})();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f7e0c47 fluentform-widget-submit-button-custom elementor-widget elementor-widget-fluent-form-widget\" data-id=\"f7e0c47\" 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 fluentform-widget-align-default\">\n\n            \n            <div class='fluentform ff-default fluentform_wrapper_6 ffs_default_wrap'><form data-form_id=\"6\" id=\"fluentform_6\" class=\"frm-fluent-form fluent_form_6 ff-el-form-top ff_form_instance_6_1 ff-form-loading ffs_default\" data-form_instance=\"ff_form_instance_6_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;\">Blank Form (#6)<\/legend><input type='hidden' name='__fluent_form_embded_post_id' value='417' \/><input type=\"hidden\" id=\"_fluentform_6_fluentformnonce\" name=\"_fluentform_6_fluentformnonce\" value=\"195ed5124c\" \/><input type=\"hidden\" name=\"_wp_http_referer\" value=\"\/en\/wp-json\/wp\/v2\/pages\/417\" \/><input type=\"hidden\" name=\"water_lng\" data-name=\"water_lng\" ><input type=\"hidden\" name=\"water_lat\" data-name=\"water_lat\" ><input type=\"hidden\" name=\"water_address\" data-name=\"water_address\" ><div class='ff-el-group'><div class=\"ff-el-input--label ff-el-is-required asterisk-right\"><label for='ff_6_water_address_view' id='label_ff_6_water_address_view' aria-label=\"\u0645\u0648\u0642\u0639\u0643 :\">\u0645\u0648\u0642\u0639\u0643 : <\/label><\/div><div class='ff-el-input--content'><textarea aria-required=\"true\" aria-labelledby=\"label_ff_6_water_address_view\" name=\"water_address_view\" id=\"ff_6_water_address_view\" class=\"ff-el-form-control\" rows=\"3\" cols=\"2\" data-name=\"water_address_view\" ><\/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_6_errors' class='ff-errors-in-stack ff_form_instance_6_1 ff-form-loading_errors ff_form_instance_6_1_errors'><\/div><\/div>            <script type=\"text\/javascript\">\n                window.fluent_form_ff_form_instance_6_1 = {\"id\":\"6\",\"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_6_1\",\"form_id_selector\":\"fluentform_6\",\"rules\":{\"water_address_view\":{\"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 \u0646\u0642\u0644 \u0627\u0644\u0645\u064a\u0627\u0647 \u0633\u0639\u0631 \u0627\u0644\u062e\u062f\u0645\u0629 440 \u0631\u064a\u0627\u0644 + \u0628\u062f\u0648\u0646 \u0631\u0633\u0648\u0645 \u062a\u0648\u0635\u064a\u0644 \u062d\u062f\u062f \u0645\u0648\u0642\u0639 \u0645\u0646\u0632\u0644\u0643 \ud83d\udccd \u0645\u0648\u0642\u0639\u064a \u0627\u0644\u0622\u0646 \u062a\u0643\u0628\u064a\u0631 \u0639\u0646\u0648\u0627\u0646 \u0627\u0644\u0645\u0646\u0632\u0644 [&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":"default","site-content-layout":"","ast-site-content-layout":"default","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":"","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-417","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/naqqal.net\/en\/wp-json\/wp\/v2\/pages\/417","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=417"}],"version-history":[{"count":27,"href":"https:\/\/naqqal.net\/en\/wp-json\/wp\/v2\/pages\/417\/revisions"}],"predecessor-version":[{"id":1744,"href":"https:\/\/naqqal.net\/en\/wp-json\/wp\/v2\/pages\/417\/revisions\/1744"}],"wp:attachment":[{"href":"https:\/\/naqqal.net\/en\/wp-json\/wp\/v2\/media?parent=417"}],"curies":[{"name":"Wordpress","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}