<?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"><?= __('featured_content') ?? 'Featured Content' ?></h2>
</div>

<?php if (isset($_GET['success'])): ?>
    <div class="alert alert-success border-0 shadow-sm mb-4 alert-dismissible fade show" style="border-radius: 12px;" role="alert">
        <i class="fas fa-check-circle me-2"></i> <?= htmlspecialchars($_GET['success']) ?>
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>
<?php endif; ?>

<?php if (isset($_GET['error'])): ?>
    <div class="alert alert-danger border-0 shadow-sm mb-4 alert-dismissible fade show" style="border-radius: 12px;" role="alert">
        <i class="fas fa-exclamation-circle me-2"></i> <?= htmlspecialchars($_GET['error']) ?>
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>
<?php endif; ?>

<div class="row g-4">
    <!-- Featured Vendors Section -->
    <div class="col-lg-6">
        <div class="card border-0 shadow-sm h-100" style="border-radius: 16px;">
            <div class="card-header bg-white border-0 pt-4 px-4 d-flex justify-content-between align-items-center">
                <div>
                    <h5 class="fw-bold mb-1"><i class="fas fa-building text-primary me-2"></i>Featured Vendors</h5>
                    <p class="text-secondary small mb-0">Agencies shown on the customer home page</p>
                </div>
            </div>
            
            <div class="card-body p-4">
                <!-- Add Featured Vendor Form -->
                <form action="?page=featured&action=add_vendor" method="POST" class="mb-4 bg-light p-3 rounded-4">
                    <label class="form-label fw-semibold text-secondary small">Add Vendor to Featured</label>
                    <div class="input-group">
                        <select name="vendor_id" class="form-select border-0" required style="border-radius: 10px 0 0 10px;">
                            <option value="">Select an approved vendor...</option>
                            <?php foreach ($unfeaturedVendors as $uv): ?>
                                <option value="<?= $uv['id'] ?>"><?= htmlspecialchars($uv['agency_name']) ?> (#<?= $uv['id'] ?>)</option>
                            <?php endforeach; ?>
                        </select>
                        <button type="submit" class="btn btn-primary px-4 fw-bold" style="border-radius: 0 10px 10px 0;">Add</button>
                    </div>
                </form>

                <!-- Currently Featured Table -->
                <div class="table-responsive">
                    <table class="table align-middle table-hover">
                        <thead>
                            <tr class="text-secondary small">
                                <th>Vendor</th>
                                <th class="text-end">Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            <?php if (empty($featuredVendors)): ?>
                                <tr>
                                    <td colspan="2" class="text-center py-4 text-muted small">No featured vendors currently.</td>
                                </tr>
                            <?php else: ?>
                                <?php foreach ($featuredVendors as $vendor): ?>
                                    <tr>
                                        <td>
                                            <div class="d-flex align-items-center gap-3">
                                                <?php if (!empty($vendor['logo'])): ?>
                                                    <img src="<?= htmlspecialchars($vendor['logo']) ?>" class="rounded-circle shadow-sm" width="36" height="36" style="object-fit: cover;">
                                                <?php else: ?>
                                                    <div style="width: 36px; height: 36px; border-radius: 50%; background: var(--bg-main); display: flex; align-items: center; justify-content: center; font-weight: bold; color: var(--text-secondary); font-size: 14px;">
                                                        <?= strtoupper(substr($vendor['agency_name'], 0, 1)) ?>
                                                    </div>
                                                <?php endif; ?>
                                                <div>
                                                    <div class="fw-bold text-dark"><?= htmlspecialchars($vendor['agency_name']) ?></div>
                                                    <div class="text-secondary small">#<?= $vendor['id'] ?></div>
                                                </div>
                                            </div>
                                        </td>
                                        <td class="text-end">
                                            <a href="?page=featured&action=remove_vendor&id=<?= $vendor['id'] ?>" class="btn btn-light btn-sm text-danger rounded-pill px-3" onclick="return confirm('Remove this vendor from Featured?')">
                                                <i class="fas fa-trash-alt me-1"></i> Remove
                                            </a>
                                        </td>
                                    </tr>
                                <?php endforeach; ?>
                            <?php endif; ?>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <!-- Recommended Maids Section -->
    <div class="col-lg-6">
        <div class="card border-0 shadow-sm h-100" style="border-radius: 16px;">
            <div class="card-header bg-white border-0 pt-4 px-4 d-flex justify-content-between align-items-center">
                <div>
                    <h5 class="fw-bold mb-1"><i class="fas fa-user-check text-success me-2"></i>Recommended Maids</h5>
                    <p class="text-secondary small mb-0">Maids recommended on the customer home page</p>
                </div>
            </div>
            
            <div class="card-body p-4">
                <!-- Add Recommended Maid Form -->
                <form action="?page=featured&action=add_maid" method="POST" class="mb-4 bg-light p-3 rounded-4">
                    <label class="form-label fw-semibold text-secondary small">Add Maid to Recommended</label>
                    <div class="input-group">
                        <select name="maid_id" class="form-select border-0" required style="border-radius: 10px 0 0 10px;">
                            <option value="">Select a published maid...</option>
                            <?php foreach ($unrecommendedMaids as $um): ?>
                                <option value="<?= $um['id'] ?>"><?= htmlspecialchars($um['full_name']) ?> - <?= htmlspecialchars($um['agency_name']) ?> (#<?= $um['id'] ?>)</option>
                            <?php endforeach; ?>
                        </select>
                        <button type="submit" class="btn btn-success px-4 fw-bold" style="border-radius: 0 10px 10px 0; color: white;">Add</button>
                    </div>
                </form>

                <!-- Currently Recommended Table -->
                <div class="table-responsive">
                    <table class="table align-middle table-hover">
                        <thead>
                            <tr class="text-secondary small">
                                <th>Maid</th>
                                <th class="text-end">Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            <?php if (empty($recommendedMaids)): ?>
                                <tr>
                                    <td colspan="2" class="text-center py-4 text-muted small">No recommended maids currently.</td>
                                </tr>
                            <?php else: ?>
                                <?php foreach ($recommendedMaids as $maid): ?>
                                    <tr>
                                        <td>
                                            <div class="d-flex align-items-center gap-3">
                                                <?php if (!empty($maid['profile_image'])): ?>
                                                    <img src="<?= htmlspecialchars($maid['profile_image']) ?>" class="rounded-circle shadow-sm" width="36" height="36" style="object-fit: cover;">
                                                <?php else: ?>
                                                    <div style="width: 36px; height: 36px; border-radius: 50%; background: var(--bg-main); display: flex; align-items: center; justify-content: center; font-weight: bold; color: var(--text-secondary); font-size: 14px;">
                                                        <i class="fas fa-user text-secondary"></i>
                                                    </div>
                                                <?php endif; ?>
                                                <div>
                                                    <div class="fw-bold text-dark"><?= htmlspecialchars($maid['full_name']) ?></div>
                                                    <div class="text-secondary small"><?= htmlspecialchars($maid['agency_name']) ?> (#<?= $maid['id'] ?>)</div>
                                                </div>
                                            </div>
                                        </td>
                                        <td class="text-end">
                                            <a href="?page=featured&action=remove_maid&id=<?= $maid['id'] ?>" class="btn btn-light btn-sm text-danger rounded-pill px-3" onclick="return confirm('Remove this maid from Recommended?')">
                                                <i class="fas fa-trash-alt me-1"></i> Remove
                                            </a>
                                        </td>
                                    </tr>
                                <?php endforeach; ?>
                            <?php endif; ?>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

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