<?php
$zoneId = (int) $zone['id'];
?>


<div class="flex items-center gap-2 mb-5 text-sm">
    <a href="/admin/ads?tab=<?= htmlspecialchars($zone['page'] ?? 'all') ?>" class="text-gray-400 hover:text-primary-600 no-underline transition-colors">Advertising</a>
    <svg class="w-3.5 h-3.5 text-gray-300" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 18l6-6-6-6"/></svg>
    <span class="text-gray-700 font-medium"><?= htmlspecialchars($zone['name']) ?></span>
</div>


<div class="flex items-center justify-between mb-4">
    <p class="text-sm text-gray-500"><?= htmlspecialchars($zone['description'] ?? '') ?></p>
    <a href="/admin/ads/zone/<?= $zoneId ?>/spot/new" class="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium text-primary-600 bg-primary-50 rounded-lg hover:bg-primary-100 transition-colors no-underline shrink-0">
        <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15"/></svg>
        New Ad Spot
    </a>
</div>


<?php if (empty($spots)): ?>
<div class="bg-white rounded-lg shadow-sm border border-gray-200 p-8 text-center">
    <p class="text-sm text-gray-500 mb-2">No ad spots in this zone yet.</p>
    <p class="text-xs text-gray-400">Click "New Ad Spot" to start displaying ads in this area of your site.</p>
</div>
<?php else: ?>
<div class="space-y-3">
    <?php foreach ($spots as $spot):
        $typeColors = ['code' => 'bg-purple-100 text-purple-700', 'image' => 'bg-blue-100 text-blue-700', 'vast' => 'bg-orange-100 text-orange-700'];
        $typeLabels = ['code' => 'HTML/JS', 'image' => 'Image', 'vast' => 'VAST'];
        $deviceLabels = ['all' => 'All devices', 'desktop' => 'Desktop', 'mobile' => 'Mobile'];
        $hasSchedule = $spot['start_date'] || $spot['end_date'] || $spot['start_time'] || $spot['end_time'];
    ?>
    <div class="bg-white rounded-lg shadow-sm border border-gray-200 hover:border-gray-300 transition-colors">
        <div class="px-4 py-3 flex items-center gap-3">
            <label class="relative inline-flex items-center cursor-pointer shrink-0">
                <input type="checkbox" class="sr-only peer" <?= $spot['is_active'] ? 'checked' : '' ?>
                       onchange="fetch('/admin/ads/spot/<?= (int)$spot['id'] ?>/toggle',{method:'POST',headers:{'Content-Type':'application/json','X-CSRF-TOKEN':document.querySelector('meta[name=csrf-token]').content},credentials:'same-origin'})">
                <div class="w-9 h-5 bg-gray-200 peer-focus:ring-2 peer-focus:ring-primary-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all peer-checked:bg-primary-600"></div>
            </label>
            <a href="/admin/ads/zone/<?= $zoneId ?>/spot/<?= (int)$spot['id'] ?>/edit" class="flex-1 min-w-0 no-underline group">
                <div class="flex items-center gap-2 flex-wrap">
                    <span class="text-sm font-semibold text-gray-900 group-hover:text-primary-600 transition-colors"><?= htmlspecialchars($spot['name'] ?: 'Untitled') ?></span>
                    <span class="inline-flex items-center px-2 py-0.5 rounded-full text-[10px] font-medium <?= $typeColors[$spot['ad_type']] ?? '' ?>"><?= $typeLabels[$spot['ad_type']] ?? $spot['ad_type'] ?></span>
                    <span class="text-[10px] text-gray-400"><?= $deviceLabels[$spot['device']] ?? '' ?></span>
                </div>
                <div class="flex items-center gap-3 mt-1 text-[11px] text-gray-400">
                    <span><?= number_format((int)$spot['impressions']) ?> impressions</span>
                    <span><?= number_format((int)$spot['clicks']) ?> clicks</span>
                    <?php if ((int)$spot['impressions'] > 0): ?>
                    <span>CTR <?= round(((int)$spot['clicks'] / (int)$spot['impressions']) * 100, 2) ?>%</span>
                    <?php endif; ?>
                    <?php if ($hasSchedule): ?>
                    <span class="text-gray-300">|</span>
                    <span>
                        <?= $spot['start_date'] ?: '...' ?><?php if ($spot['start_time']): ?> <?= substr($spot['start_time'], 0, 5) ?><?php endif; ?>
                        &rarr;
                        <?= $spot['end_date'] ?: '...' ?><?php if ($spot['end_time']): ?> <?= substr($spot['end_time'], 0, 5) ?><?php endif; ?>
                    </span>
                    <?php endif; ?>
                </div>
            </a>
            <div class="flex items-center gap-1 shrink-0">
                <a href="/admin/ads/zone/<?= $zoneId ?>/spot/<?= (int)$spot['id'] ?>/edit" class="p-1.5 text-gray-400 hover:text-primary-600 transition-colors rounded-lg hover:bg-gray-100 no-underline" title="Edit">
                    <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>
                </a>
                <button type="button" onclick="deleteSpot(<?= (int)$spot['id'] ?>)" class="p-1.5 text-gray-400 hover:text-red-600 transition-colors rounded-lg hover:bg-red-50" title="Delete">
                    <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></svg>
                </button>
            </div>
        </div>
    </div>
    <?php endforeach; ?>
</div>
<?php endif; ?>

<script>
function deleteSpot(id) {
    if (!confirm('Delete this ad spot?')) return;
    fetch('/admin/ads/spot/' + id + '/delete', {
        method: 'POST',
        headers: {'Content-Type': 'application/json', 'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content},
        credentials: 'same-origin'
    }).then(function(r) { return r.json(); }).then(function() { window.location.reload(); });
}
</script>
