@extends('admin.layout')

@section('title', __('Invitations'))

@section('content')
<div class="max-w-7xl mx-auto px-4 py-8 space-y-6"
     x-data="{
         preview: { show: false, url: '', testUrl: '' },
         openPreview(previewUrl, testUrl) {
             this.preview.url     = previewUrl;
             this.preview.testUrl = testUrl;
             this.preview.show    = true;
         }
     }">

    <div class="flex items-center justify-between">
        <h1 class="text-xl font-bold text-gray-800">{{ __('Invitations') }}</h1>
        <div x-data="{ open: false }" @click.outside="open = false" class="relative">
            <button @click="open = !open"
                    class="text-xs text-gray-400 hover:text-gray-600 flex items-center gap-1 transition">
                <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M9.879 7.519c1.171-1.025 3.071-1.025 4.242 0 1.172 1.025 1.172 2.687 0 3.712-.203.179-.43.326-.67.442-.745.361-1.45.999-1.45 1.827v.75M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9 5.25h.008v.008H12v-.008z"/>
                </svg>
                Hoe werkt dit?
            </button>
            <div x-show="open" x-transition x-cloak
                 class="absolute right-0 top-7 z-20 w-96 bg-white border border-gray-200 rounded-xl shadow-lg p-4 text-gray-700 text-xs space-y-2">
                <p class="font-semibold text-gray-800 text-sm">Uitnodigingen sturen</p>
                <p>Stuur gerichte uitnodigingen naar nieuwe gebruikers via e-mail of koppel ze aan een preset-template.</p>
                <ol class="list-decimal list-inside space-y-1 text-gray-600">
                    <li>Maak een <strong>preset</strong> aan met onderwerp en inhoud (eenmalig per campagne).</li>
                    <li>Voeg uitnodigingen toe — één per e-mailadres, of importeer een CSV.</li>
                    <li>Bekijk de preview via het oogje om de e-mail te controleren.</li>
                    <li>Stuur een <strong>testmail</strong> naar jezelf voordat je verstuurt.</li>
                    <li>Klik <strong>Verstuur</strong> om de uitnodiging daadwerkelijk te versturen.</li>
                </ol>
                <p class="text-gray-500">Verstuurde uitnodigingen zijn gemarkeerd en kunnen niet opnieuw worden verstuurd.</p>
            </div>
        </div>
    </div>

    {{-- Flash messages --}}
    @foreach (['success','warning','error','preset_success','preset_error'] as $key)
        @if (session($key))
            <div class="p-3 rounded-lg text-sm border
                {{ in_array($key, ['success','preset_success']) ? 'bg-emerald-50 border-emerald-200 text-emerald-700' : '' }}
                {{ $key === 'warning' ? 'bg-amber-50 border-amber-200 text-amber-700' : '' }}
                {{ in_array($key, ['error','preset_error']) ? 'bg-red-50 border-red-200 text-red-700' : '' }}">
                {{ session($key) }}
            </div>
        @endif
    @endforeach

    {{-- ─── Presets beheer ─────────────────────────────────────────────────── --}}
    <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6"
         x-data="{ open: {{ $presets->isEmpty() ? 'true' : 'false' }}, editing: null }">

        <button type="button" @click="open = !open"
                class="flex items-center gap-2 text-sm font-semibold text-gray-700 w-full text-left">
            <svg class="w-4 h-4 text-gray-400 transition-transform" :class="open ? 'rotate-90' : ''"
                 fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7"/>
            </svg>
            {{ __('Manage presets') }}
            <span class="ml-auto text-xs text-gray-400 font-normal">{{ $presets->count() }} {{ __('total') }}</span>
        </button>

        <div x-show="open" x-cloak class="mt-4 space-y-4">

            {{-- Bestaande presets --}}
            @forelse ($presets as $preset)
            <div x-data="{ edit: false }" class="border border-gray-100 rounded-lg p-3">
                {{-- Weergave --}}
                <div x-show="!edit" class="flex items-center gap-3 flex-wrap">
                    <span class="font-medium text-sm text-gray-700">{{ $preset->name }}</span>
                    <span class="text-xs px-1.5 py-0.5 rounded {{ $preset->tier === 'pro' ? 'bg-violet-100 text-violet-700' : 'bg-blue-100 text-blue-700' }}">{{ ucfirst($preset->tier) }}</span>
                    <span class="text-xs text-gray-500">{{ $preset->days }} {{ __('days free') }}</span>
                    <span class="text-xs text-gray-400">· {{ __('Token valid') }}: {{ $preset->token_validity_days }} {{ __('days') }}</span>
                    <div class="ml-auto flex gap-2">
                        <button type="button" @click="edit = true" class="text-xs text-indigo-600 hover:underline">{{ __('Edit') }}</button>
                        <form method="POST" action="{{ route('admin.invitation-presets.destroy', $preset) }}" onsubmit="return confirm('{{ __('Delete this preset?') }}')">
                            @csrf @method('DELETE')
                            <button type="submit" class="text-xs text-red-500 hover:underline">{{ __('Delete') }}</button>
                        </form>
                    </div>
                </div>
                {{-- Bewerk-formulier --}}
                <form x-show="edit" method="POST" action="{{ route('admin.invitation-presets.update', $preset) }}" class="space-y-3 mt-2">
                    @csrf @method('PUT')
                    <div class="grid grid-cols-2 sm:grid-cols-4 gap-3">
                        <div class="col-span-2 sm:col-span-1">
                            <label class="block text-xs font-medium text-gray-600 mb-1">{{ __('Name') }}</label>
                            <input type="text" name="name" value="{{ $preset->name }}" required
                                   class="w-full text-sm border border-gray-200 rounded px-2 py-1.5 focus:outline-none focus:ring-1 focus:ring-indigo-300">
                        </div>
                        <div>
                            <label class="block text-xs font-medium text-gray-600 mb-1">{{ __('Tier') }}</label>
                            <select name="tier" class="w-full text-sm border border-gray-200 rounded px-2 py-1.5 focus:outline-none focus:ring-1 focus:ring-indigo-300">
                                <option value="pro" {{ $preset->tier === 'pro' ? 'selected' : '' }}>Pro</option>
                                <option value="premium" {{ $preset->tier === 'premium' ? 'selected' : '' }}>Premium</option>
                            </select>
                        </div>
                        <div>
                            <label class="block text-xs font-medium text-gray-600 mb-1">{{ __('Free days') }}</label>
                            <input type="number" name="days" value="{{ $preset->days }}" min="1" max="3650" required
                                   class="w-full text-sm border border-gray-200 rounded px-2 py-1.5 focus:outline-none focus:ring-1 focus:ring-indigo-300">
                        </div>
                        <div>
                            <label class="block text-xs font-medium text-gray-600 mb-1">{{ __('Token validity (days)') }}</label>
                            <input type="number" name="token_validity_days" value="{{ $preset->token_validity_days }}" min="1" max="3650" required
                                   class="w-full text-sm border border-gray-200 rounded px-2 py-1.5 focus:outline-none focus:ring-1 focus:ring-indigo-300">
                        </div>
                    </div>
                    <div>
                        <label class="block text-xs font-medium text-gray-600 mb-1">{{ __('Default message') }}</label>
                        <textarea name="message" rows="3"
                                  class="w-full text-sm border border-gray-200 rounded px-2 py-1.5 focus:outline-none focus:ring-1 focus:ring-indigo-300"
                                  placeholder="{{ __('Leave empty for no default') }}">{{ $preset->message }}</textarea>
                    </div>
                    <div class="flex gap-2">
                        <button type="submit" class="px-3 py-1.5 bg-indigo-600 hover:bg-indigo-700 text-white text-xs font-medium rounded transition">{{ __('Save') }}</button>
                        <button type="button" @click="edit = false" class="px-3 py-1.5 bg-gray-100 text-gray-600 text-xs rounded hover:bg-gray-200 transition">{{ __('Cancel') }}</button>
                    </div>
                </form>
            </div>
            @empty
                <p class="text-sm text-gray-400">{{ __('No presets yet.') }}</p>
            @endforelse

            {{-- Nieuw preset formulier --}}
            <div x-data="{ open: false }" class="border border-dashed border-gray-200 rounded-lg p-3">
                <button type="button" @click="open = !open"
                        class="text-sm text-indigo-600 hover:underline">+ {{ __('New preset') }}</button>
                <form x-show="open" x-cloak method="POST" action="{{ route('admin.invitation-presets.store') }}" class="space-y-3 mt-3">
                    @csrf
                    <div class="grid grid-cols-2 sm:grid-cols-4 gap-3">
                        <div class="col-span-2 sm:col-span-1">
                            <label class="block text-xs font-medium text-gray-600 mb-1">{{ __('Name') }}</label>
                            <input type="text" name="name" required
                                   class="w-full text-sm border border-gray-200 rounded px-2 py-1.5 focus:outline-none focus:ring-1 focus:ring-indigo-300"
                                   placeholder="{{ __('e.g. Ambassadeur Pro') }}">
                        </div>
                        <div>
                            <label class="block text-xs font-medium text-gray-600 mb-1">{{ __('Tier') }}</label>
                            <select name="tier" class="w-full text-sm border border-gray-200 rounded px-2 py-1.5 focus:outline-none focus:ring-1 focus:ring-indigo-300">
                                <option value="pro">Pro</option>
                                <option value="premium">Premium</option>
                            </select>
                        </div>
                        <div>
                            <label class="block text-xs font-medium text-gray-600 mb-1">{{ __('Free days') }}</label>
                            <input type="number" name="days" value="120" min="1" max="3650" required
                                   class="w-full text-sm border border-gray-200 rounded px-2 py-1.5 focus:outline-none focus:ring-1 focus:ring-indigo-300">
                        </div>
                        <div>
                            <label class="block text-xs font-medium text-gray-600 mb-1">{{ __('Token validity (days)') }}</label>
                            <input type="number" name="token_validity_days" value="15" min="1" max="3650" required
                                   class="w-full text-sm border border-gray-200 rounded px-2 py-1.5 focus:outline-none focus:ring-1 focus:ring-indigo-300">
                        </div>
                    </div>
                    <div>
                        <label class="block text-xs font-medium text-gray-600 mb-1">{{ __('Default message') }}</label>
                        <textarea name="message" rows="3"
                                  class="w-full text-sm border border-gray-200 rounded px-2 py-1.5 focus:outline-none focus:ring-1 focus:ring-indigo-300"
                                  placeholder="{{ __('Leave empty for no default') }}"></textarea>
                    </div>
                    <button type="submit" class="px-3 py-1.5 bg-indigo-600 hover:bg-indigo-700 text-white text-xs font-medium rounded transition">{{ __('Save preset') }}</button>
                </form>
            </div>
        </div>
    </div>

    {{-- ─── Nieuw contact toevoegen ─────────────────────────────────────────── --}}
    <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6"
         x-data="{
            presets: {{ $presetsJson }},
            presetId: '',
            tier: 'pro',
            days: 120,
            tokenValidityDays: 15,
            message: '',
            selectPreset(id) {
                this.presetId = id;
                if (id && this.presets[id]) {
                    this.tier              = this.presets[id].tier;
                    this.days              = this.presets[id].days;
                    this.tokenValidityDays = this.presets[id].token_validity_days;
                    this.message           = this.presets[id].message;
                }
            }
         }">
        <h2 class="text-sm font-semibold text-gray-700 mb-4">{{ __('Add contact') }}</h2>
        <form method="POST" action="{{ route('admin.invitations.store') }}" class="space-y-4">
            @csrf

            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
                {{-- Actiepreset --}}
                <div>
                    <label class="block text-xs font-medium text-gray-600 mb-1">{{ __('Preset') }}</label>
                    <select class="w-full text-sm border border-gray-200 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-300"
                            @change="selectPreset($event.target.value)">
                        <option value="">{{ __('Custom') }}</option>
                        @foreach ($presets as $preset)
                            <option value="{{ $preset->id }}">{{ $preset->name }}</option>
                        @endforeach
                    </select>
                    {{-- hidden veld voor action_name, gevuld door Alpine --}}
                    <input type="hidden" name="action_name" x-bind:value="presets[presetId]?.name ?? ''">
                </div>

                {{-- Tier --}}
                <div>
                    <label class="block text-xs font-medium text-gray-600 mb-1">{{ __('Tier') }}</label>
                    <select name="tier" x-model="tier"
                            class="w-full text-sm border border-gray-200 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-300">
                        <option value="pro">Pro</option>
                        <option value="premium">Premium</option>
                    </select>
                </div>

                {{-- Voornaam --}}
                <div>
                    <label class="block text-xs font-medium text-gray-600 mb-1">{{ __('First name') }}</label>
                    <input type="text" name="contact_first_name" value="{{ old('contact_first_name') }}"
                           class="w-full text-sm border border-gray-200 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-300"
                           placeholder="Jan" autocomplete="off">
                </div>

                {{-- Familienaam --}}
                <div>
                    <label class="block text-xs font-medium text-gray-600 mb-1">{{ __('Last name') }}</label>
                    <input type="text" name="contact_last_name" value="{{ old('contact_last_name') }}"
                           class="w-full text-sm border border-gray-200 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-300"
                           placeholder="Jansen" autocomplete="off">
                </div>

                {{-- Praktijk --}}
                <div>
                    <label class="block text-xs font-medium text-gray-600 mb-1">{{ __('Practice') }}</label>
                    <input type="text" name="practice" value="{{ old('practice') }}"
                           class="w-full text-sm border border-gray-200 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-300"
                           placeholder="{{ __('Practice or organisation') }}" autocomplete="off">
                </div>

                {{-- E-mail --}}
                <div>
                    <label class="block text-xs font-medium text-gray-600 mb-1">E-mail</label>
                    <input type="email" name="contact_email" value="{{ old('contact_email') }}"
                           class="w-full text-sm border border-gray-200 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-300"
                           placeholder="jan@example.com" autocomplete="off">
                </div>

                {{-- Taal --}}
                <div>
                    <label class="block text-xs font-medium text-gray-600 mb-1">{{ __('Language') }}</label>
                    <select name="language"
                            class="w-full text-sm border border-gray-200 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-300">
                        <option value="">—</option>
                        <option value="nl" {{ old('language', 'nl') === 'nl' ? 'selected' : '' }}>Nederlands</option>
                        <option value="fr" {{ old('language', 'nl') === 'fr' ? 'selected' : '' }}>Français</option>
                        <option value="de" {{ old('language', 'nl') === 'de' ? 'selected' : '' }}>Deutsch</option>
                        <option value="es" {{ old('language', 'nl') === 'es' ? 'selected' : '' }}>Español</option>
                        <option value="en" {{ old('language', 'nl') === 'en' ? 'selected' : '' }}>English</option>
                    </select>
                </div>

                {{-- Gratis dagen --}}
                <div>
                    <label class="block text-xs font-medium text-gray-600 mb-1">{{ __('Free days') }}</label>
                    <input type="number" name="days" min="1" max="3650" x-model="days"
                           class="w-full text-sm border border-gray-200 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-300">
                </div>

                {{-- Token geldigheidsduur --}}
                <div>
                    <label class="block text-xs font-medium text-gray-600 mb-1">{{ __('Token validity (days)') }}</label>
                    <input type="number" name="token_validity_days" min="1" max="3650" x-model="tokenValidityDays"
                           class="w-full text-sm border border-gray-200 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-300">
                </div>
            </div>

            {{-- Bericht --}}
            <div>
                <label class="block text-xs font-medium text-gray-600 mb-1">{{ __('Message') }}</label>
                <textarea name="message" rows="4" x-model="message"
                          class="w-full text-sm border border-gray-200 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-300"
                          placeholder="{{ __('Personal message (optional)') }}"></textarea>
            </div>

            <label class="flex items-center gap-2 text-sm text-gray-600 cursor-pointer">
                <input type="checkbox" name="send_email" value="1" class="rounded border-gray-300 text-indigo-600">
                {{ __('Send invitation email immediately') }}
            </label>

            <button type="submit"
                    class="px-4 py-2 bg-indigo-600 hover:bg-indigo-700 text-white text-sm font-medium rounded-lg transition">
                {{ __('Add contact') }}
            </button>
        </form>
    </div>

    {{-- ─── CSV-import ──────────────────────────────────────────────────────── --}}
    <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6"
         x-data="{
            open: false,
            presets: {{ $presetsJson }},
            presetId: '',
            tier: 'pro',
            days: 120,
            tokenValidityDays: 15,
            selectPreset(id) {
                this.presetId = id;
                if (id && this.presets[id]) {
                    this.tier              = this.presets[id].tier;
                    this.days              = this.presets[id].days;
                    this.tokenValidityDays = this.presets[id].token_validity_days;
                }
            }
         }">

        <button type="button" @click="open = !open"
                class="flex items-center gap-2 text-sm font-semibold text-gray-700 w-full text-left">
            <svg class="w-4 h-4 text-gray-400 transition-transform" :class="open ? 'rotate-90' : ''"
                 fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7"/>
            </svg>
            {{ __('Import from CSV') }}
        </button>

        <div x-show="open" x-cloak class="mt-4">
            <p class="text-xs text-gray-400 mb-3">
                {{ __('CSV columns (header row required):') }}
                {{ __('comma or semicolon separated') }}. {{ __('All columns optional — form defaults apply when empty.') }}
            </p>
            <div class="mb-4 overflow-x-auto">
                <table class="text-xs border border-gray-100 rounded-lg w-full">
                    <thead class="bg-gray-50">
                        <tr class="text-left text-gray-500">
                            <th class="px-3 py-1.5 font-medium">{{ __('Column') }}</th>
                            <th class="px-3 py-1.5 font-medium">{{ __('Accepted values') }}</th>
                            <th class="px-3 py-1.5 font-medium">{{ __('Aliases') }}</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-gray-50">
                        <tr><td class="px-3 py-1"><code>voornaam</code></td><td class="px-3 py-1 text-gray-400">tekst</td><td class="px-3 py-1 text-gray-400">first_name, firstname</td></tr>
                        <tr><td class="px-3 py-1"><code>familienaam</code></td><td class="px-3 py-1 text-gray-400">tekst</td><td class="px-3 py-1 text-gray-400">last_name, achternaam</td></tr>
                        <tr><td class="px-3 py-1"><code>email</code></td><td class="px-3 py-1 text-gray-400">geldig e-mailadres</td><td class="px-3 py-1 text-gray-400">e-mail, mail</td></tr>
                        <tr><td class="px-3 py-1"><code>praktijk</code></td><td class="px-3 py-1 text-gray-400">tekst</td><td class="px-3 py-1 text-gray-400">practice, organisatie, bedrijf</td></tr>
                        <tr><td class="px-3 py-1"><code>preset</code></td><td class="px-3 py-1 text-gray-400">naam van een preset</td><td class="px-3 py-1 text-gray-400">—</td></tr>
                        <tr><td class="px-3 py-1"><code>abonnementsniveau</code></td><td class="px-3 py-1 text-gray-400">pro / premium</td><td class="px-3 py-1 text-gray-400">tier, niveau</td></tr>
                        <tr><td class="px-3 py-1"><code>gratis dagen</code></td><td class="px-3 py-1 text-gray-400">getal 1–3650</td><td class="px-3 py-1 text-gray-400">days, dagen</td></tr>
                        <tr><td class="px-3 py-1"><code>geldigheidsduur</code></td><td class="px-3 py-1 text-gray-400">getal 1–3650</td><td class="px-3 py-1 text-gray-400">token_validity_days, geldigheid</td></tr>
                        <tr><td class="px-3 py-1"><code>taal</code></td><td class="px-3 py-1 text-gray-400">nl / fr / de / es / en</td><td class="px-3 py-1 text-gray-400">language, lang</td></tr>
                    </tbody>
                </table>
            </div>

            <form method="POST" action="{{ route('admin.invitations.import') }}"
                  enctype="multipart/form-data" class="space-y-4">
                @csrf

                <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
                    {{-- CSV-bestand --}}
                    <div class="sm:col-span-2">
                        <label class="block text-xs font-medium text-gray-600 mb-1">CSV {{ __('File') }}</label>
                        <input type="file" name="csv_file" accept=".csv,.txt" required
                               class="w-full text-sm text-gray-500 file:mr-3 file:py-1.5 file:px-3 file:rounded file:border-0 file:text-xs file:font-medium file:bg-indigo-50 file:text-indigo-700 hover:file:bg-indigo-100">
                    </div>

                    {{-- Actiepreset --}}
                    <div>
                        <label class="block text-xs font-medium text-gray-600 mb-1">{{ __('Preset') }}</label>
                        <select class="w-full text-sm border border-gray-200 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-300"
                                @change="selectPreset($event.target.value)">
                            <option value="">{{ __('Custom') }}</option>
                            @foreach ($presets as $preset)
                                <option value="{{ $preset->id }}">{{ $preset->name }}</option>
                            @endforeach
                        </select>
                        <input type="hidden" name="action_name" x-bind:value="presets[presetId]?.name ?? ''">
                    </div>

                    {{-- Tier --}}
                    <div>
                        <label class="block text-xs font-medium text-gray-600 mb-1">{{ __('Tier') }}</label>
                        <select name="tier" x-model="tier"
                                class="w-full text-sm border border-gray-200 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-300">
                            <option value="pro">Pro</option>
                            <option value="premium">Premium</option>
                        </select>
                    </div>

                    {{-- Gratis dagen --}}
                    <div>
                        <label class="block text-xs font-medium text-gray-600 mb-1">{{ __('Free days') }}</label>
                        <input type="number" name="days" min="1" max="3650" x-model="days"
                               class="w-full text-sm border border-gray-200 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-300">
                    </div>

                    {{-- Token geldigheid --}}
                    <div>
                        <label class="block text-xs font-medium text-gray-600 mb-1">{{ __('Token validity (days)') }}</label>
                        <input type="number" name="token_validity_days" min="1" max="3650" x-model="tokenValidityDays"
                               class="w-full text-sm border border-gray-200 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-300">
                    </div>

                    {{-- Standaard taal --}}
                    <div>
                        <label class="block text-xs font-medium text-gray-600 mb-1">{{ __('Default language') }}</label>
                        <select name="default_language"
                                class="w-full text-sm border border-gray-200 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-300">
                            <option value="nl" selected>Nederlands</option>
                            <option value="fr">Français</option>
                            <option value="de">Deutsch</option>
                            <option value="es">Español</option>
                            <option value="en">English</option>
                        </select>
                    </div>
                </div>

                <label class="flex items-center gap-2 text-sm text-gray-600 cursor-pointer">
                    <input type="checkbox" name="send_email" value="1" class="rounded border-gray-300 text-indigo-600">
                    {{ __('Send invitation email immediately') }}
                </label>

                <button type="submit"
                        class="px-4 py-2 bg-indigo-600 hover:bg-indigo-700 text-white text-sm font-medium rounded-lg transition">
                    {{ __('Import') }}
                </button>
            </form>
        </div>
    </div>

    {{-- ─── Overzichtstabel ─────────────────────────────────────────────────── --}}
    <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6">
        <div class="flex items-center justify-between mb-4">
            <h2 class="text-sm font-semibold text-gray-700">{{ __('Invitations') }}</h2>
            <span class="text-xs text-gray-400">{{ $invitations->total() }} {{ __('total') }}</span>
        </div>

        {{-- Zoekveld --}}
        <form method="GET" action="{{ route('admin.invitations.index') }}" class="mb-4 flex gap-2 max-w-md">
            <div class="relative flex-1">
                <svg class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400 pointer-events-none"
                     fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-4.35-4.35M17 11A6 6 0 1 1 5 11a6 6 0 0 1 12 0z"/>
                </svg>
                <input type="text" name="q" value="{{ $search }}"
                       placeholder="{{ __('Search by name, practice or email...') }}"
                       class="w-full pl-9 pr-3 py-2 text-sm border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-300">
            </div>
            <button type="submit"
                    class="px-3 py-2 text-sm bg-indigo-600 hover:bg-indigo-700 text-white rounded-lg transition">
                {{ __('Search') }}
            </button>
            @if ($search !== '')
                <a href="{{ route('admin.invitations.index') }}"
                   class="px-3 py-2 text-sm border border-gray-200 text-gray-500 rounded-lg hover:bg-gray-50 transition">
                    ✕
                </a>
            @endif
        </form>

        @if ($invitations->isEmpty())
            <p class="text-sm text-gray-400">
                {{ $search !== '' ? __('No results for ":query".', ['query' => $search]) : __('No invitations created yet.') }}
            </p>
        @else
            <div class="overflow-x-auto">
                <table class="w-full text-xs">
                    <thead>
                        <tr class="text-left text-gray-400 border-b border-gray-100">
                            <th class="pb-2 pr-3 font-medium whitespace-nowrap">{{ __('Date') }}</th>
                            <th class="pb-2 pr-3 font-medium whitespace-nowrap">{{ __('Preset') }}</th>
                            <th class="pb-2 pr-3 font-medium whitespace-nowrap">{{ __('First name') }}</th>
                            <th class="pb-2 pr-3 font-medium whitespace-nowrap">{{ __('Last name') }}</th>
                            <th class="pb-2 pr-3 font-medium whitespace-nowrap">{{ __('Practice') }}</th>
                            <th class="pb-2 pr-3 font-medium whitespace-nowrap">E-mail</th>
                            <th class="pb-2 pr-3 font-medium whitespace-nowrap">{{ __('Language') }}</th>
                            <th class="pb-2 pr-3 font-medium whitespace-nowrap">{{ __('Profile URL') }}</th>
                            <th class="pb-2 pr-3 font-medium whitespace-nowrap">{{ __('Tier') }}</th>
                            <th class="pb-2 pr-3 font-medium whitespace-nowrap">{{ __('Source') }}</th>
                            <th class="pb-2 pr-3 font-medium whitespace-nowrap">{{ __('Last contact') }}</th>
                            <th class="pb-2 pr-3 font-medium whitespace-nowrap">{{ __('Days') }}</th>
                            <th class="pb-2 pr-3 font-medium whitespace-nowrap">Token</th>
                            <th class="pb-2 pr-3 font-medium whitespace-nowrap">{{ __('Expires') }}</th>
                            <th class="pb-2 pr-3 font-medium whitespace-nowrap">{{ __('Email sent') }}</th>
                            <th class="pb-2 pr-3 font-medium whitespace-nowrap">{{ __('Status') }}</th>
                            <th class="pb-2 pr-3 font-medium whitespace-nowrap">{{ __('Used by') }}</th>
                            <th class="pb-2 font-medium whitespace-nowrap">{{ __('Action') }}</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-gray-50">
                        @foreach ($invitations as $inv)
                        <tr class="align-top hover:bg-gray-50 transition">
                            <td class="py-2 pr-3 text-gray-400 whitespace-nowrap">{{ $inv->created_at->format('d/m/y H:i') }}</td>
                            <td class="py-2 pr-3 text-gray-600 whitespace-nowrap">{{ $inv->action_name ?: '—' }}</td>
                            <td class="py-2 pr-3 font-medium text-gray-700 whitespace-nowrap">{{ $inv->contact_first_name ?: '—' }}</td>
                            <td class="py-2 pr-3 text-gray-500 whitespace-nowrap">{{ $inv->contact_last_name ?: '—' }}</td>
                            <td class="py-2 pr-3 text-gray-500 whitespace-nowrap">{{ $inv->practice ?: '—' }}</td>
                            <td class="py-2 pr-3 text-gray-500 whitespace-nowrap">{{ $inv->contact_email ?: '—' }}</td>
                            <td class="py-2 pr-3 whitespace-nowrap">
                                @if ($inv->language)
                                    <span class="inline-block px-1.5 py-0.5 rounded text-xs font-medium bg-gray-100 text-gray-700 uppercase">{{ $inv->language }}</span>
                                @else
                                    <span class="text-gray-400">—</span>
                                @endif
                            </td>
                            <td class="py-2 pr-3 max-w-[140px]">
                                @if ($inv->profile_url)
                                    <a href="{{ $inv->profile_url }}" target="_blank"
                                       class="text-indigo-600 hover:underline truncate block max-w-[140px]"
                                       title="{{ $inv->profile_url }}">{{ $inv->profile_url }}</a>
                                @else
                                    <span class="text-gray-400">—</span>
                                @endif
                            </td>
                            <td class="py-2 pr-3 whitespace-nowrap">
                                @if ($inv->tier === 'pro')
                                    <span class="inline-block px-1.5 py-0.5 rounded text-xs font-medium bg-violet-100 text-violet-700">Pro</span>
                                @else
                                    <span class="inline-block px-1.5 py-0.5 rounded text-xs font-medium bg-blue-100 text-blue-700">Premium</span>
                                @endif
                            </td>
                            <td class="py-2 pr-3 whitespace-nowrap">
                                @if ($inv->source === 'form_filler')
                                    <span class="inline-block px-1.5 py-0.5 rounded text-xs font-medium bg-orange-100 text-orange-700">Form Filler</span>
                                @else
                                    <span class="inline-block px-1.5 py-0.5 rounded text-xs font-medium bg-gray-100 text-gray-600">{{ __('Manual') }}</span>
                                @endif
                            </td>
                            <td class="py-2 pr-3 whitespace-nowrap">
                                @if ($inv->last_contact_method === 'form_filler')
                                    <span class="inline-block px-1.5 py-0.5 rounded text-xs font-medium bg-orange-100 text-orange-700">Form Filler</span>
                                @elseif ($inv->last_contact_method === 'email')
                                    <span class="inline-block px-1.5 py-0.5 rounded text-xs font-medium bg-sky-100 text-sky-700">E-mail</span>
                                @elseif ($inv->last_contact_method)
                                    <span class="inline-block px-1.5 py-0.5 rounded text-xs font-medium bg-gray-100 text-gray-600">{{ __('Manual') }}</span>
                                @else
                                    <span class="text-gray-400">—</span>
                                @endif
                            </td>
                            <td class="py-2 pr-3 text-gray-500 text-center">{{ $inv->days }}</td>
                            <td class="py-2 pr-3 font-mono text-gray-400">{{ substr($inv->token, 0, 8) }}…</td>
                            <td class="py-2 pr-3 whitespace-nowrap text-gray-400">
                                {{ $inv->expires_at ? $inv->expires_at->format('d/m/y') : '—' }}
                            </td>
                            <td class="py-2 pr-3 whitespace-nowrap text-gray-400">
                                {{ $inv->email_sent_at ? $inv->email_sent_at->format('d/m/y H:i') : '—' }}
                            </td>
                            <td class="py-2 pr-3 whitespace-nowrap">
                                @if ($inv->used_at)
                                    <span class="text-emerald-600">{{ __('Used') }}<br><span class="text-gray-400">{{ $inv->used_at->format('d/m/y') }}</span></span>
                                @else
                                    <span class="text-amber-600">{{ __('Unused') }}</span>
                                @endif
                            </td>
                            <td class="py-2 pr-3 whitespace-nowrap">
                                @if ($inv->usedByUser)
                                    <a href="{{ route('admin.users.show', $inv->usedByUser) }}"
                                       class="text-indigo-600 hover:underline">{{ $inv->usedByUser->name }}</a>
                                @else
                                    <span class="text-gray-400">—</span>
                                @endif
                            </td>
                            <td class="py-2 whitespace-nowrap">
                                <div class="flex flex-col gap-1">
                                    {{-- Preview-knop (altijd zichtbaar als er een e-mail is) --}}
                                    @if ($inv->contact_email)
                                        <button type="button"
                                                @click="openPreview('{{ route('admin.invitations.preview', $inv) }}', '{{ route('admin.invitations.send-test', $inv) }}')"
                                                class="px-2 py-1 text-xs rounded border border-gray-200 text-gray-500 hover:border-indigo-300 hover:text-indigo-600 transition">
                                            {{ __('Preview') }}
                                        </button>
                                    @endif

                                    {{-- Versturen (alleen als nog niet gebruikt) --}}
                                    @if ($inv->contact_email && ! $inv->used_at)
                                        <form method="POST" action="{{ route('admin.invitations.send-email', $inv) }}">
                                            @csrf
                                            <button type="submit"
                                                    class="w-full px-2 py-1 text-xs rounded border transition
                                                        {{ $inv->email_sent_at
                                                            ? 'border-gray-200 text-gray-500 hover:border-indigo-300 hover:text-indigo-600'
                                                            : 'border-indigo-300 text-indigo-600 hover:bg-indigo-50' }}">
                                                {{ $inv->email_sent_at ? __('Resend') : __('Send invitation') }}
                                            </button>
                                        </form>
                                    @endif

                                    @if (! $inv->contact_email)
                                        <span class="text-gray-300">—</span>
                                    @endif
                                </div>
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>

            <div class="mt-4">
                {{ $invitations->links() }}
            </div>
        @endif
    </div>

    {{-- ─── Preview modal ───────────────────────────────────────────────────────── --}}
<div x-show="preview.show"
     x-cloak
     class="fixed inset-0 z-50 flex items-center justify-center p-4"
     @keydown.escape.window="preview.show = false">

    {{-- Backdrop --}}
    <div class="absolute inset-0 bg-black/40" @click="preview.show = false"></div>

    {{-- Modal --}}
    <div class="relative bg-white rounded-xl shadow-2xl w-full max-w-2xl max-h-[90vh] flex flex-col overflow-hidden">

        {{-- Header --}}
        <div class="flex items-center justify-between px-5 py-3 border-b border-gray-100 shrink-0">
            <span class="text-sm font-semibold text-gray-700">{{ __('Email preview') }}</span>
            <div class="flex items-center gap-3">
                {{-- Stuur testmail naar admin --}}
                <form x-bind:action="preview.testUrl" method="POST" @submit="preview.show = false">
                    @csrf
                    <button type="submit"
                            class="px-3 py-1.5 text-xs font-medium rounded border border-indigo-300 text-indigo-600 hover:bg-indigo-50 transition">
                        {{ __('Send test email to me') }}
                    </button>
                </form>
                <button type="button" @click="preview.show = false"
                        class="text-gray-400 hover:text-gray-600 transition">
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/>
                    </svg>
                </button>
            </div>
        </div>

        {{-- Iframe laadt de preview-URL rechtstreeks --}}
        <iframe x-bind:src="preview.show ? preview.url : 'about:blank'"
                class="flex-1 w-full border-0"
                style="min-height:480px"
                sandbox="allow-same-origin"></iframe>
    </div>
</div>{{-- einde modal --}}

</div>{{-- einde outer x-data wrapper --}}

@endsection