@extends('crm.layouts.master')
@section('title', 'Messages')
@section('page-css')
<style>
/* Paces sets .content-page { min-height: 1900px } — that wrecks a full-height chat. */
body.crm-chat-page { overflow: hidden; }
body.crm-chat-page .content-page {
    min-height: 0 !important;
    height: calc(100vh - 88px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding-bottom: 0 !important;
}
body.crm-chat-page .content-page > .container-fluid {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding-top: .75rem;
    padding-bottom: .75rem;
}
body.crm-chat-page .footer { display: none !important; }

.internal-chat-wrap {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
}
.internal-chat-page-head { flex-shrink: 0; margin-bottom: .75rem; }
.internal-chat-page-kicker {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--bs-secondary-color);
    margin-bottom: .15rem;
}
.internal-chat-page-head h3 {
    margin: 0;
    font-size: 1.65rem;
    font-weight: 700;
}
.internal-chat-page {
    display: grid;
    grid-template-columns: minmax(260px, 320px) minmax(0, 1fr);
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    background: var(--bs-secondary-bg, #fff);
    border: 1px solid var(--bs-border-color);
    border-radius: 14px;
    overflow: hidden;
}
.internal-chat-page__list {
    display: flex;
    flex-direction: column;
    min-height: 0;
    min-width: 0;
    border-right: 1px solid var(--bs-border-color);
    background: var(--bs-tertiary-bg, #f8f9fa);
}
.internal-chat-page__tools {
    padding: .75rem;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    flex-shrink: 0;
}
.internal-chat-section-title {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--bs-secondary-color);
}
.internal-chat-tabs {
    display: flex;
    gap: .4rem;
}
.internal-chat-tab {
    flex: 1;
    border: 0;
    border-radius: 999px;
    padding: .4rem .55rem;
    background: #eef0f4;
    color: #7c69ef;
    font-size: .82rem;
    font-weight: 650;
    line-height: 1.2;
    cursor: pointer;
}
.internal-chat-tab.is-active {
    background: #7c69ef;
    color: #fff;
}
.internal-chat-search {
    position: relative;
}
.internal-chat-search i {
    position: absolute;
    left: .7rem;
    top: 50%;
    transform: translateY(-50%);
    color: #8b93a7;
    pointer-events: none;
}
.internal-chat-search input {
    padding-left: 2rem;
    background: #eef3f8;
    border: 0;
    border-radius: 10px;
}
.internal-chat-reply-filters {
    display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.35rem;
}
.internal-chat-reply-filters[hidden] { display:none !important; }
.internal-chat-reply-filter {
    display:flex; align-items:center; justify-content:space-between; gap:.35rem;
    min-width:0; padding:.35rem .5rem; border:1px solid var(--bs-border-color);
    border-radius:.45rem; background:var(--bs-body-bg,#fff); color:var(--bs-secondary-color);
    font-size:.68rem; font-weight:700; cursor:pointer;
}
.internal-chat-reply-filter.is-active {
    border-color:#7c69ef; background:rgba(124,105,239,.1); color:#6552d9;
}
.internal-chat-reply-count {
    display:inline-flex; align-items:center; justify-content:center; min-width:1.35rem; height:1.2rem;
    padding:0 .3rem; border-radius:999px; background:var(--bs-tertiary-bg); font-size:.62rem;
}
.chat-reply-status {
    display:inline-flex; align-items:center; gap:.3rem; width:max-content; max-width:100%;
    padding:.2rem .48rem; border-radius:999px; font-size:.63rem; font-weight:750; white-space:nowrap;
}
.chat-reply-status::before { content:''; width:6px; height:6px; border-radius:50%; flex:none; }
.chat-reply-status.is-awaiting { color:#b42318; background:#fee4e2; }
.chat-reply-status.is-awaiting::before { background:#d92d20; }
.chat-reply-status.is-answered { color:#067647; background:#dcfae6; }
.chat-reply-status.is-answered::before { background:#12b76a; }
.chat-reply-status.is-empty { color:#667085; background:#f2f4f7; }
.chat-reply-status.is-empty::before { background:#98a2b3; }
.agent-chat__row-top { display:flex; align-items:center; justify-content:space-between; gap:.45rem; }
.agent-chat__row-top strong { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.internal-chat-page .agent-chat__row.needs-reply {
    border-left:3px solid #d92d20;
    background:color-mix(in srgb, #d92d20 7%, transparent);
}
.internal-chat-page .agent-chat__head { display:flex; align-items:center; gap:.65rem; }
.internal-chat-page .agent-chat__head-text { min-width:0; flex:1; }
.internal-chat-page .agent-chat__head > .chat-reply-status { margin-left:auto; }
.internal-chat-page__inbox { flex: 1 1 auto; overflow-y: auto; min-height: 0; }
.internal-chat-page__thread {
    display: flex;
    flex-direction: column;
    min-height: 0;
    min-width: 0;
    background: var(--bs-body-bg, #fff);
}
.internal-chat-page__thread .agent-chat__head { flex-shrink: 0; background: #fff; }
.internal-chat-page__thread .agent-chat__kicker { color: #7c69ef; font-weight: 700; }
.internal-chat-page .agent-chat__empty-icon {
    width: 72px; height: 72px; margin: 0 auto .75rem;
    border-radius: 50%; background: #eef0f4; color: #9aa3b5;
    display: flex; align-items: center; justify-content: center; font-size: 2rem;
}
.internal-chat-page .agent-chat__row {
    display: flex; align-items: center; gap: .7rem;
}
.internal-chat-page .agent-chat__avatar {
    width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
    background: #e8e4fb; color: #7c69ef;
    display: flex; align-items: center; justify-content: center;
    font-size: .78rem; font-weight: 700;
}
.internal-chat-page .agent-chat__row-text { min-width: 0; flex: 1; }
.internal-chat-page__thread .agent-chat__body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}
.internal-chat-page__thread .agent-chat__form { flex-shrink: 0; }
.internal-chat-page .agent-chat__row.is-active {
    background: color-mix(in srgb, var(--bs-primary, #7c69ef) 16%, transparent);
}
.internal-chat-people { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.internal-chat-people[hidden] { display: none !important; }
.internal-chat-people__results { overflow-y: auto; flex: 1; }
.internal-chat-people__label {
    font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    color: var(--bs-secondary-color); padding: .6rem .9rem .2rem;
}
.internal-chat-chip {
    display: inline-flex; align-items: center; gap: .3rem;
    background: color-mix(in srgb, var(--bs-primary, #7c69ef) 12%, transparent);
    border-radius: 999px; padding: .15rem .55rem; margin: .15rem; font-size: .8rem;
}
.internal-chat-chip button { border: 0; background: none; cursor: pointer; line-height: 1; }
.chat-page-back { display: none !important; }
@media (max-width: 768px) {
    body.crm-chat-page .content-page { height: calc(100vh - 72px); }
    .internal-chat-page { grid-template-columns: 1fr; }
    .internal-chat-page.is-thread-open .internal-chat-page__list { display: none; }
    .internal-chat-page:not(.is-thread-open) .internal-chat-page__thread { display: none; }
    .chat-page-back:not([hidden]) { display: inline-flex !important; }
}

/* Match the Paces apps-chat composition while retaining CRM chat tabs. */
.internal-chat-page-head { display:flex; align-items:center; min-height:42px; margin-bottom:1rem; }
.internal-chat-page-kicker, .internal-chat-section-title { display:none; }
.internal-chat-page-head h3 { font-size:1.25rem; }
.internal-chat-page {
    grid-template-columns:minmax(300px,340px) minmax(0,1fr); gap:.25rem;
    background:transparent; border:0; border-radius:0; overflow:visible;
}
.internal-chat-page__list, .internal-chat-page__thread {
    background:var(--bs-card-bg,#fff); border:1px solid var(--bs-border-color); overflow:hidden;
}
.internal-chat-page__list { border-radius:.5rem 0 0 .5rem; border-right:1px solid var(--bs-border-color); }
.internal-chat-page__thread { position:relative; border-radius:0 .5rem .5rem 0; }
.internal-chat-page__tools {
    padding:1rem; gap:.75rem; background:var(--bs-card-bg,#fff);
    border-bottom:1px solid var(--bs-border-color);
}
.internal-chat-tabs {
    display:grid; grid-template-columns:repeat(3,1fr); gap:.25rem; padding:.2rem;
    border-radius:.45rem; background:var(--bs-tertiary-bg);
}
.internal-chat-tab {
    padding:.45rem .35rem; border-radius:.35rem; background:transparent;
    color:var(--bs-secondary-color,#667085); font-size:.75rem; font-weight:600;
    appearance:none; -webkit-appearance:none; box-shadow:none;
}
.internal-chat-tab.is-active,
.internal-chat-tab.is-active:hover,
.internal-chat-tab.is-active:focus {
    color:#fff!important; background:#7c69ef!important; border-color:#7c69ef!important;
    box-shadow:0 2px 5px rgba(64,52,148,.24)!important; outline:0;
}
.internal-chat-search input {
    height:38px; padding-left:2.35rem; border:1px solid var(--bs-border-color);
    background:var(--bs-tertiary-bg); border-radius:.375rem;
}
.internal-chat-search i { left:.85rem; }
.internal-chat-page__inbox { padding:.5rem; }
.internal-chat-page .agent-chat__row {
    min-height:62px; gap:.65rem; padding:.65rem .7rem; border:0; border-radius:.4rem; text-align:left;
}
.internal-chat-page .agent-chat__row + .agent-chat__row { margin-top:.15rem; }
.internal-chat-page .agent-chat__row:hover { background:var(--bs-tertiary-bg); }
.internal-chat-page .agent-chat__row.is-active { background:rgba(var(--bs-primary-rgb),.12); box-shadow:none; }
.internal-chat-page .agent-chat__row.is-unread strong { font-weight:700; }
.internal-chat-page .agent-chat__row-top strong { font-size:.875rem; line-height:1.2; }
.internal-chat-page .agent-chat__row-preview { font-size:.72rem; margin-top:.25rem; }
.agent-chat__row-side {
    display:flex; flex-direction:column; align-items:flex-end; align-self:stretch;
    justify-content:center; gap:.25rem; margin-left:auto; flex-shrink:0;
}
.agent-chat__row-time { color:var(--bs-secondary-color); font-size:.65rem; white-space:nowrap; }
.internal-chat-page__thread .agent-chat__head {
    min-height:72px; padding:.9rem 1rem; background:var(--bs-card-bg,#fff);
    border-bottom:1px solid var(--bs-border-color);
}
.internal-chat-page__thread .agent-chat__title { font-size:1rem; font-weight:650; }
.internal-chat-page__thread .agent-chat__kicker {
    text-transform:none; letter-spacing:0; color:var(--bs-secondary-color); font-size:.72rem;
}
.internal-chat-page__thread .agent-chat__kicker::before {
    content:''; display:inline-block; width:7px; height:7px; border-radius:50%;
    margin-right:.35rem; background:var(--bs-success); vertical-align:1px;
}
.internal-chat-page__thread .agent-chat__body {
    padding:.75rem 1rem 5.25rem; gap:0; background:#fcfaf8;
}
.internal-chat-page .agent-chat__msg {
    display:flex; align-items:flex-start; gap:.55rem; max-width:78%; margin:.55rem 0;
}
.internal-chat-page .agent-chat__msg.is-mine {
    align-self:flex-end; flex-direction:row-reverse; text-align:right;
}
.agent-chat__message-content { min-width:0; }
.internal-chat-page .agent-chat__bubble {
    position:relative; padding:.6rem .85rem; border-radius:16px 16px 16px 4px; background:#fdeade;
    color:#654c43; font-size:.875rem; font-weight:500; line-height:1.45;
    box-shadow:0 1px 1px rgba(101,76,67,.04);
}
.internal-chat-page .agent-chat__bubble::after {
    content:''; position:absolute; left:0; bottom:-7px; width:14px; height:14px;
    background:#fdeade; transform:skewY(-38deg); clip-path:polygon(0 0,100% 0,0 100%);
}
.internal-chat-page .agent-chat__msg.is-mine .agent-chat__bubble {
    border-radius:16px 16px 4px 16px; background:#e7eef5; color:#40566d;
    box-shadow:0 1px 1px rgba(64,86,109,.04);
}
.internal-chat-page .agent-chat__msg.is-mine .agent-chat__bubble::after {
    left:auto; right:0; background:#e7eef5; transform:skewY(38deg);
    clip-path:polygon(0 0,100% 0,100% 100%);
}
.internal-chat-page .agent-chat__meta {
    margin-top:.3rem; font-size:.68rem; color:#a77b68;
}
.internal-chat-page .agent-chat__msg.is-mine .agent-chat__meta { color:#71869d; }
.internal-chat-page__thread .agent-chat__form {
    position:absolute; left:0; right:0; bottom:0; z-index:2; padding:1rem;
    border-top:1px dashed var(--bs-border-color); background:var(--bs-secondary-bg); gap:.5rem;
}
.internal-chat-page__thread .agent-chat__input {
    height:40px; padding:.5rem .85rem; border-radius:.375rem;
    background:var(--bs-tertiary-bg); border-color:var(--bs-border-color);
}
.internal-chat-page__thread .agent-chat__send {
    width:auto; min-width:92px; height:40px; padding:0 1rem; border-radius:.375rem;
    display:inline-flex; align-items:center; justify-content:center; gap:.4rem;
}
@media (max-width:768px) {
    .internal-chat-page { grid-template-columns:1fr; gap:0; }
    .internal-chat-page__list, .internal-chat-page__thread { border-radius:.5rem; }
    .internal-chat-page .agent-chat__msg { max-width:92%; }
}
</style>
@endsection
@section('main-content')
<div class="internal-chat-wrap">
<div class="internal-chat-page-head">
    <div class="internal-chat-page-kicker">Internal chat</div>
    <h3>Chat</h3>
</div>
<div class="internal-chat-page" id="internalChatPage">
    <aside class="internal-chat-page__list">
        <div class="internal-chat-page__tools">
            <div class="internal-chat-section-title">Conversations</div>
            <div class="internal-chat-tabs" role="tablist">
                <button type="button" class="internal-chat-tab {{ $chatTab === 'office' ? 'is-active' : '' }}" data-tab="office" aria-selected="{{ $chatTab === 'office' ? 'true' : 'false' }}">Office</button>
                <button type="button" class="internal-chat-tab {{ $chatTab === 'clients' ? 'is-active' : '' }}" data-tab="clients" aria-selected="{{ $chatTab === 'clients' ? 'true' : 'false' }}">Clients</button>
                <button type="button" class="internal-chat-tab {{ $chatTab === 'groups' ? 'is-active' : '' }}" data-tab="groups" aria-selected="{{ $chatTab === 'groups' ? 'true' : 'false' }}">Groups</button>
            </div>
            <div class="internal-chat-search">
                <i class="ti ti-search"></i>
                <input type="search" class="form-control form-control-sm" id="chatListSearch" placeholder="{{ $chatTab === 'groups' ? 'Search groups…' : ($chatTab === 'clients' ? 'Search portal clients…' : 'Search office members…') }}">
            </div>
            <div class="internal-chat-reply-filters" id="chatReplyFilters" aria-label="Filter client conversations" {{ $chatTab === 'clients' ? '' : 'hidden' }}>
                <button type="button" class="internal-chat-reply-filter is-active" data-reply-filter="all" aria-pressed="true">All <span class="internal-chat-reply-count" data-reply-count="all">0</span></button>
                <button type="button" class="internal-chat-reply-filter" data-reply-filter="awaiting_reply" aria-pressed="false">Awaiting <span class="internal-chat-reply-count" data-reply-count="awaiting_reply">0</span></button>
                <button type="button" class="internal-chat-reply-filter" data-reply-filter="answered" aria-pressed="false">Answered <span class="internal-chat-reply-count" data-reply-count="answered">0</span></button>
                <button type="button" class="internal-chat-reply-filter" data-reply-filter="no_messages" aria-pressed="false">No messages <span class="internal-chat-reply-count" data-reply-count="no_messages">0</span></button>
            </div>
            @if($isAdmin)
            <button type="button" class="btn btn-outline-primary btn-sm" id="chatGroupBtn" hidden>New group</button>
            @endif
        </div>
        <div class="internal-chat-page__inbox" id="chatInbox"></div>
    </aside>
    <section class="internal-chat-page__thread" id="chatThread">
        <div class="agent-chat__head">
            <button type="button" class="agent-chat__back chat-page-back" id="chatBackBtn" hidden aria-label="Back to list">
                <i class="ti ti-chevron-left"></i>
            </button>
            <div class="agent-chat__head-text">
                <div class="agent-chat__kicker" id="chatKicker">Messages</div>
                <div class="agent-chat__title" id="chatTitle">Inbox</div>
            </div>
            <span class="chat-reply-status is-empty" id="chatReplyStatus" hidden></span>
            @if($isAdmin)
            <button type="button" class="btn btn-sm btn-light" id="chatManageBtn" hidden>Manage group</button>
            @endif
        </div>
        <div class="agent-chat__body" id="chatBody">
            <div class="agent-chat__empty">
                <div class="agent-chat__empty-icon"><i class="ti ti-message-dots"></i></div>
                Select someone to start messaging.
            </div>
        </div>
        <form class="agent-chat__form" id="chatForm" autocomplete="off" hidden>
            <input type="text" class="agent-chat__input" id="chatInput" maxlength="2000" placeholder="Type a message…">
            <button type="submit" class="agent-chat__send" aria-label="Send">Send <i class="ti ti-send-2"></i></button>
        </form>
    </section>
</div>
</div>

@if($isAdmin)
<div class="modal fade" id="chatGroupModal" tabindex="-1">
    <div class="modal-dialog modal-lg modal-dialog-scrollable">
        <form class="modal-content" id="chatGroupForm">
            <div class="modal-header">
                <h5 class="modal-title" id="chatGroupModalTitle">New group</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <input type="hidden" id="chatGroupId">
                <div class="mb-3">
                    <label class="form-label">Group name</label>
                    <input type="text" class="form-control" id="chatGroupName" maxlength="80" required>
                </div>
                <div class="mb-3">
                    <label class="form-label">Office members</label>
                    <div class="form-text mb-1">You are included automatically.</div>
                    <div id="chatGroupStaff" class="border rounded p-2" style="max-height:180px;overflow:auto"></div>
                </div>
                <div class="mb-2">
                    <label class="form-label">Clients</label>
                    <input type="search" class="form-control form-control-sm mb-2" id="chatGroupClientSearch" placeholder="Search clients to add…">
                    <div id="chatGroupClientResults"></div>
                    <div id="chatGroupClientChips" class="mt-2"></div>
                </div>
            </div>
            <div class="modal-footer justify-content-between">
                <button type="button" class="btn btn-outline-danger" id="chatGroupDelete" hidden>Delete group</button>
                <div class="d-flex gap-2">
                    <button type="button" class="btn btn-light" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary">Save group</button>
                </div>
            </div>
        </form>
    </div>
</div>
@endif
@endsection
@section('page-js')
<script src="{{ asset('js/internal-chat.js') }}?v=19"></script>
<script>
(function () {
    var urls = {
        inbox: @json(route('crm.chat.inbox')),
        clientsInbox: @json($isAdmin ? route('crm.chat.inbox').'?scope=all-clients' : null),
        people: @json(route('crm.chat.people')),
        direct: @json(route('crm.chat.direct')),
        groups: @json(route('crm.chat.groups.store')),
        messages: function (id) { return @json(url('/crm/chat')) + '/' + id + '/messages'; },
        send: function (id) { return @json(url('/crm/chat')) + '/' + id + '/messages'; },
        read: function (id) { return @json(url('/crm/chat')) + '/' + id + '/read'; },
        groupUpdate: function (id) { return @json(url('/crm/chat/groups')) + '/' + id; },
        groupDelete: function (id) { return @json(url('/crm/chat/groups')) + '/' + id + '/delete'; }
    };

    @if($isAdmin)
    (function setupGroupModal() {
        var modalEl = document.getElementById('chatGroupModal');
        var modal = modalEl ? new bootstrap.Modal(modalEl) : null;
        var selectedLeads = {};
        var csrf = document.querySelector('meta[name="csrf-token"]');
        function headers(json) {
            var h = { Accept: 'application/json', 'X-Requested-With': 'XMLHttpRequest' };
            if (csrf) h['X-CSRF-TOKEN'] = csrf.getAttribute('content');
            if (json) h['Content-Type'] = 'application/json';
            return h;
        }
        function renderLeadChips() {
            var box = document.getElementById('chatGroupClientChips');
            var ids = Object.keys(selectedLeads);
            box.innerHTML = ids.map(function (id) {
                return '<span class="internal-chat-chip">' + selectedLeads[id]
                    + ' <button type="button" data-remove-lead="' + id + '">&times;</button></span>';
            }).join('') || '<div class="text-muted small">No clients added.</div>';
        }
        document.getElementById('chatGroupClientChips').addEventListener('click', function (e) {
            var btn = e.target.closest('[data-remove-lead]');
            if (!btn) return;
            delete selectedLeads[btn.getAttribute('data-remove-lead')];
            renderLeadChips();
        });
        document.getElementById('chatGroupClientResults').addEventListener('click', function (e) {
            var row = e.target.closest('[data-lead]');
            if (!row) return;
            selectedLeads[row.getAttribute('data-lead')] = row.getAttribute('data-name');
            renderLeadChips();
        });
        var searchTimer = null;
        document.getElementById('chatGroupClientSearch').addEventListener('input', function () {
            var q = this.value;
            clearTimeout(searchTimer);
            searchTimer = setTimeout(async function () {
                var res = await fetch(urls.people + '?q=' + encodeURIComponent(q), { headers: headers(false), credentials: 'same-origin' });
                var data = await res.json();
                document.getElementById('chatGroupClientResults').innerHTML = (data.clients || []).map(function (c) {
                    return '<button type="button" class="btn btn-sm btn-light me-1 mb-1" data-lead="' + c.id + '" data-name="' + String(c.name).replace(/"/g, '') + '">+ ' + c.name + '</button>';
                }).join('');
            }, 250);
        });
        window.openChatGroupModal = async function (conversation) {
            document.getElementById('chatGroupId').value = conversation && conversation.type === 'group' ? conversation.id : '';
            document.getElementById('chatGroupName').value = conversation && conversation.type === 'group' ? (conversation.name || '') : '';
            document.getElementById('chatGroupModalTitle').textContent = conversation && conversation.type === 'group' ? 'Manage group' : 'New group';
            document.getElementById('chatGroupDelete').hidden = !(conversation && conversation.type === 'group');
            selectedLeads = {};
            if (conversation && conversation.members) {
                conversation.members.filter(function (m) { return m.type === 'lead'; }).forEach(function (m) {
                    selectedLeads[m.id] = m.name;
                });
            }
            renderLeadChips();
            var res = await fetch(urls.people, { headers: headers(false), credentials: 'same-origin' });
            var data = await res.json();
            var selectedUsers = {};
            if (conversation && conversation.members) {
                conversation.members.filter(function (m) { return m.type === 'user'; }).forEach(function (m) { selectedUsers[m.id] = true; });
            }
            document.getElementById('chatGroupStaff').innerHTML = (data.office_members || data.staff || []).map(function (s) {
                var checked = selectedUsers[s.id] ? ' checked' : '';
                return '<label class="d-block mb-1"><input type="checkbox" class="form-check-input me-1" name="user_ids" value="' + s.id + '"' + checked + '> ' + s.name + ' <span class="text-muted">(' + s.meta + ')</span></label>';
            }).join('') || '<div class="text-muted small">No other office members found.</div>';
            modal.show();
        };
        document.getElementById('chatGroupForm').addEventListener('submit', async function (e) {
            e.preventDefault();
            var id = document.getElementById('chatGroupId').value;
            var userIds = Array.prototype.map.call(document.querySelectorAll('#chatGroupStaff input:checked'), function (el) { return parseInt(el.value, 10); });
            var leadIds = Object.keys(selectedLeads).map(function (v) { return parseInt(v, 10); });
            var payload = { name: document.getElementById('chatGroupName').value, user_ids: userIds, lead_ids: leadIds };
            var url = id ? urls.groupUpdate(id) : urls.groups;
            var res = await fetch(url, { method: 'POST', headers: headers(true), credentials: 'same-origin', body: JSON.stringify(payload) });
            var data = await res.json().catch(function () { return {}; });
            if (!res.ok) {
                alert(data.message || (data.errors && data.errors.members && data.errors.members[0]) || 'Could not save group');
                return;
            }
            modal.hide();
            if (data.id) {
                window.location.href = @json(url('/crm/chat/groups')) + '?open=' + encodeURIComponent(data.id);
                return;
            }
            window.location.href = @json(url('/crm/chat/groups'));
        });
        document.getElementById('chatGroupDelete').addEventListener('click', async function () {
            var id = document.getElementById('chatGroupId').value;
            if (!id || !confirm('Delete this group and its messages?')) return;
            var res = await fetch(urls.groupDelete(id), { method: 'POST', headers: headers(true), credentials: 'same-origin' });
            if (!res.ok) { alert('Could not delete group'); return; }
            modal.hide();
            window.location.reload();
        });
    })();
    @endif

    window.initInternalChat({
        page: true,
        isAdmin: @json($isAdmin),
        initialTab: @json($chatTab),
        chatPages: {
            office: @json(route('crm.chat.office')),
            clients: @json(route('crm.chat.clients')),
            groups: @json(route('crm.chat.groups'))
        },
        tabs: '.internal-chat-tab',
        urls: urls,
        inboxEl: '#chatInbox',
        threadEl: '#chatThread',
        bodyEl: '#chatBody',
        titleEl: '#chatTitle',
        kickerEl: '#chatKicker',
        formEl: '#chatForm',
        inputEl: '#chatInput',
        peopleEl: null,
        peopleInputEl: null,
        peopleResultsEl: null,
        newEl: null,
        groupEl: '#chatGroupBtn',
        manageEl: '#chatManageBtn',
        backEl: '#chatBackBtn',
        composerEl: '#chatForm',
        searchEl: '#chatListSearch',
        replyFilterEl: '#chatReplyFilters',
        replyStatusEl: '#chatReplyStatus',
        toastEl: '#agentChatToast',
        toastTitleEl: '#agentChatToastTitle',
        toastPreviewEl: '#agentChatToastPreview',
        toastOpenEl: '#agentChatToastOpen',
        toastDismissEl: '#agentChatToastDismiss'
    });
})();
</script>
@endsection