@extends('layouts.app')
@section('title', 'Stations')
@section('page-title', 'Stations & Networks')

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

    {{-- Filters --}}
    <form method="GET" class="bg-white rounded-xl border border-gray-200 p-4 flex flex-wrap gap-3">
        <input type="text" name="search" value="{{ request('search') }}" placeholder="Search stations…"
               class="flex-1 min-w-48 px-3 py-2 text-sm border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
        <select name="type" class="px-3 py-2 text-sm border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
            <option value="">All Types</option>
            <option value="TV"     {{ request('type') === 'TV'     ? 'selected' : '' }}>TV</option>
            <option value="Radio"  {{ request('type') === 'Radio'  ? 'selected' : '' }}>Radio</option>
            <option value="Online" {{ request('type') === 'Online' ? 'selected' : '' }}>Online</option>
        </select>
        <select name="region_id" class="px-3 py-2 text-sm border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
            <option value="">All Regions</option>
            @foreach($regions as $region)
                <option value="{{ $region->id }}" {{ request('region_id') == $region->id ? 'selected' : '' }}>{{ $region->name }}</option>
            @endforeach
        </select>
        <select name="affiliation" class="px-3 py-2 text-sm border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
            <option value="">All Affiliations</option>
            <option value="pro_npp" {{ request('affiliation') === 'pro_npp' ? 'selected' : '' }}>Pro NPP</option>
            <option value="neutral" {{ request('affiliation') === 'neutral' ? 'selected' : '' }}>Neutral</option>
            <option value="pro_ndc" {{ request('affiliation') === 'pro_ndc' ? 'selected' : '' }}>Pro NDC</option>
        </select>
        <button type="submit" class="px-4 py-2 bg-npp-blue text-white text-sm rounded-lg hover:bg-blue-800">Filter</button>
        <a href="{{ route('stations.index') }}" class="px-4 py-2 text-sm text-gray-600 rounded-lg border border-gray-300 hover:bg-gray-50">Clear</a>
        <a href="{{ route('stations.create') }}" class="ml-auto px-4 py-2 bg-npp-red text-white text-sm rounded-lg hover:bg-red-700 font-medium">+ Add Station</a>
    </form>

    {{-- Summary pills --}}
    @php
        $nppCount  = \App\Models\Station::where('political_affiliation','pro_npp')->count();
        $neutCount = \App\Models\Station::where('political_affiliation','neutral')->count();
        $ndcCount  = \App\Models\Station::where('political_affiliation','pro_ndc')->count();
    @endphp
    <div class="flex flex-wrap gap-3">
        <div class="px-4 py-2 bg-white border border-gray-200 rounded-lg text-sm flex items-center gap-2">
            <span class="text-gray-500">Total</span>
            <span class="font-bold text-gray-800">{{ $stations->total() }}</span>
        </div>
        <div class="px-4 py-2 bg-green-50 border border-green-200 rounded-lg text-sm flex items-center gap-2">
            <span class="w-2.5 h-2.5 rounded-full bg-green-500 shrink-0"></span>
            <span class="text-green-700 font-medium">Pro NPP</span>
            <span class="font-bold text-green-800">{{ $nppCount }}</span>
        </div>
        <div class="px-4 py-2 bg-yellow-50 border border-yellow-200 rounded-lg text-sm flex items-center gap-2">
            <span class="w-2.5 h-2.5 rounded-full bg-yellow-400 shrink-0"></span>
            <span class="text-yellow-700 font-medium">Neutral</span>
            <span class="font-bold text-yellow-800">{{ $neutCount }}</span>
        </div>
        <div class="px-4 py-2 bg-red-50 border border-red-200 rounded-lg text-sm flex items-center gap-2">
            <span class="w-2.5 h-2.5 rounded-full bg-red-500 shrink-0"></span>
            <span class="text-red-700 font-medium">Pro NDC</span>
            <span class="font-bold text-red-800">{{ $ndcCount }}</span>
        </div>
    </div>

    <div class="bg-white rounded-xl border border-gray-200 shadow-sm overflow-hidden">
        <div class="overflow-x-auto">
            <table class="w-full text-sm">
                <thead class="bg-gray-50">
                    <tr>
                        <th class="text-left px-5 py-3 text-xs font-semibold text-gray-500 uppercase tracking-wider">Station</th>
                        <th class="text-left px-4 py-3 text-xs font-semibold text-gray-500 uppercase tracking-wider">Type</th>
                        <th class="text-left px-4 py-3 text-xs font-semibold text-gray-500 uppercase tracking-wider">Region</th>
                        <th class="text-left px-4 py-3 text-xs font-semibold text-gray-500 uppercase tracking-wider">Location</th>
                        <th class="text-left px-4 py-3 text-xs font-semibold text-gray-500 uppercase tracking-wider">Affiliation</th>
                        <th class="px-4 py-3"></th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-50">
                    @forelse($stations as $station)
                    <tr class="hover:bg-gray-50">
                        <td class="px-5 py-3 font-medium text-gray-900">{{ $station->name }}</td>
                        <td class="px-4 py-3">
                            <span class="text-xs px-2 py-0.5 rounded-full
                                {{ $station->type === 'TV'     ? 'bg-blue-100 text-blue-700'   : '' }}
                                {{ $station->type === 'Radio'  ? 'bg-green-100 text-green-700'  : '' }}
                                {{ $station->type === 'Online' ? 'bg-purple-100 text-purple-700': '' }}">
                                {{ $station->type }}
                            </span>
                        </td>
                        <td class="px-4 py-3 text-gray-600">{{ $station->region?->name ?? '—' }}</td>
                        <td class="px-4 py-3 text-gray-500 text-xs">{{ $station->location ?: '—' }}</td>
                        <td class="px-4 py-3">
                            <span class="text-xs px-2 py-0.5 rounded-full font-medium {{ $station->affiliation_badge }}">
                                {{ $station->affiliation_label }}
                            </span>
                        </td>
                        <td class="px-4 py-3 text-right">
                            <a href="{{ route('stations.edit', $station) }}" class="text-xs text-blue-600 hover:underline mr-3">Edit</a>
                            <form method="POST" action="{{ route('stations.destroy', $station) }}" class="inline"
                                  onsubmit="return confirm('Delete this station?')">
                                @csrf @method('DELETE')
                                <button type="submit" class="text-xs text-red-500 hover:underline">Delete</button>
                            </form>
                        </td>
                    </tr>
                    @empty
                    <tr><td colspan="6" class="px-5 py-10 text-center text-sm text-gray-400">No stations found</td></tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        @if($stations->hasPages())
        <div class="px-5 py-3 border-t border-gray-100">{{ $stations->links() }}</div>
        @endif
    </div>
</div>
@endsection