<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>فاتورة <?= e($sale['invoice_number'] ?? '') ?></title>
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body {
            font-family: 'Segoe UI', Tahoma, Arial, sans-serif;
            direction: rtl;
            color: #1A1A2E;
            background: #fff;
            padding: 20px;
            font-size: 13px;
            line-height: 1.6;
        }
        .invoice-container { max-width: 800px; margin: 0 auto; }
        .header { text-align: center; margin-bottom: 25px; padding-bottom: 15px; border-bottom: 2px solid #0D7377; }
        .header h1 { font-size: 22px; color: #0D7377; margin-bottom: 4px; }
        .header .invoice-number { font-size: 16px; font-weight: 700; color: #1A1A2E; margin-top: 8px; }
        .header .invoice-date { font-size: 13px; color: #6B7280; }
        .info-row { display: flex; justify-content: space-between; margin-bottom: 20px; gap: 20px; }
        .info-block { flex: 1; }
        .info-block h3 { font-size: 13px; color: #0D7377; margin-bottom: 6px; border-bottom: 1px solid #E5E7EB; padding-bottom: 4px; }
        .info-block p { font-size: 13px; margin-bottom: 3px; }
        .info-block p span { color: #6B7280; }
        table { width: 100%; border-collapse: collapse; margin-bottom: 20px; }
        thead th {
            background: #0D7377;
            color: #fff;
            padding: 10px 12px;
            font-size: 13px;
            font-weight: 600;
            text-align: right;
        }
        tbody td {
            padding: 10px 12px;
            border-bottom: 1px solid #E5E7EB;
            font-size: 13px;
        }
        tbody tr:nth-child(even) { background: #F9FAFB; }
        .totals-section { display: flex; justify-content: flex-end; margin-bottom: 25px; }
        .totals-table { width: 280px; }
        .totals-table .row { display: flex; justify-content: space-between; padding: 6px 0; font-size: 13px; }
        .totals-table .row.total {
            border-top: 2px solid #0D7377;
            margin-top: 6px;
            padding-top: 10px;
            font-size: 18px;
            font-weight: 800;
            color: #0D7377;
        }
        .footer { text-align: center; padding-top: 20px; border-top: 1px dashed #D1D5DB; color: #6B7280; font-size: 12px; }
        @media print {
            body { padding: 0; }
            @page { margin: 15mm; }
        }
    </style>
</head>
<body>
    <div class="invoice-container">
        <!-- Header -->
        <div class="header">
            <h1>النادي</h1>
            <div class="invoice-number">فاتورة رقم: <?= e($sale['invoice_number'] ?? '') ?></div>
            <div class="invoice-date"><?= e($sale['sale_date'] ?? $sale['created_at'] ?? '') ?></div>
        </div>

        <!-- Customer & Sale Info -->
        <div class="info-row">
            <div class="info-block">
                <h3>بيانات العميل</h3>
                <?php
                $customerTypeLabels = ['member' => 'عضو', 'player' => 'لاعب', 'guest' => 'زائر'];
                $cType = $sale['customer_type'] ?? 'guest';
                ?>
                <p><span>النوع:</span> <?= e($customerTypeLabels[$cType] ?? $cType) ?></p>
                <?php if ($cType === 'guest'): ?>
                <p><span>الاسم:</span> <?= e($sale['guest_name'] ?? '—') ?></p>
                <?php if (!empty($sale['guest_phone'])): ?>
                <p><span>الهاتف:</span> <?= e($sale['guest_phone']) ?></p>
                <?php endif; ?>
                <?php else: ?>
                <p><span>الاسم:</span> <?= e($sale['guest_name'] ?? '—') ?></p>
                <?php endif; ?>
            </div>
            <div class="info-block">
                <h3>بيانات الفاتورة</h3>
                <p><span>المخزن:</span> <?= e($sale['warehouse_name'] ?? '—') ?></p>
                <p><span>طريقة الدفع:</span> <?= e(match($sale['payment_method'] ?? '') { 'cash' => 'نقدي', 'visa' => 'فيزا', 'transfer' => 'تحويل بنكي', default => $sale['payment_method'] ?? '—' }) ?></p>
                <p><span>الحالة:</span> <?= e(\App\Modules\Sales\Models\Sale::getStatusLabel($sale['status'] ?? 'draft')) ?></p>
            </div>
        </div>

        <!-- Items Table -->
        <table>
            <thead>
                <tr>
                    <th style="width:40px;">#</th>
                    <th>الصنف</th>
                    <th style="width:80px;">الكمية</th>
                    <th style="width:100px;">السعر</th>
                    <th style="width:110px;">الإجمالي</th>
                </tr>
            </thead>
            <tbody>
                <?php foreach ($items as $i => $item): ?>
                <tr>
                    <td><?= $i + 1 ?></td>
                    <td style="font-weight:600;"><?= e($item['item_name_ar'] ?? '') ?></td>
                    <td style="text-align:center;"><?= e($item['quantity'] ?? '0') ?></td>
                    <td style="direction:ltr;text-align:left;"><?= money($item['unit_price'] ?? 0) ?></td>
                    <td style="direction:ltr;text-align:left;font-weight:700;"><?= money($item['line_total'] ?? 0) ?></td>
                </tr>
                <?php endforeach; ?>
            </tbody>
        </table>

        <!-- Totals -->
        <div class="totals-section">
            <div class="totals-table">
                <div class="row">
                    <span style="color:#6B7280;">المجموع الفرعي</span>
                    <span style="font-weight:600;direction:ltr;"><?= money($sale['subtotal'] ?? 0) ?></span>
                </div>
                <?php if ((float) ($sale['discount_amount'] ?? 0) > 0): ?>
                <div class="row">
                    <span style="color:#DC2626;">الخصم</span>
                    <span style="font-weight:600;color:#DC2626;direction:ltr;">- <?= money($sale['discount_amount'] ?? 0) ?></span>
                </div>
                <?php endif; ?>
                <?php if ((float) ($sale['tax_amount'] ?? 0) > 0): ?>
                <div class="row">
                    <span style="color:#D97706;">الضريبة</span>
                    <span style="font-weight:600;direction:ltr;"><?= money($sale['tax_amount'] ?? 0) ?></span>
                </div>
                <?php endif; ?>
                <div class="row total">
                    <span>الإجمالي</span>
                    <span style="direction:ltr;"><?= money($sale['total_amount'] ?? 0) ?></span>
                </div>
            </div>
        </div>

        <!-- Footer -->
        <div class="footer">
            <p>شكرًا لتعاملكم معنا</p>
            <p style="margin-top:4px;">تم الطباعة بتاريخ: <?= date('Y-m-d H:i') ?></p>
        </div>
    </div>

    <script>
        window.addEventListener('load', function() {
            window.print();
        });
    </script>
</body>
</html>
