<x-layouts.app title="Report Fraud & Identity Theft" activePage="security">
<div class="max-w-2xl mx-auto">
    <h2 class="text-2xl font-bold text-gray-800 mb-2">Report Fraud & Identity Theft</h2>
    <p class="text-sm text-gray-500 mb-6">If you suspect unauthorized activity on your account, please fill out the form below. Our team will investigate promptly.</p>

    <form method="POST" action="{{ route('security.report-fraud.store') }}" class="bg-white rounded-lg shadow p-6 space-y-5">
        @csrf

        <div>
            <label class="block text-sm font-semibold text-gray-700 mb-1">Report Type</label>
            <select name="type" required class="w-full border border-gray-300 rounded px-3 py-2 text-sm focus:ring-blue-500 focus:border-blue-500">
                @foreach($types as $t)
                <option value="{{ $t->value }}">{{ $t->label() }}</option>
                @endforeach
            </select>
            @error('type') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
        </div>

        <div>
            <label class="block text-sm font-semibold text-gray-700 mb-1">Subject</label>
            <input type="text" name="subject" value="{{ old('subject') }}" required class="w-full border border-gray-300 rounded px-3 py-2 text-sm focus:ring-blue-500 focus:border-blue-500" placeholder="Brief description of the issue">
            @error('subject') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
        </div>

        <div>
            <label class="block text-sm font-semibold text-gray-700 mb-1">Description</label>
            <textarea name="description" rows="5" required class="w-full border border-gray-300 rounded px-3 py-2 text-sm focus:ring-blue-500 focus:border-blue-500" placeholder="Provide as much detail as possible: what happened, when, any suspicious activity...">{{ old('description') }}</textarea>
            @error('description') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
        </div>

        <button type="submit" class="w-full bg-red-600 text-white py-2.5 rounded font-semibold text-sm hover:bg-red-700 transition">Submit Report</button>
    </form>
</div>
</x-layouts.app>
