<div class="col-12 text-center my-4 text-sm-center">
    <h3> Novo Produto</h3>
    <p>Crie um novo Produto </p>
</div>
<div class="col-lg-3">
    <section class="card">
        <header class="card-header infinity-bg white-text text-center">
            Imagem de capa
        </header>
        <img class="radius img-open" style="width: 100%;" src="<?= image($product->cover, 400); ?>" id="image-preview"/>
    </section>



</div>

<div class="col-lg-9">
    <section class="card">
        <header class="card-header infinity-bg white-text">
            Cadastrar Produto
        </header>
        <div class="card-body" id="formAjax">
            <form class="form-horizontal tasi-form" method="post" id="my-form" action="<?= url("/admin/product/product"); ?>">
                <input type="hidden" name="action" value="create"/>
                <div class="form-group row" hidden>
                    <label class="col-sm-2 control-label">Capa (1920x1080px)</label>
                    <div class="col-sm-10">
                        <input type="file" name="cover" placeholder="Uma imagem de capa" class="form-control" id="j_img_preview"/>
                        <!-- <span class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>-->
                    </div>

                </div>

                <div class="form-group row">
                    <label class="col-sm-2 control-label">Título*</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" name="title">
                        <!-- <span class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>-->
                    </div>
                </div>
                <div class="form-group row">
                    <label class="col-sm-2 control-label">Subtítulo*</label>
                    <div class="col-sm-5">
                        <input type="text" class="form-control" name="subtitle">
                        <!-- <span class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>-->
                    </div>
                    <label class="col-sm-2 control-label">Código</label>
                    <div class="col-sm-3">
                        <input type="text" class="form-control" name="sku">
                        <!-- <span class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>-->
                    </div>
                </div>
                <div class="form-group row">
                    <label class="col-sm-2 control-label">Vídeo</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" name="video">
                        <!-- <span class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>-->
                    </div>
                </div>
                <div class="form-group row">
                    <div class="col-sm-12">
                        <label class="control-label">Conteúdo*</label>
                        <textarea name="content" class="form-control mce"></textarea>
                        <!-- <span class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>-->
                    </div>
                </div>
        </div>
    </section>
    <section class="card">
        <div class="card-body" id="variants">

            <div class="form-group row">

                <div class="col-sm-3">
                    <label class="control-label">Altura*</label>
                    <input type="text" class="form-control" name="height[1]" value="">
                    <span class="help-block">Em cm</span>
                </div>

                <div class="col-sm-3">
                    <label class="control-label">Largura*</label>
                    <input type="text" class="form-control" name="width[1]" value="">
                    <span class="help-block">Em cm</span>
                </div>

                <div class="col-sm-3">
                    <label class="control-label">Profundidade*</label>
                    <input type="text" class="form-control" name="depth[1]" value="">
                    <span class="help-block">Em cm</span>
                </div>
                <div class="col-sm-3">
                    <label class="control-label">Peso*</label>

                    <input type="text" class="form-control" name="weight[1]" value="">
                    <span class="help-block">Em gramas</span>
                </div>
            </div>
            <div class="form-group row">

                <div class="col-sm-4">
                    <label class="control-label">Preço*</label>
                    <input type="text" class="form-control" name="price[1]" value="">
                    <span class="help-block">ex: 10.00</span>
                </div>
                <div class="col-sm-4">
                    <label class="control-label">Preço Promo*</label>
                    <input type="text" class="form-control" name="promotional_price[1]" value="">
                    <span class="help-block">ex: 9.00</span>
                </div>
                <div class="col-sm-4">
                    <label class="control-label">Estoque*</label>
                    <input type="text" class="form-control" name="stock[1]" value="∞">
                    <span class="help-block">-1 para infinito</span>
                </div>
            </div>
            <div class="form-group row">

                <div class="col-sm-3">
                    <label class="control-label">Altura*</label>
                    <input type="text" class="form-control" name="height[2]" value="">
                    <span class="help-block">Em cm</span>
                </div>

                <div class="col-sm-3">
                    <label class="control-label">Largura*</label>
                    <input type="text" class="form-control" name="width[2]" value="">
                    <span class="help-block">Em cm</span>
                </div>

                <div class="col-sm-3">
                    <label class="control-label">Profundidade*</label>
                    <input type="text" class="form-control" name="depth[2]" value="">
                    <span class="help-block">Em cm</span>
                </div>
                <div class="col-sm-3">
                    <label class="control-label">Peso*</label>

                    <input type="text" class="form-control" name="weight[2]" value="">
                    <span class="help-block">Em gramas</span>
                </div>
            </div>
            <div class="form-group row">

                <div class="col-sm-4">
                    <label class="control-label">Preço*</label>
                    <input type="text" class="form-control" name="price[12]" value="">
                    <span class="help-block">ex: 10.00</span>
                </div>
                <div class="col-sm-4">
                    <label class="control-label">Preço Promo*</label>
                    <input type="text" class="form-control" name="promotional_price[2]" value="">
                    <span class="help-block">ex: 9.00</span>
                </div>
                <div class="col-sm-4">
                    <label class="control-label">Estoque*</label>
                    <input type="text" class="form-control" name="stock[2]" value="∞">
                    <span class="help-block">-1 para infinito</span>
                </div>
            </div>



        </div>
    </section>
    <section class="card">
        <div class="card-body">

            <div class="form-group row">
                <div class="col-md-12">
                    <label class="control-label">Categoria*</label>
                    <select name="category" class="form-control" required>
                        <?php foreach ($categories as $category): ?>
                            <option value="<?= $category->id; ?>"><?= $category->title; ?></option>
                        <?php endforeach; ?>
                    </select>
                </div>

            </div>
            <div class="form-group row">


                <label class="col-md-2 control-label">Data de publicação:</label>
                <div class="col-md-4">
                    <input class="mask-datetime form-control" type="text" name="post_at" value="<?= date("d/m/Y H:i"); ?>"
                           required/>
                    <!-- <span class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>-->
                </div>
                <label class="col-md-2 control-label">Status*</label>
                <div class="col-md-4">
                    <select name="status" class="form-control" required>
                        <option value="post">Publicar</option>
                        <option value="draft">Rascunho</option>
                        <option value="trash">Lixo</option>
                    </select>
                </div>
            </div>

            <div class="form-group row">
                <label class="col-sm-2 control-label">Galeria</label>
                <div class="col-sm-10">
                    <input type="file" name="gallery[]" placeholder="Uma imagem de capa" class="form-control" multiple/>
                    <span class="help-block">Envie até 10 imagens por vez para não sobrecarregar o sistema</span>
                </div>
            </div>

        </div>
    </section>
    <div class="clear" style="margin-bottom: 50px;">
        <button class="btn btn-primary" type="submit">Publicar</button>
        <a class="btn btn-danger" href="<?= url("/admin/product/home"); ?>">Cancelar</a>
    </div>


    </form>
</div>