<!DOCTYPE html>
<html lang="ku" dir="rtl">
<head>
  <meta charset="UTF-8">
  <title>AR Invoice</title>

  <style>
body {
  font-family: 'Segoe UI', Tahoma, Arial;
  background: linear-gradient(to right, #eef4ff, #f9fcff);
  padding: 30px;
}

.invoice {
  width: 900px;
  background: white;
  margin: auto;
  padding: 20px;
  border-radius: 14px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}

/* HEADER BANNER */
.header-banner {
  background: linear-gradient(135deg, #1e88e5, #00b0ff);
  color: white;
  padding: 15px;
  border-radius: 12px;
}

.header-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-left, .header-right {
  width: 35%;
  font-size: 14px;
}

.header-center {
  text-align: center;
}

.logo-center {
  width: 90px;
}

.header-line {
  border-top: 2px dashed white;
  margin: 10px 0;
}

.header-contacts {
  display: flex;
  justify-content: space-around;
  background: rgba(255,255,255,0.15);
  padding: 8px;
  border-radius: 8px;
  font-weight: bold;
}

/* TABLES */
.info, .items {
  width: 100%;
  border-collapse: collapse;
  margin-top: 15px;
}

.info td {
  background: #f5f9ff;
  padding: 10px;
  border-radius: 6px;
}

.items th {
  background: #1e88e5;
  color: white;
  padding: 10px;
}

.items td {
  background: #fafafa;
  border-bottom: 1px solid #ddd;
  padding: 8px;
}

.items tr:hover td {
  background: #e1f0ff;
  transition: 0.3s;
}

/* INPUT */
input {
  border: none;
  background: transparent;
  width: 100%;
  text-align: center;
  font-weight: 500;
  outline: none;
}

/* BOTTOM */
.bottom {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
  gap: 15px;
}

.warning {
  width: 50%;
  background: #fff3f3;
  border-left: 6px solid red;
  padding: 12px;
  border-radius: 10px;
}

.warning h3 {
  color: red;
  margin-bottom: 8px;
}

.totals {
  width: 40%;
  background: linear-gradient(135deg, #f7fbff, #e3f2fd);
  border-radius: 12px;
  padding: 15px;
}

.totals h3 {
  background: #1e88e5;
  color: white;
  padding: 8px;
  border-radius: 8px;
  text-align: center;
}

.totals div {
  display: flex;
  justify-content: space-between;
  margin: 8px 0;
  font-weight: 500;
}

.sum {
  background: #bbdefb;
  padding: 8px;
  border-radius: 6px;
  font-weight: bold;
}

.remain {
  background: #1976d2;
  color: white;
  padding: 8px;
  border-radius: 6px;
}

/* PRINT */
@media print {
  * {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
}

@media print {
  body {
    background: white !important;
    padding: 0;
  }

  .invoice {
    width: 100%;
    box-shadow: none !important;
    border-radius: 0 !important;
  }

  .header-banner {
    background: linear-gradient(135deg, #1e88e5, #00b0ff) !important;
    color: white !important;
  }

  .items th {
    background: #1e88e5 !important;
    color: white !important;
  }

  .totals h3 {
    background: #1e88e5 !important;
    color: white !important;
  }

  .sum {
    background: #bbdefb !important;
  }

  .remain {
    background: #1976d2 !important;
    color: white !important;
  }

  .warning {
    background: #fff3f3 !important;
    border-left: 6px solid red !important;
  }
}

  </style>
</head>
<body>

<div class="invoice">
	<!-- HEADER -->
	<div class="header-banner">
		<table width=100%>
			<tr>
				<th><h2>ئلبسة اراس پولو</h2><p>بيع الألبسة الرجالية بالجملة</p><small>أربيل - سوق داوانتان تايق تحت الأرضي -H25</small></th>
				<th width=30%><div class="header-center"><img  src="icon/logo2.png" height=200px></div></th>
				<th><h2>پۆشاکی ئاراس پۆلۆ</h2><p>فرۆشتنی جل و بەرگی پیاوان بە کۆ</p><small>هەولێر - بازاڕی داوانتان، ژێر زەوی - H25</small></th>
			</tr>
		</table>
		<div class="header-line"></div>
		<div class="header-contacts">
			<span>0750 468 6054</span>
			<span>0770 452 5352</span>
		</div>
	</div>

  <!-- CLIENT INFO -->
  <table class="info">
    <tr>
      <td>ژمارەی پسووڵە:</td><td rowspan=2> <input type="text" value="1019836"></td>
      <td>ناوی کڕیار:</td><td rowspan=2> <input type="text" value="ماهر ابراهيم"></td>
      <td>ژمارەی مۆبایل: </td ><td rowspan=2> <input type="text" value="07507987872"></td>
    </tr>
	<tr>
      <td>رقم الفاتورة: </td>
      <td>اسم الزبون: </td>
      <td>رقم الهاتف: </td>
    </tr>
    <tr>
      <td>التاريخ: <input type="date" value="2025-12-31"></td>
      <td colspan="2">العنوان: <input type="text" value="ديوان"></td>
    </tr>
  </table>

  <!-- ITEMS -->
  <table class="items">
    <thead>
      <tr>
        <th>#</th>
        <th>كود المادة</th>
        <th>اسم المادة</th>
        <th>كارتون</th>
        <th>عدد</th>
        <th>سعر</th>
        <th>المجموع</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>1</td>
        <td><input value="بلوز صوف بنزينر"></td>
        <td><input value="20"></td>
        <td><input value="100"></td>
        <td><input value="8"></td>
        <td>$800</td>
      </tr>
      <tr>
        <td>2</td>
        <td>2</td>
        <td><input value="بنطال جينز كامل تركي"></td>
        <td><input value="1"></td>
        <td><input value="5"></td>
        <td><input value="9.5"></td>
        <td>$47.5</td>
      </tr>
    </tbody>
  </table>

  <!-- BOTTOM -->
  <div class="bottom">
    <div class="warning">
      <h3>تێبینی / تحذير</h3>
      <p>
        گەڕاندنەوەی کاڵا تەنها لە ماوەی 10 رۆژدا قبوڵ دەکرێت<br>
        يرجى فحص البضاعة قبل المغادرة
      </p>
    </div>

    <div class="totals">
      <h3>حسابات</h3>
      <div>حساب الفاتورة: <span>$847.5</span></div>
      <div>الحساب القديم: <span>$2,302.5</span></div>
      <div class="sum">جمع الحساب: <span>$3,150</span></div>
      <div>واصل: <span>$0</span></div>
      <div class="remain">باقي: <span>$3,150</span></div>
    </div>
  </div>

</div>

</body>
</html>
