<?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"><?= __('subscription_plans') ?></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 Plan</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><?= __('id') ?></th>
                    <th>Name</th>
                    <th>Price</th>
                    <th>Billing Cycle</th>
                    <th>Ads Quota</th>
                    <th><?= __('status') ?></th>
                    <th class="text-end"><?= __('actions') ?></th>
                </tr>
            </thead>
            <tbody>
                <?php if (empty($plans)): ?>
                    <tr>
                        <td colspan="7" class="text-center py-5 text-muted"><?= __('no_data_found') ?></td>
                    </tr>
                <?php else: ?>
                    <?php foreach ($plans as $plan): ?>
                        <tr>
                            <td class="text-secondary fw-semibold">#<?= htmlspecialchars($plan['id']) ?></td>
                            <td><span class="fw-bold text-dark"><?= htmlspecialchars($plan['name_en'] ?? $plan['name_ar']) ?></span></td>
                            <td><span class="fw-bold text-dark"><?= htmlspecialchars($plan['price']) ?></span> <span class="text-secondary" style="font-size:12px;"><?= htmlspecialchars($plan['currency']) ?></span></td>
                            <td><?= htmlspecialchars(ucfirst($plan['billing_cycle'])) ?></td>
                            <td><?= htmlspecialchars($plan['ads_quota']) ?> Ads</td>
                            <td>
                                <?php if ($plan['status'] === 'active'): ?>
                                    <span class="badge badge-success"><?= __('active') ?></span>
                                <?php else: ?>
                                    <span class="badge badge-secondary"><?= htmlspecialchars(ucfirst($plan['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="<?= $plan['id'] ?>"
                                        data-name-en="<?= htmlspecialchars($plan['name_en'] ?? '') ?>"
                                        data-name-ar="<?= htmlspecialchars($plan['name_ar'] ?? '') ?>"
                                        data-price="<?= htmlspecialchars($plan['price']) ?>"
                                        data-duration-months="<?= htmlspecialchars($plan['billing_cycle'] === 'yearly' ? 12 : 1) ?>"
                                        data-ads-quota="<?= htmlspecialchars($plan['ads_quota']) ?>"
                                        data-max-maids="<?= htmlspecialchars($plan['max_maids'] ?? '') ?>"
                                        data-interview-requests-limit="<?= htmlspecialchars($plan['interview_requests_limit'] ?? '') ?>"
                                        data-features-en="<?= htmlspecialchars(implode("\n", $plan['features_en'] ?? [])) ?>"
                                        data-features-ar="<?= htmlspecialchars(implode("\n", $plan['features_ar'] ?? [])) ?>"
                                        data-status="<?= htmlspecialchars($plan['status']) ?>">
                                    <i class="fas fa-edit"></i>
                                </button>
                                <a href="?page=subscription_plans&action=delete&id=<?= $plan['id'] ?>" class="btn btn-light btn-sm text-danger" onclick="return confirm('Delete this plan?')"><i class="fas fa-trash"></i></a>
                            </td>
                        </tr>
                    <?php endforeach; ?>
                <?php endif; ?>
            </tbody>
        </table>
    </div>

    <?php if ($totalPages > 1): ?>
    <div class="d-flex justify-content-end mt-4">
        <ul class="pagination mb-0 gap-2">
            <li class="page-item <?= $page <= 1 ? 'disabled' : '' ?>">
                <a class="page-link rounded-circle border-0 text-secondary bg-light" href="?page=subscription_plans&p=<?= $page - 1 ?>" style="width:40px; height:40px; display:flex; align-items:center; justify-content:center;"><i class="fas <?= isRTL() ? 'fa-chevron-right' : 'fa-chevron-left' ?>"></i></a>
            </li>
            <?php for ($i = 1; $i <= $totalPages; $i++): ?>
                <li class="page-item <?= $i == $page ? 'active' : '' ?>">
                    <a class="page-link rounded-circle border-0 <?= $i == $page ? 'bg-primary text-white' : 'text-secondary bg-light' ?>" href="?page=subscription_plans&p=<?= $i ?>" style="width:40px; height:40px; display:flex; align-items:center; justify-content:center;"><?= $i ?></a>
                </li>
            <?php endfor; ?>
            <li class="page-item <?= $page >= $totalPages ? 'disabled' : '' ?>">
                <a class="page-link rounded-circle border-0 text-secondary bg-light" href="?page=subscription_plans&p=<?= $page + 1 ?>" style="width:40px; height:40px; display:flex; align-items:center; justify-content:center;"><i class="fas <?= isRTL() ? 'fa-chevron-left' : 'fa-chevron-right' ?>"></i></a>
            </li>
        </ul>
    </div>
    <?php endif; ?>
</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 Subscription Plan</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form action="?page=subscription_plans&action=store" method="POST">
                <div class="modal-body p-4">
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label class="form-label text-secondary small fw-bold">Name (EN)</label>
                            <input type="text" name="name_en" class="form-control" required>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label text-secondary small fw-bold">Name (AR)</label>
                            <input type="text" name="name_ar" class="form-control">
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label class="form-label text-secondary small fw-bold">Price</label>
                            <input type="number" step="0.01" name="price" class="form-control" required>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label text-secondary small fw-bold">Duration (Months)</label>
                            <input type="number" name="duration_months" class="form-control" value="1" required>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-4 mb-3">
                            <label class="form-label text-secondary small fw-bold">Ads Quota</label>
                            <input type="number" name="ads_quota" class="form-control" value="0" required>
                        </div>
                        <div class="col-md-4 mb-3">
                            <label class="form-label text-secondary small fw-bold">Max Maids Limit</label>
                            <input type="number" name="max_maids" class="form-control" placeholder="No Limit (e.g. 10)">
                        </div>
                        <div class="col-md-4 mb-3">
                            <label class="form-label text-secondary small fw-bold">Interview Requests Limit</label>
                            <input type="number" name="interview_requests_limit" class="form-control" placeholder="No Limit (e.g. 5)">
                        </div>
                    </div>
                    <div class="mb-3">
                        <label class="form-label text-secondary small fw-bold">Features (EN) - One per line</label>
                        <textarea name="features_en" class="form-control" rows="3"></textarea>
                    </div>
                    <div class="mb-3">
                        <label class="form-label text-secondary small fw-bold">Features (AR) - One per line</label>
                        <textarea name="features_ar" class="form-control" rows="3"></textarea>
                    </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 Plan</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 Subscription Plan</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form action="?page=subscription_plans&action=update" method="POST">
                <input type="hidden" name="id" id="edit_id">
                <div class="modal-body p-4">
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label class="form-label text-secondary small fw-bold">Name (EN)</label>
                            <input type="text" name="name_en" id="edit_name_en" class="form-control" required>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label text-secondary small fw-bold">Name (AR)</label>
                            <input type="text" name="name_ar" id="edit_name_ar" class="form-control">
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label class="form-label text-secondary small fw-bold">Price</label>
                            <input type="number" step="0.01" name="price" id="edit_price" class="form-control" required>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label text-secondary small fw-bold">Duration (Months)</label>
                            <input type="number" name="duration_months" id="edit_duration_months" class="form-control" required>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-4 mb-3">
                            <label class="form-label text-secondary small fw-bold">Ads Quota</label>
                            <input type="number" name="ads_quota" id="edit_ads_quota" class="form-control" required>
                        </div>
                        <div class="col-md-4 mb-3">
                            <label class="form-label text-secondary small fw-bold">Max Maids Limit</label>
                            <input type="number" name="max_maids" id="edit_max_maids" class="form-control" placeholder="No Limit (e.g. 10)">
                        </div>
                        <div class="col-md-4 mb-3">
                            <label class="form-label text-secondary small fw-bold">Interview Requests Limit</label>
                            <input type="number" name="interview_requests_limit" id="edit_interview_requests_limit" class="form-control" placeholder="No Limit (e.g. 5)">
                        </div>
                    </div>
                    <div class="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 class="mb-3">
                        <label class="form-label text-secondary small fw-bold">Features (EN) - One per line</label>
                        <textarea name="features_en" id="edit_features_en" class="form-control" rows="3"></textarea>
                    </div>
                    <div class="mb-3">
                        <label class="form-label text-secondary small fw-bold">Features (AR) - One per line</label>
                        <textarea name="features_ar" id="edit_features_ar" class="form-control" rows="3"></textarea>
                    </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 Plan</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_name_en').value = this.getAttribute('data-name-en');
        document.getElementById('edit_name_ar').value = this.getAttribute('data-name-ar');
        document.getElementById('edit_price').value = this.getAttribute('data-price');
        document.getElementById('edit_duration_months').value = this.getAttribute('data-duration-months');
        document.getElementById('edit_ads_quota').value = this.getAttribute('data-ads-quota');
        document.getElementById('edit_max_maids').value = this.getAttribute('data-max-maids');
        document.getElementById('edit_interview_requests_limit').value = this.getAttribute('data-interview-requests-limit');
        document.getElementById('edit_status').value = this.getAttribute('data-status');
        document.getElementById('edit_features_en').value = this.getAttribute('data-features-en');
        document.getElementById('edit_features_ar').value = this.getAttribute('data-features-ar');
    });
});
</script>

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