admin_hura_8/template/order/detail.html

<div class="breadcrumbs tw-zab tw-zpa tw-iia">
    <ul>
        <li><a href="/admin/order/home" data-discover="true">Danh sách đơn hàng</a></li>
        <li class="">Chi tiết đơn hàng</li>
    </ul>
</div>

<div class="order-detail-page w-[80%] mt-3 m-auto">

    <div class="shadow  rounded-sm bg-white p-3 border border-base-300">

        <div class="flex items-center justify-between">
            <b class="text-[18px] font-bold mb-[3px] leading-[23px]">Đơn hàng #000-368</b>
            <div class="text-right">
                <a href="" title="In đơn hàng" class="btn btn-view btn-outline btn-sm ">
                    <i data-lucide="printer" class="size-4"></i>
                    <span>In đơn hàng</span>
                </a>
                <a href="" title="" class="btn btn-view btn-outline btn-sm">
                    <i data-lucide="mail" class="size-4"></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="grid grid-cols-3 mt-5 gap-3">
        <div class="col-span-2 shadow  rounded-sm bg-white p-3 border border-base-300">
            <div class="mb-3">
                <b class="">1. Khách hàng</b>

                <div class="order-page-table mt-2 border border-base-200 rounded-sm">
                    <table class="table table-md">
                        <tr>
                            <td> <b>Tên</b> </td>
                            <td> Nguyen Duc Quan </td>
                        </tr>

                        <tr>
                            <td> <b>Số điện thoại</b> </td>
                            <td> 0822256369 </td>
                        </tr>

                        <tr>
                            <td> <b>Email</b> </td>
                            <td> quannd@hurasoft.com </td>
                        </tr>

                        <tr>
                            <td> <b>Địa chỉ nhận hàng</b> </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> <b>Địa chỉ thanh toán</b> </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="mt-5">
                <b class="">2. Sản phẩm</b>

                <div
                    class="overflow-x-auto lg:whitespace-nowrap ms:whitespace-nowrap md:whitespace-nowrap 2xl:whitespace-normal mt-2 border border-base-200 rounded-sm">
                    <table class="table text-center">
                        <thead class="bg-base-200 font-bold text-black">
                            <tr>
                                <td> STT </td>
                                <td> Mã kho </td>
                                <td> 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-primary"> HH0003 </td>
                                <td class="text-left">
                                    <a href="" target="_blank" class="text-primary"> 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="mt-5">
                <b class="">3. Số tiền</b>

                <div class="order-page-table mt-3 border border-base-200 rounded-sm">
                    <table class="table table-md">
                        <tr>
                            <td width="330"> <b>Tổng giá trị</b> </td>
                            <td class="font-bold">
                                69.600.000 VND
                            </td>
                        </tr>

                        <tr>
                            <td> <b>Phí vận chuyển & giao hàng</b> </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> <b>Phí thu hộ</b> </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> <b>Tổng thu</b> </td>
                            <td> 69.600.000 VND </td>
                        </tr>
                    </table>
                </div>
            </div>


            <div class="mt-5">
                <b class="">4. Lịch sử cập nhật</b>

                <div class="order-page-table text-center mt-3 border border-base-200 rounded-sm">
                    <table class="table table-md">
                        <thead class="bg-base-200 font-bold text-black">
                            <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="">
            <div class="rounded-sm bg-white p-3 shadow border border-base-300">
                <p class="mb-[7px] font-bold">Nhân sự xử lý đơn hàng</p>
                <p class="flex items-center gap-3">
                    <span class="inline-block">Uyên Hura</span>
                    <a href="javascript:$('#js-assign-holder').toggle()" title="Chỉnh sửa"><i
                            class="iconify lucide--pencil mt-1 text-primary"></i></a>
                </p>

                <div id="js-assign-holder" class="hidden">
                    <select
                        onchange="OrderManagement.assignAdmin('130', this.value, this.options[this.selectedIndex].text)"
                        class="select mt-2" 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-sm bg-white p-3 shadow mb-4 mt-3 border border-base-300">
                <p class="mb-[7px] font-[700]"> Trạng thái thanh toán </p>

                <div class="flex items-center mt-3 gap-3">
                    <span class="badge badge-error badge badge-soft">
                        Chưa thanh toán
                    </span>
                    <a href="javascript:$('#js-payment-status-holder').show()" title="Chỉnh sửa"><i
                            class="iconify lucide--pencil mt-1 text-primary"></i></a>
                </div>

                <div id="js-payment-status-holder" class="hidden">
                    <div class="mt-3">
                        <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="textarea"></textarea>
                    </div>

                    <div style="margin: 10px 0;">
                        <input type="button" onclick="OrderManagement.update_payment_status()"
                            title="Click để xác nhận đơn đã được thanh toán đủ" value="Đã nhận đủ"
                            class="btn btn-active">
                        <input type=" button" value="Quay lại" class="btn"
                            onclick="$('#js-payment-status-holder').hide()">
                    </div>
                </div>

                <p class="mt-3">Khách chọn: Thanh toán bằng VNPAY</p>
            </div>

            <div class="mt-3 rounded-sm bg-white p-3 shadow mb-4 border border-base-300">
                <p class="font-bold"> Trạng thái vận chuyển </p>

                <p class="flex items-center mt-3 gap-3">
                    <span class="badge badge-error badge badge-soft">
                        Chưa chuyển
                    </span>
                    <a href="javascript:$('#js-fulfillment-status-holder').show()" title="Chỉnh sửa"><i
                            class="iconify lucide--pencil mt-1 text-primary"></i></a>
                </p>

                <div id="js-fulfillment-status-holder" style="display: none;">
                    <div class="mt-5">
                        <textarea placeholder="Ghi chú (v.d. Chuyển phát ViettelPost, mã phiếu gửi 1234)"
                            id="js-fulfillment-comment" class="textarea"></textarea>
                    </div>

                    <div style="margin: 10px 0;">
                        <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="btn btn-active" />
                        <input type=" button" value="Quay lại" class="btn"
                            onclick="$('#js-fulfillment-status-holder').hide()">
                    </div>
                </div>

                <p class="mt-3">Khách chọn: Giao hàng tiêu chuẩn</p>
            </div>

            <div class="mt-3 rounded-sm bg-white p-3 shadow mb-4 border border-base-300">
                <p class="font-bold">
                    Trạng thái đơn hàng
                    <a href="javascript:$('#js-order-status-holder').toggle()" title="Chỉnh sửa"><i
                            class="iconify lucide--pencil mt-1 text-primary"></i></a>
                </p>

                <div id="js-order-status-holder" style="display: none;">
                    <div class="mt-3">
                        <textarea placeholder="Ghi chú" id="js-order-comment" class="textarea"></textarea>
                    </div>

                    <div class="mt-3">
                        <select id="js-order-status-select" class="select">
                            <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="btn btn-active mt-3">

                        <input type="button" value="Quay lại" class="btn" onclick="$('#js-order-status-holder').hide()">
                    </div>
                </div>
            </div>

            <div class="mt-3 rounded-sm bg-white p-3 shadow mb-4 border border-base-300">
                <p class="font-bold"> Ghi chú </p>

                <textarea placeholder=" Ghi chú" id="js-comment" class="textarea"></textarea>

                <div>
                    <span id="js-comment-status-holder"></span>
                    <input type="button" onclick="OrderManagement.update_admin_comment()" value="Lưu lại"
                        class="btn btn-active mt-3">
                </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>