Merge branch 'test' into 'dev'

Test

See merge request !1

+root = true
+
+[*]
+charset = utf-8
+end_of_line = lf
+insert_final_newline = true
+indent_style = space
+indent_size = 4
+trim_trailing_whitespace = true
+
+[*.md]
+trim_trailing_whitespace = false
+
+[*.{yml,yaml}]
+indent_size = 2
+
+[docker-compose.yml]
+indent_size = 4

+APP_NAME=Laravel
+APP_ENV=local
+APP_KEY=
+APP_DEBUG=true
+APP_URL=http://localhost
+
+LOG_CHANNEL=stack
+LOG_DEPRECATIONS_CHANNEL=null
+LOG_LEVEL=debug
+
+DB_CONNECTION=mysql
+DB_HOST=127.0.0.1
+DB_PORT=3306
+DB_DATABASE=laravel
+DB_USERNAME=root
+DB_PASSWORD=
+
+BROADCAST_DRIVER=log
+CACHE_DRIVER=file
+FILESYSTEM_DRIVER=local
+QUEUE_CONNECTION=sync
+SESSION_DRIVER=file
+SESSION_LIFETIME=120
+
+MEMCACHED_HOST=127.0.0.1
+
+REDIS_HOST=127.0.0.1
+REDIS_PASSWORD=null
+REDIS_PORT=6379
+
+MAIL_MAILER=smtp
+MAIL_HOST=mailhog
+MAIL_PORT=1025
+MAIL_USERNAME=null
+MAIL_PASSWORD=null
+MAIL_ENCRYPTION=null
+MAIL_FROM_ADDRESS=null
+MAIL_FROM_NAME="${APP_NAME}"
+
+AWS_ACCESS_KEY_ID=
+AWS_SECRET_ACCESS_KEY=
+AWS_DEFAULT_REGION=us-east-1
+AWS_BUCKET=
+AWS_USE_PATH_STYLE_ENDPOINT=false
+
+PUSHER_APP_ID=
+PUSHER_APP_KEY=
+PUSHER_APP_SECRET=
+PUSHER_APP_CLUSTER=mt1
+
+MIX_PUSHER_APP_KEY="${PUSHER_APP_KEY}"
+MIX_PUSHER_APP_CLUSTER="${PUSHER_APP_CLUSTER}"

+* text=auto
+
+*.blade.php diff=html
+*.css diff=css
+*.html diff=html
+*.md diff=markdown
+*.php diff=php
+
+/.github export-ignore
+CHANGELOG.md export-ignore

+/node_modules
+/public/hot
+/public/storage
+/storage/*.key
+/vendor
+.env
+.env.backup
+.phpunit.result.cache
+docker-compose.override.yml
+Homestead.json
+Homestead.yaml
+npm-debug.log
+yarn-error.log
+/.idea
+/.vscode

+php:
+  preset: laravel
+  version: 8
+  disabled:
+    - no_unused_imports
+  finder:
+    not-name:
+      - index.php
+      - server.php
+js:
+  finder:
+    not-name:
+      - webpack.mix.js
+css: true

+<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).

+<?php
+
+namespace App\Console;
+
+use Illuminate\Console\Scheduling\Schedule;
+use Illuminate\Foundation\Console\Kernel as ConsoleKernel;
+
+class Kernel extends ConsoleKernel
+{
+    /**
+     * Define the application's command schedule.
+     *
+     * @param  \Illuminate\Console\Scheduling\Schedule  $schedule
+     * @return void
+     */
+    protected function schedule(Schedule $schedule)
+    {
+        // $schedule->command('inspire')->hourly();
+    }
+
+    /**
+     * Register the commands for the application.
+     *
+     * @return void
+     */
+    protected function commands()
+    {
+        $this->load(__DIR__.'/Commands');
+
+        require base_path('routes/console.php');
+    }
+}

+<?php
+
+namespace App\Exceptions;
+
+use Illuminate\Foundation\Exceptions\Handler as ExceptionHandler;
+use Throwable;
+
+class Handler extends ExceptionHandler
+{
+    /**
+     * A list of the exception types that are not reported.
+     *
+     * @var array<int, class-string<Throwable>>
+     */
+    protected $dontReport = [
+        //
+    ];
+
+    /**
+     * A list of the inputs that are never flashed for validation exceptions.
+     *
+     * @var array<int, string>
+     */
+    protected $dontFlash = [
+        'current_password',
+        'password',
+        'password_confirmation',
+    ];
+
+    /**
+     * Register the exception handling callbacks for the application.
+     *
+     * @return void
+     */
+    public function register()
+    {
+        $this->reportable(function (Throwable $e) {
+            //
+        });
+    }
+}

+<?php
+
+namespace App\Http\Controllers;
+
+use Illuminate\Foundation\Auth\Access\AuthorizesRequests;
+use Illuminate\Foundation\Bus\DispatchesJobs;
+use Illuminate\Foundation\Validation\ValidatesRequests;
+use Illuminate\Routing\Controller as BaseController;
+
+class Controller extends BaseController
+{
+    use AuthorizesRequests, DispatchesJobs, ValidatesRequests;
+}

+<?php
+
+namespace App\Http\Controllers;
+
+use App\Models\DtTemplate;
+use App\Models\MstTemplate;
+use Illuminate\Http\Request;
+
+class OcrController extends Controller
+{
+    public function index()
+    {
+        return view('ocr.index');
+    }
+
+
+    public function store(Request $request)
+    {
+
+//        dd($request->all());
+        $request->validate([
+            'customer_name_text' => 'required|string',
+            'customer_name_xy' => 'required|string',
+            'template_name' => 'required|string|unique:mst_template,tpl_name',
+        ]);
+
+        try {
+            // Lưu vào bảng mst_template
+            $mst = MstTemplate::create([
+                'tpl_name' => $request->template_name,
+                'tpl_text' => $request->customer_name_text,
+                'tpl_xy'   => $request->customer_name_xy,
+            ]);
+
+            // Lưu các field khác vào dt_template
+            foreach ($request->fields as $field => $value) {
+                DtTemplate::create([
+                    'tpl_id'     => $mst->id,
+                    'field_name' => $field,
+                    'field_xy'   => is_array($value['coords']) ? implode(',', $value['coords']) : $value['coords'],
+                ]);
+            }
+
+            return response()->json([
+                'success' => true,
+                'message' => 'Lưu template thành công',
+                'template_id' => $mst->id
+            ]);
+        } catch (\Exception $e) {
+            return response()->json([
+                'success' => false,
+                'message' => 'Lỗi khi lưu template: ' . $e->getMessage()
+            ], 500);
+        }
+    }
+
+
+    public function getData(Request $request)
+    {
+        try {
+            // Lấy template name từ request hoặc mặc định
+            $templateName = $request->get('template_name', '');
+
+            // Giả sử file OCR JSON & ảnh nằm trong storage/app/public/image/
+            $jsonPath = public_path("image/data_picking_detail_1754967679.json");
+            $imgPath = ("image/data_picking_detail_1754967679.jpg");
+
+            if (!file_exists($jsonPath)) {
+                return response()->json(['error' => 'File OCR JSON không tìm thấy'], 404);
+            }
+
+            $ocrData = json_decode(file_get_contents($jsonPath), true);
+            if (json_last_error() !== JSON_ERROR_NONE) {
+                return response()->json(['error' => 'File OCR JSON không hợp lệ'], 400);
+            }
+
+            $dataMapping = [];
+            $is_template = false;
+
+            if ($templateName) {
+                $mst = MstTemplate::where('tpl_name', $templateName)->first();
+
+                if ($mst) {
+                    // Lấy detail của template
+                    $details = DtTemplate::where('tpl_id', $mst->id)->get();
+
+                    foreach ($details as $detail) {
+                        $coords = array_map('intval', explode(',', $detail->field_xy));
+                        // coords = [x1, y1, x2, y2]
+
+                        $dataMapping[$detail->field_name] = [
+                            'text' => '',
+                            'coords' => $coords
+                        ];
+                    }
+                    $dataMapping['template_name'] = [
+                        'text' => $mst->tpl_name,
+                        'coords' => ''
+                    ];
+
+                    $is_template = true;
+
+                }
+            }
+
+            return response()->json([
+                'success' => true,
+                'ocrData'      => $ocrData,
+                'pdfImageUrl'  => $imgPath,
+                'dataMapping'  => $dataMapping,
+                'is_template'  => $is_template,
+                'fieldOptions' => [
+                    [ 'value' => 'template_name',  'label' => 'Tên Mẫu PDF' ],
+                    [ 'value' => 'customer_name',  'label' => 'Tên khách hàng' ],
+                    [ 'value' => 'export_date',    'label' => 'Ngày xuất' ],
+                    [ 'value' => 'order_code',     'label' => 'Mã đơn hàng' ],
+                    [ 'value' => 'customer',       'label' => 'Khách hàng' ],
+                    [ 'value' => 'address',        'label' => 'Địa chỉ' ],
+                    [ 'value' => 'staff',          'label' => 'Nhân viên' ],
+                ],
+                'template_name' => $templateName
+            ]);
+        } catch (\Exception $e) {
+            return response()->json([
+                'success' => false,
+                'error' => 'Lỗi khi load data: ' . $e->getMessage()
+            ], 500);
+        }
+    }
+
+    /**
+     * Lấy danh sách template
+     */
+    public function getTemplateList()
+    {
+        try {
+            $templates = MstTemplate::select('id', 'tpl_name', 'tpl_text', 'in_date')
+                ->orderBy('created_at', 'desc')
+                ->get();
+
+            return response()->json([
+                'success' => true,
+                'templates' => $templates
+            ]);
+        } catch (\Exception $e) {
+            return response()->json([
+                'success' => false,
+                'error' => 'Lỗi khi lấy danh sách template: ' . $e->getMessage()
+            ], 500);
+        }
+    }
+
+    /**
+     * Xóa template
+     */
+    public function deleteTemplate($id)
+    {
+        try {
+            $template = MstTemplate::findOrFail($id);
+
+            // Xóa các field detail trước
+            DtTemplate::where('tpl_id', $id)->delete();
+
+            // Xóa template chính
+            $template->delete();
+
+            return response()->json([
+                'success' => true,
+                'message' => 'Xóa template thành công'
+            ]);
+        } catch (\Exception $e) {
+            return response()->json([
+                'success' => false,
+                'error' => 'Lỗi khi xóa template: ' . $e->getMessage()
+            ], 500);
+        }
+    }
+}

+<?php
+
+namespace App\Http;
+
+use Illuminate\Foundation\Http\Kernel as HttpKernel;
+
+class Kernel extends HttpKernel
+{
+    /**
+     * The application's global HTTP middleware stack.
+     *
+     * These middleware are run during every request to your application.
+     *
+     * @var array<int, class-string|string>
+     */
+    protected $middleware = [
+        // \App\Http\Middleware\TrustHosts::class,
+        \App\Http\Middleware\TrustProxies::class,
+        \Fruitcake\Cors\HandleCors::class,
+        \App\Http\Middleware\PreventRequestsDuringMaintenance::class,
+        \Illuminate\Foundation\Http\Middleware\ValidatePostSize::class,
+        \App\Http\Middleware\TrimStrings::class,
+        \Illuminate\Foundation\Http\Middleware\ConvertEmptyStringsToNull::class,
+    ];
+
+    /**
+     * The application's route middleware groups.
+     *
+     * @var array<string, array<int, class-string|string>>
+     */
+    protected $middlewareGroups = [
+        'web' => [
+            \App\Http\Middleware\EncryptCookies::class,
+            \Illuminate\Cookie\Middleware\AddQueuedCookiesToResponse::class,
+            \Illuminate\Session\Middleware\StartSession::class,
+            // \Illuminate\Session\Middleware\AuthenticateSession::class,
+            \Illuminate\View\Middleware\ShareErrorsFromSession::class,
+            \App\Http\Middleware\VerifyCsrfToken::class,
+            \Illuminate\Routing\Middleware\SubstituteBindings::class,
+        ],
+
+        'api' => [
+            // \Laravel\Sanctum\Http\Middleware\EnsureFrontendRequestsAreStateful::class,
+            'throttle:api',
+            \Illuminate\Routing\Middleware\SubstituteBindings::class,
+        ],
+    ];
+
+    /**
+     * The application's route middleware.
+     *
+     * These middleware may be assigned to groups or used individually.
+     *
+     * @var array<string, class-string|string>
+     */
+    protected $routeMiddleware = [
+        'auth' => \App\Http\Middleware\Authenticate::class,
+        'auth.basic' => \Illuminate\Auth\Middleware\AuthenticateWithBasicAuth::class,
+        'cache.headers' => \Illuminate\Http\Middleware\SetCacheHeaders::class,
+        'can' => \Illuminate\Auth\Middleware\Authorize::class,
+        'guest' => \App\Http\Middleware\RedirectIfAuthenticated::class,
+        'password.confirm' => \Illuminate\Auth\Middleware\RequirePassword::class,
+        'signed' => \Illuminate\Routing\Middleware\ValidateSignature::class,
+        'throttle' => \Illuminate\Routing\Middleware\ThrottleRequests::class,
+        'verified' => \Illuminate\Auth\Middleware\EnsureEmailIsVerified::class,
+    ];
+}

+<?php
+
+namespace App\Http\Middleware;
+
+use Illuminate\Auth\Middleware\Authenticate as Middleware;
+
+class Authenticate extends Middleware
+{
+    /**
+     * Get the path the user should be redirected to when they are not authenticated.
+     *
+     * @param  \Illuminate\Http\Request  $request
+     * @return string|null
+     */
+    protected function redirectTo($request)
+    {
+        if (! $request->expectsJson()) {
+            return route('login');
+        }
+    }
+}

+<?php
+
+namespace App\Http\Middleware;
+
+use Illuminate\Cookie\Middleware\EncryptCookies as Middleware;
+
+class EncryptCookies extends Middleware
+{
+    /**
+     * The names of the cookies that should not be encrypted.
+     *
+     * @var array<int, string>
+     */
+    protected $except = [
+        //
+    ];
+}

+<?php
+
+namespace App\Http\Middleware;
+
+use Illuminate\Foundation\Http\Middleware\PreventRequestsDuringMaintenance as Middleware;
+
+class PreventRequestsDuringMaintenance extends Middleware
+{
+    /**
+     * The URIs that should be reachable while maintenance mode is enabled.
+     *
+     * @var array<int, string>
+     */
+    protected $except = [
+        //
+    ];
+}

+<?php
+
+namespace App\Http\Middleware;
+
+use App\Providers\RouteServiceProvider;
+use Closure;
+use Illuminate\Http\Request;
+use Illuminate\Support\Facades\Auth;
+
+class RedirectIfAuthenticated
+{
+    /**
+     * Handle an incoming request.
+     *
+     * @param  \Illuminate\Http\Request  $request
+     * @param  \Closure(\Illuminate\Http\Request): (\Illuminate\Http\Response|\Illuminate\Http\RedirectResponse)  $next
+     * @param  string|null  ...$guards
+     * @return \Illuminate\Http\Response|\Illuminate\Http\RedirectResponse
+     */
+    public function handle(Request $request, Closure $next, ...$guards)
+    {
+        $guards = empty($guards) ? [null] : $guards;
+
+        foreach ($guards as $guard) {
+            if (Auth::guard($guard)->check()) {
+                return redirect(RouteServiceProvider::HOME);
+            }
+        }
+
+        return $next($request);
+    }
+}

+<?php
+
+namespace App\Http\Middleware;
+
+use Illuminate\Foundation\Http\Middleware\TrimStrings as Middleware;
+
+class TrimStrings extends Middleware
+{
+    /**
+     * The names of the attributes that should not be trimmed.
+     *
+     * @var array<int, string>
+     */
+    protected $except = [
+        'current_password',
+        'password',
+        'password_confirmation',
+    ];
+}

+<?php
+
+namespace App\Http\Middleware;
+
+use Illuminate\Http\Middleware\TrustHosts as Middleware;
+
+class TrustHosts extends Middleware
+{
+    /**
+     * Get the host patterns that should be trusted.
+     *
+     * @return array<int, string|null>
+     */
+    public function hosts()
+    {
+        return [
+            $this->allSubdomainsOfApplicationUrl(),
+        ];
+    }
+}

+<?php
+
+namespace App\Http\Middleware;
+
+use Illuminate\Http\Middleware\TrustProxies as Middleware;
+use Illuminate\Http\Request;
+
+class TrustProxies extends Middleware
+{
+    /**
+     * The trusted proxies for this application.
+     *
+     * @var array<int, string>|string|null
+     */
+    protected $proxies;
+
+    /**
+     * The headers that should be used to detect proxies.
+     *
+     * @var int
+     */
+    protected $headers =
+        Request::HEADER_X_FORWARDED_FOR |
+        Request::HEADER_X_FORWARDED_HOST |
+        Request::HEADER_X_FORWARDED_PORT |
+        Request::HEADER_X_FORWARDED_PROTO |
+        Request::HEADER_X_FORWARDED_AWS_ELB;
+}

+<?php
+
+namespace App\Http\Middleware;
+
+use Illuminate\Foundation\Http\Middleware\VerifyCsrfToken as Middleware;
+
+class VerifyCsrfToken extends Middleware
+{
+    /**
+     * The URIs that should be excluded from CSRF verification.
+     *
+     * @var array<int, string>
+     */
+    protected $except = [
+        //
+    ];
+}

+<?php
+
+namespace App\Models;
+
+use Illuminate\Database\Eloquent\Factories\HasFactory;
+use Illuminate\Database\Eloquent\Model;
+
+class DtTemplate extends Model
+{
+    public $timestamps = false;
+
+    protected $table = 'dt_template';
+    protected $guarded = [];
+
+
+}

+<?php
+
+namespace App\Models;
+
+use Illuminate\Database\Eloquent\Factories\HasFactory;
+use Illuminate\Database\Eloquent\Model;
+
+class MstTemplate extends Model
+{
+    public $timestamps = false;
+
+    protected $table = 'mst_template';
+
+    protected $guarded = [];
+}

+<?php
+
+namespace App\Models;
+
+use Illuminate\Contracts\Auth\MustVerifyEmail;
+use Illuminate\Database\Eloquent\Factories\HasFactory;
+use Illuminate\Foundation\Auth\User as Authenticatable;
+use Illuminate\Notifications\Notifiable;
+use Laravel\Sanctum\HasApiTokens;
+
+class User extends Authenticatable
+{
+    use HasApiTokens, HasFactory, Notifiable;
+
+    /**
+     * The attributes that are mass assignable.
+     *
+     * @var array<int, string>
+     */
+    protected $fillable = [
+        'name',
+        'email',
+        'password',
+    ];
+
+    /**
+     * The attributes that should be hidden for serialization.
+     *
+     * @var array<int, string>
+     */
+    protected $hidden = [
+        'password',
+        'remember_token',
+    ];
+
+    /**
+     * The attributes that should be cast.
+     *
+     * @var array<string, string>
+     */
+    protected $casts = [
+        'email_verified_at' => 'datetime',
+    ];
+}

+<?php
+
+namespace App\Providers;
+
+use Illuminate\Support\ServiceProvider;
+
+class AppServiceProvider extends ServiceProvider
+{
+    /**
+     * Register any application services.
+     *
+     * @return void
+     */
+    public function register()
+    {
+        //
+    }
+
+    /**
+     * Bootstrap any application services.
+     *
+     * @return void
+     */
+    public function boot()
+    {
+        //
+    }
+}

+<?php
+
+namespace App\Providers;
+
+use Illuminate\Foundation\Support\Providers\AuthServiceProvider as ServiceProvider;
+use Illuminate\Support\Facades\Gate;
+
+class AuthServiceProvider extends ServiceProvider
+{
+    /**
+     * The policy mappings for the application.
+     *
+     * @var array<class-string, class-string>
+     */
+    protected $policies = [
+        // 'App\Models\Model' => 'App\Policies\ModelPolicy',
+    ];
+
+    /**
+     * Register any authentication / authorization services.
+     *
+     * @return void
+     */
+    public function boot()
+    {
+        $this->registerPolicies();
+
+        //
+    }
+}

+<?php
+
+namespace App\Providers;
+
+use Illuminate\Support\Facades\Broadcast;
+use Illuminate\Support\ServiceProvider;
+
+class BroadcastServiceProvider extends ServiceProvider
+{
+    /**
+     * Bootstrap any application services.
+     *
+     * @return void
+     */
+    public function boot()
+    {
+        Broadcast::routes();
+
+        require base_path('routes/channels.php');
+    }
+}

+<?php
+
+namespace App\Providers;
+
+use Illuminate\Auth\Events\Registered;
+use Illuminate\Auth\Listeners\SendEmailVerificationNotification;
+use Illuminate\Foundation\Support\Providers\EventServiceProvider as ServiceProvider;
+use Illuminate\Support\Facades\Event;
+
+class EventServiceProvider extends ServiceProvider
+{
+    /**
+     * The event listener mappings for the application.
+     *
+     * @var array<class-string, array<int, class-string>>
+     */
+    protected $listen = [
+        Registered::class => [
+            SendEmailVerificationNotification::class,
+        ],
+    ];
+
+    /**
+     * Register any events for your application.
+     *
+     * @return void
+     */
+    public function boot()
+    {
+        //
+    }
+}

+<?php
+
+namespace App\Providers;
+
+use Illuminate\Cache\RateLimiting\Limit;
+use Illuminate\Foundation\Support\Providers\RouteServiceProvider as ServiceProvider;
+use Illuminate\Http\Request;
+use Illuminate\Support\Facades\RateLimiter;
+use Illuminate\Support\Facades\Route;
+
+class RouteServiceProvider extends ServiceProvider
+{
+    /**
+     * The path to the "home" route for your application.
+     *
+     * This is used by Laravel authentication to redirect users after login.
+     *
+     * @var string
+     */
+    public const HOME = '/home';
+
+    /**
+     * The controller namespace for the application.
+     *
+     * When present, controller route declarations will automatically be prefixed with this namespace.
+     *
+     * @var string|null
+     */
+    // protected $namespace = 'App\\Http\\Controllers';
+
+    /**
+     * Define your route model bindings, pattern filters, etc.
+     *
+     * @return void
+     */
+    public function boot()
+    {
+        $this->configureRateLimiting();
+
+        $this->routes(function () {
+            Route::prefix('api')
+                ->middleware('api')
+                ->namespace($this->namespace)
+                ->group(base_path('routes/api.php'));
+
+            Route::middleware('web')
+                ->namespace($this->namespace)
+                ->group(base_path('routes/web.php'));
+        });
+    }
+
+    /**
+     * Configure the rate limiters for the application.
+     *
+     * @return void
+     */
+    protected function configureRateLimiting()
+    {
+        RateLimiter::for('api', function (Request $request) {
+            return Limit::perMinute(60)->by(optional($request->user())->id ?: $request->ip());
+        });
+    }
+}

+from paddleocr import PaddleOCR
+from pdf2image import convert_from_path
+import os
+import time
+import numpy as np
+import json
+from pathlib import Path
+
+# ==== Config ====
+BASE_DIR = os.path.abspath(os.path.join(os.path.dirname(__file__), "..", "..", ".."))
+
+# PDF path
+pdf_path = Path(BASE_DIR) / "storage" / "pdf" / "test_ocr_temp.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)
+
+# print("PDF Path:", pdf_path)
+# print("Output Folder:", output_folder)
+
+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
+        })
+
+# ==== Save JSON ====
+json_path = os.path.join(output_folder, f"{pdf_name}_{timestamp}.json")
+with open(json_path, "w", encoding="utf-8") as f:
+    json.dump(ocr_data_list, f, ensure_ascii=False, indent=2)
+
+print(f"Saved OCR data JSON to: {json_path}")

+#!/usr/bin/env php
+<?php
+
+define('LARAVEL_START', microtime(true));
+
+/*
+|--------------------------------------------------------------------------
+| Register The Auto Loader
+|--------------------------------------------------------------------------
+|
+| Composer provides a convenient, automatically generated class loader
+| for our application. We just need to utilize it! We'll require it
+| into the script here so that we do not have to worry about the
+| loading of any of our classes manually. It's great to relax.
+|
+*/
+
+require __DIR__.'/vendor/autoload.php';
+
+$app = require_once __DIR__.'/bootstrap/app.php';
+
+/*
+|--------------------------------------------------------------------------
+| Run The Artisan Application
+|--------------------------------------------------------------------------
+|
+| When we run the console application, the current CLI command will be
+| executed in this console and the response sent back to a terminal
+| or another output device for the developers. Here goes nothing!
+|
+*/
+
+$kernel = $app->make(Illuminate\Contracts\Console\Kernel::class);
+
+$status = $kernel->handle(
+    $input = new Symfony\Component\Console\Input\ArgvInput,
+    new Symfony\Component\Console\Output\ConsoleOutput
+);
+
+/*
+|--------------------------------------------------------------------------
+| Shutdown The Application
+|--------------------------------------------------------------------------
+|
+| Once Artisan has finished running, we will fire off the shutdown events
+| so that any final work may be done by the application before we shut
+| down the process. This is the last thing to happen to the request.
+|
+*/
+
+$kernel->terminate($input, $status);
+
+exit($status);

+<?php
+
+/*
+|--------------------------------------------------------------------------
+| Create The Application
+|--------------------------------------------------------------------------
+|
+| The first thing we will do is create a new Laravel application instance
+| which serves as the "glue" for all the components of Laravel, and is
+| the IoC container for the system binding all of the various parts.
+|
+*/
+
+$app = new Illuminate\Foundation\Application(
+    $_ENV['APP_BASE_PATH'] ?? dirname(__DIR__)
+);
+
+/*
+|--------------------------------------------------------------------------
+| Bind Important Interfaces
+|--------------------------------------------------------------------------
+|
+| Next, we need to bind some important interfaces into the container so
+| we will be able to resolve them when needed. The kernels serve the
+| incoming requests to this application from both the web and CLI.
+|
+*/
+
+$app->singleton(
+    Illuminate\Contracts\Http\Kernel::class,
+    App\Http\Kernel::class
+);
+
+$app->singleton(
+    Illuminate\Contracts\Console\Kernel::class,
+    App\Console\Kernel::class
+);
+
+$app->singleton(
+    Illuminate\Contracts\Debug\ExceptionHandler::class,
+    App\Exceptions\Handler::class
+);
+
+/*
+|--------------------------------------------------------------------------
+| Return The Application
+|--------------------------------------------------------------------------
+|
+| This script returns the application instance. The instance is given to
+| the calling script so we can separate the building of the instances
+| from the actual running of the application and sending responses.
+|
+*/
+
+return $app;

+*
+!.gitignore

+{
+    "name": "laravel/laravel",
+    "type": "project",
+    "description": "The Laravel Framework.",
+    "keywords": ["framework", "laravel"],
+    "license": "MIT",
+    "require": {
+        "php": "^7.3|^8.0",
+        "fruitcake/laravel-cors": "^2.0",
+        "guzzlehttp/guzzle": "^7.0.1",
+        "laravel/framework": "^8.75",
+        "laravel/sanctum": "^2.11",
+        "laravel/tinker": "^2.5"
+    },
+    "require-dev": {
+        "facade/ignition": "^2.5",
+        "fakerphp/faker": "^1.9.1",
+        "laravel/sail": "^1.0.1",
+        "mockery/mockery": "^1.4.4",
+        "nunomaduro/collision": "^5.10",
+        "phpunit/phpunit": "^9.5.10"
+    },
+    "autoload": {
+        "psr-4": {
+            "App\\": "app/",
+            "Database\\Factories\\": "database/factories/",
+            "Database\\Seeders\\": "database/seeders/"
+        }
+    },
+    "autoload-dev": {
+        "psr-4": {
+            "Tests\\": "tests/"
+        }
+    },
+    "scripts": {
+        "post-autoload-dump": [
+            "Illuminate\\Foundation\\ComposerScripts::postAutoloadDump",
+            "@php artisan package:discover --ansi"
+        ],
+        "post-update-cmd": [
+            "@php artisan vendor:publish --tag=laravel-assets --ansi --force"
+        ],
+        "post-root-package-install": [
+            "@php -r \"file_exists('.env') || copy('.env.example', '.env');\""
+        ],
+        "post-create-project-cmd": [
+            "@php artisan key:generate --ansi"
+        ]
+    },
+    "extra": {
+        "laravel": {
+            "dont-discover": []
+        }
+    },
+    "config": {
+        "optimize-autoloader": true,
+        "preferred-install": "dist",
+        "sort-packages": true
+    },
+    "minimum-stability": "dev",
+    "prefer-stable": true
+}

+<?php
+
+return [
+
+    /*
+    |--------------------------------------------------------------------------
+    | Application Name
+    |--------------------------------------------------------------------------
+    |
+    | This value is the name of your application. This value is used when the
+    | framework needs to place the application's name in a notification or
+    | any other location as required by the application or its packages.
+    |
+    */
+
+    'name' => env('APP_NAME', 'Laravel'),
+
+    /*
+    |--------------------------------------------------------------------------
+    | Application Environment
+    |--------------------------------------------------------------------------
+    |
+    | This value determines the "environment" your application is currently
+    | running in. This may determine how you prefer to configure various
+    | services the application utilizes. Set this in your ".env" file.
+    |
+    */
+
+    'env' => env('APP_ENV', 'production'),
+
+    /*
+    |--------------------------------------------------------------------------
+    | Application Debug Mode
+    |--------------------------------------------------------------------------
+    |
+    | When your application is in debug mode, detailed error messages with
+    | stack traces will be shown on every error that occurs within your
+    | application. If disabled, a simple generic error page is shown.
+    |
+    */
+
+    'debug' => (bool) env('APP_DEBUG', false),
+
+    /*
+    |--------------------------------------------------------------------------
+    | Application URL
+    |--------------------------------------------------------------------------
+    |
+    | This URL is used by the console to properly generate URLs when using
+    | the Artisan command line tool. You should set this to the root of
+    | your application so that it is used when running Artisan tasks.
+    |
+    */
+
+    'url' => env('APP_URL', 'http://localhost'),
+
+    'asset_url' => env('ASSET_URL', null),
+
+    /*
+    |--------------------------------------------------------------------------
+    | Application Timezone
+    |--------------------------------------------------------------------------
+    |
+    | Here you may specify the default timezone for your application, which
+    | will be used by the PHP date and date-time functions. We have gone
+    | ahead and set this to a sensible default for you out of the box.
+    |
+    */
+
+    'timezone' => 'UTC',
+
+    /*
+    |--------------------------------------------------------------------------
+    | Application Locale Configuration
+    |--------------------------------------------------------------------------
+    |
+    | The application locale determines the default locale that will be used
+    | by the translation service provider. You are free to set this value
+    | to any of the locales which will be supported by the application.
+    |
+    */
+
+    'locale' => 'en',
+
+    /*
+    |--------------------------------------------------------------------------
+    | Application Fallback Locale
+    |--------------------------------------------------------------------------
+    |
+    | The fallback locale determines the locale to use when the current one
+    | is not available. You may change the value to correspond to any of
+    | the language folders that are provided through your application.
+    |
+    */
+
+    'fallback_locale' => 'en',
+
+    /*
+    |--------------------------------------------------------------------------
+    | Faker Locale
+    |--------------------------------------------------------------------------
+    |
+    | This locale will be used by the Faker PHP library when generating fake
+    | data for your database seeds. For example, this will be used to get
+    | localized telephone numbers, street address information and more.
+    |
+    */
+
+    'faker_locale' => 'en_US',
+
+    /*
+    |--------------------------------------------------------------------------
+    | Encryption Key
+    |--------------------------------------------------------------------------
+    |
+    | This key is used by the Illuminate encrypter service and should be set
+    | to a random, 32 character string, otherwise these encrypted strings
+    | will not be safe. Please do this before deploying an application!
+    |
+    */
+
+    'key' => env('APP_KEY'),
+
+    'cipher' => 'AES-256-CBC',
+
+    /*
+    |--------------------------------------------------------------------------
+    | Autoloaded Service Providers
+    |--------------------------------------------------------------------------
+    |
+    | The service providers listed here will be automatically loaded on the
+    | request to your application. Feel free to add your own services to
+    | this array to grant expanded functionality to your applications.
+    |
+    */
+
+    'providers' => [
+
+        /*
+         * Laravel Framework Service Providers...
+         */
+        Illuminate\Auth\AuthServiceProvider::class,
+        Illuminate\Broadcasting\BroadcastServiceProvider::class,
+        Illuminate\Bus\BusServiceProvider::class,
+        Illuminate\Cache\CacheServiceProvider::class,
+        Illuminate\Foundation\Providers\ConsoleSupportServiceProvider::class,
+        Illuminate\Cookie\CookieServiceProvider::class,
+        Illuminate\Database\DatabaseServiceProvider::class,
+        Illuminate\Encryption\EncryptionServiceProvider::class,
+        Illuminate\Filesystem\FilesystemServiceProvider::class,
+        Illuminate\Foundation\Providers\FoundationServiceProvider::class,
+        Illuminate\Hashing\HashServiceProvider::class,
+        Illuminate\Mail\MailServiceProvider::class,
+        Illuminate\Notifications\NotificationServiceProvider::class,
+        Illuminate\Pagination\PaginationServiceProvider::class,
+        Illuminate\Pipeline\PipelineServiceProvider::class,
+        Illuminate\Queue\QueueServiceProvider::class,
+        Illuminate\Redis\RedisServiceProvider::class,
+        Illuminate\Auth\Passwords\PasswordResetServiceProvider::class,
+        Illuminate\Session\SessionServiceProvider::class,
+        Illuminate\Translation\TranslationServiceProvider::class,
+        Illuminate\Validation\ValidationServiceProvider::class,
+        Illuminate\View\ViewServiceProvider::class,
+
+        /*
+         * Package Service Providers...
+         */
+
+        /*
+         * Application Service Providers...
+         */
+        App\Providers\AppServiceProvider::class,
+        App\Providers\AuthServiceProvider::class,
+        // App\Providers\BroadcastServiceProvider::class,
+        App\Providers\EventServiceProvider::class,
+        App\Providers\RouteServiceProvider::class,
+
+    ],
+
+    /*
+    |--------------------------------------------------------------------------
+    | Class Aliases
+    |--------------------------------------------------------------------------
+    |
+    | This array of class aliases will be registered when this application
+    | is started. However, feel free to register as many as you wish as
+    | the aliases are "lazy" loaded so they don't hinder performance.
+    |
+    */
+
+    'aliases' => [
+
+        'App' => Illuminate\Support\Facades\App::class,
+        'Arr' => Illuminate\Support\Arr::class,
+        'Artisan' => Illuminate\Support\Facades\Artisan::class,
+        'Auth' => Illuminate\Support\Facades\Auth::class,
+        'Blade' => Illuminate\Support\Facades\Blade::class,
+        'Broadcast' => Illuminate\Support\Facades\Broadcast::class,
+        'Bus' => Illuminate\Support\Facades\Bus::class,
+        'Cache' => Illuminate\Support\Facades\Cache::class,
+        'Config' => Illuminate\Support\Facades\Config::class,
+        'Cookie' => Illuminate\Support\Facades\Cookie::class,
+        'Crypt' => Illuminate\Support\Facades\Crypt::class,
+        'Date' => Illuminate\Support\Facades\Date::class,
+        'DB' => Illuminate\Support\Facades\DB::class,
+        'Eloquent' => Illuminate\Database\Eloquent\Model::class,
+        'Event' => Illuminate\Support\Facades\Event::class,
+        'File' => Illuminate\Support\Facades\File::class,
+        'Gate' => Illuminate\Support\Facades\Gate::class,
+        'Hash' => Illuminate\Support\Facades\Hash::class,
+        'Http' => Illuminate\Support\Facades\Http::class,
+        'Js' => Illuminate\Support\Js::class,
+        'Lang' => Illuminate\Support\Facades\Lang::class,
+        'Log' => Illuminate\Support\Facades\Log::class,
+        'Mail' => Illuminate\Support\Facades\Mail::class,
+        'Notification' => Illuminate\Support\Facades\Notification::class,
+        'Password' => Illuminate\Support\Facades\Password::class,
+        'Queue' => Illuminate\Support\Facades\Queue::class,
+        'RateLimiter' => Illuminate\Support\Facades\RateLimiter::class,
+        'Redirect' => Illuminate\Support\Facades\Redirect::class,
+        // 'Redis' => Illuminate\Support\Facades\Redis::class,
+        'Request' => Illuminate\Support\Facades\Request::class,
+        'Response' => Illuminate\Support\Facades\Response::class,
+        'Route' => Illuminate\Support\Facades\Route::class,
+        'Schema' => Illuminate\Support\Facades\Schema::class,
+        'Session' => Illuminate\Support\Facades\Session::class,
+        'Storage' => Illuminate\Support\Facades\Storage::class,
+        'Str' => Illuminate\Support\Str::class,
+        'URL' => Illuminate\Support\Facades\URL::class,
+        'Validator' => Illuminate\Support\Facades\Validator::class,
+        'View' => Illuminate\Support\Facades\View::class,
+
+    ],
+
+];

+<?php
+
+return [
+
+    /*
+    |--------------------------------------------------------------------------
+    | Authentication Defaults
+    |--------------------------------------------------------------------------
+    |
+    | This option controls the default authentication "guard" and password
+    | reset options for your application. You may change these defaults
+    | as required, but they're a perfect start for most applications.
+    |
+    */
+
+    'defaults' => [
+        'guard' => 'web',
+        'passwords' => 'users',
+    ],
+
+    /*
+    |--------------------------------------------------------------------------
+    | Authentication Guards
+    |--------------------------------------------------------------------------
+    |
+    | Next, you may define every authentication guard for your application.
+    | Of course, a great default configuration has been defined for you
+    | here which uses session storage and the Eloquent user provider.
+    |
+    | All authentication drivers have a user provider. This defines how the
+    | users are actually retrieved out of your database or other storage
+    | mechanisms used by this application to persist your user's data.
+    |
+    | Supported: "session"
+    |
+    */
+
+    'guards' => [
+        'web' => [
+            'driver' => 'session',
+            'provider' => 'users',
+        ],
+    ],
+
+    /*
+    |--------------------------------------------------------------------------
+    | User Providers
+    |--------------------------------------------------------------------------
+    |
+    | All authentication drivers have a user provider. This defines how the
+    | users are actually retrieved out of your database or other storage
+    | mechanisms used by this application to persist your user's data.
+    |
+    | If you have multiple user tables or models you may configure multiple
+    | sources which represent each model / table. These sources may then
+    | be assigned to any extra authentication guards you have defined.
+    |
+    | Supported: "database", "eloquent"
+    |
+    */
+
+    'providers' => [
+        'users' => [
+            'driver' => 'eloquent',
+            'model' => App\Models\User::class,
+        ],
+
+        // 'users' => [
+        //     'driver' => 'database',
+        //     'table' => 'users',
+        // ],
+    ],
+
+    /*
+    |--------------------------------------------------------------------------
+    | Resetting Passwords
+    |--------------------------------------------------------------------------
+    |
+    | You may specify multiple password reset configurations if you have more
+    | than one user table or model in the application and you want to have
+    | separate password reset settings based on the specific user types.
+    |
+    | The expire time is the number of minutes that each reset token will be
+    | considered valid. This security feature keeps tokens short-lived so
+    | they have less time to be guessed. You may change this as needed.
+    |
+    */
+
+    'passwords' => [
+        'users' => [
+            'provider' => 'users',
+            'table' => 'password_resets',
+            'expire' => 60,
+            'throttle' => 60,
+        ],
+    ],
+
+    /*
+    |--------------------------------------------------------------------------
+    | Password Confirmation Timeout
+    |--------------------------------------------------------------------------
+    |
+    | Here you may define the amount of seconds before a password confirmation
+    | times out and the user is prompted to re-enter their password via the
+    | confirmation screen. By default, the timeout lasts for three hours.
+    |
+    */
+
+    'password_timeout' => 10800,
+
+];

+<?php
+
+return [
+
+    /*
+    |--------------------------------------------------------------------------
+    | Default Broadcaster
+    |--------------------------------------------------------------------------
+    |
+    | This option controls the default broadcaster that will be used by the
+    | framework when an event needs to be broadcast. You may set this to
+    | any of the connections defined in the "connections" array below.
+    |
+    | Supported: "pusher", "ably", "redis", "log", "null"
+    |
+    */
+
+    'default' => env('BROADCAST_DRIVER', 'null'),
+
+    /*
+    |--------------------------------------------------------------------------
+    | Broadcast Connections
+    |--------------------------------------------------------------------------
+    |
+    | Here you may define all of the broadcast connections that will be used
+    | to broadcast events to other systems or over websockets. Samples of
+    | each available type of connection are provided inside this array.
+    |
+    */
+
+    'connections' => [
+
+        'pusher' => [
+            'driver' => 'pusher',
+            'key' => env('PUSHER_APP_KEY'),
+            'secret' => env('PUSHER_APP_SECRET'),
+            'app_id' => env('PUSHER_APP_ID'),
+            'options' => [
+                'cluster' => env('PUSHER_APP_CLUSTER'),
+                'useTLS' => true,
+            ],
+        ],
+
+        'ably' => [
+            'driver' => 'ably',
+            'key' => env('ABLY_KEY'),
+        ],
+
+        'redis' => [
+            'driver' => 'redis',
+            'connection' => 'default',
+        ],
+
+        'log' => [
+            'driver' => 'log',
+        ],
+
+        'null' => [
+            'driver' => 'null',
+        ],
+
+    ],
+
+];

+<?php
+
+use Illuminate\Support\Str;
+
+return [
+
+    /*
+    |--------------------------------------------------------------------------
+    | Default Cache Store
+    |--------------------------------------------------------------------------
+    |
+    | This option controls the default cache connection that gets used while
+    | using this caching library. This connection is used when another is
+    | not explicitly specified when executing a given caching function.
+    |
+    */
+
+    'default' => env('CACHE_DRIVER', 'file'),
+
+    /*
+    |--------------------------------------------------------------------------
+    | Cache Stores
+    |--------------------------------------------------------------------------
+    |
+    | Here you may define all of the cache "stores" for your application as
+    | well as their drivers. You may even define multiple stores for the
+    | same cache driver to group types of items stored in your caches.
+    |
+    | Supported drivers: "apc", "array", "database", "file",
+    |         "memcached", "redis", "dynamodb", "octane", "null"
+    |
+    */
+
+    'stores' => [
+
+        'apc' => [
+            'driver' => 'apc',
+        ],
+
+        'array' => [
+            'driver' => 'array',
+            'serialize' => false,
+        ],
+
+        'database' => [
+            'driver' => 'database',
+            'table' => 'cache',
+            'connection' => null,
+            'lock_connection' => null,
+        ],
+
+        'file' => [
+            'driver' => 'file',
+            'path' => storage_path('framework/cache/data'),
+        ],
+
+        'memcached' => [
+            'driver' => 'memcached',
+            'persistent_id' => env('MEMCACHED_PERSISTENT_ID'),
+            'sasl' => [
+                env('MEMCACHED_USERNAME'),
+                env('MEMCACHED_PASSWORD'),
+            ],
+            'options' => [
+                // Memcached::OPT_CONNECT_TIMEOUT => 2000,
+            ],
+            'servers' => [
+                [
+                    'host' => env('MEMCACHED_HOST', '127.0.0.1'),
+                    'port' => env('MEMCACHED_PORT', 11211),
+                    'weight' => 100,
+                ],
+            ],
+        ],
+
+        'redis' => [
+            'driver' => 'redis',
+            'connection' => 'cache',
+            'lock_connection' => 'default',
+        ],
+
+        'dynamodb' => [
+            'driver' => 'dynamodb',
+            'key' => env('AWS_ACCESS_KEY_ID'),
+            'secret' => env('AWS_SECRET_ACCESS_KEY'),
+            'region' => env('AWS_DEFAULT_REGION', 'us-east-1'),
+            'table' => env('DYNAMODB_CACHE_TABLE', 'cache'),
+            'endpoint' => env('DYNAMODB_ENDPOINT'),
+        ],
+
+        'octane' => [
+            'driver' => 'octane',
+        ],
+
+    ],
+
+    /*
+    |--------------------------------------------------------------------------
+    | Cache Key Prefix
+    |--------------------------------------------------------------------------
+    |
+    | When utilizing a RAM based store such as APC or Memcached, there might
+    | be other applications utilizing the same cache. So, we'll specify a
+    | value to get prefixed to all our keys so we can avoid collisions.
+    |
+    */
+
+    'prefix' => env('CACHE_PREFIX', Str::slug(env('APP_NAME', 'laravel'), '_').'_cache'),
+
+];

+<?php
+
+return [
+
+    /*
+    |--------------------------------------------------------------------------
+    | Cross-Origin Resource Sharing (CORS) Configuration
+    |--------------------------------------------------------------------------
+    |
+    | Here you may configure your settings for cross-origin resource sharing
+    | or "CORS". This determines what cross-origin operations may execute
+    | in web browsers. You are free to adjust these settings as needed.
+    |
+    | To learn more: https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS
+    |
+    */
+
+    'paths' => ['api/*', 'sanctum/csrf-cookie'],
+
+    'allowed_methods' => ['*'],
+
+    'allowed_origins' => ['*'],
+
+    'allowed_origins_patterns' => [],
+
+    'allowed_headers' => ['*'],
+
+    'exposed_headers' => [],
+
+    'max_age' => 0,
+
+    'supports_credentials' => false,
+
+];

+<?php
+
+use Illuminate\Support\Str;
+
+return [
+
+    /*
+    |--------------------------------------------------------------------------
+    | Default Database Connection Name
+    |--------------------------------------------------------------------------
+    |
+    | Here you may specify which of the database connections below you wish
+    | to use as your default connection for all database work. Of course
+    | you may use many connections at once using the Database library.
+    |
+    */
+
+    'default' => env('DB_CONNECTION', 'mysql'),
+
+    /*
+    |--------------------------------------------------------------------------
+    | Database Connections
+    |--------------------------------------------------------------------------
+    |
+    | Here are each of the database connections setup for your application.
+    | Of course, examples of configuring each database platform that is
+    | supported by Laravel is shown below to make development simple.
+    |
+    |
+    | All database work in Laravel is done through the PHP PDO facilities
+    | so make sure you have the driver for your particular database of
+    | choice installed on your machine before you begin development.
+    |
+    */
+
+    'connections' => [
+
+        'sqlite' => [
+            'driver' => 'sqlite',
+            'url' => env('DATABASE_URL'),
+            'database' => env('DB_DATABASE', database_path('database.sqlite')),
+            'prefix' => '',
+            'foreign_key_constraints' => env('DB_FOREIGN_KEYS', true),
+        ],
+
+        'mysql' => [
+            'driver' => 'mysql',
+            'url' => env('DATABASE_URL'),
+            'host' => env('DB_HOST', '127.0.0.1'),
+            'port' => env('DB_PORT', '3306'),
+            'database' => env('DB_DATABASE', 'forge'),
+            'username' => env('DB_USERNAME', 'forge'),
+            'password' => env('DB_PASSWORD', ''),
+            'unix_socket' => env('DB_SOCKET', ''),
+            'charset' => 'utf8mb4',
+            'collation' => 'utf8mb4_unicode_ci',
+            'prefix' => '',
+            'prefix_indexes' => true,
+            'strict' => true,
+            'engine' => null,
+            'options' => extension_loaded('pdo_mysql') ? array_filter([
+                PDO::MYSQL_ATTR_SSL_CA => env('MYSQL_ATTR_SSL_CA'),
+            ]) : [],
+        ],
+
+        'pgsql' => [
+            'driver' => 'pgsql',
+            'url' => env('DATABASE_URL'),
+            'host' => env('DB_HOST', '127.0.0.1'),
+            'port' => env('DB_PORT', '5432'),
+            'database' => env('DB_DATABASE', 'forge'),
+            'username' => env('DB_USERNAME', 'forge'),
+            'password' => env('DB_PASSWORD', ''),
+            'charset' => 'utf8',
+            'prefix' => '',
+            'prefix_indexes' => true,
+            'schema' => 'public',
+            'sslmode' => 'prefer',
+        ],
+
+        'sqlsrv' => [
+            'driver' => 'sqlsrv',
+            'url' => env('DATABASE_URL'),
+            'host' => env('DB_HOST', 'localhost'),
+            'port' => env('DB_PORT', '1433'),
+            'database' => env('DB_DATABASE', 'forge'),
+            'username' => env('DB_USERNAME', 'forge'),
+            'password' => env('DB_PASSWORD', ''),
+            'charset' => 'utf8',
+            'prefix' => '',
+            'prefix_indexes' => true,
+        ],
+
+    ],
+
+    /*
+    |--------------------------------------------------------------------------
+    | Migration Repository Table
+    |--------------------------------------------------------------------------
+    |
+    | This table keeps track of all the migrations that have already run for
+    | your application. Using this information, we can determine which of
+    | the migrations on disk haven't actually been run in the database.
+    |
+    */
+
+    'migrations' => 'migrations',
+
+    /*
+    |--------------------------------------------------------------------------
+    | Redis Databases
+    |--------------------------------------------------------------------------
+    |
+    | Redis is an open source, fast, and advanced key-value store that also
+    | provides a richer body of commands than a typical key-value system
+    | such as APC or Memcached. Laravel makes it easy to dig right in.
+    |
+    */
+
+    'redis' => [
+
+        'client' => env('REDIS_CLIENT', 'phpredis'),
+
+        'options' => [
+            'cluster' => env('REDIS_CLUSTER', 'redis'),
+            'prefix' => env('REDIS_PREFIX', Str::slug(env('APP_NAME', 'laravel'), '_').'_database_'),
+        ],
+
+        'default' => [
+            'url' => env('REDIS_URL'),
+            'host' => env('REDIS_HOST', '127.0.0.1'),
+            'password' => env('REDIS_PASSWORD', null),
+            'port' => env('REDIS_PORT', '6379'),
+            'database' => env('REDIS_DB', '0'),
+        ],
+
+        'cache' => [
+            'url' => env('REDIS_URL'),
+            'host' => env('REDIS_HOST', '127.0.0.1'),
+            'password' => env('REDIS_PASSWORD', null),
+            'port' => env('REDIS_PORT', '6379'),
+            'database' => env('REDIS_CACHE_DB', '1'),
+        ],
+
+    ],
+
+];

+<?php
+
+return [
+
+    /*
+    |--------------------------------------------------------------------------
+    | Default Filesystem Disk
+    |--------------------------------------------------------------------------
+    |
+    | Here you may specify the default filesystem disk that should be used
+    | by the framework. The "local" disk, as well as a variety of cloud
+    | based disks are available to your application. Just store away!
+    |
+    */
+
+    'default' => env('FILESYSTEM_DRIVER', 'local'),
+
+    /*
+    |--------------------------------------------------------------------------
+    | Filesystem Disks
+    |--------------------------------------------------------------------------
+    |
+    | Here you may configure as many filesystem "disks" as you wish, and you
+    | may even configure multiple disks of the same driver. Defaults have
+    | been setup for each driver as an example of the required options.
+    |
+    | Supported Drivers: "local", "ftp", "sftp", "s3"
+    |
+    */
+
+    'disks' => [
+
+        'local' => [
+            'driver' => 'local',
+            'root' => storage_path('app'),
+        ],
+
+        'public' => [
+            'driver' => 'local',
+            'root' => storage_path('app/public'),
+            'url' => env('APP_URL').'/storage',
+            'visibility' => 'public',
+        ],
+
+        's3' => [
+            'driver' => 's3',
+            'key' => env('AWS_ACCESS_KEY_ID'),
+            'secret' => env('AWS_SECRET_ACCESS_KEY'),
+            'region' => env('AWS_DEFAULT_REGION'),
+            'bucket' => env('AWS_BUCKET'),
+            'url' => env('AWS_URL'),
+            'endpoint' => env('AWS_ENDPOINT'),
+            'use_path_style_endpoint' => env('AWS_USE_PATH_STYLE_ENDPOINT', false),
+        ],
+
+    ],
+
+    /*
+    |--------------------------------------------------------------------------
+    | Symbolic Links
+    |--------------------------------------------------------------------------
+    |
+    | Here you may configure the symbolic links that will be created when the
+    | `storage:link` Artisan command is executed. The array keys should be
+    | the locations of the links and the values should be their targets.
+    |
+    */
+
+    'links' => [
+        public_path('storage') => storage_path('app/public'),
+    ],
+
+];

+<?php
+
+return [
+
+    /*
+    |--------------------------------------------------------------------------
+    | Default Hash Driver
+    |--------------------------------------------------------------------------
+    |
+    | This option controls the default hash driver that will be used to hash
+    | passwords for your application. By default, the bcrypt algorithm is
+    | used; however, you remain free to modify this option if you wish.
+    |
+    | Supported: "bcrypt", "argon", "argon2id"
+    |
+    */
+
+    'driver' => 'bcrypt',
+
+    /*
+    |--------------------------------------------------------------------------
+    | Bcrypt Options
+    |--------------------------------------------------------------------------
+    |
+    | Here you may specify the configuration options that should be used when
+    | passwords are hashed using the Bcrypt algorithm. This will allow you
+    | to control the amount of time it takes to hash the given password.
+    |
+    */
+
+    'bcrypt' => [
+        'rounds' => env('BCRYPT_ROUNDS', 10),
+    ],
+
+    /*
+    |--------------------------------------------------------------------------
+    | Argon Options
+    |--------------------------------------------------------------------------
+    |
+    | Here you may specify the configuration options that should be used when
+    | passwords are hashed using the Argon algorithm. These will allow you
+    | to control the amount of time it takes to hash the given password.
+    |
+    */
+
+    'argon' => [
+        'memory' => 65536,
+        'threads' => 1,
+        'time' => 4,
+    ],
+
+];

+<?php
+
+use Monolog\Handler\NullHandler;
+use Monolog\Handler\StreamHandler;
+use Monolog\Handler\SyslogUdpHandler;
+
+return [
+
+    /*
+    |--------------------------------------------------------------------------
+    | Default Log Channel
+    |--------------------------------------------------------------------------
+    |
+    | This option defines the default log channel that gets used when writing
+    | messages to the logs. The name specified in this option should match
+    | one of the channels defined in the "channels" configuration array.
+    |
+    */
+
+    'default' => env('LOG_CHANNEL', 'stack'),
+
+    /*
+    |--------------------------------------------------------------------------
+    | Deprecations Log Channel
+    |--------------------------------------------------------------------------
+    |
+    | This option controls the log channel that should be used to log warnings
+    | regarding deprecated PHP and library features. This allows you to get
+    | your application ready for upcoming major versions of dependencies.
+    |
+    */
+
+    'deprecations' => env('LOG_DEPRECATIONS_CHANNEL', 'null'),
+
+    /*
+    |--------------------------------------------------------------------------
+    | Log Channels
+    |--------------------------------------------------------------------------
+    |
+    | Here you may configure the log channels for your application. Out of
+    | the box, Laravel uses the Monolog PHP logging library. This gives
+    | you a variety of powerful log handlers / formatters to utilize.
+    |
+    | Available Drivers: "single", "daily", "slack", "syslog",
+    |                    "errorlog", "monolog",
+    |                    "custom", "stack"
+    |
+    */
+
+    'channels' => [
+        'stack' => [
+            'driver' => 'stack',
+            'channels' => ['single'],
+            'ignore_exceptions' => false,
+        ],
+
+        'single' => [
+            'driver' => 'single',
+            'path' => storage_path('logs/laravel.log'),
+            'level' => env('LOG_LEVEL', 'debug'),
+        ],
+
+        'daily' => [
+            'driver' => 'daily',
+            'path' => storage_path('logs/laravel.log'),
+            'level' => env('LOG_LEVEL', 'debug'),
+            'days' => 14,
+        ],
+
+        'slack' => [
+            'driver' => 'slack',
+            'url' => env('LOG_SLACK_WEBHOOK_URL'),
+            'username' => 'Laravel Log',
+            'emoji' => ':boom:',
+            'level' => env('LOG_LEVEL', 'critical'),
+        ],
+
+        'papertrail' => [
+            'driver' => 'monolog',
+            'level' => env('LOG_LEVEL', 'debug'),
+            'handler' => SyslogUdpHandler::class,
+            'handler_with' => [
+                'host' => env('PAPERTRAIL_URL'),
+                'port' => env('PAPERTRAIL_PORT'),
+            ],
+        ],
+
+        'stderr' => [
+            'driver' => 'monolog',
+            'level' => env('LOG_LEVEL', 'debug'),
+            'handler' => StreamHandler::class,
+            'formatter' => env('LOG_STDERR_FORMATTER'),
+            'with' => [
+                'stream' => 'php://stderr',
+            ],
+        ],
+
+        'syslog' => [
+            'driver' => 'syslog',
+            'level' => env('LOG_LEVEL', 'debug'),
+        ],
+
+        'errorlog' => [
+            'driver' => 'errorlog',
+            'level' => env('LOG_LEVEL', 'debug'),
+        ],
+
+        'null' => [
+            'driver' => 'monolog',
+            'handler' => NullHandler::class,
+        ],
+
+        'emergency' => [
+            'path' => storage_path('logs/laravel.log'),
+        ],
+    ],
+
+];

+<?php
+
+return [
+
+    /*
+    |--------------------------------------------------------------------------
+    | Default Mailer
+    |--------------------------------------------------------------------------
+    |
+    | This option controls the default mailer that is used to send any email
+    | messages sent by your application. Alternative mailers may be setup
+    | and used as needed; however, this mailer will be used by default.
+    |
+    */
+
+    'default' => env('MAIL_MAILER', 'smtp'),
+
+    /*
+    |--------------------------------------------------------------------------
+    | Mailer Configurations
+    |--------------------------------------------------------------------------
+    |
+    | Here you may configure all of the mailers used by your application plus
+    | their respective settings. Several examples have been configured for
+    | you and you are free to add your own as your application requires.
+    |
+    | Laravel supports a variety of mail "transport" drivers to be used while
+    | sending an e-mail. You will specify which one you are using for your
+    | mailers below. You are free to add additional mailers as required.
+    |
+    | Supported: "smtp", "sendmail", "mailgun", "ses",
+    |            "postmark", "log", "array", "failover"
+    |
+    */
+
+    'mailers' => [
+        'smtp' => [
+            'transport' => 'smtp',
+            'host' => env('MAIL_HOST', 'smtp.mailgun.org'),
+            'port' => env('MAIL_PORT', 587),
+            'encryption' => env('MAIL_ENCRYPTION', 'tls'),
+            'username' => env('MAIL_USERNAME'),
+            'password' => env('MAIL_PASSWORD'),
+            'timeout' => null,
+            'auth_mode' => null,
+        ],
+
+        'ses' => [
+            'transport' => 'ses',
+        ],
+
+        'mailgun' => [
+            'transport' => 'mailgun',
+        ],
+
+        'postmark' => [
+            'transport' => 'postmark',
+        ],
+
+        'sendmail' => [
+            'transport' => 'sendmail',
+            'path' => env('MAIL_SENDMAIL_PATH', '/usr/sbin/sendmail -t -i'),
+        ],
+
+        'log' => [
+            'transport' => 'log',
+            'channel' => env('MAIL_LOG_CHANNEL'),
+        ],
+
+        'array' => [
+            'transport' => 'array',
+        ],
+
+        'failover' => [
+            'transport' => 'failover',
+            'mailers' => [
+                'smtp',
+                'log',
+            ],
+        ],
+    ],
+
+    /*
+    |--------------------------------------------------------------------------
+    | Global "From" Address
+    |--------------------------------------------------------------------------
+    |
+    | You may wish for all e-mails sent by your application to be sent from
+    | the same address. Here, you may specify a name and address that is
+    | used globally for all e-mails that are sent by your application.
+    |
+    */
+
+    'from' => [
+        'address' => env('MAIL_FROM_ADDRESS', 'hello@example.com'),
+        'name' => env('MAIL_FROM_NAME', 'Example'),
+    ],
+
+    /*
+    |--------------------------------------------------------------------------
+    | Markdown Mail Settings
+    |--------------------------------------------------------------------------
+    |
+    | If you are using Markdown based email rendering, you may configure your
+    | theme and component paths here, allowing you to customize the design
+    | of the emails. Or, you may simply stick with the Laravel defaults!
+    |
+    */
+
+    'markdown' => [
+        'theme' => 'default',
+
+        'paths' => [
+            resource_path('views/vendor/mail'),
+        ],
+    ],
+
+];

+<?php
+
+return [
+
+    /*
+    |--------------------------------------------------------------------------
+    | Default Queue Connection Name
+    |--------------------------------------------------------------------------
+    |
+    | Laravel's queue API supports an assortment of back-ends via a single
+    | API, giving you convenient access to each back-end using the same
+    | syntax for every one. Here you may define a default connection.
+    |
+    */
+
+    'default' => env('QUEUE_CONNECTION', 'sync'),
+
+    /*
+    |--------------------------------------------------------------------------
+    | Queue Connections
+    |--------------------------------------------------------------------------
+    |
+    | Here you may configure the connection information for each server that
+    | is used by your application. A default configuration has been added
+    | for each back-end shipped with Laravel. You are free to add more.
+    |
+    | Drivers: "sync", "database", "beanstalkd", "sqs", "redis", "null"
+    |
+    */
+
+    'connections' => [
+
+        'sync' => [
+            'driver' => 'sync',
+        ],
+
+        'database' => [
+            'driver' => 'database',
+            'table' => 'jobs',
+            'queue' => 'default',
+            'retry_after' => 90,
+            'after_commit' => false,
+        ],
+
+        'beanstalkd' => [
+            'driver' => 'beanstalkd',
+            'host' => 'localhost',
+            'queue' => 'default',
+            'retry_after' => 90,
+            'block_for' => 0,
+            'after_commit' => false,
+        ],
+
+        'sqs' => [
+            'driver' => 'sqs',
+            'key' => env('AWS_ACCESS_KEY_ID'),
+            'secret' => env('AWS_SECRET_ACCESS_KEY'),
+            'prefix' => env('SQS_PREFIX', 'https://sqs.us-east-1.amazonaws.com/your-account-id'),
+            'queue' => env('SQS_QUEUE', 'default'),
+            'suffix' => env('SQS_SUFFIX'),
+            'region' => env('AWS_DEFAULT_REGION', 'us-east-1'),
+            'after_commit' => false,
+        ],
+
+        'redis' => [
+            'driver' => 'redis',
+            'connection' => 'default',
+            'queue' => env('REDIS_QUEUE', 'default'),
+            'retry_after' => 90,
+            'block_for' => null,
+            'after_commit' => false,
+        ],
+
+    ],
+
+    /*
+    |--------------------------------------------------------------------------
+    | Failed Queue Jobs
+    |--------------------------------------------------------------------------
+    |
+    | These options configure the behavior of failed queue job logging so you
+    | can control which database and table are used to store the jobs that
+    | have failed. You may change them to any database / table you wish.
+    |
+    */
+
+    'failed' => [
+        'driver' => env('QUEUE_FAILED_DRIVER', 'database-uuids'),
+        'database' => env('DB_CONNECTION', 'mysql'),
+        'table' => 'failed_jobs',
+    ],
+
+];

+<?php
+
+return [
+
+    /*
+    |--------------------------------------------------------------------------
+    | Stateful Domains
+    |--------------------------------------------------------------------------
+    |
+    | Requests from the following domains / hosts will receive stateful API
+    | authentication cookies. Typically, these should include your local
+    | and production domains which access your API via a frontend SPA.
+    |
+    */
+
+    'stateful' => explode(',', env('SANCTUM_STATEFUL_DOMAINS', sprintf(
+        '%s%s',
+        'localhost,localhost:3000,127.0.0.1,127.0.0.1:8000,::1',
+        env('APP_URL') ? ','.parse_url(env('APP_URL'), PHP_URL_HOST) : ''
+    ))),
+
+    /*
+    |--------------------------------------------------------------------------
+    | Sanctum Guards
+    |--------------------------------------------------------------------------
+    |
+    | This array contains the authentication guards that will be checked when
+    | Sanctum is trying to authenticate a request. If none of these guards
+    | are able to authenticate the request, Sanctum will use the bearer
+    | token that's present on an incoming request for authentication.
+    |
+    */
+
+    'guard' => ['web'],
+
+    /*
+    |--------------------------------------------------------------------------
+    | Expiration Minutes
+    |--------------------------------------------------------------------------
+    |
+    | This value controls the number of minutes until an issued token will be
+    | considered expired. If this value is null, personal access tokens do
+    | not expire. This won't tweak the lifetime of first-party sessions.
+    |
+    */
+
+    'expiration' => null,
+
+    /*
+    |--------------------------------------------------------------------------
+    | Sanctum Middleware
+    |--------------------------------------------------------------------------
+    |
+    | When authenticating your first-party SPA with Sanctum you may need to
+    | customize some of the middleware Sanctum uses while processing the
+    | request. You may change the middleware listed below as required.
+    |
+    */
+
+    'middleware' => [
+        'verify_csrf_token' => App\Http\Middleware\VerifyCsrfToken::class,
+        'encrypt_cookies' => App\Http\Middleware\EncryptCookies::class,
+    ],
+
+];

+<?php
+
+return [
+
+    /*
+    |--------------------------------------------------------------------------
+    | Third Party Services
+    |--------------------------------------------------------------------------
+    |
+    | This file is for storing the credentials for third party services such
+    | as Mailgun, Postmark, AWS and more. This file provides the de facto
+    | location for this type of information, allowing packages to have
+    | a conventional file to locate the various service credentials.
+    |
+    */
+
+    'mailgun' => [
+        'domain' => env('MAILGUN_DOMAIN'),
+        'secret' => env('MAILGUN_SECRET'),
+        'endpoint' => env('MAILGUN_ENDPOINT', 'api.mailgun.net'),
+    ],
+
+    'postmark' => [
+        'token' => env('POSTMARK_TOKEN'),
+    ],
+
+    'ses' => [
+        'key' => env('AWS_ACCESS_KEY_ID'),
+        'secret' => env('AWS_SECRET_ACCESS_KEY'),
+        'region' => env('AWS_DEFAULT_REGION', 'us-east-1'),
+    ],
+
+];

+<?php
+
+use Illuminate\Support\Str;
+
+return [
+
+    /*
+    |--------------------------------------------------------------------------
+    | Default Session Driver
+    |--------------------------------------------------------------------------
+    |
+    | This option controls the default session "driver" that will be used on
+    | requests. By default, we will use the lightweight native driver but
+    | you may specify any of the other wonderful drivers provided here.
+    |
+    | Supported: "file", "cookie", "database", "apc",
+    |            "memcached", "redis", "dynamodb", "array"
+    |
+    */
+
+    'driver' => env('SESSION_DRIVER', 'file'),
+
+    /*
+    |--------------------------------------------------------------------------
+    | Session Lifetime
+    |--------------------------------------------------------------------------
+    |
+    | Here you may specify the number of minutes that you wish the session
+    | to be allowed to remain idle before it expires. If you want them
+    | to immediately expire on the browser closing, set that option.
+    |
+    */
+
+    'lifetime' => env('SESSION_LIFETIME', 120),
+
+    'expire_on_close' => false,
+
+    /*
+    |--------------------------------------------------------------------------
+    | Session Encryption
+    |--------------------------------------------------------------------------
+    |
+    | This option allows you to easily specify that all of your session data
+    | should be encrypted before it is stored. All encryption will be run
+    | automatically by Laravel and you can use the Session like normal.
+    |
+    */
+
+    'encrypt' => false,
+
+    /*
+    |--------------------------------------------------------------------------
+    | Session File Location
+    |--------------------------------------------------------------------------
+    |
+    | When using the native session driver, we need a location where session
+    | files may be stored. A default has been set for you but a different
+    | location may be specified. This is only needed for file sessions.
+    |
+    */
+
+    'files' => storage_path('framework/sessions'),
+
+    /*
+    |--------------------------------------------------------------------------
+    | Session Database Connection
+    |--------------------------------------------------------------------------
+    |
+    | When using the "database" or "redis" session drivers, you may specify a
+    | connection that should be used to manage these sessions. This should
+    | correspond to a connection in your database configuration options.
+    |
+    */
+
+    'connection' => env('SESSION_CONNECTION', null),
+
+    /*
+    |--------------------------------------------------------------------------
+    | Session Database Table
+    |--------------------------------------------------------------------------
+    |
+    | When using the "database" session driver, you may specify the table we
+    | should use to manage the sessions. Of course, a sensible default is
+    | provided for you; however, you are free to change this as needed.
+    |
+    */
+
+    'table' => 'sessions',
+
+    /*
+    |--------------------------------------------------------------------------
+    | Session Cache Store
+    |--------------------------------------------------------------------------
+    |
+    | While using one of the framework's cache driven session backends you may
+    | list a cache store that should be used for these sessions. This value
+    | must match with one of the application's configured cache "stores".
+    |
+    | Affects: "apc", "dynamodb", "memcached", "redis"
+    |
+    */
+
+    'store' => env('SESSION_STORE', null),
+
+    /*
+    |--------------------------------------------------------------------------
+    | Session Sweeping Lottery
+    |--------------------------------------------------------------------------
+    |
+    | Some session drivers must manually sweep their storage location to get
+    | rid of old sessions from storage. Here are the chances that it will
+    | happen on a given request. By default, the odds are 2 out of 100.
+    |
+    */
+
+    'lottery' => [2, 100],
+
+    /*
+    |--------------------------------------------------------------------------
+    | Session Cookie Name
+    |--------------------------------------------------------------------------
+    |
+    | Here you may change the name of the cookie used to identify a session
+    | instance by ID. The name specified here will get used every time a
+    | new session cookie is created by the framework for every driver.
+    |
+    */
+
+    'cookie' => env(
+        'SESSION_COOKIE',
+        Str::slug(env('APP_NAME', 'laravel'), '_').'_session'
+    ),
+
+    /*
+    |--------------------------------------------------------------------------
+    | Session Cookie Path
+    |--------------------------------------------------------------------------
+    |
+    | The session cookie path determines the path for which the cookie will
+    | be regarded as available. Typically, this will be the root path of
+    | your application but you are free to change this when necessary.
+    |
+    */
+
+    'path' => '/',
+
+    /*
+    |--------------------------------------------------------------------------
+    | Session Cookie Domain
+    |--------------------------------------------------------------------------
+    |
+    | Here you may change the domain of the cookie used to identify a session
+    | in your application. This will determine which domains the cookie is
+    | available to in your application. A sensible default has been set.
+    |
+    */
+
+    'domain' => env('SESSION_DOMAIN', null),
+
+    /*
+    |--------------------------------------------------------------------------
+    | HTTPS Only Cookies
+    |--------------------------------------------------------------------------
+    |
+    | By setting this option to true, session cookies will only be sent back
+    | to the server if the browser has a HTTPS connection. This will keep
+    | the cookie from being sent to you when it can't be done securely.
+    |
+    */
+
+    'secure' => env('SESSION_SECURE_COOKIE'),
+
+    /*
+    |--------------------------------------------------------------------------
+    | HTTP Access Only
+    |--------------------------------------------------------------------------
+    |
+    | Setting this value to true will prevent JavaScript from accessing the
+    | value of the cookie and the cookie will only be accessible through
+    | the HTTP protocol. You are free to modify this option if needed.
+    |
+    */
+
+    'http_only' => true,
+
+    /*
+    |--------------------------------------------------------------------------
+    | Same-Site Cookies
+    |--------------------------------------------------------------------------
+    |
+    | This option determines how your cookies behave when cross-site requests
+    | take place, and can be used to mitigate CSRF attacks. By default, we
+    | will set this value to "lax" since this is a secure default value.
+    |
+    | Supported: "lax", "strict", "none", null
+    |
+    */
+
+    'same_site' => 'lax',
+
+];

+<?php
+
+return [
+
+    /*
+    |--------------------------------------------------------------------------
+    | View Storage Paths
+    |--------------------------------------------------------------------------
+    |
+    | Most templating systems load templates from disk. Here you may specify
+    | an array of paths that should be checked for your views. Of course
+    | the usual Laravel view path has already been registered for you.
+    |
+    */
+
+    'paths' => [
+        resource_path('views'),
+    ],
+
+    /*
+    |--------------------------------------------------------------------------
+    | Compiled View Path
+    |--------------------------------------------------------------------------
+    |
+    | This option determines where all the compiled Blade templates will be
+    | stored for your application. Typically, this is within the storage
+    | directory. However, as usual, you are free to change this value.
+    |
+    */
+
+    'compiled' => env(
+        'VIEW_COMPILED_PATH',
+        realpath(storage_path('framework/views'))
+    ),
+
+];

+*.sqlite*

+<?php
+
+namespace Database\Factories;
+
+use Illuminate\Database\Eloquent\Factories\Factory;
+use Illuminate\Support\Str;
+
+class UserFactory extends Factory
+{
+    /**
+     * Define the model's default state.
+     *
+     * @return array
+     */
+    public function definition()
+    {
+        return [
+            'name' => $this->faker->name(),
+            'email' => $this->faker->unique()->safeEmail(),
+            'email_verified_at' => now(),
+            'password' => '$2y$10$92IXUNpkjO0rOQ5byMi.Ye4oKoEa3Ro9llC/.og/at2.uheWG/igi', // password
+            'remember_token' => Str::random(10),
+        ];
+    }
+
+    /**
+     * Indicate that the model's email address should be unverified.
+     *
+     * @return \Illuminate\Database\Eloquent\Factories\Factory
+     */
+    public function unverified()
+    {
+        return $this->state(function (array $attributes) {
+            return [
+                'email_verified_at' => null,
+            ];
+        });
+    }
+}

+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+class CreateUsersTable extends Migration
+{
+    /**
+     * Run the migrations.
+     *
+     * @return void
+     */
+    public function up()
+    {
+        Schema::create('users', function (Blueprint $table) {
+            $table->id();
+            $table->string('name');
+            $table->string('email')->unique();
+            $table->timestamp('email_verified_at')->nullable();
+            $table->string('password');
+            $table->rememberToken();
+            $table->timestamps();
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     *
+     * @return void
+     */
+    public function down()
+    {
+        Schema::dropIfExists('users');
+    }
+}

+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+class CreatePasswordResetsTable extends Migration
+{
+    /**
+     * Run the migrations.
+     *
+     * @return void
+     */
+    public function up()
+    {
+        Schema::create('password_resets', function (Blueprint $table) {
+            $table->string('email')->index();
+            $table->string('token');
+            $table->timestamp('created_at')->nullable();
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     *
+     * @return void
+     */
+    public function down()
+    {
+        Schema::dropIfExists('password_resets');
+    }
+}

+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+class CreateFailedJobsTable extends Migration
+{
+    /**
+     * Run the migrations.
+     *
+     * @return void
+     */
+    public function up()
+    {
+        Schema::create('failed_jobs', function (Blueprint $table) {
+            $table->id();
+            $table->string('uuid')->unique();
+            $table->text('connection');
+            $table->text('queue');
+            $table->longText('payload');
+            $table->longText('exception');
+            $table->timestamp('failed_at')->useCurrent();
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     *
+     * @return void
+     */
+    public function down()
+    {
+        Schema::dropIfExists('failed_jobs');
+    }
+}

+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+class CreatePersonalAccessTokensTable extends Migration
+{
+    /**
+     * Run the migrations.
+     *
+     * @return void
+     */
+    public function up()
+    {
+        Schema::create('personal_access_tokens', function (Blueprint $table) {
+            $table->id();
+            $table->morphs('tokenable');
+            $table->string('name');
+            $table->string('token', 64)->unique();
+            $table->text('abilities')->nullable();
+            $table->timestamp('last_used_at')->nullable();
+            $table->timestamps();
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     *
+     * @return void
+     */
+    public function down()
+    {
+        Schema::dropIfExists('personal_access_tokens');
+    }
+}

+<?php
+
+namespace Database\Seeders;
+
+use Illuminate\Database\Seeder;
+
+class DatabaseSeeder extends Seeder
+{
+    /**
+     * Seed the application's database.
+     *
+     * @return void
+     */
+    public function run()
+    {
+        // \App\Models\User::factory(10)->create();
+    }
+}

+{
+    "private": true,
+    "scripts": {
+        "dev": "npm run development",
+        "development": "mix",
+        "watch": "mix watch",
+        "watch-poll": "mix watch -- --watch-options-poll=1000",
+        "hot": "mix watch --hot",
+        "prod": "npm run production",
+        "production": "mix --production"
+    },
+    "devDependencies": {
+        "axios": "^0.21",
+        "laravel-mix": "^6.0.6",
+        "lodash": "^4.17.19",
+        "postcss": "^8.1.14"
+    }
+}

+<?xml version="1.0" encoding="UTF-8"?>
+<phpunit xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+         xsi:noNamespaceSchemaLocation="./vendor/phpunit/phpunit/phpunit.xsd"
+         bootstrap="vendor/autoload.php"
+         colors="true"
+>
+    <testsuites>
+        <testsuite name="Unit">
+            <directory suffix="Test.php">./tests/Unit</directory>
+        </testsuite>
+        <testsuite name="Feature">
+            <directory suffix="Test.php">./tests/Feature</directory>
+        </testsuite>
+    </testsuites>
+    <coverage processUncoveredFiles="true">
+        <include>
+            <directory suffix=".php">./app</directory>
+        </include>
+    </coverage>
+    <php>
+        <server name="APP_ENV" value="testing"/>
+        <server name="BCRYPT_ROUNDS" value="4"/>
+        <server name="CACHE_DRIVER" value="array"/>
+        <!-- <server name="DB_CONNECTION" value="sqlite"/> -->
+        <!-- <server name="DB_DATABASE" value=":memory:"/> -->
+        <server name="MAIL_MAILER" value="array"/>
+        <server name="QUEUE_CONNECTION" value="sync"/>
+        <server name="SESSION_DRIVER" value="array"/>
+        <server name="TELESCOPE_ENABLED" value="false"/>
+    </php>
+</phpunit>

+<IfModule mod_rewrite.c>
+    <IfModule mod_negotiation.c>
+        Options -MultiViews -Indexes
+    </IfModule>
+
+    RewriteEngine On
+
+    # Handle Authorization Header
+    RewriteCond %{HTTP:Authorization} .
+    RewriteRule .* - [E=HTTP_AUTHORIZATION:%{HTTP:Authorization}]
+
+    # Redirect Trailing Slashes If Not A Folder...
+    RewriteCond %{REQUEST_FILENAME} !-d
+    RewriteCond %{REQUEST_URI} (.+)/$
+    RewriteRule ^ %1 [L,R=301]
+
+    # Send Requests To Front Controller...
+    RewriteCond %{REQUEST_FILENAME} !-d
+    RewriteCond %{REQUEST_FILENAME} !-f
+    RewriteRule ^ index.php [L]
+</IfModule>

+[
+  {
+    "text": "出庫指示書",
+    "bbox": [
+      65,
+      73,
+      449,
+      128
+    ],
+    "field": "",
+    "hideBorder": false
+  },
+  {
+    "text": "出庫指示No.",
+    "bbox": [
+      1303,
+      76,
+      1472,
+      111
+    ],
+    "field": "",
+    "hideBorder": false
+  },
+  {
+    "text": "391189",
+    "bbox": [
+      1498,
+      78,
+      1604,
+      110
+    ],
+    "field": "",
+    "hideBorder": false
+  },
+  {
+    "text": "2025/06/24",
+    "bbox": [
+      952,
+      94,
+      1106,
+      121
+    ],
+    "field": "",
+    "hideBorder": false
+  },
+  {
+    "text": "18:57迄",
+    "bbox": [
+      1139,
+      89,
+      1250,
+      124
+    ],
+    "field": "",
+    "hideBorder": false
+  },
+  {
+    "text": "PAGE1/1",
+    "bbox": [
+      1473,
+      121,
+      1594,
+      153
+    ],
+    "field": "",
+    "hideBorder": false
+  },
+  {
+    "text": "運送形態",
+    "bbox": [
+      83,
+      145,
+      239,
+      184
+    ],
+    "field": "",
+    "hideBorder": false
+  },
+  {
+    "text": "30西濃運輸",
+    "bbox": [
+      234,
+      144,
+      485,
+      185
+    ],
+    "field": "",
+    "hideBorder": false
+  },
+  {
+    "text": "得意先",
+    "bbox": [
+      84,
+      206,
+      202,
+      246
+    ],
+    "field": "",
+    "hideBorder": false
+  },
+  {
+    "text": "42031(株)フジカケ",
+    "bbox": [
+      243,
+      206,
+      556,
+      244
+    ],
+    "field": "",
+    "hideBorder": false
+  },
+  {
+    "text": "ミタケ",
+    "bbox": [
+      536,
+      205,
+      707,
+      247
+    ],
+    "field": "",
+    "hideBorder": false
+  },
+  {
+    "text": "住所",
+    "bbox": [
+      84,
+      266,
+      179,
+      298
+    ],
+    "field": "",
+    "hideBorder": false
+  },
+  {
+    "text": "〒5050100岐阜県可児郡御嵩町中2411－7",
+    "bbox": [
+      207,
+      267,
+      834,
+      297
+    ],
+    "field": "",
+    "hideBorder": false
+  },
+  {
+    "text": "電話番号",
+    "bbox": [
+      88,
+      308,
+      214,
+      340
+    ],
+    "field": "",
+    "hideBorder": false
+  },
+  {
+    "text": "0574673181",
+    "bbox": [
+      215,
+      310,
+      382,
+      338
+    ],
+    "field": "",
+    "hideBorder": false
+  },
+  {
+    "text": "出庫者",
+    "bbox": [
+      925,
+      331,
+      1008,
+      367
+    ],
+    "field": "",
+    "hideBorder": false
+  },
+  {
+    "text": "検品者",
+    "bbox": [
+      1176,
+      330,
+      1261,
+      366
+    ],
+    "field": "",
+    "hideBorder": false
+  },
+  {
+    "text": "包者",
+    "bbox": [
+      1431,
+      331,
+      1516,
+      367
+    ],
+    "field": "",
+    "hideBorder": false
+  },
+  {
+    "text": "担当者",
+    "bbox": [
+      86,
+      344,
+      182,
+      381
+    ],
+    "field": "",
+    "hideBorder": false
+  },
+  {
+    "text": "NAS00240渡邊雅章",
+    "bbox": [
+      239,
+      343,
+      518,
+      380
+    ],
+    "field": "",
+    "hideBorder": false
+  },
+  {
+    "text": "摘要",
+    "bbox": [
+      83,
+      386,
+      183,
+      429
+    ],
+    "field": "",
+    "hideBorder": false
+  },
+  {
+    "text": "棚番",
+    "bbox": [
+      34,
+      515,
+      97,
+      554
+    ],
+    "field": "",
+    "hideBorder": false
+  },
+  {
+    "text": "品",
+    "bbox": [
+      345,
+      519,
+      378,
+      552
+    ],
+    "field": "",
+    "hideBorder": false
+  },
+  {
+    "text": "名",
+    "bbox": [
+      423,
+      519,
+      456,
+      551
+    ],
+    "field": "",
+    "hideBorder": false
+  },
+  {
+    "text": "規",
+    "bbox": [
+      870,
+      517,
+      909,
+      552
+    ],
+    "field": "",
+    "hideBorder": false
+  },
+  {
+    "text": "格",
+    "bbox": [
+      948,
+      517,
+      986,
+      552
+    ],
+    "field": "",
+    "hideBorder": false
+  },
+  {
+    "text": "数量",
+    "bbox": [
+      1110,
+      516,
+      1174,
+      554
+    ],
+    "field": "",
+    "hideBorder": false
+  },
+  {
+    "text": "受注番号",
+    "bbox": [
+      1393,
+      519,
+      1505,
+      551
+    ],
+    "field": "",
+    "hideBorder": false
+  },
+  {
+    "text": "B0504",
+    "bbox": [
+      39,
+      567,
+      124,
+      600
+    ],
+    "field": "",
+    "hideBorder": false
+  },
+  {
+    "text": "ダービー",
+    "bbox": [
+      297,
+      565,
+      419,
+      600
+    ],
+    "field": "",
+    "hideBorder": false
+  },
+  {
+    "text": "斜ニッパー",
+    "bbox": [
+      444,
+      564,
+      600,
+      602
+    ],
+    "field": "",
+    "hideBorder": false
+  },
+  {
+    "text": "#30 150MM",
+    "bbox": [
+      861,
+      568,
+      1014,
+      602
+    ],
+    "field": "",
+    "hideBorder": false
+  },
+  {
+    "text": "2",
+    "bbox": [
+      1146,
+      568,
+      1176,
+      606
+    ],
+    "field": "",
+    "hideBorder": false
+  },
+  {
+    "text": "(",
+    "bbox": [
+      1232,
+      566,
+      1256,
+      601
+    ],
+    "field": "",
+    "hideBorder": false
+  },
+  {
+    "text": "）",
+    "bbox": [
+      1363,
+      567,
+      1385,
+      600
+    ],
+    "field": "",
+    "hideBorder": false
+  },
+  {
+    "text": "250430015",
+    "bbox": [
+      1419,
+      567,
+      1562,
+      598
+    ],
+    "field": "",
+    "hideBorder": false
+  },
+  {
+    "text": "4562144610607",
+    "bbox": [
+      295,
+      611,
+      474,
+      638
+    ],
+    "field": "",
+    "hideBorder": false
+  },
+  {
+    "text": "3220060",
+    "bbox": [
+      567,
+      610,
+      668,
+      638
+    ],
+    "field": "",
+    "hideBorder": false
+  },
+  {
+    "text": "C3101",
+    "bbox": [
+      40,
+      654,
+      121,
+      687
+    ],
+    "field": "",
+    "hideBorder": false
+  },
+  {
+    "text": "タジマ",
+    "bbox": [
+      296,
+      653,
+      389,
+      685
+    ],
+    "field": "",
+    "hideBorder": false
+  },
+  {
+    "text": "スーパー墨汁",
+    "bbox": [
+      414,
+      654,
+      599,
+      685
+    ],
+    "field": "",
+    "hideBorder": false
+  },
+  {
+    "text": "180ML PSB2-180",
+    "bbox": [
+      787,
+      656,
+      1013,
+      687
+    ],
+    "field": "",
+    "hideBorder": false
+  },
+  {
+    "text": "3",
+    "bbox": [
+      1145,
+      655,
+      1176,
+      693
+    ],
+    "field": "",
+    "hideBorder": false
+  },
+  {
+    "text": "(",
+    "bbox": [
+      1232,
+      653,
+      1257,
+      687
+    ],
+    "field": "",
+    "hideBorder": false
+  },
+  {
+    "text": "）",
+    "bbox": [
+      1362,
+      653,
+      1386,
+      686
+    ],
+    "field": "",
+    "hideBorder": false
+  },
+  {
+    "text": "250430015",
+    "bbox": [
+      1420,
+      655,
+      1563,
+      686
+    ],
+    "field": "",
+    "hideBorder": false
+  },
+  {
+    "text": "4975364054074",
+    "bbox": [
+      295,
+      698,
+      474,
+      725
+    ],
+    "field": "",
+    "hideBorder": false
+  },
+  {
+    "text": "550207",
+    "bbox": [
+      567,
+      697,
+      655,
+      726
+    ],
+    "field": "",
+    "hideBorder": false
+  },
+  {
+    "text": "C3101",
+    "bbox": [
+      40,
+      741,
+      122,
+      774
+    ],
+    "field": "",
+    "hideBorder": false
+  },
+  {
+    "text": "タジマ",
+    "bbox": [
+      295,
+      738,
+      390,
+      774
+    ],
+    "field": "",
+    "hideBorder": false
+  },
+  {
+    "text": "雨の日墨汁",
+    "bbox": [
+      414,
+      740,
+      570,
+      774
+    ],
+    "field": "",
+    "hideBorder": false
+  },
+  {
+    "text": "PSB3-180",
+    "bbox": [
+      879,
+      743,
+      1013,
+      774
+    ],
+    "field": "",
+    "hideBorder": false
+  },
+  {
+    "text": "2",
+    "bbox": [
+      1146,
+      742,
+      1176,
+      780
+    ],
+    "field": "",
+    "hideBorder": false
+  },
+  {
+    "text": "(",
+    "bbox": [
+      1232,
+      740,
+      1257,
+      774
+    ],
+    "field": "",
+    "hideBorder": false
+  },
+  {
+    "text": "）",
+    "bbox": [
+      1361,
+      740,
+      1386,
+      774
+    ],
+    "field": "",
+    "hideBorder": false
+  },
+  {
+    "text": "250430015",
+    "bbox": [
+      1419,
+      741,
+      1562,
+      772
+    ],
+    "field": "",
+    "hideBorder": false
+  },
+  {
+    "text": "49270501",
+    "bbox": [
+      294,
+      783,
+      406,
+      814
+    ],
+    "field": "",
+    "hideBorder": false
+  },
+  {
+    "text": "548140",
+    "bbox": [
+      567,
+      783,
+      655,
+      812
+    ],
+    "field": "",
+    "hideBorder": false
+  },
+  {
+    "text": "明细行数= 3",
+    "bbox": [
+      882,
+      822,
+      1136,
+      871
+    ],
+    "field": "",
+    "hideBorder": false
+  }
+]
\ No newline at end of file

+[
+  {
+    "text": "出庫指示書",
+    "bbox": [
+      65,
+      73,
+      449,
+      128
+    ],
+    "field": "",
+    "hideBorder": false
+  },
+  {
+    "text": "出庫指示No.",
+    "bbox": [
+      1303,
+      76,
+      1472,
+      111
+    ],
+    "field": "",
+    "hideBorder": false
+  },
+  {
+    "text": "391189",
+    "bbox": [
+      1498,
+      78,
+      1604,
+      110
+    ],
+    "field": "",
+    "hideBorder": false
+  },
+  {
+    "text": "2025/06/24",
+    "bbox": [
+      952,
+      94,
+      1106,
+      121
+    ],
+    "field": "",
+    "hideBorder": false
+  },
+  {
+    "text": "18:57迄",
+    "bbox": [
+      1139,
+      89,
+      1250,
+      124
+    ],
+    "field": "",
+    "hideBorder": false
+  },
+  {
+    "text": "PAGE1/1",
+    "bbox": [
+      1473,
+      121,
+      1594,
+      153
+    ],
+    "field": "",
+    "hideBorder": false
+  },
+  {
+    "text": "運送形態",
+    "bbox": [
+      83,
+      145,
+      239,
+      184
+    ],
+    "field": "",
+    "hideBorder": false
+  },
+  {
+    "text": "30西濃運輸",
+    "bbox": [
+      234,
+      144,
+      485,
+      185
+    ],
+    "field": "",
+    "hideBorder": false
+  },
+  {
+    "text": "得意先",
+    "bbox": [
+      84,
+      206,
+      202,
+      246
+    ],
+    "field": "",
+    "hideBorder": false
+  },
+  {
+    "text": "42031(株)フジカケ",
+    "bbox": [
+      243,
+      206,
+      556,
+      244
+    ],
+    "field": "",
+    "hideBorder": false
+  },
+  {
+    "text": "ミタケ",
+    "bbox": [
+      536,
+      205,
+      707,
+      247
+    ],
+    "field": "",
+    "hideBorder": false
+  },
+  {
+    "text": "住所",
+    "bbox": [
+      84,
+      266,
+      179,
+      298
+    ],
+    "field": "",
+    "hideBorder": false
+  },
+  {
+    "text": "〒5050100岐阜県可児郡御嵩町中2411－7",
+    "bbox": [
+      207,
+      267,
+      834,
+      297
+    ],
+    "field": "",
+    "hideBorder": false
+  },
+  {
+    "text": "電話番号",
+    "bbox": [
+      88,
+      308,
+      214,
+      340
+    ],
+    "field": "",
+    "hideBorder": false
+  },
+  {
+    "text": "0574673181",
+    "bbox": [
+      215,
+      310,
+      382,
+      338
+    ],
+    "field": "",
+    "hideBorder": false
+  },
+  {
+    "text": "出庫者",
+    "bbox": [
+      925,
+      331,
+      1008,
+      367
+    ],
+    "field": "",
+    "hideBorder": false
+  },
+  {
+    "text": "検品者",
+    "bbox": [
+      1176,
+      330,
+      1261,
+      366
+    ],
+    "field": "",
+    "hideBorder": false
+  },
+  {
+    "text": "包者",
+    "bbox": [
+      1431,
+      331,
+      1516,
+      367
+    ],
+    "field": "",
+    "hideBorder": false
+  },
+  {
+    "text": "担当者",
+    "bbox": [
+      86,
+      344,
+      182,
+      381
+    ],
+    "field": "",
+    "hideBorder": false
+  },
+  {
+    "text": "NAS00240渡邊雅章",
+    "bbox": [
+      239,
+      343,
+      518,
+      380
+    ],
+    "field": "",
+    "hideBorder": false
+  },
+  {
+    "text": "摘要",
+    "bbox": [
+      83,
+      386,
+      183,
+      429
+    ],
+    "field": "",
+    "hideBorder": false
+  },
+  {
+    "text": "棚番",
+    "bbox": [
+      34,
+      515,
+      97,
+      554
+    ],
+    "field": "",
+    "hideBorder": false
+  },
+  {
+    "text": "品",
+    "bbox": [
+      345,
+      519,
+      378,
+      552
+    ],
+    "field": "",
+    "hideBorder": false
+  },
+  {
+    "text": "名",
+    "bbox": [
+      423,
+      519,
+      456,
+      551
+    ],
+    "field": "",
+    "hideBorder": false
+  },
+  {
+    "text": "規",
+    "bbox": [
+      870,
+      517,
+      909,
+      552
+    ],
+    "field": "",
+    "hideBorder": false
+  },
+  {
+    "text": "格",
+    "bbox": [
+      948,
+      517,
+      986,
+      552
+    ],
+    "field": "",
+    "hideBorder": false
+  },
+  {
+    "text": "数量",
+    "bbox": [
+      1110,
+      516,
+      1174,
+      554
+    ],
+    "field": "",
+    "hideBorder": false
+  },
+  {
+    "text": "受注番号",
+    "bbox": [
+      1393,
+      519,
+      1505,
+      551
+    ],
+    "field": "",
+    "hideBorder": false
+  },
+  {
+    "text": "B0504",
+    "bbox": [
+      39,
+      567,
+      124,
+      600
+    ],
+    "field": "",
+    "hideBorder": false
+  },
+  {
+    "text": "ダービー",
+    "bbox": [
+      297,
+      565,
+      419,
+      600
+    ],
+    "field": "",
+    "hideBorder": false
+  },
+  {
+    "text": "斜ニッパー",
+    "bbox": [
+      444,
+      564,
+      600,
+      602
+    ],
+    "field": "",
+    "hideBorder": false
+  },
+  {
+    "text": "#30 150MM",
+    "bbox": [
+      861,
+      568,
+      1014,
+      602
+    ],
+    "field": "",
+    "hideBorder": false
+  },
+  {
+    "text": "2",
+    "bbox": [
+      1146,
+      568,
+      1176,
+      606
+    ],
+    "field": "",
+    "hideBorder": false
+  },
+  {
+    "text": "(",
+    "bbox": [
+      1232,
+      566,
+      1256,
+      601
+    ],
+    "field": "",
+    "hideBorder": false
+  },
+  {
+    "text": "）",
+    "bbox": [
+      1363,
+      567,
+      1385,
+      600
+    ],
+    "field": "",
+    "hideBorder": false
+  },
+  {
+    "text": "250430015",
+    "bbox": [
+      1419,
+      567,
+      1562,
+      598
+    ],
+    "field": "",
+    "hideBorder": false
+  },
+  {
+    "text": "4562144610607",
+    "bbox": [
+      295,
+      611,
+      474,
+      638
+    ],
+    "field": "",
+    "hideBorder": false
+  },
+  {
+    "text": "3220060",
+    "bbox": [
+      567,
+      610,
+      668,
+      638
+    ],
+    "field": "",
+    "hideBorder": false
+  },
+  {
+    "text": "C3101",
+    "bbox": [
+      40,
+      654,
+      121,
+      687
+    ],
+    "field": "",
+    "hideBorder": false
+  },
+  {
+    "text": "タジマ",
+    "bbox": [
+      296,
+      653,
+      389,
+      685
+    ],
+    "field": "",
+    "hideBorder": false
+  },
+  {
+    "text": "スーパー墨汁",
+    "bbox": [
+      414,
+      654,
+      599,
+      685
+    ],
+    "field": "",
+    "hideBorder": false
+  },
+  {
+    "text": "180ML PSB2-180",
+    "bbox": [
+      787,
+      656,
+      1013,
+      687
+    ],
+    "field": "",
+    "hideBorder": false
+  },
+  {
+    "text": "3",
+    "bbox": [
+      1145,
+      655,
+      1176,
+      693
+    ],
+    "field": "",
+    "hideBorder": false
+  },
+  {
+    "text": "(",
+    "bbox": [
+      1232,
+      653,
+      1257,
+      687
+    ],
+    "field": "",
+    "hideBorder": false
+  },
+  {
+    "text": "）",
+    "bbox": [
+      1362,
+      653,
+      1386,
+      686
+    ],
+    "field": "",
+    "hideBorder": false
+  },
+  {
+    "text": "250430015",
+    "bbox": [
+      1420,
+      655,
+      1563,
+      686
+    ],
+    "field": "",
+    "hideBorder": false
+  },
+  {
+    "text": "4975364054074",
+    "bbox": [
+      295,
+      698,
+      474,
+      725
+    ],
+    "field": "",
+    "hideBorder": false
+  },
+  {
+    "text": "550207",
+    "bbox": [
+      567,
+      697,
+      655,
+      726
+    ],
+    "field": "",
+    "hideBorder": false
+  },
+  {
+    "text": "C3101",
+    "bbox": [
+      40,
+      741,
+      122,
+      774
+    ],
+    "field": "",
+    "hideBorder": false
+  },
+  {
+    "text": "タジマ",
+    "bbox": [
+      295,
+      738,
+      390,
+      774
+    ],
+    "field": "",
+    "hideBorder": false
+  },
+  {
+    "text": "雨の日墨汁",
+    "bbox": [
+      414,
+      740,
+      570,
+      774
+    ],
+    "field": "",
+    "hideBorder": false
+  },
+  {
+    "text": "PSB3-180",
+    "bbox": [
+      879,
+      743,
+      1013,
+      774
+    ],
+    "field": "",
+    "hideBorder": false
+  },
+  {
+    "text": "2",
+    "bbox": [
+      1146,
+      742,
+      1176,
+      780
+    ],
+    "field": "",
+    "hideBorder": false
+  },
+  {
+    "text": "(",
+    "bbox": [
+      1232,
+      740,
+      1257,
+      774
+    ],
+    "field": "",
+    "hideBorder": false
+  },
+  {
+    "text": "）",
+    "bbox": [
+      1361,
+      740,
+      1386,
+      774
+    ],
+    "field": "",
+    "hideBorder": false
+  },
+  {
+    "text": "250430015",
+    "bbox": [
+      1419,
+      741,
+      1562,
+      772
+    ],
+    "field": "",
+    "hideBorder": false
+  },
+  {
+    "text": "49270501",
+    "bbox": [
+      294,
+      783,
+      406,
+      814
+    ],
+    "field": "",
+    "hideBorder": false
+  },
+  {
+    "text": "548140",
+    "bbox": [
+      567,
+      783,
+      655,
+      812
+    ],
+    "field": "",
+    "hideBorder": false
+  },
+  {
+    "text": "明细行数= 3",
+    "bbox": [
+      882,
+      822,
+      1136,
+      871
+    ],
+    "field": "",
+    "hideBorder": false
+  }
+]
\ No newline at end of file

+[
+  {
+    "text": "出庫指示書",
+    "bbox": [
+      66,
+      72,
+      449,
+      127
+    ],
+    "field": "",
+    "hideBorder": false
+  },
+  {
+    "text": "出庫指示No.",
+    "bbox": [
+      1252,
+      76,
+      1420,
+      111
+    ],
+    "field": "",
+    "hideBorder": false
+  },
+  {
+    "text": "250725013",
+    "bbox": [
+      1451,
+      79,
+      1605,
+      110
+    ],
+    "field": "",
+    "hideBorder": false
+  },
+  {
+    "text": "2025/07/25",
+    "bbox": [
+      903,
+      94,
+      1055,
+      122
+    ],
+    "field": "",
+    "hideBorder": false
+  },
+  {
+    "text": "12:10迄",
+    "bbox": [
+      1090,
+      89,
+      1200,
+      124
+    ],
+    "field": "",
+    "hideBorder": false
+  },
+  {
+    "text": "PAGE1/1",
+    "bbox": [
+      1474,
+      123,
+      1594,
+      154
+    ],
+    "field": "",
+    "hideBorder": false
+  },
+  {
+    "text": "運送形態",
+    "bbox": [
+      84,
+      147,
+      241,
+      185
+    ],
+    "field": "",
+    "hideBorder": false
+  },
+  {
+    "text": "00",
+    "bbox": [
+      265,
+      148,
+      315,
+      184
+    ],
+    "field": "",
+    "hideBorder": false
+  },
+  {
+    "text": "得意先",
+    "bbox": [
+      84,
+      206,
+      203,
+      246
+    ],
+    "field": "",
+    "hideBorder": false
+  },
+  {
+    "text": "17548 イシグロHＣ ユアーズ田原店",
+    "bbox": [
+      241,
+      203,
+      899,
+      246
+    ],
+    "field": "",
+    "hideBorder": false
+  },
+  {
+    "text": "住所",
+    "bbox": [
+      85,
+      267,
+      180,
+      299
+    ],
+    "field": "",
+    "hideBorder": false
+  },
+  {
+    "text": "〒4413421渥美郡田原町大字田原字南新地67",
+    "bbox": [
+      205,
+      266,
+      834,
+      299
+    ],
+    "field": "",
+    "hideBorder": false
+  },
+  {
+    "text": "電話番号",
+    "bbox": [
+      88,
+      309,
+      214,
+      341
+    ],
+    "field": "",
+    "hideBorder": false
+  },
+  {
+    "text": "0531231660",
+    "bbox": [
+      216,
+      311,
+      385,
+      339
+    ],
+    "field": "",
+    "hideBorder": false
+  },
+  {
+    "text": "出庫者",
+    "bbox": [
+      925,
+      331,
+      1009,
+      367
+    ],
+    "field": "",
+    "hideBorder": false
+  },
+  {
+    "text": "検品者",
+    "bbox": [
+      1178,
+      332,
+      1262,
+      369
+    ],
+    "field": "",
+    "hideBorder": false
+  },
+  {
+    "text": "捆包者",
+    "bbox": [
+      1432,
+      332,
+      1515,
+      369
+    ],
+    "field": "",
+    "hideBorder": false
+  },
+  {
+    "text": "担当者",
+    "bbox": [
+      86,
+      345,
+      182,
+      381
+    ],
+    "field": "",
+    "hideBorder": false
+  },
+  {
+    "text": "NAS00229岩崎 英樹",
+    "bbox": [
+      242,
+      346,
+      515,
+      377
+    ],
+    "field": "",
+    "hideBorder": false
+  },
+  {
+    "text": "摘要",
+    "bbox": [
+      85,
+      389,
+      183,
+      427
+    ],
+    "field": "",
+    "hideBorder": false
+  },
+  {
+    "text": "棚番",
+    "bbox": [
+      34,
+      516,
+      98,
+      555
+    ],
+    "field": "",
+    "hideBorder": false
+  },
+  {
+    "text": "品",
+    "bbox": [
+      345,
+      520,
+      379,
+      553
+    ],
+    "field": "",
+    "hideBorder": false
+  },
+  {
+    "text": "名",
+    "bbox": [
+      423,
+      520,
+      456,
+      553
+    ],
+    "field": "",
+    "hideBorder": false
+  },
+  {
+    "text": "規",
+    "bbox": [
+      871,
+      518,
+      908,
+      554
+    ],
+    "field": "",
+    "hideBorder": false
+  },
+  {
+    "text": "格",
+    "bbox": [
+      950,
+      520,
+      985,
+      553
+    ],
+    "field": "",
+    "hideBorder": false
+  },
+  {
+    "text": "数量",
+    "bbox": [
+      1110,
+      517,
+      1175,
+      555
+    ],
+    "field": "",
+    "hideBorder": false
+  },
+  {
+    "text": "受注番号",
+    "bbox": [
+      1393,
+      520,
+      1505,
+      552
+    ],
+    "field": "",
+    "hideBorder": false
+  },
+  {
+    "text": "ハソマー",
+    "bbox": [
+      295,
+      570,
+      362,
+      599
+    ],
+    "field": "",
+    "hideBorder": false
+  },
+  {
+    "text": "旋回式ゴ車輪",
+    "bbox": [
+      385,
+      568,
+      587,
+      602
+    ],
+    "field": "",
+    "hideBorder": false
+  },
+  {
+    "text": "（ローーへ",
+    "bbox": [
+      580,
+      568,
+      691,
+      599
+    ],
+    "field": "",
+    "hideBorder": false
+  },
+  {
+    "text": "10",
+    "bbox": [
+      1128,
+      567,
+      1179,
+      610
+    ],
+    "field": "",
+    "hideBorder": false
+  },
+  {
+    "text": "(",
+    "bbox": [
+      1233,
+      567,
+      1256,
+      602
+    ],
+    "field": "",
+    "hideBorder": false
+  },
+  {
+    "text": "）",
+    "bbox": [
+      1363,
+      569,
+      1384,
+      600
+    ],
+    "field": "",
+    "hideBorder": false
+  },
+  {
+    "text": "250725012",
+    "bbox": [
+      1419,
+      568,
+      1563,
+      602
+    ],
+    "field": "",
+    "hideBorder": false
+  },
+  {
+    "text": "アリング）125mm",
+    "bbox": [
+      295,
+      599,
+      572,
+      630
+    ],
+    "field": "",
+    "hideBorder": false
+  },
+  {
+    "text": "ス补ッハ-",
+    "bbox": [
+      588,
+      595,
+      693,
+      632
+    ],
+    "field": "",
+    "hideBorder": false
+  },
+  {
+    "text": "付",
+    "bbox": [
+      293,
+      627,
+      333,
+      664
+    ],
+    "field": "",
+    "hideBorder": false
+  },
+  {
+    "text": "TEMP02433",
+    "bbox": [
+      568,
+      672,
+      694,
+      700
+    ],
+    "field": "",
+    "hideBorder": false
+  },
+  {
+    "text": "ハンマー",
+    "bbox": [
+      295,
+      716,
+      364,
+      746
+    ],
+    "field": "",
+    "hideBorder": false
+  },
+  {
+    "text": "Eシリーズ旋回式ゴム車輪",
+    "bbox": [
+      386,
+      712,
+      689,
+      748
+    ],
+    "field": "",
+    "hideBorder": false
+  },
+  {
+    "text": "10",
+    "bbox": [
+      1126,
+      714,
+      1180,
+      756
+    ],
+    "field": "",
+    "hideBorder": false
+  },
+  {
+    "text": "(",
+    "bbox": [
+      1232,
+      714,
+      1257,
+      748
+    ],
+    "field": "",
+    "hideBorder": false
+  },
+  {
+    "text": "）",
+    "bbox": [
+      1361,
+      714,
+      1386,
+      747
+    ],
+    "field": "",
+    "hideBorder": false
+  },
+  {
+    "text": "250725012",
+    "bbox": [
+      1419,
+      715,
+      1562,
+      746
+    ],
+    "field": "",
+    "hideBorder": false
+  },
+  {
+    "text": "100mmス卜一付",
+    "bbox": [
+      330,
+      744,
+      630,
+      778
+    ],
+    "field": "",
+    "hideBorder": false
+  },
+  {
+    "text": "TEMP02434",
+    "bbox": [
+      567,
+      789,
+      694,
+      816
+    ],
+    "field": "",
+    "hideBorder": false
+  },
+  {
+    "text": "シンメン",
+    "bbox": [
+      294,
+      830,
+      373,
+      865
+    ],
+    "field": "",
+    "hideBorder": false
+  },
+  {
+    "text": "オスタンダードャケット",
+    "bbox": [
+      382,
+      831,
+      631,
+      865
+    ],
+    "field": "",
+    "hideBorder": false
+  },
+  {
+    "text": "100",
+    "bbox": [
+      1108,
+      831,
+      1178,
+      874
+    ],
+    "field": "",
+    "hideBorder": false
+  },
+  {
+    "text": "(",
+    "bbox": [
+      1233,
+      831,
+      1257,
+      866
+    ],
+    "field": "",
+    "hideBorder": false
+  },
+  {
+    "text": "）",
+    "bbox": [
+      1360,
+      830,
+      1388,
+      867
+    ],
+    "field": "",
+    "hideBorder": false
+  },
+  {
+    "text": "250725012",
+    "bbox": [
+      1418,
+      832,
+      1563,
+      866
+    ],
+    "field": "",
+    "hideBorder": false
+  },
+  {
+    "text": "TEMP02435",
+    "bbox": [
+      568,
+      874,
+      694,
+      902
+    ],
+    "field": "",
+    "hideBorder": false
+  },
+  {
+    "text": "明细行数=3",
+    "bbox": [
+      883,
+      911,
+      1138,
+      963
+    ],
+    "field": "",
+    "hideBorder": false
+  }
+]
\ No newline at end of file

+<?php
+
+use Illuminate\Contracts\Http\Kernel;
+use Illuminate\Http\Request;
+
+define('LARAVEL_START', microtime(true));
+
+/*
+|--------------------------------------------------------------------------
+| Check If The Application Is Under Maintenance
+|--------------------------------------------------------------------------
+|
+| If the application is in maintenance / demo mode via the "down" command
+| we will load this file so that any pre-rendered content can be shown
+| instead of starting the framework, which could cause an exception.
+|
+*/
+
+if (file_exists($maintenance = __DIR__.'/../storage/framework/maintenance.php')) {
+    require $maintenance;
+}
+
+/*
+|--------------------------------------------------------------------------
+| Register The Auto Loader
+|--------------------------------------------------------------------------
+|
+| Composer provides a convenient, automatically generated class loader for
+| this application. We just need to utilize it! We'll simply require it
+| into the script here so we don't need to manually load our classes.
+|
+*/
+
+require __DIR__.'/../vendor/autoload.php';
+
+/*
+|--------------------------------------------------------------------------
+| Run The Application
+|--------------------------------------------------------------------------
+|
+| Once we have the application, we can handle the incoming request using
+| the application's HTTP kernel. Then, we will send the response back
+| to this client's browser, allowing them to enjoy our application.
+|
+*/
+
+$app = require_once __DIR__.'/../bootstrap/app.php';
+
+$kernel = $app->make(Kernel::class);
+
+$response = $kernel->handle(
+    $request = Request::capture()
+)->send();
+
+$kernel->terminate($request, $response);

+User-agent: *
+Disallow:

+require('./bootstrap');

+window._ = require('lodash');
+
+/**
+ * We'll load the axios HTTP library which allows us to easily issue requests
+ * to our Laravel back-end. This library automatically handles sending the
+ * CSRF token as a header based on the value of the "XSRF" token cookie.
+ */
+
+window.axios = require('axios');
+
+window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
+
+/**
+ * Echo exposes an expressive API for subscribing to channels and listening
+ * for events that are broadcast by Laravel. Echo and event broadcasting
+ * allows your team to easily build robust real-time web applications.
+ */
+
+// import Echo from 'laravel-echo';
+
+// window.Pusher = require('pusher-js');
+
+// window.Echo = new Echo({
+//     broadcaster: 'pusher',
+//     key: process.env.MIX_PUSHER_APP_KEY,
+//     cluster: process.env.MIX_PUSHER_APP_CLUSTER,
+//     forceTLS: true
+// });

+<?php
+
+return [
+
+    /*
+    |--------------------------------------------------------------------------
+    | Authentication Language Lines
+    |--------------------------------------------------------------------------
+    |
+    | The following language lines are used during authentication for various
+    | messages that we need to display to the user. You are free to modify
+    | these language lines according to your application's requirements.
+    |
+    */
+
+    'failed' => 'These credentials do not match our records.',
+    'password' => 'The provided password is incorrect.',
+    'throttle' => 'Too many login attempts. Please try again in :seconds seconds.',
+
+];

+<?php
+
+return [
+
+    /*
+    |--------------------------------------------------------------------------
+    | Pagination Language Lines
+    |--------------------------------------------------------------------------
+    |
+    | The following language lines are used by the paginator library to build
+    | the simple pagination links. You are free to change them to anything
+    | you want to customize your views to better match your application.
+    |
+    */
+
+    'previous' => '&laquo; Previous',
+    'next' => 'Next &raquo;',
+
+];

+<?php
+
+return [
+
+    /*
+    |--------------------------------------------------------------------------
+    | Password Reset Language Lines
+    |--------------------------------------------------------------------------
+    |
+    | The following language lines are the default lines which match reasons
+    | that are given by the password broker for a password update attempt
+    | has failed, such as for an invalid token or invalid new password.
+    |
+    */
+
+    'reset' => 'Your password has been reset!',
+    'sent' => 'We have emailed your password reset link!',
+    'throttled' => 'Please wait before retrying.',
+    'token' => 'This password reset token is invalid.',
+    'user' => "We can't find a user with that email address.",
+
+];

+<?php
+
+return [
+
+    /*
+    |--------------------------------------------------------------------------
+    | Validation Language Lines
+    |--------------------------------------------------------------------------
+    |
+    | The following language lines contain the default error messages used by
+    | the validator class. Some of these rules have multiple versions such
+    | as the size rules. Feel free to tweak each of these messages here.
+    |
+    */
+
+    'accepted' => 'The :attribute must be accepted.',
+    'accepted_if' => 'The :attribute must be accepted when :other is :value.',
+    'active_url' => 'The :attribute is not a valid URL.',
+    'after' => 'The :attribute must be a date after :date.',
+    'after_or_equal' => 'The :attribute must be a date after or equal to :date.',
+    'alpha' => 'The :attribute must only contain letters.',
+    'alpha_dash' => 'The :attribute must only contain letters, numbers, dashes and underscores.',
+    'alpha_num' => 'The :attribute must only contain letters and numbers.',
+    'array' => 'The :attribute must be an array.',
+    'before' => 'The :attribute must be a date before :date.',
+    'before_or_equal' => 'The :attribute must be a date before or equal to :date.',
+    'between' => [
+        'numeric' => 'The :attribute must be between :min and :max.',
+        'file' => 'The :attribute must be between :min and :max kilobytes.',
+        'string' => 'The :attribute must be between :min and :max characters.',
+        'array' => 'The :attribute must have between :min and :max items.',
+    ],
+    'boolean' => 'The :attribute field must be true or false.',
+    'confirmed' => 'The :attribute confirmation does not match.',
+    'current_password' => 'The password is incorrect.',
+    'date' => 'The :attribute is not a valid date.',
+    'date_equals' => 'The :attribute must be a date equal to :date.',
+    'date_format' => 'The :attribute does not match the format :format.',
+    'declined' => 'The :attribute must be declined.',
+    'declined_if' => 'The :attribute must be declined when :other is :value.',
+    'different' => 'The :attribute and :other must be different.',
+    'digits' => 'The :attribute must be :digits digits.',
+    'digits_between' => 'The :attribute must be between :min and :max digits.',
+    'dimensions' => 'The :attribute has invalid image dimensions.',
+    'distinct' => 'The :attribute field has a duplicate value.',
+    'email' => 'The :attribute must be a valid email address.',
+    'ends_with' => 'The :attribute must end with one of the following: :values.',
+    'enum' => 'The selected :attribute is invalid.',
+    'exists' => 'The selected :attribute is invalid.',
+    'file' => 'The :attribute must be a file.',
+    'filled' => 'The :attribute field must have a value.',
+    'gt' => [
+        'numeric' => 'The :attribute must be greater than :value.',
+        'file' => 'The :attribute must be greater than :value kilobytes.',
+        'string' => 'The :attribute must be greater than :value characters.',
+        'array' => 'The :attribute must have more than :value items.',
+    ],
+    'gte' => [
+        'numeric' => 'The :attribute must be greater than or equal to :value.',
+        'file' => 'The :attribute must be greater than or equal to :value kilobytes.',
+        'string' => 'The :attribute must be greater than or equal to :value characters.',
+        'array' => 'The :attribute must have :value items or more.',
+    ],
+    'image' => 'The :attribute must be an image.',
+    'in' => 'The selected :attribute is invalid.',
+    'in_array' => 'The :attribute field does not exist in :other.',
+    'integer' => 'The :attribute must be an integer.',
+    'ip' => 'The :attribute must be a valid IP address.',
+    'ipv4' => 'The :attribute must be a valid IPv4 address.',
+    'ipv6' => 'The :attribute must be a valid IPv6 address.',
+    'json' => 'The :attribute must be a valid JSON string.',
+    'lt' => [
+        'numeric' => 'The :attribute must be less than :value.',
+        'file' => 'The :attribute must be less than :value kilobytes.',
+        'string' => 'The :attribute must be less than :value characters.',
+        'array' => 'The :attribute must have less than :value items.',
+    ],
+    'lte' => [
+        'numeric' => 'The :attribute must be less than or equal to :value.',
+        'file' => 'The :attribute must be less than or equal to :value kilobytes.',
+        'string' => 'The :attribute must be less than or equal to :value characters.',
+        'array' => 'The :attribute must not have more than :value items.',
+    ],
+    'mac_address' => 'The :attribute must be a valid MAC address.',
+    'max' => [
+        'numeric' => 'The :attribute must not be greater than :max.',
+        'file' => 'The :attribute must not be greater than :max kilobytes.',
+        'string' => 'The :attribute must not be greater than :max characters.',
+        'array' => 'The :attribute must not have more than :max items.',
+    ],
+    'mimes' => 'The :attribute must be a file of type: :values.',
+    'mimetypes' => 'The :attribute must be a file of type: :values.',
+    'min' => [
+        'numeric' => 'The :attribute must be at least :min.',
+        'file' => 'The :attribute must be at least :min kilobytes.',
+        'string' => 'The :attribute must be at least :min characters.',
+        'array' => 'The :attribute must have at least :min items.',
+    ],
+    'multiple_of' => 'The :attribute must be a multiple of :value.',
+    'not_in' => 'The selected :attribute is invalid.',
+    'not_regex' => 'The :attribute format is invalid.',
+    'numeric' => 'The :attribute must be a number.',
+    'password' => 'The password is incorrect.',
+    'present' => 'The :attribute field must be present.',
+    'prohibited' => 'The :attribute field is prohibited.',
+    'prohibited_if' => 'The :attribute field is prohibited when :other is :value.',
+    'prohibited_unless' => 'The :attribute field is prohibited unless :other is in :values.',
+    'prohibits' => 'The :attribute field prohibits :other from being present.',
+    'regex' => 'The :attribute format is invalid.',
+    'required' => 'The :attribute field is required.',
+    'required_array_keys' => 'The :attribute field must contain entries for: :values.',
+    'required_if' => 'The :attribute field is required when :other is :value.',
+    'required_unless' => 'The :attribute field is required unless :other is in :values.',
+    'required_with' => 'The :attribute field is required when :values is present.',
+    'required_with_all' => 'The :attribute field is required when :values are present.',
+    'required_without' => 'The :attribute field is required when :values is not present.',
+    'required_without_all' => 'The :attribute field is required when none of :values are present.',
+    'same' => 'The :attribute and :other must match.',
+    'size' => [
+        'numeric' => 'The :attribute must be :size.',
+        'file' => 'The :attribute must be :size kilobytes.',
+        'string' => 'The :attribute must be :size characters.',
+        'array' => 'The :attribute must contain :size items.',
+    ],
+    'starts_with' => 'The :attribute must start with one of the following: :values.',
+    'string' => 'The :attribute must be a string.',
+    'timezone' => 'The :attribute must be a valid timezone.',
+    'unique' => 'The :attribute has already been taken.',
+    'uploaded' => 'The :attribute failed to upload.',
+    'url' => 'The :attribute must be a valid URL.',
+    'uuid' => 'The :attribute must be a valid UUID.',
+
+    /*
+    |--------------------------------------------------------------------------
+    | Custom Validation Language Lines
+    |--------------------------------------------------------------------------
+    |
+    | Here you may specify custom validation messages for attributes using the
+    | convention "attribute.rule" to name the lines. This makes it quick to
+    | specify a specific custom language line for a given attribute rule.
+    |
+    */
+
+    'custom' => [
+        'attribute-name' => [
+            'rule-name' => 'custom-message',
+        ],
+    ],
+
+    /*
+    |--------------------------------------------------------------------------
+    | Custom Validation Attributes
+    |--------------------------------------------------------------------------
+    |
+    | The following language lines are used to swap our attribute placeholder
+    | with something more reader friendly such as "E-Mail Address" instead
+    | of "email". This simply helps us make our message more expressive.
+    |
+    */
+
+    'attributes' => [],
+
+];

+<html lang="en"><head>
+    <meta charset="UTF-8">
+    <title>OCR Mapping with Manual Select Tool</title>
+    <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>
+
+</head>
+<body>
+<meta name="csrf-token" content="{{ csrf_token() }}">
+<div id="app">
+    <!-- Right: PDF viewer + select tool -->
+    <div class="right-panel" >
+        <div class="pdf-container" ref="pdfContainer"
+             @mousedown="startSelect"
+             @mousemove="onSelect"
+             @mouseup="endSelect">
+            <img
+                ref="pdfImage"
+                :src="pdfImageUrl"
+                @load="onImageLoad"
+                style="width: 100%; height: auto;pointer-events: none;"
+            />
+
+
+            <!-- Vùng kéo chọn -->
+            <div v-if="selectBox.show" class="select-box"
+                 :style="{ left: selectBox.x + 'px', top: selectBox.y + 'px', width: selectBox.width + 'px', height: selectBox.height + 'px' }"></div>
+
+            <!-- Vẽ bbox OCR -->
+            <div
+                v-for="(item, index) in ocrData"
+                :key="index"
+                v-if="!item.isDeleted"
+                class="bbox"
+                :class="{ active: index === activeIndex }"
+                :data-field="item.field"
+                :style="getBoxStyle(item, index)"
+                @click="onBoxClick(index)">
+
+                <button v-if="item.isManual && item.showDelete"
+                        class="delete-btn"
+                        @click.stop="deleteBox(index)">🗑</button>
+            </div>
+
+
+            <!-- Dropdown OCR -->
+            <select v-if="selectingIndex !== null && ocrData[selectingIndex]"
+                    :style="getSelectStyle(ocrData[selectingIndex])"
+                    v-model="ocrData[selectingIndex].field"
+                    @change="applyMapping"
+            >
+                <option disabled value="">-- Chọn trường dữ liệu --</option>
+                <option v-for="field in fieldData" :value="field.value">@{{ field.label }}</option>
+            </select>
+
+            <!-- Dropdown thủ công -->
+            <select v-if="selectBox.showDropdown"
+                    :style="{ left: selectBox.x + 'px', top: (selectBox.y + selectBox.height) + 'px' }"
+                    v-model="manualField"
+                    @change="applyManualMapping"
+                    @click.stop
+            >
+                <option disabled value="">-- Chọn trường dữ liệu --</option>
+                <option v-for="field in fieldData" :value="field.value">@{{ field.label }}</option>
+            </select>
+        </div>
+    </div>
+
+    <!-- Left: Form inputs -->
+    <div class="left-panel">
+        <div v-for="field in fieldOptions" :key="field.value" class="form-group">
+            <label>@{{ field.label }}</label>
+            <input v-model="formData[field.value]"
+                   @focus="highlightField(field.value)"
+                   @click="onInputClick(field.value)"
+                   @blur="onInputBlur(field.value)"
+
+            >
+{{--            :readonly="field.value === 'customer_name' && !hasCustomerNameXY"--}}
+        </div>
+        <button @click="saveTemplate">💾Save</button>
+    </div>
+
+</div>
+
+
+<script>
+    new Vue({
+        el: '#app',
+        data() {
+            return {
+                pdfImageUrl: "",
+                selectingIndex: null,
+                isMappingManually: false,
+                isSelecting: false,
+                activeIndex: null,
+                manualField: "",
+                formData: {},
+                manualBoxData: {},
+                fieldOptions: [],
+                customer_name_xy: '',
+                hasCustomerNameXY: false,
+                ocrData: [],
+                selectBox: { show: false, showDropdown: false, x: 0, y: 0, width: 0, height: 0, startX: 0, startY: 0 },
+                manualIndex: null
+            }
+        },
+        created() {
+            // Chỉ tạo formData cho các field cần mapping
+            this.fieldOptions
+                .forEach(f => {
+                    this.$set(this.formData, f.value, "");
+                });
+        },
+        mounted() {
+            this.loadOCRData();
+
+            // Thêm event listener để xóa focus khi click ra ngoài
+            document.addEventListener('click', (e) => {
+                // Nếu click không phải vào input hoặc box
+                if (!e.target.closest('.left-panel') && !e.target.closest('.bbox')) {
+                    this.removeAllFocus();
+                }
+            });
+        },
+        computed: {
+            fieldData() {
+                // Lọc bỏ template_name nếu không cần cho phần form mapping
+                return this.fieldOptions.filter(f => f.value !== "template_name");
+            }
+        },
+        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; // Giữ lại box hiện tại
+                    if (box.field === fieldName) {
+                        // Xóa box có field trùng lặp
+                        return false;
+                    }
+                    return true; // Giữ lại các box khác
+                });
+
+                // 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;
+
+                // 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 = '';
+                    }
+                    this.ocrData[newIndex].field = null;
+                    this.ocrData[newIndex].field_xy = null;
+                }
+
+                // Gán field mới
+                const bbox = this.ocrData[newIndex].bbox; // tọa độ OCR gốc [x1, y1, x2, y2]
+
+                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;
+
+                // Set text
+                this.formData[fieldName] = (text !== null ? text : (this.ocrData[newIndex].text || '')).trim();
+
+                // KHÔNG set active index (không focus)
+
+                // Nếu là customer_name
+                if (fieldName === 'customer_name') {
+                    this.hasCustomerNameXY = true;
+                    this.customer_name_xy = xyStr;
+                }
+            },
+
+            assignFieldToBox(index, fieldName, text = null) {
+                console.log(`Assigning field "${fieldName}" to box at index ${index} with text: "${text}"`);
+                if (index == null) return;
+
+                // 1. 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; // Giữ lại box hiện tại
+                    if (box.field === fieldName) {
+                        // Xóa box có field trùng lặp
+                        return false;
+                    }
+                    return true; // Giữ lại các box khác
+                });
+
+                // 2. 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;
+
+                // 3. Nếu box này từng gán field khác thì bỏ
+                const prev = this.ocrData[newIndex]?.field;
+                if (prev && prev !== fieldName) {
+                    if (prev === 'customer_name') {
+                        this.hasCustomerNameXY = false;
+                        this.customer_name_xy = '';
+                    }
+                    this.ocrData[newIndex].field = null;
+                    this.ocrData[newIndex].field_xy = null;
+                }
+
+                // 4. Gán field mới
+                const bbox = this.ocrData[newIndex].bbox; // tọa độ OCR gốc [x1, y1, x2, y2]
+                console.log('bbox', bbox);
+                const [x1, y1, w, h] = bbox;
+                const xyStr = `${x1},${y1},${w},${h}`;
+
+                this.ocrData[newIndex].field = fieldName;
+                this.ocrData[newIndex].field_xy = xyStr;
+
+                // 5. Gán text
+                const finalText = text !== null ? text : (this.ocrData[newIndex].text || '');
+                this.formData[fieldName] = finalText.trim();
+                console.log(`formData ${fieldName}`,  this.formData[fieldName]);
+
+                // Nếu trong manualBoxData tồn tại field này hoặc muốn tạo lại manual box từ ocrData
+                if (this.manualBoxData[fieldName]) {
+                    // Lấy tọa độ + text từ box hiện tại để tạo manual box mới
+                    this.createManualBoxFromDB(fieldName, this.ocrData[newIndex].bbox, finalText);
+                    // Cập nhật manualBoxData
+                    this.manualBoxData[fieldName] = {
+                        coords: this.ocrData[newIndex].bbox,
+                        text: finalText
+                    };
+                }
+
+                // 6. Active index
+                this.activeIndex = newIndex;
+                // 7. Nếu là customer_name
+                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 {
+                    // Không có → tìm trong ocrData
+                    const found = this.ocrData.find(item => item.field === 'customer_name');
+                    if (found) {
+                        customer_name = found.text;
+                        customer_coords = found.field_xy;
+                    }
+
+                    const fieldsByName = {};
+                    this.ocrData.forEach(box => {
+                        if (box.field && !box.isDeleted) {
+                            // chỉ giữ 1 bản ghi cuối cùng cho mỗi field (box gần nhất)
+                            fieldsByName[box.field] = {
+                                text: box.field,
+                                coords: box.field_xy || ''
+                            };
+                        }
+                    });
+                    // // convert to array
+                    fields = (fieldsByName);
+                    console.log('Using ocrData for customer_name:', customer_name, customer_coords);
+                }
+
+               // console.log('fields:', fields);
+
+                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
+                };
+                // console.log(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');
+                }
+            },
+
+
+            deleteBox(index) {
+                const item = this.ocrData[index];
+                if (item.isManual) {
+                    const manualBbox = item.bbox;
+
+                    // Hiện lại border các box OCR gốc nằm trong vùng thủ công
+                    this.ocrData.forEach(o => {
+                        if (!o.isManual && this.isBoxInside(o.bbox, manualBbox)) {
+                            o.hideBorder = false;
+                        }
+                    });
+
+                    // Đánh dấu xoá vùng thủ công
+                    this.ocrData[index].isDeleted = true;
+                    this.ocrData[index].showDelete = false;
+
+                    // Reset trạng thái nếu đây là vùng đang chọn
+                    if (this.manualIndex === index) {
+                        this.isMappingManually = false;
+                        this.selectBox.show = false;
+                        this.selectBox.showDropdown = false;
+                        this.manualField = "";
+                        this.manualIndex = 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.formData     = data.formData;
+                    this.dataMapping  = data.dataMapping;
+                    this.is_template  = data.is_template;
+                    // Đợi image load xong trước khi xử lý
+                    // if (this.$refs.pdfImage && this.$refs.pdfImage.complete) {
+                    //   //  this.processLoadedData();
+                    // } else {
+                    //     console.log('Image not loaded yet, waiting for onImageLoad');
+                    //     // Image sẽ được xử lý trong onImageLoad
+                    // }
+
+
+                } catch (error) {
+                    console.error('Error in loadOCRData:', error);
+                }
+            },
+
+            // Xử lý data sau khi image đã load
+            processLoadedData() {
+                // Tự động map field cho các box OCR dựa trên formData đã load
+                this.autoMapFieldsFromFormData();
+
+                // Force re-render để đảm bảo các box được vẽ
+                this.$nextTick(() => {
+                    this.$forceUpdate();
+                });
+            },
+
+            // Tự động map field cho các box OCR dựa trên formData đã load từ DB
+            autoMapFieldsFromFormData() {
+                this.manualBoxData = {}; // reset
+
+                if(this.is_template) {
+                    this.formData = {};
+                }
+
+                const tolerance = 20; // ngưỡng chenh lech toa do y cho cùng 1 hàng
+
+                Object.keys(this.dataMapping).forEach(fieldName => {
+                    let { coords, text } = this.dataMapping[fieldName];
+                    let foundItems = this.ocrData
+                        .filter(item => this.isBoxInside(item.bbox, coords) && item.text.trim())
+                        .map(item => ({
+                            text: this.getPartialText(item.text, item.bbox, coords),
+                            bbox: item.bbox
+                        }))
+                        .sort((a, b) =>
+                            Math.abs(a.bbox[1] - b.bbox[1]) < tolerance
+                                ? a.bbox[0] - b.bbox[0] // cùng hàng → trái sang phải
+                                : a.bbox[1] - b.bbox[1] // khác hàng → trên xuống dưới
+                        );
+
+
+                    const combinedText = foundItems.map(f => f.text.trim());
+                    const finalText = combinedText.join(" ");
+
+                    // Lưu vào dataMapping
+                    this.dataMapping[fieldName] = {
+                        text: finalText,
+                        coords: coords
+                    };
+                    // Nếu là template thì gán vào formData
+                    if (this.is_template) {
+                        this.formData[fieldName] = finalText && finalText.trim() !== "" ? finalText : text;
+                    }
+
+                    this.manualBoxData[fieldName] = {
+                        text: finalText,
+                        coords: coords
+                    };
+                });
+
+            },
+
+            onImageLoad() {
+                const img = this.$refs.pdfImage;
+                this.imageWidth = img.naturalWidth;
+                this.imageHeight = img.naturalHeight;
+                // Nếu đã có data, xử lý ngay
+                if (this.ocrData && this.ocrData.length > 0) {
+                    console.log('Image loaded and data exists, processing now');
+                    this.processLoadedData();
+                } else {
+                    console.log('Image loaded but no data yet');
+                }
+            },
+            getBoxStyle(item, index) {
+                if (!this.imageWidth || !this.imageHeight || !this.$refs.pdfImage) {
+                    return {};
+                }
+
+                const [x1, y1, x2, y2] = item.bbox;
+                const displayedWidth = this.$refs.pdfImage.clientWidth;
+                const displayedHeight = this.$refs.pdfImage.clientHeight;
+
+                const scaleX = displayedWidth / this.imageWidth;
+                const scaleY = displayedHeight / this.imageHeight;
+
+                const left = Math.round(x1 * scaleX);
+                const top = Math.round(y1 * scaleY);
+                const width = Math.round((x2 - x1) * scaleX);
+                const height = Math.round((y2 - y1) * scaleY);
+
+                return {
+                    position: 'absolute',
+                    left: `${left}px`,
+                    top: `${top}px`,
+                    width: `${width}px`,
+                    height: `${height}px`,
+                    border: item.hideBorder ? '2px solid #ccc' : '2px solid ' + (index === this.activeIndex ? '#199601' : '#ff5252'),
+                    boxSizing: 'border-box',
+                    cursor: 'pointer',
+                    zIndex: item.isManual ? 30 : 10
+                };
+            },
+            highlightField(field) {
+                let coords, text;
+                let isFromDB = false;
+
+                // Kiểm tra xem field này có phải từ DB không
+                if (this.dataMapping && this.dataMapping[field]) {
+                    isFromDB = true;
+                    coords = this.dataMapping[field].coords;
+                    text = this.dataMapping[field].text;
+                    console.log(`Using dataMapping for field "${field}":`, coords, text);
+                } else {
+                    // Kiểm tra xem ocrData đã có box nào với field này chưa
+                    const existingBox = this.ocrData.find(b => b.field === field && !b.isDeleted);
+                    if (this.manualBoxData[field]) {
+                        // Nếu không có trong ocrData, dùng manualBoxData (tọa độ mới)
+                        coords = this.manualBoxData[field].coords;
+                        text = this.manualBoxData[field].text;
+                        console.log(`Using manualBoxData (new coordinates) for field "${field}":`, coords, text);
+                    }else if (existingBox) {
+                        coords = existingBox.bbox;
+                        text = existingBox.text;
+                        console.log(`Using existing box for field "${field}":`, coords, text);
+                    }
+                }
+
+                // Nếu có coords thì tạo hoặc hiển thị lại box
+                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);
+                    }
+                }
+
+                // Tìm lại index của box để set active
+                let idx = -1;
+                for (let i = this.ocrData.length - 1; i >= 0; i--) {
+                    const it = this.ocrData[i];
+                    if (!it.isDeleted && it.field === field) {
+                        idx = i;
+                        break;
+                    }
+                }
+
+                if (idx !== -1) {
+                    this.activeIndex = idx;
+                    this.scrollToBox(idx);
+                    // Reset selectingIndex để không hiển thị dropdown khi highlight từ input
+                    this.selectingIndex = null;
+                } else {
+                    this.activeIndex = null;
+                }
+            },
+
+
+            // Scroll đến box tương ứng
+            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
+            onInputClick(fieldName) {
+                // Kiểm tra xem field này có data không
+                const fieldValue = this.formData[fieldName];
+                if (fieldValue && fieldValue.trim()) {
+                    // Nếu có data từ DB, highlight và focus vào box tương ứng
+                    this.highlightField(fieldName);
+                }
+            },
+
+            // Xử lý khi click ra ngoài input (blur)
+            onInputBlur(fieldName) {
+                // Khi không focus vào input nào, xóa tất cả focus
+                this.removeAllFocus();
+            },
+
+            // Xóa tất cả focus
+            removeAllFocus() {
+                // Reset active index (chỉ mất màu xanh, không xóa box)
+                this.activeIndex = 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;
+                    }
+                });
+
+                // Đả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ử lý khi click vào box
+            onBoxClick(index) {
+                const item = this.ocrData[index];
+
+                // Kiểm tra xem field này có phải từ DB không
+                const isFromDB = this.dataMapping && this.dataMapping[item.field];
+
+                // Kiểm tra xem data có được ghi đè không (so sánh với data gốc từ DB)
+                const isDataOverridden = item.field && isFromDB &&
+                    this.formData[item.field] !== this.dataMapping[item.field].text;
+
+                if (item.isManual) {
+                    // Manual box
+                    if (isFromDB && !isDataOverridden) {
+                        // Manual box từ DB chưa ghi đè, KHÔNG cho chọn option
+                        this.activeIndex = index;
+                        this.selectingIndex = null;
+                    } else {
+                        // Manual box từ DB có data ghi đè HOẶC manual box bình thường, CHO PHÉP chọn option
+                        this.selectingIndex = index;
+                    }
+                } else if (item.field) {
+                    // Box OCR có field
+                    if (isFromDB && !isDataOverridden) {
+                        // Box có field từ DB chưa ghi đè, KHÔNG cho chọn option
+                        this.activeIndex = index;
+                        this.selectingIndex = null;
+                    } else {
+                        // Box có field từ DB đã ghi đè HOẶC field mới, CHO PHÉP chọn option
+                        this.selectingIndex = index;
+                    }
+                } else {
+                    // Box OCR thông thường (chưa có field), cho phép hiển thị dropdown
+                    this.selectingIndex = index;
+                }
+            },
+            startSelect(e) {
+                if (this.isMappingManually || e.button !== 0) return;
+                this.isSelecting = true;
+                const rect = this.$refs.pdfContainer.getBoundingClientRect();
+                this.selectBox.startX = e.clientX - rect.left;
+                this.selectBox.startY = e.clientY - rect.top;
+                this.selectBox.x = this.selectBox.startX;
+                this.selectBox.y = this.selectBox.startY;
+                this.selectBox.width = 0;
+                this.selectBox.height = 0;
+                this.selectBox.show = true;
+                this.selectBox.showDropdown = false;
+                this.manualField = "";
+            },
+
+            onSelect(e) {
+                if (!this.isSelecting) return;
+                const rect = this.$refs.pdfContainer.getBoundingClientRect();
+                const currentX = e.clientX - rect.left;
+                const currentY = e.clientY - rect.top;
+                this.selectBox.x = Math.min(currentX, this.selectBox.startX);
+                this.selectBox.y = Math.min(currentY, this.selectBox.startY);
+                this.selectBox.width = Math.abs(currentX - this.selectBox.startX);
+                this.selectBox.height = Math.abs(currentY - this.selectBox.startY);
+            },
+
+            endSelect(e) {
+                if (!this.isSelecting) return;
+                this.isSelecting = false;
+
+                if (this.selectBox.width < 10 || this.selectBox.height < 10) {
+                    this.selectBox.show = false;
+                    return;
+                }
+
+                // displayed coords (như hiện tại, dùng để hiển thị select overlay)
+                const dispX1 = this.selectBox.x;
+                const dispY1 = this.selectBox.y;
+                const dispX2 = this.selectBox.x + this.selectBox.width;
+                const dispY2 = this.selectBox.y + this.selectBox.height;
+
+                // scale: displayed -> original (sửa lại để chính xác hơn)
+                const displayedWidth = this.$refs.pdfImage.clientWidth;
+                const displayedHeight = this.$refs.pdfImage.clientHeight;
+                const scaleX = this.imageWidth / displayedWidth;
+                const scaleY = this.imageHeight / displayedHeight;
+
+                // bbox ở hệ gốc (original image pixels) — dùng để so sánh với ocrData và lưu vào ocrData
+                const origBbox = [
+                    Math.round(dispX1 * scaleX),
+                    Math.round(dispY1 * scaleY),
+                    Math.round(dispX2 * scaleX),
+                    Math.round(dispY2 * scaleY)
+                ];
+
+                // Ẩn border các box OCR gốc nằm giao nhau với vùng thủ công (dùng coords gốc)
+                this.ocrData.forEach(item => {
+                    if (!item.isManual && this.isBoxInside(item.bbox, origBbox)) {
+                        item.hideBorder = true;
+                    }
+                });
+
+                // Thêm box thủ công (lưu theo coords gốc)
+                this.ocrData.push({
+                    text: "",
+                    bbox: origBbox,
+                    field: "",
+                    isManual: true,
+                    showDelete: true,
+                    isDeleted: false,
+                    hideBorder: false
+                });
+
+                this.manualIndex = this.ocrData.length - 1;
+                this.isMappingManually = true;
+                this.selectBox.showDropdown = true;
+
+                e.stopPropagation();
+                e.preventDefault();
+
+            }
+            ,
+            applyMapping() {
+                const item = this.ocrData[this.selectingIndex];
+                if (!item) return;
+
+                this.ocrData.forEach((box, i) => {
+                    if (i !== this.selectingIndex && box.field === item.field) {
+                        box.field = '';
+                    }
+                });
+
+                console.log(`mapping box ${this.selectingIndex} with field "${item.field}" item.isManual: ${item.isManual}`);
+                if (item.isManual) {
+                    // Nếu là manual box, chuyển sang chế độ manual mapping
+                    this.manualIndex = this.selectingIndex;
+                    this.manualField = item.field || "";
+                    this.applyManualMapping();
+                    return;
+                }
+
+                // Xử lý box OCR (có thể chưa có field hoặc đã có field)
+                if (item.field) {
+                    // Nếu box đã có field, cập nhật lại
+                    const oldField = item.field;
+                    console.log(`Updating box OCR at index ${this.selectingIndex} from field "${oldField}" to "${item.field}"   "${item.bbox}"`);
+                    // Cập nhật formData để hiển thị trong input
+                    this.formData[item.field] = item.text || '';
+
+                    // Cập nhật manualBoxData với tọa độ mới (box OCR không có nút xóa)
+                    this.manualBoxData[item.field] = {
+                        coords: item.bbox,
+                        text: item.text || '',
+                        isFromOCR: true  // Đánh dấu đây là box OCR, không phải quét chọn
+                    };
+
+                    // Xóa dataMapping cũ để tránh focus về tọa độ cũ
+                    if (this.dataMapping && this.dataMapping[item.field]) {
+                        delete this.dataMapping[item.field];
+                    }
+
+                    // Set active index
+                    this.activeIndex = this.selectingIndex;
+                }
+
+                this.selectingIndex = null;
+            },
+            applyManualMapping() {
+                if (!this.manualField) return;
+                const manualIndex = this.manualIndex;
+
+                const newBbox = this.ocrData[manualIndex].bbox;
+
+                console.log(`manual for field "${this.manualField}" at index ${manualIndex} with bbox:`, newBbox);
+                this.ocrData.forEach((box, i) => {
+                    if (i !== manualIndex && box.field === this.ocrData[manualIndex].field) {
+                        box.field = '';
+                    }
+                });
+
+                let combinedText = [];
+                let foundItems = [];
+
+                // Tìm tất cả các box OCR nằm trong vùng manual
+                this.ocrData.forEach(item => {
+                    if (!item.isManual && this.isBoxInside(item.bbox, newBbox) && item.text.trim()) {
+                        const partial = this.getPartialText(item.text, item.bbox, newBbox);
+
+                        foundItems.push({
+                            text: partial,
+                            bbox: item.bbox,
+                            index: this.ocrData.indexOf(item)
+                        });
+                    }
+                });
+
+                // Sắp xếp các item theo vị trí (từ trái sang phải, từ trên xuống dưới)
+                foundItems.sort((a, b) => {
+                    // Ưu tiên theo Y trước (hàng), sau đó theo X (cột)
+                    if (Math.abs(a.bbox[1] - b.bbox[1]) < 20) { // Cùng hàng (tolerance 20px)
+                        return a.bbox[0] - b.bbox[0]; // Sắp xếp theo X
+                    }
+                    return a.bbox[1] - b.bbox[1]; // Sắp xếp theo Y
+                });
+
+                // Gộp text theo thứ tự đã sắp xếp
+                foundItems.forEach(item => {
+                    combinedText.push(item.text.trim());
+                });
+
+                const finalText = combinedText.join(" ");
+
+                // Gán field trực tiếp cho box manual
+                this.ocrData[manualIndex].field = this.manualField;
+
+                // Cập nhật formData để hiển thị trong input
+                this.formData[this.manualField] = finalText.trim();
+
+                // Cập nhật manualBoxData (box quét chọn có nút xóa)
+                this.manualBoxData[this.manualField] = {
+                    coords: newBbox,
+                    text: finalText.trim(),
+                    isFromOCR: false  // Đánh dấu đây là box quét chọn, không phải OCR
+                };
+
+                // Xóa dataMapping cũ để tránh focus về tọa độ cũ
+                if (this.dataMapping && this.dataMapping[this.manualField]) {
+                    delete this.dataMapping[this.manualField];
+                }
+
+                // Reset trạng thái chọn
+                this.isMappingManually = false;
+                this.selectBox.show = false;
+                this.selectBox.showDropdown = false;
+                this.manualField = "";
+                this.manualIndex = null;
+            },
+
+            isBoxInside(inner, outer) {
+                // inner: bbox của OCR item [x1, y1, x2, y2]
+                // outer: bbox của vùng manual [x1, y1, x2, y2]
+
+                // Kiểm tra xem box OCR có nằm hoàn toàn trong vùng manual không
+                const isFullyInside = (
+                    inner[0] >= outer[0] && // left edge
+                    inner[1] >= outer[1] && // top edge
+                    inner[2] <= outer[2] && // right edge
+                    inner[3] <= outer[3]    // bottom edge
+                );
+
+                // Kiểm tra xem box OCR có giao nhau với vùng manual không
+                const isOverlapping = !(
+                    inner[2] < outer[0] || // box bên trái vùng chọn
+                    inner[0] > outer[2] || // box bên phải vùng chọn
+                    inner[3] < outer[1] || // box phía trên vùng chọn
+                    inner[1] > outer[3]    // box phía dưới vùng chọn
+                );
+
+                // Trả về true nếu box OCR nằm hoàn toàn trong hoặc giao nhau đáng kể
+                return isFullyInside || isOverlapping;
+            },
+
+
+
+            getPartialText(text, bbox, selectBbox) {
+                const [x1, y1, x2, y2] = bbox;
+                const [sx1, sy1, sx2, sy2] = selectBbox;
+                // Chiều rộng box OCR
+                const boxWidth = x2 - x1;
+                const boxHeight = y2 - y1;
+
+                // Vị trí start và end tương đối trong text
+                let startRatio = Math.max(0, (sx1 - x1) / boxWidth);
+                let endRatio   = Math.min(1, (sx2 - x1) / boxWidth);
+
+                const startIndex = Math.floor(startRatio * text.length);
+                const endIndex   = Math.ceil(endRatio * text.length);
+
+                return text.substring(startIndex, endIndex).trim();
+            },
+            getSelectStyle(item) {
+                if (!this.imageWidth) return { position: 'absolute' };
+
+                const [x1, y1, x2, y2] = item.bbox;
+                const displayedWidth = this.$refs.pdfImage.clientWidth;
+                const displayedHeight = this.$refs.pdfImage.clientHeight;
+                const scaleX = displayedWidth / this.imageWidth;
+                const scaleY = displayedHeight / this.imageHeight;
+
+                return {
+                    position: 'absolute',
+                    left: `${Math.round(x1 * scaleX)}px`,
+                    top: `${Math.round(y2 * scaleY)}px`,
+                    zIndex: 9999
+                };
+            },
+
+            // Tạo box manual từ tọa độ trong DB
+            createManualBoxFromDB(fieldName, coordinates, text) {
+                if (!this.imageWidth || !this.imageHeight) {
+                    console.log('Cannot create manual box: Image not loaded');
+                    return;
+                }
+
+                // Parse coordinates từ string "x1,y1,x2,y2"
+                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;
+                }
+
+                const [x1, y1, x2, y2] = coords;
+
+                // 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) {
+
+                    // Xóa box cũ có cùng fieldName trước khi tạo mới (chỉ xóa manual box)
+                    this.ocrData = this.ocrData.filter(box => !(box.field === fieldName && box.isManual));
+
+                    // Tạo box manual từ DB (không có nút xóa)
+                    const manualBox = {
+                        text: text || '',
+                        bbox: coords,
+                        field: fieldName,
+                        isManual: true,
+                        showDelete: false,
+                        isDeleted: false,
+                        hideBorder: true
+                    };
+
+                    this.ocrData.push(manualBox);
+
+                    // Force re-render
+                    this.$forceUpdate();
+                } else {
+                    console.warn('Invalid coordinates for manual box:', coords);
+                }
+            },
+
+            // 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;
+                }
+
+                // 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;
+                }
+
+                const [x1, y1, x2, y2] = coords;
+
+                // 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) {
+
+                    // 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));
+
+                    // 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;
+
+                    // 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
+                    };
+
+                    this.ocrData.push(manualBox);
+                    console.log(`Manual box shown successfully: ${isFromOCR ? 'from OCR (no delete btn)' : 'from manual selection (with delete btn)'}`);
+
+                    // Force re-render
+                    this.$forceUpdate();
+                } else {
+                    console.warn('Invalid coordinates for manual box:', coords);
+                }
+            }
+
+        }
+    });
+
+</script>
+
+
+</body></html>

+<!DOCTYPE html>
+<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
+    <head>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+
+        <title>Laravel</title>
+
+        <!-- Fonts -->
+        <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap" rel="stylesheet">
+
+        <!-- Styles -->
+        <style>
+            /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}a{background-color:transparent}[hidden]{display:none}html{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;line-height:1.5}*,:after,:before{box-sizing:border-box;border:0 solid #e2e8f0}a{color:inherit;text-decoration:inherit}svg,video{display:block;vertical-align:middle}video{max-width:100%;height:auto}.bg-white{--bg-opacity:1;background-color:#fff;background-color:rgba(255,255,255,var(--bg-opacity))}.bg-gray-100{--bg-opacity:1;background-color:#f7fafc;background-color:rgba(247,250,252,var(--bg-opacity))}.border-gray-200{--border-opacity:1;border-color:#edf2f7;border-color:rgba(237,242,247,var(--border-opacity))}.border-t{border-top-width:1px}.flex{display:flex}.grid{display:grid}.hidden{display:none}.items-center{align-items:center}.justify-center{justify-content:center}.font-semibold{font-weight:600}.h-5{height:1.25rem}.h-8{height:2rem}.h-16{height:4rem}.text-sm{font-size:.875rem}.text-lg{font-size:1.125rem}.leading-7{line-height:1.75rem}.mx-auto{margin-left:auto;margin-right:auto}.ml-1{margin-left:.25rem}.mt-2{margin-top:.5rem}.mr-2{margin-right:.5rem}.ml-2{margin-left:.5rem}.mt-4{margin-top:1rem}.ml-4{margin-left:1rem}.mt-8{margin-top:2rem}.ml-12{margin-left:3rem}.-mt-px{margin-top:-1px}.max-w-6xl{max-width:72rem}.min-h-screen{min-height:100vh}.overflow-hidden{overflow:hidden}.p-6{padding:1.5rem}.py-4{padding-top:1rem;padding-bottom:1rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.pt-8{padding-top:2rem}.fixed{position:fixed}.relative{position:relative}.top-0{top:0}.right-0{right:0}.shadow{box-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px 0 rgba(0,0,0,.06)}.text-center{text-align:center}.text-gray-200{--text-opacity:1;color:#edf2f7;color:rgba(237,242,247,var(--text-opacity))}.text-gray-300{--text-opacity:1;color:#e2e8f0;color:rgba(226,232,240,var(--text-opacity))}.text-gray-400{--text-opacity:1;color:#cbd5e0;color:rgba(203,213,224,var(--text-opacity))}.text-gray-500{--text-opacity:1;color:#a0aec0;color:rgba(160,174,192,var(--text-opacity))}.text-gray-600{--text-opacity:1;color:#718096;color:rgba(113,128,150,var(--text-opacity))}.text-gray-700{--text-opacity:1;color:#4a5568;color:rgba(74,85,104,var(--text-opacity))}.text-gray-900{--text-opacity:1;color:#1a202c;color:rgba(26,32,44,var(--text-opacity))}.underline{text-decoration:underline}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.w-5{width:1.25rem}.w-8{width:2rem}.w-auto{width:auto}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}@media (min-width:640px){.sm\:rounded-lg{border-radius:.5rem}.sm\:block{display:block}.sm\:items-center{align-items:center}.sm\:justify-start{justify-content:flex-start}.sm\:justify-between{justify-content:space-between}.sm\:h-20{height:5rem}.sm\:ml-0{margin-left:0}.sm\:px-6{padding-left:1.5rem;padding-right:1.5rem}.sm\:pt-0{padding-top:0}.sm\:text-left{text-align:left}.sm\:text-right{text-align:right}}@media (min-width:768px){.md\:border-t-0{border-top-width:0}.md\:border-l{border-left-width:1px}.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (min-width:1024px){.lg\:px-8{padding-left:2rem;padding-right:2rem}}@media (prefers-color-scheme:dark){.dark\:bg-gray-800{--bg-opacity:1;background-color:#2d3748;background-color:rgba(45,55,72,var(--bg-opacity))}.dark\:bg-gray-900{--bg-opacity:1;background-color:#1a202c;background-color:rgba(26,32,44,var(--bg-opacity))}.dark\:border-gray-700{--border-opacity:1;border-color:#4a5568;border-color:rgba(74,85,104,var(--border-opacity))}.dark\:text-white{--text-opacity:1;color:#fff;color:rgba(255,255,255,var(--text-opacity))}.dark\:text-gray-400{--text-opacity:1;color:#cbd5e0;color:rgba(203,213,224,var(--text-opacity))}.dark\:text-gray-500{--tw-text-opacity:1;color:#6b7280;color:rgba(107,114,128,var(--tw-text-opacity))}}
+        </style>
+
+        <style>
+            body {
+                font-family: 'Nunito', sans-serif;
+            }
+        </style>
+    </head>
+    <body class="antialiased">
+        <div class="relative flex items-top justify-center min-h-screen bg-gray-100 dark:bg-gray-900 sm:items-center py-4 sm:pt-0">
+            @if (Route::has('login'))
+                <div class="hidden fixed top-0 right-0 px-6 py-4 sm:block">
+                    @auth
+                        <a href="{{ url('/home') }}" class="text-sm text-gray-700 dark:text-gray-500 underline">Home</a>
+                    @else
+                        <a href="{{ route('login') }}" class="text-sm text-gray-700 dark:text-gray-500 underline">Log in</a>
+
+                        @if (Route::has('register'))
+                            <a href="{{ route('register') }}" class="ml-4 text-sm text-gray-700 dark:text-gray-500 underline">Register</a>
+                        @endif
+                    @endauth
+                </div>
+            @endif
+
+            <div class="max-w-6xl mx-auto sm:px-6 lg:px-8">
+                <div class="flex justify-center pt-8 sm:justify-start sm:pt-0">
+                    <svg viewBox="0 0 651 192" fill="none" xmlns="http://www.w3.org/2000/svg" class="h-16 w-auto text-gray-700 sm:h-20">
+                        <g clip-path="url(#clip0)" fill="#EF3B2D">
+                            <path d="M248.032 44.676h-16.466v100.23h47.394v-14.748h-30.928V44.676zM337.091 87.202c-2.101-3.341-5.083-5.965-8.949-7.875-3.865-1.909-7.756-2.864-11.669-2.864-5.062 0-9.69.931-13.89 2.792-4.201 1.861-7.804 4.417-10.811 7.661-3.007 3.246-5.347 6.993-7.016 11.239-1.672 4.249-2.506 8.713-2.506 13.389 0 4.774.834 9.26 2.506 13.459 1.669 4.202 4.009 7.925 7.016 11.169 3.007 3.246 6.609 5.799 10.811 7.66 4.199 1.861 8.828 2.792 13.89 2.792 3.913 0 7.804-.955 11.669-2.863 3.866-1.908 6.849-4.533 8.949-7.875v9.021h15.607V78.182h-15.607v9.02zm-1.431 32.503c-.955 2.578-2.291 4.821-4.009 6.73-1.719 1.91-3.795 3.437-6.229 4.582-2.435 1.146-5.133 1.718-8.091 1.718-2.96 0-5.633-.572-8.019-1.718-2.387-1.146-4.438-2.672-6.156-4.582-1.719-1.909-3.032-4.152-3.938-6.73-.909-2.577-1.36-5.298-1.36-8.161 0-2.864.451-5.585 1.36-8.162.905-2.577 2.219-4.819 3.938-6.729 1.718-1.908 3.77-3.437 6.156-4.582 2.386-1.146 5.059-1.718 8.019-1.718 2.958 0 5.656.572 8.091 1.718 2.434 1.146 4.51 2.674 6.229 4.582 1.718 1.91 3.054 4.152 4.009 6.729.953 2.577 1.432 5.298 1.432 8.162-.001 2.863-.479 5.584-1.432 8.161zM463.954 87.202c-2.101-3.341-5.083-5.965-8.949-7.875-3.865-1.909-7.756-2.864-11.669-2.864-5.062 0-9.69.931-13.89 2.792-4.201 1.861-7.804 4.417-10.811 7.661-3.007 3.246-5.347 6.993-7.016 11.239-1.672 4.249-2.506 8.713-2.506 13.389 0 4.774.834 9.26 2.506 13.459 1.669 4.202 4.009 7.925 7.016 11.169 3.007 3.246 6.609 5.799 10.811 7.66 4.199 1.861 8.828 2.792 13.89 2.792 3.913 0 7.804-.955 11.669-2.863 3.866-1.908 6.849-4.533 8.949-7.875v9.021h15.607V78.182h-15.607v9.02zm-1.432 32.503c-.955 2.578-2.291 4.821-4.009 6.73-1.719 1.91-3.795 3.437-6.229 4.582-2.435 1.146-5.133 1.718-8.091 1.718-2.96 0-5.633-.572-8.019-1.718-2.387-1.146-4.438-2.672-6.156-4.582-1.719-1.909-3.032-4.152-3.938-6.73-.909-2.577-1.36-5.298-1.36-8.161 0-2.864.451-5.585 1.36-8.162.905-2.577 2.219-4.819 3.938-6.729 1.718-1.908 3.77-3.437 6.156-4.582 2.386-1.146 5.059-1.718 8.019-1.718 2.958 0 5.656.572 8.091 1.718 2.434 1.146 4.51 2.674 6.229 4.582 1.718 1.91 3.054 4.152 4.009 6.729.953 2.577 1.432 5.298 1.432 8.162 0 2.863-.479 5.584-1.432 8.161zM650.772 44.676h-15.606v100.23h15.606V44.676zM365.013 144.906h15.607V93.538h26.776V78.182h-42.383v66.724zM542.133 78.182l-19.616 51.096-19.616-51.096h-15.808l25.617 66.724h19.614l25.617-66.724h-15.808zM591.98 76.466c-19.112 0-34.239 15.706-34.239 35.079 0 21.416 14.641 35.079 36.239 35.079 12.088 0 19.806-4.622 29.234-14.688l-10.544-8.158c-.006.008-7.958 10.449-19.832 10.449-13.802 0-19.612-11.127-19.612-16.884h51.777c2.72-22.043-11.772-40.877-33.023-40.877zm-18.713 29.28c.12-1.284 1.917-16.884 18.589-16.884 16.671 0 18.697 15.598 18.813 16.884h-37.402zM184.068 43.892c-.024-.088-.073-.165-.104-.25-.058-.157-.108-.316-.191-.46-.056-.097-.137-.176-.203-.265-.087-.117-.161-.242-.265-.345-.085-.086-.194-.148-.29-.223-.109-.085-.206-.182-.327-.252l-.002-.001-.002-.002-35.648-20.524a2.971 2.971 0 00-2.964 0l-35.647 20.522-.002.002-.002.001c-.121.07-.219.167-.327.252-.096.075-.205.138-.29.223-.103.103-.178.228-.265.345-.066.089-.147.169-.203.265-.083.144-.133.304-.191.46-.031.085-.08.162-.104.25-.067.249-.103.51-.103.776v38.979l-29.706 17.103V24.493a3 3 0 00-.103-.776c-.024-.088-.073-.165-.104-.25-.058-.157-.108-.316-.191-.46-.056-.097-.137-.176-.203-.265-.087-.117-.161-.242-.265-.345-.085-.086-.194-.148-.29-.223-.109-.085-.206-.182-.327-.252l-.002-.001-.002-.002L40.098 1.396a2.971 2.971 0 00-2.964 0L1.487 21.919l-.002.002-.002.001c-.121.07-.219.167-.327.252-.096.075-.205.138-.29.223-.103.103-.178.228-.265.345-.066.089-.147.169-.203.265-.083.144-.133.304-.191.46-.031.085-.08.162-.104.25-.067.249-.103.51-.103.776v122.09c0 1.063.568 2.044 1.489 2.575l71.293 41.045c.156.089.324.143.49.202.078.028.15.074.23.095a2.98 2.98 0 001.524 0c.069-.018.132-.059.2-.083.176-.061.354-.119.519-.214l71.293-41.045a2.971 2.971 0 001.489-2.575v-38.979l34.158-19.666a2.971 2.971 0 001.489-2.575V44.666a3.075 3.075 0 00-.106-.774zM74.255 143.167l-29.648-16.779 31.136-17.926.001-.001 34.164-19.669 29.674 17.084-21.772 12.428-43.555 24.863zm68.329-76.259v33.841l-12.475-7.182-17.231-9.92V49.806l12.475 7.182 17.231 9.92zm2.97-39.335l29.693 17.095-29.693 17.095-29.693-17.095 29.693-17.095zM54.06 114.089l-12.475 7.182V46.733l17.231-9.92 12.475-7.182v74.537l-17.231 9.921zM38.614 7.398l29.693 17.095-29.693 17.095L8.921 24.493 38.614 7.398zM5.938 29.632l12.475 7.182 17.231 9.92v79.676l.001.005-.001.006c0 .114.032.221.045.333.017.146.021.294.059.434l.002.007c.032.117.094.222.14.334.051.124.088.255.156.371a.036.036 0 00.004.009c.061.105.149.191.222.288.081.105.149.22.244.314l.008.01c.084.083.19.142.284.215.106.083.202.178.32.247l.013.005.011.008 34.139 19.321v34.175L5.939 144.867V29.632h-.001zm136.646 115.235l-65.352 37.625V148.31l48.399-27.628 16.953-9.677v33.862zm35.646-61.22l-29.706 17.102V66.908l17.231-9.92 12.475-7.182v33.841z"/>
+                        </g>
+                    </svg>
+                </div>
+
+                <div class="mt-8 bg-white dark:bg-gray-800 overflow-hidden shadow sm:rounded-lg">
+                    <div class="grid grid-cols-1 md:grid-cols-2">
+                        <div class="p-6">
+                            <div class="flex items-center">
+                                <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" class="w-8 h-8 text-gray-500"><path d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"></path></svg>
+                                <div class="ml-4 text-lg leading-7 font-semibold"><a href="https://laravel.com/docs" class="underline text-gray-900 dark:text-white">Documentation</a></div>
+                            </div>
+
+                            <div class="ml-12">
+                                <div class="mt-2 text-gray-600 dark:text-gray-400 text-sm">
+                                    Laravel has wonderful, thorough documentation covering every aspect of the framework. Whether you are new to the framework or have previous experience with Laravel, we recommend reading all of the documentation from beginning to end.
+                                </div>
+                            </div>
+                        </div>
+
+                        <div class="p-6 border-t border-gray-200 dark:border-gray-700 md:border-t-0 md:border-l">
+                            <div class="flex items-center">
+                                <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" class="w-8 h-8 text-gray-500"><path d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z"></path><path d="M15 13a3 3 0 11-6 0 3 3 0 016 0z"></path></svg>
+                                <div class="ml-4 text-lg leading-7 font-semibold"><a href="https://laracasts.com" class="underline text-gray-900 dark:text-white">Laracasts</a></div>
+                            </div>
+
+                            <div class="ml-12">
+                                <div class="mt-2 text-gray-600 dark:text-gray-400 text-sm">
+                                    Laracasts offers thousands of video tutorials on Laravel, PHP, and JavaScript development. Check them out, see for yourself, and massively level up your development skills in the process.
+                                </div>
+                            </div>
+                        </div>
+
+                        <div class="p-6 border-t border-gray-200 dark:border-gray-700">
+                            <div class="flex items-center">
+                                <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" class="w-8 h-8 text-gray-500"><path d="M7 8h10M7 12h4m1 8l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-3l-4 4z"></path></svg>
+                                <div class="ml-4 text-lg leading-7 font-semibold"><a href="https://laravel-news.com/" class="underline text-gray-900 dark:text-white">Laravel News</a></div>
+                            </div>
+
+                            <div class="ml-12">
+                                <div class="mt-2 text-gray-600 dark:text-gray-400 text-sm">
+                                    Laravel News is a community driven portal and newsletter aggregating all of the latest and most important news in the Laravel ecosystem, including new package releases and tutorials.
+                                </div>
+                            </div>
+                        </div>
+
+                        <div class="p-6 border-t border-gray-200 dark:border-gray-700 md:border-l">
+                            <div class="flex items-center">
+                                <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" class="w-8 h-8 text-gray-500"><path d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
+                                <div class="ml-4 text-lg leading-7 font-semibold text-gray-900 dark:text-white">Vibrant Ecosystem</div>
+                            </div>
+
+                            <div class="ml-12">
+                                <div class="mt-2 text-gray-600 dark:text-gray-400 text-sm">
+                                    Laravel's robust library of first-party tools and libraries, such as <a href="https://forge.laravel.com" class="underline">Forge</a>, <a href="https://vapor.laravel.com" class="underline">Vapor</a>, <a href="https://nova.laravel.com" class="underline">Nova</a>, and <a href="https://envoyer.io" class="underline">Envoyer</a> help you take your projects to the next level. Pair them with powerful open source libraries like <a href="https://laravel.com/docs/billing" class="underline">Cashier</a>, <a href="https://laravel.com/docs/dusk" class="underline">Dusk</a>, <a href="https://laravel.com/docs/broadcasting" class="underline">Echo</a>, <a href="https://laravel.com/docs/horizon" class="underline">Horizon</a>, <a href="https://laravel.com/docs/sanctum" class="underline">Sanctum</a>, <a href="https://laravel.com/docs/telescope" class="underline">Telescope</a>, and more.
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="flex justify-center mt-4 sm:items-center sm:justify-between">
+                    <div class="text-center text-sm text-gray-500 sm:text-left">
+                        <div class="flex items-center">
+                            <svg fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" stroke="currentColor" class="-mt-px w-5 h-5 text-gray-400">
+                                <path d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"></path>
+                            </svg>
+
+                            <a href="https://laravel.bigcartel.com" class="ml-1 underline">
+                                Shop
+                            </a>
+
+                            <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" class="ml-4 -mt-px w-5 h-5 text-gray-400">
+                                <path d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path>
+                            </svg>
+
+                            <a href="https://github.com/sponsors/taylorotwell" class="ml-1 underline">
+                                Sponsor
+                            </a>
+                        </div>
+                    </div>
+
+                    <div class="ml-4 text-center text-sm text-gray-500 sm:text-right sm:ml-0">
+                        Laravel v{{ Illuminate\Foundation\Application::VERSION }} (PHP v{{ PHP_VERSION }})
+                    </div>
+                </div>
+            </div>
+        </div>
+    </body>
+</html>

+<?php
+
+use Illuminate\Http\Request;
+use Illuminate\Support\Facades\Route;
+
+/*
+|--------------------------------------------------------------------------
+| API Routes
+|--------------------------------------------------------------------------
+|
+| Here is where you can register API routes for your application. These
+| routes are loaded by the RouteServiceProvider within a group which
+| is assigned the "api" middleware group. Enjoy building your API!
+|
+*/
+
+Route::middleware('auth:sanctum')->get('/user', function (Request $request) {
+    return $request->user();
+});

+<?php
+
+use Illuminate\Support\Facades\Broadcast;
+
+/*
+|--------------------------------------------------------------------------
+| Broadcast Channels
+|--------------------------------------------------------------------------
+|
+| Here you may register all of the event broadcasting channels that your
+| application supports. The given channel authorization callbacks are
+| used to check if an authenticated user can listen to the channel.
+|
+*/
+
+Broadcast::channel('App.Models.User.{id}', function ($user, $id) {
+    return (int) $user->id === (int) $id;
+});

+<?php
+
+use Illuminate\Foundation\Inspiring;
+use Illuminate\Support\Facades\Artisan;
+
+/*
+|--------------------------------------------------------------------------
+| Console Routes
+|--------------------------------------------------------------------------
+|
+| This file is where you may define all of your Closure based console
+| commands. Each Closure is bound to a command instance allowing a
+| simple approach to interacting with each command's IO methods.
+|
+*/
+
+Artisan::command('inspire', function () {
+    $this->comment(Inspiring::quote());
+})->purpose('Display an inspiring quote');

+<?php
+
+use Illuminate\Support\Facades\Route;
+use App\Http\Controllers\OcrController;
+/*
+|--------------------------------------------------------------------------
+| Web Routes
+|--------------------------------------------------------------------------
+|
+| Here is where you can register web routes for your application. These
+| routes are loaded by the RouteServiceProvider within a group which
+| contains the "web" middleware group. Now create something great!
+|
+*/
+
+Route::get('/', function () {
+    return view('welcome');
+});
+Route::get('/ocr', [OcrController::class, 'index']);
+Route::get('/ocr/data-list', [OcrController::class, 'getData']);
+Route::post('/ocr/save-template', [OcrController::class, 'store'])->name('store');
+Route::get('/ocr/templates', [OcrController::class, 'getTemplateList'])->name('templates.list');
+Route::delete('/ocr/templates/{id}', [OcrController::class, 'deleteTemplate'])->name('templates.delete');

+<html lang="en"><head>
+    <meta charset="UTF-8">
+    <title>OCR Mapping with Manual Select Tool</title>
+    <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>
+
+</head>
+<body>
+<meta name="csrf-token" content="{{ csrf_token() }}">
+<div id="app">
+    <!-- Right: PDF viewer + select tool -->
+    <div class="right-panel" >
+        <div class="pdf-container" ref="pdfContainer"
+             @mousedown="startSelect"
+             @mousemove="onSelect"
+             @mouseup="endSelect">
+            <img
+                ref="pdfImage"
+                :src="pdfImageUrl"
+                @load="onImageLoad"
+                style="width: 100%; height: auto;pointer-events: none;"
+            />
+
+
+            <!-- Vùng kéo chọn -->
+            <div v-if="selectBox.show" class="select-box"
+                 :style="{ left: selectBox.x + 'px', top: selectBox.y + 'px', width: selectBox.width + 'px', height: selectBox.height + 'px' }"></div>
+
+            <!-- Vẽ bbox OCR -->
+            <div
+                v-for="(item, index) in ocrData"
+                :key="index"
+                v-if="!item.isDeleted"
+                class="bbox"
+                :class="{ active: index === activeIndex }"
+                :data-field="item.field"
+                :style="getBoxStyle(item, index)"
+                @click="onBoxClick(index)">
+
+                <button v-if="item.isManual && item.showDelete"
+                        class="delete-btn"
+                        @click.stop="deleteBox(index)">🗑</button>
+            </div>
+
+
+            <!-- Dropdown OCR -->
+            <select v-if="selectingIndex !== null && ocrData[selectingIndex]"
+                    :style="getSelectStyle(ocrData[selectingIndex])"
+                    v-model="ocrData[selectingIndex].field"
+                    @change="applyMapping"
+            >
+                <option disabled value="">-- Chọn trường dữ liệu --</option>
+                <option v-for="field in fieldData" :value="field.value">@{{ field.label }}</option>
+            </select>
+
+            <!-- Dropdown thủ công -->
+            <select v-if="selectBox.showDropdown"
+                    :style="{ left: selectBox.x + 'px', top: (selectBox.y + selectBox.height) + 'px' }"
+                    v-model="manualField"
+                    @change="applyManualMapping"
+                    @click.stop
+            >
+                <option disabled value="">-- Chọn trường dữ liệu --</option>
+                <option v-for="field in fieldData" :value="field.value">@{{ field.label }}</option>
+            </select>
+        </div>
+    </div>
+
+    <!-- Left: Form inputs -->
+    <div class="left-panel">
+        <div v-for="field in fieldOptions" :key="field.value" class="form-group">
+            <label>@{{ field.label }}</label>
+            <input v-model="formData[field.value]"
+                   @focus="highlightField(field.value)"
+                   @click="onInputClick(field.value)"
+                   @blur="onInputBlur(field.value)"
+                   :readonly="field.value === 'customer_name' && !hasCustomerNameXY"
+            >
+        </div>
+        <button @click="saveTemplate">💾Save</button>
+    </div>
+
+</div>
+
+
+<script>
+    new Vue({
+        el: '#app',
+        data() {
+            return {
+                pdfImageUrl: "",
+                selectingIndex: null,
+                isMappingManually: false,
+                isSelecting: false,
+                activeIndex: null,
+                manualField: "",
+                formData: {},
+                manualBoxData: {},
+                fieldOptions: [],
+                customer_name_xy: '',
+                hasCustomerNameXY: false,
+                ocrData: [],
+                selectBox: { show: false, showDropdown: false, x: 0, y: 0, width: 0, height: 0, startX: 0, startY: 0 },
+                manualIndex: null
+            }
+        },
+        created() {
+            // Chỉ tạo formData cho các field cần mapping
+            this.fieldOptions
+                .filter(f => f.value !== "template_name")
+                .forEach(f => {
+                    this.$set(this.formData, f.value, "");
+                });
+        },
+        mounted() {
+            this.loadOCRData();
+
+            // Thêm event listener để xóa focus khi click ra ngoài
+            document.addEventListener('click', (e) => {
+                // Nếu click không phải vào input hoặc box
+                if (!e.target.closest('.left-panel') && !e.target.closest('.bbox')) {
+                    this.removeAllFocus();
+                }
+            });
+        },
+        computed: {
+            fieldData() {
+                // Lọc bỏ template_name nếu không cần cho phần form mapping
+                return this.fieldOptions.filter(f => f.value !== "template_name");
+            }
+        },
+        methods: {
+            removeManualBoxes() {
+                this.ocrData = this.ocrData.filter(b => !b.isManual);
+                this.activeIndex = null;
+            },
+            // 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; // Giữ lại box hiện tại
+                    if (box.field === fieldName) {
+                        // Xóa box có field trùng lặp
+                        return false;
+                    }
+                    return true; // Giữ lại các box khác
+                });
+
+                // 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;
+
+                // 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 = '';
+                    }
+                    this.ocrData[newIndex].field = null;
+                    this.ocrData[newIndex].field_xy = null;
+                }
+
+                // Gán field mới
+                const bbox = this.ocrData[newIndex].bbox; // tọa độ OCR gốc [x1, y1, x2, y2]
+
+                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;
+
+                // Set text
+                this.formData[fieldName] = (text !== null ? text : (this.ocrData[newIndex].text || '')).trim();
+
+                // KHÔNG set active index (không focus)
+
+                // Nếu là customer_name
+                if (fieldName === 'customer_name') {
+                    this.hasCustomerNameXY = true;
+                    this.customer_name_xy = xyStr;
+                }
+            },
+
+            assignFieldToBox(index, fieldName, text = null) {
+                console.log(`Assigning field "${fieldName}" to box at index ${index} with text: "${text}"`);
+                if (index == null) return;
+
+                // 1. 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; // Giữ lại box hiện tại
+                    if (box.field === fieldName) {
+                        // Xóa box có field trùng lặp
+                        return false;
+                    }
+                    return true; // Giữ lại các box khác
+                });
+
+                // 2. 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;
+
+                // 3. Nếu box này từng gán field khác thì bỏ
+                const prev = this.ocrData[newIndex]?.field;
+                if (prev && prev !== fieldName) {
+                    if (prev === 'customer_name') {
+                        this.hasCustomerNameXY = false;
+                        this.customer_name_xy = '';
+                    }
+                    this.ocrData[newIndex].field = null;
+                    this.ocrData[newIndex].field_xy = null;
+                }
+
+                // 4. Gán field mới
+                const bbox = this.ocrData[newIndex].bbox; // tọa độ OCR gốc [x1, y1, x2, y2]
+                console.log('bbox', bbox);
+                const [x1, y1, w, h] = bbox;
+                const xyStr = `${x1},${y1},${w},${h}`;
+
+                this.ocrData[newIndex].field = fieldName;
+                this.ocrData[newIndex].field_xy = xyStr;
+
+                // 5. Gán text
+                const finalText = text !== null ? text : (this.ocrData[newIndex].text || '');
+                this.formData[fieldName] = finalText.trim();
+                console.log(`formData ${fieldName}`,  this.formData[fieldName]);
+
+                // Nếu trong manualBoxData tồn tại field này hoặc muốn tạo lại manual box từ ocrData
+                if (this.manualBoxData[fieldName]) {
+                    // Lấy tọa độ + text từ box hiện tại để tạo manual box mới
+                    this.createManualBoxFromDB(fieldName, this.ocrData[newIndex].bbox, finalText);
+                    // Cập nhật manualBoxData
+                    this.manualBoxData[fieldName] = {
+                        coords: this.ocrData[newIndex].bbox,
+                        text: finalText
+                    };
+                }
+
+                // 6. Active index
+                this.activeIndex = newIndex;
+                // 7. Nếu là customer_name
+                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;
+                } else {
+                    // Không có → tìm trong ocrData
+                    const found = this.ocrData.find(item => item.field === 'customer_name');
+                    if (found) {
+                        customer_name = found.text;
+                        customer_coords = found.field_xy;
+                    }
+
+                    const fieldsByName = {};
+                    this.ocrData.forEach(box => {
+                        if (box.field && !box.isDeleted) {
+                            // chỉ giữ 1 bản ghi cuối cùng cho mỗi field (box gần nhất)
+                            fieldsByName[box.field] = {
+                                text: box.field,
+                                coords: box.field_xy || ''
+                            };
+                        }
+                    });
+                    // // convert to array
+                    fields = (fieldsByName);
+                }
+
+                console.log('fields:', fields);
+
+                if (!customer_coords) {
+                    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
+                };
+                // console.log(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');
+                }
+            },
+
+
+            deleteBox(index) {
+                const item = this.ocrData[index];
+                if (item.isManual) {
+                    const manualBbox = item.bbox;
+
+                    // Hiện lại border các box OCR gốc nằm trong vùng thủ công
+                    this.ocrData.forEach(o => {
+                        if (!o.isManual && this.isBoxInside(o.bbox, manualBbox)) {
+                            o.hideBorder = false;
+                        }
+                    });
+
+                    // Đánh dấu xoá vùng thủ công
+                    this.ocrData[index].isDeleted = true;
+                    this.ocrData[index].showDelete = false;
+
+                    // Reset trạng thái nếu đây là vùng đang chọn
+                    if (this.manualIndex === index) {
+                        this.isMappingManually = false;
+                        this.selectBox.show = false;
+                        this.selectBox.showDropdown = false;
+                        this.manualField = "";
+                        this.manualIndex = 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.formData     = data.formData;
+                    this.fieldOptions = data.fieldOptions;
+                    this.dataMapping  = data.dataMapping;
+                    // Đợi image load xong trước khi xử lý
+                    if (this.$refs.pdfImage && this.$refs.pdfImage.complete) {
+                        this.processLoadedData();
+                    } else {
+                        console.log('Image not loaded yet, waiting for onImageLoad');
+                        // Image sẽ được xử lý trong onImageLoad
+                    }
+
+
+                } catch (error) {
+                    console.error('Error in loadOCRData:', error);
+                }
+            },
+
+            // Xử lý data sau khi image đã load
+            processLoadedData() {
+                // Tự động map field cho các box OCR dựa trên formData đã load
+                this.autoMapFieldsFromFormData();
+                // Kiểm tra và sửa lại tọa độ của các box manual
+
+                // Force re-render để đảm bảo các box được vẽ
+                this.$nextTick(() => {
+                    this.$forceUpdate();
+                });
+            },
+
+            // Tự động map field cho các box OCR dựa trên formData đã load từ DB
+            autoMapFieldsFromFormData() {
+                this.manualBoxData = {}; // reset
+                Object.keys(this.dataMapping).forEach(fieldName => {
+                    const { text, coords } = this.dataMapping[fieldName];
+                    // Ví dụ: tạo box từ dữ liệu
+                    //this.createManualBoxFromDB(fieldName, coords, text);
+
+                    this.manualBoxData[fieldName] = { text, coords };
+                });
+
+            },
+
+            onImageLoad() {
+                const img = this.$refs.pdfImage;
+                this.imageWidth = img.naturalWidth;
+                this.imageHeight = img.naturalHeight;
+                // Nếu đã có data, xử lý ngay
+                if (this.ocrData && this.ocrData.length > 0) {
+                    console.log('Image loaded and data exists, processing now');
+                    this.processLoadedData();
+                } else {
+                    console.log('Image loaded but no data yet');
+                }
+            },
+            getBoxStyle(item, index) {
+                if (!this.imageWidth || !this.imageHeight || !this.$refs.pdfImage) {
+                    return {};
+                }
+
+                const [x1, y1, x2, y2] = item.bbox;
+                const displayedWidth = this.$refs.pdfImage.clientWidth;
+                const displayedHeight = this.$refs.pdfImage.clientHeight;
+
+                const scaleX = displayedWidth / this.imageWidth;
+                const scaleY = displayedHeight / this.imageHeight;
+
+                const left = Math.round(x1 * scaleX);
+                const top = Math.round(y1 * scaleY);
+                const width = Math.round((x2 - x1) * scaleX);
+                const height = Math.round((y2 - y1) * scaleY);
+
+                return {
+                    position: 'absolute',
+                    left: `${left}px`,
+                    top: `${top}px`,
+                    width: `${width}px`,
+                    height: `${height}px`,
+                    border: item.hideBorder ? '2px solid #ccc' : '2px solid ' + (index === this.activeIndex ? '#199601' : '#ff5252'),
+                    boxSizing: 'border-box',
+                    cursor: 'pointer',
+                    zIndex: item.isManual ? 30 : 10
+                };
+            },
+            highlightField(field) {
+                let coords, text;
+                let isFromDB = false;
+
+                // Kiểm tra xem field này có phải từ DB không
+                if (this.dataMapping && this.dataMapping[field]) {
+                    isFromDB = true;
+                    coords = this.dataMapping[field].coords;
+                    text = this.dataMapping[field].text;
+                    console.log(`Using dataMapping for field "${field}":`, coords, text);
+                } else {
+                    // Kiểm tra xem ocrData đã có box nào với field này chưa
+                    const existingBox = this.ocrData.find(b => b.field === field && !b.isDeleted);
+                    if (this.manualBoxData[field]) {
+                        // Nếu không có trong ocrData, dùng manualBoxData (tọa độ mới)
+                        coords = this.manualBoxData[field].coords;
+                        text = this.manualBoxData[field].text;
+                        console.log(`Using manualBoxData (new coordinates) for field "${field}":`, coords, text);
+                    } else if (existingBox) {
+                        coords = existingBox.bbox;
+                        text = existingBox.text;
+                        console.log(`Using existing box for field "${field}":`, coords, text);
+                    }
+                }
+
+                // Nếu có coords thì tạo hoặc hiển thị lại box
+                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);
+                    }
+                }
+
+                // Tìm lại index của box để set active
+                let idx = -1;
+                for (let i = this.ocrData.length - 1; i >= 0; i--) {
+                    const it = this.ocrData[i];
+                    if (!it.isDeleted && it.field === field) {
+                        idx = i;
+                        break;
+                    }
+                }
+
+                if (idx !== -1) {
+                    this.activeIndex = idx;
+                    this.scrollToBox(idx);
+                    // Reset selectingIndex để không hiển thị dropdown khi highlight từ input
+                    this.selectingIndex = null;
+                } else {
+                    this.activeIndex = null;
+                }
+            },
+
+
+            // Scroll đến box tương ứng
+            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;
+                //const [x1, y1, x2, y2] = item.field_xy.split(',').map(Number);
+                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
+            onInputClick(fieldName) {
+                // Kiểm tra xem field này có data không
+                const fieldValue = this.formData[fieldName];
+                if (fieldValue && fieldValue.trim()) {
+                    // Nếu có data từ DB, highlight và focus vào box tương ứng
+                    this.highlightField(fieldName);
+                }
+            },
+
+            // Xử lý khi click ra ngoài input (blur)
+            onInputBlur(fieldName) {
+                // Khi không focus vào input nào, xóa tất cả focus
+                this.removeAllFocus();
+            },
+
+            // Xóa tất cả focus
+            removeAllFocus() {
+                // Reset active index (chỉ mất màu xanh, không xóa box)
+                this.activeIndex = 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;
+                    }
+                });
+
+                // Đả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ử lý khi click vào box
+            onBoxClick(index) {
+                const item = this.ocrData[index];
+
+                // Kiểm tra xem field này có phải từ DB không
+                const isFromDB = this.dataMapping && this.dataMapping[item.field];
+
+                // Kiểm tra xem data có được ghi đè không (so sánh với data gốc từ DB)
+                const isDataOverridden = item.field && isFromDB &&
+                    this.formData[item.field] !== this.dataMapping[item.field].text;
+
+                if (item.isManual) {
+                    // Manual box
+                    if (isFromDB && !isDataOverridden) {
+                        // Manual box từ DB chưa ghi đè, KHÔNG cho chọn option
+                        this.activeIndex = index;
+                        this.selectingIndex = null;
+                    } else {
+                        // Manual box từ DB có data ghi đè HOẶC manual box bình thường, CHO PHÉP chọn option
+                        this.selectingIndex = index;
+                    }
+                } else if (item.field) {
+                    // Box OCR có field
+                    if (isFromDB && !isDataOverridden) {
+                        // Box có field từ DB chưa ghi đè, KHÔNG cho chọn option
+                        this.activeIndex = index;
+                        this.selectingIndex = null;
+                    } else {
+                        // Box có field từ DB đã ghi đè HOẶC field mới, CHO PHÉP chọn option
+                        this.selectingIndex = index;
+                    }
+                } else {
+                    // Box OCR thông thường (chưa có field), cho phép hiển thị dropdown
+                    this.selectingIndex = index;
+                }
+            },
+            startSelect(e) {
+                if (this.isMappingManually || e.button !== 0) return;
+                this.isSelecting = true;
+                const rect = this.$refs.pdfContainer.getBoundingClientRect();
+                this.selectBox.startX = e.clientX - rect.left;
+                this.selectBox.startY = e.clientY - rect.top;
+                this.selectBox.x = this.selectBox.startX;
+                this.selectBox.y = this.selectBox.startY;
+                this.selectBox.width = 0;
+                this.selectBox.height = 0;
+                this.selectBox.show = true;
+                this.selectBox.showDropdown = false;
+                this.manualField = "";
+            },
+
+            onSelect(e) {
+                if (!this.isSelecting) return;
+                const rect = this.$refs.pdfContainer.getBoundingClientRect();
+                const currentX = e.clientX - rect.left;
+                const currentY = e.clientY - rect.top;
+                this.selectBox.x = Math.min(currentX, this.selectBox.startX);
+                this.selectBox.y = Math.min(currentY, this.selectBox.startY);
+                this.selectBox.width = Math.abs(currentX - this.selectBox.startX);
+                this.selectBox.height = Math.abs(currentY - this.selectBox.startY);
+            },
+
+            endSelect(e) {
+                if (!this.isSelecting) return;
+                this.isSelecting = false;
+
+                if (this.selectBox.width < 10 || this.selectBox.height < 10) {
+                    this.selectBox.show = false;
+                    return;
+                }
+
+                // displayed coords (như hiện tại, dùng để hiển thị select overlay)
+                const dispX1 = this.selectBox.x;
+                const dispY1 = this.selectBox.y;
+                const dispX2 = this.selectBox.x + this.selectBox.width;
+                const dispY2 = this.selectBox.y + this.selectBox.height;
+
+                // scale: displayed -> original (sửa lại để chính xác hơn)
+                const displayedWidth = this.$refs.pdfImage.clientWidth;
+                const displayedHeight = this.$refs.pdfImage.clientHeight;
+                const scaleX = this.imageWidth / displayedWidth;
+                const scaleY = this.imageHeight / displayedHeight;
+
+                // bbox ở hệ gốc (original image pixels) — dùng để so sánh với ocrData và lưu vào ocrData
+                const origBbox = [
+                    Math.round(dispX1 * scaleX),
+                    Math.round(dispY1 * scaleY),
+                    Math.round(dispX2 * scaleX),
+                    Math.round(dispY2 * scaleY)
+                ];
+
+                // Ẩn border các box OCR gốc nằm giao nhau với vùng thủ công (dùng coords gốc)
+                this.ocrData.forEach(item => {
+                    if (!item.isManual && this.isBoxInside(item.bbox, origBbox)) {
+                        item.hideBorder = true;
+                    }
+                });
+
+                // Thêm box thủ công (lưu theo coords gốc)
+                this.ocrData.push({
+                    text: "",
+                    bbox: origBbox,
+                    field: "",
+                    isManual: true,
+                    showDelete: true,
+                    isDeleted: false,
+                    hideBorder: false
+                });
+
+                this.manualIndex = this.ocrData.length - 1;
+                this.isMappingManually = true;
+                this.selectBox.showDropdown = true;
+
+                e.stopPropagation();
+                e.preventDefault();
+
+            }
+            ,
+            applyMapping() {
+                const item = this.ocrData[this.selectingIndex];
+                if (!item) return;
+
+                if (item.isManual) {
+                    // Nếu là manual box, chuyển sang chế độ manual mapping
+                    this.manualIndex = this.selectingIndex;
+                    this.manualField = item.field || "";
+                    this.applyManualMapping();
+                    return;
+                }
+
+                // Xử lý box OCR (có thể chưa có field hoặc đã có field)
+                if (item.field) {
+                    // Nếu box đã có field, cập nhật lại
+                    const oldField = item.field;
+
+                    // Cập nhật formData để hiển thị trong input
+                    this.formData[item.field] = item.text || '';
+
+                    // Cập nhật manualBoxData với tọa độ mới (box OCR không có nút xóa)
+                    this.manualBoxData[item.field] = {
+                        coords: item.bbox,
+                        text: item.text || '',
+                        isFromOCR: true  // Đánh dấu đây là box OCR, không phải quét chọn
+                    };
+
+                    // Xóa dataMapping cũ để tránh focus về tọa độ cũ
+                    if (this.dataMapping && this.dataMapping[item.field]) {
+                        delete this.dataMapping[item.field];
+                    }
+
+                    // Set active index
+                    this.activeIndex = this.selectingIndex;
+
+                    console.log(`Updated field "${item.field}" for box OCR at index ${this.selectingIndex} with new coordinates`);
+                }
+
+                this.selectingIndex = null;
+            },
+            applyManualMapping() {
+                if (!this.manualField) return;
+                const manualIndex = this.manualIndex;
+
+                const newBbox = this.ocrData[manualIndex].bbox;
+
+                let combinedText = [];
+                let foundItems = [];
+
+                // Tìm tất cả các box OCR nằm trong vùng manual
+                this.ocrData.forEach(item => {
+                    if (!item.isManual && this.isBoxInside(item.bbox, newBbox) && item.text.trim()) {
+                        foundItems.push({
+                            text: item.text,
+                            bbox: item.bbox,
+                            index: this.ocrData.indexOf(item)
+                        });
+                    }
+                });
+
+                // Sắp xếp các item theo vị trí (từ trái sang phải, từ trên xuống dưới)
+                foundItems.sort((a, b) => {
+                    // Ưu tiên theo Y trước (hàng), sau đó theo X (cột)
+                    if (Math.abs(a.bbox[1] - b.bbox[1]) < 20) { // Cùng hàng (tolerance 20px)
+                        return a.bbox[0] - b.bbox[0]; // Sắp xếp theo X
+                    }
+                    return a.bbox[1] - b.bbox[1]; // Sắp xếp theo Y
+                });
+
+                // Gộp text theo thứ tự đã sắp xếp
+                foundItems.forEach(item => {
+                    combinedText.push(item.text.trim());
+                });
+
+                const finalText = combinedText.join(" ");
+                console.log('Combined text:', finalText);
+
+                // Gán field và text cho box manual
+                console.log(`Assigning manual field "${this.manualField}" to box at index ${manualIndex} with text: "${finalText}"`);
+
+                // Gán field trực tiếp cho box manual
+                this.ocrData[manualIndex].field = this.manualField;
+
+                // Cập nhật formData để hiển thị trong input
+                this.formData[this.manualField] = finalText.trim();
+
+                // Cập nhật manualBoxData (box quét chọn có nút xóa)
+                this.manualBoxData[this.manualField] = {
+                    coords: newBbox,
+                    text: finalText.trim(),
+                    isFromOCR: false  // Đánh dấu đây là box quét chọn, không phải OCR
+                };
+
+                // Xóa dataMapping cũ để tránh focus về tọa độ cũ
+                if (this.dataMapping && this.dataMapping[this.manualField]) {
+                    delete this.dataMapping[this.manualField];
+                }
+
+                // Reset trạng thái chọn
+                this.isMappingManually = false;
+                this.selectBox.show = false;
+                this.selectBox.showDropdown = false;
+                this.manualField = "";
+                this.manualIndex = null;
+            },
+
+            isBoxInside(inner, outer) {
+                // inner: bbox của OCR item [x1, y1, x2, y2]
+                // outer: bbox của vùng manual [x1, y1, x2, y2]
+
+                // Kiểm tra xem box OCR có nằm hoàn toàn trong vùng manual không
+                const isFullyInside = (
+                    inner[0] >= outer[0] && // left edge
+                    inner[1] >= outer[1] && // top edge
+                    inner[2] <= outer[2] && // right edge
+                    inner[3] <= outer[3]    // bottom edge
+                );
+
+                // Kiểm tra xem box OCR có giao nhau với vùng manual không
+                const isOverlapping = !(
+                    inner[2] < outer[0] || // box bên trái vùng chọn
+                    inner[0] > outer[2] || // box bên phải vùng chọn
+                    inner[3] < outer[1] || // box phía trên vùng chọn
+                    inner[1] > outer[3]    // box phía dưới vùng chọn
+                );
+
+                // Trả về true nếu box OCR nằm hoàn toàn trong hoặc giao nhau đáng kể
+                return isFullyInside || isOverlapping;
+            },
+
+
+            getPartialText(text, bbox, selectBbox) {
+                const [x1, y1, x2, y2] = bbox;
+                const [sx1, sy1, sx2, sy2] = selectBbox;
+
+                // Chiều rộng box OCR
+                const boxWidth = x2 - x1;
+                const boxHeight = y2 - y1;
+
+                // Vị trí start và end tương đối trong text
+                let startRatio = Math.max(0, (sx1 - x1) / boxWidth);
+                let endRatio = Math.min(1, (sx2 - x1) / boxWidth);
+
+                const startIndex = Math.floor(startRatio * text.length);
+                const endIndex = Math.ceil(endRatio * text.length);
+
+                return text.substring(startIndex, endIndex).trim();
+            },
+            getSelectStyle(item) {
+                if (!this.imageWidth) return {position: 'absolute'};
+
+                const [x1, y1, x2, y2] = item.bbox;
+                const displayedWidth = this.$refs.pdfImage.clientWidth;
+                const displayedHeight = this.$refs.pdfImage.clientHeight;
+                const scaleX = displayedWidth / this.imageWidth;
+                const scaleY = displayedHeight / this.imageHeight;
+
+                return {
+                    position: 'absolute',
+                    left: `${Math.round(x1 * scaleX)}px`,
+                    top: `${Math.round(y2 * scaleY)}px`,
+                    zIndex: 9999
+                };
+            },
+
+            // Tạo box manual từ tọa độ trong DB
+            createManualBoxFromDB(fieldName, coordinates, text) {
+                if (!this.imageWidth || !this.imageHeight) {
+                    console.log('Cannot create manual box: Image not loaded');
+                    return;
+                }
+
+                // Parse coordinates từ string "x1,y1,x2,y2"
+                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;
+                }
+
+                const [x1, y1, x2, y2] = coords;
+
+                // 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) {
+
+                    // Xóa box cũ có cùng fieldName trước khi tạo mới (chỉ xóa manual box)
+                    this.ocrData = this.ocrData.filter(box => !(box.field === fieldName && box.isManual));
+
+                    // Tạo box manual từ DB (không có nút xóa)
+                    const manualBox = {
+                        text: text || '',
+                        bbox: coords,
+                        field: fieldName,
+                        isManual: true,
+                        showDelete: false,
+                        isDeleted: false,
+                        hideBorder: true
+                    };
+
+                    this.ocrData.push(manualBox);
+                    // console.log('Manual box created successfully:', manualBox);
+
+                    // Force re-render
+                    this.$forceUpdate();
+                } else {
+                    console.warn('Invalid coordinates for manual box:', coords);
+                }
+            },
+
+            // 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;
+                }
+
+                // 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;
+                }
+
+                const [x1, y1, x2, y2] = coords;
+
+                // 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) {
+
+                    // 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));
+
+                    // 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;
+
+                    // 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
+                    };
+
+                    this.ocrData.push(manualBox);
+                    console.log(`Manual box shown successfully: ${isFromOCR ? 'from OCR (no delete btn)' : 'from manual selection (with delete btn)'}`);
+
+                    // Force re-render
+                    this.$forceUpdate();
+                } else {
+                    console.warn('Invalid coordinates for manual box:', coords);
+                }
+            }
+
+        }
+    });
+
+</script>
+
+
+</body>
+</html>

+<?php
+
+/**
+ * Laravel - A PHP Framework For Web Artisans
+ *
+ * @package  Laravel
+ * @author   Taylor Otwell <taylor@laravel.com>
+ */
+
+$uri = urldecode(
+    parse_url($_SERVER['REQUEST_URI'], PHP_URL_PATH) ?? ''
+);
+
+// This file allows us to emulate Apache's "mod_rewrite" functionality from the
+// built-in PHP web server. This provides a convenient way to test a Laravel
+// application without having installed a "real" web server software here.
+if ($uri !== '/' && file_exists(__DIR__.'/public'.$uri)) {
+    return false;
+}
+
+require_once __DIR__.'/public/index.php';

+*
+!public/
+!.gitignore

+*
+!.gitignore

+compiled.php
+config.php
+down
+events.scanned.php
+maintenance.php
+routes.php
+routes.scanned.php
+schedule-*
+services.json

+*
+!data/
+!.gitignore

+*
+!.gitignore

+*
+!.gitignore

+*
+!.gitignore

+*
+!.gitignore

+*
+!.gitignore

+<?php
+
+namespace Tests;
+
+use Illuminate\Contracts\Console\Kernel;
+
+trait CreatesApplication
+{
+    /**
+     * Creates the application.
+     *
+     * @return \Illuminate\Foundation\Application
+     */
+    public function createApplication()
+    {
+        $app = require __DIR__.'/../bootstrap/app.php';
+
+        $app->make(Kernel::class)->bootstrap();
+
+        return $app;
+    }
+}

+<?php
+
+namespace Tests\Feature;
+
+use Illuminate\Foundation\Testing\RefreshDatabase;
+use Tests\TestCase;
+
+class ExampleTest extends TestCase
+{
+    /**
+     * A basic test example.
+     *
+     * @return void
+     */
+    public function test_example()
+    {
+        $response = $this->get('/');
+
+        $response->assertStatus(200);
+    }
+}

+<?php
+
+namespace Tests;
+
+use Illuminate\Foundation\Testing\TestCase as BaseTestCase;
+
+abstract class TestCase extends BaseTestCase
+{
+    use CreatesApplication;
+}

+<?php
+
+namespace Tests\Unit;
+
+use PHPUnit\Framework\TestCase;
+
+class ExampleTest extends TestCase
+{
+    /**
+     * A basic test example.
+     *
+     * @return void
+     */
+    public function test_example()
+    {
+        $this->assertTrue(true);
+    }
+}

+const mix = require('laravel-mix');
+
+/*
+ |--------------------------------------------------------------------------
+ | Mix Asset Management
+ |--------------------------------------------------------------------------
+ |
+ | Mix provides a clean, fluent API for defining some Webpack build steps
+ | for your Laravel applications. By default, we are compiling the CSS
+ | file for the application as well as bundling up all the JS files.
+ |
+ */
+
+mix.js('resources/js/app.js', 'public/js')
+    .postCss('resources/css/app.css', 'public/css', [
+        //
+    ]);