@extends('layouts.app')
@section('title', $achievement ? 'Edit Achievement' : 'Add Achievement')
@section('page-title', $achievement ? 'Edit Achievement' : 'Add Achievement — '.$sector->name)

@section('content')
<div class="mt-4 max-w-2xl">
    <div class="bg-white rounded-xl border border-gray-200 shadow-sm p-6">
        <div class="flex items-center gap-2 mb-5 text-sm text-gray-500">
            <a href="{{ route('admin.paca.index') }}" class="hover:text-gray-700">PACA Admin</a>
            <span>/</span>
            <a href="{{ route('admin.paca.sector.show', $sector) }}" class="hover:text-gray-700">{{ $sector->name }}</a>
            <span>/</span>
            <span>{{ $achievement ? 'Edit' : 'Add Achievement' }}</span>
        </div>

        <form method="POST"
              action="{{ $achievement
                  ? route('admin.paca.achievement.update', [$sector, $achievement])
                  : route('admin.paca.achievement.store', $sector) }}">
            @csrf
            @if($achievement) @method('PUT') @endif

            <div class="space-y-4">
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1.5">Achievement Title <span class="text-red-500">*</span></label>
                    <input type="text" name="title" value="{{ old('title', $achievement?->title) }}" required
                           placeholder="e.g. Free Senior High School Programme"
                           class="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
                </div>

                <div class="grid grid-cols-2 gap-4">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1.5">Key Metric</label>
                        <input type="text" name="metric" value="{{ old('metric', $achievement?->metric) }}"
                               placeholder="e.g. 1.2m students benefited"
                               class="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1.5">Term / Period</label>
                        <input type="text" name="term" value="{{ old('term', $achievement?->term) }}"
                               placeholder="e.g. 2017–2024"
                               class="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
                    </div>
                </div>

                <div class="grid grid-cols-2 gap-4">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1.5">Region</label>
                        <input type="text" name="region" value="{{ old('region', $achievement?->region ?? 'National') }}"
                               class="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1.5">Evidence Grade <span class="text-red-500">*</span></label>
                        <select name="evidence_grade" required class="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
                            <option value="verified"  {{ old('evidence_grade', $achievement?->evidence_grade) === 'verified'  ? 'selected' : '' }}>✓ Verified</option>
                            <option value="published" {{ old('evidence_grade', $achievement?->evidence_grade) === 'published' ? 'selected' : '' }}>— Published</option>
                            <option value="claimed"   {{ old('evidence_grade', $achievement?->evidence_grade) === 'claimed'   ? 'selected' : '' }}>⚠ Claimed</option>
                        </select>
                    </div>
                </div>

                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1.5">Talking Point <span class="text-gray-400 font-normal">(ready-to-use for communicators)</span></label>
                    <textarea name="talking_point" rows="4"
                              placeholder="Write a clear, TV-ready talking point that communicators can use verbatim…"
                              class="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">{{ old('talking_point', $achievement?->talking_point) }}</textarea>
                </div>

                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1.5">Source Notes <span class="text-gray-400 font-normal">(internal reference)</span></label>
                    <textarea name="source_notes" rows="2"
                              placeholder="e.g. Source: MoE Annual Report 2024, Page 12"
                              class="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">{{ old('source_notes', $achievement?->source_notes) }}</textarea>
                </div>
            </div>

            <div class="flex gap-3 mt-6 pt-5 border-t border-gray-100">
                <button type="submit" class="px-5 py-2.5 bg-npp-blue text-white text-sm font-semibold rounded-lg hover:bg-blue-800">
                    {{ $achievement ? 'Update Achievement' : 'Add Achievement' }}
                </button>
                <a href="{{ route('admin.paca.sector.show', $sector) }}"
                   class="px-5 py-2.5 text-sm text-gray-600 border border-gray-300 rounded-lg hover:bg-gray-50">Cancel</a>
            </div>
        </form>
    </div>
</div>
@endsection