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

<form action="?page=customers&action=bulk" method="POST" id="bulkForm">
    <!-- Filters and Bulk Actions -->
    <div class="row g-3 mb-4">
        <div class="col-lg-8">
            <div class="card border-0 shadow-sm" style="border-radius: 16px;">
                <div class="card-body p-3">
                    <div class="row g-3 align-items-center">
                        <div class="col-md-7">
                            <div class="input-group">
                                <span class="input-group-text bg-white border-end-0" style="border-radius: 10px 0 0 10px;"><i class="fas fa-search text-muted"></i></span>
                                <input type="text" name="search" class="form-control border-start-0" placeholder="<?= __('search_placeholder') ?>" value="<?= htmlspecialchars($_GET['search'] ?? '') ?>" style="border-radius: 0 10px 10px 0;">
                            </div>
                        </div>
                        <div class="col-md-3">
                            <select name="status" class="form-select" style="border-radius: 10px;">
                                <option value=""><?= __('all_status') ?></option>
                                <option value="active" <?= ($_GET['status'] ?? '') === 'active' ? 'selected' : '' ?>><?= __('active') ?></option>
                                <option value="blocked" <?= ($_GET['status'] ?? '') === 'blocked' ? 'selected' : '' ?>><?= __('blocked') ?></option>
                            </select>
                        </div>
                        <div class="col-md-2">
                            <button type="button" onclick="applyFilters()" class="btn btn-primary w-100" style="border-radius: 10px;"><?= __('filter') ?></button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-4">
            <div id="bulkActionBar" class="card border-0 shadow-sm bg-primary text-white d-none" style="border-radius: 16px;">
                <div class="card-body p-3 d-flex align-items-center justify-content-between">
                    <span class="small fw-bold"><span id="selectedCount">0</span> <?= __('selected') ?></span>
                    <div class="d-flex gap-2">
                        <select name="bulk_action" class="form-select form-select-sm border-0" style="width: auto; border-radius: 8px;">
                            <option value=""><?= __('actions') ?></option>
                            <option value="activate"><?= __('activate') ?></option>
                            <option value="block"><?= __('block') ?></option>
                        </select>
                        <button type="submit" class="btn btn-white btn-sm fw-bold px-3" style="border-radius: 8px; background: white; color: var(--primary);"><?= __('apply') ?></button>
                    </div>
                </div>
            </div>
        </div>
    </div>

<div class="table-container">
    <div class="table-responsive">
        <table class="table align-middle">
            <thead>
                <tr>
                    <th style="width: 40px;">
                        <input type="checkbox" class="form-check-input" id="selectAll">
                    </th>
                    <th><?= __('id') ?></th>
                    <th><?= __('name') ?></th>
                    <th><?= __('email') ?></th>
                    <th><?= __('phone') ?></th>
                    <th><?= __('status') ?></th>
                    <th><?= __('joined_date') ?></th>
                    <th class="text-end"><?= __('actions') ?></th>
                </tr>
            </thead>
            <tbody>
                <?php if (empty($customers)): ?>
                    <tr>
                        <td colspan="7" class="text-center py-5 text-muted"><?= __('no_data_found') ?></td>
                    </tr>
                <?php else: ?>
                    <?php foreach ($customers as $customer): ?>
                        <tr>
                            <td>
                                <input type="checkbox" name="ids[]" value="<?= $customer['id'] ?>" class="form-check-input row-checkbox">
                            </td>
                            <td class="text-secondary fw-semibold">#<?= htmlspecialchars($customer['id']) ?></td>
                            <td>
                                <div class="d-flex align-items-center gap-3">
                                    <?php if (!empty($customer['profile_image'])): ?>
                                        <img src="<?= htmlspecialchars($customer['profile_image']) ?>" class="rounded-circle" width="40" height="40" style="object-fit: cover;">
                                    <?php else: ?>
                                        <div style="width: 40px; height: 40px; border-radius: 50%; background: var(--bg-main); display: flex; align-items: center; justify-content: center; font-weight: bold; color: var(--text-secondary);">
                                            <?= strtoupper(substr($customer['full_name'], 0, 1)) ?>
                                        </div>
                                    <?php endif; ?>
                                    <span class="fw-bold text-dark"><?= htmlspecialchars($customer['full_name']) ?></span>
                                </div>
                            </td>
                            <td><?= htmlspecialchars($customer['email'] ?? 'N/A') ?></td>
                            <td dir="ltr" class="<?= isRTL() ? 'text-end' : '' ?>"><?= htmlspecialchars(($customer['phone_code'] ?? '') . ' ' . ($customer['phone'] ?? 'N/A')) ?></td>
                            <td>
                                <?php if ($customer['status'] === 'active'): ?>
                                    <span class="badge badge-success"><?= __('active') ?></span>
                                <?php elseif ($customer['status'] === 'blocked'): ?>
                                    <span class="badge badge-danger"><?= __('blocked') ?></span>
                                <?php else: ?>
                                    <span class="badge badge-secondary"><?= htmlspecialchars(ucfirst($customer['status'])) ?></span>
                                <?php endif; ?>
                            </td>
                            <td class="text-secondary"><?= date('M d, Y', strtotime($customer['created_at'])) ?></td>
                            <td class="text-end">
                                <button class="btn btn-light btn-sm text-primary me-2"><i class="fas fa-eye"></i></button>
                                <button class="btn btn-light btn-sm text-danger"><i class="fas fa-ban"></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=customers&p=<?= $page - 1 ?>&search=<?= urlencode($_GET['search'] ?? '') ?>&status=<?= urlencode($_GET['status'] ?? '') ?>" 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=customers&p=<?= $i ?>&search=<?= urlencode($_GET['search'] ?? '') ?>&status=<?= urlencode($_GET['status'] ?? '') ?>" 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=customers&p=<?= $page + 1 ?>&search=<?= urlencode($_GET['search'] ?? '') ?>&status=<?= urlencode($_GET['status'] ?? '') ?>" 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>

</div>
</form>

<script>
function applyFilters() {
    const search = document.querySelector('input[name="search"]').value;
    const status = document.querySelector('select[name="status"]').value;
    window.location.href = `?page=customers&search=${encodeURIComponent(search)}&status=${encodeURIComponent(status)}`;
}

document.getElementById('selectAll').addEventListener('change', function() {
    const checkboxes = document.querySelectorAll('.row-checkbox');
    checkboxes.forEach(cb => cb.checked = this.checked);
    toggleBulkActions();
});

document.querySelectorAll('.row-checkbox').forEach(cb => {
    cb.addEventListener('change', toggleBulkActions);
});

function toggleBulkActions() {
    const checked = document.querySelectorAll('.row-checkbox:checked').length;
    const bar = document.getElementById('bulkActionBar');
    const count = document.getElementById('selectedCount');
    
    if (checked > 0) {
        bar.classList.remove('d-none');
        count.innerText = checked;
    } else {
        bar.classList.add('d-none');
    }
}
</script>

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