@extends('admin.layout')
@section('title', 'Kirim Pesan')
@section('subtitle', 'Pesan resmi dari admin ke pengguna')

@section('content')
    <a href="{{ route('admin.conversations') }}" class="text-sm text-sub hover:text-brand font-semibold">‹ Kembali ke daftar percakapan</a>

    <div class="max-w-2xl mt-4">
        <div class="flex flex-wrap items-center gap-2 mb-4">
            @foreach ([['customer', 'Customer'], ['mitra', 'Mitra']] as [$val, $label])
                <a href="{{ route('admin.conversations.create', ['role' => $val]) }}"
                   class="px-3.5 py-2 rounded-xl text-sm font-semibold transition
                   {{ $role === $val ? 'bg-brand text-white' : 'bg-white border border-line text-sub hover:text-brand' }}">
                    {{ $label }}
                </a>
            @endforeach
        </div>

        <form method="POST" action="{{ route('admin.conversations.store') }}"
              class="bg-white rounded-2xl border border-line p-5 space-y-4">
            @csrf

            <div>
                <label class="block text-sm font-semibold mb-1.5">Penerima</label>
                <select name="user_id" required
                        class="w-full rounded-xl border border-line px-3.5 py-2.5 text-sm outline-none focus:border-brand focus:ring-2 focus:ring-brand/20">
                    <option value="">— Pilih {{ $role === 'mitra' ? 'mitra' : 'customer' }} —</option>
                    @foreach ($recipients as $u)
                        <option value="{{ $u->id }}" @selected(old('user_id') == $u->id)>
                            {{ $u->name }} ({{ $u->phone }})
                        </option>
                    @endforeach
                </select>
                @error('user_id')<p class="text-xs text-red-600 mt-1">{{ $message }}</p>@enderror
                @if ($recipients->isEmpty())
                    <p class="text-xs text-sub mt-1.5">Belum ada {{ $role }} terdaftar.</p>
                @endif
            </div>

            <div>
                <label class="block text-sm font-semibold mb-1.5">Topik <span class="text-sub font-normal">(opsional)</span></label>
                <input name="topic" value="{{ old('topic') }}" maxlength="255" placeholder="Info verifikasi akun"
                       class="w-full rounded-xl border border-line px-3.5 py-2.5 text-sm outline-none focus:border-brand focus:ring-2 focus:ring-brand/20">
                @error('topic')<p class="text-xs text-red-600 mt-1">{{ $message }}</p>@enderror
            </div>

            <div>
                <label class="block text-sm font-semibold mb-1.5">Pesan</label>
                <textarea name="body" rows="5" required maxlength="2000"
                          placeholder="Tulis informasi yang ingin disampaikan…"
                          class="w-full rounded-xl border border-line px-3.5 py-2.5 text-sm outline-none focus:border-brand focus:ring-2 focus:ring-brand/20">{{ old('body') }}</textarea>
                @error('body')<p class="text-xs text-red-600 mt-1">{{ $message }}</p>@enderror
            </div>

            <div class="flex items-center gap-2">
                <button class="px-4 py-2.5 rounded-xl bg-brand text-white text-sm font-semibold hover:bg-brand-dark transition">
                    Kirim Pesan
                </button>
                <span class="text-xs text-sub">Pesan berikutnya ke orang yang sama menyambung di percakapan ini.</span>
            </div>
        </form>
    </div>
@endsection