@extends('layouts.app')

@section('title', 'WhatsApp Messages')

@section('content')
<div x-data="{ showSingleModal: false, showBulkModal: false }" class="space-y-4 md:space-y-6">
    <!-- Stats Cards -->
    <div class="grid grid-cols-2 md:grid-cols-4 gap-4 md:gap-6">
        <div class="bg-gradient-to-br from-green-600/80 to-green-700/80 backdrop-blur-xl border border-green-500/30 rounded-xl p-4 md:p-6 shadow-2xl text-white">
            <div class="flex items-center">
                <div class="bg-white/20 rounded-lg p-2 mr-3">
                    <i class="ti ti-brand-whatsapp text-xl"></i>
                </div>
                <div>
                    <p class="text-green-200 text-xs">Total Messages</p>
                    <p class="text-2xl font-bold">{{ $messages->total() }}</p>
                </div>
            </div>
        </div>
        
        <div class="bg-gradient-to-br from-blue-600/80 to-blue-700/80 backdrop-blur-xl border border-blue-500/30 rounded-xl p-4 md:p-6 shadow-2xl text-white">
            <div class="flex items-center">
                <div class="bg-white/20 rounded-lg p-2 mr-3">
                    <i class="ti ti-check text-xl"></i>
                </div>
                <div>
                    <p class="text-blue-200 text-xs">Sent</p>
                    <p class="text-2xl font-bold">{{ $totalSent }}</p>
                </div>
            </div>
        </div>
        
        <div class="bg-gradient-to-br from-yellow-600/80 to-yellow-700/80 backdrop-blur-xl border border-yellow-500/30 rounded-xl p-4 md:p-6 shadow-2xl text-white">
            <div class="flex items-center">
                <div class="bg-white/20 rounded-lg p-2 mr-3">
                    <i class="ti ti-clock text-xl"></i>
                </div>
                <div>
                    <p class="text-yellow-200 text-xs">Pending</p>
                    <p class="text-2xl font-bold">{{ $totalPending }}</p>
                </div>
            </div>
        </div>
        
        <div class="bg-gradient-to-br from-red-600/80 to-red-700/80 backdrop-blur-xl border border-red-500/30 rounded-xl p-4 md:p-6 shadow-2xl text-white">
            <div class="flex items-center">
                <div class="bg-white/20 rounded-lg p-2 mr-3">
                    <i class="ti ti-x text-xl"></i>
                </div>
                <div>
                    <p class="text-red-200 text-xs">Failed</p>
                    <p class="text-2xl font-bold">{{ $totalFailed }}</p>
                </div>
            </div>
        </div>
    </div>

    <!-- WhatsApp Table -->
    <div class="bg-slate-800/90 backdrop-blur-xl border border-slate-700/50 rounded-xl md:rounded-2xl shadow-2xl">
        <div class="p-4 md:p-6 border-b border-slate-700">
            <div class="flex flex-col md:flex-row justify-between items-start md:items-center gap-4">
                <h4 class="text-xl font-semibold text-white">WhatsApp History</h4>
                <div class="flex flex-wrap gap-2">
                    <button @click="showSingleModal = true" class="bg-gradient-to-r from-green-600 to-green-700 hover:from-green-700 hover:to-green-800 text-white px-4 py-2 rounded-lg text-sm transition-all flex items-center gap-2">
                        <i class="ti ti-send"></i>
                        <span class="hidden sm:inline">Send Single</span>
                    </button>
                    <button @click="showBulkModal = true" class="bg-gradient-to-r from-blue-600 to-blue-700 hover:from-blue-700 hover:to-blue-800 text-white px-4 py-2 rounded-lg text-sm transition-all flex items-center gap-2">
                        <i class="ti ti-send"></i>
                        <span class="hidden sm:inline">Send Bulk</span>
                    </button>
                    <a href="{{ route('whatsapp.templates') }}" class="bg-purple-600 hover:bg-purple-700 text-white px-4 py-2 rounded-lg text-sm transition-all flex items-center gap-2">
                        <i class="ti ti-template"></i>
                        <span class="hidden sm:inline">Templates</span>
                    </a>
                    <button class="bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-lg text-sm transition-all flex items-center gap-2">
                        <i class="ti ti-download"></i>
                        <span class="hidden sm:inline">Export</span>
                    </button>
                </div>
            </div>
        </div>
        <div class="p-4 md:p-6">
            <div class="mb-4">
                <div class="relative">
                    <input type="text" id="searchInput" class="w-full bg-slate-700/50 border border-slate-600 rounded-lg pl-10 pr-4 py-3 text-white placeholder-slate-400 focus:ring-2 focus:ring-red-500 focus:border-red-500" placeholder="Search WhatsApp messages...">
                    <svg class="absolute left-3 top-3.5 h-5 w-5 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
                    </svg>
                </div>
            </div>
            <div class="table-wrapper" style="overflow-x: auto; -webkit-overflow-scrolling: touch; width: 100%; max-width: calc(100vw - 4rem); touch-action: pan-x;">
                <table class="w-full min-w-[700px] divide-y divide-slate-700" id="whatsappTable">
                    <thead class="bg-slate-700/50">
                        <tr>
                            <th class="px-3 md:px-6 py-3 md:py-4 text-left text-xs font-medium text-slate-300 uppercase tracking-wider cursor-pointer hover:text-white transition-colors">
                                <div class="flex items-center gap-2">
                                    Date
                                    <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="M8 9l4-4 4 4m0 6l-4 4-4-4"></path>
                                    </svg>
                                </div>
                            </th>
                            <th class="px-3 md:px-6 py-3 md:py-4 text-left text-xs font-medium text-slate-300 uppercase tracking-wider cursor-pointer hover:text-white transition-colors">
                                <div class="flex items-center gap-2">
                                    Phone
                                    <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="M8 9l4-4 4 4m0 6l-4 4-4-4"></path>
                                    </svg>
                                </div>
                            </th>
                            <th class="px-3 md:px-6 py-3 md:py-4 text-left text-xs font-medium text-slate-300 uppercase tracking-wider cursor-pointer hover:text-white transition-colors">
                                <div class="flex items-center gap-2">
                                    Message
                                    <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="M8 9l4-4 4 4m0 6l-4 4-4-4"></path>
                                    </svg>
                                </div>
                            </th>
                            <th class="px-3 md:px-6 py-3 md:py-4 text-left text-xs font-medium text-slate-300 uppercase tracking-wider cursor-pointer hover:text-white transition-colors">
                                <div class="flex items-center gap-2">
                                    Status
                                    <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="M8 9l4-4 4 4m0 6l-4 4-4-4"></path>
                                    </svg>
                                </div>
                            </th>
                            <th class="px-3 md:px-6 py-3 md:py-4 text-left text-xs font-medium text-slate-300 uppercase tracking-wider">Actions</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-slate-700">
                        @foreach($messages as $message)
                        <tr class="hover:bg-slate-700/30 transition-colors">
                            <td class="px-3 md:px-6 py-3 md:py-4 whitespace-nowrap text-sm text-slate-300">
                                {{ $message->created_at->format('M d, Y H:i') }}
                            </td>
                            <td class="px-3 md:px-6 py-3 md:py-4 whitespace-nowrap text-sm text-white">
                                {{ $message->phone }}
                            </td>
                            <td class="px-3 md:px-6 py-3 md:py-4 text-sm text-white">
                                {{ Str::limit($message->message, 50) }}
                            </td>
                            <td class="px-3 md:px-6 py-3 md:py-4 whitespace-nowrap">
                                <span class="px-2 py-1 text-xs font-semibold rounded-full border {{ $message->status === 'sent' ? 'bg-green-500/20 text-green-400 border-green-500/30' : ($message->status === 'failed' ? 'bg-red-500/20 text-red-400 border-red-500/30' : 'bg-yellow-500/20 text-yellow-400 border-yellow-500/30') }}">
                                    {{ ucfirst($message->status) }}
                                </span>
                            </td>
                            <td class="px-3 md:px-6 py-3 md:py-4 whitespace-nowrap text-sm">
                                <div class="flex items-center space-x-2">
                                    <button onclick="showMessageDetails({{ $message->id }}, '{{ addslashes($message->message) }}', '{{ $message->phone }}', '{{ $message->created_at->format('M d, Y H:i') }}', '{{ ucfirst($message->type ?? 'general') }}', '{{ ucfirst($message->status) }}', '{{ $message->error_message ?? '' }}', '{{ $message->sent_at ? $message->sent_at->format('M d, Y H:i') : '' }}')" class="text-blue-400 hover:text-blue-300 transition-colors" title="View">
                                        <i class="ti ti-eye text-lg"></i>
                                    </button>
                                    <button class="text-red-400 hover:text-red-300 transition-colors" title="Delete">
                                        <i class="ti ti-trash text-lg"></i>
                                    </button>
                                </div>
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
            
            @if($messages->hasPages())
            <div class="mt-4 pt-4 border-t border-slate-700">
                {{ $messages->links() }}
            </div>
            @endif
        </div>
    </div>

    <!-- Send Single WhatsApp Modal -->
    <div x-show="showSingleModal" x-transition class="fixed inset-0 z-50 overflow-y-auto" style="display: none;">
        <div class="flex items-center justify-center min-h-screen px-4">
            <div class="fixed inset-0 bg-black opacity-50" @click="showSingleModal = false"></div>
            <div class="relative bg-slate-800 rounded-2xl shadow-2xl w-full max-w-md max-h-[90vh] overflow-y-auto border border-slate-700">
                <div class="sticky top-0 bg-slate-800 px-6 py-4 border-b border-slate-700 flex justify-between items-center">
                    <h3 class="text-xl font-semibold text-white">Send Single WhatsApp</h3>
                    <button @click="showSingleModal = false" class="text-slate-400 hover:text-white">
                        <svg class="w-6 h-6" 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"></path>
                        </svg>
                    </button>
                </div>
                <div class="p-6">
                    <form id="sendSingleForm" class="space-y-4">
                        @csrf
                        <div class="flex items-center space-x-3">
                            <input type="checkbox" id="customContact" onchange="toggleContactInput()" class="w-4 h-4 text-red-600 bg-slate-700 border-slate-600 rounded focus:ring-red-500">
                            <label for="customContact" class="text-sm text-slate-300">Custom Contact</label>
                        </div>

                        <div id="customerSelect">
                            <label class="block text-sm font-medium text-slate-300 mb-2">Customer</label>
                            <select id="customer" name="customer" class="w-full bg-slate-700/50 border border-slate-600 rounded-lg px-3 py-2 text-white focus:ring-2 focus:ring-red-500 focus:border-red-500">
                                <option value="">Select Customer</option>
                            </select>
                        </div>

                        <div id="phoneInput" style="display: none;">
                            <label class="block text-sm font-medium text-slate-300 mb-2">Phone Number</label>
                            <input type="text" id="phone" name="phone" placeholder="+254712345678" class="w-full bg-slate-700/50 border border-slate-600 rounded-lg px-3 py-2 text-white focus:ring-2 focus:ring-red-500 focus:border-red-500">
                        </div>

                        <div class="flex items-center space-x-3">
                            <input type="checkbox" id="customMessage" onchange="toggleMessageInput()" class="w-4 h-4 text-red-600 bg-slate-700 border-slate-600 rounded focus:ring-red-500">
                            <label for="customMessage" class="text-sm text-slate-300">Custom Message</label>
                        </div>

                        <div id="templateSelect">
                            <label class="block text-sm font-medium text-slate-300 mb-2">Template</label>
                            <select id="template" name="template" required class="w-full bg-slate-700/50 border border-slate-600 rounded-lg px-3 py-2 text-white focus:ring-2 focus:ring-red-500 focus:border-red-500">
                                <option value="">Select Template</option>
                                @foreach(\App\Models\WhatsAppTemplate::where('status', 1)->where('created_by', auth()->id())->get() as $tmpl)
                                <option value="{{ $tmpl->id }}">{{ $tmpl->type }}</option>
                                @endforeach
                            </select>
                        </div>

                        <div id="messageInput" style="display: none;">
                            <label class="block text-sm font-medium text-slate-300 mb-2">Message</label>
                            <textarea id="message" name="message" rows="4" class="w-full bg-slate-700/50 border border-slate-600 rounded-lg px-3 py-2 text-white focus:ring-2 focus:ring-red-500 focus:border-red-500 resize-none"></textarea>
                        </div>

                        <div class="flex justify-end space-x-3 pt-4 border-t border-slate-700">
                            <button type="button" @click="showSingleModal = false" class="px-4 py-2 text-slate-400 hover:text-white transition-colors">
                                Cancel
                            </button>
                            <button type="submit" class="bg-gradient-to-r from-green-600 to-green-700 hover:from-green-700 hover:to-green-800 text-white px-6 py-2 rounded-lg transition-all duration-300 shadow-lg">
                                Send WhatsApp
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <!-- Send Bulk WhatsApp Modal -->
    <div x-show="showBulkModal" x-transition class="fixed inset-0 z-50 overflow-y-auto" style="display: none;">
        <div class="flex items-center justify-center min-h-screen px-4">
            <div class="fixed inset-0 bg-black opacity-50" @click="showBulkModal = false"></div>
            <div class="relative bg-slate-800 rounded-2xl shadow-2xl w-full max-w-2xl max-h-[90vh] overflow-y-auto border border-slate-700">
                <div class="sticky top-0 bg-slate-800 px-6 py-4 border-b border-slate-700 flex justify-between items-center">
                    <h3 class="text-xl font-semibold text-white">Send Bulk WhatsApp</h3>
                    <button @click="showBulkModal = false" class="text-slate-400 hover:text-white">
                        <svg class="w-6 h-6" 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"></path>
                        </svg>
                    </button>
                </div>
                <div class="p-6">
                    <form id="sendBulkForm" class="space-y-4">
                        @csrf
                        <div class="flex items-center space-x-3">
                            <input type="checkbox" id="bulkFilter" onchange="toggleBulkFilter()" checked class="w-4 h-4 text-red-600 bg-slate-700 border-slate-600 rounded focus:ring-red-500">
                            <label for="bulkFilter" class="text-sm text-slate-300">Filter Customers</label>
                        </div>

                        <div id="filterOptions">
                            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                                <div>
                                    <label class="block text-sm font-medium text-slate-300 mb-2">Service Type</label>
                                    <select id="service_type" name="service_type" class="w-full bg-slate-700/50 border border-slate-600 rounded-lg px-3 py-2 text-white focus:ring-2 focus:ring-red-500 focus:border-red-500">
                                        <option value="">All Services</option>
                                        <option value="pppoe">PPPoE</option>
                                        <option value="static">Static</option>
                                        <option value="hotspot">Hotspot</option>
                                        <option value="dhcp">DHCP</option>
                                    </select>
                                </div>
                                <div>
                                    <label class="block text-sm font-medium text-slate-300 mb-2">Status</label>
                                    <select id="status_filter" name="status_filter" class="w-full bg-slate-700/50 border border-slate-600 rounded-lg px-3 py-2 text-white focus:ring-2 focus:ring-red-500 focus:border-red-500">
                                        <option value="">All Status</option>
                                        <option value="active">Active</option>
                                        <option value="expired">Expired</option>
                                        <option value="suspended">Suspended</option>
                                        <option value="disabled">Disabled</option>
                                    </select>
                                </div>
                            </div>
                            
                            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                                <div>
                                    <label class="block text-sm font-medium text-slate-300 mb-2">Zone</label>
                                    <input type="text" id="zone_filter" name="zone_filter" placeholder="Enter zone" class="w-full bg-slate-700/50 border border-slate-600 rounded-lg px-3 py-2 text-white focus:ring-2 focus:ring-red-500 focus:border-red-500">
                                </div>
                                <div>
                                    <label class="block text-sm font-medium text-slate-300 mb-2">Site</label>
                                    <select id="site_filter" name="site_filter" class="w-full bg-slate-700/50 border border-slate-600 rounded-lg px-3 py-2 text-white focus:ring-2 focus:ring-red-500 focus:border-red-500">
                                        <option value="">All Sites</option>
                                    </select>
                                </div>
                            </div>
                            
                            <div>
                                <button type="button" onclick="loadFilteredCustomers()" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg transition-all">
                                    Load Customers
                                </button>
                                <span id="customerCount" class="ml-2 text-slate-400"></span>
                            </div>
                        </div>

                        <div id="manualPhones" style="display: none;">
                            <label class="block text-sm font-medium text-slate-300 mb-2">Phone Numbers (comma separated)</label>
                            <textarea id="phones" name="phones" rows="3" placeholder="+254712345678, +254723456789" class="w-full bg-slate-700/50 border border-slate-600 rounded-lg px-3 py-2 text-white focus:ring-2 focus:ring-red-500 focus:border-red-500 resize-none"></textarea>
                        </div>

                        <div class="flex items-center space-x-3">
                            <input type="checkbox" id="bulkCustomMessage" onchange="toggleBulkMessageInput()" class="w-4 h-4 text-red-600 bg-slate-700 border-slate-600 rounded focus:ring-red-500">
                            <label for="bulkCustomMessage" class="text-sm text-slate-300">Custom Message</label>
                        </div>

                        <div id="bulkTemplateSelect">
                            <label class="block text-sm font-medium text-slate-300 mb-2">Template</label>
                            <select id="bulk_template" name="template" required class="w-full bg-slate-700/50 border border-slate-600 rounded-lg px-3 py-2 text-white focus:ring-2 focus:ring-red-500 focus:border-red-500">
                                <option value="">Select Template</option>
                                @foreach(\App\Models\WhatsAppTemplate::where('status', 1)->where('created_by', auth()->id())->get() as $tmpl)
                                <option value="{{ $tmpl->id }}">{{ $tmpl->type }}</option>
                                @endforeach
                            </select>
                        </div>

                        <div id="bulkMessageInput" style="display: none;">
                            <label class="block text-sm font-medium text-slate-300 mb-2">Message</label>
                            <textarea id="bulk_message" name="message" rows="4" class="w-full bg-slate-700/50 border border-slate-600 rounded-lg px-3 py-2 text-white focus:ring-2 focus:ring-red-500 focus:border-red-500 resize-none"></textarea>
                        </div>

                        <div class="flex justify-end space-x-3 pt-4 border-t border-slate-700">
                            <button type="button" @click="showBulkModal = false" class="px-4 py-2 text-slate-400 hover:text-white transition-colors">
                                Cancel
                            </button>
                            <button type="submit" class="bg-gradient-to-r from-blue-600 to-blue-700 hover:from-blue-700 hover:to-blue-800 text-white px-6 py-2 rounded-lg transition-all duration-300 shadow-lg">
                                Send Bulk WhatsApp
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <!-- WhatsApp Message Details Modal -->
    <div id="messageDetailsModal" class="fixed inset-0 z-50 overflow-y-auto hidden">
        <div class="flex items-center justify-center min-h-screen px-4">
            <div class="fixed inset-0 bg-black opacity-50" onclick="closeMessageDetails()"></div>
            <div class="relative bg-slate-800 rounded-2xl shadow-2xl w-full max-w-lg border border-slate-700">
                <div class="px-6 py-4 border-b border-slate-700 flex justify-between items-center">
                    <h3 class="text-xl font-semibold text-white">WhatsApp Message Details</h3>
                    <button onclick="closeMessageDetails()" class="text-slate-400 hover:text-white">
                        <svg class="w-6 h-6" 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"></path>
                        </svg>
                    </button>
                </div>
                <div class="p-6 space-y-4">
                    <div>
                        <label class="block text-sm font-medium text-slate-300 mb-1">Phone Number</label>
                        <p id="modalPhone" class="text-white bg-slate-700/50 rounded-lg px-3 py-2"></p>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-slate-300 mb-1">Message</label>
                        <p id="modalMessage" class="text-white bg-slate-700/50 rounded-lg px-3 py-2 min-h-[80px] whitespace-pre-wrap"></p>
                    </div>
                    <div class="grid grid-cols-2 gap-4">
                        <div>
                            <label class="block text-sm font-medium text-slate-300 mb-1">Type</label>
                            <span id="modalType" class="inline-block px-2 py-1 text-xs font-semibold rounded-full border bg-blue-500/20 text-blue-400 border-blue-500/30"></span>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-slate-300 mb-1">Status</label>
                            <span id="modalStatus" class="inline-block px-2 py-1 text-xs font-semibold rounded-full border"></span>
                        </div>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-slate-300 mb-1">Created At</label>
                        <p id="modalCreatedAt" class="text-slate-300"></p>
                    </div>
                    <div id="modalSentAtContainer" class="hidden">
                        <label class="block text-sm font-medium text-slate-300 mb-1">Sent At</label>
                        <p id="modalSentAt" class="text-slate-300"></p>
                    </div>
                    <div id="modalErrorContainer" class="hidden">
                        <label class="block text-sm font-medium text-slate-300 mb-1">Error Message</label>
                        <p id="modalError" class="text-red-400 bg-red-500/10 rounded-lg px-3 py-2 border border-red-500/30"></p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
function toggleContactInput() {
    const customContact = document.getElementById('customContact');
    const customerSelect = document.getElementById('customerSelect');
    const phoneInput = document.getElementById('phoneInput');
    const customerField = document.getElementById('customer');
    const phoneField = document.getElementById('phone');
    
    if (customContact.checked) {
        customerSelect.style.display = 'none';
        phoneInput.style.display = 'block';
        customerField.removeAttribute('required');
        phoneField.setAttribute('required', 'required');
    } else {
        customerSelect.style.display = 'block';
        phoneInput.style.display = 'none';
        customerField.setAttribute('required', 'required');
        phoneField.removeAttribute('required');
    }
}

function toggleBulkFilter() {
    const bulkFilter = document.getElementById('bulkFilter');
    const filterOptions = document.getElementById('filterOptions');
    const manualPhones = document.getElementById('manualPhones');
    const phonesField = document.getElementById('phones');
    
    if (bulkFilter.checked) {
        filterOptions.style.display = 'block';
        manualPhones.style.display = 'none';
        phonesField.removeAttribute('required');
    } else {
        filterOptions.style.display = 'none';
        manualPhones.style.display = 'block';
        phonesField.setAttribute('required', 'required');
    }
}

function loadFilteredCustomers() {
    const filters = {
        service_type: document.getElementById('service_type').value,
        status_filter: document.getElementById('status_filter').value,
        zone_filter: document.getElementById('zone_filter').value,
        site_filter: document.getElementById('site_filter').value
    };
    
    fetch('{{ route("api.customers.filtered") }}', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
        },
        body: JSON.stringify(filters)
    })
    .then(response => response.json())
    .then(data => {
        document.getElementById('customerCount').textContent = `${data.count} customers selected`;
        document.getElementById('phones').value = data.phones.join(', ');
    });
}

function toggleMessageInput() {
    const customMessage = document.getElementById('customMessage');
    const templateSelect = document.getElementById('templateSelect');
    const messageInput = document.getElementById('messageInput');
    const templateField = document.getElementById('template');
    const messageField = document.getElementById('message');
    
    if (customMessage.checked) {
        templateSelect.style.display = 'none';
        messageInput.style.display = 'block';
        templateField.removeAttribute('required');
        messageField.setAttribute('required', 'required');
    } else {
        templateSelect.style.display = 'block';
        messageInput.style.display = 'none';
        templateField.setAttribute('required', 'required');
        messageField.removeAttribute('required');
    }
}

function toggleBulkMessageInput() {
    const bulkCustomMessage = document.getElementById('bulkCustomMessage');
    const bulkTemplateSelect = document.getElementById('bulkTemplateSelect');
    const bulkMessageInput = document.getElementById('bulkMessageInput');
    const bulkTemplateField = document.getElementById('bulk_template');
    const bulkMessageField = document.getElementById('bulk_message');
    
    if (bulkCustomMessage.checked) {
        bulkTemplateSelect.style.display = 'none';
        bulkMessageInput.style.display = 'block';
        bulkTemplateField.removeAttribute('required');
        bulkMessageField.setAttribute('required', 'required');
    } else {
        bulkTemplateSelect.style.display = 'block';
        bulkMessageInput.style.display = 'none';
        bulkTemplateField.setAttribute('required', 'required');
        bulkMessageField.removeAttribute('required');
    }
}

function showMessageDetails(id, message, phone, createdAt, type, status, errorMessage, sentAt) {
    document.getElementById('modalPhone').textContent = phone;
    document.getElementById('modalMessage').textContent = message;
    document.getElementById('modalType').textContent = type;
    document.getElementById('modalCreatedAt').textContent = createdAt;
    
    const statusElement = document.getElementById('modalStatus');
    statusElement.textContent = status;
    statusElement.className = 'inline-block px-2 py-1 text-xs font-semibold rounded-full border ';
    
    if (status === 'Sent') {
        statusElement.className += 'bg-green-500/20 text-green-400 border-green-500/30';
    } else if (status === 'Failed') {
        statusElement.className += 'bg-red-500/20 text-red-400 border-red-500/30';
    } else {
        statusElement.className += 'bg-yellow-500/20 text-yellow-400 border-yellow-500/30';
    }
    
    if (sentAt) {
        document.getElementById('modalSentAt').textContent = sentAt;
        document.getElementById('modalSentAtContainer').classList.remove('hidden');
    } else {
        document.getElementById('modalSentAtContainer').classList.add('hidden');
    }
    
    if (errorMessage) {
        document.getElementById('modalError').textContent = errorMessage;
        document.getElementById('modalErrorContainer').classList.remove('hidden');
    } else {
        document.getElementById('modalErrorContainer').classList.add('hidden');
    }
    
    document.getElementById('messageDetailsModal').classList.remove('hidden');
}

function closeMessageDetails() {
    document.getElementById('messageDetailsModal').classList.add('hidden');
}
</script>
@endsection