@extends('layouts.app')
@section('title', 'Request a Communicator')
@section('page-title', 'Request a Communicator')

@push('scripts')
<script>
function producerRequestForm() {
    return {
        region_id: '',
        tier_id: '',
        station_id: '',
        notListed: false,
        communicators: @json($communicators),
        stations: @json($stations),
        programmes: @json($programmes),
        get filteredCommunicators() {
            return this.communicators.filter(c => {
                if (this.region_id && c.region_id != this.region_id) return false;
                if (this.tier_id && c.tier_id != this.tier_id) return false;
                return true;
            });
        },
        get filteredProgrammes() {
            if (!this.station_id) return this.programmes;
            return this.programmes.filter(p => p.station_id == this.station_id);
        }
    };
}
</script>
@endpush

@section('content')
<div class="mt-4 max-w-xl">
    <div class="bg-purple-50 border border-purple-200 rounded-xl p-4 mb-4 text-sm text-purple-800">
        <strong>Producer Request:</strong> Search for a communicator and request them for your programme. The NPP communications team will review and approve the request.
    </div>

    <div class="bg-white rounded-xl border border-gray-200 shadow-sm p-6"
         x-data="producerRequestForm()">
        <form method="POST" action="{{ route('requests.producer.store') }}">
            @csrf

            <div class="space-y-5">
                {{-- Communicator filters --}}
                <div class="grid grid-cols-2 gap-3">
                    <div>
                        <label class="block text-xs font-medium text-gray-500 mb-1">Filter by Region</label>
                        <select x-model="region_id" class="w-full px-3 py-2 text-sm border border-gray-200 rounded-lg bg-gray-50 focus:outline-none focus:ring-1 focus:ring-blue-400">
                            <option value="">All Regions</option>
                            @foreach($communicators->pluck('region')->filter()->unique('id') as $region)
                                <option value="{{ $region->id }}">{{ $region->name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div>
                        <label class="block text-xs font-medium text-gray-500 mb-1">Filter by Tier</label>
                        <select x-model="tier_id" class="w-full px-3 py-2 text-sm border border-gray-200 rounded-lg bg-gray-50 focus:outline-none focus:ring-1 focus:ring-blue-400">
                            <option value="">All Tiers</option>
                            @foreach($communicators->pluck('tier')->filter()->unique('id')->sortBy('level') as $tier)
                                <option value="{{ $tier->id }}">{{ $tier->name }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>

                {{-- Communicator select --}}
                <div>
                    <div class="flex items-center justify-between mb-1.5">
                        <label class="block text-sm font-medium text-gray-700">
                            Communicator <span class="text-red-500" x-show="!notListed">*</span>
                        </label>
                        <label class="flex items-center gap-1.5 cursor-pointer text-xs text-gray-500 select-none">
                            <input type="checkbox" name="communicator_not_listed" value="1"
                                   x-model="notListed"
                                   class="rounded border-gray-300 text-blue-600">
                            Not in list
                        </label>
                    </div>

                    {{-- Dropdown (shown when communicator IS in the list) --}}
                    <div x-show="!notListed">
                        <select name="communicator_id" :required="!notListed"
                                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('communicator_id') border-red-400 @enderror">
                            <option value="">Select communicator…</option>
                            <template x-for="c in filteredCommunicators" :key="c.id">
                                <option :value="c.id" x-text="c.name + ' — ' + (c.tier?.name ?? 'Untiered')"></option>
                            </template>
                        </select>
                        @error('communicator_id') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror
                    </div>

                    {{-- Free-text (shown when communicator is NOT in the list) --}}
                    <div x-show="notListed" x-cloak>
                        <input type="text" name="communicator_name"
                               :required="notListed"
                               value="{{ old('communicator_name') }}"
                               placeholder="Enter the communicator's full name…"
                               class="w-full px-3 py-2 text-sm border border-blue-300 bg-blue-50 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 @error('communicator_name') border-red-400 @enderror">
                        <p class="mt-1 text-xs text-blue-600">This name will be noted on the request for the admin team to follow up.</p>
                        @error('communicator_name') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror
                    </div>
                </div>

                {{-- Station --}}
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1.5">Your 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 }}</option>
                        @endforeach
                    </select>
                    @error('station_id') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror
                </div>

                {{-- Programme --}}
                <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="">Not programme-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">Required 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">Time Slot</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="Programme topic / discussion angle…"
                           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">Why this communicator?</label>
                    <textarea name="reason" rows="3" placeholder="Explain why you are requesting this specific communicator…"
                              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('requests.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