<div class="order-page m-[16px_0_16px_16px] p-[20px_15px] bg-white">
    <p class="m-[0_0_10px] text-[24px] font-[600] leading-[31px]">Danh sách đơn hàng </p>

    <div class="order-page-title flex flex-wrap mb-[17px] leading-[36px]">
        <a href="/admin/?opt=order" class="current">Tất cả</a>
        <a href="/admin/?opt=order&list=mine">Tôi được giao</a>
        <a href="/admin/?opt=order&list=new">Đơn mới</a>
        <a href="/admin/?opt=order&list=unpaid">Chưa thanh toán</a>
        <a href="/admin/?opt=order&list=unfulfilled">Chưa ship</a>
    </div>

    <form method="get" action="" enctype="multipart/form-data" id="form-search">
        <input type="hidden" name="opt" value="order">
        <input type="hidden" name="status" id="js-status" value="">
        <input type="hidden" name="update_by" id="update_by" value="">
        <input type="hidden" name="assign_to" id="assign_to" value="">
        <input type="hidden" name="payment" id="js-payment" value="">
        <input type="hidden" name="fullfillment" id="js-fullfillment" value="">

        <div
            class="flex flex-wrap items-center mb-[15px] p-[15px_16px] border border-[#F6F6F6] shadow-[0px_1px_1px_0px_rgba(0,0,0,0.10)]">
            <div class="flex items-center flex-wrap mb-[10px] w-[100%] 2xl:w-[60%] lg:w-[60%] sm:w-[100%]">
                <input type="text" name="orderCode" value="" placeholder="Mã đơn hàng"
                    class="w-[40%] h-[36px] text-[14px] mr-[10px] rounded-[4px] input input-bordered shadow-[0px_2px_4px_0px_rgba(0,0,0,0.10)]">
                <span class="whitespace-nowrap mr-[10px] w-[5%]">hoặc</span>

                <input type="text" name="q" value="" placeholder="Tìm người mua (* tên, email, điện thoại)"
                    class="w-[45%] h-[36px] text-[14px] mr-[10px] rounded-[4px] input input-bordered shadow-[0px_2px_4px_0px_rgba(0,0,0,0.10)]">
            </div>

            <div class="flex items-center mb-[10px]">
                <div date-rangepicker class="flex items-center" datepicker-format="dd/mm/yyyy" datepicker-buttons
                    datepicker-autoselect-today>
                    <div class="relative">
                        <div class="absolute inset-y-0 start-0 flex items-center ps-3 pointer-events-none">
                            <i
                                class="far fa-calendar text-[#7E7E7E] m-[0_5px_0_0] absolute top-[1px] left-[10px] leading-[35px]"></i>
                        </div>
                        <input name="start-time" type="date"
                            class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-[4px] focus:ring-blue-500 focus:border-blue-500 block w-[130px] h-[36px] ps-[30px] p-2.5  dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
                            placeholder="Từ ngày">
                    </div>
                    <div class="relative ml-[15px]">
                        <div class="absolute inset-y-0 start-0 flex items-center ps-3 pointer-events-none">
                            <i
                                class="far fa-calendar text-[#7E7E7E] m-[0_5px_0_0] absolute top-[2px] left-[10px] leading-[32px]"></i>
                        </div>
                        <input name="end-time" type="date"
                            class="bg-gray-50 border border-gray-300 text-gray-900 text-sm focus:ring-blue-500 focus:border-blue-500 block w-[130px] h-[36px] ps-[30px] p-2.5 rounded-[4px]  dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
                            placeholder="Đến ngày">
                    </div>
                </div>

                <input type="submit" value="Tìm kiếm"
                    class="bg-[#0041E8] rounded-[4px] text-[#fff] font-[500] h-[34.5px] p-[0_10px] cursor-pointer ml-[15px]">
            </div>
        </div>
    </form>

    <div class="flex items-center flex-wrap justify-between m-[14px_0_20px]">
        <div class="2xl:w-[50%] md:w-[100%]">
            <p class="m-[0_55px_0_0] inline-block">
                Tổng số đơn hàng: <b>1.458</b>
            </p>

            <p class="m-0 inline-block">
                Tổng giá trị: <b>14.948.348.000 VNĐ</b>
            </p>
        </div>

        <div class="2xl:w-[50%] md:w-[100%] flex 2xl:justify-end md:justify-start md:mt-[10px]">
            <a href=""
                class="rounded-[4px] bg-[#F5F7FF] border border-[#0041E8] hover:text-[#fff] hover:bg-[#0041E8] leading-[36px] font-[600] text-[#0041E8] p-[0_14px] inline-block">
                <i class="fas fa-print m-[0_4px_0_0]"></i> In danh sách
            </a>

            <a href=""
                class="rounded-[4px] bg-[#F5F7FF] border border-[#0041E8] hover:text-[#fff] hover:bg-[#0041E8] leading-[36px] font-[600] text-[#0041E8] p-[0_14px] inline-block m-[0_0_0_15px]">
                <i class="far fa-file-excel m-[0_4px_0_0]"></i> Tải file excel
            </a>
        </div>
    </div>

    <div class="w-full overflow-x-auto sm:whitespace-nowrap">
        <table class="table table-pin-rows table-pin-cols">
            <thead class="bg-[#f6f6f6] text-[14px] font-500 text-[#000]">
                <tr>
                    <td> STT </td>
                    <td class="w-[85px]"> Mã số </td>
                    <td class="w-[165px]"> Thời gian </td>
                    <td> Khách hàng </td>
                    <td> Tỉnh/TP </td>
                    <td class="w-[150px]"> Giá trị </td>
                    <td width="150">
                        <select onchange="setHiddenValue('js-payment', this.value); runFilter()"
                            class="select h-[35px] min-h-[35px] min-w-[110px] pl-[5px]">
                            <option value="">Thanh toán</option>
                            {% for _item in page.payment_status_list %}
                            <option value="{{ _item[1].id }}">{{ _item[1].title }}</option>
                            {% endfor %}
                        </select>
                    </td>

                    <td width="160">
                        <select onchange="setHiddenValue('js-fullfillment', this.value); runFilter()"
                            class="select h-[35px] min-h-[35px] min-w-[110px] pl-[5px]">
                            <option value="">Vận chuyển</option>
                            {% for _item in page.fullfillment_status_list %}
                            <option value="{{ _item[1].id }}">{{ _item[1].title }}</option>
                            {% endfor %}
                        </select>
                    </td>

                    <td width="170">
                        <select onchange="setHiddenValue('js-status', this.value); runFilter()"
                            class="select h-[35px] min-h-[35px] min-w-[140px] pl-[5px]">
                            <option value="">Tình trạng đơn</option>
                            {% for _item in page.order_status_list %}
                            <option value="{{ _item[1].id }}">{{ _item[1].title }}</option>
                            {% endfor %}
                        </select>
                    </td>

                    <td width="180">
                        <select onchange="setHiddenValue('assign_to', this.value); runFilter()"
                            class="select h-[35px] min-h-[35px] min-w-[150px] pl-[5px]">
                            <option value="">Người được giao</option>
                        </select>
                    </td>

                    <td> Xem </td>
                </tr>
            </thead>

            <tbody>
                <tr class="hover">
                    <td> 1 </td>
                    <td>
                        <a href="/admin/order/detail?id=369"> 000-369 </a>
                    </td>
                    <td> 16-11-2023, 9:59 am </td>
                    <td>
                        <a href=""> Nguyen Duc Quan </a>
                    </td>
                    <td> Hà Nội </td>
                    <td> 69.600.000 </td>
                    <td> <span class="block m-auto w-[14px] h-[14px] rounded-[50%]"
                            style="background-color: red"></span> </td>
                    <td> <span class="block m-auto w-[14px] h-[14px] rounded-[50%]"
                            style="background-color: yellow"></span> </td>
                    <td> <span class="block m-auto w-[14px] h-[14px] rounded-[50%]"
                            style="background-color: green"></span> </td>
                    <td>
                        <a href=""> Nguyen Duc Quan </a>
                    </td>
                    <td>
                        <div class="flex justify-center">
                            <a href="/admin/order/detail?id=369" class="icons icon-edit mr-[7px]" title="Chi tiết"></a>
                            <a href="" class="icons icon-delete" title="Xóa"></a>
                        </div>
                    </td>
                </tr>

                <tr class="hover">
                    <td> 2 </td>
                    <td>
                        <a href="/admin/order/detail?id=369"> 000-369 </a>
                    </td>
                    <td> 16-11-2023, 9:59 am </td>
                    <td>
                        <a href=""> test hura </a>
                    </td>
                    <td> Hà Nội </td>
                    <td> 69.600.000 </td>
                    <td> <span class="block m-auto w-[14px] h-[14px] rounded-[50%]"
                            style="background-color: blue"></span> </td>
                    <td> <span class="block m-auto w-[14px] h-[14px] rounded-[50%]"
                            style="background-color: yellow"></span> </td>
                    <td> <span class="block m-auto w-[14px] h-[14px] rounded-[50%]"
                            style="background-color: green"></span> </td>
                    <td>
                        <a href=""> test hura </a>
                    </td>
                    <td>
                        <div class="flex justify-center">
                            <a href="/admin/order/detail?id=369" class="icons icon-edit mr-[7px]" title="Chi tiết"></a>
                            <a href="" class="icons icon-delete" title="Xóa"></a>
                        </div>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>

    <div class="paging">
        <a href="" class="paging-prev"><i class="fas fa-chevron-left"></i></a>
        <a href="" class="current">1</a>
        <a href="">2</a>
        <a href="">3</a>
        <a href="">4</a>
        <a href="" class="paging-next"><i class="fas fa-chevron-right"></i></a>
    </div>
</div>