admin_hura_8/template/order/paygate.html

<div
    class="bg-white m-[16px_0_16px_16px] p-[20px_16px] rounded-[15px] shadow-[0px_1px_1px_0px_rgba(0,0,0,0.10)] leading-[20px]">
    <p class="leading-[30px] text-[24px] font-bold m-[0_0_12px]"> Thanh toán qua cổng dịch vụ </p>

    <div class="flex flex-wrap mb-[20px] leading-[36px]">
        <a href="" style="background: #0041E8;color: #fff;"
            class="text-[#919699] font-[500] p-[0_20px] mr-[2px] bg-[#F6F6F6] rounded-[4px_4px_0_0] hover:bg-[#0041E8] hover:text-[#fff]">
            Chưa xử lý
        </a>

        <a href=""
            class="text-[#919699] font-[500] p-[0_20px] mr-[2px] bg-[#F6F6F6] rounded-[4px_4px_0_0] hover:bg-[#0041E8] hover:text-[#fff]">
            Thành công
        </a>

        <a href=""
            class="text-[#919699] font-[500] p-[0_20px] mr-[2px] bg-[#F6F6F6] rounded-[4px_4px_0_0] hover:bg-[#0041E8] hover:text-[#fff]">
            Hủy bỏ
        </a>
    </div>

    <form method="get" enctype="multipart/form-data" action="/admin/"
        class="flex flex-wrap items-center  border-[#F6F6F6] m-[12px_0_20px] p-[15px_15px_0_15px] bg-white rounded-[10px] shadow-[0px_1px_4px_0px_rgba(0,0,0,0.10)]">
        <input type="text" name="q" id="keyword" value="" placeholder="Tìm theo email hoặc số điện thoại"
            class="w-[375px] h-[36px] border border-[#D8D8D8] m-[0_10px_15px_0] p-[0_10px] bg-white rounded-[4px] shadow-[0px_2px_4px_0px_rgba(0,0,0,0.12)] ">

        <div class="items-center flex mb-[15px]">
            <p class="mr-1"> Từ ngày </p>

            <div class="relative m-[0_20px_0_10px]">
                <i class="far fa-calendar text-[#7E7E7E] m-[0_5px_0_0] absolute left-[10px] leading-[35px]"></i>
                <input type="date" name="from_time_date" value="" placeholder="Từ ngày"
                    class="w-[135px] h-[36px] p-[0_10px_0_30px] rounded-[4px] border border-[#D8D8D8] shadow-[0px_2px_4px_0px_rgba(0,0,0,0.10)]">
            </div>
        </div>

        <div class="items-center flex mb-[15px]">
            <p class="mr-1"> Đến ngày </p>

            <div class="relative m-[0_20px_0_10px]">
                <i class="far fa-calendar text-[#7E7E7E] m-[0_5px_0_0] absolute left-[10px] leading-[35px]"></i>
                <input type="date" name="to_time_date" value="" placeholder="Từ ngày"
                    class="w-[135px] h-[36px] p-[0_10px_0_30px] rounded-[4px] border border-[#D8D8D8] shadow-[0px_2px_4px_0px_rgba(0,0,0,0.10)]">
            </div>
        </div>

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

    <div class="m-[14px_0] flex items-center justify-between">
        <p>
            Tổng số: <b class="mr-[40px]">8</b>
            Tổng giá trị: <b>800.000 VNĐ</b>
        </p>

        <a href=""
            class="inline-flex items-center whitespace-nowrap border border-[#0041E8] rounded-[4px] bg-[#F5F7FF] text-[#0041E8] leading-[35px] p-[0_12px] group hover:bg-[#0041E8] hover:text-[#fff]">
            <i class="far fa-file-excel mr-2"></i>
            <span>Tải file excel</span>
        </a>
    </div>

    <div>
        <table class="table">
            <thead class="bg-[#F6F6F6] text-[#000] text-[14px]">
                <tr class="font-[600]">
                    <td width="50"> STT </td>
                    <td> ID </td>
                    <td> Cổng </td>
                    <td> Thời gian </td>
                    <td> Khách hàng </td>
                    <td> Thanh toán cho </td>
                    <td> Giá trị </td>
                    <td> Trạng thái </td>
                </tr>
            </thead>

            <tbody>
                <tr id="row_1" align="center">
                    <td> 1 </td>

                    <td> 10 </td>

                    <td> viettelpay </td>

                    <td> 06-11-2022, 11:26 am </td>

                    <td align="left">
                        <p> - Họ tên: <b> Ngô Quang Sơn </b> </p>
                        <p> - Email: sonnq57@yahoo.com.sg </p>
                        <p> - Tel: 0913236989 </p>
                    </td>

                    <td> [order] 123 </td>

                    <td> 100.000 </td>

                    <td>
                        <span
                            class="text-[#6DC580] border-[#6DC580] bg-[#F0F9F2] rounded-[50px] border inline-block leading-[20px] text-[12px] font-[500] p-[0_8px] m-[0_7px_0px_0]">
                            Thành công </span>
                        <!-- <span class="text-[#0041E8] border-[#0041E8] bg-[#F7F5FF] rounded-[50px] border inline-block leading-[20px] text-[12px] font-[500] p-[0_8px] m-[0_7px_0px_0]"> Chưa xử lý </span>
                        <span class="text-[#E00000] border-[#E00000] bg-[#F9F2F2] rounded-[50px] border inline-block leading-[20px] text-[12px] font-[500] p-[0_8px] m-[0_7px_0px_0]"> Hủy bỏ </span> -->
                    </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>

<script>
    function edit_order_status(id) {
        $('#status_' + id).html(`
            <select class="min-w-[140px] w-[auto_!important]">
                <option> Trạng thái </option>
                <option value="1"> Đã xử lý </option>
                <option value="0"> Chưa xử lý </option>
                <option value="-1"> Hủy bỏ </option>
            </select> 
        `);
    }

</script>