{"id":1327,"date":"2026-02-25T04:41:32","date_gmt":"2026-02-24T21:41:32","guid":{"rendered":"https:\/\/workcrane.co.th\/?page_id=1327"},"modified":"2026-02-26T02:25:36","modified_gmt":"2026-02-25T19:25:36","slug":"elementor-page-1327","status":"publish","type":"page","link":"https:\/\/workcrane.co.th\/index.php\/elementor-page-1327\/","title":{"rendered":"\u0e08\u0e31\u0e14\u0e01\u0e32\u0e23\u0e23\u0e16"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"1327\" class=\"elementor elementor-1327\">\n\t\t\t\t<div class=\"elementor-element elementor-element-197146e e-con-full e-flex e-con e-parent\" data-id=\"197146e\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-559dae8 elementor-widget elementor-widget-html\" data-id=\"559dae8\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t    <div id=\"wcms-crane-fleet-admin\">\n      <script src=\"https:\/\/cdn.tailwindcss.com?plugins=forms,container-queries\"><\/script>\n      <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Prompt:wght@400;500;600;700&family=Sarabun:wght@300;400;500;600&display=swap\" rel=\"stylesheet\" \/>\n      <link href=\"https:\/\/fonts.googleapis.com\/icon?family=Material+Icons\" rel=\"stylesheet\" \/>\n      <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap\" rel=\"stylesheet\" \/>\n\n      <script>\n        tailwind.config = {\n          darkMode: \"class\",\n          corePlugins: { preflight: false },\n          theme: {\n            extend: {\n              colors: {\n                primary: \"#f2f20d\",\n                \"background-light\": \"#f8f8f5\",\n                \"background-dark\": \"#221610\",\n                \"neutral-muted\": \"#e5e5d1\",\n                \"accent-dark\": \"#333311\",\n              },\n              fontFamily: {\n                display: [\"Prompt\", \"sans-serif\"],\n                header: [\"Prompt\", \"sans-serif\"],\n              },\n            },\n          },\n        };\n      <\/script>\n\n      <style>\n        #wcms-crane-fleet-admin,\n        #wcms-crane-fleet-admin * { box-sizing: border-box; }\n        #wcms-crane-fleet-admin { font-family: \"Sarabun\", sans-serif; }\n        #wcms-crane-fleet-admin h1,\n        #wcms-crane-fleet-admin h2,\n        #wcms-crane-fleet-admin h3,\n        #wcms-crane-fleet-admin .font-header { font-family: \"Prompt\", sans-serif; }\n        #wcms-crane-fleet-admin .material-symbols-outlined {\n          font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;\n        }\n        #wcms-crane-fleet-admin .icon-action {\n          background: transparent;\n          border: 0;\n          padding: 0;\n          line-height: 1;\n          cursor: pointer;\n        }\n        #wcms-crane-fleet-admin .wcms-actions {\n          display: flex;\n          flex-wrap: nowrap;\n          justify-content: center;\n          gap: .4rem;\n        }\n        #wcms-crane-fleet-admin .wcms-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 1rem; }\n        #wcms-crane-fleet-admin .wcms-table { width: 100%; table-layout: fixed; }\n        #wcms-crane-fleet-admin th,\n        #wcms-crane-fleet-admin td { vertical-align: middle; }\n        #wcms-crane-fleet-admin .wcms-cell { word-break: break-word; line-height: 1.35; }\n        #wcms-crane-fleet-admin .wcms-cell-trunc { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }\n        #wcms-crane-fleet-admin .wcms-icon-btn {\n          width: auto;\n          height: auto;\n          padding: 0;\n          border: 0;\n          border-radius: 0;\n          background: transparent !important;\n          box-shadow: none !important;\n          display: inline-flex;\n          align-items: center;\n          justify-content: center;\n          cursor: pointer;\n          line-height: 1;\n        }\n        #wcms-crane-fleet-admin .wcms-btn-view,\n        #wcms-crane-fleet-admin .wcms-btn-view .material-icons { color: #2563eb !important; }\n        #wcms-crane-fleet-admin .wcms-btn-view:hover,\n        #wcms-crane-fleet-admin .wcms-btn-view:hover .material-icons { color: #1d4ed8 !important; }\n        #wcms-crane-fleet-admin .wcms-btn-edit,\n        #wcms-crane-fleet-admin .wcms-btn-edit .material-icons { color: #16a34a !important; }\n        #wcms-crane-fleet-admin .wcms-btn-edit:hover,\n        #wcms-crane-fleet-admin .wcms-btn-edit:hover .material-icons { color: #15803d !important; }\n        #wcms-crane-fleet-admin .wcms-btn-del,\n        #wcms-crane-fleet-admin .wcms-btn-del .material-icons { color: #dc2626 !important; }\n        #wcms-crane-fleet-admin .wcms-btn-del:hover,\n        #wcms-crane-fleet-admin .wcms-btn-del:hover .material-icons { color: #b91c1c !important; }\n        #wcms-crane-fleet-admin .wcms-page-btn {\n          border: 1px solid #0f172a !important;\n          background: #0f172a !important;\n          color: #ffffff !important;\n          border-radius: 0.5rem;\n          padding: 0.5rem 0.75rem;\n          font-size: 0.875rem;\n          font-weight: 500;\n          transition: opacity 0.15s ease;\n        }\n        #wcms-crane-fleet-admin .wcms-page-btn:hover { opacity: .9; }\n        #wcms-crane-fleet-admin .wcms-page-btn:disabled { opacity: .4; cursor: not-allowed; }\n        #wcms-crane-fleet-admin .sidebar-item-active {\n          background: #f2f20d;\n          color: #333311;\n        }\n        #wcms-crane-fleet-admin #fleetModal.show,\n        #wcms-crane-fleet-admin #confirmModal.show,\n        #wcms-crane-fleet-admin #planModal.show {\n          opacity: 1;\n          pointer-events: auto;\n        }\n        #wcms-crane-fleet-admin #fleetModal.show > div,\n        #wcms-crane-fleet-admin #confirmModal.show > div,\n        #wcms-crane-fleet-admin #planModal.show > div {\n          transform: scale(1);\n          opacity: 1;\n        }\n      <\/style>\n\n      <div id=\"wcmsCsrf\" data-csrf=\"\" data-wpnonce=\"d50991f451\" style=\"display:none;\"><\/div>\n\n      <div class=\"min-h-screen bg-background-light\">\n        <aside class=\"fixed inset-y-0 left-0 hidden md:flex w-64 bg-white border-r border-slate-200 flex-col z-20\">\n          <div class=\"p-6\">\n            <div class=\"flex items-center gap-2 mb-8\">\n              <div class=\"w-10 h-10 bg-primary rounded-lg flex items-center justify-center text-accent-dark\">\n                <span class=\"material-icons font-bold\">construction<\/span>\n              <\/div>\n              <h1 class=\"font-display font-semibold text-xl tracking-tight\">WCMS Admin<\/h1>\n            <\/div>\n\n            <nav class=\"space-y-1\">\n              <a class=\"flex items-center gap-3 px-4 py-3 text-slate-700 rounded-lg hover:bg-slate-100 transition-all\" href=\"https:\/\/workcrane.co.th\/index.php\/elementor-page-325\/\">\n              <span class=\"material-icons text-[20px]\">dashboard<\/span>\n              <span class=\"font-display\">\u0e41\u0e14\u0e0a\u0e1a\u0e2d\u0e23\u0e4c\u0e14<\/span>\n            <\/a>\n\n            <a class=\"flex items-center gap-3 px-4 py-3 text-slate-700 rounded-lg hover:bg-slate-100 transition-all\" href=\"https:\/\/workcrane.co.th\/index.php\/jobrequest\/\">\n              <span class=\"material-icons text-[20px]\">assignment<\/span>\n              <span class=\"font-display\">\u0e04\u0e33\u0e02\u0e2d\u0e08\u0e2d\u0e07\u0e23\u0e16\u0e40\u0e04\u0e23\u0e19<\/span>\n            <\/a>\n\n            <a class=\"flex items-center gap-3 px-4 py-3 text-slate-600 hover:bg-slate-100 rounded-lg transition-all\" href=\"https:\/\/workcrane.co.th\/index.php\/quotationss\/\">\n              <span class=\"material-icons text-[20px]\">description<\/span>\n              <span class=\"font-display\">\u0e43\u0e1a\u0e40\u0e2a\u0e19\u0e2d\u0e23\u0e32\u0e04\u0e32<\/span>\n            <\/a>\n\n            <a class=\"flex items-center gap-3 px-4 py-3 text-slate-600 hover:bg-slate-100 rounded-lg transition-all\" href=\"https:\/\/workcrane.co.th\/index.php\/operation-finance\/\">\n              <span class=\"material-icons text-xl\">receipt_long<\/span>\n              <span class=\"font-display text-sm font-medium\">Operation &amp; Finance<\/span>\n            <\/a>\n\n            <a class=\"flex items-center gap-3 px-4 py-3 text-slate-600 hover:bg-slate-100 rounded-lg transition-all\" href=\"https:\/\/workcrane.co.th\/index.php\/vehicle_management\/\">\n              <span class=\"material-icons text-[20px]\">badge<\/span>\n              <span class=\"font-display\">\u0e08\u0e31\u0e14\u0e01\u0e32\u0e23\u0e1e\u0e19\u0e31\u0e01\u0e07\u0e32\u0e19\u0e02\u0e31\u0e1a\u0e23\u0e16<\/span>\n            <\/a>\n\n              <a class=\"flex items-center gap-3 px-4 py-3 rounded-lg sidebar-item-active shadow-sm\" href=\"https:\/\/workcrane.co.th\/index.php\/crane_fleet_management\/\">\n              <span class=\"material-icons text-[20px]\">local_shipping<\/span>\n              <span class=\"font-display\">\u0e23\u0e30\u0e1a\u0e1a\u0e08\u0e31\u0e14\u0e01\u0e32\u0e23\u0e23\u0e16\u0e40\u0e04\u0e23\u0e19<\/span>\n            <\/a>\n\n            <\/nav>\n          <\/div>\n\n          <div class=\"mt-auto p-6 border-t border-slate-200\">\n            <div class=\"flex items-center gap-3\">\n              <div class=\"w-10 h-10 rounded-full bg-slate-200 overflow-hidden\">\n                <img decoding=\"async\" class=\"w-full h-full object-cover\" src=\"https:\/\/lh3.googleusercontent.com\/aida-public\/AB6AXuCihMr-ANu3su3YcJT8o4eoVH2JrttOZQRS2qv3x3xWIZ9lZEimYU4K4nVwiybAd7ymK-OCtWY7OpZZLDFt3ZuF6GiJYnNw63QcDIgjVbysTHoWlVXsqc26tYcwHB5ZEBJXX4gMwRV_0GRBVosaLZ2BLk2CLL4QT-6CHhNShhuhSpg5HxAdKbTXCHuCdiSqO3t6_XoVjckTsgtFSjn5b_2TrzR3c0AqRQLFjeEzfC-6VuhPzo3MLCpPHsfKEf16s0rRS8MEOSyHKw\" alt=\"Admin user profile picture\" \/>\n              <\/div>\n              <div>\n                <p class=\"text-sm font-semibold font-display\">\u0e2a\u0e21\u0e0a\u0e32\u0e22 \u0e43\u0e08\u0e14\u0e35<\/p>\n                <p class=\"text-xs text-slate-500\">Super Admin<\/p>\n              <\/div>\n            <\/div>\n          <\/div>\n        <\/aside>\n\n        <main class=\"md:ml-64 min-w-0 flex flex-col overflow-hidden\">\n          <header class=\"h-16 bg-white border-b border-slate-200 flex items-center justify-between px-4 md:px-8 gap-3\">\n            <h2 class=\"text-xl font-header font-bold\">\u0e08\u0e31\u0e14\u0e01\u0e32\u0e23\u0e01\u0e25\u0e38\u0e48\u0e21\u0e23\u0e16\u0e40\u0e04\u0e23\u0e19<\/h2>\n            <div class=\"flex items-center gap-2\">\n              <button id=\"btnAdd\" class=\"flex items-center gap-2 bg-primary hover:bg-yellow-300 text-zinc-900 px-4 md:px-6 py-2.5 rounded-xl font-header font-bold whitespace-nowrap transition-all shadow-lg shadow-primary\/20\">\n                <span class=\"material-icons\">add<\/span>\n                \u0e40\u0e1e\u0e34\u0e48\u0e21\u0e23\u0e16\u0e40\u0e04\u0e23\u0e19\u0e43\u0e2b\u0e21\u0e48\n              <\/button>\n            <\/div>\n          <\/header>\n\n          <div class=\"flex-1 overflow-y-auto p-4 md:p-8 bg-slate-50\">\n            <div class=\"wcms-card p-4 mb-6 flex flex-nowrap gap-3 items-center overflow-x-auto\">\n              <div class=\"relative flex-1 min-w-[280px]\">\n                <span class=\"material-symbols-outlined absolute left-3 top-1\/2 -translate-y-1\/2 text-slate-400\">search<\/span>\n                <input id=\"qSearch\" class=\"w-full pl-10 pr-4 py-2 bg-slate-50 rounded-lg text-sm\" placeholder=\"\u0e04\u0e49\u0e19\u0e2b\u0e32\u0e0a\u0e37\u0e48\u0e2d\u0e23\u0e16, \u0e23\u0e38\u0e48\u0e19 \u0e2b\u0e23\u0e37\u0e2d\u0e1b\u0e49\u0e32\u0e22\u0e17\u0e30\u0e40\u0e1a\u0e35\u0e22\u0e19...\" type=\"text\"\/>\n              <\/div>\n              <select id=\"qStatusFilter\" class=\"bg-slate-50 rounded-lg text-sm py-2 px-4 w-40 shrink-0\">\n                <option value=\"\">\u0e2a\u0e16\u0e32\u0e19\u0e30\u0e17\u0e31\u0e49\u0e07\u0e2b\u0e21\u0e14<\/option>\n                <option value=\"available\">\u0e27\u0e48\u0e32\u0e07<\/option>\n                <option value=\"done_job\">\u0e08\u0e1a\u0e07\u0e32\u0e19<\/option>\n                <option value=\"on_job\">\u0e01\u0e33\u0e25\u0e31\u0e07\u0e1b\u0e0f\u0e34\u0e1a\u0e31\u0e15\u0e34\u0e07\u0e32\u0e19<\/option>\n                <option value=\"maintenance\">\u0e0b\u0e48\u0e2d\u0e21\u0e1a\u0e33\u0e23\u0e38\u0e07<\/option>\n              <\/select>\n              <button id=\"btnApplyFilter\" class=\"px-4 py-2 rounded-lg bg-zinc-900 text-white font-bold shrink-0\">\u0e01\u0e23\u0e2d\u0e07<\/button>\n            <\/div>\n\n            <div class=\"wcms-card shadow-sm overflow-hidden\">\n              <div class=\"overflow-x-auto\">\n                <table class=\"wcms-table text-left border-collapse min-w-[980px]\">\n                  <thead>\n                    <tr class=\"bg-slate-50 border-b border-slate-200\">\n                      <th class=\"px-3 py-3 font-display text-sm font-semibold text-slate-600\">\u0e23\u0e39\u0e1b\u0e20\u0e32\u0e1e<\/th>\n                      <th class=\"px-3 py-3 font-display text-sm font-semibold text-slate-600\">\u0e0a\u0e37\u0e48\u0e2d\u0e23\u0e16<\/th>\n                      <th class=\"px-3 py-3 font-display text-sm font-semibold text-slate-600\">\u0e23\u0e38\u0e48\u0e19<\/th>\n                      <th class=\"px-3 py-3 font-display text-sm font-semibold text-slate-600\">\u0e17\u0e30\u0e40\u0e1a\u0e35\u0e22\u0e19<\/th>\n                      <th class=\"px-3 py-3 font-display text-sm font-semibold text-slate-600\">\u0e2a\u0e16\u0e32\u0e19\u0e30<\/th>\n                      <th class=\"px-3 py-3 font-display text-sm font-semibold text-slate-600 text-center\">\u0e01\u0e32\u0e23\u0e08\u0e31\u0e14\u0e01\u0e32\u0e23<\/th>\n                    <\/tr>\n                  <\/thead>\n                  <tbody id=\"fleetTbody\" class=\"divide-y divide-slate-100\">\n                    <tr><td colspan=\"6\" class=\"px-6 py-6 text-sm text-slate-500\">\u0e01\u0e33\u0e25\u0e31\u0e07\u0e42\u0e2b\u0e25\u0e14...<\/td><\/tr>\n                  <\/tbody>\n                <\/table>\n              <\/div>\n\n              <div class=\"px-4 py-3 border-t border-slate-200 flex items-center justify-between gap-3\">\n                <p id=\"pageInfo\" class=\"text-sm text-slate-500\">-<\/p>\n                <div class=\"flex items-center gap-2\">\n                  <button id=\"btnPrev\" class=\"wcms-page-btn\">\u0e01\u0e48\u0e2d\u0e19\u0e2b\u0e19\u0e49\u0e32<\/button>\n                  <button id=\"btnNext\" class=\"wcms-page-btn\">\u0e2b\u0e19\u0e49\u0e32\u0e16\u0e31\u0e14\u0e44\u0e1b<\/button>\n                <\/div>\n              <\/div>\n            <\/div>\n          <\/div>\n        <\/main>\n      <\/div>\n\n      <div id=\"fleetModal\" class=\"fixed inset-0 z-50 flex items-center justify-center p-4 bg-black\/60 opacity-0 pointer-events-none transition-all duration-200\">\n        <div class=\"w-full max-w-2xl bg-white rounded-2xl shadow-2xl overflow-hidden transform scale-95 opacity-0 transition-all duration-200\">\n          <div class=\"px-6 py-4 border-b border-slate-100 flex items-center justify-between\">\n            <div>\n              <h3 id=\"mTitle\" class=\"font-header text-xl font-bold\">-<\/h3>\n              <p class=\"text-xs text-slate-500\" id=\"mHint\">-<\/p>\n            <\/div>\n            <button id=\"btnClose\" type=\"button\" class=\"w-9 h-9 rounded-full hover:bg-slate-300 flex items-center justify-center\"><span class=\"material-symbols-outlined\">close<\/span><\/button>\n          <\/div>\n\n          <div class=\"p-6 grid grid-cols-1 md:grid-cols-2 gap-4 text-sm\">\n            <div><label class=\"font-header text-sm\">\u0e0a\u0e37\u0e48\u0e2d\u0e23\u0e16 *<\/label><input id=\"fCraneName\" class=\"w-full mt-1 rounded-lg border-slate-200\" type=\"text\"><\/div>\n            <div><label class=\"font-header text-sm\">\u0e23\u0e38\u0e48\u0e19 *<\/label><input id=\"fModel\" class=\"w-full mt-1 rounded-lg border-slate-200\" type=\"text\"><\/div>\n            <div><label class=\"font-header text-sm\">\u0e1b\u0e49\u0e32\u0e22\u0e17\u0e30\u0e40\u0e1a\u0e35\u0e22\u0e19 *<\/label><input id=\"fPlateNo\" class=\"w-full mt-1 rounded-lg border-slate-200\" type=\"text\"><\/div>\n            <div>\n              <label class=\"font-header text-sm\">\u0e2a\u0e16\u0e32\u0e19\u0e30\u0e01\u0e32\u0e23\u0e1a\u0e33\u0e23\u0e38\u0e07\u0e23\u0e31\u0e01\u0e29\u0e32<\/label>\n              <select id=\"fMaintStatus\" class=\"w-full mt-1 rounded-lg border-slate-200\">\n                <option value=\"available\">\u0e27\u0e48\u0e32\u0e07<\/option>\n                <option value=\"done_job\">\u0e08\u0e1a\u0e07\u0e32\u0e19<\/option>\n                <option value=\"on_job\">\u0e01\u0e33\u0e25\u0e31\u0e07\u0e1b\u0e0f\u0e34\u0e1a\u0e31\u0e15\u0e34\u0e07\u0e32\u0e19<\/option>\n                <option value=\"maintenance\">\u0e0b\u0e48\u0e2d\u0e21\u0e1a\u0e33\u0e23\u0e38\u0e07<\/option>\n              <\/select>\n            <\/div>\n            <div class=\"md:col-span-2\">\n              <label class=\"font-header text-sm\">\u0e40\u0e25\u0e37\u0e2d\u0e01\u0e23\u0e39\u0e1b\u0e08\u0e32\u0e01\u0e40\u0e04\u0e23\u0e37\u0e48\u0e2d\u0e07\/\u0e42\u0e17\u0e23\u0e28\u0e31\u0e1e\u0e17\u0e4c<\/label>\n              <div class=\"mt-1 flex flex-wrap items-center gap-2\">\n                <input id=\"fPhotoFile\" class=\"block w-full md:w-auto text-sm\" type=\"file\" accept=\"image\/*\" \/>\n                <button id=\"btnUploadPhoto\" type=\"button\" class=\"px-4 py-2 rounded-lg bg-slate-900 text-white text-sm font-bold\">\u0e2d\u0e31\u0e1b\u0e42\u0e2b\u0e25\u0e14\u0e23\u0e39\u0e1b<\/button>\n                <span id=\"uploadStatus\" class=\"text-xs text-slate-500\"><\/span>\n              <\/div>\n              <input id=\"fPhotoUrl\" type=\"hidden\" value=\"\" \/>\n            <\/div>\n            <div class=\"md:col-span-2\"><label class=\"font-header text-sm\">\u0e2b\u0e21\u0e32\u0e22\u0e40\u0e2b\u0e15\u0e38<\/label><textarea id=\"fNotes\" class=\"w-full mt-1 rounded-lg border-slate-200 min-h-[90px]\"><\/textarea><\/div>\n            <div class=\"md:col-span-2\">\n              <div id=\"photoPreviewWrap\" class=\"hidden mt-1\">\n                <img id=\"photoPreview\" class=\"h-24 w-24 rounded-xl object-cover border border-slate-200\" alt=\"Crane preview\" \/>\n              <\/div>\n            <\/div>\n          <\/div>\n\n          <div class=\"px-6 py-4 bg-slate-50 border-t border-slate-100 flex justify-end gap-2\">\n            <button id=\"btnCancel\" type=\"button\" class=\"px-5 py-2.5 rounded-lg border border-slate-200\">\u0e22\u0e01\u0e40\u0e25\u0e34\u0e01<\/button>\n            <button id=\"btnSave\" type=\"button\" class=\"px-6 py-2.5 rounded-lg bg-primary text-zinc-900 font-bold\">\u0e1a\u0e31\u0e19\u0e17\u0e36\u0e01<\/button>\n          <\/div>\n        <\/div>\n      <\/div>\n\n      <div id=\"confirmModal\" class=\"fixed inset-0 z-[60] flex items-center justify-center p-4 bg-black\/60 opacity-0 pointer-events-none transition-all duration-200\">\n        <div class=\"w-full max-w-sm bg-white rounded-2xl shadow-2xl overflow-hidden transform scale-95 opacity-0 transition-all duration-200\">\n          <div class=\"p-5 border-b border-slate-100\">\n            <p class=\"font-header font-bold text-lg\">\u0e22\u0e37\u0e19\u0e22\u0e31\u0e19\u0e01\u0e32\u0e23\u0e25\u0e1a<\/p>\n            <p id=\"confirmText\" class=\"text-sm text-slate-500 mt-1\">-<\/p>\n          <\/div>\n          <div class=\"p-5 flex gap-2\">\n            <button id=\"btnConfirmCancel\" type=\"button\" class=\"flex-1 py-2 rounded-xl bg-slate-200 hover:bg-slate-300 font-bold\">\u0e22\u0e01\u0e40\u0e25\u0e34\u0e01<\/button>\n            <button id=\"btnConfirmOk\" type=\"button\" class=\"flex-1 py-2 rounded-xl bg-red-600 hover:bg-red-700 text-white font-bold\">\u0e25\u0e1a<\/button>\n          <\/div>\n        <\/div>\n      <\/div>\n\n      <div id=\"planModal\" class=\"fixed inset-0 z-[70] flex items-center justify-center p-4 bg-black\/60 opacity-0 pointer-events-none transition-all duration-200\">\n        <div class=\"w-full max-w-4xl max-h-[88vh] bg-white rounded-2xl shadow-2xl overflow-hidden transform scale-95 opacity-0 transition-all duration-200 flex flex-col\">\n          <div class=\"px-6 py-4 border-b border-slate-100 flex items-center justify-between\">\n            <div>\n              <h3 id=\"planTitle\" class=\"font-header text-xl font-bold\">\u0e1b\u0e0f\u0e34\u0e17\u0e34\u0e19\u0e04\u0e34\u0e27\u0e23\u0e16\u0e40\u0e04\u0e23\u0e19<\/h3>\n              <p class=\"text-xs text-slate-500\">\u0e08\u0e31\u0e14\u0e04\u0e34\u0e27\u0e07\u0e32\u0e19\u0e23\u0e16\u0e25\u0e48\u0e27\u0e07\u0e2b\u0e19\u0e49\u0e32\u0e41\u0e25\u0e30\u0e14\u0e39\u0e22\u0e49\u0e2d\u0e19\u0e2b\u0e25\u0e31\u0e07\u0e44\u0e14\u0e49<\/p>\n            <\/div>\n            <button id=\"btnPlanClose\" type=\"button\" class=\"w-9 h-9 rounded-full hover:bg-slate-300 flex items-center justify-center\"><span class=\"material-symbols-outlined\">close<\/span><\/button>\n          <\/div>\n          <div class=\"p-4 md:p-6 grid grid-cols-1 lg:grid-cols-[1fr_320px] gap-4 overflow-y-auto\">\n            <div class=\"border border-slate-200 rounded-xl p-3\">\n              <div class=\"flex items-center justify-between mb-3\">\n                <button id=\"btnMonthPrev\" type=\"button\" class=\"px-3 py-1.5 rounded-lg bg-slate-800 hover:bg-slate-700 text-white text-sm font-bold\">\u0e40\u0e14\u0e37\u0e2d\u0e19\u0e01\u0e48\u0e2d\u0e19<\/button>\n                <button id=\"btnMonthLabel\" type=\"button\" class=\"inline-flex items-center gap-1 px-3 py-1.5 rounded-lg bg-slate-100 hover:bg-slate-300 text-slate-800 text-sm font-bold transition-colors\">\n                  <span id=\"monthLabel\" class=\"font-header\">-<\/span>\n                  <span class=\"material-symbols-outlined text-base\">arrow_drop_down<\/span>\n                <\/button>\n                <button id=\"btnMonthNext\" type=\"button\" class=\"px-3 py-1.5 rounded-lg bg-slate-700 hover:bg-slate-600 text-white text-sm font-bold\">\u0e40\u0e14\u0e37\u0e2d\u0e19\u0e16\u0e31\u0e14\u0e44\u0e1b<\/button>\n              <\/div>\n              <div id=\"monthPickerPanel\" class=\"hidden mb-3 p-3 rounded-lg border border-slate-200 bg-slate-50\">\n                <input id=\"monthPickValue\" type=\"month\" class=\"w-full rounded-lg border-slate-300 text-sm\" \/>\n                <div class=\"mt-2 flex gap-2 justify-end\">\n                  <button id=\"btnMonthPickCancel\" type=\"button\" class=\"px-3 py-1.5 rounded-lg bg-slate-300 hover:bg-slate-400 text-slate-800 text-xs font-bold\">\u0e22\u0e01\u0e40\u0e25\u0e34\u0e01<\/button>\n                  <button id=\"btnMonthPickApply\" type=\"button\" class=\"px-3 py-1.5 rounded-lg bg-slate-800 hover:bg-slate-700 text-white text-xs font-bold\">\u0e44\u0e1b\u0e22\u0e31\u0e07\u0e40\u0e14\u0e37\u0e2d\u0e19\u0e17\u0e35\u0e48\u0e40\u0e25\u0e37\u0e2d\u0e01<\/button>\n                <\/div>\n              <\/div>\n              <div class=\"grid grid-cols-7 gap-1 text-center text-xs font-semibold text-slate-500 mb-2\">\n                <div>\u0e2d\u0e32<\/div><div>\u0e08<\/div><div>\u0e2d<\/div><div>\u0e1e<\/div><div>\u0e1e\u0e24<\/div><div>\u0e28<\/div><div>\u0e2a<\/div>\n              <\/div>\n              <div id=\"calendarGrid\" class=\"grid grid-cols-7 gap-1\"><\/div>\n            <\/div>\n            <div class=\"border border-slate-200 rounded-xl p-3 bg-slate-50\/40\">\n              <p id=\"dayEditorTitle\" class=\"font-header text-sm font-bold text-slate-900 mb-2\">\u0e40\u0e25\u0e37\u0e2d\u0e01\u0e27\u0e31\u0e19\u0e17\u0e35\u0e48\u0e08\u0e32\u0e01\u0e1b\u0e0f\u0e34\u0e17\u0e34\u0e19<\/p>\n              <div class=\"space-y-2 text-sm\">\n                <div>\n                  <label class=\"text-xs text-slate-500\">\u0e23\u0e2b\u0e31\u0e2a\u0e23\u0e16\/Unit<\/label>\n                  <input id=\"calUnitCode\" class=\"w-full mt-1 rounded-lg border-slate-200 bg-slate-100 text-slate-700\" type=\"text\" readonly \/>\n                <\/div>\n                <div>\n                  <label class=\"text-xs text-slate-500\">\u0e2a\u0e16\u0e32\u0e19\u0e30\u0e04\u0e34\u0e27<\/label>\n                  <select id=\"calStatus\" class=\"w-full mt-1 rounded-lg border-slate-200\">\n                    <option value=\"available\">\u0e27\u0e48\u0e32\u0e07<\/option>\n                    <option value=\"done_job\">\u0e08\u0e1a\u0e07\u0e32\u0e19<\/option>\n                    <option value=\"booked\">\u0e08\u0e2d\u0e07\u0e04\u0e34\u0e27<\/option>\n                    <option value=\"maintenance\">\u0e0b\u0e48\u0e2d\u0e21\u0e1a\u0e33\u0e23\u0e38\u0e07<\/option>\n                    <option value=\"wash\">\u0e04\u0e34\u0e27\u0e25\u0e49\u0e32\u0e07<\/option>\n                  <\/select>\n                <\/div>\n                <div>\n                  <label class=\"text-xs text-slate-500\">\u0e23\u0e2b\u0e31\u0e2a\u0e07\u0e32\u0e19\/\u0e2d\u0e49\u0e32\u0e07\u0e2d\u0e34\u0e07<\/label>\n                  <input id=\"calRefCode\" class=\"w-full mt-1 rounded-lg border-slate-200\" type=\"text\" placeholder=\"\u0e40\u0e0a\u0e48\u0e19 QT-24008\" \/>\n                <\/div>\n                <div>\n                  <label class=\"text-xs text-slate-500\">\u0e1e\u0e19\u0e31\u0e01\u0e07\u0e32\u0e19\u0e1c\u0e39\u0e49\u0e02\u0e31\u0e1a\/\u0e1c\u0e39\u0e49\u0e08\u0e2d\u0e07<\/label>\n                  <input id=\"calDriverName\" class=\"w-full mt-1 rounded-lg border-slate-200 bg-slate-100 text-slate-700\" type=\"text\" readonly \/>\n                <\/div>\n                <div>\n                  <label class=\"text-xs text-slate-500\">\u0e2b\u0e21\u0e32\u0e22\u0e40\u0e2b\u0e15\u0e38\u0e04\u0e34\u0e27<\/label>\n                  <textarea id=\"calNote\" class=\"w-full mt-1 rounded-lg border-slate-200 min-h-[90px]\" placeholder=\"\u0e23\u0e32\u0e22\u0e25\u0e30\u0e40\u0e2d\u0e35\u0e22\u0e14\u0e40\u0e1e\u0e34\u0e48\u0e21\u0e40\u0e15\u0e34\u0e21\"><\/textarea>\n                <\/div>\n                <button id=\"btnDayApply\" type=\"button\" class=\"w-full py-2 rounded-lg bg-slate-900 text-white font-bold\">\u0e1a\u0e31\u0e19\u0e17\u0e36\u0e01\u0e40\u0e09\u0e1e\u0e32\u0e30\u0e27\u0e31\u0e19\u0e17\u0e35\u0e48\u0e40\u0e25\u0e37\u0e2d\u0e01<\/button>\n              <\/div>\n            <\/div>\n          <\/div>\n          <div class=\"px-6 py-4 bg-slate-50 border-t border-slate-100 flex justify-between items-center gap-2\">\n            <p id=\"planStatus\" class=\"text-xs text-slate-500\">-<\/p>\n            <div class=\"flex gap-2\">\n              <button id=\"btnPlanCancel\" type=\"button\" class=\"px-5 py-2.5 rounded-lg border border-slate-200\">\u0e22\u0e01\u0e40\u0e25\u0e34\u0e01<\/button>\n              <button id=\"btnPlanSave\" type=\"button\" class=\"px-6 py-2.5 rounded-lg bg-slate-900 text-white font-bold\">\u0e1a\u0e31\u0e19\u0e17\u0e36\u0e01\u0e17\u0e31\u0e49\u0e07\u0e2b\u0e21\u0e14<\/button>\n            <\/div>\n          <\/div>\n        <\/div>\n      <\/div>\n\n      <script>\n        (function () {\n          const PAGE_SIZE = 5;\n          const AJAX_URL = \"https:\\\/\\\/workcrane.co.th\\\/wp-admin\\\/admin-ajax.php\";\n\n          let rows = [];\n          let filtered = [];\n          let page = 1;\n          let mode = \"add\";\n          let currentId = null;\n          let pendingDeleteId = null;\n          let isUploadingPhoto = false;\n          let planningItem = null;\n          let calendarYear = 0;\n          let calendarMonth = 0;\n          let selectedDate = \"\";\n          let planDraftByDate = {};\n\n          const tbody = document.getElementById(\"fleetTbody\");\n          const qSearch = document.getElementById(\"qSearch\");\n          const qStatusFilter = document.getElementById(\"qStatusFilter\");\n          const btnApplyFilter = document.getElementById(\"btnApplyFilter\");\n          const pageInfo = document.getElementById(\"pageInfo\");\n          const btnPrev = document.getElementById(\"btnPrev\");\n          const btnNext = document.getElementById(\"btnNext\");\n          const btnAdd = document.getElementById(\"btnAdd\");\n\n          const modal = document.getElementById(\"fleetModal\");\n          const mTitle = document.getElementById(\"mTitle\");\n          const mHint = document.getElementById(\"mHint\");\n          const btnClose = document.getElementById(\"btnClose\");\n          const btnCancel = document.getElementById(\"btnCancel\");\n          const btnSave = document.getElementById(\"btnSave\");\n\n          const fCraneName = document.getElementById(\"fCraneName\");\n          const fModel = document.getElementById(\"fModel\");\n          const fPlateNo = document.getElementById(\"fPlateNo\");\n          const fMaintStatus = document.getElementById(\"fMaintStatus\");\n          const fPhotoFile = document.getElementById(\"fPhotoFile\");\n          const btnUploadPhoto = document.getElementById(\"btnUploadPhoto\");\n          const uploadStatus = document.getElementById(\"uploadStatus\");\n          const fPhotoUrl = document.getElementById(\"fPhotoUrl\");\n          const fNotes = document.getElementById(\"fNotes\");\n          const photoPreviewWrap = document.getElementById(\"photoPreviewWrap\");\n          const photoPreview = document.getElementById(\"photoPreview\");\n\n          const confirmModal = document.getElementById(\"confirmModal\");\n          const confirmText = document.getElementById(\"confirmText\");\n          const btnConfirmCancel = document.getElementById(\"btnConfirmCancel\");\n          const btnConfirmOk = document.getElementById(\"btnConfirmOk\");\n\n          const planModal = document.getElementById(\"planModal\");\n          const planTitle = document.getElementById(\"planTitle\");\n          const btnPlanClose = document.getElementById(\"btnPlanClose\");\n          const btnPlanCancel = document.getElementById(\"btnPlanCancel\");\n          const btnPlanSave = document.getElementById(\"btnPlanSave\");\n          const btnMonthPrev = document.getElementById(\"btnMonthPrev\");\n          const btnMonthNext = document.getElementById(\"btnMonthNext\");\n          const btnMonthLabel = document.getElementById(\"btnMonthLabel\");\n          const monthLabel = document.getElementById(\"monthLabel\");\n          const monthPickerPanel = document.getElementById(\"monthPickerPanel\");\n          const monthPickValue = document.getElementById(\"monthPickValue\");\n          const btnMonthPickCancel = document.getElementById(\"btnMonthPickCancel\");\n          const btnMonthPickApply = document.getElementById(\"btnMonthPickApply\");\n          const calendarGrid = document.getElementById(\"calendarGrid\");\n          const dayEditorTitle = document.getElementById(\"dayEditorTitle\");\n          const calUnitCode = document.getElementById(\"calUnitCode\");\n          const calStatus = document.getElementById(\"calStatus\");\n          const calRefCode = document.getElementById(\"calRefCode\");\n          const calDriverName = document.getElementById(\"calDriverName\");\n          const calNote = document.getElementById(\"calNote\");\n          const btnDayApply = document.getElementById(\"btnDayApply\");\n          const planStatus = document.getElementById(\"planStatus\");\n\n          function esc(s) {\n            return (s ?? \"\").toString().replaceAll(\"&\", \"&amp;\").replaceAll(\"<\", \"&lt;\").replaceAll(\">\", \"&gt;\").replaceAll('\"', \"&quot;\");\n          }\n\n          function getCsrf() {\n            return document.getElementById(\"wcmsCsrf\")?.dataset?.csrf || \"\";\n          }\n\n          function getWpNonce() {\n            return document.getElementById(\"wcmsCsrf\")?.dataset?.wpnonce || \"\";\n          }\n\n          function maintenanceLabel(s) {\n            if (s === \"available\") return \"\u0e27\u0e48\u0e32\u0e07\";\n            if (s === \"done_job\") return \"\u0e08\u0e1a\u0e07\u0e32\u0e19\";\n            if (s === \"on_job\") return \"\u0e01\u0e33\u0e25\u0e31\u0e07\u0e1b\u0e0f\u0e34\u0e1a\u0e31\u0e15\u0e34\u0e07\u0e32\u0e19\";\n            if (s === \"maintenance\") return \"\u0e0b\u0e48\u0e2d\u0e21\u0e1a\u0e33\u0e23\u0e38\u0e07\";\n            if (s === \"excellent\") return \"\u0e27\u0e48\u0e32\u0e07\";\n            if (s === \"good\") return \"\u0e01\u0e33\u0e25\u0e31\u0e07\u0e1b\u0e0f\u0e34\u0e1a\u0e31\u0e15\u0e34\u0e07\u0e32\u0e19\";\n            if (s === \"due_soon\") return \"\u0e0b\u0e48\u0e2d\u0e21\u0e1a\u0e33\u0e23\u0e38\u0e07\";\n            return \"\u0e27\u0e48\u0e32\u0e07\";\n          }\n\n          function maintenanceBadge(s) {\n            const label = maintenanceLabel(s);\n            if (s === \"available\" || s === \"excellent\") return `<span class=\"inline-flex items-center px-2.5 py-1 rounded-full text-xs font-bold bg-green-100 text-green-700\">${label}<\/span>`;\n            if (s === \"done_job\") return `<span class=\"inline-flex items-center px-2.5 py-1 rounded-full text-xs font-bold bg-emerald-300 text-emerald-950\">${label}<\/span>`;\n            if (s === \"on_job\" || s === \"good\") return `<span class=\"inline-flex items-center px-2.5 py-1 rounded-full text-xs font-bold bg-amber-100 text-amber-700\">${label}<\/span>`;\n            if (s === \"maintenance\") return `<span class=\"inline-flex items-center px-2.5 py-1 rounded-full text-xs font-bold bg-rose-100 text-rose-700\">${label}<\/span>`;\n            return `<span class=\"inline-flex items-center px-2.5 py-1 rounded-full text-xs font-bold bg-rose-100 text-rose-700\">${label}<\/span>`;\n          }\n\n          function monthLabelText(year, month) {\n            const names = [\"\u0e21\u0e01\u0e23\u0e32\u0e04\u0e21\", \"\u0e01\u0e38\u0e21\u0e20\u0e32\u0e1e\u0e31\u0e19\u0e18\u0e4c\", \"\u0e21\u0e35\u0e19\u0e32\u0e04\u0e21\", \"\u0e40\u0e21\u0e29\u0e32\u0e22\u0e19\", \"\u0e1e\u0e24\u0e29\u0e20\u0e32\u0e04\u0e21\", \"\u0e21\u0e34\u0e16\u0e38\u0e19\u0e32\u0e22\u0e19\", \"\u0e01\u0e23\u0e01\u0e0e\u0e32\u0e04\u0e21\", \"\u0e2a\u0e34\u0e07\u0e2b\u0e32\u0e04\u0e21\", \"\u0e01\u0e31\u0e19\u0e22\u0e32\u0e22\u0e19\", \"\u0e15\u0e38\u0e25\u0e32\u0e04\u0e21\", \"\u0e1e\u0e24\u0e28\u0e08\u0e34\u0e01\u0e32\u0e22\u0e19\", \"\u0e18\u0e31\u0e19\u0e27\u0e32\u0e04\u0e21\"];\n            return `${names[month]} ${year}`;\n          }\n\n          function getTodayIso() {\n            const now = new Date();\n            const y = now.getFullYear();\n            const m = String(now.getMonth() + 1).padStart(2, \"0\");\n            const d = String(now.getDate()).padStart(2, \"0\");\n            return `${y}-${m}-${d}`;\n          }\n\n          function queueStatusLabel(status, dateStr) {\n            if (status === \"booked\") return dateStr === getTodayIso() ? \"\u0e01\u0e33\u0e25\u0e31\u0e07\u0e1b\u0e0f\u0e34\u0e1a\u0e31\u0e15\u0e34\u0e07\u0e32\u0e19\" : \"\u0e08\u0e2d\u0e07\u0e04\u0e34\u0e27\";\n            if (status === \"done_job\") return \"\u0e08\u0e1a\u0e07\u0e32\u0e19\";\n            if (status === \"maintenance\") return \"\u0e0b\u0e48\u0e2d\u0e21\u0e1a\u0e33\u0e23\u0e38\u0e07\";\n            if (status === \"wash\") return \"\u0e04\u0e34\u0e27\u0e25\u0e49\u0e32\u0e07\";\n            return \"\u0e27\u0e48\u0e32\u0e07\";\n          }\n\n          function queueStatusBg(status) {\n            if (status === \"booked\") return \"bg-amber-100 border-amber-300\";\n            if (status === \"done_job\") return \"bg-emerald-100 border-emerald-400\";\n            if (status === \"maintenance\") return \"bg-rose-100 border-rose-300\";\n            if (status === \"wash\") return \"bg-cyan-100 border-cyan-300\";\n            return \"bg-white border-slate-300\";\n          }\n\n          function setMonthPickerVisible(show) {\n            if (!monthPickerPanel) return;\n            monthPickerPanel.classList.toggle(\"hidden\", !show);\n          }\n\n          function fillMonthPicker() {\n            if (!monthPickValue) return;\n            monthPickValue.value = `${calendarYear}-${String(calendarMonth + 1).padStart(2, \"0\")}`;\n          }\n\n          function getDayDataByDate(item, date) {\n            const planMap = item?.daily_fleet_plan_map || {};\n            const p = planMap[date] || {};\n            return {\n              date,\n              status: p.status || \"available\",\n              ref_code: p.ref_code || \"\",\n              driver_id: Number(p.driver_id || 0),\n              driver_name: p.driver_name || \"\",\n              note: p.note || \"\",\n            };\n          }\n\n          function ensureDraft(dateStr) {\n            if (!planDraftByDate[dateStr]) {\n              planDraftByDate[dateStr] = getDayDataByDate(planningItem, dateStr);\n            }\n            return planDraftByDate[dateStr];\n          }\n\n          function renderMonthGrid() {\n            const first = new Date(calendarYear, calendarMonth, 1);\n            const totalDays = new Date(calendarYear, calendarMonth + 1, 0).getDate();\n            const startWeekday = first.getDay();\n            monthLabel.textContent = monthLabelText(calendarYear, calendarMonth);\n\n            const cells = [];\n            for (let i = 0; i < startWeekday; i++) {\n              cells.push('<div class=\"h-24 rounded-lg bg-slate-50 border border-transparent\"><\/div>');\n            }\n\n            for (let d = 1; d <= totalDays; d++) {\n              const dateStr = `${calendarYear}-${String(calendarMonth + 1).padStart(2, \"0\")}-${String(d).padStart(2, \"0\")}`;\n              const dayData = ensureDraft(dateStr);\n              const isToday = dateStr === getTodayIso();\n              const active = selectedDate === dateStr ? \"ring-2 ring-amber-500\" : \"\";\n              const todayHighlight = isToday ? \"ring-2 ring-cyan-500 ring-offset-1 shadow-sm\" : \"\";\n              const todayMark = isToday ? '<div class=\"text-[10px] inline-flex px-1.5 py-0.5 rounded bg-cyan-600 text-white font-bold mt-1\">\u0e27\u0e31\u0e19\u0e19\u0e35\u0e49<\/div>' : \"\";\n              const ref = dayData.ref_code ? `<div class=\"text-[10px] truncate text-slate-700 mt-1\">${esc(dayData.ref_code)}<\/div>` : \"\";\n              const driver = dayData.driver_name ? `<div class=\"text-[10px] truncate text-violet-700\">\u0e1c\u0e39\u0e49\u0e02\u0e31\u0e1a: ${esc(dayData.driver_name)}<\/div>` : \"\";\n              const note = dayData.note ? `<div class=\"text-[10px] truncate text-slate-500\">${esc(dayData.note)}<\/div>` : \"\";\n              cells.push(`\n                <button type=\"button\" class=\"cal-day h-24 p-2 border rounded-lg text-left transition-colors hover:ring-1 hover:ring-slate-300 hover:shadow-sm focus:outline-none focus:ring-2 focus:ring-amber-400 focus:ring-offset-1 ${queueStatusBg(dayData.status)} ${todayHighlight} ${active}\" data-date=\"${dateStr}\">\n                  <div class=\"text-xs font-bold text-slate-800\">${d}<\/div>\n                  ${todayMark}\n                  <div class=\"text-[10px] mt-1 text-slate-600 truncate\">${esc(queueStatusLabel(dayData.status, dateStr))}<\/div>\n                  ${ref}\n                  ${driver}\n                  ${note}\n                <\/button>\n              `);\n            }\n\n            calendarGrid.innerHTML = cells.join(\"\");\n          }\n\n          function setDayEditorEnabled(enabled) {\n            [calStatus, calRefCode, calNote, btnDayApply].forEach((el) => {\n              if (!el) return;\n              el.disabled = !enabled;\n            });\n          }\n\n          function loadDayEditor(dateStr) {\n            const data = ensureDraft(dateStr);\n            dayEditorTitle.textContent = `\u0e27\u0e31\u0e19\u0e17\u0e35\u0e48 ${dateStr}`;\n            calUnitCode.value = planningItem?.unit_code || planningItem?.plate_no || \"-\";\n            calStatus.value = data.status || \"available\";\n            calRefCode.value = data.ref_code || \"\";\n            if (calDriverName) calDriverName.value = data.driver_name || \"-\";\n            calNote.value = data.note || \"\";\n            setDayEditorEnabled(true);\n          }\n\n          function applySelectedDayDraft() {\n            if (!selectedDate) return;\n            const data = ensureDraft(selectedDate);\n            data.status = calStatus.value || \"available\";\n            data.ref_code = (calRefCode.value || \"\").trim();\n            data.note = (calNote.value || \"\").trim();\n            planStatus.textContent = `\u0e2d\u0e31\u0e1b\u0e40\u0e14\u0e15\u0e23\u0e48\u0e32\u0e07\u0e41\u0e25\u0e49\u0e27: ${selectedDate}`;\n            renderMonthGrid();\n          }\n\n          function collectPlanPayload() {\n            return Object.keys(planDraftByDate).sort().map((date) => {\n              const d = planDraftByDate[date] || {};\n              return {\n                date,\n                status: d.status || \"available\",\n                ref_code: d.ref_code || \"\",\n                driver_id: Number(d.driver_id || 0),\n                driver_name: d.driver_name || \"\",\n                note: d.note || \"\",\n              };\n            }).filter((x) => !!x.date);\n          }\n\n          async function savePlan() {\n            if (!planningItem) return;\n            if (selectedDate) applySelectedDayDraft();\n            const daysPayload = collectPlanPayload();\n            if (!daysPayload.length) return alert(\"\u0e22\u0e31\u0e07\u0e44\u0e21\u0e48\u0e21\u0e35\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e04\u0e34\u0e27\u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a\u0e1a\u0e31\u0e19\u0e17\u0e36\u0e01\");\n\n            const p = new URLSearchParams();\n            p.append(\"action\", \"wcms_cf_update_fleet_schedule\");\n            p.append(\"id\", String(planningItem.id));\n            p.append(\"days_json\", JSON.stringify(daysPayload));\n\n            btnPlanSave.disabled = true;\n            planStatus.textContent = \"\u0e01\u0e33\u0e25\u0e31\u0e07\u0e1a\u0e31\u0e19\u0e17\u0e36\u0e01...\";\n            try {\n              await postAjax(p);\n              planStatus.textContent = \"\u0e1a\u0e31\u0e19\u0e17\u0e36\u0e01\u0e40\u0e23\u0e35\u0e22\u0e1a\u0e23\u0e49\u0e2d\u0e22\";\n              closePlanModal();\n              await loadData();\n            } catch (e) {\n              planStatus.textContent = \"\u0e1a\u0e31\u0e19\u0e17\u0e36\u0e01\u0e44\u0e21\u0e48\u0e2a\u0e33\u0e40\u0e23\u0e47\u0e08\";\n              alert(e.message || \"\u0e1a\u0e31\u0e19\u0e17\u0e36\u0e01\u0e44\u0e21\u0e48\u0e2a\u0e33\u0e40\u0e23\u0e47\u0e08\");\n            } finally {\n              btnPlanSave.disabled = false;\n            }\n          }\n\n          async function openPlanModal(item) {\n            if (!item) return;\n            planningItem = item;\n            planDraftByDate = {};\n            selectedDate = \"\";\n\n            const today = new Date();\n            calendarYear = today.getFullYear();\n            calendarMonth = today.getMonth();\n\n            const name = item.crane_name || item.model || \"-\";\n            const unit = item.unit_code || item.plate_no || \"-\";\n            planTitle.textContent = `\u0e1b\u0e0f\u0e34\u0e17\u0e34\u0e19\u0e04\u0e34\u0e27: ${name} (${unit})`;\n            planStatus.textContent = \"\u0e40\u0e25\u0e37\u0e2d\u0e01\u0e27\u0e31\u0e19\u0e17\u0e35\u0e48\u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e08\u0e31\u0e14\u0e04\u0e34\u0e27\";\n            fillMonthPicker();\n            setMonthPickerVisible(false);\n            renderMonthGrid();\n\n            selectedDate = `${today.getFullYear()}-${String(today.getMonth() + 1).padStart(2, \"0\")}-${String(today.getDate()).padStart(2, \"0\")}`;\n            loadDayEditor(selectedDate);\n            renderMonthGrid();\n            planModal.classList.add(\"show\");\n          }\n\n          function closePlanModal() {\n            planModal.classList.remove(\"show\");\n            planningItem = null;\n            selectedDate = \"\";\n            planDraftByDate = {};\n            dayEditorTitle.textContent = \"\u0e40\u0e25\u0e37\u0e2d\u0e01\u0e27\u0e31\u0e19\u0e17\u0e35\u0e48\u0e08\u0e32\u0e01\u0e1b\u0e0f\u0e34\u0e17\u0e34\u0e19\";\n            planStatus.textContent = \"-\";\n            setMonthPickerVisible(false);\n          }\n\n          async function postAjax(payload) {\n            const csrf = getCsrf();\n            if (csrf && !payload.has(\"_csrf\")) payload.append(\"_csrf\", csrf);\n            const wpnonce = getWpNonce();\n            if (wpnonce && !payload.has(\"_wpnonce\")) payload.append(\"_wpnonce\", wpnonce);\n\n            const res = await fetch(AJAX_URL, {\n              method: \"POST\",\n              headers: { \"Content-Type\": \"application\/x-www-form-urlencoded; charset=UTF-8\" },\n              body: payload.toString(),\n            });\n            const data = await res.json();\n            if (!data.success) throw new Error(data.data?.message || \"\u0e17\u0e33\u0e23\u0e32\u0e22\u0e01\u0e32\u0e23\u0e44\u0e21\u0e48\u0e2a\u0e33\u0e40\u0e23\u0e47\u0e08\");\n            return data.data || {};\n          }\n\n          function updatePhotoPreview() {\n            const url = (fPhotoUrl.value || \"\").trim();\n            if (!url) {\n              photoPreviewWrap.classList.add(\"hidden\");\n              photoPreview.removeAttribute(\"src\");\n              return;\n            }\n            photoPreview.src = url;\n            photoPreviewWrap.classList.remove(\"hidden\");\n          }\n\n          function showLocalPreview(file) {\n            if (!file) return;\n            photoPreview.src = URL.createObjectURL(file);\n            photoPreviewWrap.classList.remove(\"hidden\");\n          }\n\n          async function uploadPhotoFile() {\n            const file = fPhotoFile.files && fPhotoFile.files[0];\n            if (!file) throw new Error(\"\u0e01\u0e23\u0e38\u0e13\u0e32\u0e40\u0e25\u0e37\u0e2d\u0e01\u0e23\u0e39\u0e1b\u0e01\u0e48\u0e2d\u0e19\u0e2d\u0e31\u0e1b\u0e42\u0e2b\u0e25\u0e14\");\n            if (isUploadingPhoto) return fPhotoUrl.value || \"\";\n\n            const fd = new FormData();\n            fd.append(\"action\", \"wcms_cf_upload_image\");\n            fd.append(\"_csrf\", getCsrf());\n            const wpnonce = getWpNonce();\n            if (wpnonce) fd.append(\"_wpnonce\", wpnonce);\n            fd.append(\"image\", file);\n\n            isUploadingPhoto = true;\n            btnUploadPhoto.disabled = true;\n            btnSave.disabled = true;\n            uploadStatus.textContent = \"\u0e01\u0e33\u0e25\u0e31\u0e07\u0e2d\u0e31\u0e1b\u0e42\u0e2b\u0e25\u0e14...\";\n            try {\n              const res = await fetch(AJAX_URL, { method: \"POST\", body: fd });\n              const text = await res.text();\n              let data = null;\n              try { data = JSON.parse(text); } catch (_) { throw new Error(\"\u0e40\u0e0b\u0e34\u0e23\u0e4c\u0e1f\u0e40\u0e27\u0e2d\u0e23\u0e4c\u0e15\u0e2d\u0e1a\u0e01\u0e25\u0e31\u0e1a\u0e44\u0e21\u0e48\u0e16\u0e39\u0e01\u0e15\u0e49\u0e2d\u0e07\"); }\n              if (!data.success) throw new Error(data.data?.message || \"\u0e2d\u0e31\u0e1b\u0e42\u0e2b\u0e25\u0e14\u0e44\u0e21\u0e48\u0e2a\u0e33\u0e40\u0e23\u0e47\u0e08\");\n\n              const url = String(data.data?.url || \"\");\n              if (!url) throw new Error(\"\u0e44\u0e21\u0e48\u0e1e\u0e1a URL \u0e23\u0e39\u0e1b\u0e20\u0e32\u0e1e\");\n              fPhotoUrl.value = url;\n              updatePhotoPreview();\n              uploadStatus.textContent = \"\u0e2d\u0e31\u0e1b\u0e42\u0e2b\u0e25\u0e14\u0e2a\u0e33\u0e40\u0e23\u0e47\u0e08\";\n              return url;\n            } finally {\n              isUploadingPhoto = false;\n              btnUploadPhoto.disabled = false;\n              btnSave.disabled = false;\n            }\n          }\n\n          function applyFilter() {\n            const q = (qSearch.value || \"\").trim().toLowerCase();\n            const maint = qStatusFilter.value || \"\";\n            filtered = rows.filter((it) => {\n              if (maint && (it.maintenance_status || \"\") !== maint) return false;\n              if (!q) return true;\n              const hay = [it.crane_name, it.model, it.plate_no].join(\" \").toLowerCase();\n              return hay.includes(q);\n            });\n            page = 1;\n            render();\n          }\n\n          function render() {\n            const total = filtered.length;\n            const totalPages = Math.max(1, Math.ceil(total \/ PAGE_SIZE));\n            if (page > totalPages) page = totalPages;\n\n            const start = (page - 1) * PAGE_SIZE;\n            const list = filtered.slice(start, start + PAGE_SIZE);\n\n            if (!list.length) {\n              tbody.innerHTML = '<tr><td colspan=\"6\" class=\"px-6 py-6 text-sm text-slate-500\">\u0e22\u0e31\u0e07\u0e44\u0e21\u0e48\u0e21\u0e35\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e23\u0e16\u0e40\u0e04\u0e23\u0e19<\/td><\/tr>';\n            } else {\n              tbody.innerHTML = list.map((it) => `\n                <tr class=\"hover:bg-slate-200 transition-colors\">\n                  <td class=\"px-3 py-3 wcms-cell\">\n                    <div class=\"size-12 rounded-lg bg-slate-100 flex items-center justify-center overflow-hidden border border-slate-200\">\n                      ${it.photo_url ? `<img decoding=\"async\" src=\"${esc(it.photo_url)}\" class=\"w-full h-full object-cover\" alt=\"Crane\"\/>` : '<span class=\"material-symbols-outlined text-slate-400\">construction<\/span>'}\n                    <\/div>\n                  <\/td>\n                  <td class=\"px-3 py-3 wcms-cell\"><span class=\"font-bold text-slate-900 wcms-cell-trunc\" title=\"${esc(it.crane_name || it.model || \"-\")}\">${esc(it.crane_name || it.model || \"-\")}<\/span><\/td>\n                  <td class=\"px-3 py-3 wcms-cell\"><span class=\"font-medium text-slate-900 wcms-cell-trunc\" title=\"${esc(it.model || \"-\")}\">${esc(it.model || \"-\")}<\/span><\/td>\n                  <td class=\"px-3 py-3 wcms-cell\"><span class=\"text-slate-700 wcms-cell-trunc\" title=\"${esc(it.plate_no || \"-\")}\">${esc(it.plate_no || \"-\")}<\/span><\/td>\n                  <td class=\"px-3 py-3 wcms-cell\">${maintenanceBadge(it.maintenance_status)}${it.current_driver_name ? `<div class=\"mt-1 text-[11px] inline-flex items-center px-2 py-0.5 rounded bg-violet-100 text-violet-700\">\u0e1c\u0e39\u0e49\u0e02\u0e31\u0e1a: ${esc(it.current_driver_name)}<\/div>` : \"\"}<\/td>\n                  <td class=\"px-3 py-3 text-center\">\n                    <div class=\"wcms-actions\">\n                      <button type=\"button\" class=\"btn-plan icon-action wcms-icon-btn\" data-id=\"${it.id}\" title=\"\u0e1b\u0e0f\u0e34\u0e17\u0e34\u0e19\" aria-label=\"\u0e1b\u0e0f\u0e34\u0e17\u0e34\u0e19\"><span class=\"material-icons text-slate-600\">calendar_month<\/span><\/button>\n                      <button type=\"button\" class=\"btn-view icon-action wcms-icon-btn wcms-btn-view\" data-id=\"${it.id}\" title=\"\u0e14\u0e39\" aria-label=\"\u0e14\u0e39\"><span class=\"material-icons\">visibility<\/span><\/button>\n                      <button type=\"button\" class=\"btn-edit icon-action wcms-icon-btn wcms-btn-edit\" data-id=\"${it.id}\" title=\"\u0e41\u0e01\u0e49\u0e44\u0e02\" aria-label=\"\u0e41\u0e01\u0e49\u0e44\u0e02\"><span class=\"material-icons\">edit<\/span><\/button>\n                      <button type=\"button\" class=\"btn-del icon-action wcms-icon-btn wcms-btn-del\" data-id=\"${it.id}\" title=\"\u0e25\u0e1a\" aria-label=\"\u0e25\u0e1a\"><span class=\"material-icons\">delete<\/span><\/button>\n                    <\/div>\n                  <\/td>\n                <\/tr>\n              `).join(\"\");\n            }\n\n            pageInfo.textContent = `\u0e2b\u0e19\u0e49\u0e32 ${page} \/ ${totalPages} \u2022 \u0e17\u0e31\u0e49\u0e07\u0e2b\u0e21\u0e14 ${total} \u0e23\u0e32\u0e22\u0e01\u0e32\u0e23`;\n\n            const prevDisabled = page <= 1;\n            const nextDisabled = page >= totalPages;\n            btnPrev.disabled = prevDisabled;\n            btnNext.disabled = nextDisabled;\n          }\n\n          function fillForm(item) {\n            fCraneName.value = item.crane_name || item.model || \"\";\n            fModel.value = item.model || \"\";\n            fPlateNo.value = item.plate_no || \"\";\n            fMaintStatus.value = item.maintenance_status || \"available\";\n            fPhotoUrl.value = item.photo_url || \"\";\n            fNotes.value = item.notes || \"\";\n            updatePhotoPreview();\n            uploadStatus.textContent = \"\";\n            fPhotoFile.value = \"\";\n          }\n\n          function setReadOnly(ro) {\n            [fCraneName, fModel, fPlateNo, fMaintStatus, fPhotoFile, btnUploadPhoto, fNotes].forEach((el) => {\n              if (!el) return;\n              if (el.tagName === \"SELECT\" || el.tagName === \"BUTTON\" || el.tagName === \"INPUT\" && el.type === \"file\") el.disabled = ro;\n              else el.readOnly = ro;\n            });\n            btnSave.classList.toggle(\"hidden\", ro);\n          }\n\n          function openModal(type, item) {\n            mode = type;\n            currentId = item?.id || null;\n            if (type === \"view\") {\n              mTitle.textContent = \"\u0e14\u0e39\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e23\u0e16\u0e40\u0e04\u0e23\u0e19\";\n              mHint.textContent = \"\u0e42\u0e2b\u0e21\u0e14\u0e14\u0e39\u0e2d\u0e22\u0e48\u0e32\u0e07\u0e40\u0e14\u0e35\u0e22\u0e27\";\n              setReadOnly(true);\n            } else if (type === \"edit\") {\n              mTitle.textContent = \"\u0e41\u0e01\u0e49\u0e44\u0e02\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e23\u0e16\u0e40\u0e04\u0e23\u0e19\";\n              mHint.textContent = \"\u0e41\u0e01\u0e49\u0e44\u0e02\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e41\u0e25\u0e49\u0e27\u0e01\u0e14\u0e1a\u0e31\u0e19\u0e17\u0e36\u0e01\";\n              setReadOnly(false);\n            } else {\n              mTitle.textContent = \"\u0e40\u0e1e\u0e34\u0e48\u0e21\u0e23\u0e16\u0e40\u0e04\u0e23\u0e19\u0e43\u0e2b\u0e21\u0e48\";\n              mHint.textContent = \"\u0e01\u0e23\u0e2d\u0e01\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e41\u0e25\u0e49\u0e27\u0e01\u0e14\u0e1a\u0e31\u0e19\u0e17\u0e36\u0e01\";\n              setReadOnly(false);\n            }\n            fillForm(item || {});\n            modal.classList.add(\"show\");\n          }\n\n          function closeModal() {\n            modal.classList.remove(\"show\");\n            currentId = null;\n            mode = \"add\";\n          }\n\n          function openConfirm(id, unitCode) {\n            pendingDeleteId = id;\n            confirmText.textContent = `\u0e22\u0e37\u0e19\u0e22\u0e31\u0e19\u0e25\u0e1a\u0e23\u0e16\u0e40\u0e04\u0e23\u0e19 ${unitCode || \"-\"} ?`;\n            confirmModal.classList.add(\"show\");\n          }\n\n          function closeConfirm() {\n            confirmModal.classList.remove(\"show\");\n            pendingDeleteId = null;\n          }\n\n          function validateForm() {\n            if (!fCraneName.value.trim()) return \"\u0e01\u0e23\u0e38\u0e13\u0e32\u0e01\u0e23\u0e2d\u0e01\u0e0a\u0e37\u0e48\u0e2d\u0e23\u0e16\";\n            if (!fModel.value.trim()) return \"\u0e01\u0e23\u0e38\u0e13\u0e32\u0e01\u0e23\u0e2d\u0e01\u0e23\u0e38\u0e48\u0e19\u0e23\u0e16\";\n            if (!fPlateNo.value.trim()) return \"\u0e01\u0e23\u0e38\u0e13\u0e32\u0e01\u0e23\u0e2d\u0e01\u0e1b\u0e49\u0e32\u0e22\u0e17\u0e30\u0e40\u0e1a\u0e35\u0e22\u0e19\";\n            return \"\";\n          }\n\n          async function loadData() {\n            tbody.innerHTML = '<tr><td colspan=\"6\" class=\"px-6 py-6 text-sm text-slate-500\">\u0e01\u0e33\u0e25\u0e31\u0e07\u0e42\u0e2b\u0e25\u0e14...<\/td><\/tr>';\n            try {\n              const p = new URLSearchParams();\n              p.append(\"action\", \"wcms_cf_get_fleets\");\n              const d = await postAjax(p);\n              rows = d.items || [];\n              applyFilter();\n            } catch (e) {\n              tbody.innerHTML = `<tr><td colspan=\"6\" class=\"px-6 py-6 text-sm text-red-500\">${esc(e.message)}<\/td><\/tr>`;\n            }\n          }\n\n          async function saveForm() {\n            const err = validateForm();\n            if (err) return alert(err);\n\n            try {\n              const hasPendingPhoto = fPhotoFile.files && fPhotoFile.files[0];\n              if (hasPendingPhoto) {\n                await uploadPhotoFile();\n              }\n            } catch (e) {\n              return alert(e.message || \"\u0e2d\u0e31\u0e1b\u0e42\u0e2b\u0e25\u0e14\u0e23\u0e39\u0e1b\u0e44\u0e21\u0e48\u0e2a\u0e33\u0e40\u0e23\u0e47\u0e08\");\n            }\n\n            const p = new URLSearchParams();\n            p.append(\"action\", mode === \"edit\" ? \"wcms_cf_update_fleet\" : \"wcms_cf_create_fleet\");\n            if (mode === \"edit\") p.append(\"id\", String(currentId));\n            p.append(\"crane_name\", fCraneName.value.trim());\n            p.append(\"model\", fModel.value.trim());\n            p.append(\"plate_no\", fPlateNo.value.trim());\n            p.append(\"maintenance_status\", fMaintStatus.value);\n            p.append(\"photo_url\", fPhotoUrl.value.trim());\n            p.append(\"notes\", fNotes.value.trim());\n\n            btnSave.disabled = true;\n            try {\n              await postAjax(p);\n              closeModal();\n              await loadData();\n            } catch (e) {\n              alert(e.message || \"\u0e17\u0e33\u0e23\u0e32\u0e22\u0e01\u0e32\u0e23\u0e44\u0e21\u0e48\u0e2a\u0e33\u0e40\u0e23\u0e47\u0e08\");\n            } finally {\n              btnSave.disabled = false;\n            }\n          }\n\n          async function doDelete() {\n            if (!pendingDeleteId) return;\n            const p = new URLSearchParams();\n            p.append(\"action\", \"wcms_cf_delete_fleet\");\n            p.append(\"id\", String(pendingDeleteId));\n\n            btnConfirmOk.disabled = true;\n            try {\n              await postAjax(p);\n              closeConfirm();\n              await loadData();\n            } catch (e) {\n              alert(e.message || \"\u0e25\u0e1a\u0e44\u0e21\u0e48\u0e2a\u0e33\u0e40\u0e23\u0e47\u0e08\");\n            } finally {\n              btnConfirmOk.disabled = false;\n            }\n          }\n\n          btnAdd.addEventListener(\"click\", () => openModal(\"add\"));\n          btnClose.addEventListener(\"click\", closeModal);\n          btnCancel.addEventListener(\"click\", closeModal);\n          btnSave.addEventListener(\"click\", saveForm);\n          modal.addEventListener(\"click\", (e) => { if (e.target === modal) closeModal(); });\n\n          btnConfirmCancel.addEventListener(\"click\", closeConfirm);\n          btnConfirmOk.addEventListener(\"click\", doDelete);\n          confirmModal.addEventListener(\"click\", (e) => { if (e.target === confirmModal) closeConfirm(); });\n\n          btnApplyFilter.addEventListener(\"click\", applyFilter);\n          qSearch.addEventListener(\"keydown\", (e) => {\n            if (e.key === \"Enter\") applyFilter();\n          });\n          btnPrev.addEventListener(\"click\", () => { page -= 1; render(); });\n          btnNext.addEventListener(\"click\", () => { page += 1; render(); });\n          fPhotoFile.addEventListener(\"change\", () => {\n            const file = fPhotoFile.files && fPhotoFile.files[0];\n            if (!file) return;\n            showLocalPreview(file);\n            uploadStatus.textContent = \"\u0e40\u0e25\u0e37\u0e2d\u0e01\u0e23\u0e39\u0e1b\u0e41\u0e25\u0e49\u0e27 \u0e01\u0e14\u0e2d\u0e31\u0e1b\u0e42\u0e2b\u0e25\u0e14\u0e23\u0e39\u0e1b \u0e2b\u0e23\u0e37\u0e2d\u0e01\u0e14\u0e1a\u0e31\u0e19\u0e17\u0e36\u0e01\u0e44\u0e14\u0e49\u0e40\u0e25\u0e22\";\n          });\n          btnUploadPhoto.addEventListener(\"click\", async () => {\n            try {\n              await uploadPhotoFile();\n            } catch (e) {\n              alert(e.message || \"\u0e2d\u0e31\u0e1b\u0e42\u0e2b\u0e25\u0e14\u0e44\u0e21\u0e48\u0e2a\u0e33\u0e40\u0e23\u0e47\u0e08\");\n            }\n          });\n\n          if (btnPlanClose) btnPlanClose.addEventListener(\"click\", closePlanModal);\n          if (btnPlanCancel) btnPlanCancel.addEventListener(\"click\", closePlanModal);\n          if (btnPlanSave) btnPlanSave.addEventListener(\"click\", savePlan);\n          if (planModal) {\n            planModal.addEventListener(\"click\", (e) => { if (e.target === planModal) closePlanModal(); });\n          }\n          if (btnMonthPrev) {\n            btnMonthPrev.addEventListener(\"click\", () => {\n              calendarMonth--;\n              if (calendarMonth < 0) {\n                calendarMonth = 11;\n                calendarYear--;\n              }\n              fillMonthPicker();\n              renderMonthGrid();\n            });\n          }\n          if (btnMonthNext) {\n            btnMonthNext.addEventListener(\"click\", () => {\n              calendarMonth++;\n              if (calendarMonth > 11) {\n                calendarMonth = 0;\n                calendarYear++;\n              }\n              fillMonthPicker();\n              renderMonthGrid();\n            });\n          }\n          if (btnMonthLabel) {\n            btnMonthLabel.addEventListener(\"click\", () => {\n              fillMonthPicker();\n              const shouldOpen = monthPickerPanel ? monthPickerPanel.classList.contains(\"hidden\") : false;\n              setMonthPickerVisible(shouldOpen);\n            });\n          }\n          if (btnMonthPickCancel) {\n            btnMonthPickCancel.addEventListener(\"click\", () => setMonthPickerVisible(false));\n          }\n          if (btnMonthPickApply) {\n            btnMonthPickApply.addEventListener(\"click\", () => {\n              const picked = String(monthPickValue?.value || \"\").trim();\n              const match = picked.match(\/^(\\d{4})-(\\d{2})$\/);\n              if (!match) {\n                alert(\"\u0e01\u0e23\u0e38\u0e13\u0e32\u0e40\u0e25\u0e37\u0e2d\u0e01\u0e40\u0e14\u0e37\u0e2d\u0e19\");\n                return;\n              }\n              calendarYear = Number(match[1]);\n              calendarMonth = Number(match[2]) - 1;\n              setMonthPickerVisible(false);\n              renderMonthGrid();\n            });\n          }\n          if (calendarGrid) {\n            calendarGrid.addEventListener(\"click\", (e) => {\n              const btn = e.target.closest(\".cal-day\");\n              if (!btn) return;\n              selectedDate = btn.dataset.date || \"\";\n              if (!selectedDate) return;\n              loadDayEditor(selectedDate);\n              renderMonthGrid();\n            });\n          }\n          if (btnDayApply) btnDayApply.addEventListener(\"click\", applySelectedDayDraft);\n\n          document.addEventListener(\"click\", (e) => {\n            const planBtn = e.target.closest(\".btn-plan\");\n            const viewBtn = e.target.closest(\".btn-view\");\n            const editBtn = e.target.closest(\".btn-edit\");\n            const delBtn = e.target.closest(\".btn-del\");\n\n            if (planBtn) {\n              e.preventDefault();\n              e.stopPropagation();\n              const id = Number(planBtn.dataset.id);\n              const item = rows.find((x) => Number(x.id) === id);\n              if (item) openPlanModal(item);\n              else alert(\"\u0e44\u0e21\u0e48\u0e1e\u0e1a\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e23\u0e16\u0e40\u0e04\u0e23\u0e19\");\n              return;\n            }\n\n            if (viewBtn) {\n              const id = Number(viewBtn.dataset.id);\n              const item = rows.find((x) => Number(x.id) === id);\n              if (item) openModal(\"view\", item);\n              return;\n            }\n\n            if (editBtn) {\n              const id = Number(editBtn.dataset.id);\n              const item = rows.find((x) => Number(x.id) === id);\n              if (item) openModal(\"edit\", item);\n              return;\n            }\n\n            if (delBtn) {\n              const id = Number(delBtn.dataset.id);\n              const item = rows.find((x) => Number(x.id) === id);\n              openConfirm(id, item?.crane_name || item?.model || \"-\");\n            }\n          });\n\n          loadData();\n        })();\n      <\/script>\n    <\/div>\n    \t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-1327","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/workcrane.co.th\/index.php\/wp-json\/wp\/v2\/pages\/1327","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/workcrane.co.th\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/workcrane.co.th\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/workcrane.co.th\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/workcrane.co.th\/index.php\/wp-json\/wp\/v2\/comments?post=1327"}],"version-history":[{"count":10,"href":"https:\/\/workcrane.co.th\/index.php\/wp-json\/wp\/v2\/pages\/1327\/revisions"}],"predecessor-version":[{"id":1464,"href":"https:\/\/workcrane.co.th\/index.php\/wp-json\/wp\/v2\/pages\/1327\/revisions\/1464"}],"wp:attachment":[{"href":"https:\/\/workcrane.co.th\/index.php\/wp-json\/wp\/v2\/media?parent=1327"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}