<?php include __DIR__ . '/../../layouts/header.php'; ?>
<?php include __DIR__ . '/../../layouts/sidebar.php'; ?>

<div class="d-flex justify-content-between align-items-center mb-4">
    <h2 class="mb-0"><?= __('snippets') ?? 'Snippets' ?></h2>
    <button class="btn btn-primary rounded-pill px-4" data-bs-toggle="modal" data-bs-target="#addModal"><i class="fas fa-plus"></i> <?= __('add_snippet') ?? 'Add Snippet' ?></button>
</div>

<?php if (isset($_GET['success'])): ?>
    <div class="alert alert-success border-0 shadow-sm mb-4 rounded-4" role="alert">
        <i class="fas fa-check-circle me-2"></i> <?= htmlspecialchars($_GET['success']) ?>
    </div>
<?php endif; ?>

<?php if (isset($_GET['error'])): ?>
    <div class="alert alert-danger border-0 shadow-sm mb-4 rounded-4" role="alert">
        <i class="fas fa-exclamation-circle me-2"></i> <?= htmlspecialchars($_GET['error']) ?>
    </div>
<?php endif; ?>

<div class="table-container">
    <div class="table-responsive">
        <table class="table align-middle">
            <thead>
                <tr>
                    <th><?= __('sort_order') ?></th>
                    <th><?= __('image') ?></th>
                    <th><?= __('title') ?></th>
                    <th><?= __('status') ?></th>
                    <th class="text-end"><?= __('actions') ?></th>
                </tr>
            </thead>
            <tbody>
                <?php if (empty($data)): ?>
                    <tr>
                        <td colspan="5" class="text-center py-5 text-muted"><?= __('no_data_found') ?></td>
                    </tr>
                <?php else: ?>
                    <?php foreach ($data as $item): ?>
                        <tr>
                            <td class="text-secondary fw-semibold"><?= htmlspecialchars($item['sort_order']) ?></td>
                            <td>
                                <img src="<?= htmlspecialchars($item['image']) ?>" alt="Snippet" style="height: 60px; width: 45px; border-radius: 6px; object-fit: cover;">
                            </td>
                            <td>
                                <div class="fw-bold text-dark"><?= htmlspecialchars($item['title_en'] ?? $item['title_ar'] ?? '-') ?></div>
                                <div class="text-muted small"><?= htmlspecialchars($item['title_ar'] ?? '') ?></div>
                            </td>
                            <td>
                                <?php if ($item['status'] === 'active'): ?>
                                    <span class="badge badge-success"><?= __('active') ?></span>
                                <?php else: ?>
                                    <span class="badge badge-secondary"><?= htmlspecialchars(ucfirst($item['status'])) ?></span>
                                <?php endif; ?>
                            </td>
                            <td class="text-end">
                                <button class="btn btn-light btn-sm text-primary edit-btn me-1" 
                                        data-bs-toggle="modal" 
                                        data-bs-target="#editModal"
                                        data-id="<?= $item['id'] ?>"
                                        data-title-en="<?= htmlspecialchars($item['title_en'] ?? '') ?>"
                                        data-title-ar="<?= htmlspecialchars($item['title_ar'] ?? '') ?>"
                                        data-sort-order="<?= htmlspecialchars($item['sort_order']) ?>"
                                        data-status="<?= htmlspecialchars($item['status']) ?>">
                                    <i class="fas fa-edit"></i>
                                </button>
                                <a href="?page=snippets&action=delete&id=<?= $item['id'] ?>" class="btn btn-light btn-sm text-danger" onclick="return confirm('Delete this snippet?')"><i class="fas fa-trash"></i></a>
                            </td>
                        </tr>
                    <?php endforeach; ?>
                <?php endif; ?>
            </tbody>
        </table>
    </div>
</div>

<!-- Add Modal -->
<div class="modal fade" id="addModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content border-0 shadow rounded-4">
            <div class="modal-header border-0 px-4 pt-4">
                <h5 class="modal-title fw-bold">Add New Snippet</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form action="?page=snippets&action=store" method="POST" enctype="multipart/form-data">
                <div class="modal-body p-4">
                    <div class="mb-3">
                        <label class="form-label text-secondary small fw-bold">Snippet Image (Vertical Format Recommended)</label>
                        <input type="file" name="image" class="form-control" accept="image/*" required>
                    </div>

                    <div class="mb-3">
                        <label class="form-label text-secondary small fw-bold">Title (EN)</label>
                        <input type="text" name="title_en" class="form-control" placeholder="e.g. Kitchen Hero">
                    </div>

                    <div class="mb-3">
                        <label class="form-label text-secondary small fw-bold">Title (AR)</label>
                        <input type="text" name="title_ar" class="form-control" placeholder="العنوان بالعربية">
                    </div>

                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label class="form-label text-secondary small fw-bold">Sort Order</label>
                            <input type="number" name="sort_order" class="form-control" value="0">
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label text-secondary small fw-bold">Status</label>
                            <select name="status" class="form-select">
                                <option value="active">Active</option>
                                <option value="inactive">Inactive</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="modal-footer border-0 p-4 pt-0">
                    <button type="button" class="btn btn-light rounded-pill px-4" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary rounded-pill px-4">Save Snippet</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Edit Modal -->
<div class="modal fade" id="editModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content border-0 shadow rounded-4">
            <div class="modal-header border-0 px-4 pt-4">
                <h5 class="modal-title fw-bold">Edit Snippet</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form action="?page=snippets&action=update" method="POST" enctype="multipart/form-data">
                <input type="hidden" name="id" id="edit_id">
                <div class="modal-body p-4">
                    <div class="mb-3">
                        <label class="form-label text-secondary small fw-bold">Snippet Image (Leave empty to keep current)</label>
                        <input type="file" name="image" class="form-control" accept="image/*">
                    </div>

                    <div class="mb-3">
                        <label class="form-label text-secondary small fw-bold">Title (EN)</label>
                        <input type="text" name="title_en" id="edit_title_en" class="form-control">
                    </div>

                    <div class="mb-3">
                        <label class="form-label text-secondary small fw-bold">Title (AR)</label>
                        <input type="text" name="title_ar" id="edit_title_ar" class="form-control">
                    </div>

                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label class="form-label text-secondary small fw-bold">Sort Order</label>
                            <input type="number" name="sort_order" id="edit_sort_order" class="form-control">
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label text-secondary small fw-bold">Status</label>
                            <select name="status" id="edit_status" class="form-select">
                                <option value="active">Active</option>
                                <option value="inactive">Inactive</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="modal-footer border-0 p-4 pt-0">
                    <button type="button" class="btn btn-light rounded-pill px-4" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary rounded-pill px-4">Update Snippet</button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
document.querySelectorAll('.edit-btn').forEach(btn => {
    btn.addEventListener('click', function() {
        document.getElementById('edit_id').value = this.getAttribute('data-id');
        document.getElementById('edit_sort_order').value = this.getAttribute('data-sort-order');
        document.getElementById('edit_title_en').value = this.getAttribute('data-title-en');
        document.getElementById('edit_title_ar').value = this.getAttribute('data-title-ar');
        document.getElementById('edit_status').value = this.getAttribute('data-status');
    });
});
</script>

<?php include __DIR__ . '/../../layouts/footer.php'; ?>
