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

@section('content')
<div class="mt-4 max-w-2xl">
    <div class="bg-white rounded-xl border border-gray-200 shadow-sm p-6">
        <form method="POST" action="{{ route('communicators.store') }}" x-data="{ languages: @json(old('languages', [''])) }">
            @csrf

            <div class="grid sm:grid-cols-2 gap-5">
                {{-- Name --}}
                <div class="sm:col-span-2">
                    <label class="block text-sm font-medium text-gray-700 mb-1.5">Full 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>

                {{-- Phone --}}
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1.5">Phone <span class="text-red-500">*</span></label>
                    <input type="text" name="phone" value="{{ old('phone') }}" placeholder="0244000000" 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('phone') border-red-400 @enderror">
                    @error('phone') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror
                </div>

                {{-- MoMo --}}
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1.5">MoMo Number</label>
                    <input type="text" name="momo_number" value="{{ old('momo_number') }}" placeholder="0244000000"
                           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>

                {{-- Region --}}
                <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>

                {{-- Tier --}}
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1.5">Tier <span class="text-red-500">*</span></label>
                    <select name="tier_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('tier_id') border-red-400 @enderror">
                        <option value="">Select tier…</option>
                        @foreach($tiers as $tier)
                            <option value="{{ $tier->id }}" {{ old('tier_id') == $tier->id ? 'selected' : '' }}>{{ $tier->name }}</option>
                        @endforeach
                    </select>
                    @error('tier_id') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror
                </div>

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

                {{-- Status --}}
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1.5">Status <span class="text-red-500">*</span></label>
                    <select name="status" 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="active"   {{ old('status', 'active') === 'active'   ? 'selected' : '' }}>Active</option>
                        <option value="pending"  {{ old('status') === 'pending'             ? 'selected' : '' }}>Pending</option>
                        <option value="inactive" {{ old('status') === 'inactive'            ? 'selected' : '' }}>Inactive</option>
                        <option value="suspended"{{ old('status') === 'suspended'           ? 'selected' : '' }}>Suspended</option>
                    </select>
                </div>

                {{-- Languages --}}
                <div class="sm:col-span-2">
                    <label class="block text-sm font-medium text-gray-700 mb-1.5">Languages Spoken</label>
                    <div class="space-y-2">
                        <template x-for="(lang, index) in languages" :key="index">
                            <div class="flex gap-2">
                                <input type="text" :name="'languages['+index+']'" x-model="languages[index]" placeholder="e.g. Twi, English…"
                                       class="flex-1 px-3 py-2 text-sm border border-gray-300 rounded-lg focus:outline-none focus:ring-1 focus:ring-blue-500">
                                <button type="button" @click="languages.splice(index, 1)" x-show="languages.length > 1"
                                        class="px-2 py-2 text-gray-400 hover:text-red-500">
                                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
                                </button>
                            </div>
                        </template>
                        <button type="button" @click="languages.push('')"
                                class="text-xs text-blue-600 hover:underline flex items-center gap-1">
                            <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/></svg>
                            Add language
                        </button>
                    </div>
                </div>

                {{-- Notes --}}
                <div class="sm:col-span-2">
                    <label class="block text-sm font-medium text-gray-700 mb-1.5">Notes</label>
                    <textarea name="notes" rows="3" placeholder="Additional notes…"
                              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="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">Save Communicator</button>
                <a href="{{ route('communicators.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