@extends('layouts.dashboard')
@section('title', 'Bestellung '.$order->reference.' · TacForce Pro')

@section('content')
  <div class="mx-auto max-w-2xl">
    <div class="mb-6">
      <span class="font-mono text-xs font-medium uppercase tracking-[0.2em] text-blue-600 dark:text-blue-400">// Bestellung {{ $order->reference }}</span>
      <h1 class="mt-1 text-2xl font-semibold tracking-tight text-zinc-900 dark:text-white">
        @if ($order->isPaid()) Bezahlt — {{ ucfirst($order->plan) }} aktiv ✓ @else Fast fertig — bitte überweisen @endif
      </h1>
      <p class="mt-1 text-sm text-zinc-500 dark:text-zinc-400">Plan <strong>{{ ucfirst($order->plan) }}</strong> für <strong>{{ $guild->name }}</strong>.</p>
    </div>

    @if ($order->isPaid())
      <div class="rounded-xl border border-emerald-500/30 bg-emerald-500/10 p-5 text-sm text-emerald-700 dark:text-emerald-300">
        Zahlung eingegangen — dein Server ist auf <strong>{{ ucfirst($order->plan) }}</strong>. Viel Spaß!
      </div>
    @else
      <div class="tf-hud rounded-xl border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-900 p-6">
        <h2 class="text-sm font-semibold text-zinc-900 dark:text-white">Überweise per Vorkasse</h2>
        <dl class="mt-4 divide-y divide-zinc-100 dark:divide-zinc-800 text-sm">
          <div class="flex items-center justify-between py-2.5">
            <dt class="text-zinc-500">Betrag</dt>
            <dd class="font-semibold text-zinc-900 dark:text-white">{{ $order->amountLabel() }} / Monat</dd>
          </div>
          <div class="flex items-center justify-between py-2.5">
            <dt class="text-zinc-500">Empfänger</dt>
            <dd class="text-zinc-900 dark:text-white">{{ $bank['holder'] }}</dd>
          </div>
          <div class="flex items-center justify-between py-2.5">
            <dt class="text-zinc-500">IBAN</dt>
            <dd class="font-mono text-zinc-900 dark:text-white">{{ $bank['iban'] }}</dd>
          </div>
          @if ($bank['bic'])
          <div class="flex items-center justify-between py-2.5">
            <dt class="text-zinc-500">BIC</dt>
            <dd class="font-mono text-zinc-900 dark:text-white">{{ $bank['bic'] }}</dd>
          </div>
          @endif
          <div class="flex items-center justify-between py-2.5">
            <dt class="text-zinc-500">Verwendungszweck <span class="text-red-500">(wichtig!)</span></dt>
            <dd class="font-mono font-semibold text-blue-600 dark:text-blue-400">{{ $order->reference }}</dd>
          </div>
        </dl>
        <p class="mt-4 text-xs text-zinc-500 dark:text-zinc-400">
          Gib den <strong>Verwendungszweck {{ $order->reference }}</strong> unbedingt an — daran erkennen wir deine Zahlung.
          Nach Eingang schalten wir <strong>{{ $guild->name }}</strong> automatisch benachrichtigt frei (meist innerhalb 24 h).
        </p>

        {{-- PayPal (vorbereitet) --}}
        <div class="mt-5 border-t border-zinc-100 dark:border-zinc-800 pt-5">
          @if (!empty($paypal['pay_link']))
            <a href="{{ $paypal['pay_link'] }}" target="_blank" rel="noopener"
               class="inline-flex items-center gap-2 rounded-lg bg-[#0070ba] hover:bg-[#005ea6] text-white text-sm font-semibold px-4 py-2.5 transition">
              Alternativ mit PayPal zahlen
            </a>
            <p class="mt-2 text-xs text-zinc-500">Verwendungszweck/Notiz: {{ $order->reference }}</p>
          @else
            <span class="inline-flex items-center gap-2 rounded-lg bg-zinc-100 dark:bg-zinc-800 text-zinc-400 text-sm font-medium px-4 py-2.5 cursor-not-allowed">
              PayPal — bald verfügbar
            </span>
          @endif
        </div>
      </div>

      <p class="mt-4 text-sm">
        <a href="{{ route('dashboard.overview', $guild) }}" class="text-zinc-500 hover:text-zinc-800 dark:text-zinc-400 dark:hover:text-zinc-200">← Zurück zum Dashboard</a>
      </p>
    @endif
  </div>
@endsection