@extends('admin.layout')

@section('title', 'Demo account aanmaken')

@section('content')
<div class="max-w-lg">
    <div class="mb-6">
        <h1 class="text-xl font-bold text-gray-900">Demo account aanmaken</h1>
        <p class="mt-1 text-sm text-gray-500">
            Maak een PRO of ORG-account aan met tijdelijk wachtwoord om de app te demonstreren aan een potentiële abonnee.
            Het account verloopt automatisch na het ingestelde aantal dagen.
        </p>
    </div>

    @if ($errors->any())
        <div class="mb-4 p-3 bg-red-50 border border-red-200 rounded-lg text-sm text-red-700">
            <ul class="space-y-0.5">
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    <form method="POST" action="{{ route('admin.demo.store') }}"
          class="bg-white rounded-xl shadow-sm border border-gray-100 p-6 space-y-5"
          x-data="{ proType: 'individual' }">
        @csrf

        {{-- Account type --}}
        <div>
            <label class="block text-sm font-medium text-gray-700 mb-2">Account type</label>
            <div class="flex gap-3">
                <label :class="proType === 'individual' ? 'border-indigo-500 bg-indigo-50' : 'border-gray-200 hover:border-gray-300'"
                       class="flex-1 flex items-center gap-3 p-3 rounded-lg border-2 cursor-pointer transition">
                    <input type="radio" name="pro_type" value="individual" x-model="proType"
                           class="text-indigo-600 border-gray-300 focus:ring-indigo-500">
                    <div>
                        <p class="text-sm font-medium text-gray-800">🧑‍⚕️ Hulpverlener</p>
                        <p class="text-xs text-gray-500">Individuele professional (PRO)</p>
                    </div>
                </label>
                <label :class="proType === 'organization' ? 'border-indigo-500 bg-indigo-50' : 'border-gray-200 hover:border-gray-300'"
                       class="flex-1 flex items-center gap-3 p-3 rounded-lg border-2 cursor-pointer transition">
                    <input type="radio" name="pro_type" value="organization" x-model="proType"
                           class="text-indigo-600 border-gray-300 focus:ring-indigo-500">
                    <div>
                        <p class="text-sm font-medium text-gray-800">🏢 Hulporganisatie</p>
                        <p class="text-xs text-gray-500">Organisatie zonder persoonlijk gezicht</p>
                    </div>
                </label>
            </div>
        </div>

        {{-- Name --}}
        <div>
            <label for="name" class="block text-sm font-medium text-gray-700 mb-1"
                   x-text="proType === 'individual' ? 'Naam (voor- + achternaam)' : 'Naam organisatie'"></label>
            <input type="text" id="name" name="name" value="{{ old('name') }}" required
                   class="w-full text-sm border border-gray-200 rounded-lg px-3 py-2 focus:outline-none focus:ring-1 focus:ring-indigo-400"
                   x-bind:placeholder="proType === 'individual' ? 'bv. Jan Peeters' : 'bv. Autism Support vzw'">
        </div>

        {{-- Email --}}
        <div>
            <label for="email" class="block text-sm font-medium text-gray-700 mb-1">E-mailadres</label>
            <input type="email" id="email" name="email" value="{{ old('email') }}" required
                   class="w-full text-sm border border-gray-200 rounded-lg px-3 py-2 focus:outline-none focus:ring-1 focus:ring-indigo-400"
                   placeholder="demo@voorbeeld.be">
            <p class="mt-1 text-xs text-gray-400">Wordt het inlogadres. E-mailverificatie wordt overgeslagen.</p>
        </div>

        {{-- Days --}}
        <div>
            <label for="days" class="block text-sm font-medium text-gray-700 mb-1">Geldig voor (dagen)</label>
            <div class="flex items-center gap-3">
                <input type="number" id="days" name="days" value="{{ old('days', 30) }}" min="1" max="365" required
                       class="w-28 text-sm border border-gray-200 rounded-lg px-3 py-2 focus:outline-none focus:ring-1 focus:ring-indigo-400">
                <div class="flex gap-2">
                    @foreach ([14, 30, 60, 90] as $d)
                        <button type="button"
                                onclick="document.getElementById('days').value = {{ $d }}"
                                class="px-2.5 py-1 text-xs rounded-lg bg-gray-100 hover:bg-gray-200 text-gray-600 transition">
                            {{ $d }}d
                        </button>
                    @endforeach
                </div>
            </div>
        </div>

        {{-- Password --}}
        <div x-data="{ show: false }">
            <label for="password" class="block text-sm font-medium text-gray-700 mb-1">
                Wachtwoord
                <span class="ml-1 font-normal text-gray-400">(leeg = automatisch genereren)</span>
            </label>
            <div class="relative">
                <input :type="show ? 'text' : 'password'" id="password" name="password"
                       value="{{ old('password') }}" minlength="8" maxlength="64"
                       class="w-full text-sm border border-gray-200 rounded-lg px-3 py-2 pr-10 focus:outline-none focus:ring-1 focus:ring-indigo-400"
                       placeholder="Laat leeg voor automatisch wachtwoord">
                <button type="button" @click="show = !show"
                        class="absolute inset-y-0 right-0 px-3 text-gray-400 hover:text-gray-600">
                    <svg x-show="!show" class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
                        <path stroke-linecap="round" stroke-linejoin="round" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.477 0 8.268 2.943 9.542 7-1.274 4.057-5.065 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/>
                    </svg>
                    <svg x-show="show" class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M13.875 18.825A10.05 10.05 0 0112 19c-4.477 0-8.268-2.943-9.542-7a9.97 9.97 0 012.081-3.376M6.343 6.343A9.965 9.965 0 0112 5c4.477 0 8.268 2.943 9.542 7a9.97 9.97 0 01-1.357 2.556M6.343 6.343L3 3m3.343 3.343l11.314 11.314M3 3l18 18"/>
                    </svg>
                </button>
            </div>
        </div>

        <div class="pt-2 flex items-center justify-between border-t border-gray-100">
            <a href="{{ route('admin.users.index') }}"
               class="text-sm text-gray-500 hover:text-gray-700">← Terug naar gebruikers</a>
            <button type="submit"
                    class="px-5 py-2 bg-indigo-600 hover:bg-indigo-700 text-white text-sm font-semibold rounded-lg transition">
                Account aanmaken
            </button>
        </div>
    </form>
</div>
@endsection