<div class="bg-white shadow p-3 rounded-sm">
    <p class="text-2xl font-bold">Danh sách đơn hàng </p>

    <div class="order-page-title flex flex-wrap mt-5 gap-1">
        <a href="/admin/?opt=order" class="btn btn-active">Tất cả</a>
        <a href="/admin/?opt=order&list=mine" class="btn">Tôi được giao</a>
        <a href="/admin/?opt=order&list=new" class="btn">Đơn mới</a>
        <a href="/admin/?opt=order&list=unpaid" class="btn">Chưa thanh toán</a>
        <a href="/admin/?opt=order&list=unfulfilled" class="btn">Chưa ship</a>
    </div>

    <form method="get" action="" enctype="multipart/form-data" id="form-search" class="mt-5">
        <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 p-3  shadow gap-5">
            <div class="flex items-center gap-3 w-[50%]">
                <input type="text" name="orderCode" value="" placeholder="Mã đơn hàng" class="w-full rounded-sm input ">
                <span class="whitespace-nowrap">hoặc</span>
                <input type="text" name="q" value="" placeholder="Tìm người mua (* tên, email, điện thoại)"
                    class="w-full rounded-sm input">
            </div>
            <div class="flex items-center gap-3">
                <label for="dob" class="input data-error:input-error w-full">
                    <span class="iconify lucide--calendar-1 size-4.5"></span>
                    <input id="dob" type="date" placeholder="+84 78965 12335" :value="getData('dob')"
                        @input="updateData('dob', $event.target.value)" :data-error="hasError('dob')" name="dob" />
                </label>
                <label for="dob" class="input data-error:input-error w-full">
                    <span class="iconify lucide--calendar-1 size-4.5"></span>
                    <input id="dob" type="date" placeholder="+84 78965 12335" :value="getData('dob')"
                        @input="updateData('dob', $event.target.value)" :data-error="hasError('dob')" name="dob" />
                </label>

                <input type="submit" value="Tìm kiếm" class="btn btn-active" onclick="runFilter()">
            </div>
        </div>
    </form>

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

            <p class="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] gap-5">
            <a href="" class="btn">
                <i class="iconify lucide--printer"></i> In danh sách
            </a>

            <a href="" class="btn">
                <i class="iconify lucide--download"></i> Tải file excel
            </a>
        </div>
    </div>

    <div class="overflow-x-auto sm:whitespace-nowrap border border-base-200 rounded-sm mt-5">
        <table class="table table-md">
            <thead class="bg-base-200 font-bold">
                <tr>
                    <td> STT </td>
                    <td> Mã số </td>
                    <td> Thời gian </td>
                    <td> Khách hàng </td>
                    <td> Tỉnh/TP </td>
                    <td> Giá trị </td>
                    <td>
                        <select onchange="setHiddenValue('js-payment', this.value); runFilter()" class="select">
                            <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>
                        <select onchange="setHiddenValue('js-fullfillment', this.value); runFilter()" class="select">
                            <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>
                        <select onchange="setHiddenValue('js-status', this.value); runFilter()" class="select">
                            <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>
                        <select onchange="setHiddenValue('assign_to', this.value); runFilter()" class="select">
                            <option value="">Người được giao</option>
                        </select>
                    </td>

                    <td> Xem </td>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td> 1 </td>
                    <td>
                        <a class="link-primary" href="/admin/order/detail?id=369"> 000-369 </a>
                    </td>
                    <td> 16-11-2023, 9:59 am </td>
                    <td>
                        <a href="" class="link-primary"> Nguyen Duc Quan </a>
                    </td>
                    <td> Hà Nội </td>
                    <td> 69.600.000 </td>
                    <td>
                        <div class="badge badge-success badge-sm badge-soft">Thành công</div>
                    </td>
                    <td>
                        <div class="badge badge-sm badge-ghost">Chờ xử lý</div>
                    </td>
                    <td>
                        <div class="badge badge-error badge-sm badge-soft">Lỗi</div>
                    </td>
                    <td>
                        <a href="" class="link-primary"> Nguyen Duc Quan </a>
                    </td>
                    <td>
                        <div class="flex justify-center gap-2">
                            <a href="/admin/order/detail?id=369" class="btn btn-soft btn-xs btn-square"
                                title="Chi tiết"> <i data-lucide="eye" class="size-4 text-gray-500"></i></a>
                            <a href="" class="btn btn-soft btn-error btn-xs btn-square" title="Xóa"> <i
                                    data-lucide="trash-2" class="size-4 text-red-200"></i></a>
                        </div>
                    </td>
                </tr>

                <tr>
                    <td> 1 </td>
                    <td>
                        <a class="link-primary" href="/admin/order/detail?id=369"> 000-369 </a>
                    </td>
                    <td> 16-11-2023, 9:59 am </td>
                    <td>
                        <a href="" class="link-primary"> Nguyen Duc Quan </a>
                    </td>
                    <td> Hà Nội </td>
                    <td> 69.600.000 </td>
                    <td>
                        <div class="badge badge-success badge-sm badge-soft">Thành công</div>
                    </td>
                    <td>
                        <div class="badge badge-sm badge-ghost">Chờ xử lý</div>
                    </td>
                    <td>
                        <div class="badge badge-sm badge-info badge-soft">Đang xử lý</div>
                    </td>
                    <td>
                        <a href="" class="link-primary"> Nguyen Duc Quan </a>
                    </td>
                    <td>
                        <div class="flex justify-center gap-2">
                            <a href="/admin/order/detail?id=369" class="btn btn-soft btn-xs btn-square"
                                title="Chi tiết"> <i data-lucide="eye" class="size-4 text-gray-500"></i></a>
                            <a href="" class="btn btn-soft btn-error btn-xs btn-square" title="Xóa"> <i
                                    data-lucide="trash-2" class="size-4 text-red-200"></i></a>
                        </div>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>

    <div class="join mt-5 justify-end flex items-center gap-1">
        <a href="" class="btn btn-ghost btn-circle btn-sm" aria-label="Pagination controls">
            <i data-lucide="chevron-left" class="size-4"></i>
        </a>
        <a href="" class="btn btn-circle btn-sm btn-ghost">1</a>
        <a href="" class="btn btn-circle btn-sm btn-ghost btn-active">2</a>
        <a href="" class="btn btn-circle btn-sm btn-ghost">3</a>
        <a href="" class="btn btn-circle btn-sm btn-ghost">4</a>
        <a href="" class="btn btn-circle btn-sm btn-ghost">5</a>
        <a href="" class="btn btn-ghost btn-circle btn-sm" aria-label="Pagination controls">
            <i data-lucide="chevron-right" class="size-4"></i>
        </a>
    </div>
</div>