<div class="stock-header" style="background: linear-gradient(120deg, #7C4DBE 0%, #4A2E7A 100%);">
    <div class="sth-icon"><i class="fa-solid fa-bullhorn"></i></div>
    <div class="sth-text">
        <h2>Home Promotions</h2>
        <div class="sth-sub">Slideshow banners shown on the customer app's Home tab</div>
    </div>
    <div class="sth-actions">
        <?php if (Auth::can('menu', 'edit')): ?>
        <button type="button" class="btn sth-btn" onclick="rmsOpenModal('rmsAddPromoModal')"><i class="fa-solid fa-plus"></i> Add Promotion</button>
        <?php endif; ?>
    </div>
</div>

<div class="alert alert-success" style="margin-bottom:20px;font-size:12.5px;">
    <i class="fa-solid fa-circle-info"></i> These banners auto-rotate on the customer app's Home tab. If none are active, a default welcome banner is shown instead. Recommended image size: 800×450px (16:9).
</div>

<div class="dark-table-panel">
    <div class="dtp-head">
        <span><i class="fa-solid fa-images"></i> Promotion Slides</span>
        <span class="dtp-count"><?= count($promotions) ?> total</span>
    </div>
    <div style="overflow-x:auto;">
    <table class="data-table">
    <thead><tr><th>#</th><th>Preview</th><th>Title</th><th>Subtitle</th><th>Button Text</th><th>Order</th><th>Status</th><th>Actions</th></tr></thead>
    <tbody>
    <?php foreach ($promotions as $i => $p): ?>
    <tr>
        <td><?= $i + 1 ?></td>
        <td>
            <?php if ($p['image_path']): ?>
            <img src="<?= BASE_URL ?>/<?= e($p['image_path']) ?>" style="width:70px;height:40px;object-fit:cover;border-radius:6px;">
            <?php else: ?>
            <div style="width:70px;height:40px;border-radius:6px;background:var(--color-bg);display:flex;align-items:center;justify-content:center;color:var(--color-text-muted);"><i class="fa-solid fa-image"></i></div>
            <?php endif; ?>
        </td>
        <td><strong><?= e($p['title']) ?></strong></td>
        <td><?= e($p['subtitle'] ?? '—') ?></td>
        <td><?= e($p['button_text']) ?></td>
        <td><?= (int) $p['display_order'] ?></td>
        <td><?= $p['is_active'] ? '<span class="badge badge-green">Active</span>' : '<span class="badge badge-gray">Inactive</span>' ?></td>
        <td style="white-space:nowrap;">
            <?php if (Auth::can('menu', 'edit')): ?>
            <button type="button" class="icon-btn icon-btn-gray" onclick="rmsOpenModal('rmsEditPromoModal<?= $p['id'] ?>')" title="Edit"><i class="fa-solid fa-pen"></i></button>
            <form method="POST" action="<?= Router::url('promotions/toggle') ?>" style="display:inline;">
                <?= $csrf ?>
                <input type="hidden" name="id" value="<?= $p['id'] ?>">
                <button type="submit" class="icon-btn <?= $p['is_active'] ? 'icon-btn-red' : 'icon-btn-blue' ?>" title="<?= $p['is_active'] ? 'Deactivate' : 'Activate' ?>"><i class="fa-solid <?= $p['is_active'] ? 'fa-ban' : 'fa-check' ?>"></i></button>
            </form>
            <?php endif; ?>
            <?php if (Auth::can('menu', 'delete')): ?>
            <form method="POST" action="<?= Router::url('promotions/delete') ?>" style="display:inline;" onsubmit="return confirm('Delete this promotion slide?');">
                <?= $csrf ?>
                <input type="hidden" name="id" value="<?= $p['id'] ?>">
                <button type="submit" class="icon-btn icon-btn-red"><i class="fa-solid fa-trash"></i></button>
            </form>
            <?php endif; ?>
        </td>
    </tr>
    <?php endforeach; ?>
    <?php if (empty($promotions)): ?>
    <tr><td colspan="8" style="text-align:center;color:var(--color-text-muted);padding:30px;">No promotions yet — add one to show a custom slideshow on the customer app's Home tab.</td></tr>
    <?php endif; ?>
    </tbody>
    </table>
    </div>
</div>

<?php if (Auth::can('menu', 'edit')): ?>
<div class="rms-modal-overlay" id="rmsAddPromoModal">
    <div class="rms-modal">
        <div class="rms-modal-head">
            <h3><i class="fa-solid fa-bullhorn" style="color:var(--color-teal);margin-right:6px;"></i>Add Promotion</h3>
            <button type="button" class="rms-modal-close" onclick="rmsCloseModal('rmsAddPromoModal')"><i class="fa-solid fa-xmark"></i></button>
        </div>
        <form method="POST" action="<?= Router::url('promotions/store') ?>" enctype="multipart/form-data">
            <?= $csrf ?>
            <div class="form-group"><label>Title</label><input type="text" name="title" class="form-control" placeholder="e.g. Weekend Special!" required></div>
            <div class="form-group"><label>Subtitle</label><input type="text" name="subtitle" class="form-control" placeholder="e.g. Free delivery on orders over Rs. 1500"></div>
            <div class="form-group"><label>Button Text</label><input type="text" name="button_text" class="form-control" value="Browse Menu"></div>
            <div class="form-group"><label>Banner Image (optional, 16:9 recommended)</label><input type="file" name="image" class="form-control" accept="image/*"></div>
            <button type="submit" class="btn btn-primary" style="width:100%;"><i class="fa-solid fa-plus"></i> Add Promotion</button>
        </form>
    </div>
</div>
<?php endif; ?>

<?php foreach ($promotions as $p): if (!Auth::can('menu', 'edit')) continue; ?>
<div class="rms-modal-overlay" id="rmsEditPromoModal<?= $p['id'] ?>">
    <div class="rms-modal">
        <div class="rms-modal-head">
            <h3><i class="fa-solid fa-pen" style="color:var(--color-teal);margin-right:6px;"></i>Edit Promotion</h3>
            <button type="button" class="rms-modal-close" onclick="rmsCloseModal('rmsEditPromoModal<?= $p['id'] ?>')"><i class="fa-solid fa-xmark"></i></button>
        </div>
        <form method="POST" action="<?= Router::url('promotions/update') ?>" enctype="multipart/form-data">
            <?= $csrf ?>
            <input type="hidden" name="id" value="<?= $p['id'] ?>">
            <div class="form-group"><label>Title</label><input type="text" name="title" class="form-control" value="<?= e($p['title']) ?>" required></div>
            <div class="form-group"><label>Subtitle</label><input type="text" name="subtitle" class="form-control" value="<?= e($p['subtitle'] ?? '') ?>"></div>
            <div class="form-group"><label>Button Text</label><input type="text" name="button_text" class="form-control" value="<?= e($p['button_text']) ?>"></div>
            <div class="form-group"><label>Display Order</label><input type="number" name="display_order" class="form-control" value="<?= (int) $p['display_order'] ?>"></div>
            <?php if ($p['image_path']): ?>
            <img src="<?= BASE_URL ?>/<?= e($p['image_path']) ?>" style="width:100%;max-height:120px;object-fit:cover;border-radius:8px;margin-bottom:10px;">
            <?php endif; ?>
            <div class="form-group"><label>Replace Banner Image (optional)</label><input type="file" name="image" class="form-control" accept="image/*"></div>
            <button type="submit" class="btn btn-primary" style="width:100%;"><i class="fa-solid fa-floppy-disk"></i> Save Changes</button>
        </form>
    </div>
</div>
<?php endforeach; ?>
