@extends('layouts.app')

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

@push('scripts')
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
@endpush

@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-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-message text-xl"></i>
                </div>
                <div>
                    <p class="text-blue-200 text-xs">Total SMS</p>
                    <p class="text-2xl font-bold">{{ $messages->total() }}</p>
                </div>
            </div>
        </div>

        <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-check text-xl"></i>
                </div>
                <div>
                    <p class="text-green-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>

    <!-- SMS 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">SMS 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('sms.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 SMS 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="smsTable">
                    <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">
                                    Type
                                    <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">
                        @forelse($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 bg-blue-500/20 text-blue-400 border-blue-500/30">
                                    {{ ucfirst($message->type) }}
                                </span>
                            </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) }}', '{{ 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>
                        @empty
                        <tr>
                            <td colspan="6" class="px-6 py-8 text-center text-slate-400">
                                <div class="flex flex-col items-center">
                                    <i class="ti ti-message-x text-4xl mb-2"></i>
                                    <p>No SMS messages found</p>
                                </div>
                            </td>
                        </tr>
                        @endforelse
                    </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 SMS 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 SMS</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" action="{{ route("sms.send-single") }}" method="POST" 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\SmsAlert::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>
                            <div class="mb-2 p-2 bg-slate-700/30 rounded border border-slate-600">
                                <p class="text-xs text-slate-300 font-medium mb-1">Available Placeholders:</p>
                                <div class="flex flex-wrap gap-1">
                                    <span class="px-2 py-1 bg-blue-600/20 text-blue-300 text-xs rounded border border-blue-500/30">{username}</span>
                                    <span class="px-2 py-1 bg-blue-600/20 text-blue-300 text-xs rounded border border-blue-500/30">{fullname}</span>
                                    <span class="px-2 py-1 bg-blue-600/20 text-blue-300 text-xs rounded border border-blue-500/30">{company}</span>
                                    <span class="px-2 py-1 bg-blue-600/20 text-blue-300 text-xs rounded border border-blue-500/30">{contact}</span>
                                    <span class="px-2 py-1 bg-blue-600/20 text-blue-300 text-xs rounded border border-blue-500/30">{account}</span>
                                    <span class="px-2 py-1 bg-blue-600/20 text-blue-300 text-xs rounded border border-blue-500/30">{expiry}</span>
                                    <span class="px-2 py-1 bg-blue-600/20 text-blue-300 text-xs rounded border border-blue-500/30">{support}</span>
                                </div>
                            </div>
                            <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 SMS
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <!-- Send Bulk SMS 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 SMS</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" action="{{ route("sms.send-bulk") }}" method="POST" class="space-y-4">
                        @csrf
                        <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" 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" 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" 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" 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>
                                    @foreach($sites as $site)
                                    <option value="{{ $site->nasname }}">{{ $site->shortname }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </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" 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\SmsAlert::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>
                            <div class="mb-2 p-2 bg-slate-700/30 rounded border border-slate-600">
                                <p class="text-xs text-slate-300 font-medium mb-1">Available Placeholders:</p>
                                <div class="flex flex-wrap gap-1">
                                    <span class="px-2 py-1 bg-blue-600/20 text-blue-300 text-xs rounded border border-blue-500/30">{username}</span>
                                    <span class="px-2 py-1 bg-blue-600/20 text-blue-300 text-xs rounded border border-blue-500/30">{fullname}</span>
                                    <span class="px-2 py-1 bg-blue-600/20 text-blue-300 text-xs rounded border border-blue-500/30">{company}</span>
                                    <span class="px-2 py-1 bg-blue-600/20 text-blue-300 text-xs rounded border border-blue-500/30">{contact}</span>
                                    <span class="px-2 py-1 bg-blue-600/20 text-blue-300 text-xs rounded border border-blue-500/30">{account}</span>
                                    <span class="px-2 py-1 bg-blue-600/20 text-blue-300 text-xs rounded border border-blue-500/30">{expiry}</span>
                                    <span class="px-2 py-1 bg-blue-600/20 text-blue-300 text-xs rounded border border-blue-500/30">{support}</span>
                                </div>
                            </div>
                            <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 SMS
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <!-- SMS 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">SMS 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>
    $(document).ready(function() {
    // Initialize customer select2
    $('#customer').select2({
        placeholder: 'Search customers...',
        allowClear: true,
        ajax: {
            url: '{{ route("api.customers.search") }}',
            dataType: 'json',
            delay: 250,
            data: function (params) {
                return {
                    q: params.term,
                    page: params.page
                };
            },
            processResults: function (data, params) {
                params.page = params.page || 1;
                return {
                    results: data.data,
                    pagination: {
                        more: (params.page * 30) < data.total
                    }
                };
            },
            cache: true
        },
        minimumInputLength: 1,
        templateResult: function(customer) {
            if (customer.loading) return customer.text;
            return $('<span>' + customer.text + ' (' + customer.phone + ')</span>');
        },
        templateSelection: function(customer) {
            return customer.text || customer.phone;
        }
    });
    });

function loadSites() {
    $.get('{{ route("api.sites") }}', function(data) {
        const siteSelect = $('#site_filter');
        siteSelect.empty().append('<option value="">All Sites</option>');

        data.forEach(function(site) {
            siteSelect.append(`<option value="${site.id}">${site.text}</option>`);
        });
    });
}

function toggleContactInput() {
    const customContact = document.getElementById('customContact');
    const customerSelect = document.getElementById('customerSelect');
    const phoneInput = document.getElementById('phoneInput');

    if (customContact.checked) {
        customerSelect.style.display = 'none';
        phoneInput.style.display = 'block';
    } else {
        customerSelect.style.display = 'block';
        phoneInput.style.display = 'none';
    }
}

function toggleBulkFilter() {
    const bulkFilter = document.getElementById('bulkFilter');
    const filterOptions = document.getElementById('filterOptions');
    const manualPhones = document.getElementById('manualPhones');

    if (bulkFilter.checked) {
        filterOptions.style.display = 'block';
        manualPhones.style.display = 'none';
    } else {
        filterOptions.style.display = 'none';
        manualPhones.style.display = 'block';
    }
}

// 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 => {
//         if (data.success) {
//             document.getElementById('customerCount').textContent = `${data.count} customers selected`;
//             if (data.phones && data.phones.length > 0) {
//                 document.getElementById('phones').value = data.phones.join(', ');
//             }
//         } else {
//             document.getElementById('customerCount').textContent = 'No customers found';
//             document.getElementById('phones').value = '';
//         }
//     })
//     .catch(error => {
//         console.error('Error:', error);
//         document.getElementById('customerCount').textContent = 'Error loading customers';
//     });
// }

    function toggleMessageInput() {
        const customMessage = document.getElementById('customMessage');
        const templateSelect = document.getElementById('templateSelect');
        const messageInput = document.getElementById('messageInput');

        if (customMessage.checked) {
            templateSelect.style.display = 'none';
            messageInput.style.display = 'block';
        } else {
            templateSelect.style.display = 'block';
            messageInput.style.display = 'none';
        }
    }

    function toggleBulkMessageInput() {
        const bulkCustomMessage = document.getElementById('bulkCustomMessage');
        const bulkTemplateSelect = document.getElementById('bulkTemplateSelect');
        const bulkMessageInput = document.getElementById('bulkMessageInput');

        if (bulkCustomMessage.checked) {
            bulkTemplateSelect.style.display = 'none';
            bulkMessageInput.style.display = 'block';
        } else {
            bulkTemplateSelect.style.display = 'block';
            bulkMessageInput.style.display = 'none';
        }
    }

    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