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

<div class="table-container">
    <div class="table-responsive">
        <table class="table align-middle">
            <thead>
                <tr>
                    <th><?= __('id') ?></th>
                    <th><?= __('vendor') ?></th>
                    <th>Promoted Maid</th>
                    <th>Package</th>
                    <th>Start Date</th>
                    <th>End Date</th>
                    <th><?= __('status') ?></th>
                    <th class="text-end"><?= __('actions') ?></th>
                </tr>
            </thead>
            <tbody>
                <?php if (empty($ads)): ?>
                    <tr>
                        <td colspan="8" class="text-center py-5 text-muted"><?= __('no_data_found') ?></td>
                    </tr>
                <?php else: ?>
                    <?php foreach ($ads as $ad): ?>
                        <tr>
                            <td class="text-secondary fw-semibold">#<?= htmlspecialchars($ad['id']) ?></td>
                            <td>
                                <span class="fw-bold text-dark">
                                    <i class="fas fa-building text-secondary" style="<?= isRTL() ? 'margin-left: 4px;' : 'margin-right: 4px;' ?>"></i> <?= htmlspecialchars($ad['agency_name'] ?? '') ?>
                                </span>
                            </td>
                            <td>
                                <span class="fw-bold text-dark">
                                    <i class="fas fa-user-nurse text-secondary" style="<?= isRTL() ? 'margin-left: 4px;' : 'margin-right: 4px;' ?>"></i> <?= htmlspecialchars($ad['maid_name'] ?? '') ?>
                                </span>
                            </td>
                            <td><span class="badge badge-light text-dark border fw-normal"><?= htmlspecialchars($ad['package_name'] ?? '') ?></span></td>
                            <td class="text-secondary"><?= date('M d, Y', strtotime($ad['start_date'])) ?></td>
                            <td class="text-secondary"><?= date('M d, Y', strtotime($ad['end_date'])) ?></td>
                            <td>
                                <?php if ($ad['status'] === 'active'): ?>
                                    <span class="badge badge-success"><?= __('active') ?></span>
                                <?php elseif ($ad['status'] === 'expired'): ?>
                                    <span class="badge badge-danger">Expired</span>
                                <?php elseif ($ad['status'] === 'rejected'): ?>
                                    <span class="badge badge-danger"><?= __('rejected') ?></span>
                                <?php else: ?>
                                    <span class="badge badge-warning"><?= htmlspecialchars(ucfirst($ad['status'])) ?></span>
                                <?php endif; ?>
                            </td>
                            <td class="text-end">
                                <button class="btn btn-light btn-sm text-primary me-1 view-ad-btn" 
                                        data-id="<?= htmlspecialchars($ad['id']) ?>"
                                        data-vendor="<?= htmlspecialchars($ad['agency_name'] ?? '') ?>"
                                        data-maid="<?= htmlspecialchars($ad['maid_name'] ?? '') ?>"
                                        data-package="<?= htmlspecialchars($ad['package_name'] ?? 'N/A') ?>"
                                        data-start="<?= date('M d, Y', strtotime($ad['start_date'])) ?>"
                                        data-end="<?= date('M d, Y', strtotime($ad['end_date'])) ?>"
                                        data-status="<?= htmlspecialchars($ad['status']) ?>"
                                        data-created="<?= date('M d, Y', strtotime($ad['created_at'])) ?>"
                                        title="View Details">
                                    <i class="fas fa-eye"></i>
                                </button>
                                <button class="btn btn-light btn-sm text-success me-1"><i class="fas fa-check"></i></button>
                                <button class="btn btn-light btn-sm text-danger"><i class="fas fa-times"></i></button>
                            </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=vendor_ads&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=vendor_ads&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=vendor_ads&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>

<!-- Ad Details Modal -->
<div class="modal fade" id="adDetailsModal" tabindex="-1" aria-labelledby="adDetailsModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content border-0 shadow-lg rounded-4 overflow-hidden" style="background: rgba(255, 255, 255, 0.98); backdrop-filter: blur(10px);">
            <!-- Modal Header with premium theme -->
            <div class="modal-header bg-primary text-white border-0 py-3">
                <h5 class="modal-title fw-bold" id="adDetailsModalLabel">
                    <i class="fas fa-bullhorn me-2"></i> Advertisement Details
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <!-- Modal Body -->
            <div class="modal-body p-4">
                <div class="d-flex flex-column gap-3">
                    
                    <!-- Ad ID and Status -->
                    <div class="d-flex justify-content-between align-items-center pb-2 border-bottom">
                        <div>
                            <span class="text-secondary small">Advertisement ID</span>
                            <h5 class="fw-bold mb-0 text-dark" id="modal-ad-id">#0</h5>
                        </div>
                        <div>
                            <span class="text-secondary small d-block text-end">Status</span>
                            <span class="badge rounded-pill px-3 py-2 fw-semibold fs-7" id="modal-ad-status">Active</span>
                        </div>
                    </div>
                    
                    <!-- Vendor Info -->
                    <div class="d-flex align-items-center p-3 rounded-3 bg-light bg-opacity-50">
                        <div class="bg-primary bg-opacity-10 text-primary rounded-circle d-flex align-items-center justify-content-center" style="width: 42px; height: 42px;">
                            <i class="fas fa-building fs-5"></i>
                        </div>
                        <div class="ms-3">
                            <span class="text-secondary small">Agency / Vendor</span>
                            <h6 class="fw-bold mb-0 text-dark" id="modal-ad-vendor">Vendor Name</h6>
                        </div>
                    </div>

                    <!-- Maid Info -->
                    <div class="d-flex align-items-center p-3 rounded-3 bg-light bg-opacity-50">
                        <div class="bg-success bg-opacity-10 text-success rounded-circle d-flex align-items-center justify-content-center" style="width: 42px; height: 42px;">
                            <i class="fas fa-user-nurse fs-5"></i>
                        </div>
                        <div class="ms-3">
                            <span class="text-secondary small">Promoted Maid</span>
                            <h6 class="fw-bold mb-0 text-dark" id="modal-ad-maid">Maid Name</h6>
                        </div>
                    </div>

                    <!-- Package Info -->
                    <div class="d-flex align-items-center p-3 rounded-3 bg-light bg-opacity-50">
                        <div class="bg-info bg-opacity-10 text-info rounded-circle d-flex align-items-center justify-content-center" style="width: 42px; height: 42px;">
                            <i class="fas fa-box fs-5"></i>
                        </div>
                        <div class="ms-3">
                            <span class="text-secondary small">Ad Package</span>
                            <h6 class="fw-bold mb-0 text-dark" id="modal-ad-package">Package Name</h6>
                        </div>
                    </div>

                    <!-- Start & End Date -->
                    <div class="row g-3">
                        <div class="col-6">
                            <div class="p-3 rounded-3 bg-light bg-opacity-50">
                                <span class="text-secondary small d-block mb-1"><i class="far fa-calendar-alt text-primary me-1"></i> Start Date</span>
                                <span class="fw-bold text-dark" id="modal-ad-start">Nov 15, 2024</span>
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="p-3 rounded-3 bg-light bg-opacity-50">
                                <span class="text-secondary small d-block mb-1"><i class="far fa-calendar-times text-danger me-1"></i> End Date</span>
                                <span class="fw-bold text-dark" id="modal-ad-end">Dec 15, 2024</span>
                            </div>
                        </div>
                    </div>

                    <!-- Creation Date -->
                    <div class="text-center pt-2">
                        <span class="text-secondary small">Created on <span class="fw-semibold text-dark" id="modal-ad-created">Nov 15, 2024</span></span>
                    </div>

                </div>
            </div>
            <!-- Modal Footer -->
            <div class="modal-footer border-0 bg-light bg-opacity-25 py-3">
                <button type="button" class="btn btn-secondary rounded-pill px-4 shadow-sm" data-bs-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const viewButtons = document.querySelectorAll('.view-ad-btn');
    const modal = new bootstrap.Modal(document.getElementById('adDetailsModal'));
    
    viewButtons.forEach(btn => {
        btn.addEventListener('click', function() {
            // Read data attributes
            const id = this.getAttribute('data-id');
            const vendor = this.getAttribute('data-vendor');
            const maid = this.getAttribute('data-maid');
            const package_name = this.getAttribute('data-package');
            const start = this.getAttribute('data-start');
            const end = this.getAttribute('data-end');
            const status = this.getAttribute('data-status');
            const created = this.getAttribute('data-created');
            
            // Populate Modal
            document.getElementById('modal-ad-id').textContent = '#' + id;
            document.getElementById('modal-ad-vendor').textContent = vendor || 'N/A';
            document.getElementById('modal-ad-maid').textContent = maid || 'N/A';
            document.getElementById('modal-ad-package').textContent = package_name || 'N/A';
            document.getElementById('modal-ad-start').textContent = start;
            document.getElementById('modal-ad-end').textContent = end;
            document.getElementById('modal-ad-created').textContent = created;
            
            // Status styling
            const statusBadge = document.getElementById('modal-ad-status');
            statusBadge.textContent = status.charAt(0).toUpperCase() + status.slice(1);
            
            // Clear old badge classes
            statusBadge.className = 'badge rounded-pill px-3 py-2 fw-semibold fs-7';
            if (status === 'active') {
                statusBadge.classList.add('bg-success', 'text-white');
            } else if (status === 'expired' || status === 'rejected') {
                statusBadge.classList.add('bg-danger', 'text-white');
            } else {
                statusBadge.classList.add('bg-warning', 'text-dark');
            }
            
            // Show modal
            modal.show();
        });
    });
});
</script>

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