@extends('layouts.app')
@section('title', 'Self-Deployment Request')
@section('page-title', 'Request Self-Deployment')

@section('content')
<div class="mt-4 max-w-xl">
    <div class="bg-blue-50 border border-blue-200 rounded-xl p-4 mb-4 text-sm text-blue-800">
        <strong>How it works:</strong> Submit a request to appear on a programme or station. An admin or supervisor will review and approve it. Once approved, you will receive a deployment notification.
    </div>

    <div class="bg-white rounded-xl border border-gray-200 shadow-sm p-6"
         x-data="{
             station_id: '',
             stations: @json($stations),
             programmes: @json($programmes),
             get filteredProgrammes() {
                 if (!this.station_id) return [];
                 return this.programmes.filter(p => p.station_id == this.station_id);
             }
         }">
        <form method="POST" action="{{ route('requests.self.store') }}">
            @csrf

            <div class="space-y-5">
                <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" x-model="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">Programme</label>
                    <select name="programme_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="">General / Not specific</option>
                        <template x-for="p in filteredProgrammes" :key="p.id">
                            <option :value="p.id" x-text="p.name"></option>
                        </template>
                    </select>
                </div>

                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1.5">Requested Date <span class="text-red-500">*</span></label>
                    <input type="date" name="requested_date" value="{{ old('requested_date', now()->addDay()->format('Y-m-d')) }}" required
                           min="{{ now()->format('Y-m-d') }}"
                           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('requested_date') border-red-400 @enderror">
                    @error('requested_date') <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">Preferred Time</label>
                    <input type="time" name="start_time" value="{{ old('start_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-1.5">Discussion Topic</label>
                    <input type="text" name="topic" value="{{ old('topic') }}" placeholder="e.g. Roads Infrastructure…"
                           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-1.5">Reason / Additional Info</label>
                    <textarea name="reason" rows="3" placeholder="Why do you want to appear on this programme?"
                              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 resize-none">{{ old('reason') }}</textarea>
                </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">Submit Request</button>
                <a href="{{ route('my-deployments') }}" 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