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

<?php $__template->section('page_actions'); ?>
<a href="/inventory/purchase-orders/<?= (int) $order->id ?>" 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'); ?>

<!-- Order Summary -->
<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:repeat(auto-fit, minmax(180px, 1fr));gap:15px;">
            <div style="padding:12px;background:#F9FAFB;border-radius:8px;">
                <div style="font-size:11px;color:#6B7280;">رقم الأمر</div>
                <div style="font-weight:700;font-size:14px;">
                    <code style="font-size:12px;background:#F3F4F6;padding:2px 8px;border-radius:4px;"><?= e($order->po_number) ?></code>
                </div>
            </div>
            <div style="padding:12px;background:#F9FAFB;border-radius:8px;">
                <div style="font-size:11px;color:#6B7280;">المورد</div>
                <div style="font-weight:700;font-size:14px;"><?= e($order->supplier_name) ?></div>
            </div>
            <div style="padding:12px;background:#F9FAFB;border-radius:8px;">
                <div style="font-size:11px;color:#6B7280;">المستودع</div>
                <div style="font-weight:700;font-size:14px;"><?= e($order->warehouse_name) ?></div>
            </div>
            <div style="padding:12px;background:#F0FDF4;border-radius:8px;">
                <div style="font-size:11px;color:#6B7280;">الإجمالي</div>
                <div style="font-weight:700;font-size:14px;color:#059669;direction:ltr;text-align:left;"><?= money($order->grand_total ?? 0) ?></div>
            </div>
        </div>
    </div>
</div>

<!-- Receive Form -->
<form method="POST" action="/inventory/purchase-orders/<?= (int) $order->id ?>/receive">
    <?= csrf_field() ?>

    <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-check" style="width:18px;height:18px;color:#059669;"></i>
            <h3 style="margin:0;color:#059669;font-size:15px;">استلام الأصناف</h3>
        </div>
        <div style="padding:10px 20px 5px;background:#FFF7ED;border-bottom:1px solid #FDE68A;">
            <p style="margin:0;font-size:13px;color:#92400E;display:flex;align-items:center;gap:6px;">
                <i data-lucide="info" style="width:15px;height:15px;"></i>
                أدخل الكميات المستلمة لكل صنف. الكمية المتبقية هي الحد الأقصى الذي يمكن إدخاله.
            </p>
        </div>
        <div class="table-responsive">
            <table class="data-table">
                <thead>
                    <tr>
                        <th>الصنف</th>
                        <th>الكمية المطلوبة</th>
                        <th>المستلم سابقاً</th>
                        <th>المتبقي</th>
                        <th style="min-width:120px;">الكمية المستلمة</th>
                        <th style="min-width:130px;">رقم الدفعة</th>
                        <th style="min-width:140px;">تاريخ الانتهاء</th>
                    </tr>
                </thead>
                <tbody>
                    <?php foreach ($items as $idx => $item): ?>
                    <?php
                    $qtyOrdered = (float) ($item['quantity_ordered'] ?? 0);
                    $qtyReceived = (float) ($item['quantity_received'] ?? 0);
                    $remaining = max(0, $qtyOrdered - $qtyReceived);
                    $isFullyReceived = $remaining <= 0;
                    ?>
                    <tr style="<?= $isFullyReceived ? 'opacity:0.5;' : '' ?>">
                        <td style="font-weight:600;">
                            <?= e($item['item_name'] ?? '') ?>
                            <?php if (!empty($item['sku'])): ?>
                            <div style="font-size:11px;color:#9CA3AF;">
                                <code style="font-size:10px;background:#F3F4F6;padding:1px 4px;border-radius:3px;"><?= e($item['sku']) ?></code>
                            </div>
                            <?php endif; ?>
                            <input type="hidden" name="items[<?= $idx ?>][po_item_id]" value="<?= (int) ($item['id'] ?? 0) ?>">
                        </td>
                        <td style="font-weight:600;direction:ltr;text-align:left;"><?= number_format($qtyOrdered) ?></td>
                        <td style="direction:ltr;text-align:left;color:#2563EB;font-weight:600;"><?= number_format($qtyReceived) ?></td>
                        <td>
                            <?php if ($isFullyReceived): ?>
                            <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="font-weight:700;color:#D97706;direction:ltr;"><?= number_format($remaining) ?></span>
                            <?php endif; ?>
                        </td>
                        <td>
                            <input type="number"
                                   name="items[<?= $idx ?>][quantity_received]"
                                   class="form-input"
                                   min="0"
                                   max="<?= $remaining ?>"
                                   value="0"
                                   step="1"
                                   style="direction:ltr;text-align:left;"
                                   <?= $isFullyReceived ? 'disabled' : '' ?>>
                        </td>
                        <td>
                            <input type="text"
                                   name="items[<?= $idx ?>][batch_number]"
                                   class="form-input"
                                   placeholder="رقم الدفعة"
                                   style="direction:ltr;text-align:left;"
                                   <?= $isFullyReceived ? 'disabled' : '' ?>>
                        </td>
                        <td>
                            <input type="date"
                                   name="items[<?= $idx ?>][expiry_date]"
                                   class="form-input"
                                   <?= $isFullyReceived ? 'disabled' : '' ?>>
                        </td>
                    </tr>
                    <?php endforeach; ?>
                </tbody>
            </table>
        </div>
    </div>

    <!-- Submit Buttons -->
    <div style="display:flex;gap:10px;justify-content:flex-start;">
        <button type="submit" class="btn" style="background:#059669;color:#fff;border:none;padding:12px 30px;font-size:15px;">
            <i data-lucide="package-check" style="width:16px;height:16px;vertical-align:middle;margin-left:4px;"></i>
            تأكيد الاستلام
        </button>
        <a href="/inventory/purchase-orders/<?= (int) $order->id ?>" class="btn btn-outline" style="padding:12px 30px;font-size:15px;">إلغاء</a>
    </div>
</form>

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