@if($tblUser->subscription)
@php
    $start = \Carbon\Carbon::parse($tblUser->subscription->start_at);
    $end = \Carbon\Carbon::parse($tblUser->subscription->end_at);
    $now = \Carbon\Carbon::now();
    // Calculate total days and remaining days
    $totalDays = $start->diffInDays($end) ?: 1; // Avoid division by zero
    $daysPassed = $start->diffInDays($now);
    // Calculate progress percentage
    if ($now->lessThan($start)) {
        $progress = 0;
        $remainingDays = $totalDays;
    } elseif ($now->greaterThan($end)) {
        $progress = 100;
        $remainingDays = 0;
    } else {
        $progress = min(100, max(0, ($daysPassed / $totalDays) * 100));
        $remainingDays = $now->diffInDays($end);
    }
    $isActive = $tblUser->subscription->is_active && $now->lessThanOrEqualTo($end);
@endphp
<!-- Hero Status Card -->
<div class="sub-hero-card mb-4">
    <div class="row align-items-center position-relative" style="z-index: 2;">
        <div class="col-md-7 mb-3 mb-md-0">
            <h5 class="text-white-50 mb-1">الخطة الحالية</h5>
            <h2 class="font-weight-bold mb-3">{{ $tblUser->subscription->plan }}</h2>
            <div class="mt-4">
                <div class="d-flex justify-content-between text-sm mb-1">
                    <span>صلاحية الاشتراك</span>
                    <span class="font-weight-bold">{{ $remainingDays }} يوم متبقي</span>
                </div>
                <div class="progress-bar-custom">
                    <div class="progress-bar-fill" style="width: {{ $progress }}%"></div>
                </div>
                <div class="d-flex justify-content-between text-white-50 mt-1" style="font-size: 0.8rem;">
                    <span>{{ $start->format('Y-m-d') }}</span>
                    <span>{{ $end->format('Y-m-d') }}</span>
                </div>
            </div>
        </div>
        <div class="col-md-5 text-md-left text-right d-flex flex-column align-items-md-start align-items-end">
            @if($isActive)
                <div class="sub-badge bg-success text-white d-inline-block shadow-sm mb-2">
                    <i class="fas fa-check-circle mr-1"></i> اشتراك نشط
                </div>
            @else
                <div class="sub-badge bg-danger text-white d-inline-block shadow-sm mb-2">
                    <i class="fas fa-times-circle mr-1"></i> اشتراك منتهي / غير نشط
                </div>
            @endif
            <a href="{{ route('subscriptions.edit', $tblUser->subscription->id) }}" class="btn btn-light btn-sm rounded-pill font-weight-bold px-3 shadow-sm text-primary mt-2">
                <i class="fas fa-edit mr-1"></i> تعديل الاشتراك
            </a>
        </div>
    </div>
</div>
<!-- Details Grid -->
<div class="row">
    <!-- Capacity Card -->
    <div class="col-lg-6 col-md-6 mb-4">
        <div class="card sub-card p-3">
            <h6 class="font-weight-bold text-secondary mb-4 border-bottom pb-2">السعة والصلاحيات</h6>
            <div class="d-flex align-items-center mb-3">
                <div class="sub-icon-box bg-light-primary">
                    <i class="fas fa-building"></i>
                </div>
                <div>
                    <div class="text-muted small">الوحدات العقارية المسموحة</div>
                    <div class="font-weight-bold text-dark" style="font-size: 1.1rem;">
                        {{ $tblUser->subscription->count_of_units }} وحدة 
                        <span class="text-muted small font-weight-normal">(المنشور: {{ $properties->count() }})</span>
                    </div>
                </div>
            </div>
            <div class="d-flex align-items-center">
                <div class="sub-icon-box bg-light-warning">
                    <i class="fas fa-users"></i>
                </div>
                <div>
                    <div class="text-muted small">حسابات الموظفين المسموحة</div>
                    <div class="font-weight-bold text-dark" style="font-size: 1.1rem;">
                        {{ $tblUser->subscription->employee_count }} موظف
                        <span class="text-muted small font-weight-normal">(المضاف: {{ $staffList->count() }})</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Financial Card -->
    <div class="col-lg-6 col-md-6 mb-4">
        <div class="card sub-card p-3">
            <h6 class="font-weight-bold text-secondary mb-4 border-bottom pb-2">الإعدادات المالية</h6>
            <div class="d-flex align-items-center mb-3">
                <div class="sub-icon-box bg-light-success">
                    <i class="fas fa-percentage"></i>
                </div>
                <div>
                    <div class="text-muted small">نسبة المنصة من المضيف</div>
                    <div class="font-weight-bold text-success" style="font-size: 1.1rem;">{{ $tblUser->subscription->owner_percentage }}%</div>
                </div>
            </div>
            <div class="d-flex align-items-center mb-3">
                <div class="sub-icon-box bg-light-primary">
                    <i class="fas fa-hand-holding-usd"></i>
                </div>
                <div>
                    <div class="text-muted small">نسبة المنصة من الزبون</div>
                    <div class="font-weight-bold text-primary" style="font-size: 1.1rem;">{{ $tblUser->subscription->customer_fee_percentage }}%</div>
                </div>
            </div>
            <div class="d-flex align-items-center">
                <div class="sub-icon-box bg-light-danger" style="background-color: #fbe6e6; color: #dc3545;">
                    <i class="fas fa-money-bill-wave"></i>
                </div>
                <div>
                    <div class="text-muted small">أقصى رصيد سلبي مسموح</div>
                    <div class="font-weight-bold text-danger" style="font-size: 1.1rem;" dir="ltr">-{{ $tblUser->subscription->max_negative_balance }}</div>
                </div>
            </div>
        </div>
    </div>
    <!-- Timeline Card -->
    <div class="col-lg-6 col-md-6 mb-4">
        <div class="card sub-card p-3">
            <h6 class="font-weight-bold text-secondary mb-4 border-bottom pb-2">تفاصيل المدة الزمنيـة</h6>
            <div class="d-flex align-items-center mb-3">
                <div class="sub-icon-box bg-light-primary">
                    <i class="far fa-calendar-check"></i>
                </div>
                <div>
                    <div class="text-muted small">تاريخ البداية</div>
                    <div class="font-weight-bold text-dark">{{ $start->format('Y-m-d') }}</div>
                </div>
            </div>
            <div class="d-flex align-items-center mb-3">
                <div class="sub-icon-box bg-light-warning">
                    <i class="far fa-calendar-times"></i>
                </div>
                <div>
                    <div class="text-muted small">تاريخ النهاية</div>
                    <div class="font-weight-bold text-dark">{{ $end->format('Y-m-d') }}</div>
                </div>
            </div>
            <div class="mt-2 pt-2 border-top text-center">
                <span class="text-muted small">إجمالي مدة الاشتراك:</span>
                <span class="font-weight-bold text-primary ml-1">{{ $totalDays }} يوم</span>
            </div>
        </div>
    </div>
    <!-- Cancellation Policies Card -->
    <div class="col-lg-6 col-md-6 mb-4">
        <div class="card sub-card p-3">
            <h6 class="font-weight-bold text-secondary mb-4 border-bottom pb-2">سياسات الإلغاء</h6>
            <div class="row">
                <div class="col-6 mb-3">
                    <div class="text-muted" style="font-size: 0.75rem;">أيام الاسترجاع الكامل</div>
                    <div class="font-weight-bold text-success mt-1"><i class="fas fa-undo-alt mr-1"></i> {{ $tblUser->subscription->cancellation_full_refund_days }} أيام</div>
                </div>
                <div class="col-6 mb-3">
                    <div class="text-muted" style="font-size: 0.75rem;">نسبة الاسترجاع الجزئي</div>
                    <div class="font-weight-bold text-warning mt-1"><i class="fas fa-adjust mr-1"></i> {{ $tblUser->subscription->cancellation_partial_refund_percent }}%</div>
                </div>
                <div class="col-6">
                    <div class="text-muted" style="font-size: 0.75rem;">أيام الاسترجاع الجزئي</div>
                    <div class="font-weight-bold text-warning mt-1"><i class="far fa-clock mr-1"></i> {{ $tblUser->subscription->cancellation_partial_refund_day }} أيام</div>
                </div>
                <div class="col-6">
                    <div class="text-muted" style="font-size: 0.75rem;">أيام الخصم الكامل (لا استرجاع)</div>
                    <div class="font-weight-bold text-danger mt-1"><i class="fas fa-ban mr-1"></i> {{ $tblUser->subscription->cancellation_full_deduct_day }} أيام</div>
                </div>
            </div>
        </div>
    </div>
</div>
@else
<!-- No Subscription Fallback -->
<div class="text-center py-5 bg-white rounded shadow-sm border" style="border-radius: 12px;">
    <div class="mb-3">
        <i class="fas fa-box-open text-muted" style="font-size: 4rem; opacity: 0.3;"></i>
    </div>
    <h5 class="font-weight-bold text-dark">لا توجد اشتراكات مسجلة</h5>
    <p class="text-muted mb-4">هذا المستخدم لا يمتلك أي خطة اشتراك نشطة أو سابقة في النظام.</p>

    <form action="{{ route('users.issue-default-subscription', $tblUser->id) }}" method="POST">
        @csrf
        <button type="submit" class="btn btn-primary rounded-pill font-weight-bold px-4 shadow-sm" onclick="return confirm('هل أنت متأكد من إصدار اشتراك افتراضي لمدة 6 شهور لهذه الحساب؟')">
            <i class="fas fa-file-signature mr-2"></i> إصدار اشتراك بالقيم الافتراضية (6 شهور)
        </button>
    </form>
</div>
@endif