<div class="w-[100%]">
    <div
        class="m-[15px] p-[15px_10px_15px_10px] rounded-[15px] bg-white shadow-[0_1px_1px_0_rgba(0,0,0,0.1)] overflow-x-auto">
        <h1 class="text-[24px] font-[700] mb-3">So sánh giá đối thủ</h1>

        <div class="shadow-[0px_1px_1px_0px_#0000001A] p-[10px] rounded-[10px] border-[1px] border-[#F6F6F6]">
            <div class="flex items-center">
                <input type="text" size="60" name="info[title]" placeholder=""
                    class="w-[300px] h-[30px] border-[1px] border-[#D8D8D8] py-[6px] px-[10px] rounded-[4px] shadow-[0_2px_4px_0_rgba(0,0,0,0.12)]">
                <a href="javascript:void(0)"
                    class="w-[70px] h-[29px] leading-[30px] text-center rounded-[4px] bg-[#0041E8] text-white ml-[10px]">Tìm
                    kiếm</a>
            </div>
        </div>

        <div class="flex items-center justify-between my-[15px]">
            <a href="javascript:void(0)" onclick="js_list_category.showModal()"
                class="p-[5px] border-[#79B0E2] border-[1px] rounded-[4px] text-[#79B0E2] hover:bg-[#0061ff] hover:text-white mr-[15px]">
                Chọn danh mục để xem
            </a>

            <select name="" id=""
                class="w-[115px] h-[35px] shadow-[0px_2px_4px_0px_#0000001F] p-[5px] rounded-[4px] border-[1px] border-[#D8D8D8]">
                <option value="">Bộ lọc</option>
            </select>
        </div>
        <div
            class="lg:max-w-[1600px] xl:max-w-[1600px] md:max-w-[1600px] sm:max-w-[1600px] 2xl:max-w-full overflow-x-auto whitespace-nowrap">
            <table class="table">
                <thead class="bg-[#f6f6f6] text-[#000] text-[14px]">
                    <tr>
                        <th>STT</th>
                        <th>Sản phẩm (Tổng số: 53)</th>
                        <th>Cập nhật</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td class="w-[40px]">1</td>
                        <td>
                            <a href="" class="name">Ổ Cứng SSD KINGMAX 120GB SMV32</a>
                            <p>- Giá: <b>499.000</b></p>
                            <p>-Mã kho: OCKM0008</p>
                            <p>- Cập nhật: 25-01-2024, 9:46 am (29 ngày)</p>
                        </td>
                        <td class="w-[130px]">
                            <a href=""
                                class="block btn w-[100px] bg-[#0041E8] h-[35px] leading-[35px] min-h-[35px] text-center text-white rounded-[4px]">Cập
                                nhật</a>
                        </td>
                    </tr>
                    <tr>
                        <td class="w-[40px]">1</td>
                        <td>
                            <a href="" class="name">Ổ Cứng SSD KINGMAX 120GB SMV32</a>
                            <p>- Giá: <b>499.000</b></p>
                            <p>-Mã kho: OCKM0008</p>
                            <p>- Cập nhật: 25-01-2024, 9:46 am (29 ngày)</p>
                        </td>
                        <td class="w-[130px]">
                            <a href=""
                                class="block btn w-[100px] bg-[#0041E8] h-[35px] leading-[35px] min-h-[35px] text-center text-white rounded-[4px]">Cập
                                nhật</a>
                        </td>
                    </tr>
                    <tr>
                        <td class="w-[40px]">1</td>
                        <td>
                            <a href="" class="name">Ổ Cứng SSD KINGMAX 120GB SMV32</a>
                            <p>- Giá: <b>499.000</b></p>
                            <p>-Mã kho: OCKM0008</p>
                            <p>- Cập nhật: 25-01-2024, 9:46 am (29 ngày)</p>
                        </td>
                        <td class="w-[130px]">
                            <a href=""
                                class="block btn w-[100px] bg-[#0041E8] h-[35px] leading-[35px] min-h-[35px] text-center text-white rounded-[4px]">Cập
                                nhật</a>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>


    <dialog id="js_list_category" class="modal">
        <div class="modal-box w-11/12 max-w-5xl">
            <form method="dialog">
                <button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2">✕</button>
            </form>
            <div class="list-category mt-[5px] max-h-[400px] max-h-[400px] overflow-x-auto">
                {% for cate in page.list_category %}
                <a href="{{cate.url}}" class="item block mb-[5px] text-[#0041E8]">
                    {% if cate.children.size > 0 %}
                    <b class="text-[#0041E8]">+ (#{{cate.id}}){{cate.title}}</b>
                    {% else %}
                    + (#{{cate.id}}){{cate.title}}
                    {% endif %}
                </a>
                {% if cate.children.size > 0 %}
                <div class="ml-[15px]">
                    {% for cate2 in cate.children %}
                    <a href="{{cate2.url}}" class="item block mb-[5px] text-[#0041E8]">
                        {% if cate2.children.size > 0 %}
                        <b class="text-[#0041E8]">+ (#{{cate2.id}}){{cate2.title}}</b>
                        {% else %}
                        + (#{{cate2.id}}){{cate2.title}} ({{cate2.totalProduct}})
                        {% endif %}
                    </a>
                    {% if cate2.children.size > 0 %}
                    <div class="ml-[15px]">
                        {% for cate3 in cate2.children %}
                        <a href="{{cate3.url}}" class="item block mb-[5px] text-[#0041E8]">+
                            (#{{cate3.id}}){{cate3.title}}
                            ({{cate3.totalProduct}})</a>
                        {% endfor %}
                    </div>
                    {% endif %}
                    {% endfor %}
                </div>
                {% endif %}
                {% endfor %}
            </div>
        </div>
        <form method="dialog" class="modal-backdrop">
            <button>close</button>
        </form>
    </dialog>
</div>