@if($subscription)
<div class="modal-overlay" id="subscriptionModal" onclick="closeSubscriptionModal()">
    <div class="modal-content" onclick="event.stopPropagation()">
        <div class="modal-header">
            <h3 class="modal-title">جزئیات اشتراک</h3>
            <button class="modal-close-btn" onclick="closeSubscriptionModal()">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
            </button>
        </div>

        @if($subscription->isActive())
            <div class="modal-hero active">
                <div class="status-pill">
                    <span class="dot"></span> {{ __('subscription.active') }}
                </div>
                
                <div class="days-wrapper">
                    {{-- تغییر مهم: استفاده از ceil برای رند کردن به بالا --}}
                    <span class="days-count">{{ (int) ceil($subscription->daysRemaining()) }}</span>
                    <span class="days-label">{{ __('subscription.days_remaining') }}</span>
                </div>

                <div class="progress-container">
                    <div class="progress-bar" style="width: {{ $subscription->timeProgress() }}%"></div>
                </div>
            </div>
        @else
            <div class="modal-hero expired">
                <div class="status-pill expired">
                    <span class="dot"></span> {{ __('subscription.expired') }}
                </div>
                <div class="expired-icon">⚠️</div>
                <div class="expired-text">اعتبار اشتراک شما به پایان رسیده است</div>
            </div>
        @endif

        <div class="info-grid">
            <div class="info-card">
                <span class="info-label">{{ __('subscription.expire_date') }}</span>
                <span class="info-value">{{ $subscription->expire_date->format('Y/m/d') }}</span>
            </div>

            <div class="info-card">
                <span class="info-label">{{ __('subscription.amount_paid') }}</span>
                <span class="info-value">{{ number_format($subscription->amount_paid) }} <small>{{ $subscription->currency }}</small></span>
            </div>

            <div class="info-card">
                <span class="info-label">{{ __('subscription.payment_type') }}</span>
                <span class="info-value">{{ $subscription->payment_type == 'zarinpal' ? 'زرین‌پال' : ucfirst($subscription->payment_type) }}</span>
            </div>

            <div class="info-card">
                <span class="info-label">تاریخ خرید</span>
                <span class="info-value">{{ $subscription->created_at->format('Y/m/d') }}</span>
            </div>
        </div>

        @if($subscription->isExpired())
            <div class="modal-footer">
                <a href="{{ route('store') }}" class="renew-btn">{{ __('subscription.renew') }}</a>
            </div>
        @endif
    </div>
</div>
@endif

<script>
    function openSubscriptionModal() {
        const modal = document.getElementById('subscriptionModal');
        if (modal) {
            modal.classList.add('active');
            document.body.style.overflow = 'hidden'; // جلوگیری از اسکرول صفحه پشت مودال
        }
    }

    function closeSubscriptionModal() {
        const modal = document.getElementById('subscriptionModal');
        if (modal) {
            modal.classList.remove('active');
            document.body.style.overflow = '';
        }
    }

    document.addEventListener('keydown', function(event) {
        if (event.key === 'Escape') {
            closeSubscriptionModal();
        }
    });
</script>

<style>
    /* Modal Overlay with Blur */
    .modal-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.6);
        backdrop-filter: blur(8px);
        z-index: 9999;
        display: flex;
        justify-content: center;
        align-items: center;
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s ease;
        padding: 20px;
    }

    .modal-overlay.active {
        opacity: 1;
        visibility: visible;
    }

    /* Modal Content Box */
    .modal-content {
        background: #1e293b; /* Dark Slate Blue */
        background: linear-gradient(145deg, #1e293b, #0f172a);
        width: 100%;
        max-width: 450px;
        border-radius: 24px;
        border: 1px solid rgba(255, 255, 255, 0.1);
        padding: 25px;
        box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
        transform: scale(0.95);
        transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
        color: #f8fafc;
        direction: rtl;
        font-family: inherit;
    }

    .modal-overlay.active .modal-content {
        transform: scale(1);
    }

    /* Header */
    .modal-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 25px;
    }

    .modal-title {
        font-size: 1.25rem;
        font-weight: 700;
        color: #fff;
        margin: 0;
    }

    .modal-close-btn {
        background: rgba(255, 255, 255, 0.1);
        border: none;
        color: #94a3b8;
        width: 36px;
        height: 36px;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 0.2s;
    }

    .modal-close-btn:hover {
        background: rgba(255, 255, 255, 0.2);
        color: #fff;
    }

    /* Hero Section (Active/Expired) */
    .modal-hero {
        background: rgba(255, 255, 255, 0.03);
        border-radius: 18px;
        padding: 20px;
        text-align: center;
        margin-bottom: 25px;
        border: 1px dashed rgba(255, 255, 255, 0.1);
    }

    .modal-hero.active {
        border-color: rgba(16, 185, 129, 0.3);
        background: linear-gradient(to bottom, rgba(16, 185, 129, 0.05), transparent);
    }

    .status-pill {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 6px 12px;
        border-radius: 20px;
        font-size: 0.85rem;
        font-weight: bold;
        background: rgba(16, 185, 129, 0.15);
        color: #34d399;
        margin-bottom: 15px;
    }

    .status-pill .dot {
        width: 8px;
        height: 8px;
        background: currentColor;
        border-radius: 50%;
        box-shadow: 0 0 8px currentColor;
    }

    .status-pill.expired {
        background: rgba(239, 68, 68, 0.15);
        color: #f87171;
    }

    .days-wrapper {
        margin-bottom: 15px;
    }

    .days-count {
        font-size: 3.5rem;
        font-weight: 800;
        line-height: 1;
        background: linear-gradient(180deg, #fff, #94a3b8);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        display: block;
    }

    .days-label {
        font-size: 1rem;
        color: #94a3b8;
    }

    /* Progress Bar */
    .progress-container {
        height: 8px;
        background: rgba(255, 255, 255, 0.1);
        border-radius: 4px;
        overflow: hidden;
    }

    .progress-bar {
        height: 100%;
        background: linear-gradient(90deg, #10b981, #3b82f6);
        border-radius: 4px;
        box-shadow: 0 0 10px rgba(16, 185, 129, 0.5);
    }

    /* Info Grid */
    .info-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 15px;
        margin-bottom: 25px;
    }

    .info-card {
        background: rgba(255, 255, 255, 0.03);
        padding: 15px;
        border-radius: 16px;
        display: flex;
        flex-direction: column;
        gap: 5px;
        border: 1px solid rgba(255, 255, 255, 0.05);
    }

    .info-label {
        font-size: 0.8rem;
        color: #94a3b8;
    }

    .info-value {
        font-size: 1rem;
        font-weight: 600;
        color: #f1f5f9;
    }

    .info-value small {
        font-size: 0.75rem;
        color: #64748b;
    }

    /* Footer & Renew Button */
    .modal-footer {
        margin-top: 20px;
    }

    .renew-btn {
        display: block;
        width: 100%;
        text-align: center;
        background: #3b82f6;
        color: white;
        padding: 14px;
        border-radius: 14px;
        text-decoration: none;
        font-weight: bold;
        transition: background 0.2s;
        box-shadow: 0 4px 15px rgba(59, 130, 246, 0.4);
    }

    .renew-btn:hover {
        background: #2563eb;
    }

    /* Expired Specifics */
    .expired-text {
        color: #f87171;
        font-weight: bold;
        margin-top: 10px;
    }
    
    .expired-icon {
        font-size: 3rem;
        margin: 10px 0;
    }
</style>