<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Manage Posting Limits - SuperAdmin</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css" rel="stylesheet">
    <style>
        body { background-color: #f4f6f9; }
        .sidebar { min-height: 100vh; background: linear-gradient(180deg, #1e3c72 0%, #2a5298 100%); color: white; }
        .sidebar .nav-link { color: rgba(255,255,255,0.8); }
        .sidebar .nav-link:hover { background: rgba(255,255,255,0.1); color: white; }
        .card { border: none; border-radius: 10px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); }
        .table-hover tbody tr:hover { background-color: #f8f9fa; }
    </style>
</head>
<body>
    <div class="container-fluid">
        <div class="row">
            <!-- Sidebar -->
            <div class="col-md-3 col-lg-2 px-0 sidebar">
                <div class="p-3">
                    <h4 class="text-white mb-4"><i class="bi bi-shield-check"></i> Super Admin</h4>
                    <nav class="nav flex-column">
                        <a href="<?= base_url('superadmin/dashboard') ?>" class="nav-link">
                            <i class="bi bi-speedometer2"></i> Dashboard
                        </a>
                        <a href="<?= base_url('superadmin/users') ?>" class="nav-link">
                            <i class="bi bi-people"></i> Users
                        </a>
                        <a href="<?= base_url('superadmin/admins') ?>" class="nav-link">
                            <i class="bi bi-person-badge"></i> Admins
                        </a>
                        <a href="<?= base_url('superadmin/settings') ?>" class="nav-link">
                            <i class="bi bi-gear"></i> Settings
                        </a>
                        <a href="<?= base_url('superadmin/reports') ?>" class="nav-link">
                            <i class="bi bi-file-earmark-text"></i> Reports
                        </a>
                        <a href="<?= base_url('superadmin/manageTaxonomy') ?>" class="nav-link">
                            <i class="bi bi-tags"></i> Catalogue
                        </a>
                        <a href="<?= base_url('superadmin/manageSubscriptionLimits') ?>" class="nav-link">
                            <i class="bi bi-card-list"></i> Subscription Limits
                        </a>
                        <a href="<?= base_url('superadmin/managePostingLimits') ?>" class="nav-link active">
                            <i class="bi bi-clock-history"></i> Posting Limits
                        </a>
                        <a href="<?= base_url('auth/logout') ?>" class="nav-link mt-4">
                            <i class="bi bi-box-arrow-right"></i> Logout
                        </a>
                    </nav>
                </div>
            </div>
            </div>

            <!-- Main Content -->
            <div class="col-md-9 col-lg-10 p-4">
                <div class="d-flex justify-content-between align-items-center mb-4">
                    <h2><i class="bi bi-clock-history"></i> Manage Posting Limits</h2>
                    <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addLimitModal">
                        <i class="bi bi-plus-circle"></i> Add New Limit
                    </button>
                </div>

                <div class="card">
                    <div class="card-body">
                        <table class="table table-hover">
                            <thead>
                                <tr>
                                    <th>Limit Type</th>
                                    <th>Subscription Tier</th>
                                    <th>Max Posts</th>
                                    <th>Charge per Extra Post (₹)</th>
                                    <th>Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                <?php foreach ($posting_limits as $limit): ?>
                                    <tr>
                                        <td><span class="badge bg-info"><?= ucfirst($limit['limit_type']) ?></span></td>
                                        <td><span class="badge bg-primary"><?= ucfirst($limit['subscription_tier']) ?></span></td>
                                        <td><?= $limit['max_posts'] ?></td>
                                        <td>₹<?= number_format($limit['charge_per_extra_post'], 2) ?></td>
                                        <td>
                                            <button class="btn btn-sm btn-warning" onclick="editLimit(<?= htmlspecialchars(json_encode($limit)) ?>)">
                                                <i class="bi bi-pencil"></i> Edit
                                            </button>
                                        </td>
                                    </tr>
                                <?php endforeach; ?>
                            </tbody>
                        </table>
                    </div>
                </div>

                <div class="alert alert-info mt-4">
                    <i class="bi bi-info-circle"></i> <strong>How it works:</strong><br>
                    - Daily limits reset every day at midnight<br>
                    - Weekly limits reset every Monday<br>
                    - Monthly limits reset on the 1st of each month<br>
                    - Sellers are charged for posts exceeding their tier's limit
                </div>
            </div>
        </div>
    </div>

    <!-- Edit Limit Modal -->
    <div class="modal fade" id="editLimitModal" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <form id="editLimitForm">
                    <div class="modal-header">
                        <h5 class="modal-title">Edit Posting Limit</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                    </div>
                    <div class="modal-body">
                        <input type="hidden" id="edit_limit_id" name="limit_id">
                        
                        <div class="mb-3">
                            <label class="form-label">Limit Type</label>
                            <input type="text" class="form-control" id="edit_limit_type" readonly>
                        </div>
                        
                        <div class="mb-3">
                            <label class="form-label">Subscription Tier</label>
                            <input type="text" class="form-control" id="edit_tier" readonly>
                        </div>
                        
                        <div class="mb-3">
                            <label class="form-label">Max Posts Allowed</label>
                            <input type="number" class="form-control" name="max_posts" id="edit_max_posts" required>
                        </div>
                        
                        <div class="mb-3">
                            <label class="form-label">Charge per Extra Post (₹)</label>
                            <input type="number" step="0.01" class="form-control" name="charge_per_extra_post" id="edit_charge" required>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn btn-primary">Update Limit</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- Add Limit Modal -->
    <div class="modal fade" id="addLimitModal" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <form id="addLimitForm">
                    <div class="modal-header">
                        <h5 class="modal-title">Add New Posting Limit</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                    </div>
                    <div class="modal-body">
                        <div class="mb-3">
                            <label class="form-label">Limit Type</label>
                            <select class="form-select" name="limit_type" required>
                                <option value="daily">Daily</option>
                                <option value="weekly">Weekly</option>
                                <option value="monthly">Monthly</option>
                            </select>
                        </div>
                        
                        <div class="mb-3">
                            <label class="form-label">Subscription Tier</label>
                            <select class="form-select" name="subscription_tier" required>
                                <option value="free">Free</option>
                                <option value="basic">Basic</option>
                                <option value="pro">Pro</option>
                                <option value="enterprise">Enterprise</option>
                            </select>
                        </div>
                        
                        <div class="mb-3">
                            <label class="form-label">Max Posts Allowed</label>
                            <input type="number" class="form-control" name="max_posts" required>
                        </div>
                        
                        <div class="mb-3">
                            <label class="form-label">Charge per Extra Post (₹)</label>
                            <input type="number" step="0.01" class="form-control" name="charge_per_extra_post" required>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn btn-primary">Add Limit</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        function editLimit(limit) {
            document.getElementById('edit_limit_id').value = limit.id;
            document.getElementById('edit_limit_type').value = limit.limit_type.toUpperCase();
            document.getElementById('edit_tier').value = limit.subscription_tier.toUpperCase();
            document.getElementById('edit_max_posts').value = limit.max_posts;
            document.getElementById('edit_charge').value = limit.charge_per_extra_post;
            
            new bootstrap.Modal(document.getElementById('editLimitModal')).show();
        }

        document.getElementById('editLimitForm').addEventListener('submit', function(e) {
            e.preventDefault();
            const formData = new FormData(this);
            const limitId = formData.get('limit_id');

            fetch('/superadmin/updatePostingLimit/' + limitId, {
                method: 'POST',
                body: formData
            })
            .then(res => res.json())
            .then(data => {
                if (data.success) {
                    alert('✅ ' + data.message);
                    location.reload();
                } else {
                    alert('❌ Failed to update limit');
                }
            })
            .catch(err => alert('Error updating limit'));
        });

        document.getElementById('addLimitForm').addEventListener('submit', function(e) {
            e.preventDefault();
            const formData = new FormData(this);

            fetch('/superadmin/addPostingLimit', {
                method: 'POST',
                body: formData
            })
            .then(res => res.json())
            .then(data => {
                if (data.success) {
                    alert('✅ ' + data.message);
                    location.reload();
                } else {
                    alert('❌ Failed to add limit');
                }
            })
            .catch(err => alert('Error adding limit'));
        });
    </script>
</body>
</html>
