<?php
require_once 'includes/db.php';
require_once 'includes/functions.php';

$pageTitle = 'Jobs By City';

$letter = isset($_GET['letter']) ? strtoupper($_GET['letter']) : '';

$where = "";
$params = [];

if (!empty($letter) && strlen($letter) === 1 && ctype_alpha($letter)) {
    $where = "WHERE UPPER(LEFT(name, 1)) = ?";
    $params[] = $letter;
}

$stmt = $pdo->prepare("
    SELECT l.*, 
           (SELECT COUNT(*) FROM jobs j WHERE j.location_id = l.id AND j.status = 'approved') as job_count
    FROM locations l 
    $where 
    ORDER BY l.name ASC
");
$stmt->execute($params);
$cities = $stmt->fetchAll();

$alphabetStmt = $pdo->query("SELECT DISTINCT UPPER(LEFT(name, 1)) as letter FROM locations ORDER BY letter");
$availableLetters = $alphabetStmt->fetchAll(PDO::FETCH_COLUMN);

require_once 'includes/header.php';
?>

<div class="cities-page">
    <div class="container">
        <div class="cities-header">
            <h1>Jobs By City</h1>
            <p>Explore job opportunities in your preferred location</p>
        </div>

        <div class="alphabet-filter">
            <a href="cities.php" class="alphabet-btn <?php echo empty($letter) ? 'active' : ''; ?>">ALL</a>
            <?php
            $alphabet = range('A', 'Z');
            foreach ($alphabet as $char):
                $isAvailable = in_array($char, $availableLetters);
                $isActive = $letter === $char;
            ?>
                <?php if ($isAvailable): ?>
                    <a href="cities.php?letter=<?php echo $char; ?>" 
                       class="alphabet-btn <?php echo $isActive ? 'active' : ''; ?>">
                        <?php echo $char; ?>
                    </a>
                <?php else: ?>
                    <span class="alphabet-btn disabled"><?php echo $char; ?></span>
                <?php endif; ?>
            <?php endforeach; ?>
        </div>

        <div class="cities-count">
            <i class="fas fa-map-marker-alt"></i>
            <span><?php echo count($cities); ?> cit<?php echo count($cities) !== 1 ? 'ies' : 'y'; ?> found</span>
            <?php if (!empty($letter)): ?>
                <span class="filter-label">starting with "<?php echo $letter; ?>"</span>
            <?php endif; ?>
        </div>

        <div class="cities-grid">
            <?php if (empty($cities)): ?>
                <div class="no-results">
                    <i class="fas fa-search"></i>
                    <h3>No cities found</h3>
                    <p>No cities starting with "<?php echo sanitize($letter); ?>" were found.</p>
                    <a href="cities.php" class="btn btn-primary">View All Cities</a>
                </div>
            <?php else: ?>
                <?php foreach ($cities as $city): ?>
                    <a href="jobs.php?location=<?php echo $city['id']; ?>" class="city-card">
                        <div class="city-icon">
                            <?php if (strtolower($city['name']) === 'remote'): ?>
                                <i class="fas fa-globe"></i>
                            <?php else: ?>
                                <i class="fas fa-city"></i>
                            <?php endif; ?>
                        </div>
                        <div class="city-info">
                            <h3><?php echo sanitize($city['name']); ?></h3>
                            <?php if (!empty($city['country'])): ?>
                                <span class="city-country"><?php echo sanitize($city['country']); ?></span>
                            <?php endif; ?>
                            <span class="city-jobs">
                                <?php if ($city['job_count'] > 0): ?>
                                    <span class="job-count-badge"><?php echo number_format($city['job_count']); ?></span> Job<?php echo $city['job_count'] !== 1 ? 's' : ''; ?> Available
                                <?php else: ?>
                                    Jobs Available
                                <?php endif; ?>
                            </span>
                        </div>
                        <div class="city-arrow">
                            <i class="fas fa-chevron-right"></i>
                        </div>
                    </a>
                <?php endforeach; ?>
            <?php endif; ?>
        </div>
    </div>
</div>

<?php require_once 'includes/footer.php'; ?>
