@extends('layouts.dashboard')
@section('title', 'Pro bestellen · '.$guild->name.' · TacForce Pro')

@section('content')
  <div class="mx-auto max-w-3xl">
    <div class="mb-6">
      <span class="font-mono text-xs font-medium uppercase tracking-[0.2em] text-blue-600 dark:text-blue-400">// Upgrade</span>
      <h1 class="mt-1 text-2xl font-semibold tracking-tight text-zinc-900 dark:text-white">Plan bestellen</h1>
      <p class="mt-1 text-sm text-zinc-500 dark:text-zinc-400">Für <strong>{{ $guild->name }}</strong>. Bezahlung per Vorkasse-Überweisung — danach schalten wir frei.</p>
    </div>

    <form method="POST" action="{{ route('dashboard.order.store', $guild) }}" x-data="{ plan: '{{ $selected }}' }">
      @csrf
      <div class="grid grid-cols-1 gap-4 sm:grid-cols-3">
        @foreach ($plans as $key => $p)
          <label class="cursor-pointer">
            <input type="radio" name="plan" value="{{ $key }}" x-model="plan" class="sr-only">
            <div class="tf-hud relative rounded-xl border bg-white dark:bg-zinc-900 p-5 transition"
                 :class="plan === '{{ $key }}' ? 'border-blue-500 ring-2 ring-blue-500/30' : 'border-zinc-200 dark:border-zinc-800'">
              <div class="flex items-center justify-between">
                <span class="font-semibold text-zinc-900 dark:text-white">{{ $p['name'] }}</span>
                <span class="h-4 w-4 rounded-full border-2" :class="plan === '{{ $key }}' ? 'border-blue-500 bg-blue-500' : 'border-zinc-300 dark:border-zinc-600'"></span>
              </div>
              <p class="mt-3 text-2xl font-bold text-zinc-900 dark:text-white">{{ number_format($p['price']/100, 2, ',', '.') }} {{ $currency }}<span class="text-sm font-medium text-zinc-500">/Mon</span></p>
            </div>
          </label>
        @endforeach
      </div>

      <div class="mt-5">
        <label class="block text-sm font-medium text-zinc-700 dark:text-zinc-300 mb-1.5">E-Mail für die Bestellbestätigung</label>
        <input type="email" name="customer_email" value="{{ old('customer_email', auth()->user()->email) }}"
               inputmode="email" autocapitalize="none"
               class="w-full max-w-sm rounded-lg border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-950 px-3 py-2.5 text-sm outline-none focus:border-blue-500 focus:ring-2 focus:ring-blue-500/30"
               placeholder="du@example.com">
      </div>

      <div class="mt-6 flex items-center gap-3">
        <button type="submit" class="inline-flex items-center gap-2 rounded-lg bg-blue-600 hover:bg-blue-500 text-white text-sm font-semibold px-5 py-2.5 shadow-lg shadow-blue-600/20 transition">
          Bestellung aufgeben
          <svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>
        </button>
        <a href="{{ route('dashboard.overview', $guild) }}" class="text-sm text-zinc-500 hover:text-zinc-800 dark:text-zinc-400 dark:hover:text-zinc-200">Abbrechen</a>
      </div>
      <p class="mt-3 text-xs text-zinc-500 dark:text-zinc-400">Im nächsten Schritt bekommst du Bankdaten + Verwendungszweck. Keine Vorab-Zahlung nötig.</p>
    </form>
  </div>
@endsection