<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="Cache-Control" content="max-age=200">
   <link rel="icon" type="image/x-icon" href="../5.ico">
    <link rel="stylesheet" href="../css/q4r6w1t9.css">
	 
    <title>محاسبه خسارت تاخیر تادیه ماهیانه</title>
	
	
	
<style>
body {
    font-family: Arial, sans-serif;
    margin: 0px;
    direction: rtl;
}

.container {
    display: flex;
    direction: rtl;
}

.box {
    flex: 1;
    transition: transform 0.3s ease, background-color 0.3s ease;
    margin: 0 5px; /* جایگزین gap */
}

.box:hover {
    transform: scale(1.05);
    background-color: #e0f7e0;
}

.sub-options, .check-options, .extra-options, .additional-options {
    display: none;
    margin-top: 10px;
    direction: rtl;
}

.sub-options input, .check-options input, .extra-options input, .additional-options input {
    width: 20px;
    height: 20px;
    display: inline-block;
    margin-left: 10px;
    appearance: none;
    border-radius: 50%;
    border: 2px solid #ccc;
    background-color: #fff;
    cursor: pointer;
    transform: scale(1);
    transition: background-color 0.3s ease;
}

.sub-options input:hover, .check-options input:hover, .extra-options input:hover, .additional-options input:hover {
    background-color: #e0f7e0;
}

.sub-options label, .check-options label, .extra-options label, .additional-options label {
    display: flex;
    align-items: center;
    margin-left: 5px;
    font-size: 16px;
    color: #333;
}

.sub-options input:hover + span, .check-options input:hover + span, .extra-options input:hover + span, .additional-options input:hover + span {
    color: #007bff;
    font-size: 18px;
}

.sub-options input:checked + span, .check-options input:checked + span, .extra-options input:checked + span, .additional-options input:checked + span {
    color: #007bff;
    font-weight: bold;
}

.additional-options {
    display: flex;
    flex-direction: column;
}

.option-group {
    display: flex;
    margin: 0 5px; /* جایگزین gap */
}

.option-group.additional-options-group {
    margin-top: 10px;
}

table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
    overflow-x: auto;
}

table, th, td {
    border: 2px solid #ccc;
}

th, td {
    padding: 16px;
    text-align: right;
}

th {
    background-color: #f4f4f4;
    font-size: 18px;
}

td {
    font-size: 16px;
}

tr:hover {
    background-color: #fce4ec;
}

td:hover {
    background-color: #fce4ec;
}

/* طراحی واکنشگرا برای صفحات کوچک‌تر */
@media screen and (max-width: 768px) {
    th, td {
        font-size: 14px;
        padding: 10px;
    }
    
    table {
        display: block;
        overflow-x: auto;
    }
}
		
		
		
		
	

</style> 
 

</head>


 <h1 style="font-family: B Zar ; font-size: 20px; font-weight: bold; text-align: center;">حالات مختلف نحوه محاسبات خسارت تاخیر تادیه به صورت ماهیانه</h1> 

<div   > 
	  <button  class="but1" onclick="window.location.href='../index.html';"> صفحه اولیه</button> 
	     <button  class="but1 " onclick="window.open('https://eitaa.com/mohasebh_khesarat/19', '_blank')">آموزش در ایتا</button>
		<button  class="but1 "  onclick="window.open('https://splus.ir/mohasebh_khesarat/17', '_blank')"  >آموزش در سروش</button>
	</div> 
	
	
 

<body style="font-family: 'B Titr', sans-serif; font-size: 15px;">
 

    <div class="container">
<div class="box">
   <h1 style="font-family: B Zar; font-size: 14px; font-weight: bold; text-align: center; background-color: #ffeb3b; padding: 10px; border-radius: 20px; margin: 10px 20px;">
      حالات مختلف محاسبه خسارت تاخیر تادیه (دریک نگاه)
   </h1> 

   <div style="display: flex; justify-content: center; margin-top: 10px;">
      <button class="but111" onclick="window.location.href='../m/index9.html';" style="margin: 0 5px;">مقدماتی</button>
      <button class="but111" onclick="window.location.href='../m/index12.html';" style="margin: 0 5px;">پیشرفته</button>
   </div>
</div>






        <div class="box">
		<h1 style="font-family: B Zar; font-size: 14px; font-weight: bold; text-align: center; background-color: #ffeb3b; padding: 10px; border-radius: 20px; margin: 10px 20px;">
       
      حالات مختلف محاسبه خسارت تاخیر تادیه(به صورت پلکانی)
   </h1> 
 			 
            <div class="container">


                <input type="radio" id="noExemption" name="exemption" value="no" onclick="handleNoExemptionClick()">
                <label for="noExemption">اعسار ندارد</label>

                <input type="radio" id="hasExemption" name="exemption" value="yes" onclick="handleExemptionClick()">
                <label for="hasExemption">اعسار دارد</label>
            </div>

            <div id="subOptions" class="sub-options">
                <input type="radio" id="noCollection" name="collection" value="no" onclick="handleNoCollectionClick()">
                <label for="noCollection">وصولی ندارد</label>

                <input type="radio" id="hasCollection" name="collection" value="yes" onclick="handleCollectionClick()">
                <label for="hasCollection">وصولی دارد</label>
            </div>

            <div id="checkOptions" class="check-options">
                <input type="radio" id="oneCheck" name="check" value="one" onclick="window.location.href='../m/index9.html';">
                <label for="oneCheck">یک چک</label>

                <input type="radio" id="multipleChecks" name="check" value="multiple" onclick="window.location.href='../m/index10.html';">
                <label for="multipleChecks">چند چک</label>
            </div>

            <div id="extraOptions" class="extra-options">
                <input type="radio" id="ali" name="extra" value="ali" onclick="window.location.href='../m/index11.html';">
                <label for="ali">یک چک</label>
            </div>

            <table id="additionalOptions">
                <thead>
                    <tr>
                        <th>نوع گزینه</th>
                        <th>گزینه‌ها</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>پیش قسط</td>
                        <td>
                            <input type="radio" id="option1" name="prepayment" value="1" onclick="showSelection('پیش قسط ندارد')">
                            <label for="option1">ندارد</label>
                            <input type="radio" id="option2" name="prepayment" value="2" onclick="showSelection('پیش قسط دارد')">
                            <label for="option2">دارد</label>
                        </td>
                    </tr>
                    <tr>
                        <td>درصد افزایش سالیانه</td>
                        <td>
                            <input type="radio" id="option3" name="annualIncrease" value="3" onclick="showSelection('درصد افزایش سالیانه ندارد')">
                            <label for="option3">ندارد</label>
                            <input type="radio" id="option4" name="annualIncrease" value="4" onclick="showSelection('درصد افزایش سالیانه دارد')">
                            <label for="option4">دارد</label>
                        </td>
                    </tr>
                    <tr>
                        <td>اقساط معوق</td>
                        <td>
                            <input type="radio" id="option5" name="delayedInstallments" value="5" onclick="showSelection('اقساط معوق ندارد')">
                            <label for="option5">ندارد</label>
                            <input type="radio" id="option6" name="delayedInstallments" value="6" onclick="showSelection('اقساط معوق دارد')">
                            <label for="option6">دارد</label>
                        </td>
                    </tr>
                </tbody>
            </table>
</div>
           
			
			   <div  style="background:White;  border: none; box-shadow: none;" class="box" ></div>
			   
			    <div id="result"></div>
	 	 
 <script type="text/javascript" src="../js/a9f2j3l4.js"></script>
	<script type="text/javascript" src="../js/k2j8h9f7.js"></script>
	<script type="text/javascript" src="../js/k2j8h9f7r.js"></script>
    <script type="text/javascript" src="../js/m1q4p9r6.js"></script>
    <script type="text/javascript" src="../js/p8x4l5s3.js"></script>
    <script type="text/javascript" src="../js/x7k5v8b2.js"></script>
    <script type="text/javascript" src="../js/d3k6v1m5.js"></script>
    <script type="text/javascript" src="../js/z3t7n8w5.js"></script>
    <script type="text/javascript" src="../js/z3t7n8w6.js"></script>
    <script type="text/javascript" src="../js/r2k7m9q1.js"></script>
	<script src="../js/jalaali.min.js"></script>
		 
        </div>
    </div>
	
</body>
</html>
