<!DOCTYPE html>
<html lang="fa">
<head>
  <meta charset="UTF-8" />
  <title>محاسبه مهریه به نرخ روز</title>
  <style>
    body {
      font-family: Tahoma, sans-serif;
      direction: rtl;
      background-color: #f4f4f4;
      padding: 30px;
    }
    .container {
      background-color: white;
      max-width: 500px;
      margin: auto;
      padding: 25px;
      border-radius: 10px;
      box-shadow: 0 0 10px #ccc;
    }
    h2 {
      color: #4a148c;
      margin-bottom: 20px;
    }
    label, select, input {
      display: block;
      width: 100%;
      margin-bottom: 10px;
      font-size: 16px;
      box-sizing: border-box;
    }
    input {
      padding: 8px;
      border: 1px solid #ccc;
      border-radius: 4px;
    }
    .result-box {
      background-color: #e0f7fa;
      padding: 15px;
      border-radius: 8px;
      border: 1px solid #26c6da;
      margin-top: 20px;
      color: #006064;
      line-height: 1.6;
    }
    .amount-text {
      font-size: 14px;
      color: #666;
      margin-bottom: 10px;
      min-height: 24px;
      white-space: pre-wrap;
    }
    .error {
      background-color: #ffecec;
      border: 1px solid #f44336;
      color: #d32f2f;
      padding: 10px;
      border-radius: 8px;
      display: none;
      margin-top: 10px;
    }
        .spaced-lines p {
      margin-bottom: 10px;
    }
    .spaced-lines p:last-child {
      margin-bottom: 0;
    }
  </style>
</head>
<body>
  <div class="container">
    <h2>محاسبه مهریه به نرخ روز</h2>

    <label for="amount">مبلغ مهریه (ریال):</label>
    <input type="text" id="amount" placeholder="مثلاً ۵۰۰۰۰۰۰۰" inputmode="numeric" autocomplete="off" />
    <div class="amount-text" id="amount_words"></div>

    <label for="start_year">سال عقد:</label>
    <select id="start_year">
      <option value="">انتخاب کنید</option>
      <option value="1390">۱۳۹۰</option>
      <option value="1391">۱۳۹۱</option>
      <option value="1392">۱۳۹۲</option>
      <option value="1393">۱۳۹۳</option>
      <option value="1394">۱۳۹۴</option>
      <option value="1395">۱۳۹۵</option>
      <option value="1396">۱۳۹۶</option>
      <option value="1397">۱۳۹۷</option>
      <option value="1398">۱۳۹۸</option>
      <option value="1399">۱۳۹۹</option>
      <option value="1400">۱۴۰۰</option>
      <option value="1401">۱۴۰۱</option>
      <option value="1402">۱۴۰۲</option>
      <option value="1403">۱۴۰۳</option>
      <option value="1404" selected>۱۴۰۴</option>
    </select>

    <label for="end_year">سال محاسبه:</label>
    <select id="end_year">
      <option value="">انتخاب کنید</option>
      <option value="1390">۱۳۹۰</option>
      <option value="1391">۱۳۹۱</option>
      <option value="1392">۱۳۹۲</option>
      <option value="1393">۱۳۹۳</option>
      <option value="1394">۱۳۹۴</option>
      <option value="1395">۱۳۹۵</option>
      <option value="1396">۱۳۹۶</option>
      <option value="1397">۱۳۹۷</option>
      <option value="1398">۱۳۹۸</option>
      <option value="1399">۱۳۹۹</option>
      <option value="1400">۱۴۰۰</option>
      <option value="1401">۱۴۰۱</option>
      <option value="1402">۱۴۰۲</option>
      <option value="1403">۱۴۰۳</option>
      <option value="1404" selected>۱۴۰۴</option>
    </select>

    <div class="result-box" id="result" style="display: none;"></div>
    <div class="error" id="errorBox">لطفاً مبلغ صحیح وارد کنید.</div>
  </div>

  <script>
    // شاخص سال‌ها (نرخ‌های فرضی برای محاسبه)
    const index = {
      1390: 70, 1391: 80, 1392: 90, 1393: 95, 1394: 98,
      1395: 100, 1396: 108, 1397: 135, 1398: 180, 1399: 220,
      1400: 290, 1401: 370, 1402: 460, 1403: 520, 1404: 580
    };

    // تابع تبدیل عدد به حروف به صورت ساده و قابل توسعه
    Number.prototype.num2persian = function () {
      const e = ["صفر","یک","دو","سه","چهار","پنج","شش","هفت","هشت","نه","ده","یازده","دوازده","سیزده","چهارده","پانزده","شانزده","هفده","هجده","نوزده","بیست"];
      const t = ["", "", "بیست", "سی", "چهل", "پنجاه", "شصت", "هفتاد", "هشتاد", "نود"];
      const r = ["", "صد", "دویست", "سیصد", "چهارصد", "پانصد", "ششصد", "هفتصد", "هشتصد", "نهصد"];
      const i = ["", "هزار", "میلیون", "میلیارد", "بیلیون"];
      let o = this.toString().replace(/[^0-9]/g, '');
      if (o === '0' || o === '') return e[0];

      const chunk = (str) => {
        let arr = [];
        let len = str.length;
        while(len > 0) {
          arr.unshift(str.slice(Math.max(len - 3, 0), len));
          len -=3;
        }
        return arr;
      };

      const threeDigit = (num) => {
        let word = "";
        if (num === "000") return "";
        if (num.length < 3) num = ("000" + num).slice(-3);
        let [a,b,c] = num.split("").map(Number);
        if (a > 0) word += r[a];
        if (b > 1) {
          if (word) word += " و ";
          word += t[b];
          if (c > 0) word += " و " + e[c];
        } else if (b === 1 || c > 0) {
          if (word) word += " و ";
          if (b === 1) word += e[10 + c];
          else word += e[c];
        }
        return word;
      };

      const parts = chunk(o);
      let strArr = parts.map((p, idx) => {
        let part = threeDigit(p);
        if (part) return part + (i[parts.length - idx - 1] ? (" " + i[parts.length - idx -1]) : "");
        return "";
      }).filter(Boolean);

      return strArr.join(" و ");
    };

    document.addEventListener("DOMContentLoaded", function() {
      const amountInput = document.getElementById("amount");
      const amountWords = document.getElementById("amount_words");
      const startYear = document.getElementById("start_year");
      const endYear = document.getElementById("end_year");
      const resultBox = document.getElementById("result");
      const errorBox = document.getElementById("errorBox");

      // استخراج عدد صحیح از ورودی (حذف تمام غیر عددی)
      function getRawAmount() {
        return amountInput.value.replace(/[^0-9]/g, '');
      }

      // بروزرسانی نمایش مبلغ به حروف و عدد با کاما (جداگانه)
      function displayFormattedAmount() {
        const raw = getRawAmount();
        if (!raw) {
          amountWords.innerText = "";
          return;
        }
        const numberValue = Number(raw);
        if (isNaN(numberValue)) {
          amountWords.innerText = "";
          return;
        }
        
        // نمایش عدد با جداکننده هزارگان و به حروف در کنار هم
        amountWords.innerText = `عدد: ${numberValue.toLocaleString('fa-IR')}\nبه حروف: ${numberValue.num2persian()} ریال`;
      }

      // تابع محاسبه نرخ روز مهریه و نمایش نتیجه
      function calculate() {
        const raw = getRawAmount();
        const start = parseInt(startYear.value);
        const end = parseInt(endYear.value);

        if (!raw || isNaN(raw) || !start || !end) {
          resultBox.style.display = "none";
          errorBox.style.display = raw ? "none" : "block";
          return;
        }

        errorBox.style.display = "none";

        const startIndex = index[start] ?? 100;
        const endIndex = index[end] ?? 580;

        const adjusted = Number(raw) * (endIndex / startIndex);

        // نمایش نتیجه با فرمت فارسی
        const rial = Number(Math.round(adjusted)).toLocaleString("fa-IR") + " ریال";
        const toman = Number(Math.round(adjusted / 10)).toLocaleString("fa-IR") + " تومان";

        const rialWords = Number(Math.round(adjusted)).num2persian() + " ریال";
        const tomanWords = Number(Math.round(adjusted / 10)).num2persian() + " تومان";
        
        resultBox.innerHTML = `
          <p>ارزش مهریه به نرخ روز:</p>
          <strong>${rial}</strong><br>
          <strong>${toman}</strong>
          <p>به حروف:</p>
          <div class="spaced-lines">
            <p>ریال: ${rialWords}</p>
            <p>تومان: ${tomanWords}</p>
          </div>
        `;
        resultBox.style.display = "block";
      }

      // رویدادهای ورودی بدون تغییر مستقیم در value فیلد
      amountInput.addEventListener("input", function() {
        let raw = getRawAmount();
        
        // اصلاح مقدار ورودی فقط در صورت وجود کاراکتر غیرعدد
        if (amountInput.value !== raw) {
          // قطعا کرسر به انتها می‌رود ولی برای ساده بودن همین کفایت می‌کند
          amountInput.value = raw;
        }

        displayFormattedAmount();
        calculate();
      });

      startYear.addEventListener("change", calculate);
      endYear.addEventListener("change", calculate);
    });
  </script>
</body>
</html>

این همه چیزش عالی، فقط می خوام خود فیلدی که عدد وارد میشه هم اعداد سه تا سه تا سپراتور داشته باشن