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

<?php $__template->section('page_actions'); ?>
<a href="/sales/packages/<?= (int) $package->id ?>/edit" class="btn btn-outline"><i data-lucide="edit-3" style="width:15px;height:15px;vertical-align:middle;margin-left:4px;"></i> تعديل</a>
<a href="/sales/packages" 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
$memberPrice = (float) ($package->package_price_member ?? 0);
$nonmemberPrice = (float) ($package->package_price_nonmember ?? 0);
$itemsTotal = (float) ($package->items_total_price ?? 0);
$saving = $itemsTotal > 0 ? $itemsTotal - $memberPrice : 0;
$savingPct = $itemsTotal > 0 ? round(($saving / $itemsTotal) * 100) : 0;
?>

<!-- Package 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="gift" style="width:18px;height:18px;color:#0D7377;"></i>
        <h3 style="margin:0;color:#0D7377;font-size:15px;">بيانات الباقة</h3>
        <div style="margin-right:auto;">
            <?php if ((int) $package->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; ?>
        </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:15px;direction:ltr;text-align:left;"><?= e($package->code ?? '') ?></div>
            </div>
            <div>
                <div style="font-size:12px;color:#6B7280;margin-bottom:4px;">الاسم بالعربي</div>
                <div style="font-weight:700;font-size:15px;"><?= e($package->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($package->name_en ?? '') ?: '—' ?></div>
            </div>
        </div>

        <!-- 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:#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($memberPrice) ?></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($nonmemberPrice) ?></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($itemsTotal) ?></div>
                </div>
                <?php if ($saving > 0): ?>
                <div style="padding:12px;background:#ECFDF5;border-radius:8px;border:1px solid #BBF7D0;">
                    <div style="font-size:11px;color:#059669;">التوفير</div>
                    <div style="font-weight:800;font-size:16px;color:#059669;direction:ltr;text-align:left;"><?= money($saving) ?> <span style="font-size:12px;">(<?= $savingPct ?>%)</span></div>
                </div>
                <?php endif; ?>
            </div>
        </div>

        <!-- Validity -->
        <?php if ($package->active_from || $package->active_to): ?>
        <div style="margin-top:20px;padding-top:15px;border-top:1px solid #F3F4F6;">
            <div style="display:grid;grid-template-columns:1fr 1fr;gap:20px;">
                <div>
                    <div style="font-size:12px;color:#6B7280;margin-bottom:4px;">فعّال من</div>
                    <div style="font-weight:600;"><?= e($package->active_from ?? '—') ?></div>
                </div>
                <div>
                    <div style="font-size:12px;color:#6B7280;margin-bottom:4px;">فعّال حتى</div>
                    <div style="font-weight:600;"><?= e($package->active_to ?? '—') ?></div>
                </div>
            </div>
        </div>
        <?php endif; ?>

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

<!-- Package Items -->
<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:#059669;"></i>
        <h3 style="margin:0;color:#059669;font-size:15px;">أصناف الباقة</h3>
        <span style="background:#059669;color:#fff;padding:2px 8px;border-radius:10px;font-size:12px;font-weight:600;margin-right:auto;"><?= count($packageItems) ?> صنف</span>
    </div>
    <?php if (!empty($packageItems)): ?>
    <div class="table-responsive">
        <table class="data-table">
            <thead>
                <tr>
                    <th>#</th>
                    <th>الصنف</th>
                    <th>SKU</th>
                    <th>الكمية</th>
                    <th>سعر الوحدة (عضو)</th>
                    <th>الإجمالي</th>
                </tr>
            </thead>
            <tbody>
                <?php
                $calcTotal = 0;
                foreach ($packageItems as $i => $pi):
                    $qty = (float) ($pi['quantity'] ?? 0);
                    $unitPrice = (float) ($pi['sale_price_member'] ?? 0);
                    $lineTotal = $qty * $unitPrice;
                    $calcTotal += $lineTotal;
                ?>
                <tr>
                    <td style="color:#6B7280;"><?= $i + 1 ?></td>
                    <td style="font-weight:600;"><?= e($pi['item_name'] ?? $pi['item_name_ar'] ?? '') ?></td>
                    <td style="font-family:monospace;font-size:12px;color:#6B7280;direction:ltr;text-align:left;"><?= e($pi['sku'] ?? '') ?></td>
                    <td style="font-weight:600;"><?= number_format($qty, 0) ?></td>
                    <td style="direction:ltr;text-align:left;"><?= money($unitPrice) ?></td>
                    <td style="direction:ltr;text-align:left;font-weight:700;"><?= money($lineTotal) ?></td>
                </tr>
                <?php endforeach; ?>
            </tbody>
            <tfoot>
                <tr style="background:#F0FDF4;font-weight:700;">
                    <td colspan="5" style="padding:12px 15px;">إجمالي قيمة الأصناف</td>
                    <td style="padding:12px 15px;direction:ltr;text-align:left;font-size:16px;color:#059669;"><?= money($calcTotal) ?></td>
                </tr>
            </tfoot>
        </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>

<!-- 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) $package->id ?></td>
            </tr>
            <?php if ($package->created_at): ?>
            <tr>
                <td style="padding:6px 0;color:#6B7280;">تاريخ الإنشاء</td>
                <td style="padding:6px 0;"><?= e($package->created_at) ?></td>
            </tr>
            <?php endif; ?>
            <?php if ($package->updated_at): ?>
            <tr>
                <td style="padding:6px 0;color:#6B7280;">آخر تحديث</td>
                <td style="padding:6px 0;"><?= e($package->updated_at) ?></td>
            </tr>
            <?php endif; ?>
        </table>
    </div>
</div>

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