@forelse($subscriptions as $subscription)
    <div class="subscription-card d-flex flex-column flex-md-row align-items-md-center gap-3">
        <div class="subscription-info flex-grow-1">
            <div class="d-flex justify-content-between align-items-center mb-2 mb-md-0">
                <div class="subscription-name">{{ $subscription->customer_name }}</div>
                <div class="subscription-price d-md-none">
                    {{ number_format($subscription->price - $subscription->discount, 0) }}
                </div>
            </div>
            <div class="d-flex flex-wrap gap-3">
                <span class="subscription-detail" title="{{ __('subscriptions.phone') }}">
                    <i class="bi bi-telephone"></i> {{ $subscription->phone }}
                </span>
                <span class="subscription-detail" title="{{ __('subscriptions.business_name') }}">
                    <i class="bi bi-briefcase"></i> {{ $subscription->business_name }}
                </span>
                <span class="subscription-detail" title="{{ __('subscriptions.invoice_number') }}">
                    <i class="bi bi-receipt"></i> {{ $subscription->invoice_number }}
                </span>
                <span class="subscription-detail text-success" title="{{ __('subscriptions.paid') }}">
                    <i class="bi bi-check-circle"></i> <span data-role="paid-amount">{{ number_format($subscription->paid_amount, 0) }}</span>
                </span>
                <span class="subscription-detail text-danger" title="{{ __('subscriptions.remaining') }}">
                    <i class="bi bi-exclamation-circle"></i> <span data-role="remaining-amount">{{ number_format($subscription->remaining_amount, 0) }}</span>
                </span>
                @if($subscription->remaining_amount > 0)
                    <button type="button"
                            class="btn btn-sm btn-outline-success py-0 px-2"
                            data-id="{{ $subscription->id }}"
                            data-customer_name="{{ $subscription->customer_name }}"
                            data-invoice_number="{{ $subscription->invoice_number }}"
                            data-remaining_amount="{{ max(0, (int) $subscription->remaining_amount) }}"
                            data-payment_method="{{ $subscription->payment_method ?? '' }}"
                            onclick="openQuickPaymentModal(this)"
                            title="{{ __('subscriptions.add_payment') }}">
                        <i class="bi bi-cash-coin"></i>
                    </button>
                @endif
                <span class="subscription-detail" title="{{ __('subscriptions.sales_employee') }}">
                    <i class="bi bi-person-badge"></i> {{ $subscription->salesEmployee?->full_name ?? ($subscription->creator?->name ?? 'N/A') }}
                </span>
            </div>
        </div>
        
        <div class="d-none d-md-block subscription-price text-end">
            {{ number_format($subscription->price - $subscription->discount, 0) }}
        </div>
        
        <div class="subscription-actions ms-auto ms-md-0">
            <button type="button" class="btn-action btn-edit" 
                    data-id="{{ $subscription->id }}"
                    data-customer_name="{{ $subscription->customer_name }}"
                    data-phone="{{ $subscription->phone }}"
                    data-address="{{ $subscription->address }}"
                    data-business_name="{{ $subscription->business_name }}"
                    data-details="{{ $subscription->details }}"
                    data-price="{{ $subscription->price }}"
                    data-discount="{{ $subscription->discount }}"
                    data-renewal_due_date="{{ $subscription->renewal_due_date }}"
                    data-renewal_amount="{{ $subscription->renewal_amount }}"
                    data-sales_employee_id="{{ $subscription->sales_employee_id }}"
                    data-items="{{ json_encode($subscription->items) }}"
                    data-payments="{{ json_encode($subscription->payments) }}"
                    onclick="openEditModal(this)"
                    title="{{ __('subscriptions.edit_subscriber') }}">
                <i class="bi bi-pencil"></i>
            </button>
            
            <a href="{{ route('services.web_development.invoice', $subscription->id) }}" 
               target="_blank"
               class="btn-action btn-print" 
               title="{{ __('subscriptions.print_invoice') }}">
                <i class="bi bi-printer"></i>
            </a>

            <button type="button" class="btn-action btn-delete" 
                    onclick="openDeleteModal('{{ $subscription->id }}')"
                    title="{{ __('delete') }}">
                <i class="bi bi-trash"></i>
            </button>
        </div>
    </div>
@empty
    <div class="text-center py-5 text-muted bg-white rounded shadow-sm">
        <i class="bi bi-people fs-1 mb-3 d-block"></i>
        {{ __('subscriptions.no_results_found') }}
    </div>
@endforelse

<div class="d-flex justify-content-center mt-4">
    {{ $subscriptions->links() }}
</div>