<x-app-layout title="Report issue">
    <div class="mx-auto max-w-lg space-y-6">
        <div>
            <h1 class="text-xl font-semibold text-slate-900">Report an issue</h1>
            <p class="mt-1 text-sm text-slate-500">Send a problem to Ladill support. Account owners manage billing upgrades — staff use this for help with Care.</p>
        </div>

        @if (session('error'))
            <p class="rounded-lg bg-rose-50 px-3 py-2 text-sm text-rose-800">{{ session('error') }}</p>
        @endif

        <form method="POST" action="{{ route('care.issues.store') }}" class="space-y-4 rounded-2xl border border-slate-200 bg-white p-6">
            @csrf

            <div>
                <label class="block text-sm font-medium text-slate-700">Subject</label>
                <input type="text" name="subject" value="{{ old('subject') }}" required maxlength="255"
                       class="mt-1 w-full rounded-lg border-slate-300 text-sm"
                       placeholder="e.g. Cannot start consultation">
                @error('subject')<p class="mt-1 text-sm text-red-600">{{ $message }}</p>@enderror
            </div>

            <div>
                <label class="block text-sm font-medium text-slate-700">Priority</label>
                <select name="priority" class="mt-1 w-full rounded-lg border-slate-300 text-sm">
                    <option value="normal" @selected(old('priority', 'normal') === 'normal')>Normal</option>
                    <option value="low" @selected(old('priority') === 'low')>Low</option>
                    <option value="high" @selected(old('priority') === 'high')>High</option>
                </select>
            </div>

            <div>
                <label class="block text-sm font-medium text-slate-700">What happened?</label>
                <textarea name="message" rows="6" required maxlength="5000"
                          class="mt-1 w-full rounded-lg border-slate-300 text-sm"
                          placeholder="Describe what you were doing and what went wrong…">{{ old('message') }}</textarea>
                @error('message')<p class="mt-1 text-sm text-red-600">{{ $message }}</p>@enderror
            </div>

            <button type="submit" class="btn-primary w-full">Send to Ladill support</button>
        </form>
    </div>
</x-app-layout>
