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

@section('content')

{{-- Data injected into JS to keep the x-data attribute small --}}
<script>
    window.__trunk = {
        communicators: @json($communicators),
        stations:      @json($stations),
        programmes:    @json($programmes),
        regions:       @json($regions->pluck('name', 'id')),
    };
</script>

<div class="mt-4 max-w-2xl">
    <div class="bg-white rounded-xl border border-gray-200 shadow-sm p-6"
         x-data="{
             region_id:     '',
             tier_id:       '',
             station_id:    '',
             communicators: window.__trunk.communicators,
             stations:      window.__trunk.stations,
             programmes:    window.__trunk.programmes,
             regionsMap:    window.__trunk.regions,
             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 [];
                 return this.programmes.filter(p => p.station_id == this.station_id);
             },
             regionLabel(c) {
                 return this.regionsMap[c.region_id] ? ' (' + this.regionsMap[c.region_id] + ')' : '';
             }
         }">

        <form method="POST" action="{{ route('deployments.store') }}">
            @csrf

            <div class="grid sm:grid-cols-2 gap-5">

                {{-- Filters (UI only — not submitted) --}}
                <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 focus:outline-none focus:ring-1 focus:ring-blue-400 bg-gray-50">
                        <option value="">All Regions</option>
                        @foreach($regions as $r)
                            <option value="{{ $r->id }}">{{ $r->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 focus:outline-none focus:ring-1 focus:ring-blue-400 bg-gray-50">
                        <option value="">All Tiers</option>
                        @foreach($tiers as $t)
                            <option value="{{ $t->id }}">{{ $t->name }}</option>
                        @endforeach
                    </select>
                </div>

                {{-- Communicator --}}
                <div class="sm:col-span-2">
                    <label class="block text-sm font-medium text-gray-700 mb-1.5">
                        Communicator <span class="text-red-500">*</span>
                    </label>
                    <select name="communicator_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('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 + regionLabel(c)"></option>
                        </template>
                    </select>
                    @error('communicator_id')
                        <p class="mt-1 text-xs text-red-600">{{ $message }}</p>
                    @enderror
                    <p class="mt-1 text-xs text-gray-400" x-text="filteredCommunicators.length + ' communicator(s) available'"></p>
                </div>

                {{-- Station --}}
                <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 }}">{{ $station->name }} ({{ $station->type }})</option>
                        @endforeach
                    </select>
                    @error('station_id')
                        <p class="mt-1 text-xs text-red-600">{{ $message }}</p>
                    @enderror
                </div>

                {{-- Programme — cascades from Station --}}
                <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 Engagement</option>
                        <template x-for="p in filteredProgrammes" :key="p.id">
                            <option :value="p.id" x-text="p.name"></option>
                        </template>
                    </select>
                    <p class="mt-1 text-xs text-gray-400" x-show="station_id && filteredProgrammes.length === 0">
                        No programmes linked to this station yet.
                    </p>
                </div>

                {{-- Date --}}
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1.5">
                        Deployment Date <span class="text-red-500">*</span>
                    </label>
                    <input type="date" name="deployment_date"
                           value="{{ old('deployment_date', now()->addDay()->format('Y-m-d')) }}"
                           min="{{ now()->format('Y-m-d') }}" 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('deployment_date') border-red-400 @enderror">
                    @error('deployment_date')
                        <p class="mt-1 text-xs text-red-600">{{ $message }}</p>
                    @enderror
                </div>

                {{-- Start time --}}
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1.5">Start 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>

                {{-- End time --}}
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1.5">End Time</label>
                    <input type="time" name="end_time" value="{{ old('end_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>

                {{-- Topic --}}
                <div class="sm:col-span-2">
                    <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. Energy Policy, Economic Performance…"
                           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>

                {{-- Notes --}}
                <div class="sm:col-span-2">
                    <label class="block text-sm font-medium text-gray-700 mb-1.5">Internal Notes</label>
                    <textarea name="notes" rows="2"
                              placeholder="Briefing notes, special instructions…"
                              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('notes') }}</textarea>
                </div>

            </div>

            <div class="bg-blue-50 border border-blue-100 rounded-lg px-4 py-3 mt-4">
                <p class="text-xs text-blue-700">
                    The communicator will receive an <strong>in-app notification</strong> and an
                    <strong>SMS</strong> once the deployment is created. They must accept or decline via the app.
                </p>
            </div>

            <div class="flex gap-3 mt-5 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">
                    Create &amp; Notify
                </button>
                <a href="{{ route('deployments.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