@extends('layouts.portal')
@section('title', 'Promotions & offers')
@section('subtitle', 'Market a course, a workshop or the academy with a popup, an announcement bar and a shareable landing page. Every view, click, lead, application and admission is counted.')
@section('actions')<button class="btn btn-primary btn-sm" type="button" data-modal-open="#offer-new"><x-icon name="plus" :size="16"/> New promotion</button>@endsection
@section('content')
<div class="table-wrap"><table class="table">
  <thead><tr><th>Promotion</th><th>Promotes · shown on</th><th>Window</th><th class="num">Views</th><th class="num">Clicks</th><th class="num">Leads</th><th class="num">Applied</th><th class="num">Admitted</th><th>Status</th><th class="actions"></th></tr></thead>
  <tbody>
  @forelse($offers as $o)
    @php $f = $funnel[$o->id]; $impr = $o->views + $o->landing_views; @endphp
    <tr>
      <td><b>{{ $o->name }}</b><div class="xs muted">{{ \Illuminate\Support\Str::limit($o->headline, 70) }}</div>
        <div class="mt-1">@if($o->show_popup)<span class="op-chip">Popup</span>@endif @if($o->show_bar)<span class="op-chip">Top bar</span>@endif @if($o->slug)<span class="op-chip">Landing page</span>@endif @if($o->discount_label)<span class="op-chip green">{{ $o->discount_label }}</span>@endif @if($o->code)<span class="op-chip op-mono">{{ $o->code }}</span>@endif</div></td>
      <td class="small">{{ $o->event?->title ?? $o->course?->title ?? 'Academy-wide' }}<div class="xs muted">{{ \App\Models\Offer::TARGETS[$o->target_type] ?? $o->target_type }}@if($o->target_type === 'course') · {{ \App\Models\Course::find($o->target_id)?->title }}@elseif($o->target_type === 'event') · {{ \App\Models\Event::find($o->target_id)?->title }}@endif · {{ $o->trigger === 'exit' ? 'exit intent' : ($o->trigger === 'scroll' ? 'on scroll' : 'after '.$o->delay_seconds.'s') }}{{ $o->device !== 'all' ? ' · '.$o->device : '' }}</div></td>
      <td class="small nowrap">{{ $o->starts_at?->format('d M') ?? 'Now' }} → {{ $o->ends_at?->format('d M Y') ?? 'open-ended' }}</td>
      <td class="num" title="Popup views {{ $o->views }} · landing page views {{ $o->landing_views }}">{{ number_format($impr) }}</td>
      <td class="num">{{ number_format($o->clicks) }}</td>
      <td class="num"><a href="{{ route('admin.leads.index', ['offer' => $o->id]) }}">{{ $o->leads_count }}</a>@if($impr)<div class="xs muted">{{ round($o->leads_count / $impr * 100, 1) }}%</div>@endif</td>
      <td class="num">{{ $f['applications'] }}</td>
      <td class="num"><b>{{ $f['admitted'] }}</b></td>
      <td>@if($o->isLive())<span class="pill pill-green">Live</span>@elseif($o->is_active)<span class="pill pill-amber">Scheduled / ended</span>@else<span class="pill pill-gray">Off</span>@endif</td>
      <td class="actions"><div class="ad-actions">
        <button class="btn btn-secondary btn-sm" type="button" data-modal-open="#offer-{{ $o->id }}">Edit</button>
        @if($o->slug)<button class="btn btn-ghost btn-sm" type="button" data-modal-open="#link-{{ $o->id }}"><x-icon name="link" :size="14"/> Share</button>@endif
        @if($o->is_active)<form method="post" action="{{ route('admin.offers.destroy', $o) }}">@csrf @method('DELETE')<button class="btn btn-ghost btn-sm" type="submit">Switch off</button></form>@endif
      </div></td>
    </tr>
  @empty
    <tr><td colspan="10" class="table-empty"><x-empty icon="sparkles" title="No promotions yet" text="Create one, e.g. “AZ-104 October batch — 15% off for the first 20 seats”, and choose where it appears."/></td></tr>
  @endforelse
  </tbody>
</table></div>

@foreach(array_merge([null], $offers->all()) as $o)
@php $p = $o ? 'o'.$o->id.'-' : 'on-'; @endphp
<div class="modal" id="{{ $o ? 'offer-'.$o->id : 'offer-new' }}" role="dialog" aria-modal="true" aria-labelledby="{{ $p }}h">
  <div class="modal-box ad-modal-wide">
    <div class="row between"><h2 id="{{ $p }}h" style="font-size:1.2rem">{{ $o ? 'Edit promotion' : 'New promotion' }}</h2><button class="icon-btn" type="button" data-modal-close aria-label="Close"><x-icon name="x" :size="18"/></button></div>
    <form method="post" action="{{ $o ? route('admin.offers.update', $o) : route('admin.offers.store') }}" enctype="multipart/form-data">@csrf @if($o) @method('PUT') @endif
      <h3 class="op-sec">1 · Message</h3>
      <div class="form-grid">
        <x-field :id="$p.'name'" name="name" label="Internal name" required :value="$o?->name" placeholder="AZ-104 October push"/>
        <x-field :id="$p.'disc'" name="discount_label" label="Badge" :value="$o?->discount_label" placeholder="15% OFF · Free demo · Last seats"/>
        <x-field :id="$p.'head'" name="headline" label="Headline" required full :value="$o?->headline" placeholder="Become an Azure Administrator in 8 weeks"/>
        <x-field :id="$p.'sub'" name="subheadline" label="Supporting line" full :value="$o?->subheadline" placeholder="Live classes, real Azure labs and exam vouchers. October batch starts 15 Oct."/>
        <x-field :id="$p.'bar'" name="bar_text" label="Top-bar text (short)" full :value="$o?->bar_text" placeholder="🎓 AZ-104 batch starts 15 Oct — 15% off until Sunday"/>
        <x-field :id="$p.'cta'" name="cta_label" label="Button text" required :value="$o?->cta_label ?? 'Claim my offer'"/>
        <x-field :id="$p.'code'" name="code" label="Offer code" :value="$o?->code" placeholder="AZ15"/>
        <x-field :id="$p.'img'" name="image" type="file" label="Background image (optional)" accept="image/*" help="JPG/PNG/WebP up to 3 MB, shown behind the headline."/>
        <x-field :id="$p.'theme'" name="theme" type="select" label="Colour theme" :options="\App\Models\Offer::THEMES" :value="$o?->theme ?? 'brand'"/>
      </div>
      <h3 class="op-sec">2 · What it promotes</h3>
      <div class="form-grid">
        <x-field :id="$p.'course'" name="course_id" type="select" label="Course" blank="None / academy-wide" :options="$courses->pluck('title', 'id')->all()" :value="$o?->course_id" help="Shows the next batch, schedule and fee (or “fee on request”) in the popup and landing page."/>
        <x-field :id="$p.'event'" name="event_id" type="select" label="…or a workshop / webinar" blank="None" :options="$events->mapWithKeys(fn ($e) => [$e->id => $e->title.' · '.$e->starts_at->format('d M')])->all()" :value="$o?->event_id"/>
        <x-field :id="$p.'url'" name="cta_url" type="url" label="Custom button link (optional)" full :value="$o?->cta_url" help="Leave empty to send people to the promoted workshop, course or the admission form."/>
      </div>
      <h3 class="op-sec">3 · Where and how it appears</h3>
      <div class="row gap-2 mb-1" style="flex-wrap:wrap">
        <x-field :id="$p.'pop'" name="show_popup" type="checkbox" label="Popup" :value="$o?->show_popup ?? true"/>
        <x-field :id="$p.'sbar'" name="show_bar" type="checkbox" label="Announcement bar on top of every page" :value="$o?->show_bar ?? false"/>
        <x-field :id="$p.'lead'" name="collect_lead" type="checkbox" label="Collect a verified lead (name, email OTP, WhatsApp)" :value="$o?->collect_lead ?? true"/>
      </div>
      <div class="form-grid">
        <x-field :id="$p.'tt'" name="target_type" type="select" label="Show on" required :options="\App\Models\Offer::TARGETS" :value="$o?->target_type ?? 'all'"/>
        <x-field :id="$p.'tc'" name="target_course" type="select" label="…that course page" blank="—" :options="$courses->pluck('title', 'id')->all()" :value="$o?->target_type === 'course' ? $o->target_id : null"/>
        <x-field :id="$p.'te'" name="target_event" type="select" label="…that workshop page" blank="—" :options="$events->pluck('title', 'id')->all()" :value="$o?->target_type === 'event' ? $o->target_id : null"/>
        <x-field :id="$p.'trig'" name="trigger" type="select" label="Popup trigger" :options="['delay' => 'After a delay', 'exit' => 'Exit intent (leaving the page)', 'scroll' => 'After scrolling half the page']" :value="$o?->trigger ?? 'delay'"/>
        <x-field :id="$p.'delay'" name="delay_seconds" type="number" label="Delay (seconds)" min="0" max="120" required :value="$o?->delay_seconds ?? 8"/>
        <x-field :id="$p.'freq'" name="frequency_days" type="number" label="Show again after (days)" min="0" max="60" required :value="$o?->frequency_days ?? 3" help="After a visitor closes it. 0 = every visit."/>
        <x-field :id="$p.'dev'" name="device" type="select" label="Devices" :options="['all' => 'All devices', 'mobile' => 'Mobile only', 'desktop' => 'Desktop only']" :value="$o?->device ?? 'all'"/>
      </div>
      <h3 class="op-sec">4 · Schedule & urgency</h3>
      <div class="form-grid">
        <x-field :id="$p.'start'" name="starts_at" type="datetime-local" label="Starts" :value="$o?->starts_at?->format('Y-m-d\TH:i')"/>
        <x-field :id="$p.'end'" name="ends_at" type="datetime-local" label="Ends" :value="$o?->ends_at?->format('Y-m-d\TH:i')"/>
        <x-field :id="$p.'slug'" name="slug" label="Landing page address" :value="$o?->slug" placeholder="az104-october" help="{{ url('/promo') }}/…  (created automatically if empty)"/>
      </div>
      <div class="row gap-2" style="flex-wrap:wrap">
        <x-field :id="$p.'cd'" name="show_countdown" type="checkbox" label="Live countdown to the end date" :value="$o?->show_countdown ?? true"/>
        <x-field :id="$p.'seats'" name="show_seats" type="checkbox" label="Show “only N seats left” (15 or fewer)" :value="$o?->show_seats ?? true"/>
        <x-field :id="$p.'act'" name="is_active" type="checkbox" label="Active" :value="$o?->is_active ?? false"/>
      </div>
      <button class="btn btn-primary mt-1" type="submit">Save promotion</button>
    </form>
  </div>
</div>
@endforeach

@foreach($offers->filter(fn ($o) => $o->slug) as $o)
<div class="modal" id="link-{{ $o->id }}" role="dialog" aria-modal="true" aria-labelledby="link-h-{{ $o->id }}">
  <div class="modal-box" data-link-builder data-base="{{ $o->landingUrl() }}" data-qr="{{ route('admin.offers.qr') }}">
    <div class="row between"><h2 id="link-h-{{ $o->id }}" style="font-size:1.2rem">Share “{{ $o->name }}”</h2><button class="icon-btn" type="button" data-modal-close aria-label="Close"><x-icon name="x" :size="18"/></button></div>
    <p class="small muted">Build a tracked link for each channel. Leads, applications and admissions from it appear under that source and campaign in Marketing analytics.</p>
    <div class="form-grid">
      <div class="field"><label class="label" for="lb-s-{{ $o->id }}">Source</label><select class="select" id="lb-s-{{ $o->id }}" data-lb="utm_source"><option>facebook</option><option>instagram</option><option>linkedin</option><option>google</option><option>whatsapp</option><option>youtube</option><option>tiktok</option><option>email</option><option>flyer</option></select></div>
      <div class="field"><label class="label" for="lb-m-{{ $o->id }}">Medium</label><select class="select" id="lb-m-{{ $o->id }}" data-lb="utm_medium"><option value="paid_social">Paid social</option><option value="social">Organic social</option><option value="cpc">Search ads (CPC)</option><option value="message">Message / broadcast</option><option value="email">Email</option><option value="qr">QR code / print</option><option value="referral">Partner / referral</option></select></div>
      <div class="field full"><label class="label" for="lb-c-{{ $o->id }}">Campaign</label><input class="input" id="lb-c-{{ $o->id }}" data-lb="utm_campaign" value="{{ $o->slug }}"></div>
    </div>
    <div class="field"><label class="label" for="lb-out-{{ $o->id }}">Your link</label><input class="input mono" id="lb-out-{{ $o->id }}" data-lb-out readonly></div>
    <div class="row gap-1" style="flex-wrap:wrap">
      <button class="btn btn-primary btn-sm" type="button" data-lb-copy><x-icon name="copy" :size="14"/> Copy</button>
      <a class="btn btn-secondary btn-sm" data-lb-wa target="_blank" rel="noopener" href="#"><x-icon name="whatsapp" :size="14"/> Share on WhatsApp</a>
      <a class="btn btn-secondary btn-sm" data-lb-qr href="#"><x-icon name="qr-code" :size="14"/> Download QR code</a>
      <a class="btn btn-ghost btn-sm" href="{{ $o->landingUrl() }}" target="_blank" rel="noopener"><x-icon name="external-link" :size="14"/> Open landing page</a>
    </div>
  </div>
</div>
@endforeach
@endsection
@push('scripts')<script src="{{ asset_v('assets/js/ops.js') }}" defer nonce="{{ csp_nonce() }}"></script>@endpush