<?php $__template->layout('Layout.main'); ?>
<?php $__template->section('title'); ?>فاتورة <?= e($sale['invoice_number'] ?? '') ?><?php $__template->endSection(); ?>

<?php $__template->section('page_actions'); ?>
<a href="/sales/<?= (int) $sale['id'] ?>/print" target="_blank" class="btn btn-outline"><i data-lucide="printer" style="width:15px;height:15px;vertical-align:middle;margin-left:4px;"></i> طباعة</a>
<?php if (($sale['status'] ?? '') === 'completed'): ?>
<button type="button" onclick="document.getElementById('voidSection').style.display='block'" class="btn btn-outline" style="color:#DC2626;border-color:#DC2626;">
    <i data-lucide="ban" style="width:15px;height:15px;vertical-align:middle;margin-left:4px;"></i> إلغاء
</button>
<a href="/sales/<?= (int) $sale['id'] ?>/refund" class="btn btn-outline" style="color:#D97706;border-color:#D97706;">
    <i data-lucide="rotate-ccw" style="width:15px;height:15px;vertical-align:middle;margin-left:4px;"></i> استرجاع
</a>
<?php endif; ?>
<?php if (($sale['status'] ?? '') === 'partially_refunded'): ?>
<a href="/sales/<?= (int) $sale['id'] ?>/refund" class="btn btn-outline" style="color:#D97706;border-color:#D97706;">
    <i data-lucide="rotate-ccw" style="width:15px;height:15px;vertical-align:middle;margin-left:4px;"></i> استرجاع إضافي
</a>
<?php endif; ?>
<a href="/sales" class="btn btn-outline"><i data-lucide="arrow-right" style="width:15px;height:15px;vertical-align:middle;margin-left:4px;"></i> العودة للقائمة</a>
<?php $__template->endSection(); ?>

<?php $__template->section('content'); ?>

<?php
$statusColors = [
    'draft'              => ['bg' => '#F3F4F6', 'color' => '#6B7280'],
    'completed'          => ['bg' => '#ECFDF5', 'color' => '#059669'],
    'partially_refunded' => ['bg' => '#FFF7ED', 'color' => '#D97706'],
    'fully_refunded'     => ['bg' => '#FEE2E2', 'color' => '#DC2626'],
    'voided'             => ['bg' => '#FEE2E2', 'color' => '#DC2626'],
];
$statusLabels = \App\Modules\Sales\Models\Sale::getStatuses();
$customerTypeLabels = ['member' => 'عضو', 'player' => 'لاعب', 'guest' => 'زائر'];
$paymentMethodLabels = ['cash' => 'نقدي', 'visa' => 'فيزا', 'transfer' => 'تحويل بنكي'];
$st = $sale['status'] ?? 'draft';
$stColors = $statusColors[$st] ?? $statusColors['draft'];
?>

<!-- Sale Info Card -->
<div class="card" style="margin-bottom:20px;">
    <div style="padding:15px 20px;border-bottom:1px solid #E5E7EB;display:flex;align-items:center;gap:8px;">
        <i data-lucide="file-text" style="width:18px;height:18px;color:#0D7377;"></i>
        <h3 style="margin:0;color:#0D7377;font-size:15px;">بيانات الفاتورة</h3>
        <div style="margin-right:auto;">
            <span style="display:inline-block;padding:3px 12px;border-radius:10px;font-size:12px;font-weight:600;background:<?= $stColors['bg'] ?>;color:<?= $stColors['color'] ?>;">
                <?= e($statusLabels[$st] ?? $st) ?>
            </span>
        </div>
    </div>
    <div style="padding:20px;">
        <div style="display:grid;grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));gap:20px;">
            <div>
                <div style="font-size:12px;color:#6B7280;margin-bottom:4px;">رقم الفاتورة</div>
                <div style="font-weight:700;font-family:monospace;font-size:16px;color:#0D7377;"><?= e($sale['invoice_number'] ?? '') ?></div>
            </div>
            <div>
                <div style="font-size:12px;color:#6B7280;margin-bottom:4px;">التاريخ</div>
                <div style="font-weight:600;"><?= e($sale['sale_date'] ?? $sale['created_at'] ?? '') ?></div>
            </div>
            <div>
                <div style="font-size:12px;color:#6B7280;margin-bottom:4px;">العميل</div>
                <div style="font-weight:600;">
                    <span style="display:inline-block;padding:2px 8px;border-radius:8px;font-size:11px;font-weight:600;background:#F3F4F6;color:#6B7280;margin-left:6px;">
                        <?= e($customerTypeLabels[$sale['customer_type'] ?? 'guest'] ?? '') ?>
                    </span>
                    <?= e($customerName ?? '—') ?>
                </div>
            </div>
            <div>
                <div style="font-size:12px;color:#6B7280;margin-bottom:4px;">المخزن</div>
                <div style="font-weight:600;"><?= e($sale['warehouse_name'] ?? '—') ?></div>
            </div>
            <div>
                <div style="font-size:12px;color:#6B7280;margin-bottom:4px;">طريقة الدفع</div>
                <div style="font-weight:600;"><?= e($paymentMethodLabels[$sale['payment_method'] ?? ''] ?? ($sale['payment_method'] ?? '—')) ?></div>
            </div>
            <div>
                <div style="font-size:12px;color:#6B7280;margin-bottom:4px;">الحالة</div>
                <div>
                    <span style="display:inline-block;padding:3px 12px;border-radius:10px;font-size:12px;font-weight:600;background:<?= $stColors['bg'] ?>;color:<?= $stColors['color'] ?>;">
                        <?= e($statusLabels[$st] ?? $st) ?>
                    </span>
                </div>
            </div>
        </div>
        <?php if (!empty($sale['notes'])): ?>
        <div style="margin-top:15px;padding-top:12px;border-top:1px solid #F3F4F6;">
            <div style="font-size:12px;color:#6B7280;margin-bottom:4px;">ملاحظات</div>
            <div style="font-size:14px;color:#4B5563;"><?= e($sale['notes']) ?></div>
        </div>
        <?php endif; ?>
    </div>
</div>

<!-- Items Table -->
<div class="card" style="margin-bottom:20px;">
    <div style="padding:15px 20px;border-bottom:1px solid #E5E7EB;display:flex;align-items:center;gap:8px;">
        <i data-lucide="package" style="width:18px;height:18px;color:#0D7377;"></i>
        <h3 style="margin:0;color:#0D7377;font-size:15px;">الأصناف</h3>
    </div>
    <div class="table-responsive">
        <table class="data-table">
            <thead>
                <tr>
                    <th>الصنف</th>
                    <th>الكمية</th>
                    <th>السعر</th>
                    <th>الضريبة</th>
                    <th>الإجمالي</th>
                </tr>
            </thead>
            <tbody>
                <?php foreach ($items as $item): ?>
                <tr>
                    <td style="font-weight:600;">
                        <?= e($item['item_name_ar'] ?? '') ?>
                        <?php if (!empty($item['sku'])): ?>
                        <div style="font-size:11px;color:#9CA3AF;font-family:monospace;"><?= e($item['sku']) ?></div>
                        <?php endif; ?>
                        <?php if (!empty($item['package_id'])): ?>
                        <span style="display:inline-block;font-size:10px;color:#D97706;background:#FFF7ED;padding:1px 6px;border-radius:6px;margin-top:2px;">باقة</span>
                        <?php endif; ?>
                    </td>
                    <td style="font-weight:600;"><?= 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;color:#D97706;"><?= money($item['tax_amount'] ?? 0) ?></td>
                    <td style="direction:ltr;text-align:left;font-weight:700;"><?= money($item['line_total'] ?? 0) ?></td>
                </tr>
                <?php endforeach; ?>
            </tbody>
        </table>
    </div>
</div>

<!-- Totals Card -->
<div class="card" style="margin-bottom:20px;">
    <div style="padding:20px;">
        <div style="max-width:320px;margin-right:auto;">
            <div style="display:flex;justify-content:space-between;padding:8px 0;font-size:14px;color:#6B7280;">
                <span>المجموع الفرعي</span>
                <span style="font-weight:600;direction:ltr;"><?= money($sale['subtotal'] ?? 0) ?></span>
            </div>
            <?php if ((float) ($sale['discount_amount'] ?? 0) > 0): ?>
            <div style="display:flex;justify-content:space-between;padding:8px 0;font-size:14px;color:#DC2626;">
                <span>الخصم <?= !empty($sale['discount_reason']) ? '(' . e($sale['discount_reason']) . ')' : '' ?></span>
                <span style="font-weight:600;direction:ltr;">- <?= money($sale['discount_amount']) ?></span>
            </div>
            <?php endif; ?>
            <?php if ((float) ($sale['tax_amount'] ?? 0) > 0): ?>
            <div style="display:flex;justify-content:space-between;padding:8px 0;font-size:14px;color:#D97706;">
                <span>الضريبة</span>
                <span style="font-weight:600;direction:ltr;"><?= money($sale['tax_amount']) ?></span>
            </div>
            <?php endif; ?>
            <div style="display:flex;justify-content:space-between;padding:12px 0;margin-top:8px;border-top:2px solid #0D7377;font-size:20px;font-weight:800;color:#0D7377;">
                <span>الإجمالي</span>
                <span style="direction:ltr;"><?= money($sale['total_amount'] ?? 0) ?></span>
            </div>
            <?php if ((float) ($sale['amount_refunded'] ?? 0) > 0): ?>
            <div style="display:flex;justify-content:space-between;padding:8px 0;font-size:14px;color:#DC2626;">
                <span>المبلغ المسترجع</span>
                <span style="font-weight:600;direction:ltr;">- <?= money($sale['amount_refunded']) ?></span>
            </div>
            <div style="display:flex;justify-content:space-between;padding:8px 0;font-size:16px;font-weight:700;color:#059669;">
                <span>الصافي</span>
                <span style="direction:ltr;"><?= money(bcsub((string) ($sale['total_amount'] ?? '0'), (string) ($sale['amount_refunded'] ?? '0'), 2)) ?></span>
            </div>
            <?php endif; ?>
        </div>
    </div>
</div>

<!-- Void Section (Hidden) -->
<?php if (($sale['status'] ?? '') === 'completed'): ?>
<div id="voidSection" class="card" style="margin-bottom:20px;display:none;border:2px solid #DC2626;">
    <div style="padding:15px 20px;border-bottom:1px solid #FEE2E2;background:#FEF2F2;display:flex;align-items:center;gap:8px;">
        <i data-lucide="alert-triangle" style="width:18px;height:18px;color:#DC2626;"></i>
        <h3 style="margin:0;color:#DC2626;font-size:15px;">إلغاء الفاتورة</h3>
    </div>
    <div style="padding:20px;">
        <p style="color:#6B7280;font-size:14px;margin-bottom:15px;">هل أنت متأكد من إلغاء هذه الفاتورة؟ سيتم إرجاع الكميات للمخزون تلقائيًا.</p>
        <form method="POST" action="/sales/<?= (int) $sale['id'] ?>/void">
            <?= csrf_field() ?>
            <div class="form-group" style="margin-bottom:15px;">
                <label class="form-label">سبب الإلغاء <span style="color:#DC2626;">*</span></label>
                <textarea name="reason" class="form-input" rows="3" required placeholder="أدخل سبب إلغاء الفاتورة..."></textarea>
            </div>
            <div style="display:flex;gap:10px;">
                <button type="submit" class="btn" style="background:#DC2626;color:#fff;padding:10px 25px;border:none;border-radius:8px;cursor:pointer;font-weight:600;font-family:inherit;">
                    <i data-lucide="ban" style="width:15px;height:15px;vertical-align:middle;margin-left:4px;"></i> تأكيد الإلغاء
                </button>
                <button type="button" onclick="document.getElementById('voidSection').style.display='none'" class="btn btn-outline" style="padding:10px 25px;">
                    تراجع
                </button>
            </div>
        </form>
    </div>
</div>
<?php endif; ?>

<!-- Refunds List -->
<?php if (!empty($refunds)): ?>
<div class="card" style="margin-bottom:20px;">
    <div style="padding:15px 20px;border-bottom:1px solid #E5E7EB;display:flex;align-items:center;gap:8px;">
        <i data-lucide="rotate-ccw" style="width:18px;height:18px;color:#D97706;"></i>
        <h3 style="margin:0;color:#D97706;font-size:15px;">المرتجعات</h3>
    </div>
    <div class="table-responsive">
        <table class="data-table">
            <thead>
                <tr>
                    <th>رقم المرتجع</th>
                    <th>المبلغ</th>
                    <th>السبب</th>
                    <th>إعادة للمخزون</th>
                    <th>التاريخ</th>
                </tr>
            </thead>
            <tbody>
                <?php foreach ($refunds as $refund): ?>
                <tr>
                    <td style="font-weight:600;font-family:monospace;"><?= e($refund['refund_number'] ?? '') ?></td>
                    <td style="font-weight:700;color:#DC2626;direction:ltr;text-align:left;"><?= money($refund['refund_amount'] ?? 0) ?></td>
                    <td style="font-size:13px;color:#6B7280;"><?= e($refund['reason'] ?? '—') ?></td>
                    <td>
                        <?php if ((int) ($refund['return_to_stock'] ?? 0)): ?>
                        <span style="display:inline-block;padding:3px 10px;border-radius:10px;font-size:12px;font-weight:600;background:#ECFDF5;color:#059669;">نعم</span>
                        <?php else: ?>
                        <span style="display:inline-block;padding:3px 10px;border-radius:10px;font-size:12px;font-weight:600;background:#F3F4F6;color:#6B7280;">لا</span>
                        <?php endif; ?>
                    </td>
                    <td style="font-size:13px;white-space:nowrap;"><?= e($refund['created_at'] ?? '') ?></td>
                </tr>
                <?php endforeach; ?>
            </tbody>
        </table>
    </div>
</div>
<?php endif; ?>

<script>
document.addEventListener('DOMContentLoaded', function() {
    if (typeof lucide !== 'undefined') {
        lucide.createIcons();
    }
});
</script>
<?php $__template->endSection(); ?>
