<?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"><?= __('sliders') ?></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_slider') ?></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; ?>

<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><?= __('target_type') ?></th>
                    <th><?= __('status') ?></th>
                    <th class="text-end"><?= __('actions') ?></th>
                </tr>
            </thead>
            <tbody>
                <?php if (empty($data)): ?>
                    <tr>
                        <td colspan="6" 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="Slider" style="height: 50px; border-radius: 8px; object-fit: cover;">
                            </td>
                            <td>
                                <div class="fw-bold text-dark"><?= htmlspecialchars($item['title_en'] ?? $item['title_ar'] ?? '-') ?></div>
                            </td>
                            <td><span class="badge badge-light text-dark border fw-normal"><?= htmlspecialchars($item['target_type'] ?? 'None') ?></span></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-badge-en="<?= htmlspecialchars($item['badge_en'] ?? '') ?>"
                                        data-badge-ar="<?= htmlspecialchars($item['badge_ar'] ?? '') ?>"
                                        data-subtitle-en="<?= htmlspecialchars($item['subtitle_en'] ?? '') ?>"
                                        data-subtitle-ar="<?= htmlspecialchars($item['subtitle_ar'] ?? '') ?>"
                                        data-button-text-en="<?= htmlspecialchars($item['button_text_en'] ?? '') ?>"
                                        data-button-text-ar="<?= htmlspecialchars($item['button_text_ar'] ?? '') ?>"
                                        data-target-type="<?= htmlspecialchars($item['target_type'] ?? '') ?>"
                                        data-target-id="<?= htmlspecialchars($item['target_id'] ?? '') ?>"
                                        data-target-url="<?= htmlspecialchars($item['target_url'] ?? '') ?>"
                                        data-sort-order="<?= htmlspecialchars($item['sort_order']) ?>"
                                        data-status="<?= htmlspecialchars($item['status']) ?>">
                                    <i class="fas fa-edit"></i>
                                </button>
                                <a href="?page=sliders&action=delete&id=<?= $item['id'] ?>" class="btn btn-light btn-sm text-danger" onclick="return confirm('Delete this slider?')"><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 modal-lg">
        <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 Slider</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form action="?page=sliders&action=store" method="POST" enctype="multipart/form-data">
                <div class="modal-body p-4">
                    <div class="row">
                        <div class="col-md-8 mb-3">
                            <label class="form-label text-secondary small fw-bold">Background Image</label>
                            <input type="file" name="image" class="form-control" accept="image/*" required>
                        </div>
                        <div class="col-md-4 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>

                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label class="form-label text-secondary small fw-bold">Badge Text (EN)</label>
                            <input type="text" name="badge_en" class="form-control" placeholder="e.g. LIMITED OFFER">
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label text-secondary small fw-bold">Badge Text (AR)</label>
                            <input type="text" name="badge_ar" class="form-control" placeholder="مثال: عرض محدود">
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-6 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. Put Cleaning off your to-do list">
                        </div>
                        <div class="col-md-6 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>

                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label class="form-label text-secondary small fw-bold">Description / Subtitle (EN)</label>
                            <textarea name="subtitle_en" class="form-control" rows="2" placeholder="e.g. Get up to 25% off on monthly contracts"></textarea>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label text-secondary small fw-bold">Description / Subtitle (AR)</label>
                            <textarea name="subtitle_ar" class="form-control" rows="2" placeholder="الوصف بالعربية"></textarea>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label class="form-label text-secondary small fw-bold">Button Text (EN)</label>
                            <input type="text" name="button_text_en" class="form-control" placeholder="e.g. Browse maids">
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label text-secondary small fw-bold">Button Text (AR)</label>
                            <input type="text" name="button_text_ar" class="form-control" placeholder="نص الزر بالعربية">
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-4 mb-3">
                            <label class="form-label text-secondary small fw-bold">Action / Target Type</label>
                            <select name="target_type" class="form-select">
                                <option value="">None / No Action</option>
                                <option value="maid">Maid Profile Details</option>
                                <option value="vendor">Agency / Vendor Profile</option>
                                <option value="external_url">Web Link / Deep Link</option>
                            </select>
                        </div>
                        <div class="col-md-4 mb-3">
                            <label class="form-label text-secondary small fw-bold">Target ID (Maid/Vendor ID)</label>
                            <input type="number" name="target_id" class="form-control" placeholder="e.g. 5">
                        </div>
                        <div class="col-md-4 mb-3">
                            <label class="form-label text-secondary small fw-bold">Target URL (Web/Deep Link)</label>
                            <input type="text" name="target_url" class="form-control" placeholder="e.g. https://google.com">
                        </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 Slider</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Edit Modal -->
<div class="modal fade" id="editModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered modal-lg">
        <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 Slider</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form action="?page=sliders&action=update" method="POST" enctype="multipart/form-data">
                <input type="hidden" name="id" id="edit_id">
                <div class="modal-body p-4">
                    <div class="row">
                        <div class="col-md-8 mb-3">
                            <label class="form-label text-secondary small fw-bold">Background Image (Leave empty to keep current)</label>
                            <input type="file" name="image" class="form-control" accept="image/*">
                        </div>
                        <div class="col-md-4 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>

                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label class="form-label text-secondary small fw-bold">Badge Text (EN)</label>
                            <input type="text" name="badge_en" id="edit_badge_en" class="form-control" placeholder="e.g. LIMITED OFFER">
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label text-secondary small fw-bold">Badge Text (AR)</label>
                            <input type="text" name="badge_ar" id="edit_badge_ar" class="form-control" placeholder="مثال: عرض محدود">
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-6 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" placeholder="e.g. Put Cleaning off your to-do list">
                        </div>
                        <div class="col-md-6 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" placeholder="العنوان بالعربية">
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label class="form-label text-secondary small fw-bold">Description / Subtitle (EN)</label>
                            <textarea name="subtitle_en" id="edit_subtitle_en" class="form-control" rows="2" placeholder="e.g. Get up to 25% off on monthly contracts"></textarea>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label text-secondary small fw-bold">Description / Subtitle (AR)</label>
                            <textarea name="subtitle_ar" id="edit_subtitle_ar" class="form-control" rows="2" placeholder="الوصف بالعربية"></textarea>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label class="form-label text-secondary small fw-bold">Button Text (EN)</label>
                            <input type="text" name="button_text_en" id="edit_button_text_en" class="form-control" placeholder="e.g. Browse maids">
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label text-secondary small fw-bold">Button Text (AR)</label>
                            <input type="text" name="button_text_ar" id="edit_button_text_ar" class="form-control" placeholder="نص الزر بالعربية">
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-4 mb-3">
                            <label class="form-label text-secondary small fw-bold">Action / Target Type</label>
                            <select name="target_type" id="edit_target_type" class="form-select">
                                <option value="">None / No Action</option>
                                <option value="maid">Maid Profile Details</option>
                                <option value="vendor">Agency / Vendor Profile</option>
                                <option value="external_url">Web Link / Deep Link</option>
                            </select>
                        </div>
                        <div class="col-md-4 mb-3">
                            <label class="form-label text-secondary small fw-bold">Target ID (Maid/Vendor ID)</label>
                            <input type="number" name="target_id" id="edit_target_id" class="form-control" placeholder="e.g. 5">
                        </div>
                        <div class="col-md-4 mb-3">
                            <label class="form-label text-secondary small fw-bold">Target URL (Web/Deep Link)</label>
                            <input type="text" name="target_url" id="edit_target_url" class="form-control" placeholder="e.g. https://google.com">
                        </div>
                    </div>

                    <div class="row">
                        <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 Slider</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_badge_en').value = this.getAttribute('data-badge-en');
        document.getElementById('edit_badge_ar').value = this.getAttribute('data-badge-ar');
        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_subtitle_en').value = this.getAttribute('data-subtitle-en');
        document.getElementById('edit_subtitle_ar').value = this.getAttribute('data-subtitle-ar');
        document.getElementById('edit_button_text_en').value = this.getAttribute('data-button-text-en');
        document.getElementById('edit_button_text_ar').value = this.getAttribute('data-button-text-ar');
        document.getElementById('edit_target_type').value = this.getAttribute('data-target-type');
        document.getElementById('edit_target_id').value = this.getAttribute('data-target-id');
        document.getElementById('edit_target_url').value = this.getAttribute('data-target-url');
        document.getElementById('edit_status').value = this.getAttribute('data-status');
    });
});
</script>

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