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

@php
  $unlimited = $maxForms >= PHP_INT_MAX;
@endphp

@section('content')
<div
  x-data="{
    editing: null,
    form: { title:'', description:'', target_channel_id:'', staff_role_id:'', accepted_role_id:'', accept_message:'', reject_message:'', is_enabled:true },
    questions: [],
    open(f) {
      this.editing = f.id;
      this.form = {
        title: f.title ?? '', description: f.description ?? '',
        target_channel_id: f.target_channel_id ?? '', staff_role_id: f.staff_role_id ?? '',
        accepted_role_id: f.accepted_role_id ?? '', accept_message: f.accept_message ?? '',
        reject_message: f.reject_message ?? '', is_enabled: !!f.is_enabled
      };
      this.questions = (f.questions ?? []).map(q => ({ label: q.label ?? '', placeholder: q.placeholder ?? '', required: !!q.required }));
      if (this.questions.length === 0) this.addQuestion();
      this.$refs.formCard.scrollIntoView({ behavior:'smooth', block:'center' });
    },
    addQuestion() { this.questions.push({ label:'', placeholder:'', required:true }); },
    removeQuestion(i) { this.questions.splice(i, 1); },
    reset() {
      this.editing = null;
      this.form = { title:'', description:'', target_channel_id:'', staff_role_id:'', accepted_role_id:'', accept_message:'', reject_message:'', is_enabled:true };
      this.questions = [{ label:'', placeholder:'', required:true }];
    }
  }"
  x-init="questions = [{ label:'', placeholder:'', required:true }]"
>

  <div class="mb-6 flex flex-wrap items-end justify-between gap-4">
    <div>
      <h1 class="text-2xl font-semibold tracking-tight text-zinc-900 dark:text-white">Bewerbungen</h1>
      <p class="mt-1 text-sm text-zinc-500 dark:text-zinc-400">
        Bewerbungsformulare verwalten.
        <span class="text-zinc-400 dark:text-zinc-500">{{ $forms->count() }} / {{ $unlimited ? '∞' : $maxForms }} genutzt</span>
      </p>
    </div>
    <button type="button" @click="reset()" x-show="editing !== null"
      class="inline-flex items-center gap-2 rounded-lg border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-900 hover:bg-zinc-100 dark:hover:bg-zinc-800 px-4 py-2.5 text-sm font-medium text-zinc-700 dark:text-zinc-200 transition">
      <x-icon name="plus" class="h-4 w-4" /> Neues Formular
    </button>
  </div>

  @if ($atLimit)
    <div class="mb-6 flex items-start gap-3 rounded-xl border border-amber-500/30 bg-amber-500/10 p-4 text-sm text-amber-700 dark:text-amber-300">
      <x-icon name="alert" class="mt-0.5 h-4 w-4 shrink-0" />
      <span>Du hast das Formular-Limit deines Plans ({{ $maxForms }}) erreicht. <a href="{{ route('dashboard.billing', $guild) }}" class="underline font-medium">Plan upgraden</a>, um weitere Formulare anzulegen.</span>
    </div>
  @endif

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

    {{-- LIST --}}
    <div class="xl:col-span-1">
      <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">Formulare</h2>
        </div>

        @if ($forms->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="file-text" class="h-5 w-5" /></div>
            <p class="mt-3 text-sm text-zinc-500 dark:text-zinc-400">Noch keine Formulare. Erstelle rechts das erste.</p>
          </div>
        @else
          <ul class="divide-y divide-zinc-100 dark:divide-zinc-800">
            @foreach ($forms as $f)
              <li class="flex items-start justify-between gap-3 px-5 py-4">
                <div class="min-w-0">
                  <div class="flex items-center gap-2">
                    <p class="truncate text-[14px] font-medium text-zinc-900 dark:text-white">{{ $f->title }}</p>
                    @if ($f->is_enabled)
                      <span class="inline-flex rounded-full bg-emerald-500/10 px-2 py-0.5 text-[10px] font-medium text-emerald-600 dark:text-emerald-400 ring-1 ring-emerald-500/20">Aktiv</span>
                    @else
                      <span class="inline-flex rounded-full bg-zinc-500/10 px-2 py-0.5 text-[10px] font-medium text-zinc-500 ring-1 ring-zinc-500/20">Inaktiv</span>
                    @endif
                  </div>
                  <p class="mt-0.5 text-[12px] text-zinc-500 dark:text-zinc-400">{{ $f->questions->count() }} {{ \Illuminate\Support\Str::plural('Frage', $f->questions->count()) }}</p>
                </div>
                <div class="flex items-center gap-1.5">
                  @if ($f->target_channel_id)
                    <form method="POST" action="{{ route('dashboard.applications.panel', [$guild, $f]) }}">
                      @csrf
                      <button type="submit" title="Bewerbungs-Panel in den Ziel-Channel senden" class="flex h-8 w-8 items-center justify-center rounded-md text-zinc-500 dark:text-zinc-400 hover:bg-blue-500/10 hover:text-blue-600 dark:hover:text-blue-400 transition">
                        <x-icon name="send" class="h-4 w-4" stroke="1.7" />
                      </button>
                    </form>
                  @else
                    <span title="Erst eine Ziel-Channel-ID im Formular setzen" class="flex h-8 w-8 items-center justify-center rounded-md text-zinc-300 dark:text-zinc-600 cursor-not-allowed">
                      <x-icon name="send" class="h-4 w-4" stroke="1.7" />
                    </span>
                  @endif
                  <button type="button" title="Bearbeiten" @click='open(@json($f->loadMissing("questions")))' class="flex h-8 w-8 items-center justify-center rounded-md text-zinc-500 dark:text-zinc-400 hover:bg-zinc-100 dark:hover:bg-zinc-800 hover:text-zinc-900 dark:hover:text-white transition">
                    <x-icon name="pencil" class="h-4 w-4" stroke="1.7" />
                  </button>
                  <div x-data="{ confirm: false }" class="relative">
                    <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">Formular „{{ $f->title }}" löschen?</p>
                      <p class="mt-1 text-[12px] text-zinc-500 dark:text-zinc-400">Alle Fragen werden mitgelöscht.</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.applications.destroy', [$guild, $f]) }}">
                          @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">Löschen</button>
                        </form>
                      </div>
                    </div>
                  </div>
                </div>
              </li>
            @endforeach
          </ul>
        @endif
      </section>
    </div>

    {{-- CREATE / EDIT FORM --}}
    <div class="xl:col-span-2" x-ref="formCard">
      <form method="POST"
        :action="editing ? '{{ route('dashboard.applications', $guild) }}/' + editing : '{{ route('dashboard.applications.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
        <template x-if="editing"><input type="hidden" name="_method" value="PUT"></template>

        <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" x-text="editing ? 'Formular bearbeiten' : 'Neues Formular'"></h2>
        </div>

        <div class="space-y-5 p-5">
          <div>
            <label class="block text-sm font-medium text-zinc-700 dark:text-zinc-300 mb-1.5">Titel</label>
            <input name="title" type="text" x-model="form.title" required maxlength="120" placeholder="z. B. Team-Bewerbung"
              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('title') border-red-500 @enderror">
            @error('title') <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" rows="2" x-model="form.description" maxlength="2000" placeholder="Worum geht es in dieser Bewerbung?"
              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 class="grid grid-cols-1 gap-5 sm:grid-cols-3">
            <div>
              <label class="block text-sm font-medium text-zinc-700 dark:text-zinc-300 mb-1.5">Ziel-Channel-ID</label>
              <input name="target_channel_id" type="text" inputmode="numeric" x-model="form.target_channel_id" placeholder="Bewerbungen landen hier"
                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('target_channel_id') border-red-500 @enderror">
              @error('target_channel_id') <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">Team-Rollen-ID</label>
              <input name="staff_role_id" type="text" inputmode="numeric" x-model="form.staff_role_id" placeholder="Prüft Bewerbungen"
                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('staff_role_id') border-red-500 @enderror">
              @error('staff_role_id') <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">Rolle bei Annahme</label>
              <input name="accepted_role_id" type="text" inputmode="numeric" x-model="form.accepted_role_id" placeholder="Rolle nach Annahme"
                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('accepted_role_id') border-red-500 @enderror">
              @error('accepted_role_id') <p class="mt-1.5 text-xs text-red-600 dark:text-red-400">{{ $message }}</p> @enderror
            </div>
          </div>

          <div class="grid grid-cols-1 gap-5 sm:grid-cols-2">
            <div>
              <label class="block text-sm font-medium text-zinc-700 dark:text-zinc-300 mb-1.5">Nachricht bei Annahme</label>
              <textarea name="accept_message" rows="2" x-model="form.accept_message" maxlength="2000" placeholder="Glückwunsch, du wurdest angenommen!"
                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"></textarea>
            </div>
            <div>
              <label class="block text-sm font-medium text-zinc-700 dark:text-zinc-300 mb-1.5">Nachricht bei Ablehnung</label>
              <textarea name="reject_message" rows="2" x-model="form.reject_message" maxlength="2000" placeholder="Leider hat es diesmal nicht geklappt."
                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"></textarea>
            </div>
          </div>

          {{-- Questions repeater --}}
          <div>
            <div class="mb-2 flex items-center justify-between">
              <label class="block text-sm font-medium text-zinc-700 dark:text-zinc-300">Fragen</label>
              <button type="button" @click="addQuestion()" class="inline-flex items-center gap-1.5 rounded-md border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-900 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 transition">
                <x-icon name="plus" class="h-3.5 w-3.5" /> Frage hinzufügen
              </button>
            </div>
            @error('questions') <p class="mb-2 text-xs text-red-600 dark:text-red-400">{{ $message }}</p> @enderror

            <div class="space-y-3">
              <template x-for="(q, i) in questions" :key="i">
                <div class="rounded-lg border border-zinc-200 dark:border-zinc-800 bg-zinc-50 dark:bg-zinc-950 p-3">
                  <div class="flex items-start gap-2">
                    <span class="mt-2 text-[12px] font-medium text-zinc-400 dark:text-zinc-500" x-text="'#' + (i + 1)"></span>
                    <div class="grid flex-1 grid-cols-1 gap-2 sm:grid-cols-2">
                      <input type="text" :name="'questions[' + i + '][label]'" x-model="q.label" placeholder="Frage (z. B. Wie alt bist du?)"
                        class="w-full rounded-lg border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-900 px-3 py-2 text-sm placeholder:text-zinc-400 focus:border-blue-500 focus:ring-2 focus:ring-blue-500/30 outline-none">
                      <input type="text" :name="'questions[' + i + '][placeholder]'" x-model="q.placeholder" placeholder="Platzhalter (optional)"
                        class="w-full rounded-lg border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-900 px-3 py-2 text-sm placeholder:text-zinc-400 focus:border-blue-500 focus:ring-2 focus:ring-blue-500/30 outline-none">
                    </div>
                    <button type="button" @click="removeQuestion(i)" title="Entfernen" class="mt-1.5 flex h-7 w-7 items-center justify-center rounded-md text-zinc-400 dark:text-zinc-500 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>
                  <label class="mt-2 flex items-center gap-2 pl-6 text-[12px] text-zinc-600 dark:text-zinc-400">
                    <input type="hidden" :name="'questions[' + i + '][required]'" :value="q.required ? 1 : 0">
                    <input type="checkbox" x-model="q.required" class="h-4 w-4 rounded border-zinc-300 dark:border-zinc-700 text-blue-600 focus:ring-blue-500/30">
                    Pflichtfeld
                  </label>
                </div>
              </template>
              <p x-show="questions.length === 0" class="text-[13px] text-zinc-500 dark:text-zinc-400">Noch keine Fragen — füge oben welche hinzu.</p>
            </div>
          </div>

          <div class="flex items-center justify-between rounded-lg border border-zinc-200 dark:border-zinc-800 bg-zinc-50 dark:bg-zinc-950 px-3 py-2.5">
            <span class="text-sm font-medium text-zinc-700 dark:text-zinc-300">Formular aktiv</span>
            <input type="hidden" name="is_enabled" :value="form.is_enabled ? 1 : 0">
            <button type="button" @click="form.is_enabled = !form.is_enabled" role="switch" :aria-checked="form.is_enabled ? 'true' : 'false'"
              :class="form.is_enabled ? 'bg-blue-600' : 'bg-zinc-300 dark:bg-zinc-700'"
              class="relative h-6 w-11 shrink-0 rounded-full transition">
              <span :class="form.is_enabled ? 'translate-x-5' : 'translate-x-0.5'" class="absolute top-0.5 h-5 w-5 rounded-full bg-white shadow transition"></span>
            </button>
          </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="button" x-show="editing !== null" @click="reset()" class="rounded-lg border border-zinc-200 dark:border-zinc-800 px-3 py-2.5 text-sm font-medium text-zinc-700 dark:text-zinc-200 hover:bg-zinc-100 dark:hover:bg-zinc-800 transition">Abbrechen</button>
          <button type="submit" :disabled="submitting || ({{ $atLimit ? 'true' : 'false' }} && editing === null)"
            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" x-text="editing ? 'Speichern' : 'Erstellen'"></span>
            <span x-show="submitting" x-cloak>Speichere…</span>
          </button>
        </div>
      </form>
    </div>
  </div>
</div>
@endsection