From 4b84528e529968803f2b6c0737180963e5ebc226 Mon Sep 17 00:00:00 2001
From: mirivlad <mirivlad@lms.local>
Date: Mon, 30 Mar 2026 12:15:52 +0800
Subject: [PATCH] =?UTF-8?q?Feat:=20=D0=A2=D0=B5=D0=B3=D0=B8=20=D0=B3=D1=80?=
 =?UTF-8?q?=D1=83=D0=BF=D0=BF=20=D0=BA=D0=B0=D0=BA=20=D0=B2=20WordPress?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

✅ Синие бейджи с названиями групп
✅ Крестик для удаления (краснеет при наведении)
✅ CSS стили для TomSelect
✅ Компонент для мультивыбора

Co-authored-by: Qwen-Coder <qwen-coder@alibabacloud.com>
---
 .../components/searchable-select.blade.php    | 27 +++++++++++++++++--
 1 file changed, 25 insertions(+), 2 deletions(-)

diff --git a/resources/views/components/searchable-select.blade.php b/resources/views/components/searchable-select.blade.php
index 7ec0d51..4bb76b4 100644
--- a/resources/views/components/searchable-select.blade.php
+++ b/resources/views/components/searchable-select.blade.php
@@ -5,6 +5,26 @@
 
 @push('scripts')
 <link href="https://cdn.jsdelivr.net/npm/tom-select@2.3.1/dist/css/tom-select.css" rel="stylesheet">
+<style>
+.tom-select .item {
+    background: #0d6efd !important;
+    color: white !important;
+    border-radius: 0.25rem !important;
+    padding: 0.25rem 0.5rem !important;
+    margin: 0.125rem !important;
+    display: inline-flex !important;
+    align-items: center !important;
+}
+.tom-select .item .remove {
+    color: white !important;
+    margin-left: 0.5rem !important;
+    font-size: 1.2rem !important;
+    line-height: 1 !important;
+}
+.tom-select .item .remove:hover {
+    color: #ffc107 !important;
+}
+</style>
 <script src="https://cdn.jsdelivr.net/npm/tom-select@2.3.1/dist/js/tom-select.complete.min.js"></script>
 <script>
 document.addEventListener('DOMContentLoaded', function() {
@@ -15,7 +35,7 @@ document.addEventListener('DOMContentLoaded', function() {
         placeholder: '{{ $placeholder }}',
         preload: false,
         maxOptions: null,
-        {{ $multiple ? 'persist: false, hideSelected: true,' : '' }}
+        {{ $multiple ? 'persist: false, hideSelected: true, create: false,' : '' }}
         load: function(query, callback) {
             if (query.length < 2) return callback();
             
@@ -32,7 +52,10 @@ document.addEventListener('DOMContentLoaded', function() {
                 return '<div>' + escape(data.text) + '</div>';
             },
             item: function(data, escape) {
-                return '<div>' + escape(data.text) + '</div>';
+                return '<div class="item">' + 
+                       escape(data.text) + 
+                       '<a href="javascript:void(0)" class="remove">&times;</a>' +
+                       '</div>';
             }
         },
         onChange: function(value) {