@extends('admin.layout')
@section('title', 'Preview Ads - ' . $ads->name)

@section('content')
<div class="toolbar">
    <a href="{{ route('admin.ads.index') }}" style="color:#666;text-decoration:none;font-size:14px;">← Kembali</a>
    <h2 style="font-size: 18px;">👁 Preview Ads: {{ $ads->name }}</h2>
</div>

<div style="background:#1a1a1a;border-radius:8px;padding:24px;border:1px solid #2a2a2a;">
    <div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin-bottom:20px;">
        <div>
            <div style="font-size:12px;color:#888;">Nama</div>
            <div style="color:#ddd;">{{ $ads->name }}</div>
        </div>
        <div>
            <div style="font-size:12px;color:#888;">Type</div>
            <div style="color:#ddd;">{{ $ads->type_label }}</div>
        </div>
        <div>
            <div style="font-size:12px;color:#888;">Position</div>
            <div style="color:#ddd;">{{ $ads->position_label }}</div>
        </div>
        <div>
            <div style="font-size:12px;color:#888;">Status</div>
            <div style="color:#ddd;">{{ $ads->is_active ? 'Aktif' : 'Tidak Aktif' }}</div>
        </div>
    </div>

    <div style="margin-bottom:12px;">
        <div style="font-size:12px;color:#888;margin-bottom:6px;">Slug</div>
        <div style="background:#111;padding:10px;border-radius:6px;color:#aaa;">{{ $ads->slug ?? '-' }}</div>
    </div>

    <div style="margin-bottom:12px;">
        <div style="font-size:12px;color:#888;margin-bottom:6px;">Script / URL Target</div>
        <pre style="background:#111;padding:12px;border-radius:6px;color:#aaa;overflow:auto;white-space:pre-wrap;word-break:break-word;">{{ $ads->script }}</pre>
    </div>

    <div style="margin-bottom:12px;">
        <div style="font-size:12px;color:#888;margin-bottom:6px;">Description</div>
        <div style="background:#111;padding:10px;border-radius:6px;color:#aaa;">{{ $ads->description ?: '-' }}</div>
    </div>
</div>
@endsection