@php
$finalPrice = $package->sale_price ?? $package->price;
$hasDiscount = $package->sale_price && $package->sale_price < $package->price;
$testsCount = $package->tests_count ?? $package->tests?->count() ?? 0;
@endphp

<div class="package-card" style="background: white; border-radius: var(--pr-radius-lg); box-shadow: var(--pr-shadow); transition: var(--transition); position: relative; display: flex; flex-direction: column; overflow: hidden;">
    {{-- Badge --}}
    @if($showBadge && $package->badge_text)
        <div style="position: absolute; top: 0; right: 0; background: linear-gradient(135deg, #00A0B0 0%, #2D9CDB 100%); color: white; padding: 8px 16px; font-weight: 700; font-size: 0.8rem; z-index: 2; border-bottom-left-radius: var(--pr-radius);">
            <i class="fas fa-fire" style="margin-left: 5px;"></i>
            {{ $package->badge_text }}
        </div>
    @endif
    @if($showBadge && $package->is_featured)
        <div style="position: absolute; top: 0; {{ $package->badge_text ? 'right: 100px;' : 'right: 0;' }} background: linear-gradient(135deg, #F59E0B 0%, #D97706 100%); color: white; padding: 8px 16px; font-weight: 700; font-size: 0.8rem; z-index: 2; border-bottom-left-radius: var(--pr-radius);">
            <i class="fas fa-star" style="margin-left: 5px;"></i>
            مميز
        </div>
    @endif

    {{-- Image --}}
    <div style="height: 220px; position: relative; overflow: hidden;">
        @if($package->image)
            <img src="{{ asset('storage/' . $package->image) }}" alt="{{ $package->name }}" style="width: 100%; height: 100%; object-fit: cover; transition: var(--transition);">
        @else
            <div style="width: 100%; height: 100%; background: linear-gradient(135deg, #E8ECF1 0%, #F8FAFC 100%); display: flex; align-items: center; justify-content: center;">
                <i class="fas fa-flask" style="font-size: 3rem; color: var(--pr-secondary); opacity: 0.5;"></i>
            </div>
        @endif
        @if($showTestsCount)
        <div style="position: absolute; inset: 0; background: linear-gradient(to top, rgba(26, 54, 93, 0.6), transparent); display: flex; align-items: flex-end; justify-content: center; padding-bottom: 16px;">
            <div style="background: rgba(255,255,255,0.95); padding: 6px 16px; border-radius: 50px; font-size: 0.8rem; font-weight: 700; color: var(--pr-primary);">
                {{ $testsCount }} تحليل
            </div>
        </div>
        @endif
    </div>

    {{-- Content --}}
    <div style="padding: 24px; flex: 1; display: flex; flex-direction: column;">
        <h3 style="font-size: 1.15rem; font-weight: 800; color: var(--pr-primary); margin-bottom: 12px; line-height: 1.4;">{{ $package->name }}</h3>
        
        @if($showDescription)
        <p style="font-size: 0.9rem; color: var(--pr-text); line-height: 1.7; margin-bottom: 16px; flex: 1;">
            {{ $package->short_description ?? Str::limit(strip_tags($package->description), 100) }}
        </p>
        @endif

        {{-- Features list --}}
        @if($showFeatures && $package->features && count($package->features) > 0)
            <div style="margin-bottom: 20px;">
                @foreach(array_slice($package->features, 0, 3) as $feature)
                    <div style="display: flex; align-items: center; gap: 10px; margin-bottom: 8px; font-size: 0.9rem; color: var(--pr-text);">
                        <i class="fas fa-check-circle" style="color: var(--pr-secondary);"></i>
                        <span>{{ is_array($feature) ? ($feature['feature'] ?? '') : $feature }}</span>
                    </div>
                @endforeach
                @if(count($package->features) > 3)
                    <span style="font-size: 0.85rem; color: var(--pr-secondary);">+{{ count($package->features) - 3 }} تحليل إضافي</span>
                @endif
            </div>
        @endif

        {{-- Price & CTA --}}
        <div style="display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 16px; border-top: 1px solid var(--pr-gray);">
            <div>
                <span style="font-size: 1.6rem; font-weight: 900; color: var(--pr-primary);">{{ number_format($finalPrice, 0) }} <span style="font-size: 1rem;">﷼</span></span>
                @if($showOldPrice && $hasDiscount)
                    <span style="font-size: 0.9rem; color: #999; text-decoration: line-through; margin-right: 8px;">{{ number_format($package->price, 0) }} ﷼</span>
                @endif
            </div>
            <a href="{{ route('package.show', $package->slug) }}" class="btn-primary" style="padding: 12px 24px; font-size: 0.95rem;">
                تفاصيل الباقة
                <i class="fas fa-arrow-left"></i>
            </a>
        </div>
    </div>
</div>