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

@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('stations.store') }}">
            @csrf
            <div class="space-y-5">
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1.5">Station 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">Type <span class="text-red-500">*</span></label>
                    <select name="type" 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="">Select…</option>
                        <option value="TV"     {{ old('type') === 'TV'     ? 'selected' : '' }}>TV</option>
                        <option value="Radio"  {{ old('type') === 'Radio'  ? 'selected' : '' }}>Radio</option>
                        <option value="Online" {{ old('type') === 'Online' ? 'selected' : '' }}>Online</option>
                    </select>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1.5">Region <span class="text-red-500">*</span></label>
                    <select name="region_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('region_id') border-red-400 @enderror">
                        <option value="">Select region…</option>
                        @foreach($regions as $region)
                            <option value="{{ $region->id }}" {{ old('region_id') == $region->id ? 'selected' : '' }}>{{ $region->name }}</option>
                        @endforeach
                    </select>
                    @error('region_id') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror
                </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 Station</button>
                <a href="{{ route('stations.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