<?php
$ic = 'w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-primary-500 focus:border-primary-500 outline-none';
$zoneId = (int) $zone['id'];
$isEdit = !empty($spot);
$isWatchZone = ($zone['page'] ?? '') === 'watch';
$tz = Setting::get('timezone', 'UTC') ?: 'UTC';

 
$spotName = $spot['name'] ?? '';
 
 
$adType = $spot['ad_type'] ?? (($zone['slug'] ?? '') === 'in_player' ? 'vast' : (in_array($zone['slug'] ?? '', ['popup', 'player_popunder'], true) ? 'code' : 'image'));
$adCode = $spot['ad_code'] ?? '';
$imageUrl = $spot['image_url'] ?? '';
$clickUrl = $spot['click_url'] ?? '';
$headline = $spot['headline'] ?? '';
$vastUrl = $spot['vast_url'] ?? '';
$device = $spot['device'] ?? 'all';
$geoVal = $spot['geo'] ?? '';
$startDate = $spot['start_date'] ?? '';
$startTime = $spot['start_time'] ?? '';
$endDate = $spot['end_date'] ?? '';
$endTime = $spot['end_time'] ?? '';
$isActive = $isEdit ? (bool) $spot['is_active'] : true;
$isHouse = $isEdit ? (bool) ($spot['is_house'] ?? 0) : false;
$weight = $isEdit ? (int) ($spot['weight'] ?? 5) : 5;
$playerPosition = $spot['player_position'] ?? 'preroll';
$midrollAt = (int) ($spot['midroll_at'] ?? 50);
$skipAfter = (int) ($spot['skip_after'] ?? 5);

 
$isMobileOnly = ($zone['slug'] ?? '') === 'mobile_sticky';
$isInPlayer = ($zone['slug'] ?? '') === 'in_player';
$isCodeOnly = in_array($zone['slug'] ?? '', ['popup', 'player_popunder'], true);
$isPlayerOverlay = false;  
$zi = class_exists('Ads') ? Ads::zoneInfo($zone['slug'] ?? '') : ['format' => '', 'size' => '', 'label' => '', 'image' => true];
?>


<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>
    <a href="/admin/ads/zone/<?= $zoneId ?>" class="text-gray-400 hover:text-primary-600 no-underline transition-colors"><?= htmlspecialchars($zone['name']) ?></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"><?= $isEdit ? 'Edit' : 'New Ad Spot' ?></span>
</div>

<form method="POST" action="/admin/ads/spot/save" enctype="multipart/form-data">
    <?= Router::csrfField() ?>
    <input type="hidden" name="zone_id" value="<?= $zoneId ?>">
    <input type="hidden" name="spot_id" value="<?= $isEdit ? (int) $spot['id'] : 0 ?>">

    
    <div class="flex items-start gap-3 mb-5 px-4 py-3.5 rounded-xl bg-primary-50 border border-primary-100">
        <svg class="w-5 h-5 text-primary-500 shrink-0 mt-0.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg>
        <div class="text-xs text-gray-600 leading-relaxed min-w-0">
            <span class="font-semibold text-gray-800">Where it shows:</span> <?= htmlspecialchars($zone['name']) ?><?php if (!empty($zone['description'])): ?> &mdash; <?= htmlspecialchars($zone['description']) ?><?php endif; ?>
            <?php if (!empty($zi['image']) && ($zi['size'] ?? '') !== '' && $zi['size'] !== '—'): ?>
            <div class="mt-2 flex flex-wrap items-center gap-2">
                <span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-lg bg-white border border-primary-200 text-primary-700 font-semibold text-[11px]">
                    <svg class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M3 9h18M9 3v18"/></svg>
                    Recommended image size: <?= htmlspecialchars($zi['size']) ?> px
                </span>
                <span class="text-gray-400"><?= htmlspecialchars($zi['label']) ?></span>
            </div>
            <p class="mt-1 text-[11px] text-gray-400">Other sizes still work &mdash; the banner scales to fit. This is just what looks best here.</p>
            <?php endif; ?>
        </div>
    </div>

    
    <div class="bg-white rounded-lg shadow-sm border border-gray-200 mb-5">
        <div class="px-5 py-3 border-b border-gray-200">
            <h3 class="text-sm font-semibold text-gray-900">Name</h3>
        </div>
        <div class="p-5">
            <input type="text" name="spot_name" value="<?= htmlspecialchars($spotName) ?>"
                   placeholder="Give this ad a name so you can recognize it later (e.g. ExoClick Banner 728x90)"
                   class="<?= $ic ?>">
            <p class="mt-1.5 text-[11px] text-gray-400">For your reference only. Visitors never see this name.</p>
        </div>
    </div>

    <?php if ($isInPlayer): ?>
    
    <div class="bg-white rounded-lg shadow-sm border border-gray-200 mb-5">
        <div class="px-5 py-3 border-b border-gray-200">
            <h3 class="text-sm font-semibold text-gray-900">When should this ad play?</h3>
            <p class="text-xs text-gray-400 mt-0.5">Choose when the ad appears relative to the video content.</p>
        </div>
        <div class="p-5 space-y-4">
            <div class="grid grid-cols-2 lg:grid-cols-4 gap-3">
                <label class="ad-type-card relative flex flex-col items-center p-4 border-2 rounded-xl cursor-pointer transition-all hover:border-primary-300">
                    <input type="radio" name="player_position" value="preroll" class="sr-only" <?= $playerPosition === 'preroll' ? 'checked' : '' ?> onchange="updatePlayerFields()">
                    <svg class="w-6 h-6 mb-1.5 text-orange-500" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="5 3 19 12 5 21 5 3"/><line x1="1" y1="3" x2="1" y2="21" stroke-width="3"/></svg>
                    <span class="text-xs font-semibold text-gray-800">Pre-roll</span>
                    <span class="text-[10px] text-gray-400 mt-0.5 text-center">Before the video starts</span>
                </label>
                <label class="ad-type-card relative flex flex-col items-center p-4 border-2 rounded-xl cursor-pointer transition-all hover:border-primary-300">
                    <input type="radio" name="player_position" value="midroll" class="sr-only" <?= $playerPosition === 'midroll' ? 'checked' : '' ?> onchange="updatePlayerFields()">
                    <svg class="w-6 h-6 mb-1.5 text-blue-500" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="6" width="20" height="12" rx="2"/><line x1="12" y1="6" x2="12" y2="18" stroke-dasharray="2 2"/><polygon points="10 10 14 12 10 14" fill="currentColor" stroke="none"/></svg>
                    <span class="text-xs font-semibold text-gray-800">Mid-roll</span>
                    <span class="text-[10px] text-gray-400 mt-0.5 text-center">During the video</span>
                </label>
                <label class="ad-type-card relative flex flex-col items-center p-4 border-2 rounded-xl cursor-pointer transition-all hover:border-primary-300">
                    <input type="radio" name="player_position" value="postroll" class="sr-only" <?= $playerPosition === 'postroll' ? 'checked' : '' ?> onchange="updatePlayerFields()">
                    <svg class="w-6 h-6 mb-1.5 text-green-500" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="5 3 19 12 5 21 5 3"/><line x1="23" y1="3" x2="23" y2="21" stroke-width="3"/></svg>
                    <span class="text-xs font-semibold text-gray-800">Post-roll</span>
                    <span class="text-[10px] text-gray-400 mt-0.5 text-center">After the video ends</span>
                </label>
                <label class="ad-type-card relative flex flex-col items-center p-4 border-2 rounded-xl cursor-pointer transition-all hover:border-primary-300">
                    <input type="radio" name="player_position" value="overlay" class="sr-only" <?= $playerPosition === 'overlay' ? 'checked' : '' ?> onchange="updatePlayerFields()">
                    <svg class="w-6 h-6 mb-1.5 text-purple-500" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="3" width="20" height="14" rx="2"/><rect x="4" y="12" width="16" height="4" rx="1" fill="currentColor" opacity="0.2"/></svg>
                    <span class="text-xs font-semibold text-gray-800">Overlay</span>
                    <span class="text-[10px] text-gray-400 mt-0.5 text-center">Banner over the video</span>
                </label>
            </div>

            
            <div id="midrollConfig" class="<?= $playerPosition !== 'midroll' ? 'hidden' : '' ?> bg-gray-50 rounded-lg p-4">
                <label class="block text-sm font-medium text-gray-700 mb-2">Show ad at</label>
                <div class="flex items-center gap-3">
                    <input type="range" name="midroll_at" id="midrollRange" value="<?= $midrollAt ?>" min="5" max="95" step="5"
                           class="flex-1 h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer accent-blue-600"
                           oninput="document.getElementById('midrollValue').textContent=this.value">
                    <span class="text-sm font-bold text-blue-600 min-w-[3ch] text-right" id="midrollValue"><?= $midrollAt ?></span>
                    <span class="text-sm text-gray-500">% of the video</span>
                </div>
                <p class="mt-2 text-[11px] text-gray-400">The ad will be triggered when the viewer reaches this point in the video. Example: 50% = halfway through.</p>
            </div>

            
            <div id="skipConfig" class="<?= $playerPosition === 'overlay' ? 'hidden' : '' ?>">
                <label class="block text-sm font-medium text-gray-700 mb-1">Skip button</label>
                <select name="skip_after" class="<?= $ic ?> max-w-[200px]">
                    <option value="255" <?= $skipAfter === 255 ? 'selected' : '' ?>>Disabled (managed by ad network)</option>
                    <option value="0" <?= $skipAfter === 0 ? 'selected' : '' ?>>Not skippable</option>
                    <?php foreach ([3, 5, 7, 10, 15, 20, 30] as $s): ?>
                    <option value="<?= $s ?>" <?= $skipAfter === $s ? 'selected' : '' ?>>Skippable after <?= $s ?>s</option>
                    <?php endforeach; ?>
                </select>
                <p class="mt-1.5 text-[11px] text-gray-400">Choose "Disabled" if your ad network already handles the skip button. Otherwise, set how many seconds the viewer must watch before they can skip.</p>
            </div>
        </div>
    </div>

    
    <div class="bg-white rounded-lg shadow-sm border border-gray-200 mb-5">
        <div class="px-5 py-3 border-b border-gray-200">
            <h3 class="text-sm font-semibold text-gray-900">Ad Content</h3>
            <p class="text-xs text-gray-400 mt-0.5">Paste your VAST tag or ad network code.</p>
        </div>
        <div class="p-5 space-y-4">
            <div class="grid grid-cols-2 gap-3">
                <label class="ad-type-card relative flex flex-col items-center p-4 border-2 rounded-xl cursor-pointer transition-all hover:border-primary-300">
                    <input type="radio" name="ad_type" value="vast" class="sr-only" <?= $adType === 'vast' ? 'checked' : '' ?> onchange="updateTypeFields()">
                    <svg class="w-6 h-6 mb-1.5 text-orange-500" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="5 3 19 12 5 21 5 3"/></svg>
                    <span class="text-xs font-semibold text-gray-800">VAST Tag</span>
                    <span class="text-[10px] text-gray-400 mt-0.5 text-center">Standard video ad format</span>
                </label>
                <label class="ad-type-card relative flex flex-col items-center p-4 border-2 rounded-xl cursor-pointer transition-all hover:border-primary-300">
                    <input type="radio" name="ad_type" value="code" class="sr-only" <?= $adType === 'code' ? 'checked' : '' ?> onchange="updateTypeFields()">
                    <svg class="w-6 h-6 mb-1.5 text-purple-500" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/></svg>
                    <span class="text-xs font-semibold text-gray-800">HTML / JS Code</span>
                    <span class="text-[10px] text-gray-400 mt-0.5 text-center">Custom ad network script</span>
                </label>
            </div>

            <div id="fieldsVast" class="<?= $adType !== 'vast' ? 'hidden' : '' ?>">
                <label class="block text-sm font-medium text-gray-700 mb-1">VAST Tag URL</label>
                <input type="text" name="vast_url" value="<?= htmlspecialchars($vastUrl) ?>" placeholder="https://vast.adnetwork.com/tag?id=..." class="<?= $ic ?>">
                <p class="mt-1.5 text-[11px] text-gray-400">A VAST tag URL from your video ad network. Supports VAST 2.0, 3.0, and 4.0.</p>
            </div>
            <div id="fieldsCode" class="<?= $adType !== 'code' ? 'hidden' : '' ?>">
                <label class="block text-sm font-medium text-gray-700 mb-1">Ad Code</label>
                <textarea name="ad_code" rows="5" placeholder="Paste your ad network code here..." class="<?= $ic ?> font-mono text-xs"><?= htmlspecialchars($adCode) ?></textarea>
                <p class="mt-1.5 text-[11px] text-gray-400">Custom HTML/JS code for the in-player ad.</p>
            </div>
            <div id="fieldsImage" class="hidden"></div>
        </div>
    </div>

    <?php else: ?>
    
    <div class="bg-white rounded-lg shadow-sm border border-gray-200 mb-5">
        <div class="px-5 py-3 border-b border-gray-200">
            <h3 class="text-sm font-semibold text-gray-900"><?= $isCodeOnly ? 'Popunder' : 'Ad Content' ?></h3>
            <p class="text-xs text-gray-400 mt-0.5"><?= $isCodeOnly ? 'Choose what opens, when it starts, and how often it may open.' : 'Choose the type of ad and paste your content.' ?></p>
        </div>
        <div class="p-5 space-y-4">
            <?php if ($isCodeOnly): ?>
            <?php include __DIR__ . '/_ads_popunder_fields.php'; ?>
            <?php else: ?>
            <div class="grid grid-cols-2 gap-3">
                <label class="ad-type-card relative flex flex-col items-center p-4 border-2 rounded-xl cursor-pointer transition-all hover:border-primary-300">
                    <input type="radio" name="ad_type" value="code" class="sr-only" <?= $adType === 'code' ? 'checked' : '' ?> onchange="updateTypeFields()">
                    <svg class="w-6 h-6 mb-1.5 text-purple-500" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/></svg>
                    <span class="text-xs font-semibold text-gray-800">HTML / JS Code</span>
                    <span class="text-[10px] text-gray-400 mt-0.5 text-center">Paste code from your ad network</span>
                </label>
                <label class="ad-type-card relative flex flex-col items-center p-4 border-2 rounded-xl cursor-pointer transition-all hover:border-primary-300">
                    <input type="radio" name="ad_type" value="image" class="sr-only" <?= $adType === 'image' ? 'checked' : '' ?> onchange="updateTypeFields()">
                    <svg class="w-6 h-6 mb-1.5 text-blue-500" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/></svg>
                    <span class="text-xs font-semibold text-gray-800">Image Banner</span>
                    <span class="text-[10px] text-gray-400 mt-0.5 text-center">Upload an image with a click link</span>
                </label>
            </div>

            <div id="fieldsCode" class="<?= $adType !== 'code' ? 'hidden' : '' ?>">
                <label class="block text-sm font-medium text-gray-700 mb-1">Ad Code</label>
                <textarea name="ad_code" rows="6" placeholder="Paste the code from your ad network here.&#10;&#10;Example:&#10;<script src=&quot;https://ads.exoclick.com/ads.js&quot;></script>&#10;<ins class=&quot;eas6a97888e&quot; data-zoneid=&quot;12345&quot;></ins>" class="<?= $ic ?> font-mono text-xs"><?= htmlspecialchars($adCode) ?></textarea>
                <p class="mt-1.5 text-[11px] text-gray-400">
                    Compatible with all ad networks: ExoClick, JuicyAds, TrafficStars, TrafficJunky, ClickAdilla, etc.
                </p>
            </div>
            <div id="fieldsImage" class="<?= $adType !== 'image' ? 'hidden' : '' ?> space-y-4">
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Banner image<?php if (!empty($zi['image']) && ($zi['size'] ?? '') !== '' && $zi['size'] !== '—'): ?> <span class="font-normal text-gray-400">&middot; recommended <?= htmlspecialchars($zi['size']) ?> px</span><?php endif; ?></label>
                    <input type="file" name="image_file" accept="image/*" class="text-sm text-gray-500 file:mr-3 file:py-1.5 file:px-3 file:rounded-lg file:border file:border-gray-300 file:text-xs file:font-medium file:bg-gray-50 file:text-gray-700 hover:file:bg-gray-100">
                    <?php if ($imageUrl): ?>
                    <div class="mt-2"><img src="<?= htmlspecialchars($imageUrl) ?>" alt="" class="max-h-24 rounded border border-gray-200"></div>
                    <?php endif; ?>
                    <p class="mt-1.5 text-[11px] text-gray-400">Upload an image or enter an external URL below.</p>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Or image URL</label>
                    <input type="text" name="image_url" value="<?= htmlspecialchars($imageUrl) ?>" placeholder="https://cdn.example.com/banner.jpg" class="<?= $ic ?>">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Click URL</label>
                    <input type="text" name="click_url" value="<?= htmlspecialchars($clickUrl) ?>" placeholder="https://advertiser.com/landing-page" class="<?= $ic ?>">
                    <p class="mt-1 text-[11px] text-gray-400">The page visitors will be taken to when they click the banner.</p>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Headline <span class="font-normal text-gray-400">&middot; in-feed / native ads only</span></label>
                    <input type="text" name="headline" value="<?= htmlspecialchars($headline) ?>" placeholder="e.g. Play &amp; Win in Crypto" maxlength="120" class="<?= $ic ?>">
                    <p class="mt-1 text-[11px] text-gray-400">Public text shown under the thumbnail on in-feed/native placements. The internal name above is never shown to visitors.</p>
                </div>
            </div>
            <?php endif; ?>
        </div>
    </div>
    <?php endif; ?>

    
    <div class="bg-white rounded-lg shadow-sm border border-gray-200 mb-5">
        <div class="px-5 py-3 border-b border-gray-200">
            <h3 class="text-sm font-semibold text-gray-900">Device Targeting</h3>
            <p class="text-xs text-gray-400 mt-0.5">Choose which devices should display this ad.</p>
        </div>
        <div class="p-5">
            <?php if ($isMobileOnly): ?>
            <input type="hidden" name="device" value="mobile">
            <p class="text-sm text-gray-500">This zone is <strong>mobile only</strong> by design.</p>
            <?php else: ?>
            <div class="grid grid-cols-3 gap-3">
                <label class="device-card relative flex items-center justify-center gap-2 p-3 border-2 rounded-xl cursor-pointer transition-all hover:border-primary-300">
                    <input type="radio" name="device" value="all" class="sr-only" <?= $device === 'all' ? 'checked' : '' ?>>
                    <svg class="w-4 h-4 text-gray-500" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="3" width="20" height="14" rx="2"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="12" y1="17" x2="12" y2="21"/></svg>
                    <svg class="w-3.5 h-3.5 text-gray-500" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="5" y="2" width="14" height="20" rx="2"/><line x1="12" y1="18" x2="12.01" y2="18"/></svg>
                    <span class="text-xs font-medium">All devices</span>
                </label>
                <label class="device-card relative flex items-center justify-center gap-2 p-3 border-2 rounded-xl cursor-pointer transition-all hover:border-primary-300">
                    <input type="radio" name="device" value="desktop" class="sr-only" <?= $device === 'desktop' ? 'checked' : '' ?>>
                    <svg class="w-4 h-4 text-gray-500" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="3" width="20" height="14" rx="2"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="12" y1="17" x2="12" y2="21"/></svg>
                    <span class="text-xs font-medium">Desktop only</span>
                </label>
                <label class="device-card relative flex items-center justify-center gap-2 p-3 border-2 rounded-xl cursor-pointer transition-all hover:border-primary-300">
                    <input type="radio" name="device" value="mobile" class="sr-only" <?= $device === 'mobile' ? 'checked' : '' ?>>
                    <svg class="w-3.5 h-3.5 text-gray-500" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="5" y="2" width="14" height="20" rx="2"/><line x1="12" y1="18" x2="12.01" y2="18"/></svg>
                    <span class="text-xs font-medium">Mobile only</span>
                </label>
            </div>
            <?php endif; ?>
            <div class="mt-4">
                <label class="block text-sm font-medium text-gray-700 mb-1">Countries <span class="font-normal text-gray-400">&middot; optional</span></label>
                <input type="text" name="geo" value="<?= htmlspecialchars($geoVal) ?>" placeholder="e.g. US, GB, CA &mdash; blank = worldwide" class="<?= $ic ?>">
                <p class="mt-1.5 text-[11px] text-gray-400">Comma-separated ISO country codes; blank = shown worldwide. Uses Cloudflare geolocation.</p>
            </div>
        </div>
    </div>

    
    <div class="bg-white rounded-lg shadow-sm border border-gray-200 mb-5">
        <div class="px-5 py-3 border-b border-gray-200">
            <h3 class="text-sm font-semibold text-gray-900">Schedule</h3>
            <p class="text-xs text-gray-400 mt-0.5">
                Leave empty to run indefinitely. All times use your configured timezone: <strong><?= htmlspecialchars($tz) ?></strong>
            </p>
        </div>
        <div class="p-5">
            <div class="grid grid-cols-2 gap-4">
                <div>
                    <label class="block text-xs font-medium text-gray-500 mb-1">Start date</label>
                    <input type="date" name="start_date" value="<?= htmlspecialchars($startDate) ?>" class="<?= $ic ?>">
                </div>
                <div>
                    <label class="block text-xs font-medium text-gray-500 mb-1">Start time</label>
                    <input type="time" name="start_time" value="<?= htmlspecialchars($startTime ? substr($startTime, 0, 5) : '') ?>" class="<?= $ic ?>">
                </div>
                <div>
                    <label class="block text-xs font-medium text-gray-500 mb-1">End date</label>
                    <input type="date" name="end_date" value="<?= htmlspecialchars($endDate) ?>" class="<?= $ic ?>">
                </div>
                <div>
                    <label class="block text-xs font-medium text-gray-500 mb-1">End time</label>
                    <input type="time" name="end_time" value="<?= htmlspecialchars($endTime ? substr($endTime, 0, 5) : '') ?>" class="<?= $ic ?>">
                </div>
            </div>
        </div>
    </div>

    
    <div class="bg-white rounded-lg shadow-sm border border-gray-200 mb-5">
        <div class="p-5 flex items-center justify-between">
            <label class="flex items-center gap-3 cursor-pointer">
                <input type="checkbox" name="is_active" value="1" <?= $isActive ? 'checked' : '' ?>
                       class="w-4 h-4 rounded border-gray-300 text-primary-600 focus:ring-primary-500">
                <div>
                    <span class="text-sm font-medium text-gray-700">Active</span>
                    <p class="text-[11px] text-gray-400">Uncheck to save as a draft without displaying this ad</p>
                </div>
            </label>
        </div>
        <div class="px-5 pb-5 -mt-1">
            <label class="flex items-center gap-3 cursor-pointer">
                <input type="checkbox" name="is_house" value="1" <?= $isHouse ? 'checked' : '' ?>
                       class="w-4 h-4 rounded border-gray-300 text-primary-600 focus:ring-primary-500">
                <div>
                    <span class="text-sm font-medium text-gray-700">House / fallback ad</span>
                    <p class="text-[11px] text-gray-400">Only shows when no paid ad fills this slot &mdash; fills unsold inventory with your own promo.</p>
                </div>
            </label>
        </div>
        <div class="px-5 pb-5 -mt-1 flex items-center gap-3 flex-wrap">
            <span class="text-sm font-medium text-gray-700">Rotation weight</span>
            <select name="weight" class="<?= $ic ?> max-w-[90px]">
                <?php for ($w = 1; $w <= 10; $w++): ?>
                <option value="<?= $w ?>" <?= $weight === $w ? 'selected' : '' ?>><?= $w ?></option>
                <?php endfor; ?>
            </select>
            <span class="text-[11px] text-gray-400">Higher = shown more often than other ads competing for the same spot (default 5).</span>
        </div>
    </div>

    <div class="flex items-center gap-3">
        <button type="submit" class="inline-flex items-center gap-2 px-5 py-2.5 bg-primary-600 text-white text-sm font-medium rounded-lg hover:bg-primary-700 transition-colors">
            <?= $isEdit ? 'Save Changes' : 'Create Ad Spot' ?>
        </button>
        <a href="/admin/ads/zone/<?= $zoneId ?>" class="px-4 py-2.5 text-sm text-gray-500 hover:text-gray-700 no-underline transition-colors">Cancel</a>
    </div>
</form>

<style>
.ad-type-card { border-color: #e5e7eb; }
.ad-type-card:has(input:checked) { border-color: var(--primary, #6366f1); background: #f5f3ff; }
.device-card { border-color: #e5e7eb; }
.device-card:has(input:checked) { border-color: var(--primary, #6366f1); background: #f5f3ff; }
</style>
<script>
function updateTypeFields() {
    var c = document.querySelector('input[name="ad_type"]:checked');
    var t = c ? c.value : 'code';
    document.getElementById('fieldsCode').classList.toggle('hidden', t !== 'code');
    var img = document.getElementById('fieldsImage');
    if (img) img.classList.toggle('hidden', t !== 'image');
    var vast = document.getElementById('fieldsVast');
    if (vast) vast.classList.toggle('hidden', t !== 'vast');
}
function updatePlayerFields() {
    var c = document.querySelector('input[name="player_position"]:checked');
    if (!c) return;
    var p = c.value;
    var mid = document.getElementById('midrollConfig');
    var skip = document.getElementById('skipConfig');
    if (mid) mid.classList.toggle('hidden', p !== 'midroll');
    if (skip) skip.classList.toggle('hidden', p === 'overlay');
}
</script>
