<?= $this->layout('_theme', ['title' => $title, 'subtitle' => 'Adicionar nova item']); ?>

<div class="admin-form">
    <form action="<?= __redirect('administration/auth/to/edit/item/' . $item['id']) ?>">
        <div>
            <p class="px-1 py-3 text-[13px]">Nome do item</p>
            <input class="rounded-sm p-2 my-1 text-xs w-full border border-neutral-400 focus:outline-none focus:bg focus:bg-neutral-100" type="text" name="name" placeholder="Nome do item" value="<?= $item['name'] ?>" maxlength="80">
        </div>

        <div>
            <p class="px-1 py-3 text-[13px]">Imagem do item</p>
            <input class="rounded-sm p-2 my-1 text-xs w-full border border-neutral-400 focus:outline-none focus:bg focus:bg-neutral-100" type="file" name="image">
        </div>

        <div class="d-flex j-between gap-30 f-wrap">
            <div>
                <p class="px-1 py-3 text-[13px]">Seção do item</p>
                <input class="rounded-sm p-2 my-1 text-xs w-full border border-neutral-400 focus:outline-none focus:bg focus:bg-neutral-100" type="text" name="section" placeholder="Seção do item" value="<?= $item['section'] ?>">
            </div>
            <div>
                <p class="px-1 py-3 text-[13px]">Index</p>
                <input class="rounded-sm p-2 my-1 text-xs w-full border border-neutral-400 focus:outline-none focus:bg focus:bg-neutral-100" type="text" name="id_item" placeholder="Id do item" value="<?= $item['id_item'] ?>">
            </div>

        </div>

        <div class="d-flex j-between gap-30 f-wrap">
            <div>
                <p class="px-1 py-3 text-[13px]">Largura (X)</p>
                <input class="rounded-sm p-2 my-1 text-xs w-full border border-neutral-400 focus:outline-none focus:bg focus:bg-neutral-100" type="text" name="x" placeholder="Largura do item" value="<?= $item['x'] ?>">
            </div>
            <div>
                <p class="px-1 py-3 text-[13px]">Altura (Y)</p>
                <input class="rounded-sm p-2 my-1 text-xs w-full border border-neutral-400 focus:outline-none focus:bg focus:bg-neutral-100" type="text" name="y" placeholder="Altura do item" value="<?= $item['y'] ?>">
            </div>

            <div>
                <p class="px-1 py-3 text-[13px]">Classe<sup>*</sup></p>
                <select name="class" class="rounded-sm p-2 my-1 text-xs w-full border border-neutral-400 focus:outline-none focus:bg focus:bg-neutral-100">
                    <option value="geral"> - Geral (Todas as classes)</option>
                    <?php foreach (characters['classes'] as $class) : ?>
                        <option value="<?= $class['short_name'] ?>" <?= $item['class'] == $class['short_name'] ? 'selected' : '' ?>> - <?= $class['name'] ?></option>
                    <?php endforeach; ?>
                </select>
            </div>
            <div>
                <p class="px-1 py-3 text-[13px]">Ancient</p>
                <select name="ancient" class="rounded-sm p-2 my-1 text-xs w-full border border-neutral-400 focus:outline-none focus:bg focus:bg-neutral-100">
                    <option value="0"> - Sem ancient</option>
                    <option value="type_1" <?= $item['ancient_1'] == 1 ? 'selected' : '' ?> > - Ancient (1)</option>
                    <option value="type_2" <?= $item['ancient_2'] == 1 ? 'selected' : '' ?> > - Ancient (2)</option>
                </select>
            </div>

            <div>
                <p class="px-1 py-3 text-[13px]">Preço do item</p>
                <input class="rounded-sm p-2 my-1 text-xs w-full border border-neutral-400 focus:outline-none focus:bg focus:bg-neutral-100" type="text" name="price" placeholder="Preço do item" value="<?= $item['price'] ?>">
            </div>
        </div>

        <div>
            <p class="px-1 py-3 text-[13px]">Categoria do shopping </p>
            <ul class="items-center w-full text-[13px] font-medium text-gray-900 bg-white border border-gray-200 rounded-lg sm:flex">
                <?php $cont = 0;
                foreach (web()->shoppings as $key => $shop) : $cont++; ?>
                    <li class="w-full border-b border-gray-200 sm:border-b-0 sm:border-r">
                        <div class="flex items-center pl-3">
                            <input id="<?= $key ?>" type="radio" name="category" value="<?= $key ?>" id="<?= $key ?>" <?= $item['category_group'] == $key ? 'checked' : '' ?> class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 focus:ring-blue-500">
                            <label for="<?= $key ?>" class="w-full py-3 ml-2 text-[13px] font-medium text-gray-900"><?= ucfirst($key) ?></label>
                        </div>
                    </li>
                <?php endforeach; ?>
            </ul>
        </div>

        <div>
            <p class="px-1 py-3 text-[13px]">Grupo de item </p>
            <ul class="items-center w-full text-[13px] font-medium text-gray-900 bg-white rounded-lg flex flex-wrap">
                <?php $cont = 0;
                foreach (web()->shopping_groups as $group) : $cont++; ?>
                    <li class="w-full max-w-sm border border-gray-200 mx-auto">
                        <div class="flex items-center pl-3">
                            <input id="<?= $group['group'] ?>" type="radio" name="item_group" value="<?= $group['group'] ?>" id="<?= $group['group'] ?>" <?= $item['item_group'] == $group['group'] ? 'checked' : '' ?> class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 focus:ring-blue-500">
                            <label for="<?= $group['group'] ?>" class="w-full py-3 ml-2 text-[13px] font-medium text-gray-900"><?= $group['name'] ?></label>
                        </div>
                    </li>
                <?php endforeach; ?>
        </div>

        <div>
            <p class="px-1 py-3 text-[13px]">Venda do item</p>
            <ul class="items-center w-full text-[13px] font-medium text-gray-900 bg-white border border-gray-200 rounded-lg sm:flex">
                <li class="w-full border-b border-gray-200 sm:border-b-0 sm:border-r">
                    <div class="flex items-center pl-3">
                        <input id="yes" type="radio" value="1" name="active" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 focus:ring-blue-500" <?= $item['active'] == 1 ? 'checked' : '' ?>>
                        <label for="yes" class="w-full py-3 ml-2 text-[13px] font-medium text-gray-900">Ativar</label>
                    </div>
                </li>

                <li class="w-full border-b border-gray-200 sm:border-b-0 sm:border-r">
                    <div class="flex items-center pl-3">
                        <input id="no" type="radio" value="0" name="active" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 focus:ring-blue-500" <?= $item['active'] == 0 ? 'checked' : '' ?>>
                        <label for="no" class="w-full py-3 ml-2 text-[13px] font-medium text-gray-900">Desativar</label>
                    </div>
                </li>
            </ul>
        </div>
        <button class="rounded-lg py-3 px-6 bg-sky-500 text-white block mt-4 mx-auto text-sm border-2 border-sky-400 hover:bg-sky-700 transition ease-in-out duration-500" type="submit">Editar</button>
    </form>
</div>