@layout('promotions/layout')

@section('content')
<div class="d-flex justify-content-between align-items-center mb-4">
    <div>
        <h2 class="fw-bold mb-1">Campagnes Publicitaires</h2>
        <p class="text-muted">Gérez vos offres promotionnelles et suivez leurs performances.</p>
    </div>
    <a href="/admin-ui/promotions/create" class="btn btn-primary btn-lg shadow-sm">
        <i class="fa-solid fa-plus me-2"></i>Nouvelle Campagne
    </a>
</div>

<!-- Stats Cards -->
<div class="row g-4 mb-4">
    <div class="col-md-3">
        <div class="card p-3 h-100 border-start border-4 border-primary">
            <h6 class="text-muted text-uppercase small fw-bold">Campagnes Actives</h6>
            <h3 class="fw-bold mt-2 mb-0">0</h3>
        </div>
    </div>
    <div class="col-md-3">
        <div class="card p-3 h-100 border-start border-4 border-success">
            <h6 class="text-muted text-uppercase small fw-bold">Budget Total Engagé</h6>
            <h3 class="fw-bold mt-2 mb-0 text-success">
                0 F
            </h3>
        </div>
    </div>
    <div class="col-md-3">
        <div class="card p-3 h-100 border-start border-4 border-warning">
            <h6 class="text-muted text-uppercase small fw-bold">Total Vues</h6>
            <h3 class="fw-bold mt-2 mb-0">0</h3>
        </div>
    </div>
    <div class="col-md-3">
        <div class="card p-3 h-100 border-start border-4 border-info">
            <h6 class="text-muted text-uppercase small fw-bold">Total Clics</h6>
            <h3 class="fw-bold mt-2 mb-0">0</h3>
        </div>
    </div>
</div>

<!-- Offers Table -->
<div class="card">
    <div class="card-header bg-white py-3">
        <h5 class="mb-0 fw-bold">Toutes les offres</h5>
    </div>
    <div class="table-responsive">
        <table class="table table-hover align-middle mb-0">
            <thead class="bg-light text-secondary">
                <tr>
                    <th scope="col" class="ps-4">Titre & Type</th>
                    <th scope="col">Budget & Dépense</th>
                    <th scope="col">Performance</th>
                    <th scope="col">Période</th>
                    <th scope="col">Statut</th>
                    <th scope="col" class="text-end pe-4">Actions</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td colspan="6" class="text-center py-5">
                        <div class="text-muted mb-3"><i class="fa-solid fa-folder-open fa-3x"></i></div>
                        <h5>Aucune offre trouvée</h5>
                        <p class="text-muted">Commencez par créer votre première campagne publicitaire.</p>
                        <a href="/admin-ui/promotions/create" class="btn btn-primary">Créer une offre</a>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</div>
@end