@extends('layouts.app')
@section('title', 'Enviar Feedback · Cavendral Beta')
@section('content')
<div class="space-y-6 max-w-3xl">
    <a href="{{ route('projects.show', $project->slug) }}" class="text-sm text-[var(--color-text-muted)] hover:text-[var(--color-accent-blue-bright)]">← Voltar</a>

    <h1 class="text-2xl font-bold">Enviar Feedback</h1>
    <p class="text-sm text-[var(--color-text-muted)]">Projeto: <span class="text-[var(--color-text-secondary)] font-semibold">{{ $project->name }}</span></p>

    <form method="POST" action="{{ route('feedback.store', $project->slug) }}" enctype="multipart/form-data" class="space-y-4">
        @csrf
        <div>
            <label class="block text-xs font-bold text-[var(--color-text-muted)] mb-2">TIPO</label>
            <div class="grid grid-cols-2 md:grid-cols-4 gap-2">
                @foreach(['bug' => '🐞 Bug', 'suggestion' => '💡 Sugestão', 'comment' => '💬 Comentário', 'question' => '❓ Pergunta'] as $value => $label)
                <label class="flex items-center gap-2 p-2 border border-[var(--color-border-default)] rounded cursor-pointer hover:bg-[var(--color-bg-tertiary)] transition">
                    <input type="radio" name="type" value="{{ $value }}" required {{ old('type', request('type')) === $value ? 'checked' : '' }}>
                    <span class="text-sm">{{ $label }}</span>
                </label>
                @endforeach
            </div>
            @error('type') <p class="text-xs text-[var(--color-danger)] mt-1">{{ $message }}</p> @enderror
        </div>

        <div>
            <label for="title" class="block text-xs font-bold text-[var(--color-text-muted)] mb-1">TÍTULO</label>
            <input type="text" id="title" name="title" required minlength="5" maxlength="200"
                   value="{{ old('title') }}"
                   class="w-full px-3 py-2 bg-[var(--color-bg-secondary)] border border-[var(--color-border-default)] rounded text-sm focus:border-[var(--color-accent-blue)] focus:ring-2 focus:ring-[var(--color-accent-blue-bright)]/40 outline-none"
                   placeholder="Resumo curto do feedback">
            @error('title') <p class="text-xs text-[var(--color-danger)] mt-1">{{ $message }}</p> @enderror
        </div>

        <div>
            <label for="description" class="block text-xs font-bold text-[var(--color-text-muted)] mb-1">DESCRIÇÃO (Markdown)</label>
            <textarea id="description" name="description" required minlength="20" maxlength="5000" rows="8"
                      class="w-full px-3 py-2 bg-[var(--color-bg-secondary)] border border-[var(--color-border-default)] rounded text-sm font-mono focus:border-[var(--color-accent-blue)] focus:ring-2 focus:ring-[var(--color-accent-blue-bright)]/40 outline-none resize-y"
                      placeholder="Descreva o feedback com detalhes. Passos para reproduzir, comportamento esperado vs. observado, contexto, etc.">{{ old('description') }}</textarea>
            <p class="text-xs text-[var(--color-text-muted)] mt-1">Mínimo 20 chars · Máximo 5000 · Markdown suportado</p>
            @error('description') <p class="text-xs text-[var(--color-danger)] mt-1">{{ $message }}</p> @enderror
        </div>

        <div>
            <label for="attachments" class="block text-xs font-bold text-[var(--color-text-muted)] mb-1">ANEXOS (máx 5 · 5MB cada)</label>
            <input type="file" id="attachments" name="attachments[]" multiple accept="image/*"
                   class="w-full px-3 py-2 bg-[var(--color-bg-secondary)] border border-[var(--color-border-default)] rounded text-sm">
        </div>

        <div class="flex gap-2">
            <button type="submit" class="flex-1 bg-[var(--color-accent-blue)] text-white font-bold py-2 rounded hover:bg-[var(--color-accent-blue-bright)] transition">
                ENVIAR FEEDBACK
            </button>
            <a href="{{ route('projects.show', $project->slug) }}" class="px-4 py-2 border border-[var(--color-border-default)] rounded hover:bg-[var(--color-bg-tertiary)] transition">Cancelar</a>
        </div>
    </form>
</div>
@endsection