@extends('admin.layout')

@section('header-title', 'Yeni AdSense Alanı Oluştur')

@section('content')
<div class="page-title">
    <div style="display: flex; align-items: center; gap: 12px; margin-bottom: 8px;">
        <a href="{{ route('admin.adsense.index') }}" style="display: inline-flex; align-items: center; gap: 6px; color: var(--gray-500); text-decoration: none; font-size: 14px; transition: color 0.2s ease;">
            <svg style="width: 16px; height: 16px;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
            </svg>
            AdSense'e Dön
        </a>
    </div>
    <h1>Yeni AdSense Alanı Oluştur</h1>
    <p>Google AdSense reklam alanı oluşturun ve sitede kullanın</p>
</div>

<div class="info-card" style="max-width: 700px;">
    <form method="POST" action="{{ route('admin.adsense.store') }}">
        @csrf

        <!-- Ad Adı -->
        <div style="margin-bottom: 24px;">
            <label style="display: block; font-size: 13px; font-weight: 600; color: var(--gray-700); margin-bottom: 8px;">
                Alan Adı
                <span style="color: var(--danger);">*</span>
            </label>
            <input type="text"
                   name="name"
                   value="{{ old('name') }}"
                   placeholder="örneğin: Blog Kenar Çubuğu - Üst"
                   maxlength="255"
                   required
                   style="width: 100%; padding: 10px 14px; border: 1px solid var(--gray-300); border-radius: 8px; font-size: 14px;">
            @error('name')
                <div style="color: var(--danger); font-size: 12px; margin-top: 4px;">{{ $message }}</div>
            @enderror
        </div>

        <!-- Konum -->
        <div style="margin-bottom: 24px;">
            <label style="display: block; font-size: 13px; font-weight: 600; color: var(--gray-700); margin-bottom: 8px;">
                Konum (Location)
                <span style="color: var(--danger);">*</span>
            </label>
            <select name="location"
                    required
                    style="width: 100%; padding: 10px 14px; border: 1px solid var(--gray-300); border-radius: 8px; font-size: 14px; background: white;">
                <option value="">-- Seçiniz --</option>
                <option value="blog_sidebar_top" {{ old('location') === 'blog_sidebar_top' ? 'selected' : '' }}>Blog Kenar Çubuğu - Üst</option>
                <option value="blog_sidebar_middle" {{ old('location') === 'blog_sidebar_middle' ? 'selected' : '' }}>Blog Kenar Çubuğu - Orta</option>
                <option value="blog_sidebar_bottom" {{ old('location') === 'blog_sidebar_bottom' ? 'selected' : '' }}>Blog Kenar Çubuğu - Alt</option>
                <option value="blog_content_top" {{ old('location') === 'blog_content_top' ? 'selected' : '' }}>Blog İçeriği - Üst</option>
                <option value="blog_content_middle" {{ old('location') === 'blog_content_middle' ? 'selected' : '' }}>Blog İçeriği - Orta</option>
                <option value="blog_content_bottom" {{ old('location') === 'blog_content_bottom' ? 'selected' : '' }}>Blog İçeriği - Alt</option>
                <option value="forum_sidebar" {{ old('location') === 'forum_sidebar' ? 'selected' : '' }}>Forum Kenar Çubuğu</option>
                <option value="forum_top" {{ old('location') === 'forum_top' ? 'selected' : '' }}>Forum - Üst</option>
                <option value="library_sidebar" {{ old('location') === 'library_sidebar' ? 'selected' : '' }}>Kütüphane Kenar Çubuğu</option>
                <option value="footer" {{ old('location') === 'footer' ? 'selected' : '' }}>Sayfa Altı (Footer)</option>
                <option value="header" {{ old('location') === 'header' ? 'selected' : '' }}>Sayfa Başı (Header)</option>
            </select>
            @error('location')
                <div style="color: var(--danger); font-size: 12px; margin-top: 4px;">{{ $message }}</div>
            @enderror
        </div>

        <!-- AdSense Kodu -->
        <div style="margin-bottom: 24px;">
            <label style="display: block; font-size: 13px; font-weight: 600; color: var(--gray-700); margin-bottom: 8px;">
                AdSense Kodu
                <span style="color: var(--danger);">*</span>
            </label>
            <textarea name="code"
                      rows="8"
                      placeholder="Google AdSense tarafından sağlanan script kodunu yapıştırın..."
                      required
                      style="width: 100%; padding: 10px 14px; border: 1px solid var(--gray-300); border-radius: 8px; font-size: 13px; resize: vertical; font-family: 'Consolas', 'Monaco', monospace;">{{ old('code') }}</textarea>
            <div style="font-size: 12px; color: var(--gray-500); margin-top: 4px;">
                Google AdSense hesabınızdan aldığınız tam script kodunu yapıştırın
            </div>
            @error('code')
                <div style="color: var(--danger); font-size: 12px; margin-top: 4px;">{{ $message }}</div>
            @enderror
        </div>

        <!-- Aktif Durumu -->
        <div style="margin-bottom: 24px;">
            <label style="display: flex; align-items: center; gap: 10px; cursor: pointer;">
                <input type="checkbox"
                       name="is_active"
                       value="1"
                       {{ old('is_active', true) ? 'checked' : '' }}
                       style="width: 18px; height: 18px; cursor: pointer;">
                <span style="font-size: 14px; font-weight: 500; color: var(--gray-700);">Hemen aktif et</span>
            </label>
            <div style="font-size: 12px; color: var(--gray-500); margin-top: 4px;">Etkinleştirilmezse reklam görüntülenmez</div>
        </div>

        <!-- Submit Buttons -->
        <div style="display: flex; gap: 12px; padding-top: 20px; border-top: 1px solid var(--gray-200);">
            <button type="submit"
                    style="padding: 12px 24px; background: var(--primary); color: white; border: none; border-radius: 8px; font-weight: 600; cursor: pointer; font-size: 14px; transition: all 0.2s ease;">
                Oluştur
            </button>
            <a href="{{ route('admin.adsense.index') }}"
               style="padding: 12px 24px; background: var(--gray-100); color: var(--gray-700); border-radius: 8px; text-decoration: none; font-weight: 500; font-size: 14px; transition: all 0.2s ease;">
                İptal
            </a>
        </div>
    </form>
</div>
@endsection
