<x-ui.modals type="modal" id="notesChatModal" title="Ghi chú" size="md" class="notes-chat-modal">
    <div x-data="notesChat()"
         @open-notes-chat.window="open($event.detail.bookingId, $event.detail.name)"
         class="notes-chat-scope">

        <div class="notes-chat-body" x-ref="chatBody">
            <template x-for="note in notes" :key="note.id">
                <div class="notes-chat-msg-row"
                     :class="note.is_own ? 'notes-chat-msg-row--own' : 'notes-chat-msg-row--other'">

                    {{-- Other: tên ở phía trước --}}
                    <div class="notes-chat-msg-meta" x-show="!note.is_own">
                        <span class="notes-chat-msg-user" x-text="note.user_name"></span>
                    </div>

                    {{-- Bubble + Actions --}}
                    <div class="notes-chat-msg-inner"
                         :class="note.is_own ? 'notes-chat-msg-inner--own' : 'notes-chat-msg-inner--other'">

                        {{-- Actions (other: trái, own: phải) --}}
                        <div class="notes-chat-msg-actions" x-show="note.is_editable && !note.is_own">
                            <button type="button" class="notes-chat-btn-icon" title="Sửa" @click="startEdit(note.id)">✏️</button>
                            <button type="button" class="notes-chat-btn-icon" title="Xóa" @click="confirmDelete(note.id)">🗑️</button>
                        </div>

                        <div class="notes-chat-msg-bubble"
                             :class="note.is_own ? 'notes-chat-msg-bubble--own' : ''">

                            <div x-show="editingId !== note.id" class="notes-chat-msg-content" x-text="note.content"></div>

                            <div x-show="editingId === note.id" class="notes-chat-msg-edit">
                                <textarea class="notes-chat-input" x-model="editingContent" rows="2" @keydown.escape="cancelEdit()"></textarea>
                                <div class="notes-chat-edit-actions">
                                    <button type="button" class="notes-chat-btn-icon" title="Lưu" @click="updateNote(note.id)" x-bind:disabled="!editingContent.trim() || sending"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="22" y1="2" x2="11" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/></svg></button>
                                    <button type="button" class="notes-chat-btn-icon" title="Hủy" @click="cancelEdit()">✕</button>
                                </div>
                            </div>

                            <div class="notes-chat-msg-footer">
                                <span class="notes-chat-msg-time" x-text="formatNoteTime(note.created_at !== note.updated_at ? note.updated_at : note.created_at)"></span>
                                <span x-show="note.created_at !== note.updated_at" class="notes-chat-msg-edited">đã sửa</span>
                            </div>
                        </div>

                        {{-- Actions (own: phải) --}}
                        <div class="notes-chat-msg-actions" x-show="note.is_editable && note.is_own">
                            <button type="button" class="notes-chat-btn-icon" title="Sửa" @click="startEdit(note.id)">✏️</button>
                            <button type="button" class="notes-chat-btn-icon" title="Xóa" @click="confirmDelete(note.id)">🗑️</button>
                        </div>
                    </div>

                    {{-- Own: tên ở phía sau --}}
                    <div class="notes-chat-msg-meta" x-show="note.is_own">
                        <span class="notes-chat-msg-user" x-text="note.user_name"></span>
                    </div>
                </div>
            </template>
            <div x-show="notes.length === 0" class="notes-chat-empty">Chưa có ghi chú nào</div>
        </div>

        <div class="notes-chat-footer">
            <textarea class="notes-chat-input" x-model="newContent" rows="2" placeholder="Nhập ghi chú..." @keydown.enter.prevent="addNote()" x-bind:disabled="sending"></textarea>
            <button type="button" class="notes-chat-btn-send-icon" @click="addNote()" x-bind:disabled="!newContent.trim() || sending" title="Gửi">
                <svg x-show="!sending" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="22" y1="2" x2="11" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/></svg>
                <span x-show="sending" class="notes-chat-btn-loading">...</span>
            </button>
        </div>

        <x-modals.confirm-modal
            id="notesDeleteConfirm"
            title="Xác nhận xóa"
            message="Bạn có chắc muốn xóa ghi chú này?"
            level="warning"
            confirm-label="Xóa"
            onConfirm="confirmedDelete"
        />
    </div>
</x-ui.modals>