Merge branch 'master' of https://repo.hurasoft.com/tieptk/admin_hura_8

assets/script/pc_style.css

@@ -711,41 +711,13 @@ input[type=radio]:focus:before {
   color: #fff;
 }
 .order-page .order-page-table {
-  line-height: 20px;
   text-align: center;
 }
-.order-page .order-page-table a {
-  color: #0041E8;
-}
-.order-page .order-page-table a:hover {
-  text-decoration: underline;
-}
-.order-page .order-page-table table {
-  width: 100%;
-}
-.order-page .order-page-table thead {
-  background: #F6F6F6;
-  font-weight: 600;
-}
 .order-page .order-page-table thead td {
   padding: 8px;
 }
 .order-page .order-page-table td {
   padding: 14px 8px;
-  border: 1px solid #ECECEC;
-  text-transform: capitalize;
-}
-.order-page .order-page-table td * {
-  display: inline-block;
-}
-.order-page .order-page-table select {
-  border-radius: 4px;
-  border: 1px solid #D8D8D8;
-  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.12);
-  height: 32px;
-  display: block;
-  width: 100%;
-  padding: 0 0 0 5px;
 }
 .order-page .order-page-table .icons {
   width: 30px;
@@ -764,6 +736,51 @@ input[type=radio]:focus:before {
   background-position: -145px -82px;
 }
 
+.order-page-table {
+  line-height: 20px;
+}
+.order-page-table a {
+  color: #0041E8;
+}
+.order-page-table a:hover {
+  text-decoration: underline;
+}
+.order-page-table table {
+  width: 100%;
+}
+.order-page-table thead {
+  background: #F6F6F6;
+  font-weight: 600;
+}
+.order-page-table thead td {
+  padding: 8px;
+}
+.order-page-table td {
+  padding: 10px;
+  border: 1px solid #ECECEC;
+  text-transform: capitalize;
+}
+.order-page-table td * {
+  display: inline-block;
+}
+.order-page-table select {
+  border-radius: 4px;
+  border: 1px solid #D8D8D8;
+  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.12);
+  height: 32px;
+  display: block;
+  width: 100%;
+  padding: 0 0 0 5px;
+}
+
+.is-close-btn {
+  background: #ECECEC !important;
+  border-radius: 50%;
+  top: 10px !important;
+  right: 10px !important;
+  color: #9E9E9E !important;
+}
+
 .paging {
   margin: 30px 0;
   display: flex;
@@ -782,4 +799,27 @@ input[type=radio]:focus:before {
 .paging a:hover, .paging a.current, .paging a.active {
   background: #0041E8;
   color: #fff;
+}
+
+.global-breadcrumb-container {
+  padding: 16px;
+  line-height: 20px;
+}
+.global-breadcrumb-container a {
+  display: inline-block;
+}
+.global-breadcrumb-container a:hover {
+  color: #0041E8;
+}
+.global-breadcrumb-container a::after {
+  content: "\f054";
+  font-family: Fontawesome;
+  font-size: 10px;
+  margin: 0 5px;
+}
+.global-breadcrumb-container a:last-child {
+  color: #0041E8;
+}
+.global-breadcrumb-container a:last-child::after {
+  content: none;
 }/*# sourceMappingURL=pc_style.css.map */

assets/script/pc_style.scss

@@ -726,40 +726,14 @@ input[type="radio"] {
         }
     }
     .order-page-table {
-        line-height: 20px;
         text-align: center;
-        a{
-            color: #0041E8;
-            &:hover{
-                text-decoration: underline;
-            }
-        }
-        table{ 
-            width: 100%;
-        }
         thead {
-            background: #F6F6F6;
-            font-weight: 600;
             td{
                 padding: 8px;
             }
         }
         td{
             padding: 14px 8px;
-            border: 1px solid #ECECEC;
-            text-transform: capitalize;
-            *{
-                display: inline-block;
-            }
-        }
-        select {
-            border-radius: 4px;
-            border: 1px solid #D8D8D8;
-            box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.12);
-            height: 32px;
-            display: block;
-            width: 100%;
-            padding: 0 0 0 5px;
         }
         .icons {
             width: 30px;
@@ -778,8 +752,51 @@ input[type="radio"] {
             background-position: -145px -82px;
         }
     }
+}
+.order-page-table {
+    line-height: 20px;
+    a{
+        color: #0041E8;
+        &:hover{
+            text-decoration: underline;
+        }
+    }
+    table{ 
+        width: 100%;
+    }
+    thead {            
+        background: #F6F6F6;
+        font-weight: 600;
+        td{
+            padding: 8px;
+        }
+    }
+    td{
+        padding: 10px;
+        border: 1px solid #ECECEC;
+        text-transform: capitalize;
+        *{
+            display: inline-block;
+        }
+    }
+    select {
+        border-radius: 4px;
+        border: 1px solid #D8D8D8;
+        box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.12);
+        height: 32px;
+        display: block;
+        width: 100%;
+        padding: 0 0 0 5px;
+    }
     
 }
+.is-close-btn {
+    background: #ECECEC !important;
+    border-radius: 50%;
+    top: 10px !important;
+    right: 10px !important;
+    color: #9E9E9E !important;
+}
 .paging {
     margin: 30px 0;
     display: flex;
@@ -799,3 +816,25 @@ input[type="radio"] {
         }
     }
 }
+.global-breadcrumb-container {
+    padding: 16px;
+    line-height: 20px;
+    a{
+        display: inline-block;
+        &:hover{
+            color: #0041E8;
+        }
+        &::after{
+            content: '\f054';
+            font-family: Fontawesome;
+            font-size: 10px;
+            margin: 0 5px;
+        }
+        &:last-child{
+            color: #0041E8;
+            &::after{
+                content: none;
+            }
+        }
+    }
+}

data/order/detail_new.php

@@ -0,0 +1 @@
+<?php

data/order/home.php

@@ -1 +1,17 @@
 <?php
+
+return _get_order_list();
+
+// helpers
+function _get_order_list() {
+    $main_items = [
+        'detail_new',
+    ];
+
+    $menu_list = [];
+    foreach ($main_items as $item) {
+        $menu_list[$item] = include_once __DIR__."/".$item.".php";
+    }
+
+    return $menu_list;
+}

template/javascript/global.html

@@ -1,5 +1,8 @@
 <script>
     $(document).ready(function () {
+        // Popup
+        Fancybox.bind("[data-fancybox]", {});
+
         // Sự kiện click để hiển thị menu
         $('#js-show-menu').click(function () {
             capNhatTrangThaiMenu(false);

template/order/detail-new.html

@@ -0,0 +1,464 @@
+<div class="global-breadcrumb-container">
+    <a href="?module=order&view=home">Danh sách đơn hàng</a>
+    <a href="">Chi tiết đơn hàng</a>
+</div>
+
+<div class="order-detail-page leading-[20px] max-w-[1141px] m-auto">
+    <div class="text-right">
+        <a href="" title="In đơn hàng" class="fas fa-print hover:bg-[#0041E8] hover:text-[#fff] inline-block text-center text-[15px] text-[#9E9E9E] rounded-[4px] ml-[10px] w-[30px] h-[30px] leading-[30px] border border-[#ececec] bg-[#F9F9F9]"></a>
+        <a href="" title="" class="far fa-envelope hover:bg-[#0041E8] hover:text-[#fff] inline-block text-center text-[15px] text-[#9E9E9E] rounded-[4px] ml-[10px] w-[30px] h-[30px] leading-[30px] border border-[#ececec] bg-[#F9F9F9]"></a>
+    </div>
+
+    <div class="shadow-[0px_1px_1px_0px_rgba(0,0,0,0.10)] rounded-[10px] bg-white text-center p-[17px] m-[12px_0]">
+        <p class="text-[18px] font-[700] mb-[3px] leading-[23px]">Đơn hàng #000-368</p>
+        <p>Thời gian: 16-11-2023, 9:59 am</p>
+    </div>
+
+    <div class="flex flex-wrap justify-between">
+        <div class="shadow-[0px_1px_1px_0px_rgba(0,0,0,0.10)] rounded-[15px] bg-white w-[852px] p-[16px] mb-[25px]">
+            <div class="mb-[20px]">
+                <p class="text-[16px] font-[700] mb-[13px]">1. Khách hàng</p>
+
+                <div class="order-page-table">
+                    <table>
+                        <tr>
+                            <td width="200"> Tên </td>
+                            <td> Nguyen Duc Quan </td>
+                        </tr>
+
+                        <tr>
+                            <td> Số điện thoại </td>
+                            <td> 0822256369 </td>
+                        </tr>
+
+                        <tr>
+                            <td> Email </td>
+                            <td> quannd@hurasoft.com </td>
+                        </tr>
+
+                        <tr>
+                            <td> Địa chỉ nhận hàng </td>
+                            <td>
+                                <span> Kiến Hưng, Quận Hà Đông, Hà Nội </span>
+                                <a href="#js-update-shipping-address" data-fancybox title="Cập nhật địa chỉ nhận hàng" class="icons icon-edit inline-block w-[18px] h-[18px]" style="background-position: -111px -86px;"></a>
+                            </td>
+                        </tr>
+
+                        <tr>
+                            <td> Địa chỉ thanh toán </td>
+                            <td>
+                                <span> Kiến Hưng, Quận Hà Đông, Hà Nội </span>
+                                <a href="#js-update-payment" data-fancybox title="Cập nhật địa chỉ thanh toán " class="icons icon-edit inline-block w-[18px] h-[18px]" style="background-position: -111px -86px;"></a>
+                            </td>
+                        </tr>
+                    </table>
+                </div>
+            </div>
+
+
+            <div class="mb-[20px]">
+                <p class="text-[16px] font-[700] mb-[13px]">2. Sản phẩm</p>
+
+                <div class="order-page-table text-center">
+                    <table>
+                        <thead>
+                            <tr>
+                                <td> STT </td>
+                                <td> Mã kho </td>
+                                <td width="210"> Tên </td>
+                                <td> Giá </td>
+                                <td> SL </td>
+                                <td> Tổng </td>
+                                <td> Ghi chú </td>
+                            </tr>
+                        </thead>
+
+                        <tbody>
+                            <tr>
+                                <td> 1 </td>
+                                <td class="text-[#0041E8]"> HH0003 </td>
+                                <td class="text-left"> 
+                                    <a href="" target="_blank" class="text-[#0041E8]"> HHWS - CORE i9 9900X | 32G | NVIDIA RTX 2060 6GB </a>
+                                </td>
+                                <td> 34.800.000 VND (chiếc) </td>
+                                <td> 2 </td>
+                                <td> 69.600.000 VND </td>
+                                <td class="text-left">Ghi chú</td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </div>
+            </div>
+
+
+            <div class="mb-[20px]">
+                <p class="text-[16px] font-[700] mb-[13px]">3. Số tiền</p>
+
+                <div class="order-page-table">
+                    <table>
+                        <tr>
+                            <td width="330"> Tổng giá trị </td>
+                            <td class="font-bold">
+                                69.600.000 VND
+                            </td>
+                        </tr>
+
+                        <tr>
+                            <td> Phí vận chuyển & giao hàng </td>
+                            <td> 
+                                <span> 0 VND </span>
+                                <a href="#js-update-order-shipping" data-fancybox="" title="Cập nhật phí ship cho đơn hàng" class="icons icon-edit inline-block w-[18px] h-[18px]" style="background-position: -111px -86px;vertical-align:sub;"></a>
+                            </td>
+                        </tr>
+
+                        <tr>
+                            <td> Phí thu hộ </td>
+                            <td> 
+                                <span> 0 VND </span>
+                                <a href="#js-update-order-shipping" data-fancybox="" title="Cập nhật phí ship cho đơn hàng" class="icons icon-edit inline-block w-[18px] h-[18px]" style="background-position: -111px -86px;vertical-align:sub;"></a>
+                            </td>
+                        </tr>
+
+                        <tr>
+                            <td> Tổng thu </td>
+                            <td> 69.600.000 VND </td>
+                        </tr>
+                    </table>
+                </div>
+            </div>
+
+
+            <div class="mb-[20px]">
+                <p class="text-[16px] font-[700] mb-[13px]">4. Lịch sử cập nhật</p>
+
+                <div class="order-page-table text-center">
+                    <table>
+                        <thead>
+                            <tr>
+                                <td> STT </td>
+                                <td> Phân loại </td>
+                                <td> Trạng thái </td>
+                                <td> Ghi chú </td>
+                                <td> Người cập nhật </td>
+                            </tr>
+                        </thead>
+
+                        <tbody>
+                            <tr>
+                                <td> 1 </td>
+                                <td> payment </td>
+                                <td> paid </td>
+                                <td> test </td>
+                                <td> Đức lúc 22-05-2023, 4:49 pm </td>
+                            </tr>
+                            
+                            <tr>
+                                <td colspan="5" align="left"> Hiện tại chưa có trạng thái nào được cập nhật </td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </div>
+            </div>
+        </div>
+
+        <div class="rounded-[10px] w-[273px] leading-[18px]">
+
+            <div class="rounded-[15px] bg-white p-[18px_16px] shadow-[0px_1px_1px_0px_rgba(0,0,0,0.10)] mb-[16px]">
+                <p class="mb-[7px] font-[700]">Nhân sự xử lý đơn hàng</p>
+                <p>
+                    <span class="inline-block">Uyên Hura</span>
+                    <a href="javascript:$('#js-assign-holder').toggle()" title="Chỉnh sửa" class="icons icon-edit inline-block w-[18px] h-[18px]" style="background-position: -111px -86px;vertical-align: sub;"></a>
+                </p>
+
+                <div id="js-assign-holder" style="display: none">
+                    <select onchange="OrderManagement.assignAdmin('130', this.value, this.options[this.selectedIndex].text)" class="mt-[10px] block w-[100%] h-[30px] border border-[#D8D8D8] rounded-[4px]">
+                        <option value="">--Người thực hiện --</option>
+                        <option value="24">Uyên Hura</option>
+                        <option value="23">HuraSoft</option>
+                        <option value="25">Quân Hura</option>
+                    </select>
+                    <div id="assign_status"></div>
+                </div>
+            </div>
+
+            <div class="rounded-[15px] bg-white p-[18px_16px] shadow-[0px_1px_1px_0px_rgba(0,0,0,0.10)] mb-[16px]">
+                <p class="mb-[7px] font-[700]"> Trạng thái thanh toán </p>
+
+                <p class="flex items-center m-[8px_0]">
+                    <span style="background: #E00000" class="leading-[30px] mr-[5px] p-[0_9px] rounded-[15px] text-[#fff]">
+                        Chưa thanh toán
+                    </span>
+
+                    <a href="javascript:$('#js-payment-status-holder').show()" title="Chỉnh sửa" class="icons icon-edit inline-block w-[18px] h-[18px]" style="background-position: -111px -86px;vertical-align: sub;"></a>
+                </p>
+
+                <div id="js-payment-status-holder" style="display: none;">
+                    <div>
+                        <textarea placeholder="Ghi chú (v.d. Chuyển khoản ngân hàng VCB, số tham chiếu 1234)" id="js-payment-comment" class="m-[10px_0] block w-[100%] min-h-[76px] max-h-[120px] border border-[#D8D8D8] rounded-[4px] p-[8px]"></textarea>
+                    </div>
+
+                    <div style="margin: 5px 0 10px;">
+                        <input type="button" onclick="OrderManagement.update_payment_status()" title="Click để xác nhận đơn đã được thanh toán đủ" value="Đã nhận đủ"
+                            class="bg-[#0041E8] cursor-pointer font-[500] h-[32px] p-[0_15px] rounded-[4px] text-[#fff]"
+                        >
+
+                        <input type="button" value="Quay lại"
+                            class="bg-[#ECECEC] cursor-pointer font-[500] h-[32px] p-[0_12px] rounded-[4px] text-[#9E9E9E]"
+                            onclick="$('#js-payment-status-holder').hide()"
+                        >
+                    </div>
+                </div>
+
+                <p>Khách chọn: Thanh toán bằng VNPAY</p>
+            </div>
+
+            <div class="rounded-[15px] bg-white p-[18px_16px] shadow-[0px_1px_1px_0px_rgba(0,0,0,0.10)] mb-[16px]">
+                <p class="mb-[7px] font-[700]"> Trạng thái vận chuyển </p>
+
+                <p class="flex items-center m-[8px_0]">
+                    <span style="background: #E00000" class="leading-[30px] mr-[5px] p-[0_9px] rounded-[15px] text-[#fff]">
+                        Chưa chuyển
+                    </span>
+
+                    <a href="javascript:$('#js-fulfillment-status-holder').show()" title="Chỉnh sửa" class="icons icon-edit inline-block w-[18px] h-[18px]" style="background-position: -111px -86px;vertical-align: sub;"></a>
+                </p>
+
+                <div id="js-fulfillment-status-holder" style="display: none;">
+                    <div>
+                        <textarea placeholder="Ghi chú (v.d. Chuyển phát ViettelPost, mã phiếu gửi 1234)" id="js-fulfillment-comment" class="m-[10px_0] block w-[100%] min-h-[76px] max-h-[120px] border border-[#D8D8D8] rounded-[4px] p-[8px]"></textarea>
+                    </div>
+
+                    <div style="margin: 5px 0 10px;">
+                        <input type="button" onclick="OrderManagement.update_fulfillment_status()" title="Click để xác nhận đơn đã được vận chuyển thành công" value="Đã vận chuyển"
+                            class="bg-[#0041E8] cursor-pointer font-[500] h-[32px] p-[0_15px] rounded-[4px] text-[#fff]"
+                        >
+
+                        <input type="button" value="Quay lại"
+                            class="bg-[#ECECEC] cursor-pointer font-[500] h-[32px] p-[0_12px] rounded-[4px] text-[#9E9E9E]"
+                            onclick="$('#js-fulfillment-status-holder').hide()"
+                        >
+                    </div>
+                </div>
+                
+                <p>Khách chọn: Giao hàng tiêu chuẩn</p>
+            </div>
+
+            <div class="rounded-[15px] bg-white p-[18px_16px] shadow-[0px_1px_1px_0px_rgba(0,0,0,0.10)] mb-[16px]">
+                <p class="mb-[7px] font-[700]"> 
+                    Trạng thái đơn hàng  
+                    <a href="javascript:$('#js-order-status-holder').show()" title="Chỉnh sửa" class="icons icon-edit inline-block w-[18px] h-[18px]" style="background-position: -111px -86px;vertical-align: sub;"></a> 
+                </p>
+                
+                <div id="js-order-status-holder" style="display: none;">
+                    <div>
+                        <textarea placeholder="Ghi chú" id="js-order-comment" class="m-[10px_0] block w-[100%] min-h-[76px] max-h-[120px] border border-[#D8D8D8] rounded-[4px] p-[8px]"></textarea>
+                    </div>
+
+                    <div style="margin-top: 5px;">            
+                        <select id="js-order-status-select" class="m-[10px_0] block w-[100%] h-[30px] border border-[#D8D8D8] rounded-[4px]">
+                            <option value="">--Chọn trạng thái--</option>
+                            <option value="new">Mới</option>
+                            <option value="processing">Đang xử lý</option>
+                            <option value="success">Thành công</option>
+                            <option value="closed">Đóng lại</option>
+                            <option value="canceled">Hủy</option>
+                        </select>
+            
+                        <input type="button" onclick="OrderManagement.update_order_status()" title="Click để xác nhận" value="Lưu lại"
+                            class="bg-[#0041E8] cursor-pointer font-[500] h-[32px] p-[0_15px] rounded-[4px] text-[#fff]"
+                        >
+            
+                        <input type="button" value="Quay lại"
+                            class="bg-[#ECECEC] cursor-pointer font-[500] h-[32px] p-[0_12px] rounded-[4px] text-[#9E9E9E]"
+                            onclick="$('#js-order-status-holder').hide()"
+                        >
+                    </div>
+                </div>
+            </div>
+
+            <div class="rounded-[15px] bg-white p-[18px_16px] shadow-[0px_1px_1px_0px_rgba(0,0,0,0.10)] mb-[16px]">
+                <p class="mb-[7px] font-[700]"> Ghi chú </p>
+                
+                <textarea placeholder="Ghi chú" id="js-comment" class="m-[10px_0] block w-[100%] min-h-[76px] max-h-[120px] border border-[#D8D8D8] rounded-[4px] p-[8px]"></textarea>
+
+                <div>
+                    <span id="js-comment-status-holder"></span>
+                    <input type="button" onclick="OrderManagement.update_admin_comment()" value="Lưu lại"
+                    class="bg-[#0041E8] cursor-pointer font-[500] h-[32px] p-[0_15px] rounded-[4px] text-[#fff]"
+                    >
+                </div>
+            </div>
+
+        </div>
+    </div>
+</div>
+
+<!-- // Cập nhật địa chỉ nhận hàng -->
+<div id="js-update-shipping-address" class="p-[20px_16px] rounded-[15px] w-[100%] max-w-[600px]" style="display: none;">
+    <p class="leading-[20px] text-[16px] font-bold mb-[20px]"> Cập nhật địa chỉ nhận hàng </p>
+
+    <table class="w-[100%]">
+        <tr>
+            <td width="100">Họ tên</td>
+            <td>
+                <input type="text" id="js-shipping-address-person_name" value="Nguyen Duc Quan" class="shadow-[0px_2px_4px_0px_rgba(0,0,0,0.12)] p-[0_10px] w-[100%] h-[32px] mb-[10px] border border-[#D8D8D8] rounded-[4px] block">
+            </td>
+        </tr> 
+    
+        <tr>
+            <td>Mobile</td>
+            <td>
+                <input type="text" id="js-shipping-address-mobile" value="0832256395" class="shadow-[0px_2px_4px_0px_rgba(0,0,0,0.12)] p-[0_10px] w-[100%] h-[32px] mb-[10px] border border-[#D8D8D8] rounded-[4px] block">
+            </td>
+        </tr>
+    
+        <tr>
+            <td>Tỉnh/thành</td>
+            <td>
+                <input type="text" id="js-shipping-address-province_name" value="TP HCM" class="shadow-[0px_2px_4px_0px_rgba(0,0,0,0.12)] p-[0_10px] w-[100%] h-[32px] mb-[10px] border border-[#D8D8D8] rounded-[4px] block">
+            </td>
+        </tr>
+    
+        <tr>
+            <td>Quận huyện</td>
+            <td>
+                <input type="text" id="js-shipping-address-district_name" value="Quận Gò Vấp" class="shadow-[0px_2px_4px_0px_rgba(0,0,0,0.12)] p-[0_10px] w-[100%] h-[32px] mb-[10px] border border-[#D8D8D8] rounded-[4px] block"> 
+            </td>
+        </tr>
+    
+        <tr>
+            <td>Phường/xã</td>
+            <td>
+                <input type="text" id="js-shipping-address-ward_name" value="" class="shadow-[0px_2px_4px_0px_rgba(0,0,0,0.12)] p-[0_10px] w-[100%] h-[32px] mb-[10px] border border-[#D8D8D8] rounded-[4px] block"> 
+            </td>
+        </tr>
+    
+        <tr>
+            <td>Địa chỉ</td>
+            <td>
+                <input type="text" id="js-shipping-address-address" size="50" value="Kiến Hưng - Hà Đông - Hà Nội" class="shadow-[0px_2px_4px_0px_rgba(0,0,0,0.12)] p-[0_10px] w-[100%] h-[32px] mb-[10px] border border-[#D8D8D8] rounded-[4px] block"> 
+            </td>
+        </tr>
+    
+        <!--<tr><td>Phân loại</td><td><input type=text id="js-shipping-address-type" size=30 value="" /></td></tr>-->
+        <tr>
+            <td>Ghi chú</td>
+            <td>
+                <input type="text" id="js-shipping-address-note" value="test" class="shadow-[0px_2px_4px_0px_rgba(0,0,0,0.12)] p-[0_10px] w-[100%] h-[32px] mb-[10px] border border-[#D8D8D8] rounded-[4px] block">
+            </td>
+        </tr>
+        
+        <tr>
+            <td></td>
+            <td> 
+                <input type="button" value="Cập nhật" onclick="OrderManagement.updateShippingAddress()" class="text-[#fff] bg-[#0041E8] rounded-[4px] h-[32px] p-[0_8px] cursor-pointer">
+            </td>
+        </tr>
+    </table>
+</div>
+
+
+<!-- // Cập nhật địa chỉ thanh toán -->
+<div id="js-update-payment" class="p-[20px_16px] rounded-[15px] w-[100%] max-w-[600px]" style="display: none;">
+    <p class="leading-[20px] text-[16px] font-bold mb-[15px]"> Cập nhật địa chỉ thanh toán </p>
+    
+    <label class="inline-flex cursor-pointer">
+        <input type="checkbox" value="1" id="js-payment-address-check-same-as-shipping" checked="" onchange="$('#js-payment-address-holder').toggle()" class="scale-[1.4] mr-[10px]"> 
+        <span> Giống như địa chỉ nhận hàng </span>
+    </label>
+
+    <div id="js-payment-address-holder" style="display: none;margin-top: 20px">
+        <p class="leading-[20px] text-[16px] font-bold mb-[15px]"> Nhập địa chỉ: </p>
+        
+        <table class="w-[100%]">
+            <tr>
+                <td width="100">Họ tên</td>
+                <td>
+                    <input type="text" id="js-payment-address-person_name" value="" class="shadow-[0px_2px_4px_0px_rgba(0,0,0,0.12)] p-[0_10px] w-[100%] h-[32px] mb-[10px] border border-[#D8D8D8] rounded-[4px] block">
+                </td>
+            </tr> 
+    
+            <tr>
+                <td>Mobile</td>
+                <td>
+                    <input type="text" id="js-payment-address-mobile" value="" class="shadow-[0px_2px_4px_0px_rgba(0,0,0,0.12)] p-[0_10px] w-[100%] h-[32px] mb-[10px] border border-[#D8D8D8] rounded-[4px] block">
+                </td>
+            </tr>
+    
+            <tr>
+                <td>Tỉnh/thành</td>
+                <td>
+                    <input type="text" id="js-payment-address-province_name" value="" class="shadow-[0px_2px_4px_0px_rgba(0,0,0,0.12)] p-[0_10px] w-[100%] h-[32px] mb-[10px] border border-[#D8D8D8] rounded-[4px] block">
+                </td>
+            </tr>
+    
+            <tr>
+                <td>Quận huyện</td>
+                <td>
+                    <input type="text" id="js-payment-address-district_name" value="" class="shadow-[0px_2px_4px_0px_rgba(0,0,0,0.12)] p-[0_10px] w-[100%] h-[32px] mb-[10px] border border-[#D8D8D8] rounded-[4px] block">
+                </td>
+            </tr>
+    
+            <tr>
+                <td>Phường/xã</td>
+                <td>
+                    <input type="text" id="js-payment-address-ward_name" value="" class="shadow-[0px_2px_4px_0px_rgba(0,0,0,0.12)] p-[0_10px] w-[100%] h-[32px] mb-[10px] border border-[#D8D8D8] rounded-[4px] block">
+                </td>
+            </tr>
+    
+            <tr>
+                <td>Địa chỉ</td>
+                <td>
+                    <input type="text" id="js-payment-address-address" value="" class="shadow-[0px_2px_4px_0px_rgba(0,0,0,0.12)] p-[0_10px] w-[100%] h-[32px] mb-[10px] border border-[#D8D8D8] rounded-[4px] block">
+                </td>
+            </tr>
+    
+            <!-- <tr><td>Phân loại</td><td><input type=text id="js-payment-address-type" value="" class="shadow-[0px_2px_4px_0px_rgba(0,0,0,0.12)] p-[0_10px] w-[100%] h-[32px] mb-[10px] border border-[#D8D8D8] rounded-[4px] block"/></td></tr> -->
+    
+            <tr>
+                <td>Ghi chú</td>
+                <td>
+                    <input type="text" id="js-payment-address-note" value="" class="shadow-[0px_2px_4px_0px_rgba(0,0,0,0.12)] p-[0_10px] w-[100%] h-[32px] mb-[10px] border border-[#D8D8D8] rounded-[4px] block">
+                </td>
+            </tr>
+    
+            <tr>
+                <td></td>
+                <td> 
+                    <input type="button" value="Cập nhật" onclick="OrderManagement.updatePaymentAddress()" class="text-[#fff] bg-[#0041E8] rounded-[4px] h-[32px] p-[0_8px] cursor-pointer">
+                </td>
+            </tr>
+        </table>  
+    </div>
+</div>
+
+
+<!-- // Cập nhật phí ship cho đơn hàng -->
+<div id="js-update-order-shipping" class="p-[20px_16px] rounded-[15px] w-[100%] max-w-[600px]" style="display: none;">
+    <p class="leading-[20px] text-[16px] font-bold mb-[20px]"> Cập nhật phí ship cho đơn hàng </p>
+
+    <table class="w-[100%]">
+        <tr>
+            <td>Phí ship</td>
+            <td>
+                <input type="text" id="shippingFee" onkeyup="this.value = writeStringToPrice(this.value)" value="0" class="shadow-[0px_2px_4px_0px_rgba(0,0,0,0.12)] p-[0_10px] h-[32px] m-[0_10px_10px_0] border border-[#D8D8D8] rounded-[4px] inline-block">
+                <span>VND</span>
+            </td>
+        </tr>
+    
+        <tr>
+            <td>Chi chú</td>
+            <td>
+                <input type="text"id="shippingNote" value="" class="shadow-[0px_2px_4px_0px_rgba(0,0,0,0.12)] p-[0_10px] w-[100%] h-[32px] mb-[10px] border border-[#D8D8D8] rounded-[4px] block"> 
+                <i>v.d. Gửi xe khách, Máy bay, EMS</i>
+            </td>
+        </tr>
+    
+        <tr>
+            <td></td>
+            <td>
+                <input type="button" value="Cập nhật" onclick="update_order_shipping(369)" class="text-[#fff] bg-[#0041E8] rounded-[4px] h-[32px] p-[0_8px] cursor-pointer mt-[15px]">
+            </td>
+        </tr>
+    </table>
+</div>

template/order/home.html

@@ -123,7 +123,7 @@
                 <tr>
                     <td> 1 </td>
                     <td>
-                        <a href=""> 000-369 </a>
+                        <a href="?module=order&view=detail-new&o=369&b=1584&popup=1"> 000-369 </a>
                     </td>
                     <td> 16-11-2023, 9:59 am </td>
                     <td>
@@ -138,7 +138,7 @@
                         <a href=""> Nguyen Duc Quan </a>
                     </td>
                     <td>
-                        <a href="" class="icons icon-edit" title="Chi tiết"></a>
+                        <a href="?module=order&view=detail-new&o=369&b=1584&popup=1" class="icons icon-edit" title="Chi tiết"></a>
                         <a href="" class="icons icon-delete" title="Xóa"></a>
                     </td>
                 </tr>
@@ -146,7 +146,7 @@
                 <tr>
                     <td> 2 </td>
                     <td>
-                        <a href=""> 000-369 </a>
+                        <a href="?module=order&view=detail-new&o=369&b=1584&popup=1"> 000-369 </a>
                     </td>
                     <td> 16-11-2023, 9:59 am </td>
                     <td>
@@ -161,7 +161,7 @@
                         <a href=""> test hura </a>
                     </td>
                     <td>
-                        <a href="" class="icons icon-edit" title="Chi tiết"></a>
+                        <a href="?module=order&view=detail-new&o=369&b=1584&popup=1" class="icons icon-edit" title="Chi tiết"></a>
                         <a href="" class="icons icon-delete" title="Xóa"></a>
                     </td>
                 </tr>

template/theme.html

@@ -14,9 +14,11 @@
   <link href="https://cdn.jsdelivr.net/npm/daisyui@4.6.0/dist/full.min.css" rel="stylesheet" type="text/css" />
 
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" />
+  <link rel="stylesheet" media="screen" href="{{ 'fancybox.css' | asset_url }}" />
   <link rel="stylesheet" media="screen" href="{{ 'pc_style.css' | asset_url }}" />
 
   <script src="{{ 'tailwindcss.js' | asset_url }}"></script>
+  <script src="{{ 'fancybox.js' | asset_url }}"></script>
   <script src="https://cdn.jsdelivr.net/npm/jquery@3.3.1/dist/jquery.min.js"></script>
 
 </head>