@extends('layouts.admin')

@section('title', 'Abonnements - MentoraMind Admin')
@section('description', 'Gestion des abonnements de la plateforme')

@section('content')
<div class="page-header">
    <div>
        <h1>{{ __('admin.subscriptions.title') }}</h1>
        <p>{{ __('admin.subscriptions.subtitle') }}</p>
    </div>
</div>

<div class="stats-grid mb-4">
    <div class="stat-card">
        <div class="stat-icon blue">
            <i class="bi bi-star-fill"></i>
        </div>
        <div class="stat-content">
            <div class="stat-label">{{ __('admin.subscriptions.stats.premium') }}</div>
            <div class="stat-value">{{ $planStats['Premium'] ?? 0 }}</div>
        </div>
    </div>

    <div class="stat-card">
        <div class="stat-icon orange">
            <i class="bi bi-star-fill"></i>
        </div>
        <div class="stat-content">
            <div class="stat-label">{{ __('admin.subscriptions.stats.total') }}</div>
            <div class="stat-value">{{ $planStats['Premium'] ?? 0 }}</div>
        </div>
    </div>
</div>

@livewire('admin.subscriptions.subscriptions-management')
@endsection

@push('styles')
<style>
.stat-card {
    height: 120px;
    display: flex;
    align-items: center;
}

.stat-label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: 20px;
}

.stat-value {
    min-height: 40px;
    display: flex;
    align-items: center;
}
</style>
@endpush