<!-- app/Views/superadmin/sms.php -->
<div 
    x-data="{ 
        targets: 'custom',
        recipientCategory: 'admins', // 'admins' only
        channel: 'sms', // 'sms' or 'email'
        message: '',
        get charCount() { return this.message.length; },
        get smsCount() { return Math.ceil(this.charCount / 160) || 0; }
    }"
    class="space-y-6"
>
    <div>
        <h2 class="text-xl font-bold text-white">Platform Communication Center</h2>
        <p class="text-slate-400 text-sm mt-1">Send direct promotional emails or SMS campaigns to restaurant admins.</p>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <!-- Composer Form -->
        <div class="lg:col-span-2 rounded-2xl p-6 border border-white/5 bg-white/[0.02] space-y-4">
            <h3 class="font-semibold text-white text-base flex items-center gap-2"><i class="fas fa-paper-plane text-purple-400"></i> New Broadcast Campaign</h3>
            
            <form action="/superadmin/sms/send" method="POST" class="space-y-5">
                <!-- Select Recipients Group -->
                <input type="hidden" name="recipient_category" value="admins">

                <div>
                    <label class="block text-xs font-semibold uppercase tracking-wider text-slate-400 mb-2">Communication Channel</label>
                    <div class="grid grid-cols-2 gap-2">
                        <label 
                            @click="channel = 'sms'"
                            class="flex items-center justify-center p-2.5 rounded-xl border cursor-pointer hover:bg-white/5 transition text-xs font-bold"
                            :class="channel === 'sms' ? 'border-purple-500 bg-purple-500/10 text-white' : 'border-white/10 text-slate-400 bg-transparent'"
                        >
                            <input type="radio" name="channel" value="sms" class="hidden" :checked="channel === 'sms'">
                            <i class="fas fa-sms mr-1.5"></i> SMS Text
                        </label>
                        <label 
                            @click="channel = 'email'"
                            class="flex items-center justify-center p-2.5 rounded-xl border cursor-pointer hover:bg-white/5 transition text-xs font-bold"
                            :class="channel === 'email' ? 'border-purple-500 bg-purple-500/10 text-white' : 'border-white/10 text-slate-400 bg-transparent'"
                        >
                            <input type="radio" name="channel" value="email" class="hidden" :checked="channel === 'email'">
                            <i class="fas fa-envelope mr-1.5"></i> Email Mailer
                        </label>
                    </div>
                </div>

                <!-- Targets Mode -->
                <div>
                    <label class="block text-xs font-semibold uppercase tracking-wider text-slate-400 mb-2">Target Selection</label>
                    <div class="grid grid-cols-3 gap-3">
                        <label 
                            @click="targets = 'custom'"
                            class="flex flex-col items-center justify-center p-3 rounded-xl border cursor-pointer hover:bg-white/5 transition"
                            :class="targets === 'custom' ? 'border-purple-500 bg-purple-500/10 text-white' : 'border-white/10 text-slate-400 bg-transparent'"
                        >
                            <input type="radio" name="targets" value="custom" class="hidden" :checked="targets === 'custom'">
                            <i class="fas fa-keyboard text-base mb-1"></i>
                            <span class="text-xs font-semibold">Custom Input</span>
                        </label>
                        <label 
                            @click="targets = 'selected'"
                            class="flex flex-col items-center justify-center p-3 rounded-xl border cursor-pointer hover:bg-white/5 transition"
                            :class="targets === 'selected' ? 'border-purple-500 bg-purple-500/10 text-white' : 'border-white/10 text-slate-400 bg-transparent'"
                        >
                            <input type="radio" name="targets" value="selected" class="hidden" :checked="targets === 'selected'">
                            <i class="fas fa-user-check text-base mb-1"></i>
                            <span class="text-xs font-semibold">Select List</span>
                        </label>
                        <label 
                            @click="targets = 'all'"
                            class="flex flex-col items-center justify-center p-3 rounded-xl border cursor-pointer hover:bg-white/5 transition"
                            :class="targets === 'all' ? 'border-purple-500 bg-purple-500/10 text-white' : 'border-white/10 text-slate-400 bg-transparent'"
                        >
                            <input type="radio" name="targets" value="all" class="hidden" :checked="targets === 'all'">
                            <i class="fas fa-users text-base mb-1"></i>
                            <span class="text-xs font-semibold">All Directory</span>
                        </label>
                    </div>
                </div>

                <!-- Custom Input Fields -->
                <div x-show="targets === 'custom'" x-transition class="space-y-4">
                    <div x-show="channel === 'sms'">
                        <label class="block text-xs font-semibold text-slate-400 mb-1.5">Phone Numbers (Comma separated)</label>
                        <textarea 
                            name="custom_numbers" 
                            rows="2" 
                            placeholder="+8801850211813, +8801700000000" 
                            class="form-input text-sm"
                        ></textarea>
                    </div>
                    <div x-show="channel === 'email'" style="display:none">
                        <label class="block text-xs font-semibold text-slate-400 mb-1.5">Email Addresses (Comma separated)</label>
                        <textarea 
                            name="custom_emails" 
                            rows="2" 
                            placeholder="admin1@example.com, admin2@example.com" 
                            class="form-input text-sm"
                        ></textarea>
                    </div>
                </div>

                <!-- Selected Recipient Banner Warning -->
                <div x-show="targets === 'selected'" class="p-4 rounded-xl border border-yellow-500/15 bg-yellow-500/[0.02]" x-transition style="display:none">
                    <p class="text-xs text-yellow-400 font-semibold flex items-center gap-1.5 mb-1"><i class="fas fa-circle-exclamation text-xs"></i> Select Mode Active</p>
                    <p class="text-3xs text-slate-400">Mark checkboxes in the directory on the right pane to target specific recipients.</p>
                </div>

                <!-- Subject line (Emails only) -->
                <div x-show="channel === 'email'" x-transition style="display:none">
                    <label class="block text-xs font-semibold text-slate-400 mb-1.5">Email Subject *</label>
                    <input 
                        type="text" 
                        name="subject" 
                        value="Important update from RestPO System"
                        class="form-input text-sm"
                    >
                </div>

                <!-- Message Body -->
                <div>
                    <label class="block text-xs font-semibold text-slate-400 mb-1.5" x-text="channel === 'email' ? 'Email Body Message (HTML supported)' : 'SMS Body Text'"></label>
                    <textarea 
                        name="message" 
                        rows="6" 
                        x-model="message" 
                        required 
                        class="form-input text-sm" 
                        placeholder="Type message content here..."
                    ></textarea>
                    <div x-show="channel === 'sms'" class="flex justify-between items-center text-3xs text-slate-500 mt-2">
                        <span x-text="charCount + '/480 characters'"></span>
                        <span x-text="smsCount + ' SMS parts'"></span>
                    </div>
                </div>

                <!-- Submit Button -->
                <div class="border-t border-white/5 pt-4">
                    <button type="submit" class="btn-primary w-full md:w-auto px-8 py-3 rounded-xl font-bold flex items-center justify-center gap-2 shadow-lg shadow-purple-500/20 active:scale-[0.98] transition">
                        <i class="fas fa-paper-plane"></i> 
                        <span x-text="channel === 'email' ? 'Send Broadcast Emails' : 'Dispatch Campaign SMS'"></span>
                    </button>
                </div>

                <!-- Hidden Selected Elements bound to Directory checkboxes -->
                <div x-show="targets === 'selected'" class="hidden">
                    <!-- Restaurant Admins Hidden elements -->
                    <template x-if="recipientCategory === 'admins'">
                        <div>
                            <?php foreach ($restaurantAdmins as $index => $a): ?>
                            <input type="checkbox" name="selected_emails[]" value="<?php echo htmlspecialchars($a['email']); ?>" :checked="document.getElementById('admin-check-<?php echo $index; ?>')?.checked">
                            <input type="checkbox" name="selected_phones[]" value="<?php echo htmlspecialchars($a['phone']); ?>" :checked="document.getElementById('admin-check-<?php echo $index; ?>')?.checked">
                            <?php endforeach; ?>
                        </div>
                    </template>
                </div>
            </form>
        </div>

        <!-- Directory Sidebar -->
        <div class="rounded-2xl border border-white/5 bg-white/[0.02] overflow-hidden flex flex-col h-[580px]">
            <!-- Restaurant Owners Directory -->
            <div class="flex flex-col h-full">
                <div class="px-5 py-4 border-b border-white/5 bg-white/[0.01] flex-shrink-0">
                    <h3 class="font-semibold text-white text-sm flex items-center gap-2"><i class="fas fa-user-shield text-purple-400"></i> Restaurant Owner Directory</h3>
                    <p class="text-3xs text-slate-500 mt-0.5"><?php echo count($restaurantAdmins); ?> active admins registered</p>
                </div>
                <div class="flex-1 overflow-y-auto divide-y divide-white/5">
                    <?php if (empty($restaurantAdmins)): ?>
                    <div class="p-8 text-center text-slate-500 text-xs">No restaurant admins found in the system.</div>
                    <?php endif; ?>
                    <?php foreach ($restaurantAdmins as $index => $a): ?>
                    <label class="flex items-center justify-between p-3.5 hover:bg-white/[0.015] transition cursor-pointer select-none">
                        <div class="flex items-center gap-3">
                            <input 
                                type="checkbox" 
                                id="admin-check-<?php echo $index; ?>"
                                class="w-4 h-4 rounded text-purple-600 bg-white/5 border-white/10 focus:ring-purple-500"
                                :disabled="targets !== 'selected'"
                            >
                            <div>
                                <span class="block text-xs font-semibold text-white"><?php echo htmlspecialchars($a['name']); ?></span>
                                <span class="block text-3xs text-slate-300 mt-0.5"><?php echo htmlspecialchars($a['restaurant_name']); ?></span>
                                <span class="block text-3xs text-slate-500 mt-0.5"><?php echo htmlspecialchars($a['email']); ?> <?php echo $a['phone'] ? '| ' . htmlspecialchars($a['phone']) : ''; ?></span>
                            </div>
                        </div>
                    </label>
                    <?php endforeach; ?>
                </div>
            </div>
        </div>
    </div>
</div>
