<div class="w-full mb-[50px]">

    <div class="text-sm breadcrumbs">
        <ul>
            <li><a href="/admin/product/config_group">Nhóm cấu hình sản phẩm</a></li>
            <li class="text-active">Form thêm/sửa cấu hình</li>
        </ul>
    </div>

    <div class="w-7xl  mx-auto">
        <div class="bg-white p-3 rounded-sm shadow mt-5">
            <div class="flex items-center justify-between">
                <h1 class="text-xl font-bold">Cập nhật cấu hình sản phẩm</h1>
                <div class="flex items-center gap-3 ">
                    <a href="/admin/brand/add" class="btn btn-sm btn-outline btn-view">
                        <i data-lucide="plus" class="size-4"></i>
                        <span>Thêm sp mới</span>
                    </a>
                    <a href="/admin/brand/add" class="btn btn-sm btn-outline btn-view">
                        <i data-lucide="copy" class="size-4"></i>
                        <span>Tạo sp tương tự</span>
                    </a>
                </div>
            </div>
        </div>

        <div class="grid grid-cols-4 gap-5 mt-5">
            <div class="left">
                <div class="list-tab">
                    <a href="/admin/product/config_group_form"
                        class="item block w-full text-[#6B7280] bg-white rounded-[10px_10px_0_0] shadow-[0px_-1px_1px_0px_#0000001A] text-[13px] p-2">Nội
                        dung</a>
                    <a href="/admin/product/config_group_attribute"
                        class=" item block w-full text-[#fff] bg-[#0041E8] text-[13px] font-500 p-2">Thuộc
                        tính</a>
                    <a href="/admin/product/config_group_product"
                        class=" item block w-full text-[#6B7280] bg-white text-[13px] font-500 p-2 rounded-[0_0_10px_10px] shadow-[0px_1px_1px_0px_#0000001A] border-t-[1px]  border-[#f8f8f8]">Sản
                        phẩm</a>
                </div>
            </div>
            <div class="right col-span-3">

                <div class="bg-white p-3 rounded-sm shadow">
                    <b class="block font-xl">Thuộc tính</b>
                    <div class="grid grid-cols-2 gap-5 mt-5">
                        <div class="form-control">
                            <label class="font-bold text-base">Cập nhật</label>
                            <input type="text" size="60" name="info[title]" id="title" value="{{page.item_info.title}}"
                                placeholder="Cập nhật" class="w-full input rounded-sm shadow mt-3">
                        </div>
                        <div class="form-control">
                            <label class="font-bold text-base">Thứ tự</label>
                            <input type="text" size="60" name="info[title]" id="title" value="{{page.item_info.title}}"
                                placeholder="Thứ tự" class="w-full input rounded-sm shadow mt-3">
                        </div>
                    </div>
                </div>

                <div class="bg-white p-3 rounded-sm shadow mt-5">
                    <b class="block font-xl">Thuộc tính</b>

                    <div class="grid grid-cols-3 gap-3 mt-5">
                        <div class="form-control">
                            <label class="font-bold text-base">Giá trị</label>
                            <input type="text" size="60" name="info[title]" id="title" value="{{page.item_info.title}}"
                                placeholder="Giá trị" class="w-full input rounded-sm shadow mt-3">
                        </div>
                        <div class="form-control">
                            <label class="font-bold text-base">Mô tả</label>
                            <input type="text" size="60" name="info[title]" id="title" value="{{page.item_info.title}}"
                                placeholder="Mô tả" class="w-full input rounded-sm shadow mt-3">
                        </div>
                        <div class="form-control">
                            <label class="font-bold text-base">Thứ tự</label>
                            <input type="text" size="60" name="info[title]" id="title" value="0" placeholder="Thứ tự"
                                class="w-full input rounded-sm shadow mt-3">
                        </div>
                        <div class="form-control">
                            <label class="font-bold text-base">Giá trị</label>
                            <input type="text" size="60" name="info[title]" id="title" value="{{page.item_info.title}}"
                                placeholder="Giá trị" class="w-full input rounded-sm shadow mt-3">
                        </div>
                        <div class="form-control">
                            <label class="font-bold text-base">Mô tả</label>
                            <input type="text" size="60" name="info[title]" id="title" value="{{page.item_info.title}}"
                                placeholder="Mô tả" class="w-full input rounded-sm shadow mt-3">
                        </div>
                        <div class="form-control">
                            <label class="font-bold text-base">Thứ tự</label>
                            <input type="text" size="60" name="info[title]" id="title" value="0" placeholder="Thứ tự"
                                class="w-full input rounded-sm shadow mt-3">
                        </div>
                        <div class="form-control">
                            <label class="font-bold text-base">Giá trị</label>
                            <input type="text" size="60" name="info[title]" id="title" value="{{page.item_info.title}}"
                                placeholder="Giá trị" class="w-full input rounded-sm shadow mt-3">
                        </div>
                        <div class="form-control">
                            <label class="font-bold text-base">Mô tả</label>
                            <input type="text" size="60" name="info[title]" id="title" value="{{page.item_info.title}}"
                                placeholder="Mô tả" class="w-full input rounded-sm shadow mt-3">
                        </div>
                        <div class="form-control">
                            <label class="font-bold text-base">Thứ tự</label>
                            <input type="text" size="60" name="info[title]" id="title" value="0" placeholder="Thứ tự"
                                class="w-full input rounded-sm shadow mt-3">
                        </div>
                    </div>

                    <a href="javascript:void(0)"
                        class="flex items-center text-center justify-center mt-5 gap-2 text-active">
                        <i data-lucide="circle-plus" class="size-4 mt-0.5"></i>
                        <span class="text-active font-bold">Thêm giá trị</span>
                    </a>
                </div>

                <div class="bg-white p-3 rounded-sm shadow mt-5">
                    <input class="btn btn-active" id="submit-collection-btn" name="commit" type="submit"
                        value="Cập nhật" />
                </div>

            </div>
        </div>
    </div>
</div>