@extends('layouts.app')
@section('title', 'Programmes')
@section('page-title', 'Programmes')

@section('content')
<div class="mt-4 space-y-4">
    <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 programmes…"
               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="station_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 Stations</option>
            @foreach($stations as $station)
                <option value="{{ $station->id }}" {{ request('station_id') == $station->id ? 'selected' : '' }}>{{ $station->name }}</option>
            @endforeach
        </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('programmes.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('programmes.create') }}" class="ml-auto px-4 py-2 bg-npp-red text-white text-sm rounded-lg hover:bg-red-700 font-medium">+ Add Programme</a>
    </form>

    <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">Programme</th>
                        <th class="text-left px-4 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">Broadcast</th>
                        <th class="text-left px-4 py-3 text-xs font-semibold text-gray-500 uppercase tracking-wider">Producer</th>
                        <th class="px-4 py-3"></th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-50">
                    @forelse($programmes as $programme)
                    <tr class="hover:bg-gray-50">
                        <td class="px-5 py-3 font-medium text-gray-900">{{ $programme->name }}</td>
                        <td class="px-4 py-3 text-gray-600">{{ $programme->station?->name }}</td>
                        <td class="px-4 py-3 text-gray-600">
                            @if($programme->broadcast_time)
                                {{ date('g:i A', strtotime($programme->broadcast_time)) }}
                            @endif
                            @if($programme->broadcast_days)
                                <div class="text-xs text-gray-400">{{ implode(', ', $programme->broadcast_days) }}</div>
                            @endif
                        </td>
                        <td class="px-4 py-3 text-gray-600">{{ $programme->producer?->name ?? '—' }}</td>
                        <td class="px-4 py-3 text-right">
                            <a href="{{ route('programmes.edit', $programme) }}" class="text-xs text-blue-600 hover:underline mr-3">Edit</a>
                            <form method="POST" action="{{ route('programmes.destroy', $programme) }}" class="inline"
                                  onsubmit="return confirm('Delete this programme?')">
                                @csrf @method('DELETE')
                                <button type="submit" class="text-xs text-red-500 hover:underline">Delete</button>
                            </form>
                        </td>
                    </tr>
                    @empty
                    <tr><td colspan="5" class="px-5 py-10 text-center text-sm text-gray-400">No programmes found</td></tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        @if($programmes->hasPages())
        <div class="px-5 py-3 border-t border-gray-100">{{ $programmes->links() }}</div>
        @endif
    </div>
</div>
@endsection