@extends('layouts.app')
@section('title', 'Sponsorship tiers')
@section('content')
<div class="page__head">
  <div><h1>Sponsorship tiers</h1><p>Create the tiers the website offers to sponsors, with their benefits, souvenirs and the comparison table.</p></div>
  <div class="page__actions"><a class="btn" href="{{ route('sponsors.tiers.create') }}"><x-icon name="plus"/> Add tier</a></div>
</div>
<div class="tabs"><a href="{{ route('sponsors.index') }}">Sponsors</a><a class="is-active" href="{{ route('sponsors.tiers') }}">Tiers</a></div>


<div class="lotgrid">
  @forelse ($tiers as $t)
    <div class="lot" style="{{ $t->active ? '' : 'opacity:.65' }}">
      <div style="display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap">
        <span class="lot__no">TIER {{ str_pad($t->position, 2, '0', STR_PAD_LEFT) }} · <span class="mono">{{ $t->slug }}</span></span>
        <span style="display:flex;gap:6px">
          @if (! $t->active)<span class="badge badge--warn">Hidden</span>@endif
          @if ($t->is_top)<span class="badge badge--bad">Top tier</span>@endif
        </span>
      </div>
      <h3>{{ $t->name }}</h3>
      <p class="lot__price">{{ $t->price_kobo !== null ? '₦'.number_format($t->price_kobo / 100) : 'Price: coming soon' }}</p>
      <ul style="margin:0;padding-left:18px;color:var(--ink-2);font-size:14px">
        @foreach (array_slice($t->benefits ?? [], 0, 4) as $b)<li>{{ $b }}</li>@endforeach
        @if (count($t->benefits ?? []) > 4)<li style="list-style:none;color:var(--ink-3)">+ {{ count($t->benefits) - 4 }} more</li>@endif
      </ul>
      <p class="lot__meta">{{ count($t->souvenirs ?? []) }} souvenirs · {{ $counts[$t->slug] ?? 0 }} sponsors</p>
      <div class="lot__foot">
        <a class="btn btn--sm" href="{{ route('sponsors.tiers.edit', $t) }}"><x-icon name="edit"/> Edit</a>
        <form method="post" action="{{ route('sponsors.tiers.destroy', $t) }}" data-confirm="Delete {{ $t->name }}? This can't be undone.">@csrf @method('DELETE')
          <button class="btn btn--ghost btn--sm"><x-icon name="trash"/></button></form>
      </div>
    </div>
  @empty
    <div class="card empty" style="grid-column:1/-1">No tiers yet.</div>
  @endforelse
</div>

<div class="section">
  <div style="display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px">
    <div><p class="eyebrow" style="margin:0">Comparison table rows</p>
      <p style="color:var(--ink-2);font-size:14px">The “Compare tiers” table on the sponsorship page. Set what each tier gets for a row by editing the tier.</p></div>
    <button class="btn btn--ghost btn--sm" data-modal="rowModal"><x-icon name="plus"/> Add row</button>
  </div>
  <div class="tablewrap"><table class="t">
    <thead><tr><th class="num" style="width:90px">Order</th><th>Benefit</th><th></th></tr></thead>
    <tbody>
    @forelse ($benefits as $b)
      <tr>
        <td class="num">{{ $b->position }}</td><td>{{ $b->label }}</td>
        <td style="white-space:nowrap;text-align:right">
          <button class="btn btn--ghost btn--sm" data-modal="editRowModal" data-action="{{ route('sponsors.benefits.update', $b) }}" data-fill="{{ json_encode(['label' => $b->label, 'position' => $b->position]) }}"><x-icon name="edit"/></button>
          <form style="display:inline" method="post" action="{{ route('sponsors.benefits.destroy', $b) }}" data-confirm="Remove “{{ $b->label }}”? It disappears from every tier's comparison.">@csrf @method('DELETE')<button class="btn btn--ghost btn--sm"><x-icon name="trash"/></button></form>
        </td>
      </tr>
    @empty <tr><td colspan="3" class="empty">No rows yet.</td></tr> @endforelse
    </tbody>
  </table></div>
</div>

<div class="modal" id="rowModal"><form class="modal__box" method="post" action="{{ route('sponsors.benefits.store') }}">@csrf
  <h2>Add comparison row</h2>
  <div class="field"><label>Benefit</label><input class="input" name="label" maxlength="255" placeholder="e.g. VIP lounge access" required></div>
  <div class="modal__foot"><button type="button" class="btn btn--ghost" data-close>Cancel</button><button class="btn">Add row</button></div>
</form></div>
<div class="modal" id="editRowModal"><form class="modal__box" method="post" action="#">@csrf @method('PUT')
  <h2>Edit row</h2>
  <div class="field"><label>Benefit</label><input class="input" name="label" maxlength="255" required></div>
  <div class="field"><label>Order</label><input class="input" type="number" name="position" min="0" max="999" required></div>
  <div class="modal__foot"><button type="button" class="btn btn--ghost" data-close>Cancel</button><button class="btn">Save</button></div>
</form></div>
@endsection