{"id":958,"date":"2023-09-19T06:35:09","date_gmt":"2023-09-19T06:35:09","guid":{"rendered":"http:\/\/194.126.11.162\/%d8%ae%d8%af%d9%85%d8%a7%d8%aa-%d8%a7%d9%84%d9%85%d9%88%d8%a7%d8%b7%d9%86%d9%8a%d9%86\/"},"modified":"2023-09-19T14:09:18","modified_gmt":"2023-09-19T14:09:18","slug":"user-services","status":"publish","type":"page","link":"https:\/\/isf.gov.lb\/ar\/user-services\/","title":{"rendered":"\u062e\u062f\u0645\u0627\u062a \u0627\u0644\u0645\u0648\u0627\u0637\u0646\u064a\u0646"},"content":{"rendered":"\r\n<section class=\"w-100 py-5 bg-cover bg-center bg-repeat-none d-flex align-items-end justify-content-center\" style=\"background-image: linear-gradient(to bottom right, rgba(255, 255, 255, 0.3), rgba(0, 84, 158, 0.3)), url('https:\/\/isf.gov.lb\/wp-content\/uploads\/2023\/09\/cloud4c-company-contact-1Desktop.jpg');height:40%\">\r\n    <h1 class=\"text-white fw-bold text-xl text-center text-capitalize\">\r\n        \u062e\u062f\u0645\u0627\u062a \u0627\u0644\u0645\u0648\u0627\u0637\u0646\u064a\u0646    <\/h1>\r\n<\/section>\n\n<style>\r\n    .disabled-btn {\r\n        background-color: var(--bs-btn-disabled-bg) !important;\r\n        pointer-events: none !important;\r\n        opacity: 0.65 !important;\r\n    }\r\n<\/style>\r\n    <script src=\"https:\/\/www.google.com\/recaptcha\/api.js?badge=bottomright\"><\/script>\r\n\r\n<section id=\"balleghSection\" class=\"w-100 bg-cover bg-center bg-repeat-none bg-light\" style=\"background-image: url(https:\/\/isf.gov.lb\/wp-content\/themes\/ISF\/resources\/images\/lines_background.png);\">\r\n\r\n    <!-- <div class=\"d-flex flex-column align-items-center justify-content-center pb-5\">\r\n        <h2 class=\"fw-bold isf-text-primary\">\u062e\u062f\u0645\u0629 \u0628\u0644\u0651\u063a<\/h2>\r\n        <div class=\"row justify-content-center w-25\">\r\n            <hr class=\"col-1 mt-3 border-3 isf-border-primary opacity-100\" \/>\r\n        <\/div>\r\n    <\/div> -->\r\n\r\n    <div class=\"card bg-transparent border-0\">\r\n        <div class=\"card-header bg-transparent pt-4\">\r\n            <ul class=\"nav nav-tabs justify-content-md-center card-header-tabs\" style=\"flex-wrap:nowrap;text-wrap:nowrap;overflow-x:auto;overflow-y:hidden\">\r\n                <li class=\"col-lg-4 text-center nav-item\">\r\n                    <a class=\"nav-link fs-5 fw-bold rounded-top-3 text-dark isf-bg-light active\" aria-current=\"true\" href=\"https:\/\/isf.gov.lb\/ar\/anonymous-complaints\/\">\r\n                        \u062e\u062f\u0645\u0629 \u0628\u0644\u0651\u063a                    <\/a>\r\n                <\/li>\r\n                <li class=\"col-lg-4 text-center nav-item\">\r\n                    <a class=\"nav-link fs-5 fw-bold rounded-top-3 text-dark\" href=\"https:\/\/isf.gov.lb\/ar\/complaints-against-isf-members\/\">\r\n                        \u0634\u0643\u0627\u0648\u0649 \u0628\u062d\u0642 \u0639\u0646\u0627\u0635\u0631 \u0642\u0648\u0649 \u0627\u0644\u0623\u0645\u0646                    <\/a>\r\n                <\/li>\r\n            <\/ul>\r\n        <\/div>\r\n        <div class=\"card-body isf-gradient-light\">\r\n            <div class=\"container\">\r\n                <div class=\"alert alert-light\">\r\n                    <p class=\"m-0\">\u062c\u0645\u064a\u0639 \u0627\u0644\u0645\u0639\u0644\u0648\u0645\u0627\u062a \u0627\u0644\u0645\u0631\u0633\u0644\u0629 \u0625\u0644\u064a\u0646\u0627 \u062a\u0628\u0642\u0649 \u0633\u0631\u064a\u0629.<\/p>\r\n                <\/div>\r\n                <div class=\"row align-items-start g-3\">\r\n                    <div class=\"col-12 col-md-6 col-lg-6\">\r\n                        <select data-field=\"complaint_type\" class=\"form-select form-select-lg fs-6 fw-bold rounded-pill isf-border-primary border\" required>\r\n                            <option selected disabled value=\"\">\u0646\u0648\u0639 \u0627\u0644\u0628\u0644\u0627\u063a*<\/option>\r\n                                                            <optgroup label=\"\u062c\u0631\u0627\u0626\u0645 \u0627\u0644\u0627\u0644\u0643\u062a\u0631\u0648\u0646\u064a\u0629\">\r\n                                                                            <option value=\"\u062a\u0646\u0645\u0651\u0631 \u0627\u0644\u0643\u062a\u0631\u0648\u0646\u064a\">\u062a\u0646\u0645\u0651\u0631 \u0627\u0644\u0643\u062a\u0631\u0648\u0646\u064a<\/option>\r\n                                                                            <option value=\"\u0627\u0628\u062a\u0632\u0627\u0632 \u0627\u0644\u0643\u062a\u0631\u0648\u0646\u064a\">\u0627\u0628\u062a\u0632\u0627\u0632 \u0627\u0644\u0643\u062a\u0631\u0648\u0646\u064a<\/option>\r\n                                                                            <option value=\"\u062a\u0632\u0648\u064a\u0631 \u0627\u0644\u0647\u0648\u064a\u0629 \u0627\u0644\u0625\u0644\u0643\u062a\u0631\u0648\u0646\u064a\u0629\">\u062a\u0632\u0648\u064a\u0631 \u0627\u0644\u0647\u0648\u064a\u0629 \u0627\u0644\u0625\u0644\u0643\u062a\u0631\u0648\u0646\u064a\u0629<\/option>\r\n                                                                            <option value=\"\u0627\u062e\u062a\u0631\u0627\u0642 \u0627\u0644\u062d\u0633\u0627\u0628\">\u0627\u062e\u062a\u0631\u0627\u0642 \u0627\u0644\u062d\u0633\u0627\u0628<\/option>\r\n                                                                            <option value=\"\u0633\u0631\u0642\u0629 \u0627\u0644\u0645\u0639\u0644\u0648\u0645\u0627\u062a\">\u0633\u0631\u0642\u0629 \u0627\u0644\u0645\u0639\u0644\u0648\u0645\u0627\u062a<\/option>\r\n                                                                            <option value=\"\u0627\u0633\u062a\u063a\u0644\u0627\u0644 \u0627\u0644\u0623\u0637\u0641\u0627\u0644 \u0628\u0645\u0648\u0627\u062f \u0625\u0628\u0627\u062d\u064a\u0629\">\u0627\u0633\u062a\u063a\u0644\u0627\u0644 \u0627\u0644\u0623\u0637\u0641\u0627\u0644 \u0628\u0645\u0648\u0627\u062f \u0625\u0628\u0627\u062d\u064a\u0629<\/option>\r\n                                                                            <option value=\"\u062c\u0631\u0627\u0626\u0645 \u0625\u0644\u0643\u062a\u0631\u0648\u0646\u064a\u0629 \u0623\u062e\u0631\u0649\">\u062c\u0631\u0627\u0626\u0645 \u0625\u0644\u0643\u062a\u0631\u0648\u0646\u064a\u0629 \u0623\u062e\u0631\u0649<\/option>\r\n                                                                    <\/optgroup>\r\n                                                            <optgroup label=\"\u062c\u0631\u0627\u0626\u0645 \u0623\u062e\u0631\u0649\">\r\n                                                                            <option value=\"\u0642\u062a\u0644\">\u0642\u062a\u0644<\/option>\r\n                                                                            <option value=\"\u0627\u0644\u0627\u0639\u062a\u062f\u0627\u0621 \u0648\u0627\u0644\u0636\u0631\u0628\">\u0627\u0644\u0627\u0639\u062a\u062f\u0627\u0621 \u0648\u0627\u0644\u0636\u0631\u0628<\/option>\r\n                                                                            <option value=\"\u0627\u0639\u062a\u062f\u0627\u0621 \u062c\u0646\u0633\u064a\">\u0627\u0639\u062a\u062f\u0627\u0621 \u062c\u0646\u0633\u064a<\/option>\r\n                                                                            <option value=\"\u0627\u0644\u0639\u0646\u0641 \u0627\u0644\u0623\u0633\u0631\u064a\">\u0627\u0644\u0639\u0646\u0641 \u0627\u0644\u0623\u0633\u0631\u064a<\/option>\r\n                                                                            <option value=\"\u0625\u0632\u0639\u0627\u062c \u0648\u0625\u0642\u0644\u0627\u0642 \u0631\u0627\u062d\u0629\">\u0625\u0632\u0639\u0627\u062c \u0648\u0625\u0642\u0644\u0627\u0642 \u0631\u0627\u062d\u0629<\/option>\r\n                                                                            <option value=\"\u062e\u0637\u0641\">\u062e\u0637\u0641<\/option>\r\n                                                                            <option value=\"\u0633\u0631\u0642\u0629\">\u0633\u0631\u0642\u0629<\/option>\r\n                                                                            <option value=\"\u0627\u0644\u0627\u062d\u062a\u064a\u0627\u0644\">\u0627\u0644\u0627\u062d\u062a\u064a\u0627\u0644<\/option>\r\n                                                                            <option value=\"\u0639\u0645\u0644\u0629 \u0645\u0632\u064a\u0641\u0629\">\u0639\u0645\u0644\u0629 \u0645\u0632\u064a\u0641\u0629<\/option>\r\n                                                                            <option value=\"\u0633\u0631\u0642\u0629 \u0647\u0648\u064a\u0629 (\u0625\u0646\u062a\u062d\u0627\u0644 \u0635\u0641\u0629)\">\u0633\u0631\u0642\u0629 \u0647\u0648\u064a\u0629 (\u0625\u0646\u062a\u062d\u0627\u0644 \u0635\u0641\u0629)<\/option>\r\n                                                                            <option value=\"\u0627\u0633\u062a\u062e\u062f\u0627\u0645 \u0633\u0644\u0627\u062d\">\u0627\u0633\u062a\u062e\u062f\u0627\u0645 \u0633\u0644\u0627\u062d<\/option>\r\n                                                                            <option value=\"\u0645\u062e\u062f\u0631\u0627\u062a\">\u0645\u062e\u062f\u0631\u0627\u062a<\/option>\r\n                                                                            <option value=\"\u062f\u0639\u0627\u0631\u0629\">\u062f\u0639\u0627\u0631\u0629<\/option>\r\n                                                                            <option value=\"\u0645\u062e\u0627\u0644\u0641\u0629 \u0633\u064a\u0631\">\u0645\u062e\u0627\u0644\u0641\u0629 \u0633\u064a\u0631<\/option>\r\n                                                                            <option value=\"\u0645\u062e\u0627\u0644\u0641\u0629 \u0628\u0646\u0627\u0621\">\u0645\u062e\u0627\u0644\u0641\u0629 \u0628\u0646\u0627\u0621<\/option>\r\n                                                                            <option value=\"\u0645\u062e\u0627\u0644\u0641\u0629 \u0635\u064a\u062f\">\u0645\u062e\u0627\u0644\u0641\u0629 \u0635\u064a\u062f<\/option>\r\n                                                                            <option value=\"\u0645\u062e\u0627\u0644\u0641\u0629 \u0627\u0627\u0644\u0642\u0648\u0627\u0646\u064a\u0646 \u0648\u0627\u0644\u0623\u0646\u0638\u0645\u0629\">\u0645\u062e\u0627\u0644\u0641\u0629 \u0627\u0627\u0644\u0642\u0648\u0627\u0646\u064a\u0646 \u0648\u0627\u0644\u0623\u0646\u0638\u0645\u0629<\/option>\r\n                                                                            <option value=\"\u0627\u0644\u062a\u0639\u062f\u064a \u0639\u0644\u0649 \u0627\u0644\u0623\u0645\u0644\u0627\u0643 \u0627\u0644\u0639\u0627\u0645\u0629\">\u0627\u0644\u062a\u0639\u062f\u064a \u0639\u0644\u0649 \u0627\u0644\u0623\u0645\u0644\u0627\u0643 \u0627\u0644\u0639\u0627\u0645\u0629<\/option>\r\n                                                                            <option value=\"\u062a\u0647\u0631\u064a\u0628 \u0623\u0634\u062e\u0627\u0635\">\u062a\u0647\u0631\u064a\u0628 \u0623\u0634\u062e\u0627\u0635<\/option>\r\n                                                                            <option value=\"\u0627\u0644\u0625\u0631\u0647\u0627\u0628\">\u0627\u0644\u0625\u0631\u0647\u0627\u0628<\/option>\r\n                                                                            <option value=\"\u0627\u0644\u062a\u0639\u0627\u0645\u0644 \u0645\u0639 \u0627\u0644\u0639\u062f\u0648\">\u0627\u0644\u062a\u0639\u0627\u0645\u0644 \u0645\u0639 \u0627\u0644\u0639\u062f\u0648<\/option>\r\n                                                                            <option value=\"\u063a\u064a\u0631 \u0630\u0644\u0643\">\u063a\u064a\u0631 \u0630\u0644\u0643<\/option>\r\n                                                                    <\/optgroup>\r\n                                                    <\/select>\r\n                    <\/div>\r\n                    <div class=\"col-12 col-md-6 col-lg-6\">\r\n                        <div class=\"w-100 h-100 d-flex align-items-center rounded-pill isf-border-primary border bg-white\" style=\"padding:.563rem 0.8rem !important\">\r\n                            <div class=\"me-3\">\r\n                                <p class=\"fw-bold mb-0\">\u0647\u0644 \u062a\u0631\u063a\u0628 \u0628\u0627\u0644\u062a\u0648\u0627\u0635\u0644 \u0645\u0639\u0643\u061f*<\/p>\r\n                            <\/div>\r\n                            <div class=\"form-check mb-0 me-3\">\r\n                                <input data-field=\"to_be_contacted\" class=\"form-check-input\" type=\"radio\" name=\"flexRadioDefault\" id=\"yes\" value=\"1\" required>\r\n                                <label class=\"form-check-label\" for=\"yes\">\r\n                                    \u0646\u0639\u0645                                <\/label>\r\n                            <\/div>\r\n                            <div class=\"form-check m-0\">\r\n                                <input data-field=\"to_be_contacted\" class=\"form-check-input\" type=\"radio\" name=\"flexRadioDefault\" id=\"no\" value=\"0\" required>\r\n                                <label class=\"form-check-label\" for=\"no\">\r\n                                    \u0644\u0627                                <\/label>\r\n                            <\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n                    <div class=\"col-12 col-md-6 col-lg-6\">\r\n                        <input type=\"number\" id=\"phone_number\" data-field=\"phone_number\" oninput=\"checkFieldLength(this,15)\" class=\"form-control form-control-lg fs-6 fw-bold rounded-pill isf-border-primary border\" placeholder=\"\u0631\u0642\u0645 \u0627\u0644\u0647\u0627\u062a\u0641\">\r\n                        <div class=\"invalid-feedback d-none\">\r\n                            \u0631\u0642\u0645 \u0627\u0644\u0647\u0627\u062a\u0641 \u0623\u0646 \u064a\u062a\u0643\u0648\u0646 \u0645\u0646 8 \u0623\u0631\u0642\u0627\u0645                        <\/div>\r\n                    <\/div>\r\n                    <div class=\"col-12 col-md-6 col-lg-6\">\r\n                        <input type=\"email\" id=\"email\" data-field=\"email\" class=\"text-start form-control form-control-lg fs-6 fw-bold rounded-pill isf-border-primary border\" placeholder=\"\u0627\u0644\u0628\u0631\u064a\u062f \u0627\u0644\u0625\u0644\u0643\u062a\u0631\u0648\u0646\u064a\">\r\n                        <div class=\"invalid-feedback d-none\">\r\n                            \u0627\u0644\u0628\u0631\u064a\u062f \u0627\u0644\u0625\u0644\u0643\u062a\u0631\u0648\u0646\u064a \u0627\u0644\u0630\u064a \u0623\u062f\u062e\u0644\u062a\u0647 \u063a\u064a\u0631 \u0635\u0627\u0644\u062d                        <\/div>\r\n                    <\/div>\r\n                    <div class=\"col-12 col-lg-6\">\r\n                        <textarea rows=\"8\" data-field=\"description\" class=\"h-auto form-control form-control-lg fs-6 fw-bold rounded-4 isf-border-primary border\" style=\"resize: none;\" placeholder=\"\u0646\u0635 \u0628\u0644\u0651\u063a*\" required><\/textarea>\r\n                    <\/div>\r\n                    <div class=\"col-12 col-lg-6\">\r\n                        <div class=\"w-100 h-100 rounded-4 bg-white border isf-border-primary p-3\">\r\n                            <div>\r\n                                <p class=\"fw-bold\">\u0627\u0644\u0645\u0631\u0641\u0642\u0627\u062a<\/p>\r\n                            <\/div>\r\n                            <div class=\"row m-0\" id=\"attachmentsList\">\r\n                                <div class=\"col-3 g-2 ps-0\">\r\n                                    <button id=\"addAttachmentsButton\" onclick=\"triggerFileUpload()\" class=\"btn btn-outline-light p-1 rounded-3 border border-2 isf-border-primary d-flex align-items-center justify-content-center ratio ratio-1x1\" style=\"border-style: dashed !important;\">\r\n                                        <i class=\"fs-1 isf-text-primary d-flex align-items-center justify-content-center bi bi-plus\"><\/i>\r\n                                    <\/button>\r\n                                <\/div>\r\n                            <\/div>\r\n                            <input type=\"file\" id=\"attachmentsInput\" multiple accept=\".jpg, .jpeg, .png, .gif, .bmp,.mp4, .avi, .mkv, .mov, .wmv, .docx, .pdf, .pptx, .xlsx, .txt\" class=\"d-none\">\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n                <div class=\"d-flex justify-content-center align-items-center flex-column mt-3\">\r\n                    <button id=\"submitFormBtn\" data-sitekey=\"6LfHKTsqAAAAAP8tP5MEClFvpjJZ7p_6-mZXsl2R\" data-callback='submitBalleghForm' data-action='submit' type=\"button\" class=\"g-recaptcha btn btn-primary isf-btn-primary py-2 px-2 border-0 rounded-pill d-flex align-items-center justify-content-between fw-bold\" style=\"width:fit-content\">\r\n                        <!-- <button type=\"button\" id=\"submitFormBtn\" onclick=\"submitBalleghForm()\" class=\"btn btn-primary fw-bold isf-btn-primary py-2 px-2 border-0 rounded-pill d-flex align-items-center justify-content-between\"> -->\r\n                        <i class=\"bi bi-chevron-right me-4 opacity-0\"><\/i>\r\n                        \u0625\u0631\u0633\u0627\u0644                        <i class=\"bi bi-chevron-right ms-4\"><\/i>\r\n                    <\/button>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n<\/section>\r\n<script>\r\n    var files = [];\r\n    var addedFiles = [];\r\n    var totalFileSize = 0;\r\n\r\n    function triggerFileUpload() {\r\n        $(\"#attachmentsInput\").click();\r\n    }\r\n\r\n    $(\"#attachmentsInput\").on(\"change\", function() {\r\n        handleFileChange(this.files);\r\n    });\r\n\r\n    function handleFileChange(filesArr) {\r\n        document.querySelector(\"#attachmentsList\").innerHTML =\r\n            `   <div class=\"col-3 g-2 ps-0\" id=\"addAttachmentsButton\" onclick=\"triggerFileUpload()\">\r\n                <button class=\"btn btn-outline-light p-1 rounded-3 border border-2 isf-border-primary d-flex align-items-center justify-content-center ratio ratio-1x1\" style=\"border-style: dashed !important;\">\r\n                    <i class=\"fs-1 isf-text-primary d-flex align-items-center justify-content-center bi bi-plus\"><\/i>\r\n                <\/button>\r\n            <\/div>`;\r\n        files = Array.from(filesArr);\r\n        files.forEach((file, i) => {\r\n            if (!addedFiles.some(f => f.name === file.name && f.size === file.size && f.type === file.type)) {\r\n                addedFiles.push(file);\r\n            }\r\n            \/\/ document.querySelector(\"#attachmentsList\").insertAdjacentHTML(\"afterbegin\",\r\n            \/\/     `\r\n            \/\/ <div class=\"col-3 g-2 ps-0\">\r\n            \/\/     <button role=\"span\" class=\"btn btn-outline-light p-1 rounded-3 border border-secondary-subtle text-dark ratio ratio-1x1\">\r\n            \/\/     <span role=\"button\" onclick=\"removeFromList(this, ${i})\" class=\"position-absolute top-0 translate-middle p-1 bg-danger border border-secondary-subtle w-auto h-auto rounded-circle\">\r\n            \/\/         <i class=\"bi bi-x text-white\"><\/i>\r\n            \/\/     <\/span>\r\n            \/\/         <div class=\"position-absolute d-flex align-items-center justify-content-center flex-column\">    \r\n            \/\/             <i class=\"fs-4 bi bi-image mb-2 isf-text-primary\"><\/i>\r\n            \/\/             <span class=\"text-xs line-clamp-2\">${file.name}<\/span>\r\n            \/\/         <\/div>\r\n            \/\/     <\/button>\r\n            \/\/ <\/div>\r\n            \/\/ `\r\n            \/\/ )\r\n        });\r\n        addedFiles.forEach((file, i) => {\r\n            if (!addedFiles.some(f => f.name === file.name && f.size === file.size && f.type === file.type)) {\r\n                addedFiles.push(file);\r\n            }\r\n            document.querySelector(\"#attachmentsList\").insertAdjacentHTML(\"afterbegin\",\r\n                `\r\n            <div class=\"col-3 g-2 ps-0\">\r\n                <button role=\"span\" class=\"btn btn-outline-light p-1 rounded-3 border border-secondary-subtle text-dark ratio ratio-1x1\">\r\n                <span role=\"button\" onclick=\"removeFromList(this, ${i})\" class=\"position-absolute top-0 translate-middle p-1 bg-danger border border-secondary-subtle w-auto h-auto rounded-circle\">\r\n                    <i class=\"bi bi-x text-white\"><\/i>\r\n                <\/span>\r\n                    <div class=\"position-absolute d-flex align-items-center justify-content-center flex-column\">    \r\n                        <i class=\"fs-4 bi bi-image mb-2 isf-text-primary\"><\/i>\r\n                        <span class=\"text-xs line-clamp-2\">${file.name}<\/span>\r\n                    <\/div>\r\n                <\/button>\r\n            <\/div>\r\n            `\r\n            )\r\n        });\r\n    }\r\n\r\n    function removeFromList(button, index) {\r\n        addedFiles = addedFiles.slice(0, index).concat(addedFiles.slice(index + 1));\r\n        const listItem = button.closest(\".col-3.g-2.ps-0\");\r\n        listItem.remove();\r\n        handleFileChange(addedFiles);\r\n    }\r\n\r\n\r\n    function submitBalleghForm(token) {\r\n        var countBalleghValid = 0;\r\n        $(\"#successAlert\").addClass(\"d-none\");\r\n        $(\"#submitFormBtn\").addClass(\"disabled-btn\");\r\n        $(\"#failAlert\").addClass(\"d-none\");\r\n        $(\"#submitFormBtn\").attr(\"disabled\", true);\r\n        var fileInput = document.getElementById('attachmentsInput');\r\n\r\n        var numOfElements = Array.from($(\"[data-field][required]\")).length;\r\n        var data = {};\r\n\r\n        if ($('[data-field=\"phone_number\"]').attr('required') && $('[data-field=\"phone_number\"]').val().length !== 8) {\r\n            $('[data-field=\"phone_number\"]').addClass(\"is-invalid\");\r\n            $('[data-field=\"phone_number\"]').parent().find(\".invalid-feedback\").removeClass(\"d-none\");\r\n            $('[data-field=\"phone_number\"]').focus();\r\n            $(\"#submitFormBtn\").attr(\"disabled\", false);\r\n            $(\"#submitFormBtn\").removeClass(\"disabled-btn\");\r\n            return;\r\n        }\r\n\r\n        $(\"[data-field][required]\").each((i, field) => {\r\n            var $field = $(field);\r\n            var fieldType = $field.attr(\"data-field\");\r\n            var fieldValue = $field.val();\r\n            if ($field.attr(\"required\")) {\r\n                if (fieldType === \"to_be_contacted\" && !$('[data-field=\"to_be_contacted\"]:checked').length) {\r\n                    $field.addClass('is-invalid');\r\n                    $(field).focus();\r\n                    $(\"#submitFormBtn\").removeClass(\"disabled-btn\");\r\n                    $(\"#submitFormBtn\").attr(\"disabled\", false);\r\n                } else if (fieldValue === \"\" || !fieldValue) {\r\n                    $field.addClass('is-invalid');\r\n                    $(field).focus();\r\n                    $(\"#submitFormBtn\").removeClass(\"disabled-btn\");\r\n                    $(\"#submitFormBtn\").attr(\"disabled\", false);\r\n                } else {\r\n                    $field.removeClass('is-invalid');\r\n                    countBalleghValid++;\r\n                    data[field.getAttribute(\"data-field\")] = fieldValue;\r\n                }\r\n            } else {\r\n                $field.removeClass('is-invalid');\r\n                countBalleghValid++;\r\n                data[field.getAttribute(\"data-field\")] = fieldValue;\r\n            }\r\n        });\r\n\r\n        var radioGroup = document.getElementsByName(\"flexRadioDefault\");\r\n        for (var i = 0; i < radioGroup.length; i++) {\r\n            if (radioGroup[i].checked) {\r\n                var selectedValue = radioGroup[i].value;\r\n                data[\"to_be_contacted\"] = selectedValue;\r\n                break;\r\n            }\r\n        }\r\n                data['phone_number'] = $('#phone_number').val();\r\n        data['email'] = $('#email').val();\r\n        data['_token'] = '@an*LqFi2pdG8rF67EfQ@BE';\r\n\r\n\r\n        $(\"#submitFormBtn\").attr(\"disabled\", false);\r\n        if (countBalleghValid < numOfElements) {\r\n            return;\r\n        }\r\n\r\n        var formData = new FormData();\r\n        formData.append('data', JSON.stringify(data));\r\n\r\n        addedFiles.forEach((file, i) => {\r\n            formData.append(`files${i}`, file);\r\n        });\r\n        $.ajax({\r\n            url: 'https:\/\/isf.gov.lb\/wp-content\/themes\/ISF\/services\/ajax\/verify-recaptcha.php',\r\n            method: 'POST',\r\n            data: {\r\n                _s: \"6LfHKTsqAAAAAMzuCZEtSw41-ZxRd7GzuKCuqGO-\",\r\n                _r: token,\r\n            },\r\n            success: function(res) {\r\n                const responseObject = JSON.parse(res);\r\n                if (responseObject.success) {\r\n                    if (responseObject.score > 0.5) {\r\n                        var xhr = new XMLHttpRequest();\r\n                        xhr.open('POST', 'https:\/\/isf.gov.lb\/wp-content\/themes\/ISF\/services\/ajax\/forms\/balleghapi.php', true);\r\n                        xhr.onload = function() {\r\n                            if (xhr.status === 200) {\r\n                                Swal.fire({\r\n                                    text: \"\u062a\u0645 \u062a\u0642\u062f\u064a\u0645 \u0627\u0644\u0634\u0643\u0648\u0649 \u0628\u0646\u062c\u0627\u062d\",\r\n                                    icon: \"success\",\r\n                                }).then((confirm) => {\r\n                                    window.location.reload();\r\n                                });\r\n                            } else {\r\n                                console.error('Failed. Status:', xhr.status);\r\n                                Swal.fire({\r\n                                    text: \"\u0644\u0642\u062f \u062d\u062f\u062b \u062e\u0637\u0623: \" + xhr.statusText,\r\n                                    icon: \"error\",\r\n                                }).then((confirm) => {\r\n                                    window.location.reload();\r\n                                });\r\n                            }\r\n                        };\r\n\r\n                        xhr.send(formData);\r\n                    }\r\n                }\r\n            },\r\n            error: function(err) {\r\n                Swal.fire({\r\n                    text: \"\u0644\u0642\u062f \u062d\u062f\u062b \u062e\u0637\u0623\",\r\n                    icon: \"error\",\r\n                }).then((confirm) => {\r\n                    window.location.reload();\r\n                });\r\n            }\r\n        });\r\n\r\n    }\r\n\r\n    function checkFieldLength(input, maxLength) {\r\n        let value = input.value;\r\n        if (value.length > maxLength) {\r\n            input.value = value.slice(0, maxLength);\r\n        }\r\n    }\r\n    $('input[name=\"flexRadioDefault\"]').change(function() {\r\n        var selectedValue = $(this).val();\r\n        $('[data-field=\"phone_number\"]').attr('required', selectedValue == 1).attr('placeholder', `\u0631\u0642\u0645 \u0627\u0644\u0647\u0627\u062a\u0641 ${selectedValue == 1 ? \"*\" : \"\"}`);\r\n        $('[data-field=\"email\"]').attr('required', selectedValue == 1).attr('placeholder', `\u0627\u0644\u0628\u0631\u064a\u062f \u0627\u0644\u0625\u0644\u0643\u062a\u0631\u0648\u0646\u064a ${selectedValue == 1 ? \"*\" : \"\"}`);\r\n    });\r\n\r\n    $('input[data-field=\"phone_number\"], input[data-field=\"email\"]').on('input', function() {\r\n        var radioButton = $('input[name=\"flexRadioDefault\"]:checked').val();\r\n\r\n        if (radioButton) {\r\n            var phoneNumberFilled = $('[data-field=\"phone_number\"]').val().trim() !== \"\";\r\n            var emailFilled = $('[data-field=\"email\"]').val().trim() !== \"\";\r\n\r\n\r\n            if (!emailFilled) {\r\n                $('[data-field=\"phone_number\"]').attr('required', !emailFilled).attr('placeholder', '\u0631\u0642\u0645 \u0627\u0644\u0647\u0627\u062a\u0641*');\r\n            } else {\r\n                $('[data-field=\"phone_number\"]').attr('required', !emailFilled).attr('placeholder', '\u0631\u0642\u0645 \u0627\u0644\u0647\u0627\u062a\u0641');\r\n            }\r\n            if (!phoneNumberFilled) {\r\n                $('[data-field=\"email\"]').attr('required', !phoneNumberFilled).attr('placeholder', '\u0627\u0644\u0628\u0631\u064a\u062f \u0627\u0644\u0625\u0644\u0643\u062a\u0631\u0648\u0646\u064a*');\r\n            } else {\r\n                $('[data-field=\"email\"]').attr('required', !phoneNumberFilled).attr('placeholder', '\u0627\u0644\u0628\u0631\u064a\u062f \u0627\u0644\u0625\u0644\u0643\u062a\u0631\u0648\u0646\u064a');\r\n            }\r\n        }\r\n\r\n        \/\/ $('[data-field=\"email\"]').attr('required', !phoneNumberFilled);\r\n\r\n        \/\/ Optional: Indicate which field is required visually\r\n        \/\/ if (!emailFilled) {\r\n        \/\/     $('[data-field=\"phone_number\"]').attr('placeholder', `\u0631\u0642\u0645 \u0627\u0644\u0647\u0627\u062a\u0641 *`);\r\n        \/\/     $('[data-field=\"email\"]').attr('placeholder', `\u0627\u0644\u0628\u0631\u064a\u062f \u0627\u0644\u0625\u0644\u0643\u062a\u0631\u0648\u0646\u064a`);\r\n        \/\/ } else if (!phoneNumberFilled) {\r\n        \/\/     $('[data-field=\"phone_number\"]').attr('placeholder', `\u0631\u0642\u0645 \u0627\u0644\u0647\u0627\u062a\u0641`);\r\n        \/\/     $('[data-field=\"email\"]').attr('placeholder', `\u0627\u0644\u0628\u0631\u064a\u062f \u0627\u0644\u0625\u0644\u0643\u062a\u0631\u0648\u0646\u064a *`);\r\n        \/\/ } else {\r\n        \/\/     $('[data-field=\"phone_number\"]').attr('placeholder', `\u0631\u0642\u0645 \u0627\u0644\u0647\u0627\u062a\u0641`);\r\n        \/\/     $('[data-field=\"email\"]').attr('placeholder', `\u0627\u0644\u0628\u0631\u064a\u062f \u0627\u0644\u0625\u0644\u0643\u062a\u0631\u0648\u0646\u064a`);\r\n        \/\/ }\r\n    });\r\n<\/script>\n\n\n\n<section id=\"penalDecisionsBlock\" class=\"w-100 pt-5 pb-3 bg-cover bg-center bg-repeat-none bg-light-subtle\" style=\"background-image: url(https:\/\/isf.gov.lb\/wp-content\/themes\/ISF\/resources\/images\/lines_background.png);\">\r\n    <div class=\"d-flex flex-column align-items-center justify-content-center pb-5\">\r\n        <h2 class=\"fw-bold isf-text-primary\">\r\n            \u0627\u0644\u0642\u0631\u0627\u0631\u0627\u062a \u0627\u0644\u062c\u0632\u0627\u0626\u064a\u0629 \u0628\u0645\u062e\u0627\u0644\u0641\u0627\u062a \u0627\u0644\u0633\u064a\u0631        <\/h2>\r\n        <div class=\"row justify-content-center w-25\">\r\n            <hr class=\"col-1 mt-3 border-3 isf-border-primary opacity-100\" \/>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <div class=\"container mb-5\">\r\n        <div class=\"alert alert-light\">\r\n            <p class=\"m-0\">\u0627\u0644\u0631\u062c\u0627\u0621 \u0625\u062f\u062e\u0627\u0644 \u0627\u0644\u0645\u0639\u0644\u0648\u0645\u0627\u062a \u0628\u0627\u0644\u0644\u063a\u0629 \u0627\u0644\u0639\u0631\u0628\u064a\u0629.<\/p>\r\n        <\/div>\r\n        <div class=\"row px-3\">\r\n            <div class=\"col-12 col-lg-6 g-3\">\r\n                <input data-field=\"first_name\" class=\"form-control form-control-lg fs-6 fw-bold rounded-pill bg-white border isf-border-primary\" style=\"text-align:right\" placeholder=\" \u0627\u0644\u0625\u0633\u0645*\" required>\r\n            <\/div>\r\n            <div class=\"col-12 col-lg-6 g-3\">\r\n                <input data-field=\"last_name\" class=\"form-control form-control-lg fs-6 fw-bold rounded-pill bg-white border isf-border-primary\" style=\"text-align:right\" placeholder=\" \u0627\u0644\u0634\u0647\u0631\u0629*\" required>\r\n            <\/div>\r\n            <div class=\"col-12 col-lg-6 g-3\">\r\n                <input data-field=\"father_name\" class=\"form-control form-control-lg fs-6 fw-bold rounded-pill bg-white border isf-border-primary\" style=\"text-align:right\" placeholder=\" \u0625\u0633\u0645 \u0627\u0644\u0623\u0628*\" required>\r\n            <\/div>\r\n            <div class=\"col-12 col-lg-6 g-3\">\r\n                <input data-field=\"mother_name\" class=\"form-control form-control-lg fs-6 fw-bold rounded-pill bg-white border isf-border-primary\" style=\"text-align:right\" placeholder=\" \u0625\u0633\u0645 \u0627\u0644\u0623\u0645*\" required>\r\n            <\/div>\r\n        <\/div>\r\n        <div class=\"d-flex justify-content-center align-items-center flex-column mt-5\">\r\n            <button type=\"button\" id=\"submitFormBtn\" onclick=\"submitForm()\" class=\"btn btn-primary fw-bold isf-btn-primary py-2 px-2 border-0 rounded-pill d-flex align-items-center justify-content-between mb-4\">\r\n                <i class=\"bi bi-chevron-right me-4 opacity-0\"><\/i>\r\n                \u0628\u062d\u062b                <i class=\"bi bi-chevron-right ms-4\"><\/i>\r\n            <\/button>\r\n        <\/div>\r\n        <div id=\"resultContainer\" class=\"row px-3 mt-3\">\r\n\r\n        <\/div>\r\n    <\/div>\r\n<\/section>\r\n<script>\r\n    var countValid = 0;\r\n\r\n    function submitForm() {\r\n        $(\"#submitFormBtn\").attr(\"disabled\", true);\r\n        var numOfElements = Array.from($(\"[data-field]\")).length;\r\n\r\n        \/\/ Create FormData object and append data\r\n        var formData = new FormData();\r\n\r\n        $(\"[data-field]\").each((i, field) => {\r\n            var $field = $(field);\r\n            var fieldType = $field.attr(\"data-field\");\r\n            var fieldValue = $field.val().trim();\r\n\r\n            if ($field.attr(\"required\")) {\r\n                if (fieldValue === \"\") {\r\n                    $field.addClass('is-invalid');\r\n                    $(\"#submitFormBtn\").attr(\"disabled\", false);\r\n                } else {\r\n                    $field.removeClass('is-invalid');\r\n                    countValid++;\r\n                    formData.append(field.getAttribute(\"data-field\"), fieldValue);\r\n                }\r\n            } else {\r\n                $field.removeClass('is-invalid');\r\n                countValid++;\r\n                formData.append(field.getAttribute(\"data-field\"), fieldValue);\r\n            }\r\n        });\r\n\r\n        if (countValid < numOfElements) {\r\n            return;\r\n        }\r\n\r\n        const locale = \"ar\";\r\n        formData.append(\"lang\", locale);\r\n        formData.append(\"_token\", \"@an*LqFi2pdG8rF67EfQ@BE\");\r\n\r\n        $.ajax({\r\n            type: \"POST\",\r\n            url: \"https:\/\/isf.gov.lb\/api\/service-judicial-decisions\",\r\n            data: formData,\r\n            processData: false,\r\n            contentType: false,\r\n            dataType: \"json\",\r\n            success: function(response) {\r\n                if (Array.isArray(response)) {\r\n                    console.log(response);\r\n                    if (response.length !== 0) {\r\n                        var resHtml = \"\";\r\n                        response.forEach(r => {\r\n                            var title = `${r.fname} ${r.middle} ${r.lname} - \u0627\u0644\u0623\u0645 ${r.mother_name} - \u0645\u0648\u0627\u0644\u064a\u062f ${r.year_of_birth}` +\r\n                                (r.nationality?.trim() ? ` - \u0627\u0644\u062c\u0646\u0633\u064a\u0629 ${r.nationality.trim()}` : '');\r\n\r\n                            \/\/ var title = ``;\r\n                            let firstLine = \"\";\r\n\r\n                            if (r.doc_name) {\r\n                                firstLine += r.doc_name;\r\n                            }\r\n\r\n                            if (r.barkia_masdar) {\r\n                                firstLine += `${firstLine ? ' ' : ''}\u0635\u0627\u062f\u0631 \u0639\u0646 ${r.barkia_masdar}`;\r\n                            }\r\n\r\n                            if (r.num_doc1) {\r\n                                firstLine += `${firstLine ? ' ' : ''}\u0631\u0642\u0645 ${r.num_doc1}`;\r\n                            }\r\n\r\n                            if (r.date_doc) {\r\n                                firstLine += `${firstLine ? ' ' : ''}\u062a\u0627\u0631\u064a\u062e ${r.date_doc}`;\r\n                            }\r\n\r\n                            let secondLine = \"\";\r\n\r\n                            if (r.barkia_masdar) {\r\n                                secondLine += `\u0628\u0637\u0627\u0642\u0629 \u062f\u0644\u064a\u0644 \u0635\u0627\u062f\u0631\u0629 \u0639\u0646 ${r.barkia_masdar}`;\r\n                            }\r\n                            if (r.barkia_num) {\r\n                                secondLine += `${secondLine ? ' ' : ''}\u0631\u0642\u0645 ${r.barkia_num}`;\r\n                            }\r\n\r\n                            if (r.barkia_date) {\r\n                                secondLine += `${secondLine ? ' ' : ''}\u062a\u0627\u0631\u064a\u062e ${r.barkia_date}`;\r\n                            }\r\n\r\n                            \/\/ If none of the parts exist, secondLine will be empty\r\n\r\n                            var thirdLine = `\u0646\u0648\u0639 \u0627\u0644\u0645\u062e\u0627\u0644\u0641\u0629 : ${r.crime ?? ''} \u0648\u0642\u064a\u0645\u0629 \u0627\u0644\u063a\u0631\u0627\u0645\u0629 : ${r.amende ?? ''}`;\r\n                            resHtml += `\r\n                        <div class=\"col-lg-6 mb-3\">\r\n                            <div class=\"card h-100 p-4 rounded-5 bg-white border isf-border-primary p-2\">\r\n                                <div class=\"d-flex flex-column align-items-start justify-content-center\">\r\n                                <p class=\"fw-bold isf-text-primary\">${title}<\/p>\r\n                                <p class=\"fw-bold\">${firstLine}<\/p>\r\n                                <p class=\"fw-bold\">${secondLine}<\/p>\r\n                                <p class=\"fw-bold\">${thirdLine}<\/p>\r\n                                <\/div>\r\n                            <\/div>\r\n                        <\/div>\r\n                        `\r\n                        })\r\n                        $(\"#submitFormBtn\").attr(\"disabled\", false);\r\n                        $(\"#resultContainer\").html(resHtml);\r\n                    } else {\r\n                        resHtml = `\r\n                        <div class=\"col-lg-12\">\r\n                            <div class=\"card h-100 p-4 rounded-5 bg-white border isf-border-primary p-2\">\r\n                                <div class=\"d-flex flex-column align-items-center justify-content-center\">\r\n                                <p class=\"fw-bold\">\u0644\u0645 \u064a\u062a\u0645 \u0627\u0644\u0639\u062b\u0648\u0631 \u0639\u0644\u0649 \u0646\u062a\u0627\u0626\u062c<\/p>\r\n                                <\/div>\r\n                            <\/div>\r\n                        <\/div>\r\n                        `;\r\n                        $(\"#submitFormBtn\").attr(\"disabled\", false);\r\n                        $(\"#resultContainer\").html(resHtml);\r\n                    }\r\n                }\r\n            },\r\n            error: function(xhr, status, error) {\r\n                console.log(xhr.responseText);\r\n                console.error(error);\r\n                $(\"#submitFormBtn\").attr(\"disabled\", false);\r\n            }\r\n        });\r\n    }\r\n\r\n    function generateTable(data) {\r\n        \/\/ Check if data is valid (not undefined or null)\r\n        if (!data || typeof data !== 'object') {\r\n            console.error('Invalid data received:', data);\r\n            return;\r\n        }\r\n\r\n        if (data.length === 0) {\r\n            $(\"#tableContainer\").html(\r\n                `\r\n                <div class=\"alert alert-light isf-text-primary text-center fw-bold fs-5\" role=\"alert\">\r\n                    \u0644\u0627 \u064a\u0648\u062c\u062f \u0646\u062a\u0627\u0626\u062c                <\/div>\r\n                `\r\n            )\r\n            return;\r\n        }\r\n\r\n        const table = document.createElement('table');\r\n        table.classList.add('table', 'table-bordered', 'table-fixed', 'table-responsive', 'm-0');\r\n\r\n        \/\/ Create table headers with Bootstrap classes\r\n        const headers = Object.keys(data[0]);\r\n        const header = document.createElement('thead');\r\n        header.classList.add('table-light');\r\n        const headerRow = document.createElement('tr');\r\n        [\"\u0646\u0648\u0639 \u0627\u0644\u0628\u0644\u0627\u063a\", \"\u0627\u0644\u0645\u0630\u0643\u0631\u0629\", \"\u062a\u0627\u0631\u064a\u062e \u0627\u0644\u0645\u062e\u0627\u0644\u0641\u0629\", \"\u0627\u0644\u0645\u0641\u0631\u0632\u0629\"].forEach((header) => {\r\n            const th = document.createElement('th');\r\n            th.classList.add('isf-text-primary');\r\n            th.textContent = header;\r\n            headerRow.appendChild(th);\r\n        });\r\n        header.appendChild(headerRow);\r\n        table.appendChild(header);\r\n\r\n        const body = document.createElement('tbody');\r\n        \/\/ Create table rows with data and Bootstrap classes\r\n        data.forEach((row) => {\r\n            const dataRow = document.createElement('tr');\r\n            headers.forEach((header) => {\r\n                const td = document.createElement('td');\r\n                td.classList.add('custom-td');\r\n                td.textContent = row[header];\r\n                dataRow.appendChild(td);\r\n            });\r\n            body.appendChild(dataRow);\r\n        });\r\n        table.appendChild(body);\r\n\r\n        \/\/ Wrap the table in a container-fluid for full width\r\n        const tableWrapper = document.createElement('div');\r\n        tableWrapper.classList.add('table-responsive');\r\n\r\n        \/\/ Append the table to the container\r\n        tableWrapper.appendChild(table);\r\n        document.getElementById('tableContainer').innerHTML = ''; \/\/ Empty the container before appending the table\r\n        document.getElementById('tableContainer').appendChild(tableWrapper);\r\n    }\r\n\r\n    function generateMappings() {\r\n        var qwertyChars = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ ';\r\n        var arabicChars = '\u0634 \u0633 \u064a \u0628 \u062a \u0646 \u0627 \u0645 \u0644 \u0643 \u0632 \u0648 \u0647\u0640 \u062f \u062c \u0641 \u063a \u0642 \u0631 \u0635 \u0636 \u062b \u062e \u062d \u0630 \u0632 ';\r\n        var arabicCharArray = arabicChars.split(\" \");\r\n        console.log(arabicCharArray)\r\n\r\n        var mappings = {};\r\n        for (var i = 0; i < qwertyChars.length; i++) {\r\n            mappings[qwertyChars[i]] = arabicCharArray[i];\r\n        }\r\n\r\n        return mappings;\r\n    }\r\n\r\n    var englishToArabicMap = generateMappings();\r\n\r\n    function validateArabicInput(inputField) {\r\n        var arabicPattern = \/[\\u0600-\\u06FF\\s]\/; \/\/ Unicode range for Arabic characters\r\n\r\n        var inputText = inputField.value;\r\n        var convertedText = '';\r\n\r\n        for (var i = 0; i < inputText.length; i++) {\r\n            var char = inputText[i];\r\n            var isArabic = arabicPattern.test(char);\r\n            var replacement = isArabic ? char : (englishToArabicMap[char] || char);\r\n            convertedText += replacement;\r\n        }\r\n\r\n        if (!arabicPattern.test(convertedText)) {\r\n            inputField.value = inputField.value.replace(\/[^\\u0600-\\u06FF\\s]\/g, ''); \/\/ Remove non-Arabic characters\r\n        } else {\r\n            inputField.value = convertedText;\r\n        }\r\n    }\r\n\r\n    function mapToArabicQwerty(inputString) {\r\n        const qwertyToArabicMap = {\r\n            'q': '\u0636',\r\n            'w': '\u0635',\r\n            'e': '\u062b',\r\n            'r': '\u0642',\r\n            't': '\u0641',\r\n            'y': '\u063a',\r\n            'u': '\u0639',\r\n            'i': '\u0647',\r\n            'o': '\u062e',\r\n            'p': '\u062d',\r\n            'a': '\u0634',\r\n            's': '\u0633',\r\n            'd': '\u064a',\r\n            'f': '\u0628',\r\n            'g': '\u0644',\r\n            'h': '\u0627',\r\n            'j': '\u062a',\r\n            'k': '\u0646',\r\n            'l': '\u0645',\r\n            ';': '\u0643',\r\n            '\"': '\u0637',\r\n            'z': '\u0626',\r\n            'x': '\u0621',\r\n            'c': '\u0624',\r\n            'v': '\u0631',\r\n            'b': '\u0644\u0627',\r\n            'n': '\u0649',\r\n            'm': '\u0629',\r\n            ',': '\u0648',\r\n            '.': '\u0632',\r\n            '\/': '\u0638',\r\n            'Q': '\u0636',\r\n            'W': '\u0635',\r\n            'E': '\u062b',\r\n            'R': '\u0642',\r\n            'T': '\u0641',\r\n            'Y': '\u063a',\r\n            'U': '\u0639',\r\n            'I': '\u0647',\r\n            'O': '\u062e',\r\n            'P': '\u062d',\r\n            'A': '\u0634',\r\n            'S': '\u0633',\r\n            'D': '\u064a',\r\n            'F': '\u0628',\r\n            'G': '\u0644',\r\n            'H': '\u0627',\r\n            'J': '\u062a',\r\n            'K': '\u0646',\r\n            'L': '\u0645',\r\n            ':': '\u0643',\r\n            'Z': '~',\r\n            'X': '',\r\n            'C': '}',\r\n            'V': '{',\r\n            'B': '\u0644\u0622',\r\n            'N': '\u0622',\r\n            'M': '\u2019',\r\n            '<': ',',\r\n            '>': '.',\r\n            '?': '\u061f',\r\n            ']': '\u062f',\r\n            '[': '\u062c',\r\n            '\\'': '\u0637',\r\n        };\r\n\r\n        return inputString.split('').map(char => qwertyToArabicMap[char] || char).join('');\r\n    }\r\n\r\n    $(\"input\").on(\"input paste\", function(e) {\r\n        var formControl = $(e.target);\r\n        var valueBeforeChange = formControl.val();\r\n\r\n        var allowedValue = ' ';\r\n        allowedValue += \"\u0636\u0635\u062b\u0642\u0641\u063a\u0639\u0647\u062e\u062d\u062c\u062f\u0634\u0633\u064a\u0628\u0644\u0627\u062a\u0646\u0645\u0643\u0637\u0626\u0621\u0624\u0631\u0644\u0627\u0649\u0629\u0648\u0632\u0638\"; \/\/or any collection in any language you want\r\n        allowedValue += \"0123456789\"; \/\/ normal digits\r\n        allowedValue += \"\u06f0\u06f1\u06f2\u06f3\u06f4\u06f5\u06f6\u06f7\u06f8\u06f9\"; \/\/ arabic digits\r\n        \/\/ allowedValue += \"\u060c.\"; \/\/ allowed symbols\r\n\r\n        var valueAfterChange = '';\r\n        for (var i = 0; i < valueBeforeChange.length; i++) {\r\n            var tmpChar = valueBeforeChange.charAt(i);\r\n            if (allowedValue.indexOf(tmpChar) > -1) valueAfterChange += tmpChar;\r\n            else {\r\n                valueAfterChange += mapToArabicQwerty(tmpChar);\r\n            }\r\n        }\r\n        formControl.val(valueAfterChange);\r\n    });\r\n<\/script>\n\n<section id=\"speedTicketSection\" class=\"w-100 pt-5 pb-3 bg-cover bg-center bg-repeat-none bg-light-subtle\" style=\"background-image: url(https:\/\/isf.gov.lb\/wp-content\/themes\/ISF\/resources\/images\/lines_background.png);\">\r\n    <div class=\"d-flex flex-column align-items-center justify-content-center pb-5\">\r\n        <h2 class=\"fw-bold isf-text-primary text-center\">\r\n            \u0645\u062e\u0627\u0644\u0641\u0627\u062a \u0633\u0631\u0639\u0629 \u0627\u0644\u0631\u0627\u062f\u0627\u0631        <\/h2>\r\n        <div class=\"row justify-content-center w-25\">\r\n            <hr class=\"col-1 mt-3 border-3 isf-border-primary opacity-100\" \/>\r\n        <\/div>\r\n    <\/div>\r\n    <div class=\"container mb-3\">\r\n        <div class=\"row justify-content-center px-3\">\r\n            <div class=\"col-lg-6\">\r\n                <div class=\"row g-3\">\r\n                    <div class=\"col-12 col-lg-12\">\r\n                        <input data-field=\"plate_number\" class=\"form-control form-control-lg fs-6 fw-bold rounded-pill bg-white border isf-border-primary\" placeholder=\"\u0631\u0642\u0645 \u0627\u0644\u0622\u0644\u064a\u0629*\" required>\r\n                    <\/div>\r\n                    <div class=\"col-12 col-lg-12\">\r\n                        <select data-field=\"code\" class=\"form-select form-select-lg fs-6 fw-bold rounded-pill bg-white border isf-border-primary\" required>\r\n                            <option selected disabled value=\"\">\r\n                                \u0631\u0645\u0632 \u0627\u0644\u0622\u0644\u064a\u0629*\r\n                            <\/option>\r\n                                                                <option value=\"0\">\r\n                                        A                                    <\/option>\r\n                                                                <option value=\"1\">\r\n                                        \u0628\u062f\u0648\u0646 \u0631\u0645\u0632                                    <\/option>\r\n                                                                <option value=\"2\">\r\n                                        \u0628 &#8211; B                                    <\/option>\r\n                                                                <option value=\"3\">\r\n                                        \u062c &#8211; G                                    <\/option>\r\n                                                                <option value=\"4\">\r\n                                        \u0631 &#8211; R                                    <\/option>\r\n                                                                <option value=\"5\">\r\n                                        \u0632 &#8211; Z                                    <\/option>\r\n                                                                <option value=\"6\">\r\n                                        \u0635 &#8211; S                                    <\/option>\r\n                                                                <option value=\"7\">\r\n                                        \u0637 &#8211; T                                    <\/option>\r\n                                                                <option value=\"8\">\r\n                                        \u0639 &#8211; J                                    <\/option>\r\n                                                                <option value=\"9\">\r\n                                        P                                    <\/option>\r\n                                                                <option value=\"10\">\r\n                                        \u0645 &#8211; M                                    <\/option>\r\n                                                                <option value=\"11\">\r\n                                        \u0646 &#8211; N                                    <\/option>\r\n                                                                <option value=\"12\">\r\n                                        \u0648 &#8211; O                                    <\/option>\r\n                                                                <option value=\"13\">\r\n                                        Y                                    <\/option>\r\n                                                                <option value=\"14\">\r\n                                        \u0642 &#8211; C                                    <\/option>\r\n                                                                <option value=\"19\">\r\n                                        \u0633\u0639\u0648\u062f\u064a\u0629                                    <\/option>\r\n                                                                <option value=\"20\">\r\n                                        \u0642\u0637\u0631\u064a\u0629                                    <\/option>\r\n                                                                <option value=\"22\">\r\n                                        \u062d\u0645\u0635                                    <\/option>\r\n                                                                <option value=\"23\">\r\n                                        \u0627\u062f\u0644\u0628                                    <\/option>\r\n                                                                <option value=\"24\">\r\n                                        \u062f\u0645\u0634\u0642                                    <\/option>\r\n                                                                <option value=\"25\">\r\n                                        \u0627\u0644\u0643\u0648\u064a\u062a                                    <\/option>\r\n                                                                <option value=\"26\">\r\n                                        \u062f\u0628\u064a                                    <\/option>\r\n                                                                <option value=\"27\">\r\n                                        \u0634\u0627\u0631\u0642\u0629                                    <\/option>\r\n                                                                <option value=\"28\">\r\n                                        \u064a\u0648\u0646\u064a\u0641\u064a\u0644                                    <\/option>\r\n                                                                <option value=\"30\">\r\n                                        \u0633\u0648\u064a\u0633\u0631\u0627                                    <\/option>\r\n                                                                <option value=\"31\">\r\n                                        \u062d\u0644\u0628                                    <\/option>\r\n                                                                <option value=\"32\">\r\n                                        \u062d\u0645\u0627\u0629                                    <\/option>\r\n                                                                <option value=\"33\">\r\n                                        \u0627\u0644\u0623\u0631\u062f\u0646                                    <\/option>\r\n                                                                <option value=\"34\">\r\n                                        \u0627\u0628\u0648 \u0638\u0628\u064a                                    <\/option>\r\n                                                                <option value=\"35\">\r\n                                        BLP                                    <\/option>\r\n                                                                <option value=\"36\">\r\n                                        \u0633\u0648\u0631\u064a\u0629                                    <\/option>\r\n                                                                <option value=\"37\">\r\n                                        \u0627\u0644\u0628\u062d\u0631\u064a\u0646                                    <\/option>\r\n                                                                <option value=\"38\">\r\n                                        \u0627\u0644\u0633\u0648\u064a\u062f\u0627\u0621                                    <\/option>\r\n                                                                <option value=\"39\">\r\n                                        \u0627\u0644\u0644\u0627\u0630\u0642\u064a\u0629                                    <\/option>\r\n                                                                <option value=\"40\">\r\n                                        \u0627\u0644\u0625\u0645\u0627\u0631\u0627\u062a                                    <\/option>\r\n                                                                <option value=\"41\">\r\n                                        \u0637\u0631\u0637\u0648\u0633                                    <\/option>\r\n                                                                <option value=\"43\">\r\n                                        \u0627\u0644\u062d\u0633\u0643\u0629                                    <\/option>\r\n                                                                <option value=\"44\">\r\n                                        \u0643\u0627\u0644\u064a\u0641\u0648\u0631\u0646\u064a\u0627                                    <\/option>\r\n                                                                <option value=\"45\">\r\n                                        \u0644\u0648\u062d\u0629 \u0623\u062c\u0646\u0628\u064a\u0629                                    <\/option>\r\n                                                                <option value=\"46\">\r\n                                        \u062f\u064a\u0631 \u0627\u0644\u0632\u0648\u0631                                    <\/option>\r\n                                                                <option value=\"47\">\r\n                                        \u0639\u064f\u0645\u0627\u0646                                    <\/option>\r\n                                                                <option value=\"48\">\r\n                                        \u062a\u062c\u0631\u0628\u0629                                    <\/option>\r\n                                                                <option value=\"49\">\r\n                                        \u062a\u0631\u0643\u064a\u0627                                    <\/option>\r\n                                                                <option value=\"50\">\r\n                                        \u0627\u0644\u0631\u0642\u0629                                    <\/option>\r\n                                                                <option value=\"51\">\r\n                                        \u062f\u0631\u0639\u0627                                    <\/option>\r\n                                                                <option value=\"55\">\r\n                                        \u0627\u0644\u0639\u0631\u0627\u0642                                    <\/option>\r\n                                                                <option value=\"56\">\r\n                                        \u0646\u064a\u062c\u0631\u064a\u0627                                    <\/option>\r\n                                                    <\/select>\r\n                    <\/div>\r\n                <\/div>\r\n                <div class=\"d-flex justify-content-center align-items-center flex-column mt-5\">\r\n                    <button type=\"button\" id=\"submitFormBtn\" onclick=\"submitForm()\" class=\"btn btn-primary fw-bold isf-btn-primary py-2 px-2 border-0 rounded-pill d-flex align-items-center justify-content-between mb-4\">\r\n                        <i class=\"bi bi-chevron-right me-4 opacity-0\"><\/i>\r\n                        \u0628\u062d\u062b                        <i class=\"bi bi-chevron-right ms-4\"><\/i>\r\n                    <\/button>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n        <div class=\"row justify-content-center px-3\">\r\n            <div class=\"col-lg-6 px-3\">\r\n                <div class=\"col\">\r\n                    <div id=\"tableContainer\"><\/div>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n    <div class=\"container\">\r\n\r\n    <\/div>\r\n<\/section>\r\n<script>\r\n    var countValid = 0;\r\n\r\n    function submitForm() {\r\n        $(\"#submitFormBtn\").attr(\"disabled\", true);\r\n        var numOfElements = Array.from($(\"[data-field]\")).length;\r\n\r\n        \/\/ Create FormData object and append data\r\n        var formData = new FormData();\r\n\r\n        $(\"[data-field]\").each((i, field) => {\r\n            var $field = $(field);\r\n            var fieldType = $field.attr(\"data-field\");\r\n            var fieldValue = $field.val().trim();\r\n\r\n            if ($field.attr(\"required\")) {\r\n                if (fieldValue === \"\") {\r\n                    $field.addClass('is-invalid');\r\n                    $(\"#submitFormBtn\").attr(\"disabled\", false);\r\n                } else {\r\n                    $field.removeClass('is-invalid');\r\n                    countValid++;\r\n                    formData.append(field.getAttribute(\"data-field\"), fieldValue);\r\n                }\r\n            } else {\r\n                $field.removeClass('is-invalid');\r\n                countValid++;\r\n                formData.append(field.getAttribute(\"data-field\"), fieldValue);\r\n            }\r\n        });\r\n\r\n        if (countValid < numOfElements) {\r\n            return;\r\n        }\r\n                formData.append(\"_token\", \"@an*LqFi2pdG8rF67EfQ@BE\");\r\n        formData.append(\"lang\", \"ar\")\r\n\r\n        $.ajax({\r\n            type: \"POST\",\r\n            url: \"https:\/\/isf.gov.lb\/api\/service-speed-ticket\",\r\n            data: formData,\r\n            processData: false,\r\n            contentType: false,\r\n            dataType: \"json\",\r\n            success: function(response) {\r\n                console.log(response);\r\n                generateTable(response);\r\n                $(\"#submitFormBtn\").attr(\"disabled\", false);\r\n            },\r\n            error: function(xhr, status, error) {\r\n                console.log(xhr.responseText);\r\n                console.error(error);\r\n            }\r\n        });\r\n    }\r\n\r\n    function generateTable(data) {\r\n        \/\/ Check if data is valid (not undefined or null)\r\n        if (!data || typeof data !== 'object') {\r\n            console.error('Invalid data received:', data);\r\n            return;\r\n        }\r\n\r\n        if (data.length === 0) {\r\n            $(\"#tableContainer\").html(\r\n                `\r\n                <div class=\"alert alert-light isf-text-primary text-center fw-bold fs-5\" role=\"alert\">\r\n                    \u0644\u0627 \u064a\u0648\u062c\u062f \u0646\u062a\u0627\u0626\u062c                <\/div>\r\n                `\r\n            )\r\n            return;\r\n        }\r\n\r\n        const table = document.createElement('table');\r\n        table.classList.add('table', 'table-bordered', 'table-fixed', 'table-responsive', 'm-0', 'text-center');\r\n        table.style.tableLayout = 'fixed';\r\n        \/\/ Create table headers with Bootstrap classes\r\n        const headers = Object.keys(data[0]);\r\n        const header = document.createElement('thead');\r\n        header.classList.add('table-light');\r\n        const headerRow = document.createElement('tr');\r\n        [\"\u062a\u0627\u0631\u064a\u062e \u0627\u0644\u0645\u062e\u0627\u0644\u0641\u0629\", \"\u0627\u0644\u0645\u0641\u0631\u0632\u0629\"].forEach((header) => {\r\n            const th = document.createElement('th');\r\n            th.classList.add('isf-text-primary');\r\n            th.textContent = header;\r\n            headerRow.appendChild(th);\r\n        });\r\n        header.appendChild(headerRow);\r\n        table.appendChild(header);\r\n\r\n        const body = document.createElement('tbody');\r\n        \/\/ Create table rows with data and Bootstrap classes\r\n        data.forEach((row) => {\r\n            const dataRow = document.createElement('tr');\r\n            headers.forEach((header) => {\r\n                const td = document.createElement('td');\r\n                td.classList.add('custom-td');\r\n                td.textContent = row[header];\r\n                dataRow.appendChild(td);\r\n            });\r\n            body.appendChild(dataRow);\r\n        });\r\n        table.appendChild(body);\r\n\r\n        \/\/ Wrap the table in a container-fluid for full width\r\n        const tableWrapper = document.createElement('div');\r\n        tableWrapper.classList.add('table-responsive');\r\n\r\n        \/\/ Append the table to the container\r\n        tableWrapper.appendChild(table);\r\n        document.getElementById('tableContainer').innerHTML = ''; \/\/ Empty the container before appending the table\r\n        document.getElementById('tableContainer').appendChild(tableWrapper);\r\n    }\r\n<\/script>\n\n<section id=\"mechanicFeesSection\" class=\"w-100 pt-5 pb-3 bg-cover bg-center bg-repeat-none bg-light-subtle\" style=\"background-image: url(https:\/\/isf.gov.lb\/wp-content\/themes\/ISF\/resources\/images\/lines_background.png);\">\r\n    <div class=\"d-flex flex-column align-items-center justify-content-center pb-5\">\r\n        <h2 class=\"fw-bold isf-text-primary\">\r\n            \u0631\u0633\u0648\u0645 \u0627\u0644\u0645\u064a\u0643\u0627\u0646\u064a\u0643        <\/h2>\r\n        <div class=\"row justify-content-center w-25\">\r\n            <hr class=\"col-1 mt-3 border-3 isf-border-primary opacity-100\" \/>\r\n        <\/div>\r\n    <\/div>\r\n    <div class=\"container mb-5\">\r\n        <div class=\"row px-3 g-3 justify-content-center\">\r\n            <div class=\"col-lg-8\">\r\n                <div class=\"row\">\r\n                    <div class=\"col-12 col-lg-6 mb-3\">\r\n                        <select data-field=\"category\" class=\"form-select form-select-lg fs-6 fw-bold rounded-pill bg-white border isf-border-primary\" required>\r\n                            <option selected disabled value=\"\">\r\n                                \u0627\u0644\u0641\u0626\u0629*\r\n                            <\/option>\r\n                                                                <option value=\"1\">\r\n                                        \u0633\u064a\u0627\u0631\u0627\u062a \u0633\u064a\u0627\u062d\u0629 \u062e\u0635\u0648\u0635\u064a\u0629                                    <\/option>\r\n                                                                <option value=\"2\">\r\n                                        \u062f\u0631\u0627\u062c\u0627\u062a \u0646\u0627\u0631\u064a\u0629 \u063a\u064a\u0631 \u0645\u0639\u062f\u0629 \u0644\u0644\u0646\u0642\u0644                                    <\/option>\r\n                                                                <option value=\"3\">\r\n                                        \u0633\u064a\u0627\u0631\u0627\u062a \u0627\u0644\u0623\u0648\u062a\u0648\u0628\u064a\u0633 \u0627\u0644\u062e\u0635\u0648\u0635\u064a\u0629 \u0648\u0627\u0644\u0625\u0633\u0639\u0627\u0641 \u0648\u0627\u0644\u0625\u062f\u0627\u0631\u0627\u062a \u0627\u0644\u0639\u0627\u0645\u0629 &#8230;                                    <\/option>\r\n                                                                <option value=\"4\">\r\n                                        \u0627\u0644\u0633\u064a\u0627\u0631\u0627\u062a \u0648\u0627\u0644\u0622\u0644\u064a\u0627\u062a \u0648 \u0627\u0644\u062f\u0631\u0627\u062c\u0627\u062a \u0627\u0644\u062e\u0635\u0648\u0635\u064a\u0629 \u0627\u0644\u0645\u0639\u062f\u0629 \u0644\u0644\u0646\u0642\u0644                                    <\/option>\r\n                                                                <option value=\"5\">\r\n                                        \u0633\u064a\u0627\u0631\u0627\u062a \u0633\u064a\u0627\u062d\u0629 \u0639\u0645\u0648\u0645\u064a\u0629                                    <\/option>\r\n                                                                <option value=\"6\">\r\n                                        \u0633\u064a\u0627\u0631\u0627\u062a \u0627\u0644\u0623\u0648\u062a\u0648\u0628\u064a\u0633 \u0648\u0627\u0644\u0645\u064a\u0643\u0631\u0648\u0628\u0627\u0635 \u0627\u0644\u0639\u0645\u0648\u0645\u064a\u0629                                    <\/option>\r\n                                                                <option value=\"7\">\r\n                                        \u0633\u064a\u0627\u0631\u0627\u062a \u0627\u0644\u0634\u062d\u0646 \u0648\u0627\u0644\u0635\u0647\u0627\u0631\u064a\u062c \u0627\u0644\u0639\u0645\u0648\u0645\u064a\u0629                                     <\/option>\r\n                                                    <\/select>\r\n                    <\/div>\r\n                    <div class=\"col-12 col-lg-6 mb-3\">\r\n                        <select data-field=\"horse\" class=\"form-select form-select-lg fs-6 fw-bold rounded-pill bg-white border isf-border-primary\" required>\r\n                            <option selected disabled value=\"\">\r\n                                \u0639\u062f\u062f \u0627\u0644\u0623\u062d\u0635\u0646\u0629*\r\n                            <\/option>\r\n                                                                <option value=\"1\">\r\n                                        01-03                                    <\/option>\r\n                                                                <option value=\"2\">\r\n                                        04-10                                    <\/option>\r\n                                                                <option value=\"3\">\r\n                                        11-20                                                  <\/option>\r\n                                                                <option value=\"4\">\r\n                                        21-30                                                  <\/option>\r\n                                                                <option value=\"5\">\r\n                                        31-40                                                     <\/option>\r\n                                                                <option value=\"6\">\r\n                                        41-50                                                <\/option>\r\n                                                                <option value=\"7\">\r\n                                        51 \u0648\u0645\u0627 \u0641\u0648\u0642                                    <\/option>\r\n                                                    <\/select>\r\n                    <\/div>\r\n                    <div class=\"col-12 col-lg-6 mb-3\">\r\n                        <input data-field=\"plate_number\" type=\"number\" class=\"text-start form-control form-control-lg fs-6 fw-bold rounded-pill bg-white border isf-border-primary\" placeholder=\"\u0631\u0642\u0645 \u0627\u0644\u0622\u0644\u064a\u0629*\" required>\r\n                    <\/div>\r\n                    <div class=\"col-12 col-lg-6 mb-3\">\r\n                        <select data-field=\"year\" class=\"form-select form-select-lg fs-6 fw-bold rounded-pill bg-white border isf-border-primary\" required>\r\n                            <option value=\"\">\r\n                                \u062a\u0627\u0631\u064a\u062e \u0627\u0644\u0635\u0646\u0639*\r\n                            <\/option>\r\n                                                                <option value=\"1\">\r\n                                        2012 \u0648\u0645\u0627 \u0642\u0628\u0644                                    <\/option>\r\n                                                                <option value=\"2\">\r\n                                        2013-2020                                    <\/option>\r\n                                                                <option value=\"3\">\r\n                                        2021-2023                                    <\/option>\r\n                                                                <option value=\"4\">\r\n                                        2024-2025                                    <\/option>\r\n                                                    <\/select>\r\n                    <\/div>\r\n                    <div class=\"col-12 col-lg-6 mb-3\">\r\n                        <select data-field=\"plate_code\" class=\"form-select form-select-lg fs-6 fw-bold rounded-pill bg-white border isf-border-primary\" required>\r\n                            <option selected disabled value=\"\">\r\n                                \u0631\u0645\u0632 \u0627\u0644\u0622\u0644\u064a\u0629*\r\n                            <\/option>\r\n                                                                <option value=\"0\">\r\n                                        A &#8211; \u062f\u0648\u0646 \u0631\u0645\u0632                                    <\/option>\r\n                                                                <option value=\"2\">\r\n                                        B                                    <\/option>\r\n                                                                <option value=\"3\">\r\n                                        G                                    <\/option>\r\n                                                                <option value=\"4\">\r\n                                        R                                    <\/option>\r\n                                                                <option value=\"5\">\r\n                                        Z                                    <\/option>\r\n                                                                <option value=\"6\">\r\n                                        S                                    <\/option>\r\n                                                                <option value=\"7\">\r\n                                        T                                    <\/option>\r\n                                                                <option value=\"8\">\r\n                                        J                                    <\/option>\r\n                                                                <option value=\"9\">\r\n                                        P                                    <\/option>\r\n                                                                <option value=\"10\">\r\n                                        M                                    <\/option>\r\n                                                                <option value=\"11\">\r\n                                        N                                    <\/option>\r\n                                                                <option value=\"12\">\r\n                                        O                                    <\/option>\r\n                                                                <option value=\"13\">\r\n                                        Y                                    <\/option>\r\n                                                                <option value=\"14\">\r\n                                        C                                    <\/option>\r\n                                                                <option value=\"15\">\r\n                                        C1                                    <\/option>\r\n                                                                <option value=\"16\">\r\n                                        AG &#8211; AP &#8211; MP                                    <\/option>\r\n                                                    <\/select>\r\n                    <\/div>\r\n                <\/div>\r\n                <div class=\"d-flex justify-content-center align-items-center flex-column mt-5\">\r\n                    <button type=\"button\" id=\"submitFormBtn\" onclick=\"submitForm()\" class=\"btn btn-primary fw-bold isf-btn-primary py-2 px-2 border-0 rounded-pill d-flex align-items-center justify-content-between mb-4\">\r\n                        <i class=\"bi bi-chevron-right me-4 opacity-0\"><\/i>\r\n                        \u0628\u062d\u062b                        <i class=\"bi bi-chevron-right ms-4\"><\/i>\r\n                    <\/button>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n        <div class=\"row justify-content-center px-3\">\r\n            <div id=\"tableContainer\" class=\"d-none col-lg-6 row px-3 mt-3\">\r\n                <div class=\"col-lg-12\">\r\n                    <table class=\"table table-bordered text-center\" style=\"table-layout:fixed\">\r\n                        <thead>\r\n                            <tr>\r\n                                <th>\r\n                                    \u062a\u0627\u0631\u064a\u062e \u0627\u0644\u0625\u0633\u062a\u062d\u0642\u0627\u0642                                <\/th>\r\n                                <th>\r\n                                    \u0627\u0644\u0631\u0633\u0648\u0645 \u0627\u0644\u0645\u062a\u0648\u062c\u0628\u0629                                <\/th>\r\n                            <\/tr>\r\n                        <\/thead>\r\n                        <tbody id=\"monthsBody\">\r\n                        <\/tbody>\r\n                    <\/table>\r\n                <\/div>\r\n                <!-- <div class=\"col-lg-6\">\r\n                <table class=\"table table-bordered\">\r\n                    <thead>\r\n                        <tr>\r\n                            <th>\r\n                                \u0627\u0644\u0631\u0633\u0648\u0645 \u0627\u0644\u0645\u062a\u0648\u062c\u0628\u0629                            <\/th>\r\n                        <\/tr>\r\n                    <\/thead>\r\n                    <tbody id=\"amountBody\">\r\n                    <\/tbody>\r\n                <\/table>\r\n            <\/div> -->\r\n            <\/div>\r\n        <\/div>\r\n        <!-- <div class=\"d-flex justify-content-center align-items-center flex-column mt-5\">\r\n            <button type=\"button\" id=\"submitFormBtn\" onclick=\"submitForm()\" class=\"btn btn-primary fw-bold isf-btn-primary py-2 px-2 border-0 rounded-pill d-flex align-items-center justify-content-between mb-4\">\r\n                <i class=\"bi bi-chevron-right me-4 opacity-0\"><\/i>\r\n                \u0628\u062d\u062b                <i class=\"bi bi-chevron-right ms-4\"><\/i>\r\n            <\/button>\r\n        <\/div> -->\r\n        <!-- <div id=\"tableContainer\" class=\"d-none row px-3 mt-3\">\r\n            <div class=\"col-lg-12\">\r\n                <table class=\"table table-bordered\">\r\n                    <thead>\r\n                        <tr>\r\n                            <th>\r\n                                \u062a\u0627\u0631\u064a\u062e \u0627\u0644\u0625\u0633\u062a\u062d\u0642\u0627\u0642                            <\/th>\r\n                            <th>\r\n                                \u0627\u0644\u0631\u0633\u0648\u0645 \u0627\u0644\u0645\u062a\u0648\u062c\u0628\u0629                            <\/th>\r\n                        <\/tr>\r\n                    <\/thead>\r\n                    <tbody id=\"monthsBody\">\r\n                    <\/tbody>\r\n                <\/table>\r\n            <\/div>\r\n            <div class=\"col-lg-6\">\r\n                <table class=\"table table-bordered\">\r\n                    <thead>\r\n                        <tr>\r\n                            <th>\r\n                                \u0627\u0644\u0631\u0633\u0648\u0645 \u0627\u0644\u0645\u062a\u0648\u062c\u0628\u0629                            <\/th>\r\n                        <\/tr>\r\n                    <\/thead>\r\n                    <tbody id=\"amountBody\">\r\n                    <\/tbody>\r\n                <\/table>\r\n            <\/div>\r\n        <\/div> -->\r\n    <\/div>\r\n<\/section>\r\n<script>\r\n    var countValid = 0;\r\n\r\n    function submitForm() {\r\n        $(\"#submitFormBtn\").attr(\"disabled\", true);\r\n        $(\"#monthsBody\").empty();\r\n        $(\"#amountBody\").empty();\r\n        var numOfElements = Array.from($(\"[data-field]\")).length;\r\n\r\n        \/\/ Create FormData object and append data\r\n        var formData = new FormData();\r\n\r\n        $(\"[data-field]\").each((i, field) => {\r\n            var $field = $(field);\r\n            var fieldType = $field.attr(\"data-field\");\r\n            var fieldValue = $field.val().trim();\r\n\r\n            if ($field.attr(\"required\")) {\r\n                if (fieldValue === \"\") {\r\n                    $field.addClass('is-invalid');\r\n                    $(\"#submitFormBtn\").attr(\"disabled\", false);\r\n                } else {\r\n                    $field.removeClass('is-invalid');\r\n                    countValid++;\r\n                    formData.append(field.getAttribute(\"data-field\"), fieldValue);\r\n                }\r\n            } else {\r\n                $field.removeClass('is-invalid');\r\n                countValid++;\r\n                formData.append(field.getAttribute(\"data-field\"), fieldValue);\r\n            }\r\n        });\r\n\r\n        if (countValid < numOfElements) {\r\n            return;\r\n        }\r\n                formData.append(\"_token\", \"@an*LqFi2pdG8rF67EfQ@BE\");\r\n        formData.append(\"lang\", \"ar\")\r\n        $.ajax({\r\n            type: \"POST\",\r\n            url: \"https:\/\/isf.gov.lb\/api\/service-mechanic-fees\",\r\n            data: formData,\r\n            processData: false,\r\n            contentType: false,\r\n            dataType: \"json\",\r\n            success: function(response) {\r\n                console.log(response);\r\n                $(\"#tableContainer\").removeClass(\"d-none\");\r\n                if (response.months.length > 0 && response.amount.length > 0) {\r\n                    \/\/ Assuming both arrays have the same length, you might need to adjust if they have different lengths.\r\n                    for (let i = 0; i < response.months.length || i < response.amount.length; i++) {\r\n                        let amount = response.amount[i] || ''; \/\/ Get the amount or use an empty string if undefined\r\n\r\n                        if (amount) {\r\n                            amount = parseFloat(amount).toLocaleString(); \/\/ Format the number with commas\r\n                        }\r\n                        $(\"#monthsBody\").append(\r\n                            `\r\n            <tr>\r\n                <td>${response.months[i] || ''}<\/td>\r\n                <td>${amount || ''} \u0644.\u0644.<\/td>\r\n            <\/tr>\r\n            `\r\n                        );\r\n                    }\r\n                } else {\r\n                    $(\"#monthsBody\").append(\r\n                        `\r\n        <tr>\r\n            <td colspan=\"2\">\u0644\u0627 \u064a\u0648\u062c\u062f \u0646\u062a\u0627\u0626\u062c<\/td>\r\n        <\/tr>\r\n        `\r\n                    );\r\n                }\r\n\r\n                \/\/ if (response.months.length > 0) {\r\n                \/\/     response.months.forEach(m => {\r\n                \/\/         $(\"#monthsBody\").append(\r\n                \/\/             `\r\n                \/\/             <tr>\r\n                \/\/                 <td>${m}<\/td>\r\n                \/\/             <\/tr>\r\n                \/\/             `\r\n                \/\/         )\r\n                \/\/     })\r\n                \/\/ } else {\r\n                \/\/     $(\"#monthsBody\").append(\r\n                \/\/         `\r\n                \/\/         <tr>\r\n                \/\/             <td>\u0644\u0627 \u064a\u0648\u062c\u062f \u0646\u062a\u0627\u0626\u062c<\/td>\r\n                \/\/         <\/tr>\r\n                \/\/         `\r\n                \/\/     )\r\n                \/\/ }\r\n                \/\/ if (response.amount.length > 0) {\r\n                \/\/     response.amount.forEach(a => {\r\n                \/\/         $(\"#amountBody\").append(\r\n                \/\/             `\r\n                \/\/             <tr>\r\n                \/\/                 <td>${a}<\/td>\r\n                \/\/             <\/tr>\r\n                \/\/             `\r\n                \/\/         )\r\n                \/\/     })\r\n                \/\/ } else {\r\n                \/\/     $(\"#amountBody\").append(\r\n                \/\/         `\r\n                \/\/         <tr>\r\n                \/\/             <td>\u0644\u0627 \u064a\u0648\u062c\u062f \u0646\u062a\u0627\u0626\u062c<\/td>\r\n                \/\/         <\/tr>\r\n                \/\/         `\r\n                \/\/     )\r\n                \/\/ }\r\n                $(\"#submitFormBtn\").attr(\"disabled\", false);\r\n            },\r\n            error: function(xhr, status, error) {\r\n                console.log(xhr.responseText);\r\n                console.error(error);\r\n            }\r\n        });\r\n\r\n    }\r\n<\/script>\r\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"user-services.php","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"class_list":["post-958","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/isf.gov.lb\/ar\/wp-json\/wp\/v2\/pages\/958","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/isf.gov.lb\/ar\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/isf.gov.lb\/ar\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/isf.gov.lb\/ar\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/isf.gov.lb\/ar\/wp-json\/wp\/v2\/comments?post=958"}],"version-history":[{"count":21,"href":"https:\/\/isf.gov.lb\/ar\/wp-json\/wp\/v2\/pages\/958\/revisions"}],"predecessor-version":[{"id":1030,"href":"https:\/\/isf.gov.lb\/ar\/wp-json\/wp\/v2\/pages\/958\/revisions\/1030"}],"wp:attachment":[{"href":"https:\/\/isf.gov.lb\/ar\/wp-json\/wp\/v2\/media?parent=958"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}