\u0627\u0644\u062d\u0627\u0633\u0628\u0629 \u0627\u0644\u0639\u0645\u0627\u0644\u064a\u0629 \u0627\u0644\u0633\u0639\u0648\u062f\u064a\u0629<\/title>\r\n <style>\r\n * {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n }\r\n\r\n body {\r\n font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\r\n direction: rtl;\r\n background: transparent;\r\n min-height: 100vh;\r\n padding: 20px;\r\n }\r\n\r\n .container {\r\n max-width: 1200px;\r\n margin: 0 auto;\r\n background: transparent;\r\n overflow: visible;\r\n }\r\n\r\n .header {\r\n background: ;\r\n color: white;\r\n padding: 40px;\r\n text-align: center;\r\n position: relative;\r\n overflow: hidden;\r\n border-radius: 15px;\r\n }\r\n\r\n .header h1 {\r\n font-size: 2.5rem;\r\n margin-bottom: 10px;\r\n position: relative;\r\n z-index: 1;\r\n }\r\n\r\n .header p {\r\n font-size: 1.1rem;\r\n opacity: 0.9;\r\n position: relative;\r\n z-index: 1;\r\n color: #000000;\r\n }\r\n\r\n .features {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\r\n gap: 20px;\r\n padding: 30px 0;\r\n background: transparent;\r\n }\r\n\r\n .feature {\r\n display: flex;\r\n align-items: center;\r\n gap: 15px;\r\n padding: 20px;\r\n background: rgba(255, 255, 255, 0.9);\r\n border-radius: 10px;\r\n border: 2px solid #E84A00;\r\n transition: transform 0.3s ease;\r\n }\r\n\r\n .feature:hover {\r\n transform: translateY(-3px);\r\n background: rgba(232, 74, 0, 0.1);\r\n }\r\n\r\n .feature-icon {\r\n width: 50px;\r\n height: 50px;\r\n background: linear-gradient(135deg, #E84A00, #D52C00);\r\n border-radius: 50%;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n color: white;\r\n font-size: 20px;\r\n }\r\n\r\n .form-container {\r\n padding: 40px 20px;\r\n }\r\n\r\n .form-grid {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\r\n gap: 30px;\r\n margin-bottom: 40px;\r\n }\r\n\r\n .form-group {\r\n position: relative;\r\n }\r\n\r\n .form-group label {\r\n display: block;\r\n margin-bottom: 8px;\r\n font-weight: 600;\r\n color: #000000;\r\n font-size: 14px;\r\n }\r\n\r\n .form-group input,\r\n .form-group select {\r\n width: 100%;\r\n padding: 15px;\r\n border: 2px solid #E84A00;\r\n border-radius: 10px;\r\n font-size: 16px;\r\n transition: all 0.3s ease;\r\n background: rgba(255, 255, 255, 0.9);\r\n color: #000000;\r\n }\r\n\r\n .form-group input:focus,\r\n .form-group select:focus {\r\n outline: none;\r\n border-color: #D52C00;\r\n background: white;\r\n }\r\n\r\n .hidden {\r\n display: none !important;\r\n }\r\n\r\n .switch-group {\r\n display: flex;\r\n gap: 10px;\r\n margin-top: 8px;\r\n }\r\n\r\n .switch-btn {\r\n flex: 1;\r\n padding: 12px;\r\n border: 2px solid #E84A00;\r\n background: rgba(255, 255, 255, 0.9);\r\n border-radius: 8px;\r\n cursor: pointer;\r\n transition: all 0.3s ease;\r\n text-align: center;\r\n font-weight: 500;\r\n color: #000000;\r\n }\r\n\r\n .switch-btn.active {\r\n background: #E84A00;\r\n color: white;\r\n border-color: #E84A00;\r\n }\r\n\r\n .switch-btn:hover {\r\n background: #D52C00;\r\n color: white;\r\n border-color: #D52C00;\r\n }\r\n\r\n .buttons {\r\n display: flex;\r\n gap: 20px;\r\n justify-content: center;\r\n flex-wrap: wrap;\r\n }\r\n\r\n .btn {\r\n padding: 15px 40px;\r\n border: none;\r\n border-radius: 10px;\r\n font-size: 16px;\r\n font-weight: 600;\r\n cursor: pointer;\r\n transition: all 0.3s ease;\r\n min-width: 150px;\r\n }\r\n\r\n .btn-primary {\r\n background: linear-gradient(135deg, #E84A00, #D52C00);\r\n color: white;\r\n border: 2px solid #E84A00;\r\n }\r\n\r\n .btn-primary:hover {\r\n transform: translateY(-2px);\r\n background: linear-gradient(135deg, #D52C00, #C10E00);\r\n border-color: #C10E00;\r\n }\r\n\r\n .btn-secondary {\r\n background: rgba(255, 255, 255, 0.9);\r\n color: #C10E00;\r\n border: 2px solid #C10E00;\r\n }\r\n\r\n .btn-secondary:hover {\r\n background: #C10E00;\r\n color: white;\r\n border-color: #C10E00;\r\n }\r\n\r\n .results {\r\n margin-top: 40px;\r\n padding: 30px;\r\n background: rgba(255, 255, 255, 0.9);\r\n border-radius: 15px;\r\n border: 2px solid #E84A00;\r\n }\r\n\r\n .results h3 {\r\n color: #000000;\r\n margin-bottom: 20px;\r\n font-size: 1.5rem;\r\n text-align: center;\r\n }\r\n\r\n .result-item {\r\n display: flex;\r\n justify-content: space-between;\r\n padding: 15px;\r\n margin: 10px 0;\r\n background: rgba(255, 255, 255, 0.9);\r\n border-radius: 8px;\r\n border: 1px solid #E84A00;\r\n }\r\n\r\n .result-label {\r\n font-weight: 600;\r\n color: #000000;\r\n }\r\n\r\n .result-value {\r\n font-weight: bold;\r\n color: #D52C00;\r\n font-size: 1.1rem;\r\n }\r\n\r\n .total-result {\r\n background: linear-gradient(135deg, #E84A00, #D52C00);\r\n color: white;\r\n font-size: 1.2rem;\r\n margin-top: 20px;\r\n border: 2px solid #C10E00;\r\n }\r\n\r\n .total-result .result-value {\r\n color: white;\r\n }\r\n\r\n .error {\r\n color: #C10E00;\r\n font-size: 12px;\r\n margin-top: 5px;\r\n }\r\n\r\n @media (max-width: 768px) {\r\n .header h1 {\r\n font-size: 2rem;\r\n }\r\n \r\n .form-grid {\r\n grid-template-columns: 1fr;\r\n }\r\n \r\n .buttons {\r\n flex-direction: column;\r\n align-items: center;\r\n }\r\n \r\n .btn {\r\n width: 100%;\r\n max-width: 300px;\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <div class=\"container\">\r\n <div class=\"header\">\r\n <h1>\u0627\u0644\u062d\u0627\u0633\u0628\u0629 \u0627\u0644\u0639\u0645\u0627\u0644\u064a\u0629 \u0627\u0644\u0633\u0639\u0648\u062f\u064a\u0629<\/h1>\r\n <p>\u0627\u062d\u0633\u0628 \u0645\u0633\u062a\u062d\u0642\u0627\u062a\u0643 \u0627\u0644\u0639\u0645\u0627\u0644\u064a\u0629 \u0648\u0641\u0642\u0627\u064b \u0644\u0646\u0638\u0627\u0645 \u0627\u0644\u0639\u0645\u0644 \u0627\u0644\u0633\u0639\u0648\u062f\u064a<\/p>\r\n <\/div>\r\n\r\n <div class=\"features\">\r\n <div class=\"feature\">\r\n <div class=\"feature-icon\">\ud83d\udcca<\/div>\r\n <div>\u062a\u0642\u0631\u064a\u0631 \u0645\u0639\u062a\u0645\u062f<\/div>\r\n <\/div>\r\n <div class=\"feature\">\r\n <div class=\"feature-icon\">\u26a1<\/div>\r\n <div>\u0645\u0631\u0648\u0646\u0629 \u0641\u064a \u0627\u0644\u0645\u062f\u062e\u0644\u0627\u062a<\/div>\r\n <\/div>\r\n <div class=\"feature\">\r\n <div class=\"feature-icon\">\ud83d\ude80<\/div>\r\n <div>\u0646\u062a\u0627\u0626\u062c \u0641\u0648\u0631\u064a\u0629<\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"form-container\">\r\n <form id=\"laborForm\" action=\"\">\r\n <div class=\"form-grid\">\r\n <div class=\"form-group\">\r\n <label for=\"name\">\u0627\u0633\u0645 \u0627\u0644\u0645\u0648\u0638\u0641<\/label>\r\n <input type=\"text\" id=\"name\" name=\"name\" placeholder=\"\u0623\u062f\u062e\u0644 \u0627\u0633\u0645 \u0627\u0644\u0645\u0648\u0638\u0641\">\r\n <\/div>\r\n\r\n <div class=\"form-group\">\r\n <label for=\"email\">\u0627\u0644\u0628\u0631\u064a\u062f \u0627\u0644\u0625\u0644\u0643\u062a\u0631\u0648\u0646\u064a<\/label>\r\n <input type=\"email\" id=\"email\" name=\"email\" placeholder=\"name@domain.com\">\r\n <\/div>\r\n\r\n <div class=\"form-group\">\r\n <label for=\"mobile\">\u0631\u0642\u0645 \u0627\u0644\u062c\u0648\u0627\u0644<\/label>\r\n <input type=\"tel\" id=\"mobile\" name=\"mobile\" placeholder=\"5xxxxxxxx\" maxlength=\"9\">\r\n <\/div>\r\n\r\n <div class=\"form-group\">\r\n <label for=\"serviceStartDate\">Start date of service<\/label>\r\n <input type=\"date\" id=\"serviceStartDate\" name=\"serviceStartDate\" required>\r\n <\/div>\r\n\r\n <div class=\"form-group\">\r\n <label for=\"serviceEndDate\">End of service date<\/label>\r\n <input type=\"date\" id=\"serviceEndDate\" name=\"serviceEndDate\" required>\r\n <\/div>\r\n\r\n <div class=\"form-group\">\r\n <label>\u0627\u0644\u062c\u0646\u0633\u064a\u0629<\/label>\r\n <div class=\"switch-group\">\r\n <button type=\"button\" class=\"switch-btn active\" data-target=\"isSaudi\" data-value=\"true\">\u0633\u0639\u0648\u062f\u064a<\/button>\r\n <button type=\"button\" class=\"switch-btn\" data-target=\"isSaudi\" data-value=\"false\">\u063a\u064a\u0631 \u0633\u0639\u0648\u062f\u064a<\/button>\r\n <\/div>\r\n <input type=\"hidden\" id=\"isSaudi\" name=\"isSaudi\" value=\"true\">\r\n <\/div>\r\n\r\n <div class=\"form-group\">\r\n <label for=\"contractPeriod\">\u0645\u062f\u0629 \u0627\u0644\u0639\u0642\u062f \u0627\u0644\u0623\u062e\u064a\u0631<\/label>\r\n <select id=\"contractPeriod\" name=\"contractPeriod\" required>\r\n <option value=\"\">-- \u0627\u062e\u062a\u0631 --<\/option>\r\n <option value=\"1\">\u0633\u0646\u0629<\/option>\r\n <option value=\"2\">\u0633\u0646\u062a\u0627\u0646<\/option>\r\n <option value=\"3\">\u0623\u062e\u0631\u0649<\/option>\r\n <option value=\"4\">\u063a\u064a\u0631 \u0645\u062d\u062f\u062f \u0627\u0644\u0645\u062f\u0629<\/option>\r\n <\/select>\r\n <\/div>\r\n\r\n <div class=\"form-group hidden\" id=\"contractDurationGroup\">\r\n <label for=\"contractDurationYears\">\u0627\u0644\u0645\u062f\u0629 \u0628\u0627\u0644\u0633\u0646\u0648\u0627\u062a<\/label>\r\n <input type=\"number\" id=\"contractDurationYears\" name=\"contractDurationYears\" min=\"0\" max=\"35\">\r\n <\/div>\r\n\r\n <div class=\"form-group hidden\" id=\"contractDurationMonthsGroup\">\r\n <label for=\"contractDurationMonths\">\u0627\u0644\u0645\u062f\u0629 \u0628\u0627\u0644\u0623\u0634\u0647\u0631<\/label>\r\n <input type=\"number\" id=\"contractDurationMonths\" name=\"contractDurationMonths\" min=\"0\" max=\"11\">\r\n <\/div>\r\n\r\n <div class=\"form-group\">\r\n <label for=\"reason\">Reason for termination<\/label>\r\n <select id=\"reason\" name=\"reason\" required>\r\n <option value=\"\">-- \u0627\u062e\u062a\u0631 --<\/option>\r\n <option value=\"1\">\u0627\u062a\u0641\u0627\u0642 \u0627\u0644\u0637\u0631\u0641\u064a\u0646<\/option>\r\n <option value=\"2\">\u0627\u0646\u062a\u0647\u0627\u0621 \u0645\u062f\u0629 \u0627\u0644\u0639\u0642\u062f<\/option>\r\n <option value=\"3\">\u0642\u0628\u0648\u0644 \u0627\u0644\u0625\u0633\u062a\u0642\u0627\u0644\u0629<\/option>\r\n <option value=\"4\">\u0625\u0646\u0647\u0627\u0621 \u0627\u0644\u0639\u0642\u062f \u0645\u0646 \u0642\u0628\u0644 \u0635\u0627\u062d\u0628 \u0627\u0644\u0639\u0645\u0644<\/option>\r\n <option value=\"5\">\u0625\u0646\u0647\u0627\u0621 \u0627\u0644\u0639\u0642\u062f \u0645\u0646 \u0642\u0628\u0644 \u0627\u0644\u0639\u0627\u0645\u0644<\/option>\r\n <option value=\"6\">\u062e\u0627\u0631\u062c \u0625\u0631\u0627\u062f\u0629 \u0627\u0644\u0637\u0631\u0641\u064a\u0646<\/option>\r\n <\/select>\r\n <\/div>\r\n\r\n <div class=\"form-group hidden\" id=\"subReasonGroup\">\r\n <label for=\"subReason\">\u0627\u0644\u0633\u0628\u0628 \u0627\u0644\u0641\u0631\u0639\u064a<\/label>\r\n <select id=\"subReason\" name=\"subReason\">\r\n <option value=\"\">-- \u0627\u062e\u062a\u0631 --<\/option>\r\n <\/select>\r\n <\/div>\r\n\r\n <div class=\"form-group\">\r\n <label>\u0646\u0638\u0627\u0645 \u0627\u0644\u0625\u062c\u0627\u0632\u0627\u062a \u0641\u064a \u0627\u0644\u0645\u0646\u0634\u0623\u0629<\/label>\r\n <div class=\"switch-group\">\r\n <button type=\"button\" class=\"switch-btn active\" data-target=\"vacationSystem\" data-value=\"2\">\u0648\u0641\u0642 \u0646\u0638\u0627\u0645 \u0627\u0644\u0639\u0645\u0644<\/button>\r\n <button type=\"button\" class=\"switch-btn\" data-target=\"vacationSystem\" data-value=\"4\">\u063a\u064a\u0631 \u0630\u0644\u0643<\/button>\r\n <\/div>\r\n <input type=\"hidden\" id=\"vacationSystem\" name=\"vacationSystem\" value=\"2\">\r\n <\/div>\r\n\r\n <div class=\"form-group hidden\" id=\"annualVacationsGroup\">\r\n <label for=\"annualVacations\">\u0627\u0644\u0625\u062c\u0627\u0632\u0627\u062a \u0627\u0644\u0633\u0646\u0648\u064a\u0629<\/label>\r\n <input type=\"number\" id=\"annualVacations\" name=\"annualVacations\" min=\"21\" max=\"90\">\r\n <\/div>\r\n\r\n <div class=\"form-group\">\r\n <label for=\"usedVacations\">\u0639\u062f\u062f \u0623\u064a\u0627\u0645 \u0627\u0644\u0625\u062c\u0627\u0632\u0629 \u0627\u0644\u0645\u0633\u062a\u0641\u0627\u062f \u0645\u0646\u0647\u0627<\/label>\r\n <input type=\"number\" id=\"usedVacations\" name=\"usedVacations\" min=\"0\" value=\"0\">\r\n <\/div>\r\n\r\n <div class=\"form-group\">\r\n <label for=\"totalSalary\">\u0627\u0644\u0623\u062c\u0631 \u0627\u0644\u0625\u062c\u0645\u0627\u0644\u064a (\u0631\u064a\u0627\u0644)<\/label>\r\n <input type=\"number\" id=\"totalSalary\" name=\"totalSalary\" min=\"0\" step=\"0.01\" required>\r\n <\/div>\r\n\r\n <div class=\"form-group\">\r\n <label for=\"workingHours\">\u0639\u062f\u062f \u0633\u0627\u0639\u0627\u062a \u0627\u0644\u0639\u0645\u0644 \u0627\u0644\u0625\u0636\u0627\u0641\u064a\u0629 \u0627\u0644\u0645\u062a\u0628\u0642\u064a\u0629<\/label>\r\n <input type=\"number\" id=\"workingHours\" name=\"workingHours\" min=\"0\" value=\"0\">\r\n <\/div>\r\n\r\n <div class=\"form-group\">\r\n <label for=\"delayedPayments\">\u0625\u062c\u0645\u0627\u0644\u064a \u0627\u0644\u0623\u062c\u0648\u0631 \u0627\u0644\u0645\u062a\u0623\u062e\u0631\u0629 (\u0631\u064a\u0627\u0644)<\/label>\r\n <input type=\"number\" id=\"delayedPayments\" name=\"delayedPayments\" min=\"0\" step=\"0.01\" value=\"0\">\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"buttons\">\r\n <button type=\"submit\" class=\"btn btn-primary\">\u0627\u062d\u0633\u0628 \u0627\u0644\u0645\u0633\u062a\u062d\u0642\u0627\u062a<\/button>\r\n <button type=\"reset\" class=\"btn btn-secondary\">Unloading fields<\/button>\r\n <\/div>\r\n <input type=\"hidden\" name=\"trp-form-language\" value=\"en\"\/><\/form>\r\n\r\n <div id=\"results\" class=\"results hidden\">\r\n <h3>\u0646\u062a\u0627\u0626\u062c \u062d\u0633\u0627\u0628 \u0627\u0644\u0645\u0633\u062a\u062d\u0642\u0627\u062a \u0627\u0644\u0639\u0645\u0627\u0644\u064a\u0629<\/h3>\r\n <div id=\"resultsList\"><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <script>\r\n \/\/ Switch button functionality\r\n document.querySelectorAll('.switch-btn').forEach(btn => {\r\n btn.addEventListener('click', function(e) {\r\n e.preventDefault();\r\n const target = this.dataset.target;\r\n const value = this.dataset.value;\r\n \r\n \/\/ Update active state\r\n this.parentNode.querySelectorAll('.switch-btn').forEach(b => b.classList.remove('active'));\r\n this.classList.add('active');\r\n \r\n \/\/ Update hidden input\r\n document.getElementById(target).value = value;\r\n \r\n \/\/ Handle conditional fields\r\n handleConditionalFields();\r\n });\r\n });\r\n\r\n \/\/ Contract period change handler\r\n document.getElementById('contractPeriod').addEventListener('change', function() {\r\n const value = this.value;\r\n const durationGroup = document.getElementById('contractDurationGroup');\r\n const monthsGroup = document.getElementById('contractDurationMonthsGroup');\r\n \r\n if (value === '3') { \/\/ \u0623\u062e\u0631\u0649\r\n durationGroup.classList.remove('hidden');\r\n monthsGroup.classList.remove('hidden');\r\n } else {\r\n durationGroup.classList.add('hidden');\r\n monthsGroup.classList.add('hidden');\r\n }\r\n });\r\n\r\n \/\/ Reason change handler\r\n document.getElementById('reason').addEventListener('change', function() {\r\n const value = this.value;\r\n const subReasonGroup = document.getElementById('subReasonGroup');\r\n const subReasonSelect = document.getElementById('subReason');\r\n \r\n \/\/ Clear previous options\r\n subReasonSelect.innerHTML = '<option value=\"\">-- \u0627\u062e\u062a\u0631 --<\/option>';\r\n \r\n if (value === '4') { \/\/ \u0625\u0646\u0647\u0627\u0621 \u0627\u0644\u0639\u0642\u062f \u0645\u0646 \u0642\u0628\u0644 \u0635\u0627\u062d\u0628 \u0627\u0644\u0639\u0645\u0644\r\n subReasonGroup.classList.remove('hidden');\r\n subReasonSelect.innerHTML += `\r\n <option value=\"1\">\u0641\u0633\u062e \u062a\u0639\u0633\u0641\u064a<\/option>\r\n <option value=\"2\">\u0641\u0633\u062e \u0645\u0634\u0631\u0648\u0639 (\u0628\u0646\u0627\u0621 \u0639\u0644\u0649 \u0627\u0644\u0645\u0627\u062f\u0629 80)<\/option>\r\n <option value=\"4\">\u0641\u0633\u062e \u0645\u0634\u0631\u0648\u0639 (\u0644\u0623\u0633\u0628\u0627\u0628 \u0623\u062e\u0631\u0649)<\/option>\r\n `;\r\n } else if (value === '5') { \/\/ \u0625\u0646\u0647\u0627\u0621 \u0627\u0644\u0639\u0642\u062f \u0645\u0646 \u0642\u0628\u0644 \u0627\u0644\u0639\u0627\u0645\u0644\r\n subReasonGroup.classList.remove('hidden');\r\n subReasonSelect.innerHTML += `\r\n <option value=\"5\">\u0641\u0633\u062e \u063a\u064a\u0631 \u0645\u0634\u0631\u0648\u0639<\/option>\r\n <option value=\"6\">\u0625\u0646\u0647\u0627\u0621 \u0627\u0644\u0645\u0634\u0631\u0648\u0639 (\u0628\u0646\u0627\u0621 \u0639\u0644\u0649 \u0627\u0644\u0645\u0627\u062f\u0629 81)<\/option>\r\n <option value=\"4\">\u0641\u0633\u062e \u0645\u0634\u0631\u0648\u0639 (\u0644\u0623\u0633\u0628\u0627\u0628 \u0623\u062e\u0631\u0649)<\/option>\r\n `;\r\n } else if (value === '6') { \/\/ \u062e\u0627\u0631\u062c \u0625\u0631\u0627\u062f\u0629 \u0627\u0644\u0637\u0631\u0641\u064a\u0646\r\n subReasonGroup.classList.remove('hidden');\r\n subReasonSelect.innerHTML += `\r\n <option value=\"7\">\u0627\u0644\u0642\u0648\u0629 \u0627\u0644\u0642\u0627\u0647\u0631\u0629<\/option>\r\n <option value=\"8\">\u0648\u0641\u0627\u0629 \u0627\u0644\u0645\u0648\u0638\u0641 \u0623\u0648 \u0635\u0627\u062d\u0628 \u0627\u0644\u0639\u0645\u0644 \u0627\u0644\u0630\u064a \u0631\u0648\u0639\u064a\u062a \u0634\u062e\u0635\u064a\u062a\u0647 \u0641\u064a \u0627\u0644\u0639\u0642\u062f<\/option>\r\n <option value=\"9\">\u0639\u062c\u0632 \u0627\u0644\u0645\u0648\u0638\u0641 \u0627\u0644\u0635\u062d\u064a \u0628\u0645\u0648\u062c\u0628 \u0634\u0647\u0627\u062f\u0629 \u0645\u0639\u062a\u0645\u062f\u0629<\/option>\r\n <option value=\"10\">\u0625\u063a\u0644\u0627\u0642 \u0627\u0644\u0645\u0646\u0634\u0623\u0629 \u0646\u0647\u0627\u0626\u064a\u0627\u064b<\/option>\r\n `;\r\n } else {\r\n subReasonGroup.classList.add('hidden');\r\n }\r\n });\r\n\r\n \/\/ Vacation system handler\r\n function handleConditionalFields() {\r\n const vacationSystem = document.getElementById('vacationSystem').value;\r\n const annualVacationsGroup = document.getElementById('annualVacationsGroup');\r\n \r\n if (vacationSystem === '4') { \/\/ \u063a\u064a\u0631 \u0630\u0644\u0643\r\n annualVacationsGroup.classList.remove('hidden');\r\n } else {\r\n annualVacationsGroup.classList.add('hidden');\r\n }\r\n }\r\n\r\n \/\/ Form submission\r\n document.getElementById('laborForm').addEventListener('submit', function(e) {\r\n e.preventDefault();\r\n calculateBenefits();\r\n });\r\n\r\n \/\/ Reset form\r\n document.getElementById('laborForm').addEventListener('reset', function() {\r\n document.getElementById('results').classList.add('hidden');\r\n \/\/ Reset switch buttons\r\n document.querySelectorAll('.switch-group').forEach(group => {\r\n group.querySelectorAll('.switch-btn').forEach(btn => btn.classList.remove('active'));\r\n group.querySelector('.switch-btn').classList.add('active');\r\n });\r\n \/\/ Reset hidden inputs\r\n document.getElementById('isSaudi').value = 'true';\r\n document.getElementById('vacationSystem').value = '2';\r\n });\r\n\r\n function calculateBenefits() {\r\n const formData = new FormData(document.getElementById('laborForm'));\r\n const data = Object.fromEntries(formData);\r\n \r\n \/\/ Validate required fields\r\n if (!data.serviceStartDate || !data.serviceEndDate || !data.totalSalary) {\r\n alert('\u064a\u0631\u062c\u0649 \u0645\u0644\u0621 \u062c\u0645\u064a\u0639 \u0627\u0644\u062d\u0642\u0648\u0644 \u0627\u0644\u0645\u0637\u0644\u0648\u0628\u0629');\r\n return;\r\n }\r\n\r\n \/\/ Calculate service period\r\n const startDate = new Date(data.serviceStartDate);\r\n const endDate = new Date(data.serviceEndDate);\r\n const servicePeriod = calculateServicePeriod(startDate, endDate);\r\n \r\n if (servicePeriod.totalDays <= 0) {\r\n alert('\u062a\u0627\u0631\u064a\u062e \u0646\u0647\u0627\u064a\u0629 \u0627\u0644\u062e\u062f\u0645\u0629 \u064a\u062c\u0628 \u0623\u0646 \u064a\u0643\u0648\u0646 \u0628\u0639\u062f \u062a\u0627\u0631\u064a\u062e \u0628\u062f\u0627\u064a\u0629 \u0627\u0644\u062e\u062f\u0645\u0629');\r\n return;\r\n }\r\n\r\n const totalSalary = parseFloat(data.totalSalary);\r\n const dailySalary = totalSalary \/ 30;\r\n \r\n \/\/ Calculate benefits\r\n const results = {\r\n servicePeriod: servicePeriod,\r\n endOfServiceBenefit: calculateEndOfServiceBenefit(servicePeriod, totalSalary, data.reason, data.subReason),\r\n vacationBenefit: calculateVacationBenefit(servicePeriod, data.vacationSystem, data.annualVacations, data.usedVacations, dailySalary),\r\n overtimePay: calculateOvertimePay(parseFloat(data.workingHours || 0), totalSalary),\r\n delayedPayments: parseFloat(data.delayedPayments || 0),\r\n compensation: calculateCompensation(data.reason, data.subReason, totalSalary, servicePeriod)\r\n };\r\n\r\n displayResults(results);\r\n }\r\n\r\n function calculateServicePeriod(startDate, endDate) {\r\n const diffTime = endDate - startDate;\r\n const totalDays = Math.floor(diffTime \/ (1000 * 60 * 60 * 24));\r\n const years = Math.floor(totalDays \/ 365);\r\n const months = Math.floor((totalDays % 365) \/ 30);\r\n const days = totalDays % 30;\r\n \r\n return { years, months, days, totalDays };\r\n }\r\n\r\n function calculateEndOfServiceBenefit(servicePeriod, totalSalary, reason, subReason) {\r\n \/\/ \u0625\u0630\u0627 \u0643\u0627\u0646\u062a \u0645\u062f\u0629 \u0627\u0644\u062e\u062f\u0645\u0629 \u0623\u0642\u0644 \u0645\u0646 \u0633\u0646\u0629 \u0641\u0644\u0627 \u062a\u0648\u062c\u062f \u0645\u0643\u0627\u0641\u0623\u0629\r\n if (servicePeriod.years < 1 && servicePeriod.months < 12) {\r\n return 0;\r\n }\r\n\r\n const monthlySalary = totalSalary;\r\n let benefit = 0;\r\n\r\n \/\/ \u0627\u0644\u0641\u0633\u062e \u0627\u0644\u062a\u0639\u0633\u0641\u064a \u064a\u062d\u0635\u0644 \u0639\u0644\u0649 \u0643\u0627\u0645\u0644 \u0627\u0644\u0645\u0643\u0627\u0641\u0623\u0629 \u0628\u062f\u0648\u0646 \u062e\u0635\u0645\r\n const isArbitraryDismissal = (reason === '4' && subReason === '1');\r\n const isUnlawfulEmployeeTermination = (reason === '5' && subReason === '5');\r\n \r\n \/\/ \u0625\u0630\u0627 \u0643\u0627\u0646 \u0627\u0644\u0641\u0633\u062e \u062a\u0639\u0633\u0641\u064a \u0623\u0648 \u0625\u0646\u0647\u0627\u0621 \u063a\u064a\u0631 \u0645\u0634\u0631\u0648\u0639 \u0645\u0646 \u0627\u0644\u0639\u0627\u0645\u0644\u060c \u064a\u062d\u0635\u0644 \u0639\u0644\u0649 \u0643\u0627\u0645\u0644 \u0627\u0644\u0645\u0643\u0627\u0641\u0623\u0629\r\n if (isArbitraryDismissal || isUnlawfulEmployeeTermination) {\r\n if (servicePeriod.years >= 5) {\r\n benefit += 5 * (monthlySalary * 0.5);\r\n benefit += (servicePeriod.years - 5) * monthlySalary;\r\n } else {\r\n benefit += servicePeriod.years * (monthlySalary * 0.5);\r\n }\r\n \r\n \/\/ \u0625\u0636\u0627\u0641\u0629 \u0627\u0644\u0645\u0643\u0627\u0641\u0623\u0629 \u0627\u0644\u062a\u0646\u0627\u0633\u0628\u064a\u0629 \u0644\u0644\u0623\u0634\u0647\u0631\r\n const monthlyBenefit = servicePeriod.years < 5 ? (monthlySalary * 0.5) \/ 12 : monthlySalary \/ 12;\r\n benefit += servicePeriod.months * monthlyBenefit;\r\n \r\n return Math.round(benefit * 100) \/ 100;\r\n }\r\n\r\n \/\/ \u0627\u0644\u0627\u0633\u062a\u0642\u0627\u0644\u0629 \u0623\u0648 \u0627\u0644\u0641\u0633\u062e \u0645\u0646 \u0642\u0628\u0644 \u0627\u0644\u0639\u0627\u0645\u0644 (\u062a\u0637\u0628\u064a\u0642 \u0627\u0644\u062e\u0635\u0645)\r\n if (reason === '3' || reason === '5') {\r\n if (servicePeriod.years < 2) {\r\n return 0; \/\/ \u0623\u0642\u0644 \u0645\u0646 \u0633\u0646\u062a\u064a\u0646 \u0644\u0627 \u062a\u0648\u062c\u062f \u0645\u0643\u0627\u0641\u0623\u0629\r\n }\r\n \r\n \/\/ \u062d\u0633\u0627\u0628 \u0627\u0644\u0645\u0643\u0627\u0641\u0623\u0629 \u0627\u0644\u0623\u0633\u0627\u0633\u064a\u0629\r\n if (servicePeriod.years >= 5) {\r\n benefit += 5 * (monthlySalary * 0.5);\r\n benefit += (servicePeriod.years - 5) * monthlySalary;\r\n } else {\r\n benefit += servicePeriod.years * (monthlySalary * 0.5);\r\n }\r\n \r\n \/\/ \u0625\u0636\u0627\u0641\u0629 \u0627\u0644\u0645\u0643\u0627\u0641\u0623\u0629 \u0627\u0644\u062a\u0646\u0627\u0633\u0628\u064a\u0629 \u0644\u0644\u0623\u0634\u0647\u0631\r\n const monthlyBenefit = servicePeriod.years < 5 ? (monthlySalary * 0.5) \/ 12 : monthlySalary \/ 12;\r\n benefit += servicePeriod.months * monthlyBenefit;\r\n \r\n \/\/ \u062a\u0637\u0628\u064a\u0642 \u0627\u0644\u062e\u0635\u0645 \u062d\u0633\u0628 \u0645\u062f\u0629 \u0627\u0644\u062e\u062f\u0645\u0629\r\n if (servicePeriod.years >= 2 && servicePeriod.years < 5) {\r\n benefit = benefit \/ 3; \/\/ \u062b\u0644\u062b \u0627\u0644\u0645\u0643\u0627\u0641\u0623\u0629\r\n } else if (servicePeriod.years >= 5 && servicePeriod.years < 10) {\r\n benefit = benefit * 2 \/ 3; \/\/ \u062b\u0644\u062b\u064a \u0627\u0644\u0645\u0643\u0627\u0641\u0623\u0629\r\n }\r\n \/\/ 10 \u0633\u0646\u0648\u0627\u062a \u0641\u0623\u0643\u062b\u0631 \u064a\u062d\u0635\u0644 \u0639\u0644\u0649 \u0643\u0627\u0645\u0644 \u0627\u0644\u0645\u0643\u0627\u0641\u0623\u0629\r\n \r\n return Math.round(benefit * 100) \/ 100;\r\n }\r\n\r\n \/\/ \u0628\u0627\u0642\u064a \u0627\u0644\u062d\u0627\u0644\u0627\u062a (\u0627\u062a\u0641\u0627\u0642 \u0627\u0644\u0637\u0631\u0641\u064a\u0646\u060c \u0627\u0646\u062a\u0647\u0627\u0621 \u0645\u062f\u0629 \u0627\u0644\u0639\u0642\u062f\u060c \u0625\u0644\u062e) - \u0643\u0627\u0645\u0644 \u0627\u0644\u0645\u0643\u0627\u0641\u0623\u0629\r\n if (servicePeriod.years >= 5) {\r\n benefit += 5 * (monthlySalary * 0.5);\r\n benefit += (servicePeriod.years - 5) * monthlySalary;\r\n } else {\r\n benefit += servicePeriod.years * (monthlySalary * 0.5);\r\n }\r\n \r\n \/\/ \u0625\u0636\u0627\u0641\u0629 \u0627\u0644\u0645\u0643\u0627\u0641\u0623\u0629 \u0627\u0644\u062a\u0646\u0627\u0633\u0628\u064a\u0629 \u0644\u0644\u0623\u0634\u0647\u0631\r\n const monthlyBenefit = servicePeriod.years < 5 ? (monthlySalary * 0.5) \/ 12 : monthlySalary \/ 12;\r\n benefit += servicePeriod.months * monthlyBenefit;\r\n \r\n return Math.round(benefit * 100) \/ 100;\r\n }\r\n\r\n function calculateVacationBenefit(servicePeriod, vacationSystem, annualVacations, usedVacations, dailySalary) {\r\n let annualVacationDays = 21; \/\/ Default according to Saudi Labor Law\r\n \r\n if (vacationSystem === '4' && annualVacations) {\r\n annualVacationDays = parseInt(annualVacations);\r\n }\r\n\r\n \/\/ \u062d\u0633\u0627\u0628 \u0625\u062c\u0645\u0627\u0644\u064a \u0623\u064a\u0627\u0645 \u0627\u0644\u0625\u062c\u0627\u0632\u0629 \u0627\u0644\u0645\u0633\u062a\u062d\u0642\u0629\r\n const totalVacationDays = servicePeriod.years * annualVacationDays + \r\n Math.floor(servicePeriod.months * annualVacationDays \/ 12);\r\n \r\n \/\/ \u062d\u0633\u0627\u0628 \u0627\u0644\u0623\u064a\u0627\u0645 \u0627\u0644\u0645\u062a\u0628\u0642\u064a\u0629 \u0628\u0639\u062f \u062e\u0635\u0645 \u0627\u0644\u0645\u0633\u062a\u062e\u062f\u0645 \u0645\u0646\u0647\u0627\r\n const remainingDays = Math.max(0, totalVacationDays - parseInt(usedVacations || 0));\r\n \r\n return {\r\n totalDays: totalVacationDays,\r\n remainingDays: remainingDays,\r\n benefit: Math.round(remainingDays * dailySalary * 100) \/ 100\r\n };\r\n }\r\n\r\n function calculateOvertimePay(hours, totalSalary) {\r\n if (hours <= 0) return 0;\r\n \r\n const hourlyRate = totalSalary \/ (30 * 8); \/\/ Assuming 8 hours per day\r\n const overtimeRate = hourlyRate * 1.5; \/\/ 150% for overtime\r\n \r\n return Math.round(hours * overtimeRate * 100) \/ 100;\r\n }\r\n\r\n function calculateCompensation(reason, subReason, totalSalary, servicePeriod) {\r\n \/\/ \u0627\u0644\u062a\u0639\u0648\u064a\u0636 \u0639\u0646 \u0627\u0644\u0641\u0633\u062e \u0627\u0644\u062a\u0639\u0633\u0641\u064a\r\n if (reason === '4' && subReason === '1') { \/\/ \u0641\u0633\u062e \u062a\u0639\u0633\u0641\u064a\r\n \/\/ \u0627\u0644\u062a\u0639\u0648\u064a\u0636 \u064a\u062a\u0631\u0627\u0648\u062d \u0628\u064a\u0646 \u0634\u0647\u0631 \u0625\u0644\u0649 3 \u0623\u0634\u0647\u0631 \u0631\u0627\u062a\u0628 \u062d\u0633\u0628 \u0645\u062f\u0629 \u0627\u0644\u062e\u062f\u0645\u0629\r\n if (servicePeriod.years >= 5) {\r\n return totalSalary * 2; \/\/ \u0634\u0647\u0631\u064a\u0646 \u0631\u0627\u062a\u0628\r\n } else {\r\n return totalSalary; \/\/ \u0634\u0647\u0631 \u0631\u0627\u062a\u0628\r\n }\r\n }\r\n \r\n \/\/ \u0627\u0644\u062a\u0639\u0648\u064a\u0636 \u0639\u0646 \u0627\u0644\u0641\u0633\u062e \u063a\u064a\u0631 \u0627\u0644\u0645\u0634\u0631\u0648\u0639 \u0645\u0646 \u0642\u0628\u0644 \u0627\u0644\u0639\u0627\u0645\u0644\r\n if (reason === '5' && subReason === '5') { \/\/ \u0641\u0633\u062e \u063a\u064a\u0631 \u0645\u0634\u0631\u0648\u0639\r\n return totalSalary; \/\/ \u0634\u0647\u0631 \u0631\u0627\u062a\u0628\r\n }\r\n \r\n return 0;\r\n }\r\n\r\n function displayResults(results) {\r\n const resultsDiv = document.getElementById('results');\r\n const resultsListDiv = document.getElementById('resultsList');\r\n \r\n const total = results.endOfServiceBenefit + \r\n results.vacationBenefit.benefit + \r\n results.overtimePay + \r\n results.delayedPayments + \r\n results.compensation;\r\n\r\n resultsListDiv.innerHTML = `\r\n <div class=\"result-item\">\r\n <span class=\"result-label\">\u0641\u062a\u0631\u0629 \u0627\u0644\u062e\u062f\u0645\u0629<\/span>\r\n <span class=\"result-value\">${results.servicePeriod.years} \u0633\u0646\u0629\u060c ${results.servicePeriod.months} \u0634\u0647\u0631\u060c ${results.servicePeriod.days} \u064a\u0648\u0645<\/span>\r\n <\/div>\r\n <div class=\"result-item\">\r\n <span class=\"result-label\">\u0645\u0643\u0627\u0641\u0623\u0629 \u0646\u0647\u0627\u064a\u0629 \u0627\u0644\u062e\u062f\u0645\u0629<\/span>\r\n <span class=\"result-value\">${results.endOfServiceBenefit.toLocaleString('ar-SA')} \u0631\u064a\u0627\u0644<\/span>\r\n <\/div>\r\n <div class=\"result-item\">\r\n <span class=\"result-label\">\u0625\u062c\u0627\u0632\u0627\u062a \u0645\u0633\u062a\u062d\u0642\u0629 (${results.vacationBenefit.remainingDays} \u064a\u0648\u0645)<\/span>\r\n <span class=\"result-value\">${results.vacationBenefit.benefit.toLocaleString('ar-SA')} \u0631\u064a\u0627\u0644<\/span>\r\n <\/div>\r\n <div class=\"result-item\">\r\n <span class=\"result-label\">\u0623\u062c\u0631 \u0627\u0644\u0639\u0645\u0644 \u0627\u0644\u0625\u0636\u0627\u0641\u064a<\/span>\r\n <span class=\"result-value\">${results.overtimePay.toLocaleString('ar-SA')} \u0631\u064a\u0627\u0644<\/span>\r\n <\/div>\r\n <div class=\"result-item\">\r\n <span class=\"result-label\">\u0627\u0644\u0623\u062c\u0648\u0631 \u0627\u0644\u0645\u062a\u0623\u062e\u0631\u0629<\/span>\r\n <span class=\"result-value\">${results.delayedPayments.toLocaleString('ar-SA')} \u0631\u064a\u0627\u0644<\/span>\r\n <\/div>\r\n <div class=\"result-item\">\r\n <span class=\"result-label\">\u062a\u0639\u0648\u064a\u0636\u0627\u062a<\/span>\r\n <span class=\"result-value\">${results.compensation.toLocaleString('ar-SA')} \u0631\u064a\u0627\u0644<\/span>\r\n <\/div>\r\n <div class=\"result-item total-result\">\r\n <span class=\"result-label\">\u0625\u062c\u0645\u0627\u0644\u064a \u0627\u0644\u0645\u0633\u062a\u062d\u0642\u0627\u062a<\/span>\r\n <span class=\"result-value\">${total.toLocaleString('ar-SA')} \u0631\u064a\u0627\u0644<\/span>\r\n <\/div>\r\n `;\r\n \r\n resultsDiv.classList.remove('hidden');\r\n }\r\n\r\n \/\/ Initialize\r\n handleConditionalFields();\r\n <\/script>\r\n<\/body>\r\n<\/html>\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>","protected":false},"excerpt":{"rendered":"<p>\u0627\u0644\u062d\u0627\u0633\u0628\u0629 \u0627\u0644\u0639\u0645\u0627\u0644\u064a\u0629 \u0627\u0644\u0633\u0639\u0648\u062f\u064a\u0629 \u0627\u0644\u062d\u0627\u0633\u0628\u0629 \u0627\u0644\u0639\u0645\u0627\u0644\u064a\u0629 \u0627\u0644\u0633\u0639\u0648\u062f\u064a\u0629 \u0627\u062d\u0633\u0628 \u0645\u0633\u062a\u062d\u0642\u0627\u062a\u0643 \u0627\u0644\u0639\u0645\u0627\u0644\u064a\u0629 \u0648\u0641\u0642\u0627\u064b \u0644\u0646\u0638\u0627\u0645 \u0627\u0644\u0639\u0645\u0644 \u0627\u0644\u0633\u0639\u0648\u062f\u064a \ud83d\udcca \u062a\u0642\u0631\u064a\u0631 \u0645\u0639\u062a\u0645\u062f \u26a1 \u0645\u0631\u0648\u0646\u0629 \u0641\u064a \u0627\u0644\u0645\u062f\u062e\u0644\u0627\u062a \ud83d\ude80 \u0646\u062a\u0627\u0626\u062c \u0641\u0648\u0631\u064a\u0629 \u0627\u0633\u0645 \u0627\u0644\u0645\u0648\u0638\u0641 \u0627\u0644\u0628\u0631\u064a\u062f \u0627\u0644\u0625\u0644\u0643\u062a\u0631\u0648\u0646\u064a \u0631\u0642\u0645 \u0627\u0644\u062c\u0648\u0627\u0644 \u062a\u0627\u0631\u064a\u062e \u0628\u062f\u0627\u064a\u0629 \u0627\u0644\u062e\u062f\u0645\u0629 \u062a\u0627\u0631\u064a\u062e \u0646\u0647\u0627\u064a\u0629 \u0627\u0644\u062e\u062f\u0645\u0629 \u0627\u0644\u062c\u0646\u0633\u064a\u0629 \u0633\u0639\u0648\u062f\u064a \u063a\u064a\u0631 \u0633\u0639\u0648\u062f\u064a \u0645\u062f\u0629 \u0627\u0644\u0639\u0642\u062f \u0627\u0644\u0623\u062e\u064a\u0631 — \u0627\u062e\u062a\u0631 —\u0633\u0646\u0629\u0633\u0646\u062a\u0627\u0646\u0623\u062e\u0631\u0649\u063a\u064a\u0631 \u0645\u062d\u062f\u062f \u0627\u0644\u0645\u062f\u0629 \u0627\u0644\u0645\u062f\u0629 \u0628\u0627\u0644\u0633\u0646\u0648\u0627\u062a \u0627\u0644\u0645\u062f\u0629 \u0628\u0627\u0644\u0623\u0634\u0647\u0631 \u0633\u0628\u0628 \u0627\u0646\u062a\u0647\u0627\u0621 \u0627\u0644\u062e\u062f\u0645\u0629 — […]<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"_eb_attr":"","footnotes":""},"class_list":["post-652","page","type-page","status-publish","hentry"],"blocksy_meta":[],"_links":{"self":[{"href":"https:\/\/aljuhani-transport.com\/en\/wp-json\/wp\/v2\/pages\/652","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/aljuhani-transport.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/aljuhani-transport.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/aljuhani-transport.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/aljuhani-transport.com\/en\/wp-json\/wp\/v2\/comments?post=652"}],"version-history":[{"count":26,"href":"https:\/\/aljuhani-transport.com\/en\/wp-json\/wp\/v2\/pages\/652\/revisions"}],"predecessor-version":[{"id":904,"href":"https:\/\/aljuhani-transport.com\/en\/wp-json\/wp\/v2\/pages\/652\/revisions\/904"}],"wp:attachment":[{"href":"https:\/\/aljuhani-transport.com\/en\/wp-json\/wp\/v2\/media?parent=652"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n\t\t\t\t\t

\n\t\t\t\t

\n\t\t\t\t\t\r\n\r\n\r\n \r\n \r\n \u0627\u0644\u062d\u0627\u0633\u0628\u0629 \u0627\u0644\u0639\u0645\u0627\u0644\u064a\u0629 \u0627\u0644\u0633\u0639\u0648\u062f\u064a\u0629<\/title>\r\n <style>\r\n * {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n }\r\n\r\n body {\r\n font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\r\n direction: rtl;\r\n background: transparent;\r\n min-height: 100vh;\r\n padding: 20px;\r\n }\r\n\r\n .container {\r\n max-width: 1200px;\r\n margin: 0 auto;\r\n background: transparent;\r\n overflow: visible;\r\n }\r\n\r\n .header {\r\n background: ;\r\n color: white;\r\n padding: 40px;\r\n text-align: center;\r\n position: relative;\r\n overflow: hidden;\r\n border-radius: 15px;\r\n }\r\n\r\n .header h1 {\r\n font-size: 2.5rem;\r\n margin-bottom: 10px;\r\n position: relative;\r\n z-index: 1;\r\n }\r\n\r\n .header p {\r\n font-size: 1.1rem;\r\n opacity: 0.9;\r\n position: relative;\r\n z-index: 1;\r\n color: #000000;\r\n }\r\n\r\n .features {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\r\n gap: 20px;\r\n padding: 30px 0;\r\n background: transparent;\r\n }\r\n\r\n .feature {\r\n display: flex;\r\n align-items: center;\r\n gap: 15px;\r\n padding: 20px;\r\n background: rgba(255, 255, 255, 0.9);\r\n border-radius: 10px;\r\n border: 2px solid #E84A00;\r\n transition: transform 0.3s ease;\r\n }\r\n\r\n .feature:hover {\r\n transform: translateY(-3px);\r\n background: rgba(232, 74, 0, 0.1);\r\n }\r\n\r\n .feature-icon {\r\n width: 50px;\r\n height: 50px;\r\n background: linear-gradient(135deg, #E84A00, #D52C00);\r\n border-radius: 50%;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n color: white;\r\n font-size: 20px;\r\n }\r\n\r\n .form-container {\r\n padding: 40px 20px;\r\n }\r\n\r\n .form-grid {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\r\n gap: 30px;\r\n margin-bottom: 40px;\r\n }\r\n\r\n .form-group {\r\n position: relative;\r\n }\r\n\r\n .form-group label {\r\n display: block;\r\n margin-bottom: 8px;\r\n font-weight: 600;\r\n color: #000000;\r\n font-size: 14px;\r\n }\r\n\r\n .form-group input,\r\n .form-group select {\r\n width: 100%;\r\n padding: 15px;\r\n border: 2px solid #E84A00;\r\n border-radius: 10px;\r\n font-size: 16px;\r\n transition: all 0.3s ease;\r\n background: rgba(255, 255, 255, 0.9);\r\n color: #000000;\r\n }\r\n\r\n .form-group input:focus,\r\n .form-group select:focus {\r\n outline: none;\r\n border-color: #D52C00;\r\n background: white;\r\n }\r\n\r\n .hidden {\r\n display: none !important;\r\n }\r\n\r\n .switch-group {\r\n display: flex;\r\n gap: 10px;\r\n margin-top: 8px;\r\n }\r\n\r\n .switch-btn {\r\n flex: 1;\r\n padding: 12px;\r\n border: 2px solid #E84A00;\r\n background: rgba(255, 255, 255, 0.9);\r\n border-radius: 8px;\r\n cursor: pointer;\r\n transition: all 0.3s ease;\r\n text-align: center;\r\n font-weight: 500;\r\n color: #000000;\r\n }\r\n\r\n .switch-btn.active {\r\n background: #E84A00;\r\n color: white;\r\n border-color: #E84A00;\r\n }\r\n\r\n .switch-btn:hover {\r\n background: #D52C00;\r\n color: white;\r\n border-color: #D52C00;\r\n }\r\n\r\n .buttons {\r\n display: flex;\r\n gap: 20px;\r\n justify-content: center;\r\n flex-wrap: wrap;\r\n }\r\n\r\n .btn {\r\n padding: 15px 40px;\r\n border: none;\r\n border-radius: 10px;\r\n font-size: 16px;\r\n font-weight: 600;\r\n cursor: pointer;\r\n transition: all 0.3s ease;\r\n min-width: 150px;\r\n }\r\n\r\n .btn-primary {\r\n background: linear-gradient(135deg, #E84A00, #D52C00);\r\n color: white;\r\n border: 2px solid #E84A00;\r\n }\r\n\r\n .btn-primary:hover {\r\n transform: translateY(-2px);\r\n background: linear-gradient(135deg, #D52C00, #C10E00);\r\n border-color: #C10E00;\r\n }\r\n\r\n .btn-secondary {\r\n background: rgba(255, 255, 255, 0.9);\r\n color: #C10E00;\r\n border: 2px solid #C10E00;\r\n }\r\n\r\n .btn-secondary:hover {\r\n background: #C10E00;\r\n color: white;\r\n border-color: #C10E00;\r\n }\r\n\r\n .results {\r\n margin-top: 40px;\r\n padding: 30px;\r\n background: rgba(255, 255, 255, 0.9);\r\n border-radius: 15px;\r\n border: 2px solid #E84A00;\r\n }\r\n\r\n .results h3 {\r\n color: #000000;\r\n margin-bottom: 20px;\r\n font-size: 1.5rem;\r\n text-align: center;\r\n }\r\n\r\n .result-item {\r\n display: flex;\r\n justify-content: space-between;\r\n padding: 15px;\r\n margin: 10px 0;\r\n background: rgba(255, 255, 255, 0.9);\r\n border-radius: 8px;\r\n border: 1px solid #E84A00;\r\n }\r\n\r\n .result-label {\r\n font-weight: 600;\r\n color: #000000;\r\n }\r\n\r\n .result-value {\r\n font-weight: bold;\r\n color: #D52C00;\r\n font-size: 1.1rem;\r\n }\r\n\r\n .total-result {\r\n background: linear-gradient(135deg, #E84A00, #D52C00);\r\n color: white;\r\n font-size: 1.2rem;\r\n margin-top: 20px;\r\n border: 2px solid #C10E00;\r\n }\r\n\r\n .total-result .result-value {\r\n color: white;\r\n }\r\n\r\n .error {\r\n color: #C10E00;\r\n font-size: 12px;\r\n margin-top: 5px;\r\n }\r\n\r\n @media (max-width: 768px) {\r\n .header h1 {\r\n font-size: 2rem;\r\n }\r\n \r\n .form-grid {\r\n grid-template-columns: 1fr;\r\n }\r\n \r\n .buttons {\r\n flex-direction: column;\r\n align-items: center;\r\n }\r\n \r\n .btn {\r\n width: 100%;\r\n max-width: 300px;\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <div class=\"container\">\r\n <div class=\"header\">\r\n <h1>\u0627\u0644\u062d\u0627\u0633\u0628\u0629 \u0627\u0644\u0639\u0645\u0627\u0644\u064a\u0629 \u0627\u0644\u0633\u0639\u0648\u062f\u064a\u0629<\/h1>\r\n <p>\u0627\u062d\u0633\u0628 \u0645\u0633\u062a\u062d\u0642\u0627\u062a\u0643 \u0627\u0644\u0639\u0645\u0627\u0644\u064a\u0629 \u0648\u0641\u0642\u0627\u064b \u0644\u0646\u0638\u0627\u0645 \u0627\u0644\u0639\u0645\u0644 \u0627\u0644\u0633\u0639\u0648\u062f\u064a<\/p>\r\n <\/div>\r\n\r\n <div class=\"features\">\r\n <div class=\"feature\">\r\n <div class=\"feature-icon\">\ud83d\udcca<\/div>\r\n <div>\u062a\u0642\u0631\u064a\u0631 \u0645\u0639\u062a\u0645\u062f<\/div>\r\n <\/div>\r\n <div class=\"feature\">\r\n <div class=\"feature-icon\">\u26a1<\/div>\r\n <div>\u0645\u0631\u0648\u0646\u0629 \u0641\u064a \u0627\u0644\u0645\u062f\u062e\u0644\u0627\u062a<\/div>\r\n <\/div>\r\n <div class=\"feature\">\r\n <div class=\"feature-icon\">\ud83d\ude80<\/div>\r\n <div>\u0646\u062a\u0627\u0626\u062c \u0641\u0648\u0631\u064a\u0629<\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"form-container\">\r\n <form id=\"laborForm\" action=\"\">\r\n <div class=\"form-grid\">\r\n <div class=\"form-group\">\r\n <label for=\"name\">\u0627\u0633\u0645 \u0627\u0644\u0645\u0648\u0638\u0641<\/label>\r\n <input type=\"text\" id=\"name\" name=\"name\" placeholder=\"\u0623\u062f\u062e\u0644 \u0627\u0633\u0645 \u0627\u0644\u0645\u0648\u0638\u0641\">\r\n <\/div>\r\n\r\n <div class=\"form-group\">\r\n <label for=\"email\">\u0627\u0644\u0628\u0631\u064a\u062f \u0627\u0644\u0625\u0644\u0643\u062a\u0631\u0648\u0646\u064a<\/label>\r\n <input type=\"email\" id=\"email\" name=\"email\" placeholder=\"name@domain.com\">\r\n <\/div>\r\n\r\n <div class=\"form-group\">\r\n <label for=\"mobile\">\u0631\u0642\u0645 \u0627\u0644\u062c\u0648\u0627\u0644<\/label>\r\n <input type=\"tel\" id=\"mobile\" name=\"mobile\" placeholder=\"5xxxxxxxx\" maxlength=\"9\">\r\n <\/div>\r\n\r\n <div class=\"form-group\">\r\n <label for=\"serviceStartDate\">Start date of service<\/label>\r\n <input type=\"date\" id=\"serviceStartDate\" name=\"serviceStartDate\" required>\r\n <\/div>\r\n\r\n <div class=\"form-group\">\r\n <label for=\"serviceEndDate\">End of service date<\/label>\r\n <input type=\"date\" id=\"serviceEndDate\" name=\"serviceEndDate\" required>\r\n <\/div>\r\n\r\n <div class=\"form-group\">\r\n <label>\u0627\u0644\u062c\u0646\u0633\u064a\u0629<\/label>\r\n <div class=\"switch-group\">\r\n <button type=\"button\" class=\"switch-btn active\" data-target=\"isSaudi\" data-value=\"true\">\u0633\u0639\u0648\u062f\u064a<\/button>\r\n <button type=\"button\" class=\"switch-btn\" data-target=\"isSaudi\" data-value=\"false\">\u063a\u064a\u0631 \u0633\u0639\u0648\u062f\u064a<\/button>\r\n <\/div>\r\n <input type=\"hidden\" id=\"isSaudi\" name=\"isSaudi\" value=\"true\">\r\n <\/div>\r\n\r\n <div class=\"form-group\">\r\n <label for=\"contractPeriod\">\u0645\u062f\u0629 \u0627\u0644\u0639\u0642\u062f \u0627\u0644\u0623\u062e\u064a\u0631<\/label>\r\n <select id=\"contractPeriod\" name=\"contractPeriod\" required>\r\n <option value=\"\">-- \u0627\u062e\u062a\u0631 --<\/option>\r\n <option value=\"1\">\u0633\u0646\u0629<\/option>\r\n <option value=\"2\">\u0633\u0646\u062a\u0627\u0646<\/option>\r\n <option value=\"3\">\u0623\u062e\u0631\u0649<\/option>\r\n <option value=\"4\">\u063a\u064a\u0631 \u0645\u062d\u062f\u062f \u0627\u0644\u0645\u062f\u0629<\/option>\r\n <\/select>\r\n <\/div>\r\n\r\n <div class=\"form-group hidden\" id=\"contractDurationGroup\">\r\n <label for=\"contractDurationYears\">\u0627\u0644\u0645\u062f\u0629 \u0628\u0627\u0644\u0633\u0646\u0648\u0627\u062a<\/label>\r\n <input type=\"number\" id=\"contractDurationYears\" name=\"contractDurationYears\" min=\"0\" max=\"35\">\r\n <\/div>\r\n\r\n <div class=\"form-group hidden\" id=\"contractDurationMonthsGroup\">\r\n <label for=\"contractDurationMonths\">\u0627\u0644\u0645\u062f\u0629 \u0628\u0627\u0644\u0623\u0634\u0647\u0631<\/label>\r\n <input type=\"number\" id=\"contractDurationMonths\" name=\"contractDurationMonths\" min=\"0\" max=\"11\">\r\n <\/div>\r\n\r\n <div class=\"form-group\">\r\n <label for=\"reason\">Reason for termination<\/label>\r\n <select id=\"reason\" name=\"reason\" required>\r\n <option value=\"\">-- \u0627\u062e\u062a\u0631 --<\/option>\r\n <option value=\"1\">\u0627\u062a\u0641\u0627\u0642 \u0627\u0644\u0637\u0631\u0641\u064a\u0646<\/option>\r\n <option value=\"2\">\u0627\u0646\u062a\u0647\u0627\u0621 \u0645\u062f\u0629 \u0627\u0644\u0639\u0642\u062f<\/option>\r\n <option value=\"3\">\u0642\u0628\u0648\u0644 \u0627\u0644\u0625\u0633\u062a\u0642\u0627\u0644\u0629<\/option>\r\n <option value=\"4\">\u0625\u0646\u0647\u0627\u0621 \u0627\u0644\u0639\u0642\u062f \u0645\u0646 \u0642\u0628\u0644 \u0635\u0627\u062d\u0628 \u0627\u0644\u0639\u0645\u0644<\/option>\r\n <option value=\"5\">\u0625\u0646\u0647\u0627\u0621 \u0627\u0644\u0639\u0642\u062f \u0645\u0646 \u0642\u0628\u0644 \u0627\u0644\u0639\u0627\u0645\u0644<\/option>\r\n <option value=\"6\">\u062e\u0627\u0631\u062c \u0625\u0631\u0627\u062f\u0629 \u0627\u0644\u0637\u0631\u0641\u064a\u0646<\/option>\r\n <\/select>\r\n <\/div>\r\n\r\n <div class=\"form-group hidden\" id=\"subReasonGroup\">\r\n <label for=\"subReason\">\u0627\u0644\u0633\u0628\u0628 \u0627\u0644\u0641\u0631\u0639\u064a<\/label>\r\n <select id=\"subReason\" name=\"subReason\">\r\n <option value=\"\">-- \u0627\u062e\u062a\u0631 --<\/option>\r\n <\/select>\r\n <\/div>\r\n\r\n <div class=\"form-group\">\r\n <label>\u0646\u0638\u0627\u0645 \u0627\u0644\u0625\u062c\u0627\u0632\u0627\u062a \u0641\u064a \u0627\u0644\u0645\u0646\u0634\u0623\u0629<\/label>\r\n <div class=\"switch-group\">\r\n <button type=\"button\" class=\"switch-btn active\" data-target=\"vacationSystem\" data-value=\"2\">\u0648\u0641\u0642 \u0646\u0638\u0627\u0645 \u0627\u0644\u0639\u0645\u0644<\/button>\r\n <button type=\"button\" class=\"switch-btn\" data-target=\"vacationSystem\" data-value=\"4\">\u063a\u064a\u0631 \u0630\u0644\u0643<\/button>\r\n <\/div>\r\n <input type=\"hidden\" id=\"vacationSystem\" name=\"vacationSystem\" value=\"2\">\r\n <\/div>\r\n\r\n <div class=\"form-group hidden\" id=\"annualVacationsGroup\">\r\n <label for=\"annualVacations\">\u0627\u0644\u0625\u062c\u0627\u0632\u0627\u062a \u0627\u0644\u0633\u0646\u0648\u064a\u0629<\/label>\r\n <input type=\"number\" id=\"annualVacations\" name=\"annualVacations\" min=\"21\" max=\"90\">\r\n <\/div>\r\n\r\n <div class=\"form-group\">\r\n <label for=\"usedVacations\">\u0639\u062f\u062f \u0623\u064a\u0627\u0645 \u0627\u0644\u0625\u062c\u0627\u0632\u0629 \u0627\u0644\u0645\u0633\u062a\u0641\u0627\u062f \u0645\u0646\u0647\u0627<\/label>\r\n <input type=\"number\" id=\"usedVacations\" name=\"usedVacations\" min=\"0\" value=\"0\">\r\n <\/div>\r\n\r\n <div class=\"form-group\">\r\n <label for=\"totalSalary\">\u0627\u0644\u0623\u062c\u0631 \u0627\u0644\u0625\u062c\u0645\u0627\u0644\u064a (\u0631\u064a\u0627\u0644)<\/label>\r\n <input type=\"number\" id=\"totalSalary\" name=\"totalSalary\" min=\"0\" step=\"0.01\" required>\r\n <\/div>\r\n\r\n <div class=\"form-group\">\r\n <label for=\"workingHours\">\u0639\u062f\u062f \u0633\u0627\u0639\u0627\u062a \u0627\u0644\u0639\u0645\u0644 \u0627\u0644\u0625\u0636\u0627\u0641\u064a\u0629 \u0627\u0644\u0645\u062a\u0628\u0642\u064a\u0629<\/label>\r\n <input type=\"number\" id=\"workingHours\" name=\"workingHours\" min=\"0\" value=\"0\">\r\n <\/div>\r\n\r\n <div class=\"form-group\">\r\n <label for=\"delayedPayments\">\u0625\u062c\u0645\u0627\u0644\u064a \u0627\u0644\u0623\u062c\u0648\u0631 \u0627\u0644\u0645\u062a\u0623\u062e\u0631\u0629 (\u0631\u064a\u0627\u0644)<\/label>\r\n <input type=\"number\" id=\"delayedPayments\" name=\"delayedPayments\" min=\"0\" step=\"0.01\" value=\"0\">\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"buttons\">\r\n <button type=\"submit\" class=\"btn btn-primary\">\u0627\u062d\u0633\u0628 \u0627\u0644\u0645\u0633\u062a\u062d\u0642\u0627\u062a<\/button>\r\n <button type=\"reset\" class=\"btn btn-secondary\">Unloading fields<\/button>\r\n <\/div>\r\n <input type=\"hidden\" name=\"trp-form-language\" value=\"en\"\/><\/form>\r\n\r\n <div id=\"results\" class=\"results hidden\">\r\n <h3>\u0646\u062a\u0627\u0626\u062c \u062d\u0633\u0627\u0628 \u0627\u0644\u0645\u0633\u062a\u062d\u0642\u0627\u062a \u0627\u0644\u0639\u0645\u0627\u0644\u064a\u0629<\/h3>\r\n <div id=\"resultsList\"><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <script>\r\n \/\/ Switch button functionality\r\n document.querySelectorAll('.switch-btn').forEach(btn => {\r\n btn.addEventListener('click', function(e) {\r\n e.preventDefault();\r\n const target = this.dataset.target;\r\n const value = this.dataset.value;\r\n \r\n \/\/ Update active state\r\n this.parentNode.querySelectorAll('.switch-btn').forEach(b => b.classList.remove('active'));\r\n this.classList.add('active');\r\n \r\n \/\/ Update hidden input\r\n document.getElementById(target).value = value;\r\n \r\n \/\/ Handle conditional fields\r\n handleConditionalFields();\r\n });\r\n });\r\n\r\n \/\/ Contract period change handler\r\n document.getElementById('contractPeriod').addEventListener('change', function() {\r\n const value = this.value;\r\n const durationGroup = document.getElementById('contractDurationGroup');\r\n const monthsGroup = document.getElementById('contractDurationMonthsGroup');\r\n \r\n if (value === '3') { \/\/ \u0623\u062e\u0631\u0649\r\n durationGroup.classList.remove('hidden');\r\n monthsGroup.classList.remove('hidden');\r\n } else {\r\n durationGroup.classList.add('hidden');\r\n monthsGroup.classList.add('hidden');\r\n }\r\n });\r\n\r\n \/\/ Reason change handler\r\n document.getElementById('reason').addEventListener('change', function() {\r\n const value = this.value;\r\n const subReasonGroup = document.getElementById('subReasonGroup');\r\n const subReasonSelect = document.getElementById('subReason');\r\n \r\n \/\/ Clear previous options\r\n subReasonSelect.innerHTML = '<option value=\"\">-- \u0627\u062e\u062a\u0631 --<\/option>';\r\n \r\n if (value === '4') { \/\/ \u0625\u0646\u0647\u0627\u0621 \u0627\u0644\u0639\u0642\u062f \u0645\u0646 \u0642\u0628\u0644 \u0635\u0627\u062d\u0628 \u0627\u0644\u0639\u0645\u0644\r\n subReasonGroup.classList.remove('hidden');\r\n subReasonSelect.innerHTML += `\r\n <option value=\"1\">\u0641\u0633\u062e \u062a\u0639\u0633\u0641\u064a<\/option>\r\n <option value=\"2\">\u0641\u0633\u062e \u0645\u0634\u0631\u0648\u0639 (\u0628\u0646\u0627\u0621 \u0639\u0644\u0649 \u0627\u0644\u0645\u0627\u062f\u0629 80)<\/option>\r\n <option value=\"4\">\u0641\u0633\u062e \u0645\u0634\u0631\u0648\u0639 (\u0644\u0623\u0633\u0628\u0627\u0628 \u0623\u062e\u0631\u0649)<\/option>\r\n `;\r\n } else if (value === '5') { \/\/ \u0625\u0646\u0647\u0627\u0621 \u0627\u0644\u0639\u0642\u062f \u0645\u0646 \u0642\u0628\u0644 \u0627\u0644\u0639\u0627\u0645\u0644\r\n subReasonGroup.classList.remove('hidden');\r\n subReasonSelect.innerHTML += `\r\n <option value=\"5\">\u0641\u0633\u062e \u063a\u064a\u0631 \u0645\u0634\u0631\u0648\u0639<\/option>\r\n <option value=\"6\">\u0625\u0646\u0647\u0627\u0621 \u0627\u0644\u0645\u0634\u0631\u0648\u0639 (\u0628\u0646\u0627\u0621 \u0639\u0644\u0649 \u0627\u0644\u0645\u0627\u062f\u0629 81)<\/option>\r\n <option value=\"4\">\u0641\u0633\u062e \u0645\u0634\u0631\u0648\u0639 (\u0644\u0623\u0633\u0628\u0627\u0628 \u0623\u062e\u0631\u0649)<\/option>\r\n `;\r\n } else if (value === '6') { \/\/ \u062e\u0627\u0631\u062c \u0625\u0631\u0627\u062f\u0629 \u0627\u0644\u0637\u0631\u0641\u064a\u0646\r\n subReasonGroup.classList.remove('hidden');\r\n subReasonSelect.innerHTML += `\r\n <option value=\"7\">\u0627\u0644\u0642\u0648\u0629 \u0627\u0644\u0642\u0627\u0647\u0631\u0629<\/option>\r\n <option value=\"8\">\u0648\u0641\u0627\u0629 \u0627\u0644\u0645\u0648\u0638\u0641 \u0623\u0648 \u0635\u0627\u062d\u0628 \u0627\u0644\u0639\u0645\u0644 \u0627\u0644\u0630\u064a \u0631\u0648\u0639\u064a\u062a \u0634\u062e\u0635\u064a\u062a\u0647 \u0641\u064a \u0627\u0644\u0639\u0642\u062f<\/option>\r\n <option value=\"9\">\u0639\u062c\u0632 \u0627\u0644\u0645\u0648\u0638\u0641 \u0627\u0644\u0635\u062d\u064a \u0628\u0645\u0648\u062c\u0628 \u0634\u0647\u0627\u062f\u0629 \u0645\u0639\u062a\u0645\u062f\u0629<\/option>\r\n <option value=\"10\">\u0625\u063a\u0644\u0627\u0642 \u0627\u0644\u0645\u0646\u0634\u0623\u0629 \u0646\u0647\u0627\u0626\u064a\u0627\u064b<\/option>\r\n `;\r\n } else {\r\n subReasonGroup.classList.add('hidden');\r\n }\r\n });\r\n\r\n \/\/ Vacation system handler\r\n function handleConditionalFields() {\r\n const vacationSystem = document.getElementById('vacationSystem').value;\r\n const annualVacationsGroup = document.getElementById('annualVacationsGroup');\r\n \r\n if (vacationSystem === '4') { \/\/ \u063a\u064a\u0631 \u0630\u0644\u0643\r\n annualVacationsGroup.classList.remove('hidden');\r\n } else {\r\n annualVacationsGroup.classList.add('hidden');\r\n }\r\n }\r\n\r\n \/\/ Form submission\r\n document.getElementById('laborForm').addEventListener('submit', function(e) {\r\n e.preventDefault();\r\n calculateBenefits();\r\n });\r\n\r\n \/\/ Reset form\r\n document.getElementById('laborForm').addEventListener('reset', function() {\r\n document.getElementById('results').classList.add('hidden');\r\n \/\/ Reset switch buttons\r\n document.querySelectorAll('.switch-group').forEach(group => {\r\n group.querySelectorAll('.switch-btn').forEach(btn => btn.classList.remove('active'));\r\n group.querySelector('.switch-btn').classList.add('active');\r\n });\r\n \/\/ Reset hidden inputs\r\n document.getElementById('isSaudi').value = 'true';\r\n document.getElementById('vacationSystem').value = '2';\r\n });\r\n\r\n function calculateBenefits() {\r\n const formData = new FormData(document.getElementById('laborForm'));\r\n const data = Object.fromEntries(formData);\r\n \r\n \/\/ Validate required fields\r\n if (!data.serviceStartDate || !data.serviceEndDate || !data.totalSalary) {\r\n alert('\u064a\u0631\u062c\u0649 \u0645\u0644\u0621 \u062c\u0645\u064a\u0639 \u0627\u0644\u062d\u0642\u0648\u0644 \u0627\u0644\u0645\u0637\u0644\u0648\u0628\u0629');\r\n return;\r\n }\r\n\r\n \/\/ Calculate service period\r\n const startDate = new Date(data.serviceStartDate);\r\n const endDate = new Date(data.serviceEndDate);\r\n const servicePeriod = calculateServicePeriod(startDate, endDate);\r\n \r\n if (servicePeriod.totalDays <= 0) {\r\n alert('\u062a\u0627\u0631\u064a\u062e \u0646\u0647\u0627\u064a\u0629 \u0627\u0644\u062e\u062f\u0645\u0629 \u064a\u062c\u0628 \u0623\u0646 \u064a\u0643\u0648\u0646 \u0628\u0639\u062f \u062a\u0627\u0631\u064a\u062e \u0628\u062f\u0627\u064a\u0629 \u0627\u0644\u062e\u062f\u0645\u0629');\r\n return;\r\n }\r\n\r\n const totalSalary = parseFloat(data.totalSalary);\r\n const dailySalary = totalSalary \/ 30;\r\n \r\n \/\/ Calculate benefits\r\n const results = {\r\n servicePeriod: servicePeriod,\r\n endOfServiceBenefit: calculateEndOfServiceBenefit(servicePeriod, totalSalary, data.reason, data.subReason),\r\n vacationBenefit: calculateVacationBenefit(servicePeriod, data.vacationSystem, data.annualVacations, data.usedVacations, dailySalary),\r\n overtimePay: calculateOvertimePay(parseFloat(data.workingHours || 0), totalSalary),\r\n delayedPayments: parseFloat(data.delayedPayments || 0),\r\n compensation: calculateCompensation(data.reason, data.subReason, totalSalary, servicePeriod)\r\n };\r\n\r\n displayResults(results);\r\n }\r\n\r\n function calculateServicePeriod(startDate, endDate) {\r\n const diffTime = endDate - startDate;\r\n const totalDays = Math.floor(diffTime \/ (1000 * 60 * 60 * 24));\r\n const years = Math.floor(totalDays \/ 365);\r\n const months = Math.floor((totalDays % 365) \/ 30);\r\n const days = totalDays % 30;\r\n \r\n return { years, months, days, totalDays };\r\n }\r\n\r\n function calculateEndOfServiceBenefit(servicePeriod, totalSalary, reason, subReason) {\r\n \/\/ \u0625\u0630\u0627 \u0643\u0627\u0646\u062a \u0645\u062f\u0629 \u0627\u0644\u062e\u062f\u0645\u0629 \u0623\u0642\u0644 \u0645\u0646 \u0633\u0646\u0629 \u0641\u0644\u0627 \u062a\u0648\u062c\u062f \u0645\u0643\u0627\u0641\u0623\u0629\r\n if (servicePeriod.years < 1 && servicePeriod.months < 12) {\r\n return 0;\r\n }\r\n\r\n const monthlySalary = totalSalary;\r\n let benefit = 0;\r\n\r\n \/\/ \u0627\u0644\u0641\u0633\u062e \u0627\u0644\u062a\u0639\u0633\u0641\u064a \u064a\u062d\u0635\u0644 \u0639\u0644\u0649 \u0643\u0627\u0645\u0644 \u0627\u0644\u0645\u0643\u0627\u0641\u0623\u0629 \u0628\u062f\u0648\u0646 \u062e\u0635\u0645\r\n const isArbitraryDismissal = (reason === '4' && subReason === '1');\r\n const isUnlawfulEmployeeTermination = (reason === '5' && subReason === '5');\r\n \r\n \/\/ \u0625\u0630\u0627 \u0643\u0627\u0646 \u0627\u0644\u0641\u0633\u062e \u062a\u0639\u0633\u0641\u064a \u0623\u0648 \u0625\u0646\u0647\u0627\u0621 \u063a\u064a\u0631 \u0645\u0634\u0631\u0648\u0639 \u0645\u0646 \u0627\u0644\u0639\u0627\u0645\u0644\u060c \u064a\u062d\u0635\u0644 \u0639\u0644\u0649 \u0643\u0627\u0645\u0644 \u0627\u0644\u0645\u0643\u0627\u0641\u0623\u0629\r\n if (isArbitraryDismissal || isUnlawfulEmployeeTermination) {\r\n if (servicePeriod.years >= 5) {\r\n benefit += 5 * (monthlySalary * 0.5);\r\n benefit += (servicePeriod.years - 5) * monthlySalary;\r\n } else {\r\n benefit += servicePeriod.years * (monthlySalary * 0.5);\r\n }\r\n \r\n \/\/ \u0625\u0636\u0627\u0641\u0629 \u0627\u0644\u0645\u0643\u0627\u0641\u0623\u0629 \u0627\u0644\u062a\u0646\u0627\u0633\u0628\u064a\u0629 \u0644\u0644\u0623\u0634\u0647\u0631\r\n const monthlyBenefit = servicePeriod.years < 5 ? (monthlySalary * 0.5) \/ 12 : monthlySalary \/ 12;\r\n benefit += servicePeriod.months * monthlyBenefit;\r\n \r\n return Math.round(benefit * 100) \/ 100;\r\n }\r\n\r\n \/\/ \u0627\u0644\u0627\u0633\u062a\u0642\u0627\u0644\u0629 \u0623\u0648 \u0627\u0644\u0641\u0633\u062e \u0645\u0646 \u0642\u0628\u0644 \u0627\u0644\u0639\u0627\u0645\u0644 (\u062a\u0637\u0628\u064a\u0642 \u0627\u0644\u062e\u0635\u0645)\r\n if (reason === '3' || reason === '5') {\r\n if (servicePeriod.years < 2) {\r\n return 0; \/\/ \u0623\u0642\u0644 \u0645\u0646 \u0633\u0646\u062a\u064a\u0646 \u0644\u0627 \u062a\u0648\u062c\u062f \u0645\u0643\u0627\u0641\u0623\u0629\r\n }\r\n \r\n \/\/ \u062d\u0633\u0627\u0628 \u0627\u0644\u0645\u0643\u0627\u0641\u0623\u0629 \u0627\u0644\u0623\u0633\u0627\u0633\u064a\u0629\r\n if (servicePeriod.years >= 5) {\r\n benefit += 5 * (monthlySalary * 0.5);\r\n benefit += (servicePeriod.years - 5) * monthlySalary;\r\n } else {\r\n benefit += servicePeriod.years * (monthlySalary * 0.5);\r\n }\r\n \r\n \/\/ \u0625\u0636\u0627\u0641\u0629 \u0627\u0644\u0645\u0643\u0627\u0641\u0623\u0629 \u0627\u0644\u062a\u0646\u0627\u0633\u0628\u064a\u0629 \u0644\u0644\u0623\u0634\u0647\u0631\r\n const monthlyBenefit = servicePeriod.years < 5 ? (monthlySalary * 0.5) \/ 12 : monthlySalary \/ 12;\r\n benefit += servicePeriod.months * monthlyBenefit;\r\n \r\n \/\/ \u062a\u0637\u0628\u064a\u0642 \u0627\u0644\u062e\u0635\u0645 \u062d\u0633\u0628 \u0645\u062f\u0629 \u0627\u0644\u062e\u062f\u0645\u0629\r\n if (servicePeriod.years >= 2 && servicePeriod.years < 5) {\r\n benefit = benefit \/ 3; \/\/ \u062b\u0644\u062b \u0627\u0644\u0645\u0643\u0627\u0641\u0623\u0629\r\n } else if (servicePeriod.years >= 5 && servicePeriod.years < 10) {\r\n benefit = benefit * 2 \/ 3; \/\/ \u062b\u0644\u062b\u064a \u0627\u0644\u0645\u0643\u0627\u0641\u0623\u0629\r\n }\r\n \/\/ 10 \u0633\u0646\u0648\u0627\u062a \u0641\u0623\u0643\u062b\u0631 \u064a\u062d\u0635\u0644 \u0639\u0644\u0649 \u0643\u0627\u0645\u0644 \u0627\u0644\u0645\u0643\u0627\u0641\u0623\u0629\r\n \r\n return Math.round(benefit * 100) \/ 100;\r\n }\r\n\r\n \/\/ \u0628\u0627\u0642\u064a \u0627\u0644\u062d\u0627\u0644\u0627\u062a (\u0627\u062a\u0641\u0627\u0642 \u0627\u0644\u0637\u0631\u0641\u064a\u0646\u060c \u0627\u0646\u062a\u0647\u0627\u0621 \u0645\u062f\u0629 \u0627\u0644\u0639\u0642\u062f\u060c \u0625\u0644\u062e) - \u0643\u0627\u0645\u0644 \u0627\u0644\u0645\u0643\u0627\u0641\u0623\u0629\r\n if (servicePeriod.years >= 5) {\r\n benefit += 5 * (monthlySalary * 0.5);\r\n benefit += (servicePeriod.years - 5) * monthlySalary;\r\n } else {\r\n benefit += servicePeriod.years * (monthlySalary * 0.5);\r\n }\r\n \r\n \/\/ \u0625\u0636\u0627\u0641\u0629 \u0627\u0644\u0645\u0643\u0627\u0641\u0623\u0629 \u0627\u0644\u062a\u0646\u0627\u0633\u0628\u064a\u0629 \u0644\u0644\u0623\u0634\u0647\u0631\r\n const monthlyBenefit = servicePeriod.years < 5 ? (monthlySalary * 0.5) \/ 12 : monthlySalary \/ 12;\r\n benefit += servicePeriod.months * monthlyBenefit;\r\n \r\n return Math.round(benefit * 100) \/ 100;\r\n }\r\n\r\n function calculateVacationBenefit(servicePeriod, vacationSystem, annualVacations, usedVacations, dailySalary) {\r\n let annualVacationDays = 21; \/\/ Default according to Saudi Labor Law\r\n \r\n if (vacationSystem === '4' && annualVacations) {\r\n annualVacationDays = parseInt(annualVacations);\r\n }\r\n\r\n \/\/ \u062d\u0633\u0627\u0628 \u0625\u062c\u0645\u0627\u0644\u064a \u0623\u064a\u0627\u0645 \u0627\u0644\u0625\u062c\u0627\u0632\u0629 \u0627\u0644\u0645\u0633\u062a\u062d\u0642\u0629\r\n const totalVacationDays = servicePeriod.years * annualVacationDays + \r\n Math.floor(servicePeriod.months * annualVacationDays \/ 12);\r\n \r\n \/\/ \u062d\u0633\u0627\u0628 \u0627\u0644\u0623\u064a\u0627\u0645 \u0627\u0644\u0645\u062a\u0628\u0642\u064a\u0629 \u0628\u0639\u062f \u062e\u0635\u0645 \u0627\u0644\u0645\u0633\u062a\u062e\u062f\u0645 \u0645\u0646\u0647\u0627\r\n const remainingDays = Math.max(0, totalVacationDays - parseInt(usedVacations || 0));\r\n \r\n return {\r\n totalDays: totalVacationDays,\r\n remainingDays: remainingDays,\r\n benefit: Math.round(remainingDays * dailySalary * 100) \/ 100\r\n };\r\n }\r\n\r\n function calculateOvertimePay(hours, totalSalary) {\r\n if (hours <= 0) return 0;\r\n \r\n const hourlyRate = totalSalary \/ (30 * 8); \/\/ Assuming 8 hours per day\r\n const overtimeRate = hourlyRate * 1.5; \/\/ 150% for overtime\r\n \r\n return Math.round(hours * overtimeRate * 100) \/ 100;\r\n }\r\n\r\n function calculateCompensation(reason, subReason, totalSalary, servicePeriod) {\r\n \/\/ \u0627\u0644\u062a\u0639\u0648\u064a\u0636 \u0639\u0646 \u0627\u0644\u0641\u0633\u062e \u0627\u0644\u062a\u0639\u0633\u0641\u064a\r\n if (reason === '4' && subReason === '1') { \/\/ \u0641\u0633\u062e \u062a\u0639\u0633\u0641\u064a\r\n \/\/ \u0627\u0644\u062a\u0639\u0648\u064a\u0636 \u064a\u062a\u0631\u0627\u0648\u062d \u0628\u064a\u0646 \u0634\u0647\u0631 \u0625\u0644\u0649 3 \u0623\u0634\u0647\u0631 \u0631\u0627\u062a\u0628 \u062d\u0633\u0628 \u0645\u062f\u0629 \u0627\u0644\u062e\u062f\u0645\u0629\r\n if (servicePeriod.years >= 5) {\r\n return totalSalary * 2; \/\/ \u0634\u0647\u0631\u064a\u0646 \u0631\u0627\u062a\u0628\r\n } else {\r\n return totalSalary; \/\/ \u0634\u0647\u0631 \u0631\u0627\u062a\u0628\r\n }\r\n }\r\n \r\n \/\/ \u0627\u0644\u062a\u0639\u0648\u064a\u0636 \u0639\u0646 \u0627\u0644\u0641\u0633\u062e \u063a\u064a\u0631 \u0627\u0644\u0645\u0634\u0631\u0648\u0639 \u0645\u0646 \u0642\u0628\u0644 \u0627\u0644\u0639\u0627\u0645\u0644\r\n if (reason === '5' && subReason === '5') { \/\/ \u0641\u0633\u062e \u063a\u064a\u0631 \u0645\u0634\u0631\u0648\u0639\r\n return totalSalary; \/\/ \u0634\u0647\u0631 \u0631\u0627\u062a\u0628\r\n }\r\n \r\n return 0;\r\n }\r\n\r\n function displayResults(results) {\r\n const resultsDiv = document.getElementById('results');\r\n const resultsListDiv = document.getElementById('resultsList');\r\n \r\n const total = results.endOfServiceBenefit + \r\n results.vacationBenefit.benefit + \r\n results.overtimePay + \r\n results.delayedPayments + \r\n results.compensation;\r\n\r\n resultsListDiv.innerHTML = `\r\n <div class=\"result-item\">\r\n <span class=\"result-label\">\u0641\u062a\u0631\u0629 \u0627\u0644\u062e\u062f\u0645\u0629<\/span>\r\n <span class=\"result-value\">${results.servicePeriod.years} \u0633\u0646\u0629\u060c ${results.servicePeriod.months} \u0634\u0647\u0631\u060c ${results.servicePeriod.days} \u064a\u0648\u0645<\/span>\r\n <\/div>\r\n <div class=\"result-item\">\r\n <span class=\"result-label\">\u0645\u0643\u0627\u0641\u0623\u0629 \u0646\u0647\u0627\u064a\u0629 \u0627\u0644\u062e\u062f\u0645\u0629<\/span>\r\n <span class=\"result-value\">${results.endOfServiceBenefit.toLocaleString('ar-SA')} \u0631\u064a\u0627\u0644<\/span>\r\n <\/div>\r\n <div class=\"result-item\">\r\n <span class=\"result-label\">\u0625\u062c\u0627\u0632\u0627\u062a \u0645\u0633\u062a\u062d\u0642\u0629 (${results.vacationBenefit.remainingDays} \u064a\u0648\u0645)<\/span>\r\n <span class=\"result-value\">${results.vacationBenefit.benefit.toLocaleString('ar-SA')} \u0631\u064a\u0627\u0644<\/span>\r\n <\/div>\r\n <div class=\"result-item\">\r\n <span class=\"result-label\">\u0623\u062c\u0631 \u0627\u0644\u0639\u0645\u0644 \u0627\u0644\u0625\u0636\u0627\u0641\u064a<\/span>\r\n <span class=\"result-value\">${results.overtimePay.toLocaleString('ar-SA')} \u0631\u064a\u0627\u0644<\/span>\r\n <\/div>\r\n <div class=\"result-item\">\r\n <span class=\"result-label\">\u0627\u0644\u0623\u062c\u0648\u0631 \u0627\u0644\u0645\u062a\u0623\u062e\u0631\u0629<\/span>\r\n <span class=\"result-value\">${results.delayedPayments.toLocaleString('ar-SA')} \u0631\u064a\u0627\u0644<\/span>\r\n <\/div>\r\n <div class=\"result-item\">\r\n <span class=\"result-label\">\u062a\u0639\u0648\u064a\u0636\u0627\u062a<\/span>\r\n <span class=\"result-value\">${results.compensation.toLocaleString('ar-SA')} \u0631\u064a\u0627\u0644<\/span>\r\n <\/div>\r\n <div class=\"result-item total-result\">\r\n <span class=\"result-label\">\u0625\u062c\u0645\u0627\u0644\u064a \u0627\u0644\u0645\u0633\u062a\u062d\u0642\u0627\u062a<\/span>\r\n <span class=\"result-value\">${total.toLocaleString('ar-SA')} \u0631\u064a\u0627\u0644<\/span>\r\n <\/div>\r\n `;\r\n \r\n resultsDiv.classList.remove('hidden');\r\n }\r\n\r\n \/\/ Initialize\r\n handleConditionalFields();\r\n <\/script>\r\n<\/body>\r\n<\/html>\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>","protected":false},"excerpt":{"rendered":"<p>\u0627\u0644\u062d\u0627\u0633\u0628\u0629 \u0627\u0644\u0639\u0645\u0627\u0644\u064a\u0629 \u0627\u0644\u0633\u0639\u0648\u062f\u064a\u0629 \u0627\u0644\u062d\u0627\u0633\u0628\u0629 \u0627\u0644\u0639\u0645\u0627\u0644\u064a\u0629 \u0627\u0644\u0633\u0639\u0648\u062f\u064a\u0629 \u0627\u062d\u0633\u0628 \u0645\u0633\u062a\u062d\u0642\u0627\u062a\u0643 \u0627\u0644\u0639\u0645\u0627\u0644\u064a\u0629 \u0648\u0641\u0642\u0627\u064b \u0644\u0646\u0638\u0627\u0645 \u0627\u0644\u0639\u0645\u0644 \u0627\u0644\u0633\u0639\u0648\u062f\u064a \ud83d\udcca \u062a\u0642\u0631\u064a\u0631 \u0645\u0639\u062a\u0645\u062f \u26a1 \u0645\u0631\u0648\u0646\u0629 \u0641\u064a \u0627\u0644\u0645\u062f\u062e\u0644\u0627\u062a \ud83d\ude80 \u0646\u062a\u0627\u0626\u062c \u0641\u0648\u0631\u064a\u0629 \u0627\u0633\u0645 \u0627\u0644\u0645\u0648\u0638\u0641 \u0627\u0644\u0628\u0631\u064a\u062f \u0627\u0644\u0625\u0644\u0643\u062a\u0631\u0648\u0646\u064a \u0631\u0642\u0645 \u0627\u0644\u062c\u0648\u0627\u0644 \u062a\u0627\u0631\u064a\u062e \u0628\u062f\u0627\u064a\u0629 \u0627\u0644\u062e\u062f\u0645\u0629 \u062a\u0627\u0631\u064a\u062e \u0646\u0647\u0627\u064a\u0629 \u0627\u0644\u062e\u062f\u0645\u0629 \u0627\u0644\u062c\u0646\u0633\u064a\u0629 \u0633\u0639\u0648\u062f\u064a \u063a\u064a\u0631 \u0633\u0639\u0648\u062f\u064a \u0645\u062f\u0629 \u0627\u0644\u0639\u0642\u062f \u0627\u0644\u0623\u062e\u064a\u0631 — \u0627\u062e\u062a\u0631 —\u0633\u0646\u0629\u0633\u0646\u062a\u0627\u0646\u0623\u062e\u0631\u0649\u063a\u064a\u0631 \u0645\u062d\u062f\u062f \u0627\u0644\u0645\u062f\u0629 \u0627\u0644\u0645\u062f\u0629 \u0628\u0627\u0644\u0633\u0646\u0648\u0627\u062a \u0627\u0644\u0645\u062f\u0629 \u0628\u0627\u0644\u0623\u0634\u0647\u0631 \u0633\u0628\u0628 \u0627\u0646\u062a\u0647\u0627\u0621 \u0627\u0644\u062e\u062f\u0645\u0629 — […]<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"_eb_attr":"","footnotes":""},"class_list":["post-652","page","type-page","status-publish","hentry"],"blocksy_meta":[],"_links":{"self":[{"href":"https:\/\/aljuhani-transport.com\/en\/wp-json\/wp\/v2\/pages\/652","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/aljuhani-transport.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/aljuhani-transport.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/aljuhani-transport.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/aljuhani-transport.com\/en\/wp-json\/wp\/v2\/comments?post=652"}],"version-history":[{"count":26,"href":"https:\/\/aljuhani-transport.com\/en\/wp-json\/wp\/v2\/pages\/652\/revisions"}],"predecessor-version":[{"id":904,"href":"https:\/\/aljuhani-transport.com\/en\/wp-json\/wp\/v2\/pages\/652\/revisions\/904"}],"wp:attachment":[{"href":"https:\/\/aljuhani-transport.com\/en\/wp-json\/wp\/v2\/media?parent=652"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}