Merge branch '2025/ntctien/14567_edit_template' into 'dev'

2025/ntctien/14567 edit template

See merge request !4

-<p align="center"><a href="https://laravel.com" target="_blank"><img src="https://raw.githubusercontent.com/laravel/art/master/logo-lockup/5%20SVG/2%20CMYK/1%20Full%20Color/laravel-logolockup-cmyk-red.svg" width="400"></a></p>
-
-<p align="center">
-<a href="https://travis-ci.org/laravel/framework"><img src="https://travis-ci.org/laravel/framework.svg" alt="Build Status"></a>
-<a href="https://packagist.org/packages/laravel/framework"><img src="https://img.shields.io/packagist/dt/laravel/framework" alt="Total Downloads"></a>
-<a href="https://packagist.org/packages/laravel/framework"><img src="https://img.shields.io/packagist/v/laravel/framework" alt="Latest Stable Version"></a>
-<a href="https://packagist.org/packages/laravel/framework"><img src="https://img.shields.io/packagist/l/laravel/framework" alt="License"></a>
-</p>
-
-## About Laravel
-
-Laravel is a web application framework with expressive, elegant syntax. We believe development must be an enjoyable and creative experience to be truly fulfilling. Laravel takes the pain out of development by easing common tasks used in many web projects, such as:
-
-- [Simple, fast routing engine](https://laravel.com/docs/routing).
-- [Powerful dependency injection container](https://laravel.com/docs/container).
-- Multiple back-ends for [session](https://laravel.com/docs/session) and [cache](https://laravel.com/docs/cache) storage.
-- Expressive, intuitive [database ORM](https://laravel.com/docs/eloquent).
-- Database agnostic [schema migrations](https://laravel.com/docs/migrations).
-- [Robust background job processing](https://laravel.com/docs/queues).
-- [Real-time event broadcasting](https://laravel.com/docs/broadcasting).
-
-Laravel is accessible, powerful, and provides tools required for large, robust applications.
-
-## Learning Laravel
-
-Laravel has the most extensive and thorough [documentation](https://laravel.com/docs) and video tutorial library of all modern web application frameworks, making it a breeze to get started with the framework.
-
-If you don't feel like reading, [Laracasts](https://laracasts.com) can help. Laracasts contains over 1500 video tutorials on a range of topics including Laravel, modern PHP, unit testing, and JavaScript. Boost your skills by digging into our comprehensive video library.
-
-## Laravel Sponsors
-
-We would like to extend our thanks to the following sponsors for funding Laravel development. If you are interested in becoming a sponsor, please visit the Laravel [Patreon page](https://patreon.com/taylorotwell).
-
-### Premium Partners
-
-- **[Vehikl](https://vehikl.com/)**
-- **[Tighten Co.](https://tighten.co)**
-- **[Kirschbaum Development Group](https://kirschbaumdevelopment.com)**
-- **[64 Robots](https://64robots.com)**
-- **[Cubet Techno Labs](https://cubettech.com)**
-- **[Cyber-Duck](https://cyber-duck.co.uk)**
-- **[Many](https://www.many.co.uk)**
-- **[Webdock, Fast VPS Hosting](https://www.webdock.io/en)**
-- **[DevSquad](https://devsquad.com)**
-- **[Curotec](https://www.curotec.com/services/technologies/laravel/)**
-- **[OP.GG](https://op.gg)**
-- **[WebReinvent](https://webreinvent.com/?utm_source=laravel&utm_medium=github&utm_campaign=patreon-sponsors)**
-- **[Lendio](https://lendio.com)**
-
-## Contributing
-
-Thank you for considering contributing to the Laravel framework! The contribution guide can be found in the [Laravel documentation](https://laravel.com/docs/contributions).
-
-## Code of Conduct
-
-In order to ensure that the Laravel community is welcoming to all, please review and abide by the [Code of Conduct](https://laravel.com/docs/contributions#code-of-conduct).
-
-## Security Vulnerabilities
-
-If you discover a security vulnerability within Laravel, please send an e-mail to Taylor Otwell via [taylor@laravel.com](mailto:taylor@laravel.com). All security vulnerabilities will be promptly addressed.
-
-## License
-
-The Laravel framework is open-sourced software licensed under the [MIT license](https://opensource.org/licenses/MIT).
+- **run project**
+    php artisan serve
+    http://127.0.0.1:8000/ocr
+
+- **create database**
+    CREATE TABLE `mst_template` (
+    `id` INT(11) NOT NULL AUTO_INCREMENT,
+    `tpl_name` VARCHAR(50) NOT NULL COLLATE 'utf8mb4_general_ci',
+    `tpl_text` VARCHAR(50) NOT NULL COLLATE 'utf8mb4_general_ci',
+    `tpl_xy` VARCHAR(50) NOT NULL COLLATE 'utf8mb4_general_ci',
+    `in_date` DATETIME NOT NULL DEFAULT current_timestamp(),
+    `up_date` DATETIME NOT NULL DEFAULT current_timestamp() ON UPDATE current_timestamp(),
+    PRIMARY KEY (`id`) USING BTREE,
+    UNIQUE INDEX `tpl_name` (`tpl_name`) USING BTREE
+    )
+    COLLATE='utf8mb4_general_ci'
+    ENGINE=MyISAM
+    AUTO_INCREMENT=11
+    ;
+    
+  CREATE TABLE `dt_template` (
+  `tpl_detail_id` INT(11) NOT NULL AUTO_INCREMENT,
+  `tpl_id` INT(11) NOT NULL,
+  `field_name` VARCHAR(50) NULL DEFAULT NULL COLLATE 'utf8mb4_general_ci',
+  `field_xy` VARCHAR(50) NULL DEFAULT NULL COLLATE 'utf8mb4_general_ci',
+  `in_date` DATETIME NOT NULL DEFAULT current_timestamp(),
+  `up_date` DATETIME NOT NULL DEFAULT current_timestamp() ON UPDATE current_timestamp(),
+  PRIMARY KEY (`tpl_detail_id`) USING BTREE,
+  INDEX `tpl_id` (`tpl_id`) USING BTREE
+  )
+  COLLATE='utf8mb4_general_ci'
+  ENGINE=MyISAM
+  AUTO_INCREMENT=7
+  ;
+
+
+
+- /ocrpdf/app/Services/OCR/read_pdf.py : read pdf

+from paddleocr import PaddleOCR
+from pdf2image import convert_from_path
+import os
+import time
+import numpy as np
+import json
+from pathlib import Path
+import cv2
+from table_detector import detect_tables
+
+# ==== Config ====
+BASE_DIR = os.path.abspath(os.path.join(os.path.dirname(__file__), "..", "..", ".."))
+PDF_NAME = 'aaaa'
+
+# PDF path
+pdf_path = Path(BASE_DIR) / "storage" / "pdf" / "fax.pdf"
+# Output folder
+output_folder = Path(BASE_DIR) / "public" / "image"
+
+#PDF_NAME = pdf_path.stem  # Get the stem of the PDF file
+#print(PDF_NAME)
+
+os.makedirs(output_folder, exist_ok=True)
+
+timestamp = int(time.time())
+img_base_name = f"{PDF_NAME}_{timestamp}"
+
+# ==== OCR Init ====
+ocr = PaddleOCR(
+    use_doc_orientation_classify=False,
+    use_doc_unwarping=False,
+    use_textline_orientation=False
+)
+
+# ==== PDF to Image ====
+pages = convert_from_path(pdf_path, first_page=1, last_page=1)
+image_path = os.path.join(output_folder, f"{img_base_name}.jpg")
+pages[0].save(image_path, "JPEG")
+
+# ==== Run OCR ====
+image_np = np.array(pages[0])
+results = ocr.predict(image_np)
+
+# ==== Convert polygon to bbox ====
+def poly_to_bbox(poly):
+    xs = [p[0] for p in poly]
+    ys = [p[1] for p in poly]
+    return [int(min(xs)), int(min(ys)), int(max(xs)), int(max(ys))]
+
+# ==== Build ocrData ====
+ocr_data_list = []
+for res in results:
+    for text, poly in zip(res['rec_texts'], res['rec_polys']):
+        bbox = poly_to_bbox(poly)
+        ocr_data_list.append({
+            "text": text,
+            "bbox": bbox,
+            "field": "",
+            "hideBorder": False
+        })
+
+# ==== Detect table ====
+table_info = detect_tables(image_path)
+
+# ==== Build JSON ====
+final_json = {
+    "ocr_data": ocr_data_list,
+    "tables": table_info
+}
+
+
+# ==== Save JSON ====
+json_path = os.path.join(output_folder, f"{PDF_NAME}_{timestamp}_with_table.json")
+with open(json_path, "w", encoding="utf-8") as f:
+    json.dump(final_json, f, ensure_ascii=False, indent=2)
+
+print(f"Saved OCR + Table JSON to: {json_path}")

+import cv2
+import numpy as np
+import os
+
+def detect_tables(image_path):
+    img = cv2.imread(image_path)
+    if img is None:
+        raise FileNotFoundError(f"Không đọc được ảnh: {image_path}")
+
+    gray = cv2.cvtColor(img, cv2.COLOR_BGR2GRAY)
+    blur = cv2.GaussianBlur(gray, (3, 3), 0)
+
+    # Edge detection
+    edges = cv2.Canny(blur, 50, 150, apertureSize=3)
+
+    # --- Horizontal lines ---
+    lines_h = cv2.HoughLinesP(edges, 1, np.pi/180, threshold=120,
+                              minLineLength=int(img.shape[1] * 0.6), maxLineGap=20)
+    ys_candidates, line_segments = [], []
+    if lines_h is not None:
+        for l in lines_h:
+            x1, y1, x2, y2 = l[0]
+            if abs(y1 - y2) <= 3:  # ngang
+                y_mid = int(round((y1 + y2) / 2))
+                ys_candidates.append(y_mid)
+                line_segments.append((x1, x2, y_mid))
+
+    # gom nhóm các y
+    ys, tol_y = [], 10
+    for y in sorted(ys_candidates):
+        if not ys or abs(y - ys[-1]) > tol_y:
+            ys.append(y)
+
+    total_rows = max(0, len(ys) - 1)
+
+    # --- Vertical lines ---
+    lines_v = cv2.HoughLinesP(edges, 1, np.pi/180, threshold=100,
+                              minLineLength=int(img.shape[0] * 0.5), maxLineGap=20)
+    xs = []
+    if lines_v is not None:
+        for l in lines_v:
+            x1, y1, x2, y2 = l[0]
+            if abs(x1 - x2) <= 3:
+                xs.append(int(round((x1 + x2) / 2)))
+
+    # gom nhóm cột
+    x_pos, tol_v = [], 10
+    for v in sorted(xs):
+        if not x_pos or v - x_pos[-1] > tol_v:
+            x_pos.append(v)
+
+    total_cols = max(0, len(x_pos) - 1)
+
+    tables = []
+    if len(ys) >= 3 and line_segments:
+        y_min, y_max = ys[0], ys[-1]
+        min_x = min(seg[0] for seg in line_segments)
+        max_x = max(seg[1] for seg in line_segments)
+        table_box = (min_x, y_min, max_x, y_max)
+
+        rows = []
+        for i in range(len(ys) - 1):
+            row_box = (min_x, ys[i], max_x, ys[i+1])
+            rows.append({"row": tuple(int(v) for v in row_box)})
+            cv2.rectangle(img, (row_box[0], row_box[1]), (row_box[2], row_box[3]), (0, 255, 255), 2)
+
+        tables.append({
+            "total_rows": int(total_rows),
+            "total_cols": int(total_cols),
+            "table_box": tuple(int(v) for v in table_box),
+            "rows_box": rows
+        })
+
+        cv2.rectangle(img, (min_x, y_min), (max_x, y_max), (255, 0, 0), 3)
+
+    debug_path = os.path.splitext(image_path)[0] + "_debug.jpg"
+    cv2.imwrite(debug_path, img)
+
+    return tables

+
+body {
+    font-family: sans-serif; background: #f5f5f5;
+}
+
+#app {
+    display: flex; gap: 20px; padding: 20px;
+}
+
+.right-panel {
+    width: 500px; background: #fff; padding: 15px;
+    border-radius: 8px; box-shadow: 0 0 5px rgba(0,0,0,0.1);
+}
+
+.form-group {
+    margin-bottom: 15px;
+}
+
+.form-group label {
+    font-weight: bold; display: block; margin-bottom: 5px;
+}
+
+.form-group input {
+    width: 100%;
+    padding: 6px;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+}
+
+.left-panel {
+    flex: 1;
+    position: relative;
+    background: #eee;
+    border-radius: 8px;
+    overflow: hidden;
+    user-select: none;
+}
+
+.pdf-container {
+    position: relative; display: inline-block;
+}
+
+.bbox {
+    position: absolute;
+    border: 2px solid #ff5252;
+    /*background-color: rgba(255, 82, 82, 0.2);*/
+    cursor: pointer;
+}
+
+.bbox.active {
+    border-color: #199601 !important;
+    background-color: rgba(25, 150, 1, 0.4) !important;
+}
+
+@keyframes focusPulse {
+    0% { transform: scale(1); }
+    50% { transform: scale(1.05); }
+    100% { transform: scale(1); }
+}
+
+select {
+    position: absolute;
+    z-index: 10;
+    background: #fff;
+    border: 1px solid #ccc;
+}
+
+.select-box {
+    position: absolute;
+    /*border: 2px dashed #2196F3;*/
+    background-color: rgba(33, 150, 243, 0.2);
+    pointer-events: none;
+    z-index: 5;
+}
+
+.delete-btn {
+    position: absolute;
+    top: 50%;
+    right: -35px;
+    transform: translateY(-50%);
+    cursor: pointer;
+    padding: 3px 6px;
+    z-index: 20;
+}
+
+
+.edge {
+    position: absolute;
+    z-index: 25;
+
+}
+
+.edge.top, .edge.bottom {
+    height: 8px;
+    cursor: ns-resize;;
+}
+.edge.left, .edge.right {
+    width: 8px;
+    cursor: ew-resize;
+}
+
+.edge.top {
+    top: -4px;
+    left: 0;
+    right: 0;
+}
+
+.edge.bottom {
+    bottom: -4px;
+    left: 0;
+    right: 0;
+}
+
+.edge.left {
+    top: 0;
+    bottom: 0;
+    left: -4px;
+}
+
+.edge.right  {
+    top: 0;
+    bottom: 0;
+    right: -4px;
+}
+
+.corner {
+    position: absolute;
+    width: 14px;
+    height: 14px;
+    background: transparent;
+    border: 2px solid transparent; /* mặc định trong suốt, chỉ tô 2 cạnh */
+    z-index: 30;
+    opacity: .95;
+    transition: border-width .08s ease, transform .08s ease, opacity .08s ease;
+    pointer-events: auto; /* bắt sự kiện kéo resize */
+}
+
+
+/* Mỗi góc hiện 2 cạnh + bo tròn đúng góc */
+.corner.top-left {
+    top: -8px; left: -8px;
+    /*border-left-color: var(--corner-color);*/
+    /*border-top-color: var(--corner-color);*/
+    border-top-left-radius: 6px;
+    cursor: nwse-resize;
+}
+
+.corner.top-right {
+    top: -8px; right: -8px;
+    /*border-right-color: var(--corner-color);*/
+    /*border-top-color: var(--corner-color);*/
+    border-top-right-radius: 6px;
+    cursor: nesw-resize;
+}
+
+.corner.bottom-left {
+    bottom: -8px; left: -8px;
+    /*border-left-color: var(--corner-color);*/
+    /*border-bottom-color: var(--corner-color);*/
+    border-bottom-left-radius: 6px;
+    cursor: nesw-resize;
+}
+
+.corner.bottom-right {
+    bottom: -8px; right: -8px;
+    /*border-right-color: var(--corner-color);*/
+    /*border-bottom-color: var(--corner-color);*/
+    border-bottom-right-radius: 6px;
+    cursor: nwse-resize;
+}
+
+/* Hiệu ứng khi hover – dày hơn, rõ hơn */
+.corner:hover {
+    border-width: 3px;
+    opacity: 1;
+    transform: scale(1.02);
+}

-<html lang="en"><head>
+<html lang="en">
+<head>
     <meta charset="UTF-8">
     <meta charset="UTF-8">
     <title>OCR Mapping with Manual Select Tool</title>
     <title>OCR Mapping with Manual Select Tool</title>
     <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
-    <style>
-        body { font-family: sans-serif; background: #f5f5f5; }
-        #app { display: flex; gap: 20px; padding: 20px; }
-        .left-panel {
-            width: 500px; background: #fff; padding: 15px;
-            border-radius: 8px; box-shadow: 0 0 5px rgba(0,0,0,0.1);
-        }
-        .form-group { margin-bottom: 15px; }
-        .form-group label { font-weight: bold; display: block; margin-bottom: 5px; }
-        .form-group input { width: 100%; padding: 6px; border: 1px solid #ccc; border-radius: 4px; }
-        .right-panel { flex: 1; position: relative; background: #eee; border-radius: 8px; overflow: hidden; user-select: none; }
-        .pdf-container { position: relative; display: inline-block; }
-        .bbox {
-            position: absolute;
-            border: 2px solid #ff5252;
-            /*background-color: rgba(255, 82, 82, 0.2);*/
-            cursor: pointer;
-        }
-        .bbox.active {
-            border-color: #199601 !important;
-            background-color: rgba(25, 150, 1, 0.4) !important;
-        }
-
-        @keyframes focusPulse {
-            0% { transform: scale(1); }
-            50% { transform: scale(1.05); }
-            100% { transform: scale(1); }
-        }
-        select {
-            position: absolute;
-            z-index: 10;
-            background: #fff;
-            border: 1px solid #ccc;
-        }
-        .select-box {
-            position: absolute;
-            /*border: 2px dashed #2196F3;*/
-            background-color: rgba(33, 150, 243, 0.2);
-            pointer-events: none;
-            z-index: 5;
-        }
-        .delete-btn {
-            position: absolute;
-            bottom: -10px;
-            right: -10px;
-            background: #ff4d4d;
-            color: #fff;
-            border: none;
-            border-radius: 50%;
-            cursor: pointer;
-            font-size: 14px;
-            padding: 3px 6px;
-            z-index: 20;
-        }
-    </style>
-
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" rel="stylesheet">
+    <link rel="stylesheet" href="{{ asset('css/ocr.css') }}">
 </head>
 </head>
 <body>
 <body>
 <meta name="csrf-token" content="{{ csrf_token() }}">
 <meta name="csrf-token" content="{{ csrf_token() }}">
 <div id="app">
 <div id="app">
-    <div class="right-panel" >
+    <div class="left-panel" >
         <div class="pdf-container" ref="pdfContainer"
         <div class="pdf-container" ref="pdfContainer"
              @mousedown="startSelect"
              @mousedown="startSelect"
              @mousemove="onSelect"
              @mousemove="onSelect"
@@ -86,13 +33,42 @@
                 v-if="!item.isDeleted"
                 v-if="!item.isDeleted"
                 class="bbox"
                 class="bbox"
                 :class="{ active: index === activeIndex }"
                 :class="{ active: index === activeIndex }"
+                :data-index="index"
                 :data-field="item.field"
                 :data-field="item.field"
                 :style="getBoxStyle(item, index)"
                 :style="getBoxStyle(item, index)"
                 @click="onBoxClick(index)">
                 @click="onBoxClick(index)">
 
 
-                <button v-if="item.isManual && item.showDelete"
-                        class="delete-btn"
-                        @click.stop="deleteBox(index)">🗑</button>
+                <div class="edge top" data-handle="top"
+                     @mousedown="startResize($event, index, 'top')">
+                </div>
+                <div class="edge right"  data-handle="right"
+                     @mousedown="startResize($event, index, 'right')">
+                </div>
+                <div class="edge bottom" data-handle="bottom"
+                     @mousedown="startResize($event, index, 'bottom')">
+                </div>
+                <div class="edge left" data-handle="left"
+                     @mousedown="startResize($event, index, 'left')">
+                </div>
+                <!-- 4 góc -->
+                <div class="corner top-left" data-handle="top-left"
+                     @mousedown="startResize($event, index, 'top-left')">
+                </div>
+                <div class="corner top-right" data-handle="top-right"
+                     @mousedown="startResize($event, index, 'top-right')">
+                </div>
+                <div class="corner bottom-left" data-handle="bottom-left"
+                     @mousedown="startResize($event, index, 'bottom-left')">
+                </div>
+                <div class="corner bottom-right" data-handle="bottom-right"
+                     @mousedown="startResize($event, index, 'bottom-right')">
+                </div>
+
+                <div v-if="item.isManual && item.showDelete"
+                     class="delete-btn"
+                     @click.stop="deleteBox(index)">
+                    <img src="{{ asset('icon/btn-delete.png') }}" alt="delete box" style="width: 20px; height: 20px;">
+                </div>
             </div>
             </div>
 
 
 
 
@@ -108,9 +84,12 @@
 
 
             <!-- Dropdown thủ công -->
             <!-- Dropdown thủ công -->
             <select v-if="selectBox.showDropdown"
             <select v-if="selectBox.showDropdown"
-                    :style="{ left: selectBox.x + 'px', top: (selectBox.y + selectBox.height) + 'px' }"
+                    class="manual-select"
+                    :style="{ left: selectBox.x + 'px', top: (selectBox.y + selectBox.height) + 'px', zIndex: 10000, position: 'absolute' }"
                     v-model="manualField"
                     v-model="manualField"
                     @change="applyManualMapping"
                     @change="applyManualMapping"
+                    @mousedown.stop
+                    @mouseup.stop
                     @click.stop
                     @click.stop
             >
             >
                 <option disabled value="">-- Chọn trường dữ liệu --</option>
                 <option disabled value="">-- Chọn trường dữ liệu --</option>
@@ -119,13 +98,12 @@
         </div>
         </div>
     </div>
     </div>
 
 
-    <div class="left-panel">
+    <div class="right-panel">
         <div v-for="field in fieldOptions" :key="field.value" class="form-group">
         <div v-for="field in fieldOptions" :key="field.value" class="form-group">
             <label>@{{ field.label }}</label>
             <label>@{{ field.label }}</label>
             <input v-model="formData[field.value]"
             <input v-model="formData[field.value]"
                    @click="onInputClick(field.value)"
                    @click="onInputClick(field.value)"
                    @blur="removeAllFocus()"
                    @blur="removeAllFocus()"
-
             >
             >
         </div>
         </div>
         <button @click="saveTemplate">💾Save</button>
         <button @click="saveTemplate">💾Save</button>
@@ -152,7 +130,8 @@
                 hasCustomerNameXY: false,
                 hasCustomerNameXY: false,
                 ocrData: [],
                 ocrData: [],
                 selectBox: { show: false, showDropdown: false, x: 0, y: 0, width: 0, height: 0, startX: 0, startY: 0 },
                 selectBox: { show: false, showDropdown: false, x: 0, y: 0, width: 0, height: 0, startX: 0, startY: 0 },
-                manualIndex: null
+                manualIndex: null,
+                suppressNextDocumentClick: false
             }
             }
         },
         },
         created() {
         created() {
@@ -163,14 +142,35 @@
         },
         },
         mounted() {
         mounted() {
             this.loadOCRData();
             this.loadOCRData();
-            //Thêm event listener để xóa focus khi click ra ngoài
+            // Thêm event listener để xử lý click ra ngoài
             document.addEventListener('click', (e) => {
             document.addEventListener('click', (e) => {
-                if (
-                    !e.target.closest('.left-panel') &&
-                    !e.target.closest('.bbox') &&
-                    !e.target.closest('select')
-                ) {
-                    this.removeAllFocus();
+                // Bỏ qua click ngay sau khi thả chuột tạo box
+                if (this.suppressNextDocumentClick) {
+                    this.suppressNextDocumentClick = false;
+                    return;
+                }
+                // Nếu đang có box thủ công mới quét và chưa chọn field
+                if (this.manualIndex !== null) {
+                    const currentIdx = this.manualIndex;
+                    const currentBox = this.ocrData[currentIdx];
+                    if (currentBox && currentBox.isManual && !currentBox.field && !currentBox.isDeleted) {
+                        const bboxEl = e.target.closest('.bbox');
+                        const manualSelectEl = e.target.closest('.manual-select');
+                        const clickedInsideCurrentBox = bboxEl && String(bboxEl.getAttribute('data-index')) === String(currentIdx);
+                        const clickedInsideManualSelect = !!manualSelectEl;
+                        if (!clickedInsideCurrentBox && !clickedInsideManualSelect) {
+                            // Click ra ngoài box/ select → xóa box thủ công vừa quét
+                            this.deleteBox(currentIdx);
+                            // Đóng dropdown thủ công nếu còn mở
+                            this.selectBox.show = false;
+                            this.selectBox.showDropdown = false;
+                            this.isMappingManually = false;
+                            this.manualField = "";
+                            this.manualIndex = null;
+                            this.activeIndex = null;
+                            this.selectingIndex = null;
+                        }
+                    }
                 }
                 }
             });
             });
         },
         },
@@ -181,116 +181,110 @@
             }
             }
         },
         },
         methods: {
         methods: {
-            // Map field cho box (không set active, chỉ dùng để load data từ DB)
-            mapFieldToBox(index, fieldName, text = null) {
-                if (index == null) return;
-                // Xóa tất cả box có fieldName trùng lặp, chỉ giữ lại box hiện tại
-                this.ocrData = this.ocrData.filter((box, i) => {
-                    if (i === index) return true;
-                    if (box.field === fieldName) {
-                        return false;
-                    }
-                    return true;
-                });
+            startResize(e, index, handle) {
+                e.stopPropagation();
+                this.resizing = {
+                    index,
+                    handle,
+                    startX: e.clientX,
+                    startY: e.clientY,
+                    origBox: [...this.ocrData[index].bbox], // [x1, y1, x2, y2]
+                };
 
 
-                // Cập nhật lại index sau khi filter
-                const newIndex = this.ocrData.findIndex(box => box.bbox === this.ocrData[index]?.bbox);
-                if (newIndex === -1) return;
+                document.addEventListener("mousemove", this.onResizing);
+                document.addEventListener("mouseup", this.stopResize);
+            },
+            onResizing(e) {
+                if (!this.resizing) return;
+
+                const { index, handle, startX, startY, origBox } = this.resizing;
+                const dx = (e.clientX - startX) * (this.imageWidth / this.$refs.pdfImage.clientWidth);
+                const dy = (e.clientY - startY) * (this.imageHeight / this.$refs.pdfImage.clientHeight);
+
+                let [x1, y1, x2, y2] = origBox;
+
+                if (handle === 'top-left') {
+                    x1 += dx; y1 += dy;
+                } else if (handle === 'top-right') {
+                    x2 += dx; y1 += dy;
+                } else if (handle === 'bottom-left') {
+                    x1 += dx; y2 += dy;
+                } else if (handle === 'bottom-right') {
+                    x2 += dx; y2 += dy;
+                } else if (handle === 'top') {
+                    y1 += dy;
+                } else if (handle === 'bottom') {
+                    y2 += dy;
+                } else if (handle === 'left') {
+                    x1 += dx;
+                } else if (handle === 'right') {
+                    x2 += dx;
+                }
 
 
-                // Nếu box này từng gán field khác thì bỏ reset flag và tọa độ liên quan.
-                const prev = this.ocrData[newIndex].field;
-                if (prev && prev !== fieldName) {
-                    if (prev === 'customer_name') {
-                        this.hasCustomerNameXY = false;
-                        this.customer_name_xy = '';
+                // giữ không cho x1 > x2, y1 > y2
+                if (x1 < x2 && y1 < y2) {
+                    const scaleX = this.$refs.pdfImage.clientWidth / this.imageWidth;
+                    const scaleY = this.$refs.pdfImage.clientHeight / this.imageHeight;
+                    const newBbox = [
+                        Math.round(x1),
+                        Math.round(y1),
+                        Math.round(x2),
+                        Math.round(y2)
+                    ];
+                    if (this.ocrData[index].isManual) {
+                        this.$set(this.ocrData[index], "bbox", newBbox);
+                    } else {
+                        this.selectBox = {
+                            ...this.selectBox,
+                            x: Math.round(x1 * scaleX),
+                            y: Math.round(y1 * scaleY),
+                            width: Math.round((x2 - x1) * scaleX),
+                            height: Math.round((y2 - y1) * scaleY),
+                            show: true,
+                        };
+                        this.resizing.newBbox = newBbox;
                     }
                     }
-                    this.ocrData[newIndex].field = null;
-                    this.ocrData[newIndex].field_xy = null;
                 }
                 }
 
 
-                const bbox = this.ocrData[newIndex].bbox;
-
-                const x1 = bbox[0];
-                const y1 = bbox[1];
-                const w = bbox[2];
-                const h = bbox[3];
-
-                const xyStr = `${x1},${y1},${w},${h}`;
-                this.ocrData[newIndex].field = fieldName;
-                this.ocrData[newIndex].field_xy = xyStr;
-
-                this.formData[fieldName] = (text !== null ? text : (this.ocrData[newIndex].text || '')).trim();
-
-                if (fieldName === 'customer_name') {
-                    this.hasCustomerNameXY = true;
-                    this.customer_name_xy = xyStr;
-                }
             },
             },
-
-            async saveTemplate() {
-
-                let customer_name = null;
-                let customer_coords = null;
-                let fields = [];
-                if (this.manualBoxData.customer_name) {
-                    // Lấy từ manualBoxData nếu có
-                    customer_name = this.manualBoxData.customer_name.text;
-                    customer_coords = this.manualBoxData.customer_name.coords.join(',');
-                    fields =  this.manualBoxData;
-                    console.log('Using manualBoxData for customer_name:', customer_name, customer_coords);
-                } else {
-                    const found = this.ocrData.find(item => item.field === 'customer_name');
-                    if (found) {
-                        customer_name = found.text;
-                        customer_coords = found.field_xy;
+            stopResize() {
+                document.removeEventListener("mousemove", this.onResizing);
+                document.removeEventListener("mouseup", this.stopResize);
+
+                if (!this.resizing) return;
+                const { index, newBbox } = this.resizing;
+                const targetBox = this.ocrData[index];
+
+                if (targetBox) {
+                    if (!targetBox.isManual && newBbox) {
+                        const newBox = {
+                            ...targetBox,
+                            bbox: newBbox,
+                            isManual: true,
+                            isDeleted: false,
+                            showDelete: true,
+                            text: "",
+                        };
+                        this.$set(this.ocrData[index], "isDeleted", true);
+                        this.ocrData.push(newBox);
+                        this.selectingIndex =  this.ocrData.length - 1;
+                        this.updateHiddenBorders(newBox.bbox);
+
+                    } else if (targetBox.isManual) {
+                        this.updateHiddenBorders(targetBox.bbox);
                     }
                     }
-
-                    const fieldsByName = {};
-                    this.ocrData.forEach(box => {
-                        if (box.field && !box.isDeleted) {
-                            fieldsByName[box.field] = {
-                                text: box.field,
-                                coords: box.field_xy || ''
-                            };
-                        }
-                    });
-                    fields = (fieldsByName);
-                    console.log('Using ocrData for customer_name:', customer_name, customer_coords);
-                }
-
-                if (!customer_coords || !customer_name) {
-                    alert("Bạn phải map customer_name (quét/select) trước khi lưu.");
-                    return;
                 }
                 }
 
 
-                const payload = {
-                    customer_name_text: customer_name || '',
-                    template_name: this.formData.template_name || this.formData.customer_name,
-                    customer_name_xy: customer_coords || [],
-                    fields: fields
-                };
-
-                try {
-                    const res = await fetch('/ocr/save-template', {
-                        method: 'POST',
-                        headers: {
-                            'Content-Type': 'application/json',
-                            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
-                        },
-                        body: JSON.stringify(payload)
-                    });
-                    const json = await res.json();
-                    if (json.success) {
-                        alert(json.message);
-                    } else {
-                        alert('Save failed');
+                this.resizing = null;
+                this.selectBox.show = false;
+            },
+            updateHiddenBorders(manualBox) {
+                this.ocrData.forEach(item => {
+                    if (!item.isManual) {
+                        item.hideBorder = this.isBoxInside(item.bbox, manualBox);
                     }
                     }
-                } catch (err) {
-                    console.error(err);
-                    alert('Save error');
-                }
+                });
             },
             },
-
             deleteBox(index) {
             deleteBox(index) {
                 const item = this.ocrData[index];
                 const item = this.ocrData[index];
                 if (item.isManual) {
                 if (item.isManual) {
@@ -314,32 +308,9 @@
                         this.manualIndex = null;
                         this.manualIndex = null;
                     }
                     }
                     this.selectingIndex = null;
                     this.selectingIndex = null;
+                    this.activeIndex = null;
                 }
                 }
             },
             },
-
-
-            async loadOCRData() {
-
-                try {
-                    const res = await fetch(`/ocr/data-list`);
-                    const data = await res.json();
-
-                    if (data.error) {
-                        console.error('Error loading data:', data.error);
-                        return;
-                    }
-
-                    this.ocrData      = data.ocrData;
-                    this.pdfImageUrl  = data.pdfImageUrl;
-                    this.fieldOptions = data.fieldOptions;
-                    this.dataMapping  = data.dataMapping;
-                    this.is_template  = data.is_template;
-
-                } catch (error) {
-                    console.error('Error in loadOCRData:', error);
-                }
-            },
-
             // Xử lý data sau khi image đã load
             // Xử lý data sau khi image đã load
             processLoadedData() {
             processLoadedData() {
                 this.autoMapFieldsFromFormData();
                 this.autoMapFieldsFromFormData();
@@ -348,7 +319,6 @@
                     this.$forceUpdate();
                     this.$forceUpdate();
                 });
                 });
             },
             },
-
             autoMapFieldsFromFormData() {
             autoMapFieldsFromFormData() {
                 this.manualBoxData = {};
                 this.manualBoxData = {};
                 if(this.is_template) {
                 if(this.is_template) {
@@ -388,7 +358,6 @@
                 });
                 });
 
 
             },
             },
-
             onImageLoad() {
             onImageLoad() {
                 const img = this.$refs.pdfImage;
                 const img = this.$refs.pdfImage;
                 this.imageWidth = img.naturalWidth;
                 this.imageWidth = img.naturalWidth;
@@ -455,13 +424,7 @@
                 }
                 }
 
 
                 if (coords) {
                 if (coords) {
-                    if (isFromDB) {
-                        // Tạo box manual từ DB (không có nút xóa)
-                        this.createManualBoxFromDB(field, coords, text);
-                    } else {
-                        // Hiển thị lại box manual đã quét chọn (có nút xóa)
-                        this.showManualBox(field, coords, text);
-                    }
+                    this.createManualBoxFromDB(field, coords, text);
                 }
                 }
 
 
                 // Tìm lại index của box để set active
                 // Tìm lại index của box để set active
@@ -476,49 +439,12 @@
 
 
                 if (idx !== -1) {
                 if (idx !== -1) {
                     this.activeIndex = idx;
                     this.activeIndex = idx;
-                    this.scrollToBox(idx);
                     // Reset selectingIndex để không hiển thị dropdown khi highlight từ input
                     // Reset selectingIndex để không hiển thị dropdown khi highlight từ input
                     this.selectingIndex = null;
                     this.selectingIndex = null;
                 } else {
                 } else {
                     this.activeIndex = null;
                     this.activeIndex = null;
                 }
                 }
             },
             },
-
-            scrollToBox(index) {
-                if (!this.$refs.pdfContainer || index < 0 || index >= this.ocrData.length) return;
-
-                const item = this.ocrData[index];
-                if (!item || item.isDeleted) return;
-
-                // Tính vị trí hiển thị của box
-                const [x1, y1, x2, y2] = item.bbox;
-                if (!this.imageWidth || !this.imageHeight || !this.$refs.pdfImage) return;
-
-                const displayedWidth = this.$refs.pdfImage.clientWidth;
-                const displayedHeight = this.$refs.pdfImage.clientHeight;
-                const scaleX = displayedWidth / this.imageWidth;
-                const scaleY = displayedHeight / this.imageHeight;
-
-                const displayX = Math.round(x1 * scaleX);
-                const displayY = Math.round(y1 * scaleY);
-
-                // Scroll đến vị trí box
-                const container = this.$refs.pdfContainer;
-                const containerRect = container.getBoundingClientRect();
-                const scrollTop = container.scrollTop;
-                const scrollLeft = container.scrollLeft;
-
-                // Tính vị trí scroll để box nằm ở giữa viewport
-                const targetScrollTop = scrollTop + displayY - (containerRect.height / 2);
-                const targetScrollLeft = scrollLeft + displayX - (containerRect.width / 2);
-
-                container.scrollTo({
-                    top: Math.max(0, targetScrollTop),
-                    left: Math.max(0, targetScrollLeft),
-                    behavior: 'smooth'
-                });
-            },
-
             // Xử lý khi click vào input
             // Xử lý khi click vào input
             onInputClick(fieldName) {
             onInputClick(fieldName) {
                 // Kiểm tra xem field này có data không
                 // Kiểm tra xem field này có data không
@@ -526,32 +452,39 @@
                 if (fieldValue && fieldValue.trim()) {
                 if (fieldValue && fieldValue.trim()) {
                     // Nếu có data từ DB, highlight và focus vào box tương ứng
                     // Nếu có data từ DB, highlight và focus vào box tương ứng
                     this.highlightField(fieldName);
                     this.highlightField(fieldName);
+
+                    // Không ẩn nút xóa các box khác để tránh nhầm lẫn
+                    // Chỉ highlight box tương ứng
                 }
                 }
             },
             },
-
             // Xóa tất cả focus
             // Xóa tất cả focus
             removeAllFocus() {
             removeAllFocus() {
                 // Reset active index (chỉ mất màu xanh, không xóa box)
                 // Reset active index (chỉ mất màu xanh, không xóa box)
                 this.activeIndex = null;
                 this.activeIndex = null;
                 this.selectingIndex = null;
                 this.selectingIndex = null;
 
 
-                // Ẩn hoàn toàn các box manual được tạo từ DB (không phải quét chọn thủ công)
-                this.ocrData.forEach(item => {
-                    if (item.isManual && !item.showDelete) {
-                        // Box manual từ DB (không có nút xóa) - ẩn hoàn toàn
-                        item.isDeleted = true;
-                    }
-                });
+                // Không ẩn nút xóa các box để tránh nhầm lẫn
+                // Chỉ reset focus
+            },
 
 
-                // Đảm bảo tất cả box OCR đều hiển thị (chỉ ẩn border khi cần thiết)
-                this.ocrData.forEach(item => {
-                    if (!item.isManual && item.hideBorder) {
-                        // Chỉ ẩn border cho box OCR nằm trong vùng manual
-                        item.hideBorder = true;
+            // Xóa box quét chọn chưa hoàn thành
+            removeIncompleteBoxes() {
+                // Xóa box quét chọn chưa hoàn thành (chưa có field)
+                this.ocrData = this.ocrData.filter(item => {
+                    if (item.isManual && !item.field && item.showDelete) {
+                        // Chỉ xóa box manual chưa có field
+                        return false;
                     }
                     }
+                    return true;
                 });
                 });
-            },
 
 
+                // Reset trạng thái quét chọn
+                this.selectBox.show = false;
+                this.selectBox.showDropdown = false;
+                this.isMappingManually = false;
+                this.manualField = "";
+                this.manualIndex = null;
+            },
             // Xử lý khi click vào box
             // Xử lý khi click vào box
             onBoxClick(index) {
             onBoxClick(index) {
                 const item = this.ocrData[index];
                 const item = this.ocrData[index];
@@ -563,11 +496,21 @@
                 const isDataOverridden = item.field && isFromDB &&
                 const isDataOverridden = item.field && isFromDB &&
                     this.formData[item.field] !== this.dataMapping[item.field].text;
                     this.formData[item.field] !== this.dataMapping[item.field].text;
 
 
+                // Set active index và hiển thị nút xóa cho box được click
+                this.activeIndex = index;
+
+                // Hiển thị nút xóa cho box được click (nếu là manual box)
+                if (item.isManual) {
+                    item.showDelete = true;
+                }
+
+                // Không ẩn nút xóa các box khác để tránh nhầm lẫn
+                // Chỉ hiển thị nút xóa cho box được click
+
                 if (item.isManual) {
                 if (item.isManual) {
                     // Manual box
                     // Manual box
                     if (isFromDB && !isDataOverridden) {
                     if (isFromDB && !isDataOverridden) {
                         // Manual box từ DB chưa ghi đè, KHÔNG cho chọn option
                         // Manual box từ DB chưa ghi đè, KHÔNG cho chọn option
-                        this.activeIndex = index;
                         this.selectingIndex = null;
                         this.selectingIndex = null;
                     } else {
                     } else {
                         // Manual box từ DB có data ghi đè HOẶC manual box bình thường, CHO PHÉP chọn option
                         // Manual box từ DB có data ghi đè HOẶC manual box bình thường, CHO PHÉP chọn option
@@ -577,7 +520,6 @@
                     // Box OCR có field
                     // Box OCR có field
                     if (isFromDB && !isDataOverridden) {
                     if (isFromDB && !isDataOverridden) {
                         // Box có field từ DB chưa ghi đè, KHÔNG cho chọn option
                         // Box có field từ DB chưa ghi đè, KHÔNG cho chọn option
-                        this.activeIndex = index;
                         this.selectingIndex = null;
                         this.selectingIndex = null;
                     } else {
                     } else {
                         // Box có field từ DB đã ghi đè HOẶC field mới, CHO PHÉP chọn option
                         // Box có field từ DB đã ghi đè HOẶC field mới, CHO PHÉP chọn option
@@ -589,7 +531,9 @@
                 }
                 }
             },
             },
             startSelect(e) {
             startSelect(e) {
-                if (this.isMappingManually || e.button !== 0) return;
+                if (e.button !== 0) return; // Chỉ cho phép left click
+                // Bỏ qua nếu click trên dropdown thủ công
+                if (e.target.closest && e.target.closest('.manual-select')) return;
                 this.isSelecting = true;
                 this.isSelecting = true;
                 const rect = this.$refs.pdfContainer.getBoundingClientRect();
                 const rect = this.$refs.pdfContainer.getBoundingClientRect();
                 this.selectBox.startX = e.clientX - rect.left;
                 this.selectBox.startX = e.clientX - rect.left;
@@ -602,7 +546,6 @@
                 this.selectBox.showDropdown = false;
                 this.selectBox.showDropdown = false;
                 this.manualField = "";
                 this.manualField = "";
             },
             },
-
             onSelect(e) {
             onSelect(e) {
                 if (!this.isSelecting) return;
                 if (!this.isSelecting) return;
                 const rect = this.$refs.pdfContainer.getBoundingClientRect();
                 const rect = this.$refs.pdfContainer.getBoundingClientRect();
@@ -613,7 +556,6 @@
                 this.selectBox.width = Math.abs(currentX - this.selectBox.startX);
                 this.selectBox.width = Math.abs(currentX - this.selectBox.startX);
                 this.selectBox.height = Math.abs(currentY - this.selectBox.startY);
                 this.selectBox.height = Math.abs(currentY - this.selectBox.startY);
             },
             },
-
             endSelect(e) {
             endSelect(e) {
                 if (!this.isSelecting) return;
                 if (!this.isSelecting) return;
                 this.isSelecting = false;
                 this.isSelecting = false;
@@ -656,7 +598,7 @@
                     bbox: origBbox,
                     bbox: origBbox,
                     field: "",
                     field: "",
                     isManual: true,
                     isManual: true,
-                    showDelete: true,
+                    showDelete: true, // Hiển thị nút xóa ngay khi quét chọn
                     isDeleted: false,
                     isDeleted: false,
                     hideBorder: false
                     hideBorder: false
                 });
                 });
@@ -665,20 +607,29 @@
                 this.isMappingManually = true;
                 this.isMappingManually = true;
                 this.selectBox.showDropdown = true;
                 this.selectBox.showDropdown = true;
 
 
-                e.stopPropagation();
-                e.preventDefault();
+                // Set active index cho box mới tạo
+                this.activeIndex = this.ocrData.length - 1;
+
+                // Sau khi thả chuột, bỏ qua click document kế tiếp
+                this.suppressNextDocumentClick = true;
+
+                // Không stopPropagation để event có thể lan truyền bình thường
+                // e.stopPropagation();
+                // e.preventDefault();
 
 
             },
             },
             applyMapping() {
             applyMapping() {
                 const item = this.ocrData[this.selectingIndex];
                 const item = this.ocrData[this.selectingIndex];
                 if (!item) return;
                 if (!item) return;
 
 
+                console.log(`Applying mapping for index:`, item);
                 this.ocrData.forEach((box, i) => {
                 this.ocrData.forEach((box, i) => {
                     if (i !== this.selectingIndex && box.field === item.field) {
                     if (i !== this.selectingIndex && box.field === item.field) {
                         box.field = '';
                         box.field = '';
                     }
                     }
                 });
                 });
                 if (item.isManual) {
                 if (item.isManual) {
+                    console.log('aaaaaaaaaa')
                     // Nếu là manual box, chuyển sang chế độ manual mapping
                     // Nếu là manual box, chuyển sang chế độ manual mapping
                     this.manualIndex = this.selectingIndex;
                     this.manualIndex = this.selectingIndex;
                     this.manualField = item.field || "";
                     this.manualField = item.field || "";
@@ -713,7 +664,7 @@
 
 
                 const newBbox = this.ocrData[manualIndex].bbox;
                 const newBbox = this.ocrData[manualIndex].bbox;
 
 
-                console.log(`manual for field "${this.manualField}" at index ${manualIndex} with bbox:`, newBbox);
+                //console.log(`manual for field "${this.manualField}" at index ${manualIndex} with bbox:`, newBbox);
                 this.ocrData.forEach((box, i) => {
                 this.ocrData.forEach((box, i) => {
                     if (i !== manualIndex && box.field === this.ocrData[manualIndex].field) {
                     if (i !== manualIndex && box.field === this.ocrData[manualIndex].field) {
                         box.field = '';
                         box.field = '';
@@ -753,6 +704,9 @@
                 const finalText = combinedText.join(" ");
                 const finalText = combinedText.join(" ");
 
 
                 this.ocrData[manualIndex].field = this.manualField;
                 this.ocrData[manualIndex].field = this.manualField;
+                // this.ocrData[manualIndex].showDelete = true; // Hiển thị nút xóa sau khi hoàn thành mapping
+
+                console.log('123',this.ocrData[manualIndex])
                 this.formData[this.manualField] = finalText.trim();
                 this.formData[this.manualField] = finalText.trim();
                 this.manualBoxData[this.manualField] = {
                 this.manualBoxData[this.manualField] = {
                     coords: newBbox,
                     coords: newBbox,
@@ -771,8 +725,11 @@
                 this.selectBox.showDropdown = false;
                 this.selectBox.showDropdown = false;
                 this.manualField = "";
                 this.manualField = "";
                 this.manualIndex = null;
                 this.manualIndex = null;
-            },
 
 
+                // Giữ nguyên nút xóa cho box vừa hoàn thành
+                // Không ẩn nút xóa các box khác để tránh nhầm lẫn
+
+            },
             isBoxInside(inner, outer) {
             isBoxInside(inner, outer) {
                 // inner: bbox của OCR item [x1, y1, x2, y2]
                 // inner: bbox của OCR item [x1, y1, x2, y2]
                 // outer: bbox của vùng manual [x1, y1, x2, y2]
                 // outer: bbox của vùng manual [x1, y1, x2, y2]
@@ -792,13 +749,10 @@
                     inner[3] < outer[1] || // inner.bottom < outer.top → hoàn toàn phía trên
                     inner[3] < outer[1] || // inner.bottom < outer.top → hoàn toàn phía trên
                     inner[1] > outer[3]    // inner.top > outer.bottom → hoàn toàn phía dưới
                     inner[1] > outer[3]    // inner.top > outer.bottom → hoàn toàn phía dưới
                 );
                 );
-
+                // console.log(`isBoxInside: inner=${inner}, outer=${outer}, isFullyInside=${isFullyInside}, isOverlapping=${isOverlapping}`);
                 // Trả về true nếu box OCR nằm hoàn toàn trong hoặc giao nhau đáng kể
                 // Trả về true nếu box OCR nằm hoàn toàn trong hoặc giao nhau đáng kể
                 return isFullyInside || isOverlapping;
                 return isFullyInside || isOverlapping;
             },
             },
-
-
-
             getPartialText(text, bbox, selectBbox) {
             getPartialText(text, bbox, selectBbox) {
                 const [x1, y1, x2, y2] = bbox;
                 const [x1, y1, x2, y2] = bbox;
                 const [sx1, sy1, sx2, sy2] = selectBbox;
                 const [sx1, sy1, sx2, sy2] = selectBbox;
@@ -827,8 +781,6 @@
                     zIndex: 9999
                     zIndex: 9999
                 };
                 };
             },
             },
-
-            // Tạo box manual từ tọa độ trong DB
             createManualBoxFromDB(fieldName, coordinates, text) {
             createManualBoxFromDB(fieldName, coordinates, text) {
                 if (!this.imageWidth || !this.imageHeight) {
                 if (!this.imageWidth || !this.imageHeight) {
                     console.log('Cannot create manual box: Image not loaded');
                     console.log('Cannot create manual box: Image not loaded');
@@ -859,7 +811,7 @@
                         bbox: coords,
                         bbox: coords,
                         field: fieldName,
                         field: fieldName,
                         isManual: true,
                         isManual: true,
-                        showDelete: false,
+                        showDelete: true,
                         isDeleted: false,
                         isDeleted: false,
                         hideBorder: true
                         hideBorder: true
                     };
                     };
@@ -872,55 +824,91 @@
                     console.warn('Invalid coordinates for manual box:', coords);
                     console.warn('Invalid coordinates for manual box:', coords);
                 }
                 }
             },
             },
+            async loadOCRData() {
 
 
-            // Hiển thị lại box manual đã quét chọn (có nút xóa)
-            showManualBox(fieldName, coordinates, text) {
-                if (!this.imageWidth || !this.imageHeight) {
-                    console.log('Cannot show manual box: Image not loaded');
-                    return;
-                }
+                try {
+                    const res = await fetch(`/ocr/data-list`);
+                    const data = await res.json();
 
 
-                // Parse coordinates
-                let coords;
-                if (typeof coordinates === 'string') {
-                    coords = coordinates.split(',').map(Number);
-                } else if (Array.isArray(coordinates)) {
-                    coords = coordinates;
-                } else {
-                    console.error('Invalid coordinates format:', coordinates);
-                    return;
-                }
+                    if (data.error) {
+                        console.error('Error loading data:', data.error);
+                        return;
+                    }
 
 
-                const [x1, y1, x2, y2] = coords;
+                    this.ocrData      = data.ocrData;
+                    this.pdfImageUrl  = data.pdfImageUrl;
+                    this.fieldOptions = data.fieldOptions;
+                    this.dataMapping  = data.dataMapping;
+                    this.is_template  = data.is_template;
+                    console.log('Loaded OCR data:', this.ocrData);
 
 
-                // Kiểm tra tọa độ có hợp lệ không
-                if (x1 >= 0 && y1 >= 0 && x2 > x1 && y2 > y1 &&
-                    x2 <= this.imageWidth && y2 <= this.imageHeight) {
+                } catch (error) {
+                    console.error('Error in loadOCRData:', error);
+                }
+            },
+            async saveTemplate() {
 
 
-                    // Xóa box cũ có cùng fieldName trước khi hiển thị lại
-                    this.ocrData = this.ocrData.filter(box => !(box.field === fieldName && box.isManual));
+                let customer_name = null;
+                let customer_coords = null;
+                let fields = [];
+                if (this.manualBoxData.customer_name) {
+                    // Lấy từ manualBoxData nếu có
+                    customer_name = this.manualBoxData.customer_name.text;
+                    customer_coords = this.manualBoxData.customer_name.coords.join(',');
+                    fields =  this.manualBoxData;
+                    console.log('Using manualBoxData for customer_name:', customer_name, customer_coords);
+                } else {
+                    const found = this.ocrData.find(item => item.field === 'customer_name');
+                    if (found) {
+                        customer_name = found.text;
+                        customer_coords = found.field_xy;
+                    }
 
 
-                    // Kiểm tra xem đây có phải box quét chọn hay box OCR
-                    const isFromOCR = this.manualBoxData[fieldName] && this.manualBoxData[fieldName].isFromOCR;
+                    const fieldsByName = {};
+                    this.ocrData.forEach(box => {
+                        if (box.field && !box.isDeleted) {
+                            fieldsByName[box.field] = {
+                                text: box.field,
+                                coords: box.field_xy || ''
+                            };
+                        }
+                    });
+                    fields = (fieldsByName);
+                    console.log('Using ocrData for customer_name:', customer_name, customer_coords);
+                }
 
 
-                    // Hiển thị lại box manual (có nút xóa nếu là quét chọn, không có nút xóa nếu là OCR)
-                    const manualBox = {
-                        text: text || '',
-                        bbox: coords,
-                        field: fieldName,
-                        isManual: true,
-                        showDelete: !isFromOCR,  // Chỉ hiển thị nút xóa nếu KHÔNG phải từ OCR
-                        isDeleted: false,
-                        hideBorder: false
-                    };
+                if (!customer_coords || !customer_name) {
+                    alert("Bạn phải map customer_name (quét/select) trước khi lưu.");
+                    return;
+                }
 
 
-                    this.ocrData.push(manualBox);
-                    // Force re-render
-                    this.$forceUpdate();
-                } else {
-                    console.warn('Invalid coordinates for manual box:', coords);
+                const payload = {
+                    customer_name_text: customer_name || '',
+                    template_name: this.formData.template_name || this.formData.customer_name,
+                    customer_name_xy: customer_coords || [],
+                    fields: fields
+                };
+
+                try {
+                    const res = await fetch('/ocr/save-template', {
+                        method: 'POST',
+                        headers: {
+                            'Content-Type': 'application/json',
+                            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
+                        },
+                        body: JSON.stringify(payload)
+                    });
+                    const json = await res.json();
+                    if (json.success) {
+                        alert(json.message);
+                    } else {
+                        alert('Save failed');
+                    }
+                } catch (err) {
+                    console.error(err);
+                    alert('Save error');
                 }
                 }
-            }
+            },
 
 
         }
         }
     });
     });