<script lang="ts">
  import { onMount } from 'svelte';

  let anrede = '';
  let vorname = '';
  let nachname = '';
  let geburtsdatum = '';
  let strasse = '';
  let hausnummer = '';
  let ort = '';
  let plz = '';
  let telefon = '';
  let email = '';
  let schulart = '';
  let zeitraum = '';
  let motivation = '';

  let wunsch1Id = '';
  let wunsch2Id = '';
  let wunsch3Id = '';
  let pdfDateien: File[] = [];

  let fehler = '';
  let success = false;
  let dienststellen: any[];

  onMount(async () => {
    const res = await fetch('/api/dienststellen');
    dienststellen = await res.json();
  });

  async function anmelden() {
    const data = new FormData();

    data.append('anrede', anrede);
    data.append('vorname', vorname);
    data.append('nachname', nachname);
    data.append('geburtsdatum', geburtsdatum);
    data.append('strasse', strasse);
    data.append('hausnummer', hausnummer);
    data.append('ort', ort);
    data.append('plz', plz);
    data.append('telefon', telefon);
    data.append('email', email);
    data.append('schulart', schulart);
    data.append('zeitraum', zeitraum);
    data.append('motivation', motivation);
    data.append('wunsch1Id', wunsch1Id);
    data.append('wunsch2Id', wunsch2Id);
    data.append('wunsch3Id', wunsch3Id);

    for (const pdf of pdfDateien) {
      data.append('pdfs', pdf);
    }

    const res = await fetch('/api/anmelden', {
      method: 'POST',
      body: data
  });  

    const result = await res.json();
    if (!res.ok) {
      fehler = result.error || 'Ein Fehler ist aufgetreten. Bitte versuchen Sie es später erneut.';
      success = false;
    } else {
      fehler = '';
      success = true;
    }
  }
</script>

<div class="min-h-screen bg-gray-100 flex items-center justify-center p-6">
  <form on:submit|preventDefault={anmelden}
    class="bg-white shadow-md rounded-2xl p-8 max-w-2xl w-full space-y-4">

    <h1 class="text-2xl font-bold text-gray-800 mb-4 text-center">Praktikumsanmeldung</h1>

    <!-- Anrede -->
    <select bind:value={anrede} required class="input">
      <option value="" disabled selected hidden>Anrede wählen</option>
      <option value="Herr">Herr</option>
      <option value="Frau">Frau</option>
      <option value="Divers">Divers</option>
    </select>

    <!-- Persönliche Daten -->
    <div class="grid grid-cols-2 gap-4">
      <input bind:value={vorname} placeholder="Vorname" required class="input" />
      <input bind:value={nachname} placeholder="Nachname" required class="input" />
      <input bind:value={geburtsdatum} type="date" placeholder="Geburtsdatum" required class="input col-span-2" />
      <input bind:value={strasse} placeholder="Straße" required class="input" />
      <input bind:value={hausnummer} placeholder="Hausnummer" required class="input" />
      <input bind:value={plz} placeholder="Postleitzahl" required class="input" />
      <input bind:value={ort} placeholder="Ort" required class="input" />
      <input bind:value={telefon} placeholder="Telefonnummer" required class="input col-span-2" />
      <input bind:value={email} type="email" placeholder="E-Mail-Adresse" required class="input col-span-2" />
      <input bind:value={schulart} placeholder="Schulart" required class="input col-span-2" />
      <input bind:value={zeitraum} placeholder="Wunschzeitraum fürs Praktikum" required class="input col-span-2" />
    </div>

    <!-- Wunschdienststellen -->
    <div class="grid grid-cols-1 gap-4">
      <select bind:value={wunsch1Id} required>
        <option value="" disabled selected>1. Wunschdienststelle</option>
        {#each dienststellen as d}
          <option value={d.id}>{d.name}</option>
        {/each}
      </select>

      <select bind:value={wunsch2Id} required>
        <option value="" disabled selected>2. Wunschdienststelle</option>
        {#each dienststellen as d}
          <option value={d.id}>{d.name}</option>
        {/each}
      </select>

      <select bind:value={wunsch3Id} required>
        <option value="" disabled selected>3. Wunschdienststelle</option>
        {#each dienststellen as d}
          <option value={d.id}>{d.name}</option>
        {/each}
    </select>
    </div>

    <!-- Motivation -->
    <textarea bind:value={motivation} placeholder="Motivation (optional)"
      class="w-full border border-gray-300 rounded-xl p-3 focus:outline-none focus:ring-2 focus:ring-blue-500 h-32 resize-none" >
    </textarea>

    <!-- Mehrere PDF Upload -->
    <div>
      <label for="pdf-upload" class="block text-gray-700 font-medium mb-1">PDFs hochladen (optional):</label>
      <input
        id="pdf-upload"
        type="file"
        accept="application/pdf"
        multiple
        on:change={(e) => pdfDateien = Array.from((e.target as HTMLInputElement).files || [])}
        class="input"
      />
    </div>

    <!-- Button -->
    <button type="submit"
      class="w-full bg-blue-600 text-white py-3 rounded-xl hover:bg-blue-700 transition-all">
      Jetzt anmelden
    </button>

    {#if success}
      <p class="text-green-600 font-semibold text-center">Anmeldung erfolgreich gesendet!</p>
    {/if}

    {#if fehler}
      <p class="text-red-600">{fehler}</p>
    {/if}
  </form>
</div>

<style>
  .input {
    @apply w-full border border-gray-300 rounded-xl p-3 focus:outline-none focus:ring-2 focus:ring-blue-500;
  }
</style>
