@extends('admin.layout')
@section('title', 'Buat Ads Baru')

@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;">➕ Buat Ads Baru</h2>
</div>

@if($errors->any())
    <div class="alert alert-error">
        <strong>Ada kesalahan:</strong>
        <ul style="margin-top:8px;margin-left:16px;">
            @foreach($errors->all() as $error)
                <li>{{ $error }}</li>
            @endforeach
        </ul>
    </div>
@endif

<form method="POST" action="{{ route('admin.ads.store') }}" style="background:#1a1a1a;border-radius:8px;padding:24px;border:1px solid #2a2a2a;">
    @csrf

    <div class="form-group">
        <label>Nama Ads *</label>
        <input type="text" name="name" value="{{ old('name') }}" placeholder="cth: Popunder Video, Banner Header, dll" required>
        <p style="font-size:12px;color:#666;margin-top:4px;">Nama untuk identifikasi ads ini</p>
    </div>

    <div style="display:grid;grid-template-columns:1fr 1fr;gap:16px;">
        <div class="form-group">
            <label>Tipe Ads *</label>
            <select name="type" required>
                @foreach($types as $value => $label)
                    <option value="{{ $value }}" {{ old('type') === $value ? 'selected' : '' }}>{{ $label }}</option>
                @endforeach
            </select>
            <p style="font-size:12px;color:#666;margin-top:4px;">Direct Link akan dibuka saat tombol play video ditekan.</p>
        </div>

        <div class="form-group">
            <label>Posisi *</label>
            <select name="position" required>
                @foreach($positions as $value => $label)
                    <option value="{{ $value }}" {{ old('position', 'before_player') === $value ? 'selected' : '' }}>{{ $label }}</option>
                @endforeach
            </select>
        </div>
    </div>

    <div class="form-group">
        <label>Script / URL Target *</label>
        <textarea name="script" rows="10" placeholder="Paste kode HTML/JavaScript iklan atau URL tujuan direct link di sini..." required>{{ old('script') }}</textarea>
        <p style="font-size:12px;color:#666;margin-top:4px;">Untuk Direct Link, isi URL tujuan. Untuk tipe lain, isi script HTML/JavaScript iklan.</p>
    </div>

    <div class="form-group">
        <label>Deskripsi (opsional)</label>
        <textarea name="description" rows="3" placeholder="Catatan tentang ads ini...">{{ old('description') }}</textarea>
    </div>

    <div style="display:grid;grid-template-columns:1fr 1fr;gap:16px;">
        <div class="form-group">
            <label style="display:flex;align-items:center;gap:8px;">
                <input type="checkbox" name="is_active" value="1" checked>
                <span>Aktif</span>
            </label>
        </div>

        <div class="form-group">
            <label>Priority (0-100)</label>
            <input type="number" name="priority" value="{{ old('priority', 0) }}" min="0" max="100">
        </div>
    </div>

    <div style="display:flex;gap:8px;margin-top:24px;">
        <button type="submit" class="btn btn-primary">✓ Simpan Ads</button>
        <a href="{{ route('admin.ads.index') }}" class="btn btn-secondary">Batal</a>
    </div>
</form>

{{-- Example Scripts --}}
<div style="background:#1a1a1a;border-radius:8px;padding:20px;margin-top:24px;border:1px solid #2a2a2a;">
    <h3 style="font-size:14px;margin-bottom:12px;color:#888;">📝 Contoh Script</h3>
    
    <div style="margin-bottom:16px;">
        <h4 style="font-size:13px;color:#6fafdf;margin-bottom:8px;">Google AdSense:</h4>
        <pre style="background:#111;padding:12px;border-radius:4px;font-size:11px;color:#888;overflow-x:auto;"><code>&lt;script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-XXXXX"&gt;&lt;/script&gt;
&lt;ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-XXXXX" data-ad-slot="XXXXX"&gt;&lt;/ins&gt;
&lt;script&gt;(adsbygoogle = window.adsbygoogle || []).push({});&lt;/script&gt;</code></pre>
    </div>

    <div style="margin-bottom:16px;">
        <h4 style="font-size:13px;color:#6fafdf;margin-bottom:8px;">Popunder Script:</h4>
        <pre style="background:#111;padding:12px;border-radius:4px;font-size:11px;color:#888;overflow-x:auto;"><code>&lt;script type="text/javascript"&gt;
var popunderConfig = { ... };
&lt;/script&gt;
&lt;script src="https://yourpopunder.com/script.js"&gt;&lt;/script&gt;</code></pre>
    </div>

    <div>
        <h4 style="font-size:13px;color:#6fafdf;margin-bottom:8px;">Custom Banner:</h4>
        <pre style="background:#111;padding:12px;border-radius:4px;font-size:11px;color:#888;overflow-x:auto;"><code>&lt;div style="text-align:center;margin:10px 0;"&gt;
    &lt;a href="https://example.com" target="_blank"&gt;
        &lt;img src="https://example.com/banner.jpg" style="max-width:100%;"&gt;
    &lt;/a&gt;
&lt;/div&gt;</code></pre>
    </div>

    <div style="margin-top:16px;">
        <h4 style="font-size:13px;color:#6fafdf;margin-bottom:8px;">Direct Link:</h4>
        <pre style="background:#111;padding:12px;border-radius:4px;font-size:11px;color:#888;overflow-x:auto;"><code>https://example.com/landing-page</code></pre>
    </div>
</div>

@endsection