@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">12</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">53728</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">35</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 class="ps-4">
                        <div class="d-flex align-items-center">
                            <div class="rounded bg-light d-flex align-items-center justify-content-center me-3"
                                style="width: 40px; height: 40px;">
                                <i class="fa-solid fa-bullhorn text-secondary"></i>
                            </div>
                            <div>
                                <div class="fw-bold text-dark">Offer C (West Africa)</div>
                                <span class="badge bg-light text-dark border">standard</span>
                                <span class="badge bg-light text-secondary border">null</span>
                            </div>
                        </div>
                    </td>
                    <td>
                        <div class="small fw-bold">0 F dépensés</div>
                        <div class="progress mt-1" style="height: 4px; width: 100px;">
                            <div class="progress-bar bg-success" style="width: 100%"></div>
                        </div>
                        <small class="text-muted">sur Illimité</small>
                    </td>
                    <td>
                        <div class="d-flex flex-column small">
                            <span><i class="fa-regular fa-eye me-1"></i> 0
                                vues</span>
                            <span><i class="fa-solid fa-mouse-pointer me-1"></i> 0
                                clics</span>
                        </div>
                    </td>
                    <td>
                        <div class="small text-muted">Immédiat</div>
                        <div class="small text-muted">au Indéfini</div>
                    </td>
                    <td>
                        <span class="status-badge bg-success-subtle text-success">
                            <i class="fa-solid fa-check-circle me-1"></i>Actif
                        </span>
                    </td>
                    <td class="text-end pe-4">
                        <button class="btn btn-sm btn-light border" title="Modifier"><i
                                class="fa-solid fa-pen"></i></button>
                        <button class="btn btn-sm btn-light border text-danger" title="Supprimer"><i
                                class="fa-solid fa-trash"></i></button>
                    </td>
                </tr>
                <tr>
                    <td class="ps-4">
                        <div class="d-flex align-items-center">
                            <div class="rounded bg-light d-flex align-items-center justify-content-center me-3"
                                style="width: 40px; height: 40px;">
                                <i class="fa-solid fa-bullhorn text-secondary"></i>
                            </div>
                            <div>
                                <div class="fw-bold text-dark">Offer B (Benin)</div>
                                <span class="badge bg-light text-dark border">standard</span>
                                <span class="badge bg-light text-secondary border">null</span>
                            </div>
                        </div>
                    </td>
                    <td>
                        <div class="small fw-bold">0 F dépensés</div>
                        <div class="progress mt-1" style="height: 4px; width: 100px;">
                            <div class="progress-bar bg-success" style="width: 100%"></div>
                        </div>
                        <small class="text-muted">sur Illimité</small>
                    </td>
                    <td>
                        <div class="d-flex flex-column small">
                            <span><i class="fa-regular fa-eye me-1"></i> 0
                                vues</span>
                            <span><i class="fa-solid fa-mouse-pointer me-1"></i> 0
                                clics</span>
                        </div>
                    </td>
                    <td>
                        <div class="small text-muted">Immédiat</div>
                        <div class="small text-muted">au Indéfini</div>
                    </td>
                    <td>
                        <span class="status-badge bg-success-subtle text-success">
                            <i class="fa-solid fa-check-circle me-1"></i>Actif
                        </span>
                    </td>
                    <td class="text-end pe-4">
                        <button class="btn btn-sm btn-light border" title="Modifier"><i
                                class="fa-solid fa-pen"></i></button>
                        <button class="btn btn-sm btn-light border text-danger" title="Supprimer"><i
                                class="fa-solid fa-trash"></i></button>
                    </td>
                </tr>
                <tr>
                    <td class="ps-4">
                        <div class="d-flex align-items-center">
                            <div class="rounded bg-light d-flex align-items-center justify-content-center me-3"
                                style="width: 40px; height: 40px;">
                                <i class="fa-solid fa-bullhorn text-secondary"></i>
                            </div>
                            <div>
                                <div class="fw-bold text-dark">Offer A (Cotonou only)</div>
                                <span class="badge bg-light text-dark border">standard</span>
                                <span class="badge bg-light text-secondary border">null</span>
                            </div>
                        </div>
                    </td>
                    <td>
                        <div class="small fw-bold">0 F dépensés</div>
                        <div class="progress mt-1" style="height: 4px; width: 100px;">
                            <div class="progress-bar bg-success" style="width: 100%"></div>
                        </div>
                        <small class="text-muted">sur Illimité</small>
                    </td>
                    <td>
                        <div class="d-flex flex-column small">
                            <span><i class="fa-regular fa-eye me-1"></i> 0
                                vues</span>
                            <span><i class="fa-solid fa-mouse-pointer me-1"></i> 0
                                clics</span>
                        </div>
                    </td>
                    <td>
                        <div class="small text-muted">Immédiat</div>
                        <div class="small text-muted">au Indéfini</div>
                    </td>
                    <td>
                        <span class="status-badge bg-success-subtle text-success">
                            <i class="fa-solid fa-check-circle me-1"></i>Actif
                        </span>
                    </td>
                    <td class="text-end pe-4">
                        <button class="btn btn-sm btn-light border" title="Modifier"><i
                                class="fa-solid fa-pen"></i></button>
                        <button class="btn btn-sm btn-light border text-danger" title="Supprimer"><i
                                class="fa-solid fa-trash"></i></button>
                    </td>
                </tr>
                <tr>
                    <td class="ps-4">
                        <div class="d-flex align-items-center">
                            <div class="rounded bg-light d-flex align-items-center justify-content-center me-3"
                                style="width: 40px; height: 40px;">
                                <i class="fa-solid fa-bullhorn text-secondary"></i>
                            </div>
                            <div>
                                <div class="fw-bold text-dark">Offer C (West Africa)</div>
                                <span class="badge bg-light text-dark border">standard</span>
                                <span class="badge bg-light text-secondary border">null</span>
                            </div>
                        </div>
                    </td>
                    <td>
                        <div class="small fw-bold">0 F dépensés</div>
                        <div class="progress mt-1" style="height: 4px; width: 100px;">
                            <div class="progress-bar bg-success" style="width: 100%"></div>
                        </div>
                        <small class="text-muted">sur Illimité</small>
                    </td>
                    <td>
                        <div class="d-flex flex-column small">
                            <span><i class="fa-regular fa-eye me-1"></i> 0
                                vues</span>
                            <span><i class="fa-solid fa-mouse-pointer me-1"></i> 0
                                clics</span>
                        </div>
                    </td>
                    <td>
                        <div class="small text-muted">Immédiat</div>
                        <div class="small text-muted">au Indéfini</div>
                    </td>
                    <td>
                        <span class="status-badge bg-success-subtle text-success">
                            <i class="fa-solid fa-check-circle me-1"></i>Actif
                        </span>
                    </td>
                    <td class="text-end pe-4">
                        <button class="btn btn-sm btn-light border" title="Modifier"><i
                                class="fa-solid fa-pen"></i></button>
                        <button class="btn btn-sm btn-light border text-danger" title="Supprimer"><i
                                class="fa-solid fa-trash"></i></button>
                    </td>
                </tr>
                <tr>
                    <td class="ps-4">
                        <div class="d-flex align-items-center">
                            <div class="rounded bg-light d-flex align-items-center justify-content-center me-3"
                                style="width: 40px; height: 40px;">
                                <i class="fa-solid fa-bullhorn text-secondary"></i>
                            </div>
                            <div>
                                <div class="fw-bold text-dark">Offer B (Benin)</div>
                                <span class="badge bg-light text-dark border">standard</span>
                                <span class="badge bg-light text-secondary border">null</span>
                            </div>
                        </div>
                    </td>
                    <td>
                        <div class="small fw-bold">0 F dépensés</div>
                        <div class="progress mt-1" style="height: 4px; width: 100px;">
                            <div class="progress-bar bg-success" style="width: 100%"></div>
                        </div>
                        <small class="text-muted">sur Illimité</small>
                    </td>
                    <td>
                        <div class="d-flex flex-column small">
                            <span><i class="fa-regular fa-eye me-1"></i> 0
                                vues</span>
                            <span><i class="fa-solid fa-mouse-pointer me-1"></i> 0
                                clics</span>
                        </div>
                    </td>
                    <td>
                        <div class="small text-muted">Immédiat</div>
                        <div class="small text-muted">au Indéfini</div>
                    </td>
                    <td>
                        <span class="status-badge bg-success-subtle text-success">
                            <i class="fa-solid fa-check-circle me-1"></i>Actif
                        </span>
                    </td>
                    <td class="text-end pe-4">
                        <button class="btn btn-sm btn-light border" title="Modifier"><i
                                class="fa-solid fa-pen"></i></button>
                        <button class="btn btn-sm btn-light border text-danger" title="Supprimer"><i
                                class="fa-solid fa-trash"></i></button>
                    </td>
                </tr>
                <tr>
                    <td class="ps-4">
                        <div class="d-flex align-items-center">
                            <div class="rounded bg-light d-flex align-items-center justify-content-center me-3"
                                style="width: 40px; height: 40px;">
                                <i class="fa-solid fa-bullhorn text-secondary"></i>
                            </div>
                            <div>
                                <div class="fw-bold text-dark">Offer A (Cotonou only)</div>
                                <span class="badge bg-light text-dark border">standard</span>
                                <span class="badge bg-light text-secondary border">null</span>
                            </div>
                        </div>
                    </td>
                    <td>
                        <div class="small fw-bold">0 F dépensés</div>
                        <div class="progress mt-1" style="height: 4px; width: 100px;">
                            <div class="progress-bar bg-success" style="width: 100%"></div>
                        </div>
                        <small class="text-muted">sur Illimité</small>
                    </td>
                    <td>
                        <div class="d-flex flex-column small">
                            <span><i class="fa-regular fa-eye me-1"></i> 0
                                vues</span>
                            <span><i class="fa-solid fa-mouse-pointer me-1"></i> 0
                                clics</span>
                        </div>
                    </td>
                    <td>
                        <div class="small text-muted">Immédiat</div>
                        <div class="small text-muted">au Indéfini</div>
                    </td>
                    <td>
                        <span class="status-badge bg-success-subtle text-success">
                            <i class="fa-solid fa-check-circle me-1"></i>Actif
                        </span>
                    </td>
                    <td class="text-end pe-4">
                        <button class="btn btn-sm btn-light border" title="Modifier"><i
                                class="fa-solid fa-pen"></i></button>
                        <button class="btn btn-sm btn-light border text-danger" title="Supprimer"><i
                                class="fa-solid fa-trash"></i></button>
                    </td>
                </tr>
                <tr>
                    <td class="ps-4">
                        <div class="d-flex align-items-center">
                            <div class="rounded bg-light d-flex align-items-center justify-content-center me-3"
                                style="width: 40px; height: 40px;">
                                <i class="fa-solid fa-bullhorn text-secondary"></i>
                            </div>
                            <div>
                                <div class="fw-bold text-dark">Offer C (West Africa)</div>
                                <span class="badge bg-light text-dark border">standard</span>
                                <span class="badge bg-light text-secondary border">home_feed</span>
                            </div>
                        </div>
                    </td>
                    <td>
                        <div class="small fw-bold">0 F dépensés</div>
                        <div class="progress mt-1" style="height: 4px; width: 100px;">
                            <div class="progress-bar bg-success" style="width: 100%"></div>
                        </div>
                        <small class="text-muted">sur Illimité</small>
                    </td>
                    <td>
                        <div class="d-flex flex-column small">
                            <span><i class="fa-regular fa-eye me-1"></i> 27102
                                vues</span>
                            <span><i class="fa-solid fa-mouse-pointer me-1"></i> 11
                                clics</span>
                        </div>
                    </td>
                    <td>
                        <div class="small text-muted">Immédiat</div>
                        <div class="small text-muted">au Indéfini</div>
                    </td>
                    <td>
                        <span class="status-badge bg-success-subtle text-success">
                            <i class="fa-solid fa-check-circle me-1"></i>Actif
                        </span>
                    </td>
                    <td class="text-end pe-4">
                        <button class="btn btn-sm btn-light border" title="Modifier"><i
                                class="fa-solid fa-pen"></i></button>
                        <button class="btn btn-sm btn-light border text-danger" title="Supprimer"><i
                                class="fa-solid fa-trash"></i></button>
                    </td>
                </tr>
                <tr>
                    <td class="ps-4">
                        <div class="d-flex align-items-center">
                            <div class="rounded bg-light d-flex align-items-center justify-content-center me-3"
                                style="width: 40px; height: 40px;">
                                <i class="fa-solid fa-bullhorn text-secondary"></i>
                            </div>
                            <div>
                                <div class="fw-bold text-dark">Offer B (Benin)</div>
                                <span class="badge bg-light text-dark border">standard</span>
                                <span class="badge bg-light text-secondary border">null</span>
                            </div>
                        </div>
                    </td>
                    <td>
                        <div class="small fw-bold">0 F dépensés</div>
                        <div class="progress mt-1" style="height: 4px; width: 100px;">
                            <div class="progress-bar bg-success" style="width: 100%"></div>
                        </div>
                        <small class="text-muted">sur Illimité</small>
                    </td>
                    <td>
                        <div class="d-flex flex-column small">
                            <span><i class="fa-regular fa-eye me-1"></i> 0
                                vues</span>
                            <span><i class="fa-solid fa-mouse-pointer me-1"></i> 0
                                clics</span>
                        </div>
                    </td>
                    <td>
                        <div class="small text-muted">Immédiat</div>
                        <div class="small text-muted">au Indéfini</div>
                    </td>
                    <td>
                        <span class="status-badge bg-success-subtle text-success">
                            <i class="fa-solid fa-check-circle me-1"></i>Actif
                        </span>
                    </td>
                    <td class="text-end pe-4">
                        <button class="btn btn-sm btn-light border" title="Modifier"><i
                                class="fa-solid fa-pen"></i></button>
                        <button class="btn btn-sm btn-light border text-danger" title="Supprimer"><i
                                class="fa-solid fa-trash"></i></button>
                    </td>
                </tr>
                <tr>
                    <td class="ps-4">
                        <div class="d-flex align-items-center">
                            <div class="rounded bg-light d-flex align-items-center justify-content-center me-3"
                                style="width: 40px; height: 40px;">
                                <i class="fa-solid fa-bullhorn text-secondary"></i>
                            </div>
                            <div>
                                <div class="fw-bold text-dark">Offer A (Cotonou only)</div>
                                <span class="badge bg-light text-dark border">standard</span>
                                <span class="badge bg-light text-secondary border">null</span>
                            </div>
                        </div>
                    </td>
                    <td>
                        <div class="small fw-bold">0 F dépensés</div>
                        <div class="progress mt-1" style="height: 4px; width: 100px;">
                            <div class="progress-bar bg-success" style="width: 100%"></div>
                        </div>
                        <small class="text-muted">sur Illimité</small>
                    </td>
                    <td>
                        <div class="d-flex flex-column small">
                            <span><i class="fa-regular fa-eye me-1"></i> 0
                                vues</span>
                            <span><i class="fa-solid fa-mouse-pointer me-1"></i> 0
                                clics</span>
                        </div>
                    </td>
                    <td>
                        <div class="small text-muted">Immédiat</div>
                        <div class="small text-muted">au Indéfini</div>
                    </td>
                    <td>
                        <span class="status-badge bg-success-subtle text-success">
                            <i class="fa-solid fa-check-circle me-1"></i>Actif
                        </span>
                    </td>
                    <td class="text-end pe-4">
                        <button class="btn btn-sm btn-light border" title="Modifier"><i
                                class="fa-solid fa-pen"></i></button>
                        <button class="btn btn-sm btn-light border text-danger" title="Supprimer"><i
                                class="fa-solid fa-trash"></i></button>
                    </td>
                </tr>
                <tr>
                    <td class="ps-4">
                        <div class="d-flex align-items-center">
                            <div class="rounded bg-light d-flex align-items-center justify-content-center me-3"
                                style="width: 40px; height: 40px;">
                                <i class="fa-solid fa-bullhorn text-secondary"></i>
                            </div>
                            <div>
                                <div class="fw-bold text-dark">Offer C (West Africa)</div>
                                <span class="badge bg-light text-dark border">standard</span>
                                <span class="badge bg-light text-secondary border">home_feed</span>
                            </div>
                        </div>
                    </td>
                    <td>
                        <div class="small fw-bold">0 F dépensés</div>
                        <div class="progress mt-1" style="height: 4px; width: 100px;">
                            <div class="progress-bar bg-success" style="width: 100%"></div>
                        </div>
                        <small class="text-muted">sur Illimité</small>
                    </td>
                    <td>
                        <div class="d-flex flex-column small">
                            <span><i class="fa-regular fa-eye me-1"></i> 0
                                vues</span>
                            <span><i class="fa-solid fa-mouse-pointer me-1"></i> 0
                                clics</span>
                        </div>
                    </td>
                    <td>
                        <div class="small text-muted">Immédiat</div>
                        <div class="small text-muted">au Indéfini</div>
                    </td>
                    <td>
                        <span class="status-badge bg-success-subtle text-success">
                            <i class="fa-solid fa-check-circle me-1"></i>Actif
                        </span>
                    </td>
                    <td class="text-end pe-4">
                        <button class="btn btn-sm btn-light border" title="Modifier"><i
                                class="fa-solid fa-pen"></i></button>
                        <button class="btn btn-sm btn-light border text-danger" title="Supprimer"><i
                                class="fa-solid fa-trash"></i></button>
                    </td>
                </tr>
                <tr>
                    <td class="ps-4">
                        <div class="d-flex align-items-center">
                            <div class="rounded bg-light d-flex align-items-center justify-content-center me-3"
                                style="width: 40px; height: 40px;">
                                <i class="fa-solid fa-bullhorn text-secondary"></i>
                            </div>
                            <div>
                                <div class="fw-bold text-dark">Offer B (Benin)</div>
                                <span class="badge bg-light text-dark border">standard</span>
                                <span class="badge bg-light text-secondary border">null</span>
                            </div>
                        </div>
                    </td>
                    <td>
                        <div class="small fw-bold">0 F dépensés</div>
                        <div class="progress mt-1" style="height: 4px; width: 100px;">
                            <div class="progress-bar bg-success" style="width: 100%"></div>
                        </div>
                        <small class="text-muted">sur Illimité</small>
                    </td>
                    <td>
                        <div class="d-flex flex-column small">
                            <span><i class="fa-regular fa-eye me-1"></i> 0
                                vues</span>
                            <span><i class="fa-solid fa-mouse-pointer me-1"></i> 0
                                clics</span>
                        </div>
                    </td>
                    <td>
                        <div class="small text-muted">Immédiat</div>
                        <div class="small text-muted">au Indéfini</div>
                    </td>
                    <td>
                        <span class="status-badge bg-success-subtle text-success">
                            <i class="fa-solid fa-check-circle me-1"></i>Actif
                        </span>
                    </td>
                    <td class="text-end pe-4">
                        <button class="btn btn-sm btn-light border" title="Modifier"><i
                                class="fa-solid fa-pen"></i></button>
                        <button class="btn btn-sm btn-light border text-danger" title="Supprimer"><i
                                class="fa-solid fa-trash"></i></button>
                    </td>
                </tr>
                <tr>
                    <td class="ps-4">
                        <div class="d-flex align-items-center">
                            <div class="rounded bg-light d-flex align-items-center justify-content-center me-3"
                                style="width: 40px; height: 40px;">
                                <i class="fa-solid fa-bullhorn text-secondary"></i>
                            </div>
                            <div>
                                <div class="fw-bold text-dark">Offer A (Cotonou only)</div>
                                <span class="badge bg-light text-dark border">standard</span>
                                <span class="badge bg-light text-secondary border">home_feed</span>
                            </div>
                        </div>
                    </td>
                    <td>
                        <div class="small fw-bold">0 F dépensés</div>
                        <div class="progress mt-1" style="height: 4px; width: 100px;">
                            <div class="progress-bar bg-success" style="width: 100%"></div>
                        </div>
                        <small class="text-muted">sur Illimité</small>
                    </td>
                    <td>
                        <div class="d-flex flex-column small">
                            <span><i class="fa-regular fa-eye me-1"></i> 26626
                                vues</span>
                            <span><i class="fa-solid fa-mouse-pointer me-1"></i> 24
                                clics</span>
                        </div>
                    </td>
                    <td>
                        <div class="small text-muted">Immédiat</div>
                        <div class="small text-muted">au Indéfini</div>
                    </td>
                    <td>
                        <span class="status-badge bg-success-subtle text-success">
                            <i class="fa-solid fa-check-circle me-1"></i>Actif
                        </span>
                    </td>
                    <td class="text-end pe-4">
                        <button class="btn btn-sm btn-light border" title="Modifier"><i
                                class="fa-solid fa-pen"></i></button>
                        <button class="btn btn-sm btn-light border text-danger" title="Supprimer"><i
                                class="fa-solid fa-trash"></i></button>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</div>
@end