@extends('layouts.app')

@section('title', 'WhatsApp — ' . $lead->name)

@push('style')
    <style>
        /* ── Chat Shell ── */
        .wa-shell {
            display: flex;
            height: calc(100vh - 180px);
            min-height: 520px;
            border-radius: 12px;
            overflow: hidden;
            background: #fff;
            border: 1px solid #e9ecef;
            box-shadow: 0 2px 12px rgba(0,0,0,.06);
        }

        /* ── Thread Sidebar ── */
        .wa-threads {
            width: 320px;
            flex-shrink: 0;
            border-right: 1px solid #e9ecef;
            display: flex;
            flex-direction: column;
            background: #fff;
        }
        .wa-threads-header {
            padding: 16px 16px 12px;
            border-bottom: 1px solid #f0f0f0;
        }
        .wa-threads-header h6 { margin: 0; font-weight: 700; font-size: 15px; color: #1a1a2e; }
        .wa-threads-search {
            padding: 10px 12px;
            border-bottom: 1px solid #f5f5f5;
        }
        .wa-threads-search input {
            border-radius: 20px;
            background: #f5f7fa;
            border: none;
            font-size: 13px;
            padding: 7px 14px;
        }
        .wa-threads-search input:focus { box-shadow: none; background: #eef1f7; }
        .wa-thread-list { overflow-y: auto; flex: 1; }
        .wa-thread-item {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 12px 14px;
            cursor: pointer;
            border-bottom: 1px solid #f8f8f8;
            transition: background .15s;
            position: relative;
        }
        .wa-thread-item:hover { background: #f5f7fa; }
        .wa-thread-item.active { background: #e8f5e9; }
        .wa-thread-avatar {
            width: 42px; height: 42px;
            border-radius: 50%;
            background: linear-gradient(135deg, #25D366, #128C7E);
            color: #fff;
            font-weight: 700;
            font-size: 16px;
            display: flex; align-items: center; justify-content: center;
            flex-shrink: 0;
            text-transform: uppercase;
        }
        .wa-thread-info { flex: 1; min-width: 0; }
        .wa-thread-name { font-size: 13.5px; font-weight: 600; color: #1a1a2e; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .wa-thread-preview { font-size: 12px; color: #888; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
        .wa-thread-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
        .wa-thread-time { font-size: 11px; color: #aaa; }
        .wa-unread-badge {
            background: #25D366;
            color: #fff;
            border-radius: 10px;
            font-size: 10px;
            font-weight: 700;
            padding: 1px 6px;
        }

        /* ── Chat Area ── */
        .wa-chat { flex: 1; display: flex; flex-direction: column; background: #f0f2f5; }

        .wa-chat-header {
            background: #fff;
            border-bottom: 1px solid #e9ecef;
            padding: 12px 18px;
            display: flex;
            align-items: center;
            gap: 12px;
        }
        .wa-chat-header-info { flex: 1; }
        .wa-chat-header-info .lead-name { font-weight: 700; font-size: 15px; color: #1a1a2e; margin: 0; }
        .wa-chat-header-info .lead-phone { font-size: 12px; color: #888; }
        .wa-chat-header-actions { display: flex; gap: 8px; }
        .wa-chat-header-actions .btn { border-radius: 8px; font-size: 13px; }

        /* ── Message Feed ── */
        .wa-messages {
            flex: 1;
            overflow-y: auto;
            padding: 18px 20px;
            display: flex;
            flex-direction: column;
            gap: 6px;
            background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23d0d7de' fill-opacity='0.12'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
        }

        .wa-date-divider {
            text-align: center;
            margin: 10px 0 6px;
        }
        .wa-date-divider span {
            background: rgba(255,255,255,.85);
            border: 1px solid #e0e0e0;
            border-radius: 10px;
            font-size: 11.5px;
            color: #666;
            padding: 3px 12px;
        }

        .wa-bubble-row { display: flex; }
        .wa-bubble-row.outgoing { justify-content: flex-end; }
        .wa-bubble-row.incoming { justify-content: flex-start; }

        .wa-bubble {
            max-width: 65%;
            padding: 9px 13px 6px;
            border-radius: 12px;
            font-size: 13.5px;
            line-height: 1.5;
            position: relative;
            word-break: break-word;
        }
        .wa-bubble-row.outgoing .wa-bubble {
            background: #dcf8c6;
            border-radius: 12px 0 12px 12px;
            color: #1a1a2e;
        }
        .wa-bubble-row.incoming .wa-bubble {
            background: #fff;
            border-radius: 0 12px 12px 12px;
            color: #1a1a2e;
            box-shadow: 0 1px 2px rgba(0,0,0,.08);
        }
        .wa-bubble-meta {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            gap: 4px;
            margin-top: 3px;
        }
        .wa-bubble-time { font-size: 10.5px; color: #888; }
        .wa-tick { font-size: 13px; }
        .wa-tick.read { color: #53bdeb; }
        .wa-tick.sent { color: #aaa; }

        .wa-sender-label { font-size: 11px; font-weight: 600; color: #25D366; margin-bottom: 2px; }

        /* Template bubble */
        .wa-template-bubble {
            background: #fff;
            border-radius: 12px;
            padding: 10px 14px;
            max-width: 65%;
            box-shadow: 0 1px 3px rgba(0,0,0,.1);
            border-left: 3px solid #25D366;
        }
        .wa-template-bubble .template-label { font-size: 10px; font-weight: 700; color: #25D366; text-transform: uppercase; letter-spacing: .5px; margin-bottom: 5px; }
        .wa-template-bubble .template-title { font-size: 13.5px; font-weight: 700; color: #1a1a2e; margin-bottom: 3px; }
        .wa-template-bubble .template-body { font-size: 13px; color: #444; line-height: 1.5; }
        .wa-template-bubble .template-cta { margin-top: 10px; border-top: 1px solid #e9ecef; padding-top: 8px; text-align: center; font-size: 13px; color: #00a884; font-weight: 600; }

        /* Media bubble */
        .wa-media-bubble {
            background: #fff;
            border-radius: 12px;
            overflow: hidden;
            max-width: 260px;
            box-shadow: 0 1px 3px rgba(0,0,0,.1);
        }
        .wa-media-preview {
            background: #e9ecef;
            height: 140px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #666;
            font-size: 36px;
        }
        .wa-media-caption { padding: 8px 12px 6px; font-size: 12.5px; color: #333; }

        /* ── Compose ── */
        .wa-compose {
            background: #f0f2f5;
            border-top: 1px solid #e0e0e0;
            padding: 10px 14px;
            display: flex;
            align-items: flex-end;
            gap: 10px;
        }
        .wa-compose-box {
            flex: 1;
            background: #fff;
            border-radius: 24px;
            border: 1px solid #e0e0e0;
            display: flex;
            align-items: flex-end;
            padding: 8px 14px;
            gap: 8px;
        }
        .wa-compose-box textarea {
            flex: 1;
            border: none;
            resize: none;
            outline: none;
            font-size: 13.5px;
            color: #1a1a2e;
            max-height: 120px;
            background: transparent;
            line-height: 1.5;
        }
        .wa-compose-box .attach-btn {
            color: #8696a0;
            background: none;
            border: none;
            padding: 0;
            cursor: pointer;
            font-size: 20px;
            line-height: 1;
            transition: color .15s;
        }
        .wa-compose-box .attach-btn:hover { color: #128C7E; }
        .wa-send-btn {
            width: 44px; height: 44px;
            border-radius: 50%;
            background: #25D366;
            border: none;
            color: #fff;
            font-size: 20px;
            display: flex; align-items: center; justify-content: center;
            cursor: pointer;
            flex-shrink: 0;
            transition: background .2s, transform .15s;
            box-shadow: 0 2px 6px rgba(37,211,102,.4);
        }
        .wa-send-btn:hover { background: #128C7E; transform: scale(1.05); }

        /* ── Right Panel ── */
        .wa-right-panel {
            width: 280px;
            flex-shrink: 0;
            border-left: 1px solid #e9ecef;
            background: #fff;
            overflow-y: auto;
            display: flex;
            flex-direction: column;
        }
        .wa-panel-section { padding: 16px; border-bottom: 1px solid #f0f0f0; }
        .wa-panel-section h6 { font-size: 11px; text-transform: uppercase; letter-spacing: .7px; color: #999; font-weight: 700; margin-bottom: 12px; }
        .wa-info-row { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 8px; font-size: 13px; }
        .wa-info-row .label { color: #888; }
        .wa-info-row .value { font-weight: 600; color: #1a1a2e; text-align: right; max-width: 55%; word-break: break-word; }

        .wa-template-card {
            border: 1px solid #e9ecef;
            border-radius: 8px;
            padding: 10px 12px;
            margin-bottom: 8px;
            cursor: pointer;
            transition: border-color .15s, background .15s;
        }
        .wa-template-card:hover { border-color: #25D366; background: #f0fdf4; }
        .wa-template-card .t-name { font-size: 12.5px; font-weight: 700; color: #1a1a2e; }
        .wa-template-card .t-preview { font-size: 11.5px; color: #888; margin-top: 2px; }
        .wa-template-card .t-badge { font-size: 10px; }

        /* ── Status Dots ── */
        .wa-status { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 5px; }
        .wa-status.online { background: #25D366; }
        .wa-status.offline { background: #ccc; }

        /* Scrollbar styling */
        .wa-messages::-webkit-scrollbar, .wa-thread-list::-webkit-scrollbar { width: 4px; }
        .wa-messages::-webkit-scrollbar-track, .wa-thread-list::-webkit-scrollbar-track { background: transparent; }
        .wa-messages::-webkit-scrollbar-thumb { background: #ccc; border-radius: 4px; }

        @media (max-width: 991px) {
            .wa-right-panel { display: none; }
            .wa-threads { width: 260px; }
        }
        @media (max-width: 767px) {
            .wa-threads { display: none; }
        }
    </style>
@endpush

@section('content')
    @php
        $routePrefix = strtolower(auth()->user()->role->name);
        $canBroadcast = auth()->user()->hasPermissionName('whatsapp.broadcast');
    @endphp

    {{-- Page Header --}}
    <div class="d-flex justify-content-between align-items-center flex-wrap gap-2 mb-4">
        <div>
            <h3 class="mb-0">
                <span class="text-success me-2"><i class="ri-whatsapp-line"></i></span>
                WhatsApp
            </h3>
            <span class="text-secondary fs-13">Two-way messaging with leads &amp; customers.</span>
        </div>
        <div class="d-flex gap-2">
            @if($canBroadcast)
                <a href="{{ route($routePrefix . '.whatsapp.broadcast') }}"
                   class="btn btn-outline-success py-1 px-3 fs-14 fw-medium rounded-3">
                    <i class="ri-broadcast-line me-1"></i> Broadcast
                </a>
            @endif
            <a href="{{ route($routePrefix . '.whatsapp.templates') }}"
               class="btn btn-outline-secondary py-1 px-3 fs-14 fw-medium rounded-3">
                <i class="ri-file-list-3-line me-1"></i> Templates
            </a>
            <a href="{{ route($routePrefix . '.leads.show', $lead) }}"
               class="btn btn-outline-secondary py-1 px-3 fs-14 fw-medium rounded-3">
                <i class="ri-arrow-left-line me-1"></i> Back to Lead
            </a>
        </div>
    </div>

    {{-- WhatsApp Shell --}}
    <div class="wa-shell">

        {{-- Thread List --}}
        <div class="wa-threads">
            <div class="wa-threads-header">
                <h6><i class="ri-whatsapp-line text-success me-2"></i>Chats</h6>
            </div>
            <div class="wa-threads-search">
                <input type="text" class="form-control" placeholder="&#128269;  Search conversations…">
            </div>
            <div class="wa-thread-list">
                @foreach($threads as $thread)
                    <a href="{{ route($routePrefix . '.whatsapp.chat', $thread->lead_id) }}"
                       class="wa-thread-item text-decoration-none {{ $thread->lead_id == $lead->id ? 'active' : '' }}">
                        <div class="wa-thread-avatar">{{ strtoupper(substr($thread->lead->name, 0, 1)) }}</div>
                        <div class="wa-thread-info">
                            <div class="wa-thread-name">{{ $thread->lead->name }}</div>
                            <div class="wa-thread-preview">
                                @if($thread->lastMessage)
                                    {{ Str::limit($thread->lastMessage->body, 38) }}
                                @else
                                    <em>No messages yet</em>
                                @endif
                            </div>
                        </div>
                        <div class="wa-thread-meta">
                    <span class="wa-thread-time">
                        {{ $thread->lastMessage ? $thread->lastMessage->created_at->shortRelativeDiffForHumans() : '' }}
                    </span>
                            @if($thread->unread_count > 0)
                                <span class="wa-unread-badge">{{ $thread->unread_count }}</span>
                            @endif
                        </div>
                    </a>
                @endforeach
            </div>
        </div>

        {{-- Chat Area --}}
        <div class="wa-chat">

            {{-- Chat Header --}}
            <div class="wa-chat-header">
                <div class="wa-thread-avatar" style="width:38px;height:38px;font-size:14px;">
                    {{ strtoupper(substr($lead->name, 0, 1)) }}
                </div>
                <div class="wa-chat-header-info">
                    <p class="lead-name">{{ $lead->name }}</p>
                    <span class="lead-phone">
                    <span class="wa-status online"></span>
                    {{ $lead->phone }}
                    &nbsp;·&nbsp; Lead #{{ $lead->id }}
                </span>
                </div>
                <div class="wa-chat-header-actions">
                    <a href="{{ route($routePrefix . '.leads.show', $lead) }}"
                       class="btn btn-sm btn-outline-secondary" title="View Lead">
                        <i class="material-symbols-outlined fs-16">person</i>
                    </a>
                    <button class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#transferModal" title="Transfer Chat">
                        <i class="material-symbols-outlined fs-16">swap_horiz</i>
                    </button>
                    @can('admin.roles.manage')
                        <button class="btn btn-sm btn-outline-secondary" title="Admin View">
                            <i class="material-symbols-outlined fs-16">supervisor_account</i>
                        </button>
                    @endcan
                </div>
            </div>

            {{-- Message Feed --}}
            <div class="wa-messages" id="wa-messages">

                @php $lastDate = null; @endphp
                @foreach($messages as $msg)
                    @php
                        $msgDate = $msg->created_at->toDateString();
                        $isOut   = $msg->direction === 'outbound';
                    @endphp

                    @if($msgDate !== $lastDate)
                        <div class="wa-date-divider">
                            <span>{{ $msg->created_at->isToday() ? 'Today' : ($msg->created_at->isYesterday() ? 'Yesterday' : $msg->created_at->format('d M Y')) }}</span>
                        </div>
                        @php $lastDate = $msgDate; @endphp
                    @endif

                    <div class="wa-bubble-row {{ $isOut ? 'outgoing' : 'incoming' }}">
                        @if($msg->type === 'template')
                            <div class="wa-template-bubble">
                                <div class="template-label">&#127981; Template</div>
                                <div class="template-title">{{ $msg->template_name ?? 'Invoice Notification' }}</div>
                                <div class="template-body">{{ $msg->body }}</div>
                                @if($msg->cta_text)
                                    <div class="template-cta"><i class="ri-external-link-line me-1"></i>{{ $msg->cta_text }}</div>
                                @endif
                                <div class="wa-bubble-meta mt-2">
                                    <span class="wa-bubble-time">{{ $msg->created_at->format('h:i A') }}</span>
                                    @if($isOut)
                                        <span class="wa-tick {{ $msg->is_read ? 'read' : 'sent' }}">✓✓</span>
                                    @endif
                                </div>
                            </div>

                        @elseif($msg->type === 'media')
                            <div class="wa-media-bubble">
                                <div class="wa-media-preview">
                                    @if(str_contains($msg->mime_type ?? '', 'pdf'))
                                        <i class="ri-file-pdf-line text-danger"></i>
                                    @elseif(str_contains($msg->mime_type ?? '', 'image'))
                                        <i class="ri-image-line text-secondary"></i>
                                    @else
                                        <i class="ri-attachment-line"></i>
                                    @endif
                                </div>
                                @if($msg->body)
                                    <div class="wa-media-caption">{{ $msg->body }}</div>
                                @endif
                                <div class="wa-bubble-meta px-2 pb-1">
                                    <span class="wa-bubble-time">{{ $msg->created_at->format('h:i A') }}</span>
                                    @if($isOut)
                                        <span class="wa-tick {{ $msg->is_read ? 'read' : 'sent' }}">✓✓</span>
                                    @endif
                                </div>
                            </div>

                        @else
                            <div class="wa-bubble">
                                @if(!$isOut)
                                    <div class="wa-sender-label">{{ $lead->name }}</div>
                                @else
                                    <div class="wa-sender-label" style="color:#128C7E">{{ $msg->sender->name ?? 'You' }}</div>
                                @endif
                                {{ $msg->body }}
                                <div class="wa-bubble-meta">
                                    <span class="wa-bubble-time">{{ $msg->created_at->format('h:i A') }}</span>
                                    @if($isOut)
                                        <span class="wa-tick {{ $msg->is_read ? 'read' : 'sent' }}">✓✓</span>
                                    @endif
                                </div>
                            </div>
                        @endif
                    </div>
                @endforeach
            </div>

            {{-- Compose --}}
            <form method="POST" action="{{ route($routePrefix . '.whatsapp.send', $lead) }}" id="wa-compose-form">
                @csrf
                <div class="wa-compose">
                    <div class="wa-compose-box">
                        <button type="button" class="attach-btn" data-bs-toggle="modal" data-bs-target="#mediaModal"
                                title="Attach file">
                            <i class="ri-attachment-2"></i>
                        </button>
                        <button type="button" class="attach-btn" data-bs-toggle="modal" data-bs-target="#templateModal"
                                title="Use template">
                            <i class="ri-file-list-3-line"></i>
                        </button>
                        <textarea name="body" id="wa-input" rows="1"
                                  placeholder="Type a message…" required></textarea>
                    </div>
                    <button type="submit" class="wa-send-btn" title="Send">
                        <i class="ri-send-plane-fill"></i>
                    </button>
                </div>
            </form>
        </div>

        {{-- Right Info Panel --}}
        <div class="wa-right-panel">
            {{-- Lead Info --}}
            <div class="wa-panel-section">
                <h6>Lead Info</h6>
                <div class="wa-info-row">
                    <span class="label">Name</span>
                    <span class="value">{{ $lead->name }}</span>
                </div>
                <div class="wa-info-row">
                    <span class="label">Phone</span>
                    <span class="value">{{ $lead->phone }}</span>
                </div>
                <div class="wa-info-row">
                    <span class="label">Status</span>
                    <span class="value">
                    <span class="badge bg-primary">{{ $lead->status }}</span>
                </span>
                </div>
                <div class="wa-info-row">
                    <span class="label">Assigned</span>
                    <span class="value">{{ $lead->assignedTo->name ?? '—' }}</span>
                </div>
                <div class="wa-info-row">
                    <span class="label">Source</span>
                    <span class="value">{{ $lead->source->name ?? '—' }}</span>
                </div>
                <a href="{{ route($routePrefix . '.leads.show', $lead) }}"
                   class="btn btn-sm btn-outline-primary w-100 mt-2 rounded-3">
                    <i class="ri-eye-line me-1"></i> View Full Lead
                </a>
            </div>

            {{-- Quick Templates --}}
            <div class="wa-panel-section">
                <h6>Quick Templates</h6>
                @foreach($quickTemplates as $tpl)
                    <div class="wa-template-card" onclick="useTemplate('{{ addslashes($tpl->body) }}')">
                        <div class="t-name">{{ $tpl->name }}</div>
                        <div class="t-preview">{{ Str::limit($tpl->body, 55) }}</div>
                    </div>
                @endforeach
            </div>

            {{-- Message Stats --}}
            <div class="wa-panel-section">
                <h6>Conversation Stats</h6>
                <div class="wa-info-row">
                    <span class="label">Total Messages</span>
                    <span class="value fw-bold">{{ $messages->count() }}</span>
                </div>
                <div class="wa-info-row">
                    <span class="label">Sent</span>
                    <span class="value text-success">{{ $messages->where('direction', 'outbound')->count() }}</span>
                </div>
                <div class="wa-info-row">
                    <span class="label">Received</span>
                    <span class="value text-primary">{{ $messages->where('direction', 'inbound')->count() }}</span>
                </div>
                <div class="wa-info-row">
                    <span class="label">Last Activity</span>
                    <span class="value">{{ $messages->last()?->created_at->diffForHumans() ?? '—' }}</span>
                </div>
            </div>
        </div>
    </div>

    {{-- ── Modals ── --}}

    {{-- Template Picker --}}
    <div class="modal fade" id="templateModal" tabindex="-1">
        <div class="modal-dialog modal-lg">
            <div class="modal-content border-0 rounded-4 shadow">
                <div class="modal-header border-0 pb-0">
                    <h5 class="modal-title fw-bold">Send Template Message</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body pt-2">
                    <p class="text-secondary fs-13 mb-3">Select a pre-approved WhatsApp template to send.</p>
                    <div class="row g-3">
                        @foreach($templates as $tpl)
                            <div class="col-md-6">
                                <div class="card border rounded-3 h-100 cursor-pointer template-pick-card"
                                     data-body="{{ $tpl->body }}" data-name="{{ $tpl->name }}">
                                    <div class="card-body p-3">
                                        <div class="d-flex justify-content-between align-items-start mb-2">
                                            <span class="fw-semibold fs-14">{{ $tpl->name }}</span>
                                            <span class="badge bg-success-subtle text-success fs-11">{{ $tpl->category }}</span>
                                        </div>
                                        <p class="fs-13 text-secondary mb-0">{{ Str::limit($tpl->body, 90) }}</p>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Media Upload --}}
    <div class="modal fade" id="mediaModal" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content border-0 rounded-4 shadow">
                <div class="modal-header border-0">
                    <h5 class="modal-title fw-bold">Share Media</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <form method="POST" action="{{ route($routePrefix . '.whatsapp.media', $lead) }}" enctype="multipart/form-data">
                        @csrf
                        <div class="mb-3">
                            <label class="form-label fw-semibold">File <span class="text-danger">*</span></label>
                            <input type="file" name="media" class="form-control" accept=".pdf,.jpg,.jpeg,.png,.doc,.docx" required>
                            <div class="form-text">PDF, Image, or Document · Max 16 MB</div>
                        </div>
                        <div class="mb-3">
                            <label class="form-label fw-semibold">Caption (optional)</label>
                            <input type="text" name="caption" class="form-control" placeholder="e.g. Invoice INV-2026-00012">
                        </div>
                        <div class="d-grid">
                            <button type="submit" class="btn btn-success py-2">
                                <i class="ri-send-plane-line me-1"></i> Send File
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    {{-- Conversation Transfer --}}
    <div class="modal fade" id="transferModal" tabindex="-1">
        <div class="modal-dialog modal-sm">
            <div class="modal-content border-0 rounded-4 shadow">
                <div class="modal-header border-0">
                    <h5 class="modal-title fw-bold">Transfer Chat</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <form method="POST" action="{{ route($routePrefix . '.whatsapp.transfer', $lead) }}">
                        @csrf
                        <div class="mb-3">
                            <label class="form-label fw-semibold">Assign To</label>
                            <select name="user_id" class="form-select" required>
                                <option value="">— Select rep —</option>
                                @foreach($reps as $rep)
                                    <option value="{{ $rep->id }}">{{ $rep->name }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="mb-3">
                            <label class="form-label fw-semibold">Note (optional)</label>
                            <textarea name="note" class="form-control" rows="2" placeholder="Reason for transfer…"></textarea>
                        </div>
                        <div class="d-grid">
                            <button type="submit" class="btn btn-primary py-2">Transfer</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('script')
    <script>
        $(function () {
            // Scroll to bottom of chat
            const feed = document.getElementById('wa-messages');
            if (feed) feed.scrollTop = feed.scrollHeight;

            // Auto-grow textarea
            const inp = document.getElementById('wa-input');
            if (inp) {
                inp.addEventListener('input', function () {
                    this.style.height = 'auto';
                    this.style.height = Math.min(this.scrollHeight, 120) + 'px';
                });
                inp.addEventListener('keydown', function (e) {
                    if (e.key === 'Enter' && !e.shiftKey) {
                        e.preventDefault();
                        document.getElementById('wa-compose-form').submit();
                    }
                });
            }

            // Template picker
            document.querySelectorAll('.template-pick-card').forEach(card => {
                card.style.cursor = 'pointer';
                card.addEventListener('click', function () {
                    const body = this.dataset.body;
                    useTemplate(body);
                    bootstrap.Modal.getInstance(document.getElementById('templateModal'))?.hide();
                });
            });
        });

        function useTemplate(text) {
            const inp = document.getElementById('wa-input');
            if (inp) {
                inp.value = text;
                inp.style.height = 'auto';
                inp.style.height = Math.min(inp.scrollHeight, 120) + 'px';
                inp.focus();
            }
        }
    </script>
@endpush