@extends('admin.layout')

@section('header-title', 'AdSense Alanları')

@section('content')
<div class="page-title">
    <div style="display: flex; align-items: center; gap: 12px; margin-bottom: 8px;">
        <a href="{{ route('admin.blog.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>
            Blog'a Dön
        </a>
    </div>
    <h1>AdSense Alanları</h1>
    <p>Google AdSense reklam alanlarını yönetin</p>
</div>

<div class="info-card">
    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px;">
        <h2 style="margin: 0; border: none; padding: 0;">Reklam Alanları</h2>
        <a href="{{ route('admin.adsense.create') }}" style="display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px; background: var(--primary); color: white; border-radius: 8px; text-decoration: none; font-weight: 500; font-size: 14px; transition: all 0.3s 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="M12 4v16m8-8H4"/>
            </svg>
            Yeni Alan
        </a>
    </div>

    @if(session('success'))
        <div style="padding: 16px; background: rgba(16, 185, 129, 0.1); border: 1px solid var(--success); border-radius: 8px; color: var(--success); margin-bottom: 20px; font-size: 14px;">
            {{ session('success') }}
        </div>
    @endif

    <div style="overflow-x: auto;">
        <table style="width: 100%; border-collapse: collapse;">
            <thead>
                <tr style="border-bottom: 2px solid var(--gray-200);">
                    <th style="padding: 16px; text-align: left; font-size: 12px; font-weight: 600; color: var(--gray-600); text-transform: uppercase; letter-spacing: 0.5px;">Ad</th>
                    <th style="padding: 16px; text-align: left; font-size: 12px; font-weight: 600; color: var(--gray-600); text-transform: uppercase; letter-spacing: 0.5px;">Konum</th>
                    <th style="padding: 16px; text-align: left; font-size: 12px; font-weight: 600; color: var(--gray-600); text-transform: uppercase; letter-spacing: 0.5px;">Durum</th>
                    <th style="padding: 16px; text-align: left; font-size: 12px; font-weight: 600; color: var(--gray-600); text-transform: uppercase; letter-spacing: 0.5px;">Gösterim</th>
                    <th style="padding: 16px; text-align: right; font-size: 12px; font-weight: 600; color: var(--gray-600); text-transform: uppercase; letter-spacing: 0.5px;">İşlemler</th>
                </tr>
            </thead>
            <tbody>
                @forelse($zones as $zone)
                <tr style="border-bottom: 1px solid var(--gray-200); transition: background 0.2s ease;">
                    <td style="padding: 16px;">
                        <div style="font-weight: 500; color: var(--gray-900);">{{ $zone->name }}</div>
                    </td>
                    <td style="padding: 16px; font-size: 14px; color: var(--gray-700);">{{ $zone->location }}</td>
                    <td style="padding: 16px;">
                        @if($zone->is_active)
                            <span style="display: inline-block; padding: 4px 12px; background: rgba(16, 185, 129, 0.1); color: var(--success); border-radius: 20px; font-size: 12px; font-weight: 500;">Aktif</span>
                        @else
                            <span style="display: inline-block; padding: 4px 12px; background: rgba(107, 114, 128, 0.1); color: var(--gray-600); border-radius: 20px; font-size: 12px; font-weight: 500;">Pasif</span>
                        @endif
                    </td>
                    <td style="padding: 16px; font-size: 14px; color: var(--gray-700);">{{ number_format($zone->display_count ?? 0) }}</td>
                    <td style="padding: 16px; text-align: right;">
                        <div style="display: flex; gap: 8px; justify-content: flex-end;">
                            <form method="POST" action="{{ route('admin.adsense.toggle', $zone->id) }}" style="display: inline;">
                                @csrf
                                <button type="submit" style="padding: 6px 12px; background: rgba(139, 92, 246, 0.1); color: var(--secondary); border: none; border-radius: 6px; font-size: 13px; font-weight: 500; cursor: pointer; transition: all 0.2s ease;">
                                    {{ $zone->is_active ? 'Pasife Al' : 'Aktife Et' }}
                                </button>
                            </form>
                            <a href="{{ route('admin.adsense.edit', $zone->id) }}" style="padding: 6px 12px; background: rgba(59, 130, 246, 0.1); color: var(--primary); border-radius: 6px; text-decoration: none; font-size: 13px; font-weight: 500; transition: all 0.2s ease;">Düzenle</a>
                            <form method="POST" action="{{ route('admin.adsense.destroy', $zone->id) }}" style="display: inline;" onsubmit="return confirm('Bu reklam alanını silmek istediğinizden emin misiniz?');">
                                @csrf
                                @method('DELETE')
                                <button type="submit" style="padding: 6px 12px; background: rgba(239, 68, 68, 0.1); color: var(--danger); border: none; border-radius: 6px; font-size: 13px; font-weight: 500; cursor: pointer; transition: all 0.2s ease;">Sil</button>
                            </form>
                        </div>
                    </td>
                </tr>
                @empty
                <tr>
                    <td colspan="5" style="padding: 40px; text-align: center; color: var(--gray-500);">
                        <div style="font-size: 16px; margin-bottom: 8px;">Henüz AdSense alanı yok</div>
                        <a href="{{ route('admin.adsense.create') }}" style="color: var(--primary); text-decoration: none; font-weight: 500;">İlk alanı oluştur →</a>
                    </td>
                </tr>
                @endforelse
            </tbody>
        </table>
    </div>
</div>
@endsection
