@extends('layouts.admin')

@section('title', isset($ad) ? 'Edit Iklan' : 'Tambah Iklan')

@section('content')
<div class="max-w-3xl">
    <div class="bg-white rounded-xl border border-gray-100 p-8">
        <form action="{{ isset($ad) ? route('admin.ads.update', $ad) : route('admin.ads.store') }}" method="POST">
            @csrf
            @if(isset($ad)) @method('PUT') @endif

            <div class="space-y-5">
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Nama Iklan *</label>
                    <input type="text" name="name" value="{{ old('name', $ad->name ?? '') }}" required
                        class="w-full border border-gray-200 rounded-lg px-4 py-3 focus:ring-2 focus:ring-indigo-500 outline-none"
                        placeholder="Contoh: Adsterra Banner 728x90">
                    @error('name') <p class="text-xs text-red-500 mt-1">{{ $message }}</p> @enderror
                </div>

                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Deskripsi (opsional)</label>
                    <input type="text" name="description" value="{{ old('description', $ad->description ?? '') }}"
                        class="w-full border border-gray-200 rounded-lg px-4 py-3 focus:ring-2 focus:ring-indigo-500 outline-none"
                        placeholder="Deskripsi singkat iklan ini">
                </div>

                <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">Posisi *</label>
                        <select name="position" required
                            class="w-full border border-gray-200 rounded-lg px-4 py-3 focus:ring-2 focus:ring-indigo-500 outline-none">
                            @foreach($positions as $value => $label)
                            <option value="{{ $value }}" {{ old('position', $ad->position ?? '') === $value ? 'selected' : '' }}>{{ $label }}</option>
                            @endforeach
                        </select>
                        <p class="text-xs text-gray-400 mt-1">Posisi tampil di halaman publik</p>
                    </div>

                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">Ukuran Banner</label>
                        <select name="size"
                            class="w-full border border-gray-200 rounded-lg px-4 py-3 focus:ring-2 focus:ring-indigo-500 outline-none">
                            <option value="">-- Pilih Ukuran --</option>
                            @foreach($sizes as $value => $label)
                            <option value="{{ $value }}" {{ old('size', $ad->size ?? '') === $value ? 'selected' : '' }}>{{ $label }}</option>
                            @endforeach
                        </select>
                        <p class="text-xs text-gray-400 mt-1">Ukuran banner dari Adsterra</p>
                    </div>
                </div>

                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Kode Iklan (HTML/JS) *</label>
                    <textarea name="code" rows="10" required
                        class="w-full border border-gray-200 rounded-lg px-4 py-3 focus:ring-2 focus:ring-indigo-500 outline-none font-mono text-sm"
                        placeholder="Paste kode iklan dari Adsterra di sini...">{{ old('code', $ad->code ?? '') }}</textarea>
                    <p class="text-xs text-gray-400 mt-1">Paste kode iklan dari Adsterra. Mendukung HTML, JavaScript, dan iframe.</p>
                    <p class="text-xs text-gray-400 mt-1">Khusus posisi Smartlink, isi dengan URL lengkap smartlink (contoh: https://domain.com/path).</p>
                    @error('code') <p class="text-xs text-red-500 mt-1">{{ $message }}</p> @enderror
                </div>

                <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">Urutan Tampil</label>
                        <input type="number" name="sort_order" value="{{ old('sort_order', $ad->sort_order ?? 0) }}" min="0"
                            class="w-full border border-gray-200 rounded-lg px-4 py-3 focus:ring-2 focus:ring-indigo-500 outline-none"
                            placeholder="0">
                        <p class="text-xs text-gray-400 mt-1">Angka kecil ditampilkan duluan</p>
                    </div>
                    <div class="flex items-end">
                        <label class="flex items-center space-x-3 pb-3">
                            <input type="checkbox" name="is_active" value="1"
                                {{ old('is_active', $ad->is_active ?? true) ? 'checked' : '' }}
                                class="w-5 h-5 text-indigo-600 rounded focus:ring-indigo-500">
                            <span class="text-sm font-medium text-gray-700">Aktif</span>
                        </label>
                    </div>
                </div>
            </div>

            <div class="flex items-center space-x-3 mt-8 pt-6 border-t border-gray-100">
                <button type="submit" class="bg-indigo-600 text-white px-6 py-2.5 rounded-lg font-medium hover:outline hover:outline-2 hover:outline-indigo-800">
                    {{ isset($ad) ? 'Simpan Perubahan' : 'Tambah Iklan' }}
                </button>
                <a href="{{ route('admin.ads.index') }}" class="text-gray-500 hover:text-gray-700 font-medium">Batal</a>
            </div>
        </form>
    </div>

    {{-- Panduan Posisi --}}
    <div class="bg-white rounded-xl border border-gray-100 p-6 mt-6">
        <h3 class="text-sm font-semibold text-gray-700 mb-3">Panduan Posisi & Lokasi Tampil</h3>
        <div class="text-xs text-gray-500 space-y-2">
            <div class="flex items-start space-x-2">
                <span class="font-medium text-gray-600 w-32 flex-shrink-0">Banner Atas</span>
                <span>Tampil di atas daftar lowongan (Halaman Beranda) dan halaman lainnya. Rekomendasi: 728x90 (desktop) atau 320x50 (mobile)</span>
            </div>
            <div class="flex items-start space-x-2">
                <span class="font-medium text-gray-600 w-32 flex-shrink-0">Banner Bawah</span>
                <span>Tampil di bawah daftar lowongan (Halaman Beranda), bawah detail lowongan, dan halaman countdown. Rekomendasi: 728x90 atau 468x60</span>
            </div>
            <div class="flex items-start space-x-2">
                <span class="font-medium text-gray-600 w-32 flex-shrink-0">Sidebar</span>
                <span>Tampil di sidebar halaman Detail Lowongan (samping kanan). Rekomendasi: 300x250 atau 160x600</span>
            </div>
            <div class="flex items-start space-x-2">
                <span class="font-medium text-gray-600 w-32 flex-shrink-0">Native</span>
                <span>Sisipan di antara kartu lowongan (Halaman Beranda, setiap 6 lowongan) dan di bawah Dashboard Pelamar. Rekomendasi: 300x250</span>
            </div>
            <div class="flex items-start space-x-2">
                <span class="font-medium text-gray-600 w-32 flex-shrink-0">Dalam Artikel</span>
                <span>Di tengah konten Detail Lowongan (antara deskripsi dan persyaratan). Rekomendasi: 468x60 atau 300x250</span>
            </div>
            <div class="flex items-start space-x-2">
                <span class="font-medium text-gray-600 w-32 flex-shrink-0">Countdown</span>
                <span>Halaman countdown sebelum melamar (muncul saat pelamar klik "Melamar Pekerjaan Ini"). Juga tampil di halaman formulir tahapan. Rekomendasi: 300x250 atau 468x60</span>
            </div>
            <div class="flex items-start space-x-2">
                <span class="font-medium text-gray-600 w-32 flex-shrink-0">Interstitial</span>
                <span>Tampil di samping iklan countdown pada Halaman Countdown. Rekomendasi: 300x250</span>
            </div>
            <div class="flex items-start space-x-2">
                <span class="font-medium text-gray-600 w-32 flex-shrink-0">Mobile Banner</span>
                <span>Khusus tampil di perangkat mobile: Halaman Beranda (atas & bawah), Detail Lowongan, dan Halaman Countdown. Rekomendasi: 320x50</span>
            </div>
            <div class="flex items-start space-x-2">
                <span class="font-medium text-gray-600 w-32 flex-shrink-0">Smartlink</span>
                <span>Gunakan posisi ini untuk URL smartlink yang dibuka saat pelamar menekan tombol Kirim Formulir di tahap 3, 4, dan 5.</span>
            </div>
            <div class="flex items-start space-x-2">
                <span class="font-medium text-gray-600 w-32 flex-shrink-0">Social Bar</span>
                <span>Script iklan Social Bar floating dari Adsterra yang tampil di semua halaman publik. Iklan muncul sebagai notifikasi/bar di bagian bawah layar. Rekomendasi: Paste script Social Bar dari Adsterra</span>
            </div>
        </div>
    </div>
</div>
@endsection