@extends('SuperAdmin.layout.layout')

@section('body')
<!-- Custom Toast Container -->
<div id="customToastContainer" class="custom-toast-container"></div>

@php
    $owner = session('owner');
    $hasSmsAccess = false;
    if ($owner && isset($owner['id'])) {
        $tenant = \App\Models\Tenant::find($owner['id']);
        $hasSmsAccess = $tenant && $tenant->sms_access;
    }
@endphp

@if(!$hasSmsAccess)
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="alert alert-danger alert-dismissible fade show" role="alert">
                <h4 class="alert-heading"><i class="fas fa-exclamation-triangle mr-2"></i>SMS Access Denied</h4>
                <p>SMS access is not enabled for your account. Please contact your administrator to enable SMS functionality.</p>
                <hr>
                <p class="mb-0">
                    <a href="{{ route('dashboard') }}" class="btn btn-primary">
                        <i class="fas fa-arrow-left mr-2"></i>Return to Dashboard
                    </a>
                </p>
            </div>
        </div>
    </div>
</div>
@else
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="page-title-box">
                <div class="page-title-right">
                    <ol class="breadcrumb m-0">
                        <li class="breadcrumb-item"><a href="{{ route('dashboard') }}">Dashboard</a></li>
                        <li class="breadcrumb-item active">SMS Messaging</li>
                    </ol>
                </div>
                <h4 class="page-title">
                    <i class="fas fa-sms"></i> SMS Messaging
                    @if($isTestMode)
                        <span class="badge badge-warning ml-2">Test Mode</span>
                    @endif
                </h4>
            </div>
        </div>
    </div>

    <!-- Flash Messages -->
    @if(session('success'))
    <div class="row">
        <div class="col-12">
            <div class="alert alert-success alert-dismissible fade show" role="alert">
                <i class="fas fa-check-circle mr-2"></i>
                <strong>Success!</strong> {{ session('success') }}
                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
        </div>
    </div>
    @endif

    @if(session('error'))
    <div class="row">
        <div class="col-12">
            <div class="alert alert-danger alert-dismissible fade show" role="alert">
                <i class="fas fa-exclamation-circle mr-2"></i>
                <strong>Error!</strong> {{ session('error') }}
                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
        </div>
    </div>
    @endif

    @if(session('warning'))
    <div class="row">
        <div class="col-12">
            <div class="alert alert-warning alert-dismissible fade show" role="alert">
                <i class="fas fa-exclamation-triangle mr-2"></i>
                <strong>Warning!</strong> {{ session('warning') }}
                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
        </div>
    </div>
    @endif

    @if(session('info'))
    <div class="row">
        <div class="col-12">
            <div class="alert alert-info alert-dismissible fade show" role="alert">
                <i class="fas fa-info-circle mr-2"></i>
                <strong>Info:</strong> {{ session('info') }}
                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
        </div>
    </div>
    @endif

    @if($errors->any())
    <div class="row">
        <div class="col-12">
            <div class="alert alert-danger alert-dismissible fade show" role="alert">
                <i class="fas fa-exclamation-circle mr-2"></i>
                <strong>Validation Error!</strong>
                <ul class="mb-0 mt-2">
                    @foreach($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
        </div>
    </div>
    @endif

    <!-- Test Mode Alert -->
    @if($isTestMode)
    <div class="row">
        <div class="col-12">
            <div class="alert alert-info alert-dismissible fade show" role="alert">
                <i class="fas fa-info-circle mr-2"></i>
                <strong>Test Mode Active:</strong> SMS messages are being logged instead of sent. 
                This is safe for testing purposes.
                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
        </div>
    </div>
    @endif

    <!-- WhatsApp-like SMS Interface -->
    <div class="row">
        <div class="col-12">
            <div class="card" style="border: none; box-shadow: 0 2px 12px rgba(0,0,0,0.08); overflow: hidden;">
                <div class="whatsapp-wrapper">
        <!-- Left Sidebar - Conversations List -->
        <div class="wa-sidebar">
            <!-- Sidebar Header -->
            <div class="wa-header">
                <div class="wa-header-content">
                    <div class="wa-profile">
                        <div class="wa-avatar wa-avatar-small">
                            <i class="fas fa-store"></i>
                </div>
                        <div class="wa-profile-info">
                            <div class="wa-profile-name">{{ $dealershipName }}</div>
                            <div class="wa-profile-status">
                                <span class="wa-status-indicator {{ $isTestMode ? 'wa-status-offline' : 'wa-status-online' }}"></span>
                                <span>{{ $isTestMode ? 'Test Mode' : 'Online' }}</span>
                                </div>
                            </div>
                        </div>
                    <div class="wa-header-actions">
                        <button type="button" class="wa-action-btn" id="refreshIncomingBtn" title="Refresh">
                            <i class="fas fa-sync-alt"></i>
                        </button>
                        <button type="button" class="wa-action-btn" id="viewWebhookUrlBtn" data-toggle="modal" data-target="#webhookUrlModal" title="Webhook URL">
                            <i class="fas fa-link"></i>
                        </button>
                        <button type="button" class="wa-action-btn" id="newMessageBtn" title="New Message">
                            <i class="fas fa-edit"></i>
                        </button>
                    </div>
                </div>
                <!-- Search Box -->
                <div class="wa-search-container">
                    <div class="wa-search-box">
                        <i class="fas fa-search wa-search-icon"></i>
                        <input type="text" class="wa-search-input" id="conversationSearch" placeholder="Search or start new chat">
                    </div>
                            </div>
                        </div>

            <!-- Conversations List -->
            <div class="wa-conversations" id="conversationsList">
                <div id="incomingMessagesLoading" class="wa-loading" style="display: none;">
                    <i class="fas fa-spinner fa-spin"></i>
                    <p>Loading conversations...</p>
                </div>
                <div id="conversationsContainer">
                    <!-- Conversations will be loaded here -->
                    <div class="wa-empty-state">
                        <i class="fas fa-comments"></i>
                        <p>No conversations yet</p>
                        <small>Start a new conversation or wait for incoming messages</small>
                    </div>
                                </div>
                            </div>
                        </div>

        <!-- Right Side - Chat Area -->
        <div class="wa-chat">
            <!-- Chat Header -->
            <div class="wa-chat-header" id="chatHeader">
                <div id="emptyChatHeader" class="wa-chat-empty-header">
                    <div class="wa-chat-empty-content">
                        <i class="fas fa-comment-dots"></i>
                        <h3>WhatsApp Web</h3>
                        <p>Select a conversation to start messaging</p>
                    </div>
                </div>
                <div id="activeChatHeader" class="wa-chat-active-header" style="display: none;">
                    <div class="wa-chat-header-content">
                        <div class="wa-chat-contact">
                            <div class="wa-avatar wa-avatar-medium">
                                <i class="fas fa-phone"></i>
                            </div>
                            <div class="wa-chat-contact-info">
                                <div class="wa-chat-contact-name" id="activeChatName">Contact Name</div>
                                <div class="wa-chat-contact-phone" id="activeChatPhone">+1 234 567 8900</div>
                            </div>
                        </div>
                        <div class="wa-chat-actions">
                            <button type="button" class="wa-action-btn" title="Info">
                                <i class="fas fa-ellipsis-v"></i>
                            </button>
                        </div>
                </div>
            </div>
        </div>

            <!-- Messages Area -->
            <div class="wa-messages-container" id="chatMessages">
                <div id="emptyChatMessage" class="wa-chat-empty">
                    <div class="wa-chat-empty-content">
                        <i class="fas fa-lock"></i>
                        <h4>End-to-end encrypted</h4>
                        <p>Messages you send to this chat and calls are secured with end-to-end encryption.</p>
                </div>
                            </div>
                <div id="messagesContainer" class="wa-messages" style="display: none;">
                    <!-- Messages will be displayed here -->
                        </div>
                    </div>

            <!-- Message Input Area -->
            <div class="wa-input-container" id="chatInputContainer" style="display: none;">
                <form id="smsForm" onsubmit="event.preventDefault(); return false;">
                    @csrf
                    <input type="hidden" name="_token" value="{{ csrf_token() }}">
                    <input type="hidden" id="phone_number" name="phone_number" value="">
                    
                    <!-- Terms Notice -->
                    <div class="wa-terms-notice" id="termsNotice" style="display: none;">
                        <div class="wa-terms-checkbox">
                            <input type="checkbox" class="form-check-input" id="termsCheckbox" name="terms_accepted" required>
                            <label for="termsCheckbox">
                                I agree to SimpleTexting's <a href="#" target="_blank">Terms</a> and <a href="#" target="_blank">Policy</a>
                            </label>
                            </div>
                        </div>
                    
                    <div class="wa-input-wrapper">
                        <div class="wa-input-box">
                            <textarea class="wa-input" id="message" name="message" 
                                      rows="1" placeholder="Type a message" required maxlength="1600"></textarea>
                            <div class="wa-input-actions">
                                <span class="wa-char-count"><span id="charCount">0</span>/1600</span>
                    </div>
                    </div>
                        <button type="button" class="wa-send-btn" id="smsSubmitButton" title="Send">
                            <i class="fas fa-paper-plane"></i>
                        </button>
                </div>
                </form>
            </div>

            <!-- New Message Composer -->
            <div class="wa-new-message" id="newMessageComposer">
                <div class="wa-new-message-content">
                    <div class="wa-new-message-form">
                        <h3><i class="fas fa-sms"></i> New Message</h3>
                        <form id="newMessageForm" onsubmit="event.preventDefault(); return false;">
                            @csrf
                            <input type="hidden" name="_token" value="{{ csrf_token() }}">
                            
                            <div class="wa-form-group">
                                <label for="new_phone_number">
                                    <i class="fas fa-phone"></i> Phone Number <span class="text-danger">*</span>
                                </label>
                                <input type="tel" class="wa-form-control" id="new_phone_number" name="phone_number" 
                                       placeholder="e.g., (555) 123-4567" autocomplete="off" required>
                </div>
                            
                            <div class="wa-form-group">
                                <label for="new_message">
                                    <i class="fas fa-comment"></i> Message <span class="text-danger">*</span>
                                </label>
                                <textarea class="wa-form-control" id="new_message" name="message" rows="6" 
                                          placeholder="Enter your message..." required maxlength="1600"></textarea>
                                <div class="wa-char-counter">
                                    <span id="newCharCount">0</span>/1600 characters
                            </div>
                        </div>

                            <div class="wa-form-group">
                                <div class="wa-checkbox">
                                    <input type="checkbox" id="newTermsCheckbox" name="terms_accepted" required>
                                    <label for="newTermsCheckbox">
                                        I agree to SimpleTexting's <a href="#" target="_blank">Terms</a> and <a href="#" target="_blank">Policy</a>
                                    </label>
                    </div>
                            </div>

                            <button type="button" class="wa-btn wa-btn-primary" id="newMessageSubmitBtn">
                                <i class="fas fa-paper-plane"></i> Send Message
                            </button>
                        </form>
                        </div>
                    </div>
                            </div>
                        </div>
                    </div>

    <!-- Webhook URL Modal -->
    <div class="modal fade" id="webhookUrlModal" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header bg-info text-white">
                    <h5 class="modal-title">
                        <i class="fas fa-link mr-2"></i>SimpleTexting Webhook URL
                    </h5>
                    <button type="button" class="close text-white" data-dismiss="modal">
                        <span>&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <p class="mb-3">
                        <strong>Configure this URL in your SimpleTexting dashboard:</strong>
                    </p>
                    <div class="input-group mb-3">
                        <input type="text" class="form-control" id="webhookUrlInput" 
                               value="{{ route('sms.webhook.incoming') }}" readonly>
                        <div class="input-group-append">
                            <button class="btn btn-outline-secondary" type="button" id="copyWebhookUrlBtn">
                                <i class="fas fa-copy"></i> Copy
                            </button>
                        </div>
                    </div>
                    <div class="alert alert-info">
                        <i class="fas fa-info-circle mr-2"></i>
                        <strong>Instructions:</strong>
                        <ol class="mb-0 mt-2">
                            <li>Go to your SimpleTexting dashboard</li>
                            <li>Navigate to Settings → SMS Forwarding (or Webhooks)</li>
                            <li>Paste the URL above</li>
                            <li>Save the configuration</li>
                        </ol>
                    </div>
                    <div class="alert alert-warning">
                        <i class="fas fa-exclamation-triangle mr-2"></i>
                        <strong>Note:</strong> Incoming messages are stored in session temporarily. 
                        For production use, consider storing them in a database.
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Results Modal -->
    <div class="modal fade" id="resultsModal" tabindex="-1" role="dialog" aria-labelledby="resultsModalLabel">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header bg-primary text-white">
                    <h5 class="modal-title" id="resultsModalLabel">
                        <i class="fas fa-check-circle mr-2"></i>SMS Results
                    </h5>
                    <button type="button" class="close text-white" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body" id="resultsContent">
                    <!-- Results will be displayed here -->
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">
                        <i class="fas fa-times mr-2"></i>Close
                    </button>
                </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endif

<style>
/* WhatsApp-like Wrapper - Properly contained within card */
.whatsapp-wrapper {
    display: flex;
    height: calc(100vh - 350px);
    min-height: 600px;
    max-height: 850px;
    background: #e5ddd5;
    border-radius: 0;
    overflow: hidden;
    position: relative;
}

/* WhatsApp Background Pattern */
.whatsapp-wrapper::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #e5ddd5;
    background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3Cpattern id='wa-pattern' patternUnits='userSpaceOnUse' width='100' height='100' patternTransform='scale(0.5) rotate(0)'%3E%3Crect x='0' y='0' width='100' height='100' fill='hsla(0,0%25,100%25,1)'/%3E%3Cpath d='M-50 50h100v25h-100z' stroke-width='1' stroke='none' fill='hsla(259,74%25,47%25,0.03)'/%3E%3C/pattern%3E%3C/defs%3E%3Crect fill='url(%23wa-pattern)' width='100%25' height='100%25'/%3E%3C/svg%3E");
    z-index: 0;
    pointer-events: none;
}

.whatsapp-wrapper > * {
    position: relative;
    z-index: 1;
}

/* Ensure card wrapper is visible and has proper styling for WhatsApp UI */
.container-fluid .col-12 .card {
    background: #ffffff !important;
    border: 1px solid #e9ecef !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08) !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    margin-bottom: 20px !important;
    padding: 0 !important;
}

.card > .whatsapp-wrapper {
    border-radius: 0;
    overflow: hidden;
}

/* Left Sidebar - WhatsApp Style */
.wa-sidebar {
    width: 30%;
    min-width: 280px;
    max-width: 350px;
    background: #ffffff;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-right: 1px solid #e4e2e2;
}

/* Sidebar Header */
.wa-header {
    background: #f0f2f5;
    padding: 10px 16px 8px;
    border-bottom: 1px solid #e4e2e2;
}

.wa-header-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.wa-profile {
    display: flex;
    align-items: center;
    flex: 1;
}

.wa-avatar {
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    background: #25d366;
    flex-shrink: 0;
}

.wa-avatar-small {
    width: 40px;
    height: 40px;
    font-size: 18px;
    margin-right: 12px;
}

.wa-avatar-medium {
    width: 40px;
    height: 40px;
    font-size: 18px;
}

.wa-profile-info {
    flex: 1;
    min-width: 0;
}

.wa-profile-name {
    font-size: 16px;
    font-weight: 600;
    color: #111b21;
    margin-bottom: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wa-profile-status {
    display: flex;
    align-items: center;
    font-size: 13px;
    color: #667781;
}

.wa-status-indicator {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 6px;
}

.wa-status-online {
    background: #25d366;
}

.wa-status-offline {
    background: #8696a0;
}

.wa-header-actions {
    display: flex;
    gap: 8px;
}

.wa-action-btn {
    width: 40px;
    height: 40px;
    border: none;
    background: transparent;
    color: #54656f;
    cursor: pointer;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    transition: background 0.2s;
}

.wa-action-btn:hover {
    background: #e9edef;
    color: #111b21;
}

/* Search Box */
.wa-search-container {
    padding: 0 8px;
}

.wa-search-box {
    position: relative;
    background: #ffffff;
    border-radius: 8px;
    padding: 8px 16px 8px 36px;
    display: flex;
    align-items: center;
}

.wa-search-icon {
    position: absolute;
    left: 12px;
    color: #54656f;
    font-size: 16px;
}

.wa-search-input {
    border: none;
    outline: none;
    background: transparent;
    width: 100%;
    font-size: 14px;
    color: #111b21;
    padding: 0;
}

.wa-search-input::placeholder {
    color: #667781;
}

/* Conversations List */
.wa-conversations {
    flex: 1;
    overflow-y: auto;
    background: #ffffff;
}

/* Conversation Item - WhatsApp Style */
.wa-conversation-item {
    display: flex;
    align-items: center;
    padding: 10px 16px;
    cursor: pointer;
    transition: background 0.1s;
    border-bottom: 1px solid #e9edef;
    position: relative;
}

.wa-conversation-item:hover {
    background: #f5f6f6;
}

.wa-conversation-item.active {
    background: #f0f2f5;
}

.wa-conversation-item.active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: #25d366;
}

.wa-conversation-avatar {
    width: 49px;
    height: 49px;
    border-radius: 50%;
    background: #dfe5e7;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #54656f;
    font-size: 20px;
    flex-shrink: 0;
    margin-right: 12px;
}

.wa-conversation-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.wa-conversation-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2px;
}

.wa-conversation-name {
    font-size: 17px;
    font-weight: 400;
    color: #111b21;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
}

.wa-conversation-time {
    font-size: 12px;
    color: #667781;
    margin-left: 6px;
    flex-shrink: 0;
}

.wa-conversation-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.wa-conversation-preview {
    font-size: 14px;
    color: #667781;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
}

.wa-conversation-badge {
    background: #25d366;
    color: white;
    border-radius: 10px;
    padding: 1px 5px;
    font-size: 11px;
    font-weight: 500;
    min-width: 18px;
    text-align: center;
    margin-left: 6px;
    flex-shrink: 0;
}

/* Empty State */
.wa-empty-state {
    text-align: center;
    padding: 60px 20px;
    color: #667781;
}

.wa-empty-state i {
    font-size: 64px;
    color: #cfd4d8;
    margin-bottom: 20px;
    display: block;
}

.wa-empty-state p {
    font-size: 16px;
    color: #667781;
    margin-bottom: 8px;
}

.wa-empty-state small {
    font-size: 13px;
    color: #8696a0;
}

/* Loading State */
.wa-loading {
    text-align: center;
    padding: 40px 20px;
    color: #667781;
}

.wa-loading i {
    font-size: 32px;
    color: #25d366;
    margin-bottom: 12px;
    display: block;
}

.wa-loading p {
    font-size: 14px;
    color: #667781;
}

/* Right Side - Chat Area */
.wa-chat {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: #efeae2;
    position: relative;
}

.wa-chat::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3Cpattern id='chat-pattern' patternUnits='userSpaceOnUse' width='100' height='100' patternTransform='scale(0.5) rotate(0)'%3E%3Crect x='0' y='0' width='100' height='100' fill='hsla(0,0%25,100%25,1)'/%3E%3Cpath d='M-50 50h100v25h-100z' stroke-width='1' stroke='none' fill='hsla(259,74%25,47%25,0.02)'/%3E%3C/pattern%3E%3C/defs%3E%3Crect fill='url(%23chat-pattern)' width='100%25' height='100%25'/%3E%3C/svg%3E");
    opacity: 0.4;
    z-index: 0;
}

.wa-chat > * {
    position: relative;
    z-index: 1;
}

/* Ensure card wrapper is visible and has proper styling */
.card {
    background: #ffffff;
    border: none;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 0;
}

.card > .whatsapp-wrapper {
    border-radius: 0;
    overflow: hidden;
}

/* Adjust height based on available space */
.whatsapp-wrapper {
    display: flex;
    height: calc(100vh - 350px);
    min-height: 600px;
    max-height: 850px;
    background: #e5ddd5;
    border-radius: 0;
    overflow: hidden;
    position: relative;
}

/* Chat Header */
.wa-chat-header {
    background: #f0f2f5;
    border-bottom: 1px solid #e4e2e2;
    min-height: 60px;
    display: flex;
    align-items: center;
}

.wa-chat-empty-header {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.wa-chat-empty-content {
    text-align: center;
    color: #667781;
}

.wa-chat-empty-content i {
    font-size: 120px;
    color: #cfd4d8;
    margin-bottom: 24px;
    display: block;
}

.wa-chat-empty-content h3 {
    font-size: 32px;
    font-weight: 300;
    color: #41525d;
    margin-bottom: 8px;
}

.wa-chat-empty-content p {
    font-size: 14px;
    color: #667781;
}

.wa-chat-active-header {
    width: 100%;
}

.wa-chat-header-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
}

.wa-chat-contact {
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 0;
}

.wa-chat-contact-info {
    margin-left: 12px;
    flex: 1;
    min-width: 0;
}

.wa-chat-contact-name {
    font-size: 16px;
    font-weight: 400;
    color: #111b21;
    margin-bottom: 1px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wa-chat-contact-phone {
    font-size: 13px;
    color: #667781;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wa-chat-actions {
    display: flex;
    gap: 8px;
}

/* Messages Container */
.wa-messages-container {
    flex: 1;
    overflow: hidden;
    position: relative;
}

.wa-chat-empty {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.wa-messages {
    height: 100%;
    overflow-y: auto;
    padding: 16px 80px;
    display: flex;
    flex-direction: column;
}

/* Message Item - WhatsApp Style */
.wa-message-item {
    display: flex;
    margin-bottom: 4px;
    animation: messageSlideIn 0.15s ease-out;
    padding: 2px 0;
}

@keyframes messageSlideIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.wa-message-item.wa-sent {
    justify-content: flex-end;
}

.wa-message-item.wa-received {
    justify-content: flex-start;
}

.wa-message-bubble {
    max-width: 65%;
    min-width: 50px;
    padding: 6px 7px 8px 9px;
    border-radius: 7.5px;
    position: relative;
    word-wrap: break-word;
    box-shadow: 0 1px 0.5px rgba(0, 0, 0, 0.13);
}

.wa-message-item.wa-sent .wa-message-bubble {
    background: #dcf8c6;
    border-bottom-right-radius: 2px;
}

.wa-message-item.wa-received .wa-message-bubble {
    background: #ffffff;
    border-bottom-left-radius: 2px;
}

.wa-message-text {
    font-size: 14.2px;
    color: #111b21;
    line-height: 19px;
    margin: 0;
    white-space: pre-wrap;
    word-wrap: break-word;
}

.wa-message-meta {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 4px;
    margin-top: 4px;
    padding-top: 2px;
}

.wa-message-time {
    font-size: 11px;
    color: #667781;
    font-weight: 500;
}

.wa-message-status {
    font-size: 16px;
    line-height: 1;
    color: #667781;
}

.wa-message-status.wa-sent {
    color: #667781;
}

.wa-message-status.wa-delivered {
    color: #667781;
}

.wa-message-status.wa-read {
    color: #53bdeb;
}

/* Date Separator */
.wa-date-separator {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 16px 0;
}

.wa-date-separator-line {
    flex: 1;
    height: 1px;
    background: #e4e2e2;
}

.wa-date-separator-text {
    background: #ffffff;
    padding: 5px 12px;
    border-radius: 7.5px;
    font-size: 12.5px;
    color: #667781;
    margin: 0 16px;
    font-weight: 500;
}

/* Message Input Container */
.wa-input-container {
    background: #f0f2f5;
    border-top: 1px solid #e4e2e2;
    padding: 6px 8px;
}

.wa-terms-notice {
    padding: 8px 12px;
    background: #fff3cd;
    border-top: 1px solid #ffeaa7;
}

.wa-terms-checkbox {
    display: flex;
    align-items: center;
    font-size: 12px;
    color: #856404;
}

.wa-terms-checkbox input[type="checkbox"] {
    margin-right: 8px;
}

.wa-terms-checkbox a {
    color: #0056b3;
    text-decoration: underline;
}

.wa-input-wrapper {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    padding: 6px 8px;
}

.wa-input-box {
    flex: 1;
    position: relative;
    background: #ffffff;
    border-radius: 21px;
    padding: 9px 12px;
    min-height: 24px;
    max-height: 100px;
    overflow-y: auto;
}

.wa-input {
    border: none;
    outline: none;
    background: transparent;
    width: 100%;
    font-size: 15px;
    color: #111b21;
    resize: none;
    max-height: 82px;
    min-height: 20px;
    line-height: 20px;
    padding: 0;
    font-family: inherit;
}

.wa-input::placeholder {
    color: #667781;
}

.wa-input-actions {
    position: absolute;
    right: 12px;
    bottom: 8px;
}

.wa-char-count {
    font-size: 11px;
    color: #667781;
    font-weight: 500;
}

.wa-send-btn {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: none;
    background: #25d366;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s;
    flex-shrink: 0;
}

.wa-send-btn:hover {
    background: #20ba5a;
}

.wa-send-btn:active {
    background: #1da851;
}

.wa-send-btn:disabled {
    background: #8696a0;
    cursor: not-allowed;
}

/* New Message Composer */
.wa-new-message {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #efeae2;
    padding: 20px;
}

.wa-new-message-content {
    width: 100%;
    max-width: 500px;
}

.wa-new-message-form {
    background: #ffffff;
    border-radius: 8px;
    padding: 24px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.wa-new-message-form h3 {
    font-size: 20px;
    font-weight: 400;
    color: #111b21;
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.wa-form-group {
    margin-bottom: 16px;
}

.wa-form-group label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: #667781;
    margin-bottom: 6px;
}

.wa-form-control {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #e4e2e2;
    border-radius: 8px;
    font-size: 14px;
    color: #111b21;
    background: #ffffff;
    transition: border-color 0.2s;
}

.wa-form-control:focus {
    outline: none;
    border-color: #25d366;
    box-shadow: 0 0 0 2px rgba(37, 211, 102, 0.1);
}

.wa-char-counter {
    text-align: right;
    font-size: 12px;
    color: #667781;
    margin-top: 4px;
}

.wa-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.wa-checkbox input[type="checkbox"] {
    margin-top: 2px;
    flex-shrink: 0;
}

.wa-checkbox label {
    font-size: 13px;
    color: #667781;
    line-height: 1.4;
}

.wa-checkbox a {
    color: #25d366;
    text-decoration: none;
}

.wa-checkbox a:hover {
    text-decoration: underline;
}

.wa-btn {
    padding: 10px 20px;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.wa-btn-primary {
    background: #25d366;
    color: white;
    width: 100%;
}

.wa-btn-primary:hover {
    background: #20ba5a;
}

.wa-btn-primary:active {
    background: #1da851;
}

.wa-btn-primary:disabled {
    background: #8696a0;
    cursor: not-allowed;
}

/* Scrollbar Styling */
.wa-conversations::-webkit-scrollbar,
.wa-messages::-webkit-scrollbar {
    width: 6px;
}

.wa-conversations::-webkit-scrollbar-track,
.wa-messages::-webkit-scrollbar-track {
    background: transparent;
}

.wa-conversations::-webkit-scrollbar-thumb,
.wa-messages::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 3px;
}

.wa-conversations::-webkit-scrollbar-thumb:hover,
.wa-messages::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.3);
}

/* Container and Layout Visibility */
.container-fluid {
    background: transparent;
    padding: 15px;
}

.page-title-box {
    margin-bottom: 20px;
}

/* Ensure proper spacing */
.row {
    margin-bottom: 15px;
}

.row:last-child {
    margin-bottom: 0;
}

/* Responsive Design */
@media (max-width: 768px) {
    .whatsapp-wrapper {
        height: calc(100vh - 250px);
        flex-direction: column;
        min-height: 500px;
    }
    
    .wa-sidebar {
        width: 100%;
        max-width: 100%;
        height: 40%;
        min-height: 250px;
    }
    
    .wa-chat {
        height: 60%;
    }
    
    .container-fluid {
        padding: 10px;
    }
}

/* Responsive */
@media (max-width: 768px) {
    .whatsapp-container {
        flex-direction: column;
        height: calc(100vh - 150px);
    }
    
    .whatsapp-sidebar {
        width: 100%;
        max-width: 100%;
        height: 40%;
        min-height: 300px;
    }
    
    .whatsapp-chat {
        height: 60%;
    }
}

/* Global Card Styles - For other cards on the page */
.card {
    border: none;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: box-shadow 0.3s ease;
    overflow: hidden;
    background: #ffffff;
}

.card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

/* WhatsApp Card Specific Styling - Override for WhatsApp container */
.container-fluid .col-12 .card {
    background: #ffffff !important;
    border: 1px solid #e9ecef !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08) !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    padding: 0 !important;
}

.card-header {
    border-bottom: 1px solid #e9ecef;
    padding: 1rem 1.5rem;
    font-weight: 600;
    font-size: 1.1rem;
}

.card-body {
    padding: 1.5rem;
}

/* Form Styles */
.form-label {
    font-weight: 600;
    color: #495057;
    margin-bottom: 0.5rem;
    display: block;
}

.form-control {
    border-radius: 8px;
    border: 1px solid #ced4da;
    padding: 0.75rem 1rem;
    font-size: 0.95rem;
    transition: all 0.3s ease;
}

.form-control:focus {
    border-color: #007bff;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.15);
    outline: none;
}

.input-group-text {
    background-color: #f8f9fa;
    border-right: none;
    border-radius: 8px 0 0 8px;
    color: #6c757d;
}

.input-group .form-control {
    border-left: none;
    border-radius: 0 8px 8px 0;
}

.input-group .form-control:focus {
    border-left: 1px solid #007bff;
}

textarea.form-control {
    resize: vertical;
    min-height: 120px;
}

/* Terms Checkbox Container */
.terms-checkbox-container {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border: 1px solid #dee2e6;
    border-radius: 10px;
    padding: 1.25rem;
    margin-top: 0.5rem;
}

.form-check {
    margin: 0;
}

.form-check-input {
    width: 1.25rem;
    height: 1.25rem;
    margin-top: 0.25rem;
    cursor: pointer;
    border: 2px solid #ced4da;
    transition: all 0.2s ease;
}

.form-check-input:checked {
    background-color: #007bff;
    border-color: #007bff;
}

.form-check-input:focus {
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

.form-check-label {
    font-size: 0.875rem;
    line-height: 1.6;
    cursor: pointer;
    margin-left: 0.5rem;
    color: #495057;
    user-select: none;
}

.terms-text {
    display: block;
}

.terms-text a {
    text-decoration: underline;
    font-weight: 600;
}

.terms-text a:hover {
    text-decoration: none;
}

/* Button Styles */
.btn {
    border-radius: 8px;
    padding: 0.75rem 1.5rem;
    font-weight: 600;
    transition: all 0.3s ease;
    border: none;
}

.btn-lg {
    padding: 0.875rem 2rem;
    font-size: 1rem;
}

.btn-primary {
    background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
    box-shadow: 0 2px 6px rgba(0, 123, 255, 0.3);
}

.btn-primary:hover {
    background: linear-gradient(135deg, #0056b3 0%, #004085 100%);
    box-shadow: 0 4px 10px rgba(0, 123, 255, 0.4);
    transform: translateY(-1px);
}

.btn-primary:active {
    transform: translateY(0);
}

.btn-outline-secondary {
    border: 2px solid #6c757d;
    color: #6c757d;
    background: transparent;
}

.btn-outline-secondary:hover {
    background-color: #6c757d;
    border-color: #6c757d;
    color: white;
    transform: translateY(-1px);
}

#smsSubmitButton:disabled,
#smsSubmitButton:disabled:hover,
#submitBtn:disabled,
#submitBtn:disabled:hover {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
    background: #6c757d;
    box-shadow: none;
}

/* Info Panel Styles */
.info-item {
    padding: 0;
}

.help-item {
    transition: all 0.3s ease;
}

.help-item:hover {
    transform: translateX(5px);
}

.badge-lg {
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    font-weight: 600;
}

/* Alert Styles */
.alert {
    border-radius: 10px;
    border: none;
    padding: 1rem 1.25rem;
}

.alert-success {
    background: linear-gradient(135deg, #d4edda 0%, #c3e6cb 100%);
    color: #155724;
    border-left: 4px solid #28a745;
}

.alert-danger {
    background: linear-gradient(135deg, #f8d7da 0%, #f5c6cb 100%);
    color: #721c24;
    border-left: 4px solid #dc3545;
}

.alert-info {
    background: linear-gradient(135deg, #d1ecf1 0%, #bee5eb 100%);
    color: #0c5460;
    border-left: 4px solid #17a2b8;
}

.alert-warning {
    background: linear-gradient(135deg, #fff3cd 0%, #ffeeba 100%);
    color: #856404;
    border-left: 4px solid #ffc107;
}

/* Modal Styles */
.modal-content {
    border-radius: 12px;
    border: none;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
}

.modal-header {
    border-radius: 12px 12px 0 0;
    border-bottom: 2px solid rgba(255, 255, 255, 0.2);
}

.modal-footer {
    border-top: 1px solid #e9ecef;
    padding: 1rem 1.5rem;
}

/* Character Count */
#charCount.text-warning {
    color: #ffc107 !important;
    font-weight: 700;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .card-body {
        padding: 1rem;
    }
    
    .btn-lg {
        padding: 0.75rem 1.5rem;
        font-size: 0.95rem;
    }
    
    .terms-checkbox-container {
        padding: 1rem;
    }
    
    .form-check-label {
        font-size: 0.8rem;
    }
}

/* Input Group Icon */
.input-group-prepend .input-group-text {
    padding: 0.75rem 1rem;
}

/* Code styling in modal */
code {
    background-color: #f8f9fa;
    padding: 0.2rem 0.4rem;
    border-radius: 4px;
    font-size: 0.9em;
    color: #e83e8c;
    border: 1px solid #e9ecef;
}

/* Alert heading in modal */
.alert-heading {
    font-size: 1.25rem;
    font-weight: 700;
}

/* Page title improvements */
.page-title {
    font-weight: 600;
    color: #2c3e50;
}

/* Better spacing */
.form-group {
    margin-bottom: 1.5rem;
}

/* WhatsApp Specific Adjustments */
.wa-chat-empty h4 {
    font-size: 17px;
    font-weight: 400;
    color: #41525d;
    margin-bottom: 8px;
}

.wa-chat-empty p {
    font-size: 14px;
    color: #667781;
    margin: 0;
}

/* Ensure proper flex layout */
.wa-messages {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* Avatar colors */
.wa-conversation-avatar {
    background: linear-gradient(135deg, #25d366 0%, #128c7e 100%);
    color: white;
}

.wa-chat-contact .wa-avatar {
    background: #dfe5e7;
    color: #54656f;
}

/* Better spacing for messages */
.wa-message-item {
    padding: 0;
}

.wa-message-bubble {
    display: inline-block;
    position: relative;
}

/* Input auto-resize fix */
.wa-input {
    overflow: hidden;
    overflow-y: auto;
}

.wa-input-box {
    overflow: visible;
}

/* Focus states */
.wa-input:focus {
    outline: none;
}

.wa-search-input:focus {
    outline: none;
}

/* Input group focus improvement */
.input-group:focus-within .input-group-text {
    border-color: #007bff;
    color: #007bff;
}

/* Custom Toast Container - Bottom Right */
.custom-toast-container {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 99999;
    display: flex;
    flex-direction: column;
    gap: 12px;
    pointer-events: none;
    max-width: 400px;
    width: auto;
}

.custom-toast {
    background: white;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    padding: 16px 20px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    min-width: 300px;
    max-width: 400px;
    pointer-events: auto;
    position: relative;
    overflow: hidden;
    animation: slideInRight 0.3s ease-out;
    border-left: 4px solid;
}

.custom-toast::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    opacity: 0.3;
}

.custom-toast.success {
    border-left-color: #28a745;
    background: linear-gradient(135deg, #ffffff 0%, #f0f9f4 100%);
}

.custom-toast.success::before {
    background: #28a745;
}

.custom-toast.error {
    border-left-color: #dc3545;
    background: linear-gradient(135deg, #ffffff 0%, #fef0f0 100%);
}

.custom-toast.error::before {
    background: #dc3545;
}

.custom-toast.warning {
    border-left-color: #ffc107;
    background: linear-gradient(135deg, #ffffff 0%, #fffef0 100%);
}

.custom-toast.warning::before {
    background: #ffc107;
}

.custom-toast.info {
    border-left-color: #17a2b8;
    background: linear-gradient(135deg, #ffffff 0%, #f0f9fb 100%);
}

.custom-toast.info::before {
    background: #17a2b8;
}

.custom-toast-icon {
    font-size: 24px;
    flex-shrink: 0;
    margin-top: 2px;
}

.custom-toast.success .custom-toast-icon {
    color: #28a745;
}

.custom-toast.error .custom-toast-icon {
    color: #dc3545;
}

.custom-toast.warning .custom-toast-icon {
    color: #ffc107;
}

.custom-toast.info .custom-toast-icon {
    color: #17a2b8;
}

.custom-toast-content {
    flex: 1;
    min-width: 0;
}

.custom-toast-title {
    font-weight: 600;
    font-size: 15px;
    margin-bottom: 4px;
    color: #333;
}

.custom-toast-message {
    font-size: 14px;
    line-height: 1.5;
    color: #666;
    word-wrap: break-word;
}

.custom-toast-close {
    background: none;
    border: none;
    font-size: 20px;
    color: #999;
    cursor: pointer;
    padding: 0;
    margin-left: 8px;
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.2s ease;
    line-height: 1;
}

.custom-toast-close:hover {
    background-color: rgba(0, 0, 0, 0.1);
    color: #333;
}

.custom-toast.fade-out {
    animation: slideOutRight 0.3s ease-in forwards;
}

@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideOutRight {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(100%);
        opacity: 0;
    }
}

@media (max-width: 768px) {
    .custom-toast-container {
        bottom: 10px;
        right: 10px;
        left: 10px;
        max-width: calc(100% - 20px);
    }
    
    .custom-toast {
        min-width: auto;
        max-width: 100%;
        width: 100%;
    }
}
</style>
@endsection
<script>
(function() {
    'use strict';
    
    // Custom Toast Notification System - 100% Reliable
    const CustomToast = {
        // Get or create container
        getContainer: function() {
            let container = document.getElementById('customToastContainer');
            
            if (!container) {
                container = document.createElement('div');
                container.id = 'customToastContainer';
                container.className = 'custom-toast-container';
                if (document.body) {
                    document.body.appendChild(container);
                } else {
                    // If body doesn't exist yet, wait for it
                    if (document.readyState === 'loading') {
                        document.addEventListener('DOMContentLoaded', function() {
                            document.body.appendChild(container);
                        });
                    }
                }
            }
            
            // Ensure container is visible and positioned correctly
            container.style.display = 'flex';
            container.style.visibility = 'visible';
            container.style.position = 'fixed';
            container.style.bottom = '20px';
            container.style.right = '20px';
            container.style.zIndex = '99999';
            container.style.pointerEvents = 'none';
            
            return container;
        },
        
        // Icons for each type
        icons: {
            success: 'fa-check-circle',
            error: 'fa-exclamation-circle',
            warning: 'fa-exclamation-triangle',
            info: 'fa-info-circle'
        },
        
        // Default titles
        defaultTitles: {
            success: 'Success',
            error: 'Error',
            warning: 'Warning',
            info: 'Info'
        },
        
        // Escape HTML to prevent XSS
        escapeHtml: function(text) {
            const div = document.createElement('div');
            div.textContent = text;
            return div.innerHTML;
        },
        
        // Show notification
        show: function(type, message, title) {
            try {
                const container = this.getContainer();
                const notificationTitle = title || this.defaultTitles[type] || 'Notification';
                const icon = this.icons[type] || 'fa-info-circle';
                
                // Create toast element
                const toast = document.createElement('div');
                toast.className = 'custom-toast ' + type;
                toast.innerHTML = 
                    '<i class="fas ' + icon + ' custom-toast-icon"></i>' +
                    '<div class="custom-toast-content">' +
                        '<div class="custom-toast-title">' + this.escapeHtml(notificationTitle) + '</div>' +
                        '<div class="custom-toast-message">' + this.escapeHtml(message) + '</div>' +
                    '</div>' +
                    '<button type="button" class="custom-toast-close" aria-label="Close">' +
                        '<span aria-hidden="true">&times;</span>' +
                    '</button>';
                
                // Ensure toast is visible
                toast.style.display = 'flex';
                toast.style.opacity = '1';
                toast.style.visibility = 'visible';
                toast.style.pointerEvents = 'auto';
                
                // Add to container
                container.appendChild(toast);
                
                // Force reflow for animation
                toast.offsetHeight;
                
                // Remove function
                const removeToast = function(toastElement) {
                    if (!toastElement || !toastElement.parentNode) return;
                    toastElement.classList.add('fade-out');
                    setTimeout(function() {
                        if (toastElement && toastElement.parentNode) {
                            toastElement.parentNode.removeChild(toastElement);
                        }
                    }, 300);
                };
                
                // Auto remove after 5 seconds
                const autoRemove = setTimeout(function() {
                    removeToast(toast);
                }, 5000);
                
                // Close button handler
                const closeBtn = toast.querySelector('.custom-toast-close');
                if (closeBtn) {
                    closeBtn.addEventListener('click', function() {
                        clearTimeout(autoRemove);
                        removeToast(toast);
                    });
                }
                
                console.log('Custom toast shown:', { type: type, title: notificationTitle, message: message });
            } catch (error) {
                console.error('Error showing toast:', error);
                // Retry after a short delay
                const self = this;
                setTimeout(function() {
                    try {
                        self.show(type, message, title);
                    } catch (e) {
                        console.error('Failed to show toast after retry:', e);
                    }
                }, 100);
            }
        }
    };
    
    // Notification functions - ALWAYS use custom toast
    function showNotification(type, message, title) {
        // Ensure title is defined
        if (title === undefined || title === null) {
            title = null;
        }
        
        try {
            // Wait for DOM if needed
            if (document.readyState === 'loading') {
                document.addEventListener('DOMContentLoaded', function() {
                    CustomToast.show(type, message, title);
                });
            } else {
                // Ensure body exists
                if (document.body) {
                    CustomToast.show(type, message, title);
                } else {
                    // Wait for body
                    document.addEventListener('DOMContentLoaded', function() {
                        CustomToast.show(type, message, title);
                    });
                }
            }
        } catch (error) {
            console.error('Toast error:', error);
            // Retry after a small delay
            setTimeout(function() {
                try {
                    CustomToast.show(type, message, title);
                } catch (e) {
                    console.error('Failed to show toast after retry:', e);
                    // Last resort alert (should never happen)
                    console.error('Last resort alert triggered');
                    alert((title || type.toUpperCase()) + ': ' + message);
                }
            }, 100);
        }
    }
    
    // Convenience functions - Make them global
    window.showSuccess = function(message, title) {
        showNotification('success', message, title);
    };
    window.showError = function(message, title) {
        showNotification('error', message, title);
    };
    window.showWarning = function(message, title) {
        showNotification('warning', message, title);
    };
    window.showInfo = function(message, title) {
        showNotification('info', message, title);
    };
    
    // Initialize container on page load
    function initializeToastContainer() {
        let container = document.getElementById('customToastContainer');
        if (!container) {
            container = document.createElement('div');
            container.id = 'customToastContainer';
            container.className = 'custom-toast-container';
            document.body.appendChild(container);
        }
        
        // Ensure container is visible and positioned
        container.style.display = 'flex';
        container.style.visibility = 'visible';
        container.style.position = 'fixed';
        container.style.bottom = '20px';
        container.style.right = '20px';
        container.style.zIndex = '99999';
        container.style.pointerEvents = 'none';
        
        console.log('Custom toast container initialized');
    }
    
    // Initialize immediately if DOM is ready, otherwise wait
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', initializeToastContainer);
    } else {
        initializeToastContainer();
    }
    
    console.log('=== SMS PAGE LOADED - Custom Toast System Ready ===');
    
    // Wait for DOM
    document.addEventListener('DOMContentLoaded', function() {
        console.log('=== DOM READY ===');
        
        console.log('=== INITIALIZATION COMPLETE ===');
        
        // WhatsApp-like SMS Interface
        let currentConversation = null;
        let conversations = [];
        let messages = [];
        
        const WhatsAppSMS = {
            // Load conversations (grouped by phone number)
            loadConversations: function() {
    const loadingEl = document.getElementById('incomingMessagesLoading');
    const containerEl = document.getElementById('conversationsContainer');
    
    if (loadingEl) loadingEl.style.display = 'block';
    
    fetch('{{ route("sms.incoming") }}?limit=100&offset=0', {
        method: 'GET',
        headers: {
            'X-Requested-With': 'XMLHttpRequest',
            'Accept': 'application/json'
        }
    })
    .then(response => response.json())
    .then(data => {
        if (loadingEl) loadingEl.style.display = 'none';
        
        if (data.success && data.conversations && data.conversations.length > 0) {
            this.conversations = data.conversations;
            this.renderConversations(this.conversations);
        } else if (data.success && data.messages && data.messages.length > 0) {
            // Fallback for backward compatibility
            this.conversations = data.messages;
            this.renderConversations(this.conversations);
        } else {
            this.renderEmptyConversations();
        }
    })
    .catch(error => {
        console.error('Error loading conversations:', error);
        if (loadingEl) loadingEl.style.display = 'none';
        this.renderEmptyConversations();
    });
},
            
            // Group messages by phone number
            groupMessagesByPhone: function(messages) {
                const grouped = {};
                
                messages.forEach(msg => {
                    const phone = msg.from || 'unknown';
                    if (!grouped[phone]) {
                        grouped[phone] = {
                            phone: phone,
                            formattedPhone: msg.formatted_from || phone,
                            messages: [],
                            lastMessage: null,
                            lastMessageTime: null,
                            unreadCount: 0
                        };
                    }
                    grouped[phone].messages.push(msg);
                    
                    // Get latest message
                    const msgTime = new Date(msg.timestamp || msg.received_at || 0).getTime();
                    if (!grouped[phone].lastMessageTime || msgTime > grouped[phone].lastMessageTime) {
                        grouped[phone].lastMessage = msg;
                        grouped[phone].lastMessageTime = msgTime;
                    }
                });
                
                // Convert to array and sort by last message time
                return Object.values(grouped).sort((a, b) => {
                    return (b.lastMessageTime || 0) - (a.lastMessageTime || 0);
                });
            },
            
            // Render conversations list
            renderConversations: function(conversationsList) {
    const containerEl = document.getElementById('conversationsContainer');
    
    if (!conversationsList || conversationsList.length === 0) {
        containerEl.innerHTML = `
            <div class="wa-empty-state">
                <i class="fas fa-comments"></i>
                <p>No conversations yet</p>
                <small>Start a new conversation or wait for incoming messages</small>
            </div>
        `;
        return;
    }
    
    let html = '';
    conversationsList.forEach(conv => {
        const lastMsg = conv.last_message || {};
        const preview = (lastMsg.message || '').substring(0, 50) || 'No messages';
        const time = this.formatTime(new Date(lastMsg.timestamp || new Date()));
        
        // Handle phone number formatting
        const phoneDisplay = this.formatPhoneNumber(
            conv.formatted_phone || conv.formatted_from || conv.phone || conv.from_phone || 'Unknown'
        );
        
        const unreadBadge = (conv.unread_count || 0) > 0 ? 
            `<span class="wa-conversation-badge">${conv.unread_count}</span>` : '';
        
        // Direction icon
        let directionIcon = '';
        if (lastMsg.direction === 'outgoing') {
            directionIcon = '<i class="fas fa-reply" style="font-size: 11px; margin-right: 4px; color: #667781;"></i>';
        }
        
        const actualPhone = conv.phone || conv.from_phone || '';
        
        html += `
            <div class="wa-conversation-item" data-phone="${this.escapeHtml(actualPhone)}">
                <div class="wa-conversation-avatar">
                    <i class="fas fa-user"></i>
                </div>
                <div class="wa-conversation-info">
                    <div class="wa-conversation-header">
                        <div class="wa-conversation-name">${this.escapeHtml(phoneDisplay)}</div>
                        <div class="wa-conversation-time">${time}</div>
                    </div>
                    <div class="wa-conversation-footer">
                        <div class="wa-conversation-preview">${directionIcon}${this.escapeHtml(preview)}</div>
                        ${unreadBadge}
                    </div>
                </div>
            </div>
        `;
    });
    
    containerEl.innerHTML = html;
    
    // Attach click handlers
    const self = this;
    containerEl.querySelectorAll('.wa-conversation-item').forEach(item => {
        item.addEventListener('click', function() {
            const phone = this.getAttribute('data-phone');
            if (phone && phone !== 'Unknown' && phone !== '') {
                self.selectConversation(phone);
            }
        });
    });
},
            
            // Select conversation
            selectConversation: function(phone) {
    currentConversation = phone;
    
    // Update active conversation in list
    document.querySelectorAll('.wa-conversation-item').forEach(item => {
        item.classList.remove('active');
        if (item.getAttribute('data-phone') === phone) {
            item.classList.add('active');
        }
    });
    
    // Find conversation - support both structures
    const conversation = this.conversations.find(c => 
        c.phone === phone || c.from_phone === phone
    );
    
    if (!conversation) {
        console.error('Conversation not found for phone:', phone);
        console.log('Available conversations:', this.conversations);
        console.log('Looking for phone:', phone);
        return;
    }
    
    // Get formatted phone - support both structures
    const formattedPhone = conversation.formatted_phone || 
                         conversation.formattedPhone || 
                         conversation.formatted_from || 
                         phone;
    
    console.log('Selected conversation:', conversation);
    
    // Show chat header
    document.getElementById('emptyChatHeader').style.display = 'none';
    document.getElementById('activeChatHeader').style.display = 'block';
    document.getElementById('activeChatName').textContent = this.formatPhoneNumber(formattedPhone);
    document.getElementById('activeChatPhone').textContent = formattedPhone;
    
    // Hide new message composer
    document.getElementById('newMessageComposer').style.display = 'none';
    
    // Show chat input
    document.getElementById('chatInputContainer').style.display = 'block';
    document.getElementById('phone_number').value = phone;
    
    // Load and display messages
    this.loadMessages(phone);
},
            
            // Load messages for a conversation
            loadMessages: function(phone) {
                fetch(`{{ route("sms.incoming") }}?phone_number=${encodeURIComponent(phone)}&limit=100`, {
                    method: 'GET',
                    headers: {
                        'X-Requested-With': 'XMLHttpRequest',
                        'Accept': 'application/json'
                    }
                })
                .then(response => response.json())
                .then(data => {
                    if (data.success && data.messages && data.messages.length > 0) {
                        // Sort messages by timestamp
                        messages = data.messages.sort((a, b) => {
                            const timeA = new Date(a.timestamp || a.received_at || 0).getTime();
                            const timeB = new Date(b.timestamp || b.received_at || 0).getTime();
                            return timeA - timeB;
                        });
                        
                        this.renderMessages(messages);
                    } else {
                        this.renderEmptyMessages();
                    }
                })
                .catch(error => {
                    console.error('Error loading messages:', error);
                    this.renderEmptyMessages();
                });
            },
            
            // Render messages in chat bubbles
          renderMessages: function(messagesList) {
    const emptyEl = document.getElementById('emptyChatMessage');
    const containerEl = document.getElementById('messagesContainer');
    
    if (!messagesList || messagesList.length === 0) {
        emptyEl.style.display = 'flex';
        containerEl.style.display = 'none';
        return;
    }
    
    emptyEl.style.display = 'none';
    containerEl.style.display = 'block';
    
    // ✅ FIX: Sort messages by timestamp first (in case backend didn't)
    messagesList.sort((a, b) => {
    const timeA = new Date(a.message_timestamp).getTime();
    const timeB = new Date(b.message_timestamp).getTime();
    return timeA - timeB; // Oldest first
});
    
    let html = '';
    let lastDate = null;
    
    messagesList.forEach(msg => {
        const timestamp = new Date(msg.timestamp || msg.received_at || new Date());
        const date = timestamp.toDateString();
        const time = this.formatTime(timestamp);
        const message = msg.message || '(No message)';
        const isSent = msg.is_sent || msg.direction === 'outgoing';
        
        // Debug log
        console.log('Rendering message:', {
            message: message.substring(0, 20),
            timestamp: timestamp.toISOString(),
            time: time,
            direction: msg.direction
        });
        
        // Date separator
        if (date !== lastDate) {
            html += `
                <div class="wa-date-separator">
                    <div class="wa-date-separator-line"></div>
                    <span class="wa-date-separator-text">${this.formatDate(timestamp)}</span>
                    <div class="wa-date-separator-line"></div>
                </div>
            `;
            lastDate = date;
        }
        
        // Message bubble
        const messageClass = isSent ? 'wa-sent' : 'wa-received';
        
        // Status icon for sent messages
        let statusIcon = '';
        if (isSent) {
            const status = msg.status || 'sent';
            if (status === 'delivered' || status === 'sent') {
                statusIcon = '<span class="wa-message-status wa-delivered"><i class="fas fa-check"></i></span>';
            } else if (status === 'failed') {
                statusIcon = '<span class="wa-message-status" style="color: #dc3545;"><i class="fas fa-exclamation-circle"></i></span>';
            }
        }
        
        html += `
            <div class="wa-message-item ${messageClass}">
                <div class="wa-message-bubble">
                    <div class="wa-message-text">${this.escapeHtml(message)}</div>
                    <div class="wa-message-meta">
                        <span class="wa-message-time">${time}</span>
                        ${statusIcon}
                    </div>
                </div>
            </div>
        `;
    });
    
    containerEl.innerHTML = html;
    
    // Scroll to bottom
    const messagesEl = document.getElementById('chatMessages');
    if (messagesEl) {
        messagesEl.scrollTop = messagesEl.scrollHeight;
    }
},


         
            // Render empty messages
            renderEmptyMessages: function() {
                const emptyEl = document.getElementById('emptyChatMessage');
                const containerEl = document.getElementById('messagesContainer');
                
                emptyEl.style.display = 'none';
                containerEl.style.display = 'block';
                    containerEl.innerHTML = `
                        <div class="wa-chat-empty">
                            <div class="wa-chat-empty-content">
                                <i class="fas fa-lock"></i>
                                <h4>No messages yet</h4>
                                <p>Start the conversation by sending a message</p>
                            </div>
                        </div>
                    `;
            },
            
            // Send SMS
            sendSMS: function(phoneNumber, message) {
                const formData = new FormData();
                formData.append('_token', '{{ csrf_token() }}');
                formData.append('phone_number', phoneNumber);
                formData.append('message', message);
                
                return fetch('{{ route("sms.send") }}', {
                    method: 'POST',
                    body: formData,
                    headers: {
                        'X-Requested-With': 'XMLHttpRequest',
                        'Accept': 'application/json'
                    }
                })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        // Add sent message to display
                        this.addSentMessage(phoneNumber, message);
                        // Reload conversations and messages
                        this.loadConversations();
                        if (currentConversation === phoneNumber) {
                            this.loadMessages(phoneNumber);
                        }
                        return { success: true, data: data };
                    } else {
                        return { success: false, message: data.message || 'Failed to send SMS' };
                    }
                })
                .catch(error => {
                    console.error('Error sending SMS:', error);
                    return { success: false, message: error.message || 'An error occurred' };
                });
            },
            
            // Add sent message to display
            addSentMessage: function(phoneNumber, message) {
                const containerEl = document.getElementById('messagesContainer');
                const timestamp = new Date();
                const time = this.formatTime(timestamp);
                
                const html = `
                    <div class="wa-message-item wa-sent">
                        <div class="wa-message-bubble">
                            <div class="wa-message-text">${this.escapeHtml(message)}</div>
                            <div class="wa-message-meta">
                                <span class="wa-message-time">${time}</span>
                                <span class="wa-message-status wa-sent"><i class="fas fa-check"></i></span>
                            </div>
                        </div>
                    </div>
                `;
                
                containerEl.insertAdjacentHTML('beforeend', html);
                
                // Scroll to bottom
                const messagesEl = document.getElementById('messagesContainer');
                if (messagesEl) {
                    messagesEl.scrollTop = messagesEl.scrollHeight;
                }
            },
            
            // Format phone number for display
            formatPhoneNumber: function(phone) {
                if (!phone) return 'Unknown';
                // Remove all non-numeric characters
                let cleaned = phone.replace(/[^0-9]/g, '');
                
                // Format as (XXX) XXX-XXXX
                if (cleaned.length === 10) {
                    return '(' + cleaned.substring(0, 3) + ') ' + cleaned.substring(3, 6) + '-' + cleaned.substring(6);
                } else if (cleaned.length === 11 && cleaned.startsWith('1')) {
                    cleaned = cleaned.substring(1);
                    return '(' + cleaned.substring(0, 3) + ') ' + cleaned.substring(3, 6) + '-' + cleaned.substring(6);
                }
                
                return phone;
            },
            
            // Format time (HH:MM AM/PM)
            formatTime: function(date) {
                if (!date) return '';
                const hours = date.getHours();
                const minutes = date.getMinutes();
                const ampm = hours >= 12 ? 'PM' : 'AM';
                const hours12 = hours % 12 || 12;
                const minutesStr = minutes.toString().padStart(2, '0');
                return `${hours12}:${minutesStr} ${ampm}`;
            },
            
            // Format date (Today, Yesterday, or date)
            formatDate: function(date) {
                if (!date) return '';
                const today = new Date();
                const yesterday = new Date(today);
                yesterday.setDate(yesterday.getDate() - 1);
                
                const dateStr = date.toDateString();
                const todayStr = today.toDateString();
                const yesterdayStr = yesterday.toDateString();
                
                if (dateStr === todayStr) {
                    return 'Today';
                } else if (dateStr === yesterdayStr) {
                    return 'Yesterday';
                } else {
                    return date.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' });
                }
            },
            
            // Escape HTML
            escapeHtml: function(text) {
                if (!text) return '';
                const div = document.createElement('div');
                div.textContent = text;
                return div.innerHTML;
            }
        };
        
        // Refresh button handler
        const refreshBtn = document.getElementById('refreshIncomingBtn');
        if (refreshBtn) {
            refreshBtn.addEventListener('click', function() {
                WhatsAppSMS.loadConversations();
            });
        }
        
        // New message button handler
        const newMessageBtn = document.getElementById('newMessageBtn');
        if (newMessageBtn) {
            newMessageBtn.addEventListener('click', function() {
                // Show new message composer
                document.getElementById('newMessageComposer').style.display = 'flex';
                document.getElementById('chatInputContainer').style.display = 'none';
                document.getElementById('emptyChatHeader').style.display = 'flex';
                document.getElementById('activeChatHeader').style.display = 'none';
                document.getElementById('messagesContainer').innerHTML = '';
                document.getElementById('emptyChatMessage').style.display = 'flex';
                
                // Remove active conversation
                document.querySelectorAll('.wa-conversation-item').forEach(item => {
                    item.classList.remove('active');
                });
                currentConversation = null;
            });
        }
        
        // Copy webhook URL button
        const copyWebhookUrlBtn = document.getElementById('copyWebhookUrlBtn');
        if (copyWebhookUrlBtn) {
            copyWebhookUrlBtn.addEventListener('click', function() {
                const input = document.getElementById('webhookUrlInput');
                input.select();
                document.execCommand('copy');
                showSuccess('Webhook URL copied to clipboard!', 'Copied');
                input.setSelectionRange(0, 0);
            });
        }
        
        // Message input auto-resize and character counter
        const messageInput = document.getElementById('message');
        const charCount = document.getElementById('charCount');
        const termsNotice = document.getElementById('termsNotice');
        
        if (messageInput) {
        messageInput.addEventListener('input', function() {
                // Auto-resize
                this.style.height = 'auto';
                this.style.height = Math.min(this.scrollHeight, 120) + 'px';
                
                // Character counter
            const count = this.value.length;
                if (charCount) {
            charCount.textContent = count;
            if (count > 1500) {
                        charCount.style.color = '#ffc107';
            } else {
                        charCount.style.color = '#667781';
                    }
                }
                
                // Show terms notice if message has content
                if (count > 0 && termsNotice) {
                    termsNotice.style.display = 'block';
                }
            });
            
            // Allow Enter to send (Shift+Enter for new line)
            messageInput.addEventListener('keydown', function(e) {
                if (e.key === 'Enter' && !e.shiftKey) {
            e.preventDefault();
                    const sendBtn = document.getElementById('smsSubmitButton');
                    if (sendBtn && !sendBtn.disabled) {
                        sendBtn.click();
                    }
                }
            });
        }
        
        // Send button handler (chat area)
        const smsSubmitButton = document.getElementById('smsSubmitButton');
        if (smsSubmitButton) {
            smsSubmitButton.addEventListener('click', function(e) {
            e.preventDefault();
                const phoneInput = document.getElementById('phone_number');
                const messageInput = document.getElementById('message');
                const termsCheckbox = document.getElementById('termsCheckbox');
                
                if (!phoneInput || !messageInput) return;
                
            const phoneNumber = phoneInput.value.trim();
            const message = messageInput.value.trim();
                
                if (!phoneNumber || !currentConversation) {
                    showWarning('Please select a conversation first', 'Warning');
                    return;
                }
                
                if (!message) {
                    showWarning('Please enter a message', 'Warning');
                    messageInput.focus();
                    return;
                }
                
                if (!termsCheckbox || !termsCheckbox.checked) {
                    showWarning('Please accept the Terms and Conditions', 'Warning');
                    if (termsNotice) termsNotice.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
                    return;
                }
                
                // Disable button
                const originalHtml = this.innerHTML;
                this.disabled = true;
                this.innerHTML = '<i class="fas fa-spinner fa-spin"></i>';
                
                // Send SMS
                WhatsAppSMS.sendSMS(phoneNumber, message).then(result => {
                    this.disabled = false;
                    this.innerHTML = originalHtml;
                    
                    if (result.success) {
                        messageInput.value = '';
                        messageInput.style.height = 'auto';
                        if (charCount) charCount.textContent = '0';
                        if (termsCheckbox) termsCheckbox.checked = false;
                        if (termsNotice) termsNotice.style.display = 'none';
                        messageInput.focus();
                    } else {
                        showError(result.message || 'Failed to send message', 'Error');
                    }
                });
            });
        }
        
        // New message form submit
        const newMessageSubmitBtn = document.getElementById('newMessageSubmitBtn');
        const newPhoneInput = document.getElementById('new_phone_number');
        const newMessageInput = document.getElementById('new_message');
        const newCharCount = document.getElementById('newCharCount');
        const newTermsCheckbox = document.getElementById('newTermsCheckbox');
        
        if (newMessageSubmitBtn) {
            newMessageSubmitBtn.addEventListener('click', function(e) {
                e.preventDefault();
                
                const phoneNumber = newPhoneInput.value.trim();
                const message = newMessageInput.value.trim();
                
                if (!phoneNumber) {
                    showWarning('Please enter a phone number', 'Warning');
                    newPhoneInput.focus();
                    return;
            }
            
            if (!message) {
                    showWarning('Please enter a message', 'Warning');
                    newMessageInput.focus();
                    return;
                }
                
                if (!newTermsCheckbox || !newTermsCheckbox.checked) {
                    showWarning('Please accept the Terms and Conditions', 'Warning');
                    return;
                }
                
                // Clean phone number
                let cleanedPhone = phoneNumber.replace(/[^0-9]/g, '');
                if (cleanedPhone.length === 11 && cleanedPhone.startsWith('1')) {
                    cleanedPhone = cleanedPhone.substring(1);
                }
            
            // Disable button
            const originalHtml = this.innerHTML;
            this.disabled = true;
            this.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i> Sending...';
            
                // Send SMS
                WhatsAppSMS.sendSMS(cleanedPhone, message).then(result => {
                    this.disabled = false;
                    this.innerHTML = originalHtml;
                    
                    if (result.success) {
                        showSuccess('Message sent successfully!', 'Success');
                        // Clear form
                        newPhoneInput.value = '';
                        newMessageInput.value = '';
                        if (newCharCount) newCharCount.textContent = '0';
                        newTermsCheckbox.checked = false;
                        
                        // Select the conversation
                        setTimeout(() => {
                            WhatsAppSMS.loadConversations();
                            setTimeout(() => {
                                WhatsAppSMS.selectConversation(cleanedPhone);
                            }, 500);
                        }, 500);
                    } else {
                        showError(result.message || 'Failed to send message', 'Error');
                    }
                });
            });
        }
        
        // Character counter for new message input
        if (newMessageInput && newCharCount) {
            newMessageInput.addEventListener('input', function() {
                const count = this.value.length;
                newCharCount.textContent = count;
            });
        }
        
        // Search conversations
        const conversationSearch = document.getElementById('conversationSearch');
        if (conversationSearch) {
            conversationSearch.addEventListener('input', function() {
                const searchTerm = this.value.toLowerCase();
                document.querySelectorAll('.wa-conversation-item').forEach(item => {
                    const name = item.querySelector('.wa-conversation-name').textContent.toLowerCase();
                    const preview = item.querySelector('.wa-conversation-preview').textContent.toLowerCase();
                    if (name.includes(searchTerm) || preview.includes(searchTerm)) {
                        item.style.display = 'flex';
                } else {
                        item.style.display = 'none';
                    }
                });
            });
        }
        
        // Auto-load conversations on page load
        WhatsAppSMS.loadConversations();
        
        // Auto-refresh conversations every 30 seconds
        setInterval(function() {
            WhatsAppSMS.loadConversations();
            if (currentConversation) {
                WhatsAppSMS.loadMessages(currentConversation);
            }
        }, 30000);
    });
})();
</script>