@extends('layouts.tenant-admin')
@section('title', 'إدارة الإعلانات')

@section('content')
<h2 class="text-2xl font-bold mb-6">إدارة الإعلانات (Ad Manager)</h2>

<form method="post" action="{{ route('tenant.ads.store') }}" enctype="multipart/form-data" class="bg-white p-5 rounded-lg shadow mb-6 space-y-4 max-w-lg">
    @csrf
    <div>
        <label class="block text-sm font-medium mb-1">اسم داخلي للإعلان</label>
        <input type="text" name="name" required class="w-full border rounded p-2">
    </div>
    <div>
        <label class="block text-sm font-medium mb-1">المكان</label>
        <select name="slot" class="w-full border rounded p-2">
            <option value="header">أعلى الموقع (Header)</option>
            <option value="sidebar">الشريط الجانبي (Sidebar)</option>
            <option value="inside_article">داخل المقال (Inside Article)</option>
            <option value="footer">أسفل الموقع (Footer)</option>
        </select>
    </div>
    <div>
        <label class="block text-sm font-medium mb-1">النوع</label>
        <select name="type" id="ad-type" class="w-full border rounded p-2" onchange="toggleAdFields()">
            <option value="adsense_code">كود AdSense / HTML</option>
            <option value="banner_image">بانر (صورة + رابط)</option>
        </select>
    </div>
    <div id="adsense-field">
        <label class="block text-sm font-medium mb-1">كود الإعلان</label>
        <textarea name="adsense_code" rows="4" class="w-full border rounded p-2 font-mono text-xs" dir="ltr"></textarea>
    </div>
    <div id="banner-fields" class="hidden space-y-3">
        <div>
            <label class="block text-sm font-medium mb-1">صورة البانر</label>
            <input type="file" name="banner_image" accept="image/*" class="w-full border rounded p-2">
        </div>
        <div>
            <label class="block text-sm font-medium mb-1">رابط عند الضغط</label>
            <input type="url" name="banner_link" class="w-full border rounded p-2" dir="ltr">
        </div>
    </div>
    <button type="submit" class="bg-blue-600 text-white px-5 py-2 rounded">إضافة الإعلان</button>
</form>

<table class="w-full bg-white rounded-lg shadow overflow-hidden text-sm">
    <thead class="bg-gray-100 text-gray-600">
        <tr>
            <th class="p-3 text-right">الاسم</th>
            <th class="p-3 text-right">المكان</th>
            <th class="p-3 text-right">النوع</th>
            <th class="p-3 text-right">الحالة</th>
            <th class="p-3 text-right">إجراءات</th>
        </tr>
    </thead>
    <tbody>
        @foreach ($ads as $ad)
        <tr class="border-t">
            <td class="p-3 font-medium">{{ $ad->name }}</td>
            <td class="p-3">{{ $ad->slot }}</td>
            <td class="p-3">{{ $ad->type === 'adsense_code' ? 'كود' : 'بانر' }}</td>
            <td class="p-3">{{ $ad->is_active ? '✓ فعّال' : '— موقوف' }}</td>
            <td class="p-3 space-x-2 space-x-reverse">
                <form action="{{ route('tenant.ads.toggle', $ad) }}" method="post" class="inline">
                    @csrf
                    <button class="text-blue-600 hover:underline">{{ $ad->is_active ? 'إيقاف' : 'تفعيل' }}</button>
                </form>
                <form action="{{ route('tenant.ads.destroy', $ad) }}" method="post" class="inline" onsubmit="return confirm('متأكد تبي تحذف هذا الإعلان؟')">
                    @csrf @method('DELETE')
                    <button class="text-red-600 hover:underline">حذف</button>
                </form>
            </td>
        </tr>
        @endforeach
    </tbody>
</table>

<script>
function toggleAdFields() {
    const type = document.getElementById('ad-type').value;
    document.getElementById('adsense-field').classList.toggle('hidden', type !== 'adsense_code');
    document.getElementById('banner-fields').classList.toggle('hidden', type !== 'banner_image');
}
</script>
@endsection