@extends('layouts.app')

@section('title', 'Tulis Aspirasi')

@section('content')
<div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 py-10">
    <div class="text-center mb-8">
        <h1 class="text-3xl font-bold text-slate-800 mb-2">Tulis Aspirasi Anda</h1>
        <p class="text-slate-500">Sampaikan suara Anda untuk Indonesia yang lebih baik</p>
    </div>

    @if(Auth::user()->status_kyc !== 'verified')
        <div class="mb-6 flex items-start gap-3 rounded-xl p-4 border border-amber-200 bg-amber-50">
            <svg class="w-5 h-5 text-amber-500 shrink-0 mt-0.5" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd"/></svg>
            <div class="text-sm text-amber-800">
                <p class="font-semibold mb-0.5">Akun Anda belum terverifikasi e-KTP.</p>
                <p class="text-amber-700">Aspirasi dari akun terverifikasi lebih dipercaya dan dihitung sebagai suara warga yang sah.
                    <a href="{{ route('verifikasi-ktp') }}" class="font-semibold underline hover:text-amber-900">Verifikasi sekarang</a> — hanya butuh 1 menit.</p>
            </div>
        </div>
    @endif

    <div class="bg-white rounded-2xl shadow-sm border border-slate-100 p-8">
        {{-- Validation Errors --}}
        @if($errors->any())
            <div class="mb-6 rounded-xl p-4 border border-red-200 bg-red-50">
                <div class="flex items-center gap-2 text-red-700 font-medium text-sm mb-2">
                    <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"/></svg>
                    Terdapat kesalahan pada input Anda:
                </div>
                <ul class="list-disc list-inside text-sm text-red-600 space-y-1">
                    @foreach($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

        <form action="{{ route('aspirasi.store') }}" method="POST" enctype="multipart/form-data">
            @csrf

            <div class="space-y-6">
                {{-- Judul --}}
                <div>
                    <label for="judul" class="block text-sm font-semibold text-slate-700 mb-2">Judul Aspirasi <span class="text-red-500">*</span></label>
                    <input type="text" name="judul" id="judul" placeholder="Masukkan judul aspirasi Anda" required
                           value="{{ old('judul') }}"
                           class="block w-full rounded-xl border border-slate-200 shadow-sm px-4 py-3 focus:border-red-400 focus:ring-2 focus:ring-red-100 text-sm transition-all @error('judul') border-red-300 @enderror">
                    @error('judul')
                        <p class="mt-1 text-sm text-red-500">{{ $message }}</p>
                    @enderror
                </div>

                {{-- Kategori --}}
                <div>
                    <label for="kategori_id" class="block text-sm font-semibold text-slate-700 mb-2">Kategori <span class="text-red-500">*</span></label>
                    <select name="kategori_id" id="kategori_id" required
                            class="block w-full rounded-xl border border-slate-200 shadow-sm px-4 py-3 focus:border-red-400 focus:ring-2 focus:ring-red-100 text-sm transition-all @error('kategori_id') border-red-300 @enderror">
                        <option value="">Pilih Kategori</option>
                        @foreach ($kategoris as $kategori)
                            <option value="{{ $kategori->id }}" {{ old('kategori_id') == $kategori->id ? 'selected' : '' }}>{{ $kategori->nama }}</option>
                        @endforeach
                    </select>
                    @error('kategori_id')
                        <p class="mt-1 text-sm text-red-500">{{ $message }}</p>
                    @enderror
                </div>

                {{-- Isi --}}
                <div>
                    <label for="isi" class="block text-sm font-semibold text-slate-700 mb-2">Isi Aspirasi <span class="text-red-500">*</span></label>
                    <textarea name="isi" id="isi" rows="8" placeholder="Jelaskan aspirasi Anda secara detail (minimal 20 karakter)..." required
                              class="block w-full rounded-xl border border-slate-200 shadow-sm px-4 py-3 focus:border-red-400 focus:ring-2 focus:ring-red-100 text-sm transition-all resize-y @error('isi') border-red-300 @enderror">{{ old('isi') }}</textarea>
                    @error('isi')
                        <p class="mt-1 text-sm text-red-500">{{ $message }}</p>
                    @enderror
                </div>

                {{-- Target Dukungan --}}
                <div>
                    <label for="target_dukungan" class="block text-sm font-semibold text-slate-700 mb-2">Target Dukungan Minimal <span class="text-red-500">*</span></label>
                    <input type="number" name="target_dukungan" id="target_dukungan" value="{{ old('target_dukungan', 1000) }}" min="1000" required
                           class="block w-full rounded-xl border border-slate-200 shadow-sm px-4 py-3 focus:border-red-400 focus:ring-2 focus:ring-red-100 text-sm transition-all @error('target_dukungan') border-red-300 @enderror">
                    <p class="mt-2 text-xs text-slate-500">Tentukan jumlah dukungan (minimal 1.000) yang dibutuhkan agar aspirasi direkomendasikan untuk Rapat Dengar Pendapat (RDP).</p>
                    @error('target_dukungan')
                        <p class="mt-1 text-sm text-red-500">{{ $message }}</p>
                    @enderror
                </div>

                {{-- Lampiran --}}
                <div>
                    <label for="lampiran" class="block text-sm font-semibold text-slate-700 mb-2">Upload Lampiran <span class="text-slate-400 font-normal">(Opsional)</span></label>
                    <div class="relative">
                        <input type="file" name="lampiran" id="lampiran" accept=".pdf,.jpg,.jpeg,.png"
                               class="block w-full text-sm text-slate-500 file:mr-4 file:py-3 file:px-6 file:rounded-xl file:border-0 file:text-sm file:font-semibold file:bg-red-50 file:text-red-600 hover:file:bg-red-100 file:cursor-pointer file:transition-all rounded-xl border border-slate-200 cursor-pointer">
                    </div>
                    <p class="mt-2 text-xs text-slate-400">Maksimal 2MB. Format yang diterima: PDF, JPG, PNG.</p>
                    @error('lampiran')
                        <p class="mt-1 text-sm text-red-500">{{ $message }}</p>
                    @enderror
                </div>

                {{-- Anonim --}}
                <div class="flex items-center gap-3 p-4 rounded-xl bg-slate-50 border border-slate-100">
                    <input type="checkbox" name="anonim" id="anonim" value="1" {{ old('anonim') ? 'checked' : '' }}
                           class="h-5 w-5 text-red-600 focus:ring-red-500 border-slate-300 rounded cursor-pointer">
                    <div>
                        <label for="anonim" class="block text-sm font-semibold text-slate-700 cursor-pointer">Kirim sebagai Anonim <span class="ml-1 px-1.5 py-0.5 rounded text-[10px] font-bold uppercase tracking-wide bg-red-50 text-red-600 border border-red-100">Verifiable Anonymity</span></label>
                        <p class="text-xs text-slate-400">Identitas Anda diganti nama samaran yang diturunkan satu arah dari token anonim — tidak dapat dipetakan balik dan berbeda di tiap kiriman.</p>
                    </div>
                </div>

                {{-- Buttons --}}
                <div class="flex flex-col sm:flex-row justify-end gap-3 pt-4 border-t border-slate-100">
                    <button type="submit" name="draft" value="1" class="px-6 py-3 rounded-xl border border-slate-200 shadow-sm text-sm font-semibold text-slate-600 bg-white hover:bg-slate-50 focus:outline-none focus:ring-2 focus:ring-red-100 transition-all order-2 sm:order-1">
                        <span class="flex items-center justify-center gap-2">
                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-3m-1 4l-3 3m0 0l-3-3m3 3V4"/></svg>
                            Simpan Draft
                        </span>
                    </button>
                    <button type="submit" class="px-8 py-3 rounded-xl text-sm font-semibold text-white shadow-lg shadow-red-500/20 hover:bg-red-700 bg-red-600 focus:outline-none focus:ring-2 focus:ring-red-300 transition-all order-1 sm:order-2">
                        <span class="flex items-center justify-center gap-2">
                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"/></svg>
                            Kirim Aspirasi
                        </span>
                    </button>
                </div>
            </div>
        </form>
    </div>
</div>
@endsection