<div class="max-w-3xl mx-auto">
    <div class="flex items-center gap-3 mb-6"><a href="?page=communications" class="text-gray-400 hover:text-gray-600"><svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/></svg></a><h1 class="text-2xl font-bold text-gray-900">New Message</h1></div>
    <form method="POST" action="?page=communications&action=store" class="space-y-6"><?= CSRF::field() ?>
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div><label class="block text-sm font-medium text-gray-700 mb-1">Type</label>
                    <select name="type" class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-indigo-500">
                    <?php foreach (['email'=>'Email','sms'=>'SMS','phone'=>'Phone Call Log','note'=>'Internal Note'] as $v=>$l): ?><option value="<?= $v ?>"><?= $l ?></option><?php endforeach; ?></select></div>
                <div><label class="block text-sm font-medium text-gray-700 mb-1">Recipient Type <span class="text-red-500">*</span></label>
                    <select name="recipient_type" id="recipient_type" required onchange="toggleRecipients()" class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-indigo-500"><option value="">Select</option><option value="tenant" <?= ($_GET['recipient_type'] ?? '') === 'tenant' ? 'selected' : '' ?>>Tenant</option><option value="owner">Owner</option><option value="vendor">Vendor</option></select></div>
                <div class="md:col-span-2"><label class="block text-sm font-medium text-gray-700 mb-1">Recipient <span class="text-red-500">*</span></label>
                    <select name="recipient_id" id="recipient_id" required class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-indigo-500"><option value="">Select recipient type first</option></select>
                </div>
                <div class="md:col-span-2"><label class="block text-sm font-medium text-gray-700 mb-1">Subject <span class="text-red-500">*</span></label><input type="text" name="subject" required class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-indigo-500"></div>
                <div class="md:col-span-2"><label class="block text-sm font-medium text-gray-700 mb-1">Message <span class="text-red-500">*</span></label><textarea name="body" rows="8" required class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-indigo-500"></textarea></div>
            </div>
        </div>
        <div class="flex justify-end gap-3"><a href="?page=communications" class="px-4 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 text-sm font-medium">Cancel</a><button type="submit" class="px-6 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 text-sm font-medium">Send Message</button></div>
    </form>
</div>
<script>
const recipients = {
    tenant: <?= json_encode(array_map(fn($t) => ['id'=>$t['id'],'label'=>$t['first_name'].' '.$t['last_name'].' ('.$t['email'].')'], $tenants ?? [])) ?>,
    owner: <?= json_encode(array_map(fn($o) => ['id'=>$o['id'],'label'=>$o['first_name'].' '.$o['last_name'].' ('.$o['email'].')'], $owners ?? [])) ?>,
    vendor: <?= json_encode(array_map(fn($v) => ['id'=>$v['id'],'label'=>$v['company_name'].' ('.$v['email'].')'], $vendors ?? [])) ?>
};
function toggleRecipients() {
    const type = document.getElementById('recipient_type').value;
    const sel = document.getElementById('recipient_id');
    sel.innerHTML = '<option value="">Select</option>';
    (recipients[type] || []).forEach(r => { const o = document.createElement('option'); o.value = r.id; o.text = r.label; sel.add(o); });
    <?php if (!empty($_GET['tenant_id'])): ?>if(type==='tenant'){sel.value='<?= intval($_GET['tenant_id']) ?>';}<?php endif; ?>
}
document.addEventListener('DOMContentLoaded', () => { if(document.getElementById('recipient_type').value) toggleRecipients(); });
</script>
