<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>حاسبة الأسهم المتقدمة</title>
<style>
body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background-color: #f0f2f5; display: flex; justify-content: center; padding: 20px; }
.container { background: white; padding: 25px; border-radius: 15px; box-shadow: 0 10px 25px rgba(0,0,0,0.1); width: 100%; max-width: 450px; }
h2 { text-align: center; color: #1a73e8; margin-bottom: 25px; }
.input-group { margin-bottom: 15px; }
label { display: block; margin-bottom: 8px; font-weight: bold; color: #444; font-size: 14px; }
input { width: 100%; padding: 12px; border: 2px solid #eaeeef; border-radius: 8px; box-sizing: border-box; font-size: 16px; outline: none; transition: border-color 0.3s; }
input:focus { border-color: #1a73e8; }
button { width: 100%; padding: 14px; background-color: #1a73e8; color: white; border: none; border-radius: 8px; cursor: pointer; font-size: 18px; font-weight: bold; margin-top: 10px; }
button:hover { background-color: #1557b0; }
.summary-box { margin-top: 20px; padding: 15px; background-color: #f8f9fa; border-radius: 8px; border-right: 5px solid #007bff; }
.summary-item { display: flex; justify-content: space-between; margin-bottom: 8px; font-size: 15px; color: #555; }
.summary-item span:last-child { font-weight: bold; color: #222; }
#result { margin-top: 15px; padding: 15px; border-radius: 8px; text-align: center; font-size: 18px; font-weight: bold; display: none; }
.profit { background-color: #e6f4ea; color: #1e7e34; border: 1px solid #c3e6cb; }
.loss { background-color: #fce8e6; color: #d93025; border: 1px solid #f5c6cb; }
</style>
</head>
<body>
<div class="container">
<h2>حاسبة الأسهم</h2>
<div class="input-group">
<label>عدد الأسهم:</label>
<input type="number" id="shares" placeholder="مثلاً: 500">
</div>
<div class="input-group">
<label>سعر شراء السهم الواحد:</label>
<input type="number" id="buyPrice" step="0.01" placeholder="0.00">
</div>
<div class="input-group">
<label>سعر بيع السهم الواحد:</label>
<input type="number" id="sellPrice" step="0.01" placeholder="0.00">
</div>
<div class="input-group">
<label>العمولات والضرائب (المجموع):</label>
<input type="number" id="fees" step="0.01" value="0">
</div>
<button onclick="calculate()">احسب الآن</button>
<div id="summary" class="summary-box" style="display: none;">
<div class="summary-item">
<span>إجمالي قيمة الشراء (رأس المال):</span>
<span id="totalCost">0.00</span>
</div>
<div class="summary-item">
<span>إجمالي قيمة البيع (قبل الخصم):</span>
<span id="totalRevenue">0.00</span>
</div>
</div>
<div id="result"></div>
</div>
<script>
function calculate() {
const shares = parseFloat(document.getElementById('shares').value);
const buyPrice = parseFloat(document.getElementById('buyPrice').value);
const sellPrice = parseFloat(document.getElementById('sellPrice').value);
const fees = parseFloat(document.getElementById('fees').value) || 0;
if (!shares || !buyPrice || !sellPrice) {
alert("يرجى إدخال البيانات المطلوبة");
return;
}
const totalCost = shares * buyPrice;
const totalRevenue = shares * sellPrice;
const netResult = totalRevenue - totalCost - fees;
// إظهار ملخص المبالغ
document.getElementById('summary').style.display = 'block';
document.getElementById('totalCost').innerText = totalCost.toLocaleString(undefined, {minimumFractionDigits: 2}) + " ريال";
document.getElementById('totalRevenue').innerText = totalRevenue.toLocaleString(undefined, {minimumFractionDigits: 2}) + " ريال";
// إظهار النتيجة النهائية
const resultDiv = document.getElementById('result');
resultDiv.style.display = 'block';
if (netResult > 0) {
resultDiv.className = 'profit';
resultDiv.innerHTML = "صافي المربح: " + netResult.toLocaleString(undefined, {minimumFractionDigits: 2}) + " ريال <br><small>بعد خصم كافة التكاليف</small>";
} else if (netResult < 0) {
resultDiv.className = 'loss';
resultDiv.innerHTML = "صافي الخسارة: " + Math.abs(netResult).toLocaleString(undefined, {minimumFractionDigits: 2}) + " ريال <br><small>شاملة العمولات</small>";
} else {
resultDiv.className = '';
resultDiv.style.backgroundColor = '#eee';
resultDiv.innerHTML = "تعادل (رأس مالك عاد كما هو)";
}
}
</script>
</body>
</html>