@extends('layouts.app')
@section('title','Banners')
@section('content')
<div class="min-h-screen bg-slate-100"><div class="mx-auto max-w-6xl p-4 sm:p-6"><header class="mb-5"><a href="/admin/dashboard" class="text-sm font-semibold text-slate-500">← Admin</a><h1 class="mt-2 text-2xl font-black">Banner Manager</h1></header><div class="grid gap-4 lg:grid-cols-3"><form id="banner-form" class="vtu-card space-y-3"><h2 class="font-black">New banner</h2><input id="title" class="vtu-input" placeholder="Title" required><input id="image_url" type="url" class="vtu-input" placeholder="Image URL" required><input id="action_url" type="url" class="vtu-input" placeholder="Action URL"><select id="audience" class="vtu-input"><option value="all">All</option><option value="customer">Customers</option><option value="agent">Agents</option><option value="reseller">Resellers</option></select><button class="vtu-btn-primary w-full">Create banner</button></form><section class="vtu-card lg:col-span-2"><h2 class="font-black">Banners</h2><div id="banners" class="mt-4 grid gap-3 sm:grid-cols-2"></div></section></div></div></div>
<script>async function load(){const r=await axios.get('/api/admin/banners');document.getElementById('banners').innerHTML=(r.data.data||[]).map(b=>`<div class="overflow-hidden rounded-2xl border"><img src="${b.image_url}" class="h-28 w-full object-cover"><div class="p-3"><strong>${b.title}</strong><div class="text-xs text-slate-500">${b.audience} • ${b.is_active?'On':'Off'}</div></div></div>`).join('')||'<p class="text-slate-500">No banners.</p>';}document.getElementById('banner-form').addEventListener('submit',async e=>{e.preventDefault();await axios.post('/api/admin/banners',{title:document.getElementById('title').value,image_url:document.getElementById('image_url').value,action_url:document.getElementById('action_url').value||null,audience:document.getElementById('audience').value,is_active:true,sort_order:0});e.currentTarget.reset();await load();});load();</script>
@endsection