@extends('layouts.app')
@section('title', $tier->exists ? 'Edit '.$tier->name : 'Add tier')
@section('content')
@php use App\Models\SponsorTier; $matrix = $tier->matrix ?? []; @endphp
<div class="page__head">
  <div>
    <p class="eyebrow"><a href="{{ route('sponsors.tiers') }}">← Tiers</a></p>
    <h1>{{ $tier->exists ? 'Edit '.$tier->name : 'Add sponsorship tier' }}</h1>
    <p>Everything here appears on the sponsorship page and the home page as soon as you save.</p>
  </div>
</div>

<form method="post" action="{{ $tier->exists ? route('sponsors.tiers.update', $tier) : route('sponsors.tiers.store') }}" style="max-width:860px">
  @csrf @if ($tier->exists) @method('PUT') @endif

  <p class="eyebrow">Basics</p>
  <div class="row">
    <div class="field"><label>Name</label><input class="input" name="name" value="{{ old('name', $tier->name) }}" maxlength="60" required></div>
    <div class="field"><label>Price (₦) <span style="color:var(--ink-3)">leave empty for “coming soon”</span></label><input class="input" type="number" name="price" min="0" step="1000" value="{{ old('price', $tier->price_kobo !== null ? $tier->price_kobo / 100 : '') }}"></div>
  </div>
  <div class="row--3 row">
    <div class="field"><label>Order on the site</label><input class="input" type="number" name="position" min="0" max="999" value="{{ old('position', $tier->position) }}" required></div>
    <div class="field"><label>Colour style</label>
      <select class="input" name="accent">@foreach (SponsorTier::ACCENTS as $k => $v)<option value="{{ $k }}" @selected(old('accent', $tier->accent) === $k)>{{ $v }}</option>@endforeach</select></div>
    <div class="field"><label>Logo slots on home page</label><input class="input" type="number" name="logo_slots" min="1" max="8" value="{{ old('logo_slots', $tier->logo_slots) }}" required></div>
  </div>
  <div class="field"><label>Short line in the sign-up form</label><input class="input" name="form_detail" maxlength="255" value="{{ old('form_detail', $tier->form_detail) }}" placeholder="e.g. Speaking segment, top awards, auction preview"></div>
  <div style="display:flex;gap:26px;flex-wrap:wrap;margin-bottom:8px">
    <label class="toggle"><input type="checkbox" name="active" value="1" @checked(old('active', $tier->active))> Active: shown on the website</label>
    <label class="toggle"><input type="checkbox" name="is_top" value="1" @checked(old('is_top', $tier->is_top))> Top tier: highlighted</label>
  </div>

  <div class="row section" style="margin-top:26px">
    <div class="field"><label class="eyebrow">Benefits on the tier card <span style="text-transform:none;letter-spacing:0;color:var(--ink-3)">(one per line)</span></label>
      <textarea class="input" name="benefits" rows="8">{{ old('benefits', implode("\n", $tier->benefits ?? [])) }}</textarea></div>
    <div class="field"><label class="eyebrow">Souvenirs in the box <span style="text-transform:none;letter-spacing:0;color:var(--ink-3)">(one per line)</span></label>
      <textarea class="input" name="souvenirs" rows="8">{{ old('souvenirs', implode("\n", $tier->souvenirs ?? [])) }}</textarea></div>
  </div>

  <p class="eyebrow" style="margin-top:14px">Comparison table: what this tier gets</p>
  @if ($benefitRows->isEmpty())
    <p style="color:var(--ink-3)">No comparison rows yet. Add rows on the Tiers page first.</p>
  @else
  <div class="tablewrap"><table class="t">
    <tbody>
    @foreach ($benefitRows as $b)
      @php
        $v = $matrix[$b->id] ?? false;
        $mode = $v === true ? 'yes' : (is_string($v) && $v !== '' ? 'text' : 'no');
      @endphp
      <tr>
        <td style="width:36%"><strong>{{ $b->label }}</strong></td>
        <td style="width:190px"><select class="input js-mode" name="matrix[{{ $b->id }}][mode]">
          <option value="yes" @selected($mode === 'yes')>Included</option>
          <option value="no" @selected($mode === 'no')>Not included</option>
          <option value="text" @selected($mode === 'text')>Custom text…</option></select></td>
        <td><input class="input js-text" name="matrix[{{ $b->id }}][text]" value="{{ $mode === 'text' ? $v : '' }}" maxlength="200" placeholder="What this tier gets" @disabled($mode !== 'text')></td>
      </tr>
    @endforeach
    </tbody>
  </table></div>
  @endif

  <div style="display:flex;gap:10px;margin-top:26px">
    <button class="btn btn--lg">{{ $tier->exists ? 'Save changes' : 'Create tier' }}</button>
    <a class="btn btn--ghost btn--lg" href="{{ route('sponsors.tiers') }}">Cancel</a>
  </div>
</form>
@endsection
@push('scripts')
<script>
  document.querySelectorAll('.js-mode').forEach((sel) => {
    const text = sel.closest('tr').querySelector('.js-text');
    sel.addEventListener('change', () => { text.disabled = sel.value !== 'text'; if (!text.disabled) text.focus(); });
  });
</script>
@endpush