@extends('layouts.app')
@section('title', 'Manage — '.$sector->name)
@section('page-title', 'PACA — '.$sector->icon.' '.$sector->name)

@section('content')
<div class="mt-4 space-y-5">

    <div class="flex items-center gap-3">
        <a href="{{ route('admin.paca.index') }}" class="text-sm text-gray-500 hover:text-gray-700">← PACA Admin</a>
        <span class="text-gray-300">/</span>
        <span class="text-sm font-medium text-gray-700">{{ $sector->name }}</span>
        <a href="{{ route('admin.paca.sector.edit', $sector) }}"
           class="ml-auto text-sm text-blue-600 hover:underline">Edit Sector Settings</a>
    </div>

    <div class="grid grid-cols-1 xl:grid-cols-2 gap-5">

        {{-- Achievements --}}
        <div>
            <div class="flex items-center justify-between mb-3">
                <h2 class="font-bold text-gray-800">🏆 Achievements ({{ $sector->achievements->count() }})</h2>
                <a href="{{ route('admin.paca.achievement.create', $sector) }}"
                   class="px-3 py-1.5 bg-npp-blue text-white text-xs font-semibold rounded-lg hover:bg-blue-800">+ Add</a>
            </div>
            <div class="space-y-3">
                @forelse($sector->achievements as $a)
                <div class="bg-white rounded-xl border border-gray-200 p-4">
                    <div class="flex items-start justify-between gap-2">
                        <div class="flex-1 min-w-0">
                            <p class="font-semibold text-gray-900 text-sm">{{ $a->title }}</p>
                            @if($a->metric)
                            <p class="text-blue-700 font-bold mt-0.5">{{ $a->metric }}</p>
                            @endif
                            <p class="text-xs text-gray-400 mt-0.5">{{ $a->term }} · {{ $a->region }}</p>
                            @if($a->talking_point)
                            <p class="text-xs text-gray-500 mt-1 italic line-clamp-2">{{ $a->talking_point }}</p>
                            @endif
                        </div>
                        <div class="flex gap-2 shrink-0">
                            <span class="text-[10px] px-1.5 py-0.5 rounded font-bold {{ $a->grade_badge }}">
                                {{ ucfirst($a->evidence_grade) }}
                            </span>
                            <a href="{{ route('admin.paca.achievement.edit', [$sector, $a]) }}"
                               class="text-xs text-blue-600 hover:underline">Edit</a>
                            <form method="POST" action="{{ route('admin.paca.achievement.destroy', [$sector, $a]) }}"
                                  onsubmit="return confirm('Delete this achievement?')" class="inline">
                                @csrf @method('DELETE')
                                <button type="submit" class="text-xs text-red-500 hover:underline">Del</button>
                            </form>
                        </div>
                    </div>
                </div>
                @empty
                <div class="text-center py-8 text-gray-400 bg-white rounded-xl border border-dashed border-gray-200">
                    <p class="text-sm">No achievements yet.</p>
                    <a href="{{ route('admin.paca.achievement.create', $sector) }}" class="text-blue-600 text-sm hover:underline mt-1 inline-block">Add first achievement →</a>
                </div>
                @endforelse
            </div>
        </div>

        {{-- Comparatives --}}
        <div>
            <div class="flex items-center justify-between mb-3">
                <h2 class="font-bold text-gray-800">📊 Comparatives ({{ $sector->comparatives->count() }})</h2>
            </div>

            {{-- Add comparative inline --}}
            <div class="bg-white rounded-xl border border-gray-200 p-4 mb-3">
                <p class="text-xs font-semibold text-gray-500 mb-3">+ Add Comparative</p>
                <form method="POST" action="{{ route('admin.paca.comparative.store', $sector) }}" class="space-y-2">
                    @csrf
                    <div class="grid grid-cols-2 gap-2">
                        <input type="text" name="indicator" placeholder="Indicator (e.g. Roads constructed)" required
                               class="col-span-2 px-3 py-2 text-sm border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
                        <input type="text" name="npp_data" placeholder="NPP data / value" required
                               class="px-3 py-2 text-sm border border-blue-200 bg-blue-50 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
                        <input type="text" name="ndc_data" placeholder="NDC data / value" required
                               class="px-3 py-2 text-sm border border-teal-200 bg-teal-50 rounded-lg focus:outline-none focus:ring-2 focus:ring-teal-500">
                    </div>
                    <div class="grid grid-cols-3 gap-2">
                        <select name="edge" required class="px-2 py-1.5 text-sm border border-gray-300 rounded-lg focus:outline-none">
                            <option value="npp">NPP Wins</option>
                            <option value="ndc">NDC Wins</option>
                            <option value="parity">Parity</option>
                        </select>
                        <select name="npp_grade" class="px-2 py-1.5 text-sm border border-gray-300 rounded-lg focus:outline-none">
                            <option value="verified">Verified</option>
                            <option value="published">Published</option>
                            <option value="claimed">Claimed</option>
                        </select>
                        <select name="ndc_grade" class="px-2 py-1.5 text-sm border border-gray-300 rounded-lg focus:outline-none">
                            <option value="verified">Verified</option>
                            <option value="published">Published</option>
                            <option value="claimed">Claimed</option>
                        </select>
                    </div>
                    <button type="submit" class="px-4 py-1.5 bg-npp-blue text-white text-xs font-semibold rounded-lg hover:bg-blue-800">
                        Add Comparative
                    </button>
                </form>
            </div>

            {{-- Existing comparatives --}}
            <div class="space-y-2">
                @foreach($sector->comparatives as $comp)
                <div class="bg-white rounded-xl border border-gray-100 p-3 flex items-center gap-3">
                    <div class="flex-1 min-w-0">
                        <p class="text-xs font-semibold text-gray-700">{{ $comp->indicator }}</p>
                        <div class="flex gap-2 mt-1 text-xs">
                            <span class="text-blue-700 font-semibold truncate">{{ $comp->npp_data }}</span>
                            <span class="text-gray-300">vs</span>
                            <span class="text-teal-700 font-semibold truncate">{{ $comp->ndc_data }}</span>
                        </div>
                    </div>
                    <span class="text-xs font-bold px-2 py-0.5 rounded {{ $comp->edge_badge }} shrink-0">{{ $comp->edge_label }}</span>
                    <form method="POST" action="{{ route('admin.paca.comparative.destroy', [$sector, $comp]) }}"
                          onsubmit="return confirm('Delete?')" class="inline shrink-0">
                        @csrf @method('DELETE')
                        <button type="submit" class="text-xs text-red-400 hover:text-red-600">✕</button>
                    </form>
                </div>
                @endforeach
            </div>
        </div>
    </div>
</div>
@endsection