@extends('layouts.app')
@section('title','Promotions')
@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">Promotions & Discounts</h1></header><div class="grid gap-4 lg:grid-cols-3"><form id="promo-form" class="vtu-card space-y-3"><h2 class="font-black">Create promotion</h2><input id="name" class="vtu-input" placeholder="Promotion name" required><select id="type" class="vtu-input"><option value="fixed">Fixed discount</option><option value="percent">Percentage</option></select><input id="value" type="number" min="1" class="vtu-input" placeholder="Value" required><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</button></form><section class="vtu-card lg:col-span-2"><h2 class="font-black">Active & previous promotions</h2><div id="promos" class="mt-4 space-y-3"></div></section></div></div></div>
<script>async function load(){const r=await axios.get('/api/admin/promotions');document.getElementById('promos').innerHTML=(r.data.data||[]).map(p=>`<div class="rounded-2xl border p-4"><div class="flex justify-between"><strong>${p.name}</strong><span>${p.is_active?'On':'Off'}</span></div><div class="mt-1 text-sm text-slate-500">${p.type} • ${p.value} • ${p.audience}</div></div>`).join('')||'<p class="text-slate-500">No promotions.</p>';}document.getElementById('promo-form').addEventListener('submit',async e=>{e.preventDefault();await axios.post('/api/admin/promotions',{name:document.getElementById('name').value,type:document.getElementById('type').value,value:Number(document.getElementById('value').value),audience:document.getElementById('audience').value,is_active:true});e.currentTarget.reset();await load();});load();</script>
@endsection