{% if global.url contains '?id=' %}

    {% include 'deal/deal_detail' %}

{% else %}
<div class="global-breadcrumb-container">
    <a href="/admin/deal"> Deal/giờ vàng </a>
    <a href=""> Thêm sản phẩm deal </a>
</div>


<div class="bg-white m-[0_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]"> Chọn sản phẩm Deal </p>

    <form method="get" enctype="multipart/form-data" action="/admin/" class="border border-[#F6F6F6] m-[12px_0_20px] p-[15px] bg-white rounded-[10px] shadow-[0px_1px_1px_0px_rgba(0,0,0,0.10)]">
        <input type="text" name="q" id="keyword" value="" placeholder="Tìm sản phẩm" class="w-[375px] h-[36px] border border-[#D8D8D8] m-[0_10px_0_0] p-[0_10px] bg-white rounded-[4px] shadow-[0px_2px_4px_0px_rgba(0,0,0,0.12)] ">
        <input type="submit" value="Tìm kiếm" class="h-[36px] bg-[#0041E8] text-[#fff] font-[500] p-[0_8px] cursor-pointer rounded-[4px]">
    </form>

    <div class="flex items-center justify-between m-[20px_0_16px]">
        <div class="flex items-center">
            <a href="javascript:void(0)" onclick="js_list_category.showModal()" class="leading-[34px] border border-[#79B0E2] rounded-[4px] bg-white p-[0_15px] mr-[15px] font-[500] text-[#79B0E2] hover:bg-[#79B0E2] hover:text-[#fff]">
                Chọn danh mục để xem
            </a>

            <a href="javascript:void(0)" onclick="js_list_brand.showModal()" class="leading-[34px] border border-[#79B0E2] rounded-[4px] bg-white p-[0_15px] mr-[15px] font-[500] text-[#79B0E2] hover:bg-[#79B0E2] hover:text-[#fff]">
                Chọn thương hiệu để xem
            </a>
        </div>

        <div class="flex items-center">
            <select class="min-w-[160px] h-[36px] p-[0_5px] border border-[#D8D8D8] rounded-[4px] mr-[15px] shadow-[0px_2px_4px_0px_rgba(0,0,0,0.12)]">
                <option value=""> Lọc sản phẩm </option>
                <option value=""> option </option>
            </select>

            <select class="min-w-[160px] h-[36px] p-[0_5px] border border-[#D8D8D8] rounded-[4px] shadow-[0px_2px_4px_0px_rgba(0,0,0,0.12)]">
                <option value=""> Sắp xếp sản phẩm </option>
                <option value=""> option </option>
            </select>
        </div>
    </div>

    <div class="order-page-table">
        <table>
            <thead>
                <tr>
                    <td width="40"> STT </td>
                    <td> Sản phẩm (Tổng số: 1.742) </td>
                    <td> Thông tin khác </td>
                    <td width="160"> Lựa chọn </td>
                </tr>
            </thead>

            <tbody>

                <tr>
                    <td align="center"> 1 </td>

                    <td>
                        <a href="" target="_blank"> Màn hình Viewsonic VA3209U-4K (32 inch/UHD/IPS/60Hz/4ms) </a>
                        <p> Mã kho: <b> MOVI213 </b> </p>
                        <p> Danh mục: <b> Màn Hình Máy Tính, Màn Hình Theo Hãng, Màn Hình ViewSonic </b> </p>
                        <p> Bảo hành: 36 Tháng </p>
                        <p> Khuyến mại: + "ƯU ĐÃI Giảm ngay 10% vào thẻ nhớ khi khách hàng mua kèm Camera" </p>
                    </td>

                    <td>
                        <p> Giá: 10.599.000 </p>
                        <p> Kho hàng: 0 </p>
                        <p> Bảo hành: 36 Tháng </p>
                    </td>

                    <td align="center">
                        <a href="/admin/deal/deal-add?id=1" class="block leading-[36px] bg-[#0041E8] text-[#fff_!important] font-[500] p-[0_14px] cursor-pointer rounded-[4px]">
                            Chọn sản phẩm
                        </a>
                    </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>


<!-- Popup Danh mục + thương hiệu -->
<dialog id="js_list_category" class="modal">
    <div class="modal-box max-w-xl p-[16px]">
        <form method="dialog">
            <button class="absolute bg-[#ECECEC] font-bold leading-[30px] right-2 rounded-[50%] text-[#9E9E9E] top-2 w-[30px]">✕</button>
        </form>

        <p class="mb-[6px] font-bold text-[20px] leading-[26px]"> Chọn danh mục để xem </p>
        <p class="m-[6px_0]"> Tổng số sản phẩm: 1.740 </p>
       
        <ul class="h-[400px] overflow-auto leading-[24px]">
            <li class="mb-[7px]">
                <div>
                    + (#1) <a href="" class="font-bold text-[#0041E8]"> Danh mục cấp 1 </a>
                </div>

                <ul class="pl-[15px]">

                    <li class="mb-[2px]">
                        <div>
                            + (#2) <a href="" class="font-bold text-[#0041E8]"> Danh mục cấp 2 </a>
                        </div>

                        <ul class="pl-[15px]">
                            <li class="mb-[2px]">
                                <div>
                                    + (#3) <a href="" class="text-[#0041E8]"> Danh mục cấp 3 </a> (5)
                                </div>

                                <ul class="pl-[15px]">
                                    <li>
                                        <div>
                                            + (#4) <a href="" class="text-[#0041E8]"> Danh mục cấp 4 </a> (5)
                                        </div>
                                    </li>
                                </ul>
                            </li>

                            <li class="mb-[2px]">
                                <div>
                                    + (#3) <a href="" class="text-[#0041E8]"> Danh mục cấp 3 </a> (5)
                                </div>
                            </li>
                            <li class="mb-[2px]">
                                <div>
                                    + (#3) <a href="" class="text-[#0041E8]"> Danh mục cấp 3 </a> (5)
                                </div>
                            </li>
                        </ul>

                    </li>

                    <!-- loop -->
                    <li class="mb-[2px]"> <div> + (#2) <a href="" class="font-bold text-[#0041E8]"> Danh mục cấp 2 </a> </div><ul class="pl-[15px]"> <li class="mb-[2px]"> <div> + (#3) <a href="" class="text-[#0041E8]"> Danh mục cấp 3 </a> (5) </div><ul class="pl-[15px]"> <li> <div> + (#4) <a href="" class="text-[#0041E8]"> Danh mục cấp 4 </a> (5) </div></li></ul> </li></ul> </li>
                    <!-- // -->
                </ul>
            </li>

            <!-- Clone -->
            <li class="mb-[7px]"> <div> + (#1) <a href="" class="font-bold text-[#0041E8]"> Danh mục cấp 1 </a> </div><ul class="pl-[15px]"> <li class="mb-[2px]"> <div> + (#2) <a href="" class="font-bold text-[#0041E8]"> Danh mục cấp 2 </a> </div><ul class="pl-[15px]"> <li class="mb-[2px]"> <div> + (#3) <a href="" class="text-[#0041E8]"> Danh mục cấp 3 </a> (5) </div><ul class="pl-[15px]"> <li> <div> + (#4) <a href="" class="text-[#0041E8]"> Danh mục cấp 4 </a> (5) </div></li></ul> </li></ul> </li><li class="mb-[2px]"> <div> + (#2) <a href="" class="font-bold text-[#0041E8]"> Danh mục cấp 2 </a> </div><ul class="pl-[15px]"> <li class="mb-[2px]"> <div> + (#3) <a href="" class="text-[#0041E8]"> Danh mục cấp 3 </a> (5) </div><ul class="pl-[15px]"> <li> <div> + (#4) <a href="" class="text-[#0041E8]"> Danh mục cấp 4 </a> (5) </div></li></ul> </li></ul> </li></ul> </li><li class="mb-[2px]"> <div> + (#1) <a href="" class="font-bold text-[#0041E8]"> Danh mục cấp 1 </a> </div><ul class="pl-[15px]"> <li class="mb-[2px]"> <div> + (#2) <a href="" class="font-bold text-[#0041E8]"> Danh mục cấp 2 </a> </div><ul class="pl-[15px]"> <li class="mb-[2px]"> <div> + (#3) <a href="" class="text-[#0041E8]"> Danh mục cấp 3 </a> (5) </div><ul class="pl-[15px]"> <li> <div> + (#4) <a href="" class="text-[#0041E8]"> Danh mục cấp 4 </a> (5) </div></li></ul> </li></ul> </li><li class="mb-[2px]"> <div> + (#2) <a href="" class="font-bold text-[#0041E8]"> Danh mục cấp 2 </a> </div><ul class="pl-[15px]"> <li class="mb-[2px]"> <div> + (#3) <a href="" class="text-[#0041E8]"> Danh mục cấp 3 </a> (5) </div><ul class="pl-[15px]"> <li> <div> + (#4) <a href="" class="text-[#0041E8]"> Danh mục cấp 4 </a> (5) </div></li></ul> </li></ul> </li></ul> </li>
            <!-- // clone -->
        </ul>
    </div>

    <form method="dialog" class="modal-backdrop">
        <button>close</button>
    </form>
</dialog>

<dialog id="js_list_brand" class="modal">
    <div class="modal-box max-w-xl p-[16px]">
        <form method="dialog">
            <button class="absolute bg-[#ECECEC] font-bold leading-[30px] right-2 rounded-[50%] text-[#9E9E9E] top-2 w-[30px]">✕</button>
        </form>

        <p class="mb-[6px] font-bold text-[20px] leading-[26px]"> Chọn thương hiệu để xem </p>        

        <div class="h-[400px] overflow-auto">                        
            <p class="mb-[6px]"> Tìm theo chữ cái:  </p>

            <div class="flex flex-wrap items-center brand-letters leading-[24px] mb-[20px]">
                <a href=""> 
                    A <span class="text-[black]">(73)</span>
                </a>

                <a href=""> b <span class="text-[black]">(73)</span></a><a href=""> c <span class="text-[black]">(73)</span></a><a href=""> d <span class="text-[black]">(73)</span></a><a href=""> e <span class="text-[black]">(73)</span></a><a href=""> f <span class="text-[black]">(73)</span></a><a href=""> g <span class="text-[black]">(73)</span></a><a href=""> 123 <span class="text-[black]">(73)</span></a><a href=""> b <span class="text-[black]">(73)</span></a><a href=""> c <span class="text-[black]">(73)</span></a><a href=""> d <span class="text-[black]">(73)</span></a><a href=""> e <span class="text-[black]">(73)</span></a><a href=""> f <span class="text-[black]">(73)</span></a><a href=""> g <span class="text-[black]">(73)</span></a><a href=""> 123 <span class="text-[black]">(73)</span></a><a href=""> b <span class="text-[black]">(73)</span></a><a href=""> c <span class="text-[black]">(73)</span></a><a href=""> d <span class="text-[black]">(73)</span></a><a href=""> e <span class="text-[black]">(73)</span></a><a href=""> f <span class="text-[black]">(73)</span></a><a href=""> g <span class="text-[black]">(73)</span></a><a href=""> 123 <span class="text-[black]">(73)</span></a><a href=""> b <span class="text-[black]">(73)</span></a><a href=""> c <span class="text-[black]">(73)</span></a><a href=""> d <span class="text-[black]">(73)</span></a><a href=""> e <span class="text-[black]">(73)</span></a><a href=""> f <span class="text-[black]">(73)</span></a>
            </div>

            <div class="order-page-table">
                <table>
                    <thead>
                        <tr>
                            <td width="40">STT</td>
                            <td>Thương hiệu</td>
                            <td width="120">Số sản phẩm</td>
                            <td width="80"></td>
                        </tr>
                    </thead>
    
                    <tbody>
                        <tr align="center">
                            <td> 1 </td>
                            <td align="left"> ABS </td>
                            <td> 1 </td>
                            <td> 
                                <a href="/admin/deal/deal-add?id=1" class="block font-[500] leading-[36px] rounded-[4px] bg-[#0041E8] p-[0_9px] text-[#fff_!important]">Xem</a>
                            </td>
                        </tr>
                        
                        <!-- loop -->
                        <tr align="center"> <td> 2 </td><td align="left"> A </td><td> 1 </td><td> <a href="" class="block font-[500] leading-[36px] rounded-[4px] bg-[#0041E8] p-[0_9px] text-[#fff_!important]">Xem</a> </td></tr><tr align="center"> <td> 3</td><td align="left"> B</td><td> 1 </td><td> <a href="" class="block font-[500] leading-[36px] rounded-[4px] bg-[#0041E8] p-[0_9px] text-[#fff_!important]">Xem</a> </td></tr><tr align="center"> <td> 4 </td><td align="left"> C</td><td> 1 </td><td> <a href="" class="block font-[500] leading-[36px] rounded-[4px] bg-[#0041E8] p-[0_9px] text-[#fff_!important]">Xem</a> </td></tr><tr align="center"> <td> 5 </td><td align="left"> ABS </td><td> 1 </td><td> <a href="" class="block font-[500] leading-[36px] rounded-[4px] bg-[#0041E8] p-[0_9px] text-[#fff_!important]">Xem</a> </td></tr>
                        <tr align="center"> <td> 2 </td><td align="left"> A </td><td> 1 </td><td> <a href="" class="block font-[500] leading-[36px] rounded-[4px] bg-[#0041E8] p-[0_9px] text-[#fff_!important]">Xem</a> </td></tr><tr align="center"> <td> 3</td><td align="left"> B</td><td> 1 </td><td> <a href="" class="block font-[500] leading-[36px] rounded-[4px] bg-[#0041E8] p-[0_9px] text-[#fff_!important]">Xem</a> </td></tr><tr align="center"> <td> 4 </td><td align="left"> C</td><td> 1 </td><td> <a href="" class="block font-[500] leading-[36px] rounded-[4px] bg-[#0041E8] p-[0_9px] text-[#fff_!important]">Xem</a> </td></tr><tr align="center"> <td> 5 </td><td align="left"> ABS </td><td> 1 </td><td> <a href="" class="block font-[500] leading-[36px] rounded-[4px] bg-[#0041E8] p-[0_9px] text-[#fff_!important]">Xem</a> </td></tr>
                        <!-- // -->
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <form method="dialog" class="modal-backdrop">
        <button>close</button>
    </form>
</dialog>
{% endif %}