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

@section('content')
<div
  x-data="{
    form: { name:'', invite_url:'', description:'', position:0 }
  }"
  @if ($errors->any()) x-init="$refs.formCard.scrollIntoView({ block:'center' })" @endif
>

  <div class="mb-6">
    <h1 class="text-2xl font-semibold tracking-tight text-zinc-900 dark:text-white">Partner</h1>
    <p class="mt-1 text-sm text-zinc-500 dark:text-zinc-400">
      Partner-Server verwalten. Der Bot zeigt sie über <code class="rounded bg-zinc-100 dark:bg-zinc-800 px-1 py-0.5 text-[12px]">/partner</code> an.
      <span class="text-zinc-400 dark:text-zinc-500">{{ $partners->count() }} Partner</span>
    </p>
  </div>

  <div class="grid grid-cols-1 gap-6 xl:grid-cols-3">

    {{-- LIST --}}
    <div class="xl:col-span-2">
      <section class="rounded-xl border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-900">
        <div class="border-b border-zinc-200 dark:border-zinc-800 px-5 py-4">
          <h2 class="text-[15px] font-semibold text-zinc-900 dark:text-white">Partner-Server</h2>
        </div>

        @if ($partners->isEmpty())
          <div class="px-5 py-12 text-center">
            <div class="mx-auto flex h-10 w-10 items-center justify-center rounded-full bg-zinc-100 dark:bg-zinc-800 text-zinc-400 dark:text-zinc-500"><x-icon name="link" class="h-5 w-5" /></div>
            <p class="mt-3 text-sm text-zinc-500 dark:text-zinc-400">Noch keine Partner. Lege rechts den ersten an.</p>
          </div>
        @else
          <ul class="divide-y divide-zinc-100 dark:divide-zinc-800">
            @foreach ($partners as $partner)
              <li class="flex items-start gap-3 px-5 py-4 hover:bg-zinc-50 dark:hover:bg-zinc-800/40 transition">
                <div class="mt-0.5 flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-blue-500/10 text-blue-600 dark:text-blue-400">
                  <x-icon name="link" class="h-4 w-4" stroke="1.7" />
                </div>
                <div class="min-w-0 flex-1">
                  <div class="flex items-center gap-2">
                    <p class="truncate font-medium text-zinc-900 dark:text-white">{{ $partner->name }}</p>
                    <span class="shrink-0 rounded-full bg-zinc-500/10 px-2 py-0.5 text-[11px] font-medium text-zinc-500 ring-1 ring-zinc-500/20">#{{ $partner->position }}</span>
                  </div>
                  @if ($partner->description)
                    <p class="mt-0.5 text-[13px] text-zinc-500 dark:text-zinc-400">{{ $partner->description }}</p>
                  @endif
                  @if ($partner->invite_url)
                    <a href="{{ $partner->invite_url }}" target="_blank" rel="noopener noreferrer"
                      class="mt-1 inline-flex items-center gap-1 text-[12px] font-medium text-blue-600 dark:text-blue-400 hover:underline">
                      <x-icon name="external" class="h-3.5 w-3.5" stroke="1.7" />
                      <span class="truncate">{{ $partner->invite_url }}</span>
                    </a>
                  @endif
                </div>
                {{-- Delete (confirm) --}}
                <div x-data="{ confirm: false }" class="relative shrink-0">
                  <button type="button" title="Löschen" @click="confirm = true" class="flex h-8 w-8 items-center justify-center rounded-md text-zinc-500 dark:text-zinc-400 hover:bg-red-500/10 hover:text-red-600 dark:hover:text-red-400 transition">
                    <x-icon name="trash" class="h-4 w-4" stroke="1.7" />
                  </button>
                  <div x-show="confirm" x-cloak @click.outside="confirm = false" x-transition
                    class="absolute right-0 top-full z-30 mt-2 w-64 rounded-lg border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-900 p-3 text-left shadow-lg">
                    <p class="text-[13px] font-medium text-zinc-900 dark:text-white">Partner „{{ $partner->name }}" entfernen?</p>
                    <p class="mt-1 text-[12px] text-zinc-500 dark:text-zinc-400">Dies kann nicht rückgängig gemacht werden.</p>
                    <div class="mt-3 flex justify-end gap-2">
                      <button type="button" @click="confirm = false" class="rounded-md border border-zinc-200 dark:border-zinc-800 px-2.5 py-1.5 text-[12px] font-medium text-zinc-700 dark:text-zinc-200 hover:bg-zinc-100 dark:hover:bg-zinc-800">Abbrechen</button>
                      <form method="POST" action="{{ route('dashboard.partners.destroy', [$guild, $partner]) }}">
                        @csrf @method('DELETE')
                        <button type="submit" class="rounded-md bg-red-600 hover:bg-red-500 px-2.5 py-1.5 text-[12px] font-medium text-white">Entfernen</button>
                      </form>
                    </div>
                  </div>
                </div>
              </li>
            @endforeach
          </ul>
        @endif
      </section>
    </div>

    {{-- CREATE FORM --}}
    <div class="xl:col-span-1" x-ref="formCard">
      <form method="POST" action="{{ route('dashboard.partners.store', $guild) }}"
        x-data="{ submitting: false }" @submit="submitting = true"
        class="rounded-xl border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-900">
        @csrf

        <div class="border-b border-zinc-200 dark:border-zinc-800 px-5 py-4">
          <h2 class="text-[15px] font-semibold text-zinc-900 dark:text-white">Neuer Partner</h2>
        </div>

        <div class="space-y-4 p-5">
          <div>
            <label class="block text-sm font-medium text-zinc-700 dark:text-zinc-300 mb-1.5">Name</label>
            <input name="name" type="text" x-model="form.name" required maxlength="100" placeholder="z. B. Community XY"
              class="w-full rounded-lg border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-950 px-3 py-2 text-sm placeholder:text-zinc-400 focus:border-blue-500 focus:ring-2 focus:ring-blue-500/30 outline-none @error('name') border-red-500 @enderror">
            @error('name') <p class="mt-1.5 text-xs text-red-600 dark:text-red-400">{{ $message }}</p> @enderror
          </div>

          <div>
            <label class="block text-sm font-medium text-zinc-700 dark:text-zinc-300 mb-1.5">Einladungs-Link</label>
            <input name="invite_url" type="url" x-model="form.invite_url" maxlength="255" placeholder="https://discord.gg/…"
              class="w-full rounded-lg border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-950 px-3 py-2 text-sm placeholder:text-zinc-400 focus:border-blue-500 focus:ring-2 focus:ring-blue-500/30 outline-none @error('invite_url') border-red-500 @enderror">
            @error('invite_url') <p class="mt-1.5 text-xs text-red-600 dark:text-red-400">{{ $message }}</p> @enderror
          </div>

          <div>
            <label class="block text-sm font-medium text-zinc-700 dark:text-zinc-300 mb-1.5">Beschreibung</label>
            <textarea name="description" x-model="form.description" rows="3" maxlength="500" placeholder="Kurzbeschreibung (optional)"
              class="w-full rounded-lg border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-950 px-3 py-2 text-sm placeholder:text-zinc-400 focus:border-blue-500 focus:ring-2 focus:ring-blue-500/30 outline-none @error('description') border-red-500 @enderror"></textarea>
            @error('description') <p class="mt-1.5 text-xs text-red-600 dark:text-red-400">{{ $message }}</p> @enderror
          </div>

          <div>
            <label class="block text-sm font-medium text-zinc-700 dark:text-zinc-300 mb-1.5">Reihenfolge</label>
            <input name="position" type="number" inputmode="numeric" min="0" max="9999" x-model="form.position" placeholder="0"
              class="w-full rounded-lg border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-950 px-3 py-2 text-sm placeholder:text-zinc-400 focus:border-blue-500 focus:ring-2 focus:ring-blue-500/30 outline-none @error('position') border-red-500 @enderror">
            <p class="mt-1.5 text-[12px] text-zinc-400 dark:text-zinc-500">Kleinere Zahl = weiter oben.</p>
            @error('position') <p class="mt-1.5 text-xs text-red-600 dark:text-red-400">{{ $message }}</p> @enderror
          </div>
        </div>

        <div class="flex items-center justify-end gap-2 border-t border-zinc-200 dark:border-zinc-800 px-5 py-4">
          <button type="submit" :disabled="submitting"
            class="inline-flex items-center gap-2 rounded-lg bg-blue-600 hover:bg-blue-500 px-4 py-2.5 text-sm font-medium text-white transition disabled:opacity-60 disabled:cursor-not-allowed">
            <span x-show="!submitting">Hinzufügen</span>
            <span x-show="submitting" x-cloak>Speichere…</span>
          </button>
        </div>
      </form>
    </div>
  </div>
</div>
@endsection