<?php $__template->layout('Layout.main'); ?>
<?php $__template->section('title'); ?><?= e($item->name_ar) ?><?php $__template->endSection(); ?>

<?php $__template->section('page_actions'); ?>
<?php if (can('inventory.manage')): ?>
<a href="/inventory/items/<?= (int) $item->id ?>/edit" class="btn btn-outline"><i data-lucide="edit-3" style="width:15px;height:15px;vertical-align:middle;margin-left:4px;"></i> تعديل</a>
<?php endif; ?>
<a href="/inventory/items" 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
$trackingColors = [
    'standard' => ['bg' => '#F3F4F6', 'color' => '#6B7280'],
    'expiry'   => ['bg' => '#FFF7ED', 'color' => '#D97706'],
    'asset'    => ['bg' => '#EFF6FF', 'color' => '#2563EB'],
];
$unitLabels = $units ?? [];
$tt = $item->tracking_type ?? 'standard';
$ttColors = $trackingColors[$tt] ?? $trackingColors['standard'];
$ttLabel = $trackingTypes[$tt] ?? $tt;
$unitLabel = $unitLabels[$item->unit_of_measure ?? ''] ?? ($item->unit_of_measure ?? '');

$movementTypeLabels = [
    'purchase_in'     => 'شراء',
    'sale_out'        => 'بيع',
    'transfer_in'     => 'تحويل وارد',
    'transfer_out'    => 'تحويل صادر',
    'adjustment_in'   => 'تسوية (+)',
    'adjustment_out'  => 'تسوية (-)',
    'damage_out'      => 'تالف',
    'expired_out'     => 'منتهي صلاحية',
    'return_in'       => 'مرتجع',
    'opening_balance' => 'رصيد افتتاحي',
    'consumed_out'    => 'مستهلك',
];
?>

<!-- Item Details 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="package" style="width:18px;height:18px;color:#0D7377;"></i>
        <h3 style="margin:0;color:#0D7377;font-size:15px;">بيانات الصنف</h3>
        <div style="margin-right:auto;display:flex;gap:8px;">
            <?php if ((int) $item->is_active): ?>
            <span style="display:inline-block;padding:3px 12px;border-radius:10px;font-size:12px;font-weight:600;background:#ECFDF5;color:#059669;">فعّال</span>
            <?php else: ?>
            <span style="display:inline-block;padding:3px 12px;border-radius:10px;font-size:12px;font-weight:600;background:#FEE2E2;color:#DC2626;">معطّل</span>
            <?php endif; ?>
            <span style="display:inline-block;padding:3px 12px;border-radius:10px;font-size:12px;font-weight:600;background:<?= $ttColors['bg'] ?>;color:<?= $ttColors['color'] ?>;"><?= e($ttLabel) ?></span>
        </div>
    </div>
    <div style="padding:20px;">
        <div style="display:grid;grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));gap:20px;">
            <div>
                <div style="font-size:12px;color:#6B7280;margin-bottom:4px;">كود الصنف (SKU)</div>
                <div style="font-weight:700;font-family:monospace;direction:ltr;text-align:left;font-size:15px;"><?= e($item->sku ?? '') ?></div>
            </div>
            <div>
                <div style="font-size:12px;color:#6B7280;margin-bottom:4px;">الباركود</div>
                <div style="font-weight:600;font-family:monospace;direction:ltr;text-align:left;"><?= e($item->barcode ?? '') ?: '—' ?></div>
            </div>
            <div>
                <div style="font-size:12px;color:#6B7280;margin-bottom:4px;">الاسم بالعربي</div>
                <div style="font-weight:700;font-size:15px;"><?= e($item->name_ar ?? '') ?></div>
            </div>
            <div>
                <div style="font-size:12px;color:#6B7280;margin-bottom:4px;">الاسم بالإنجليزي</div>
                <div style="font-weight:600;direction:ltr;text-align:left;"><?= e($item->name_en ?? '') ?: '—' ?></div>
            </div>
            <div>
                <div style="font-size:12px;color:#6B7280;margin-bottom:4px;">التصنيف</div>
                <div style="font-weight:600;"><?= $category ? e($category->name_ar) : '—' ?></div>
            </div>
            <div>
                <div style="font-size:12px;color:#6B7280;margin-bottom:4px;">وحدة القياس</div>
                <div style="font-weight:600;"><?= e($unitLabel) ?></div>
            </div>
            <div>
                <div style="font-size:12px;color:#6B7280;margin-bottom:4px;">نوع التتبع</div>
                <div><span style="display:inline-block;padding:3px 10px;border-radius:10px;font-size:12px;font-weight:600;background:<?= $ttColors['bg'] ?>;color:<?= $ttColors['color'] ?>;"><?= e($ttLabel) ?></span></div>
            </div>
            <div>
                <div style="font-size:12px;color:#6B7280;margin-bottom:4px;">للبيع</div>
                <div>
                    <?php if ((int) $item->is_sellable): ?>
                    <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:#FEE2E2;color:#DC2626;">لا</span>
                    <?php endif; ?>
                </div>
            </div>
        </div>

        <?php if (!empty($item->description_ar)): ?>
        <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($item->description_ar) ?></div>
        </div>
        <?php endif; ?>

        <!-- Pricing Section -->
        <div style="margin-top:20px;padding-top:15px;border-top:1px solid #F3F4F6;">
            <div style="font-size:13px;font-weight:600;color:#059669;margin-bottom:12px;display:flex;align-items:center;gap:6px;">
                <i data-lucide="banknote" style="width:16px;height:16px;"></i> الأسعار
            </div>
            <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:16px;color:#1A1A2E;direction:ltr;text-align:left;"><?= money($item->cost_price ?? 0) ?></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:16px;color:#059669;direction:ltr;text-align:left;"><?= money($item->sale_price_member ?? 0) ?></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:16px;color:#1A1A2E;direction:ltr;text-align:left;"><?= money($item->sale_price_nonmember ?? 0) ?></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:16px;color:#1A1A2E;direction:ltr;text-align:left;"><?= $item->sale_price_player !== null ? money($item->sale_price_player) : '—' ?></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:16px;color:#1A1A2E;direction:ltr;text-align:left;"><?= e($item->tax_rate ?? '0.00') ?>%</div>
                </div>
            </div>
        </div>

        <?php if (!empty($item->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($item->notes) ?></div>
        </div>
        <?php endif; ?>
    </div>
</div>

<!-- Total Stock -->
<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;"><?= number_format((float) $totalStock, 2) ?></div>
    <div style="font-size:13px;color:#6B7280;"><?= e($unitLabel) ?></div>
</div>

<!-- Stock Per Warehouse -->
<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="warehouse" style="width:18px;height:18px;color:#0D7377;"></i>
        <h3 style="margin:0;color:#0D7377;font-size:15px;">المخزون حسب المستودع</h3>
    </div>
    <?php if (!empty($stockRecords)): ?>
    <div class="table-responsive">
        <table class="data-table">
            <thead>
                <tr>
                    <th>المستودع</th>
                    <th>الكود</th>
                    <th>الكمية</th>
                    <th>الحد الأدنى</th>
                    <th>الحد الأقصى</th>
                    <th>الحالة</th>
                </tr>
            </thead>
            <tbody>
                <?php foreach ($stockRecords as $stock): ?>
                <?php
                $qty = (float) ($stock['quantity'] ?? 0);
                $minLevel = (float) ($stock['min_level'] ?? 0);
                $maxLevel = (float) ($stock['max_level'] ?? 0);
                // Determine status
                if ($qty <= 0) {
                    $statusLabel = 'نفذ';
                    $statusColor = '#DC2626';
                    $statusBg = '#FEE2E2';
                } elseif ($minLevel > 0 && $qty <= $minLevel) {
                    $statusLabel = 'منخفض';
                    $statusColor = '#D97706';
                    $statusBg = '#FFF7ED';
                } elseif ($maxLevel > 0 && $qty >= $maxLevel) {
                    $statusLabel = 'ممتلئ';
                    $statusColor = '#2563EB';
                    $statusBg = '#EFF6FF';
                } else {
                    $statusLabel = 'طبيعي';
                    $statusColor = '#059669';
                    $statusBg = '#ECFDF5';
                }
                ?>
                <tr>
                    <td style="font-weight:600;"><?= e($stock['warehouse_name'] ?? '') ?></td>
                    <td style="font-family:monospace;direction:ltr;text-align:left;font-size:12px;color:#6B7280;"><?= e($stock['warehouse_code'] ?? '') ?></td>
                    <td style="font-weight:700;font-size:15px;"><?= number_format($qty, 2) ?></td>
                    <td style="color:#6B7280;"><?= $minLevel > 0 ? number_format($minLevel, 2) : '—' ?></td>
                    <td style="color:#6B7280;"><?= $maxLevel > 0 ? number_format($maxLevel, 2) : '—' ?></td>
                    <td>
                        <span style="display:inline-block;padding:3px 10px;border-radius:10px;font-size:12px;font-weight:600;background:<?= $statusBg ?>;color:<?= $statusColor ?>;">
                            <?= $statusLabel ?>
                        </span>
                    </td>
                </tr>
                <?php endforeach; ?>
            </tbody>
        </table>
    </div>
    <?php else: ?>
    <div style="padding:40px 20px;text-align:center;color:#6B7280;">
        <i data-lucide="package-x" style="width:36px;height:36px;color:#D1D5DB;margin-bottom:8px;"></i>
        <p style="margin:0;">لا يوجد مخزون مسجّل في أي مستودع</p>
    </div>
    <?php endif; ?>
</div>

<!-- Recent Movements -->
<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="arrow-left-right" style="width:18px;height:18px;color:#D97706;"></i>
        <h3 style="margin:0;color:#D97706;font-size:15px;">آخر الحركات</h3>
    </div>
    <?php if (!empty($movements)): ?>
    <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 ($movements as $mv): ?>
                <?php
                $direction = $mv['direction'] ?? '';
                $isIn = $direction === 'in';
                $mvType = $mv['movement_type'] ?? '';
                $mvLabel = $movementTypeLabels[$mvType] ?? $mvType;
                ?>
                <tr>
                    <td style="font-size:13px;white-space:nowrap;"><?= e($mv['movement_date'] ?? $mv['created_at'] ?? '') ?></td>
                    <td style="font-weight:600;"><?= e($mvLabel) ?></td>
                    <td>
                        <?php if ($isIn): ?>
                        <span style="display:inline-flex;align-items:center;gap:4px;color:#059669;font-weight:600;">
                            <i data-lucide="arrow-down-circle" style="width:16px;height:16px;"></i> وارد
                        </span>
                        <?php else: ?>
                        <span style="display:inline-flex;align-items:center;gap:4px;color:#DC2626;font-weight:600;">
                            <i data-lucide="arrow-up-circle" style="width:16px;height:16px;"></i> صادر
                        </span>
                        <?php endif; ?>
                    </td>
                    <td style="font-weight:700;font-size:15px;color:<?= $isIn ? '#059669' : '#DC2626' ?>;">
                        <?= $isIn ? '+' : '-' ?><?= number_format((float) ($mv['quantity'] ?? 0), 2) ?>
                    </td>
                    <td style="font-size:13px;color:#6B7280;max-width:250px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;"><?= e($mv['notes'] ?? '') ?: '—' ?></td>
                </tr>
                <?php endforeach; ?>
            </tbody>
        </table>
    </div>
    <?php else: ?>
    <div style="padding:40px 20px;text-align:center;color:#6B7280;">
        <i data-lucide="activity" style="width:36px;height:36px;color:#D1D5DB;margin-bottom:8px;"></i>
        <p style="margin:0;">لا توجد حركات مسجّلة لهذا الصنف</p>
    </div>
    <?php endif; ?>
</div>

<!-- Metadata -->
<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="info" style="width:18px;height:18px;color:#6B7280;"></i>
        <h3 style="margin:0;color:#6B7280;font-size:15px;">معلومات النظام</h3>
    </div>
    <div style="padding:15px 20px;">
        <table style="width:100%;font-size:13px;">
            <tr>
                <td style="padding:6px 0;color:#6B7280;width:30%;">رقم السجل</td>
                <td style="padding:6px 0;font-weight:600;">#<?= (int) $item->id ?></td>
            </tr>
            <?php if ($item->created_at): ?>
            <tr>
                <td style="padding:6px 0;color:#6B7280;">تاريخ الإنشاء</td>
                <td style="padding:6px 0;"><?= e($item->created_at) ?></td>
            </tr>
            <?php endif; ?>
            <?php if ($item->updated_at): ?>
            <tr>
                <td style="padding:6px 0;color:#6B7280;">آخر تحديث</td>
                <td style="padding:6px 0;"><?= e($item->updated_at) ?></td>
            </tr>
            <?php endif; ?>
        </table>
    </div>
</div>

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