admin_hura_8/template/order/detail.html

<div class="global-breadcrumb-container">
    <a href="/admin/order/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="shadow-[0px_1px_1px_0px_rgba(0,0,0,0.10)] rounded-[10px] bg-white p-[15px] m-[12px_0]">

        <div class="flex items-center justify-between">
            <b class="text-[18px] font-[700] mb-[3px] leading-[23px]">Đơn hàng #000-368</b>
            <div class="text-right">
                <a href="" title="In đơn hàng"
                    class="hover:bg-[#0041E8] hover:text-[#fff] inline-block text-center text-[15px] text-[#9E9E9E] rounded-[4px] ml-[10px] p-[8px] border border-[#ececec] bg-[#F9F9F9]">
                    <i class="fas fa-print"></i>
                    <span>In đơn hàng</span>
                </a>
                <a href="" title=""
                    class="hover:bg-[#0041E8] hover:text-[#fff] inline-block text-center text-[15px] text-[#9E9E9E] rounded-[4px] ml-[10px] p-[8px] border border-[#ececec] bg-[#F9F9F9]">
                    <i class="far fa-envelope"></i>
                    <span>Gửi email</span>
                </a>
            </div>
        </div>
        <p class="mt-[5px]">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 onclick="js_update_shipping_address.showModal()" href="javascript:void(0)"
                                    title="Cập nhật địa chỉ nhận hàng" class="icons icon-edit inline-block"
                                    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="javascript:void(0)" onclick="js_update_payment.showModal()" data-fancybox
                                    title="Cập nhật địa chỉ thanh toán" class="icons icon-edit inline-block"
                                    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="javascript:void()" onclick="js_update_order_shipping.showModal()"
                                    title="Cập nhật phí ship cho đơn hàng" class="icons icon-edit inline-block"
                                    style="background-position: -111px -86px;vertical-align:sub;"></a>
                            </td>
                        </tr>

                        <tr>
                            <td> Phí thu hộ </td>
                            <td>
                                <span> 0 VND </span>
                                <a href="javascript:void()" onclick="js_update_order_shipping.showModal()"
                                    title="Cập nhật phí ship cho đơn hàng" class="icons icon-edit inline-block"
                                    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 class="bg-[#F6F6F6]">
                            <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] w-[100%] 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]"
                        id="js-assign-admin">
                        <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] mt-[15px]">

                        <input type="button" value="Quay lại"
                            class="bg-[#ECECEC] cursor-pointer font-[500] h-[32px] p-[0_12px] rounded-[4px] text-[#9E9E9E] mt-[15px]"
                            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 -->
<dialog id="js_update_shipping_address" class="modal">
    <div class="p-[20px_16px] rounded-[15px] w-[100%] max-w-[600px] bg-white modal-box">
        <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>
    <form method="dialog" class="modal-backdrop">
        <button>close</button>
    </form>
</dialog>


<!-- // Cập nhật địa chỉ thanh toán -->
<dialog id="js_update_payment" class="modal">
    <div class="p-[20px_16px] rounded-[15px] w-[100%] max-w-[600px] bg-white modal-box">
        <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>
    <form method="dialog" class="modal-backdrop">
        <button>close</button>
    </form>
</dialog>


<!-- // Cập nhật phí ship cho đơn hàng -->
<dialog id="js_update_order_shipping" class="modal">
    <div class="p-[20px_16px] rounded-[15px] w-[100%] max-w-[600px] modal-box">
        <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>
    <form method="dialog" class="modal-backdrop">
        <button>close</button>
    </form>
</dialog>