<?php $__template->layout('Layout.main'); ?>
<?php $__template->section('title'); ?>أمر شراء <?= e($order['po_number']) ?><?php $__template->endSection(); ?>

<?php $__template->section('page_actions'); ?>
<?php if ($order['status'] === 'draft'): ?>
<form method="POST" action="/inventory/purchase-orders/<?= (int) $order['id'] ?>/submit" style="display:inline;">
    <?= csrf_field() ?>
    <button type="submit" class="btn" style="background:#D97706;color:#fff;border:none;" onclick="return confirm('هل أنت متأكد من تقديم أمر الشراء؟');">
        <i data-lucide="send" style="width:15px;height:15px;vertical-align:middle;margin-left:4px;"></i> تقديم
    </button>
</form>
<?php endif; ?>
<?php if ($order['status'] === 'submitted'): ?>
<form method="POST" action="/inventory/purchase-orders/<?= (int) $order['id'] ?>/approve" style="display:inline;">
    <?= csrf_field() ?>
    <button type="submit" class="btn" style="background:#0D7377;color:#fff;border:none;" onclick="return confirm('هل أنت متأكد من اعتماد أمر الشراء؟');">
        <i data-lucide="check-circle" style="width:15px;height:15px;vertical-align:middle;margin-left:4px;"></i> اعتماد
    </button>
</form>
<?php endif; ?>
<?php if ($order['status'] === 'approved' || $order['status'] === 'partially_received'): ?>
<a href="/inventory/purchase-orders/<?= (int) $order['id'] ?>/receive" class="btn" style="background:#059669;color:#fff;border:none;">
    <i data-lucide="package-check" style="width:15px;height:15px;vertical-align:middle;margin-left:4px;"></i> استلام
</a>
<?php endif; ?>
<?php if ($order['status'] === 'draft' || $order['status'] === 'submitted'): ?>
<form method="POST" action="/inventory/purchase-orders/<?= (int) $order['id'] ?>/cancel" style="display:inline;">
    <?= csrf_field() ?>
    <button type="submit" class="btn" style="background:#FEE2E2;color:#DC2626;border:none;" onclick="return confirm('هل أنت متأكد من إلغاء أمر الشراء؟ لا يمكن التراجع عن هذا الإجراء.');">
        <i data-lucide="x-circle" style="width:15px;height:15px;vertical-align:middle;margin-left:4px;"></i> إلغاء
    </button>
</form>
<?php endif; ?>
<a href="/inventory/purchase-orders" 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
$statusLabels = [
    'draft' => 'مسودة', 'submitted' => 'مقدم', 'approved' => 'معتمد',
    'partially_received' => 'استلام جزئي', 'received' => 'مستلم', 'cancelled' => 'ملغي',
];
$statusColors = [
    'draft' => ['bg' => '#F3F4F6', 'color' => '#6B7280'],
    'submitted' => ['bg' => '#FFF7ED', 'color' => '#D97706'],
    'approved' => ['bg' => '#F0FDFA', 'color' => '#0D7377'],
    'partially_received' => ['bg' => '#EFF6FF', 'color' => '#2563EB'],
    'received' => ['bg' => '#ECFDF5', 'color' => '#059669'],
    'cancelled' => ['bg' => '#FEE2E2', 'color' => '#DC2626'],
];
$st = $order['status'] ?? 'draft';
$stColors = $statusColors[$st] ?? $statusColors['draft'];
$stLabel = $statusLabels[$st] ?? $st;
?>

<!-- Order 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="shopping-cart" style="width:18px;height:18px;color:#0D7377;"></i>
        <h3 style="margin:0;color:#0D7377;font-size:15px;">بيانات أمر الشراء</h3>
    </div>
    <div style="padding:20px;">
        <div style="display:grid;grid-template-columns:1fr 1fr;gap:0;">
            <table style="width:100%;font-size:14px;">
                <tr>
                    <td style="padding:10px 0;color:#6B7280;width:40%;">رقم الأمر</td>
                    <td style="padding:10px 0;font-weight:600;">
                        <code style="font-size:12px;background:#F3F4F6;padding:2px 8px;border-radius:4px;"><?= e($order['po_number']) ?></code>
                    </td>
                </tr>
                <tr>
                    <td style="padding:10px 0;color:#6B7280;">المورد</td>
                    <td style="padding:10px 0;font-weight:600;">
                        <a href="/inventory/suppliers/<?= (int) $order['supplier_id'] ?>" style="color:#0D7377;text-decoration:none;"><?= e($order['supplier_name'] ?? '') ?></a>
                    </td>
                </tr>
                <tr>
                    <td style="padding:10px 0;color:#6B7280;">المستودع</td>
                    <td style="padding:10px 0;font-weight:600;"><?= e($order['warehouse_name'] ?? '') ?></td>
                </tr>
                <tr>
                    <td style="padding:10px 0;color:#6B7280;">تاريخ التسليم المتوقع</td>
                    <td style="padding:10px 0;"><?= e($order['expected_delivery'] ?? '—') ?></td>
                </tr>
            </table>
            <table style="width:100%;font-size:14px;">
                <tr>
                    <td style="padding:10px 0;color:#6B7280;width:40%;">الحالة</td>
                    <td style="padding:10px 0;">
                        <span style="display:inline-block;padding:3px 10px;border-radius:10px;font-size:12px;font-weight:600;background:<?= $stColors['bg'] ?>;color:<?= $stColors['color'] ?>;">
                            <?= e($stLabel) ?>
                        </span>
                    </td>
                </tr>
                <tr>
                    <td style="padding:10px 0;color:#6B7280;">تاريخ الإنشاء</td>
                    <td style="padding:10px 0;"><?= e($order['created_at'] ?? '—') ?></td>
                </tr>
                <?php if (!empty($order['approved_at'])): ?>
                <tr>
                    <td style="padding:10px 0;color:#6B7280;">تاريخ الاعتماد</td>
                    <td style="padding:10px 0;"><?= e($order['approved_at']) ?></td>
                </tr>
                <?php endif; ?>
            </table>
        </div>

        <?php if (!empty($order['notes'])): ?>
        <div style="margin-top:20px;padding-top:15px;border-top:1px solid #F3F4F6;">
            <div style="font-size:12px;color:#6B7280;margin-bottom:4px;">ملاحظات</div>
            <div style="font-size:14px;color:#4B5563;line-height:1.7;"><?= e($order['notes']) ?></div>
        </div>
        <?php endif; ?>
    </div>
</div>

<!-- Grand Total -->
<div class="card" style="margin-bottom:20px;padding:20px;text-align:center;background:linear-gradient(135deg, #0D737710, #0D737720);">
    <div style="font-size:14px;color:#6B7280;margin-bottom:6px;">الإجمالي الكلي</div>
    <div style="font-size:36px;font-weight:800;color:#0D7377;direction:ltr;"><?= money($order['total_amount'] ?? 0) ?></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:#D97706;"></i>
        <h3 style="margin:0;color:#D97706;font-size:15px;">الأصناف</h3>
    </div>
    <?php if (!empty($items)): ?>
    <div class="table-responsive">
        <table class="data-table">
            <thead>
                <tr>
                    <th>الصنف</th>
                    <th>SKU</th>
                    <th>الكمية المطلوبة</th>
                    <th>المستلم</th>
                    <th>التقدم</th>
                    <th>سعر الوحدة</th>
                    <th>الإجمالي</th>
                </tr>
            </thead>
            <tbody>
                <?php foreach ($items as $item): ?>
                <?php
                $qtyOrdered = (float) ($item['quantity_ordered'] ?? 0);
                $qtyReceived = (float) ($item['quantity_received'] ?? 0);
                $pct = $qtyOrdered > 0 ? round(($qtyReceived / $qtyOrdered) * 100) : 0;
                $pctColor = $pct >= 100 ? '#059669' : ($pct > 0 ? '#2563EB' : '#6B7280');
                ?>
                <tr>
                    <td style="font-weight:600;"><?= e($item['item_name'] ?? '') ?></td>
                    <td>
                        <code style="font-size:11px;background:#F3F4F6;padding:2px 6px;border-radius:4px;"><?= e($item['sku'] ?? '—') ?></code>
                    </td>
                    <td style="font-weight:600;direction:ltr;text-align:left;"><?= number_format($qtyOrdered) ?></td>
                    <td style="font-weight:600;direction:ltr;text-align:left;color:<?= $pctColor ?>;"><?= number_format($qtyReceived) ?></td>
                    <td style="min-width:140px;">
                        <div style="display:flex;align-items:center;gap:8px;">
                            <div style="flex:1;height:8px;background:#E5E7EB;border-radius:4px;overflow:hidden;">
                                <div style="width:<?= min($pct, 100) ?>%;height:100%;background:<?= $pctColor ?>;border-radius:4px;"></div>
                            </div>
                            <span style="font-size:11px;font-weight:600;color:<?= $pctColor ?>;min-width:35px;"><?= $pct ?>%</span>
                        </div>
                    </td>
                    <td style="direction:ltr;text-align:left;"><?= money($item['unit_cost'] ?? 0) ?></td>
                    <td style="font-weight:700;direction:ltr;text-align:left;"><?= money($item['line_total'] ?? 0) ?></td>
                </tr>
                <?php endforeach; ?>
            </tbody>
        </table>
    </div>
    <?php else: ?>
    <div style="padding:40px 20px;text-align:center;color:#6B7280;">
        <i data-lucide="package-open" style="width:36px;height:36px;color:#D1D5DB;margin-bottom:8px;"></i>
        <p style="margin:0;">لا توجد أصناف في هذا الأمر</p>
    </div>
    <?php endif; ?>
</div>

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