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

@section('content')
<div class="mt-4 max-w-lg">
    <div class="bg-white rounded-xl border border-gray-200 shadow-sm p-6">
        <form method="POST" action="{{ route('programmes.store') }}"
              x-data="{ days: @json(old('broadcast_days', [])) }">
            @csrf
            <div class="space-y-5">
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1.5">Programme Name <span class="text-red-500">*</span></label>
                    <input type="text" name="name" value="{{ old('name') }}" 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 @error('name') border-red-400 @enderror">
                    @error('name') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1.5">Station <span class="text-red-500">*</span></label>
                    <select name="station_id" 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 @error('station_id') border-red-400 @enderror">
                        <option value="">Select station…</option>
                        @foreach($stations as $station)
                            <option value="{{ $station->id }}" {{ old('station_id') == $station->id ? 'selected' : '' }}>{{ $station->name }} ({{ $station->type }})</option>
                        @endforeach
                    </select>
                    @error('station_id') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1.5">Broadcast Time</label>
                    <input type="time" name="broadcast_time" value="{{ old('broadcast_time') }}"
                           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-2">Broadcast Days</label>
                    <div class="flex flex-wrap gap-2">
                        @foreach(['Mon','Tue','Wed','Thu','Fri','Sat','Sun'] as $day)
                        <label class="flex items-center gap-1.5 cursor-pointer">
                            <input type="checkbox" name="broadcast_days[]" value="{{ $day }}"
                                   {{ in_array($day, old('broadcast_days', [])) ? 'checked' : '' }}
                                   class="rounded border-gray-300 text-blue-600">
                            <span class="text-sm text-gray-700">{{ $day }}</span>
                        </label>
                        @endforeach
                    </div>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1.5">Producer Account</label>
                    <select name="producer_user_id" 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="">Not linked</option>
                        @foreach($producers as $producer)
                            <option value="{{ $producer->id }}" {{ old('producer_user_id') == $producer->id ? 'selected' : '' }}>{{ $producer->name }}</option>
                        @endforeach
                    </select>
                </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">Add Programme</button>
                <a href="{{ route('programmes.index') }}" class="px-5 py-2.5 text-sm text-gray-600 rounded-lg border border-gray-300 hover:bg-gray-50">Cancel</a>
            </div>
        </form>
    </div>
</div>
@endsection