<div class="page-bar">
    <ul class="page-breadcrumb">
        <li>
            <span>Catalogo</span>
            <i class="fa fa-circle"></i>
        </li>
        <li>
            <span>Produtos</span>
            <i class="fa fa-circle"></i>
        </li>
        <li>
            <span>Adicionar</span>
        </li>
    </ul>
</div>

<div class="portlet">
    <div class="portlet-title">
        <div class="caption">
            <i class="fa fa-pencil font-dark"></i>
            <span class="caption-subject font-dark bold uppercase">Adicionar Produtos</span>
        </div>
    </div>
    <div class="portlet-body">
        <ul class="nav nav-tabs">
            <li class="active">
                <a href="#tab_1_1" data-toggle="tab" aria-expanded="true">Geral</a>
            </li>
            <li class="">
                <a href="#tab_1_2" data-toggle="tab" aria-expanded="false">Dados</a>
            </li>
            <li class="">
                <a href="#tab_1_3" data-toggle="tab" aria-expanded="false">Ligação</a>
            </li>
            <li class="">
                <a href="#tab_1_4" data-toggle="tab" aria-expanded="false">Promoções </a>
            </li>
            <li class="">
                <a href="#tab_1_5" data-toggle="tab" aria-expanded="false">Imagens</a>
            </li>
        </ul>

        <div class="tab-content">
            <div class="tab-pane fade active in" id="tab_1_1">
                <div class="portlet-body">
                    <form class="form-horizontal j_categoria" name="formCat" role="form" method="POST" action="" enctype="multipart/form-data">
                        <div class="form-body">
                            <div class="form-group">
                                <label class="col-md-2 control-label">Produto
                                    <span class="required">*</span>
                                </label>
                                <div class="col-md-10">
                                    <input type="text" class="form-control" name="produto" value="" placeholder="Produto"> 
                                </div>
                            </div>
                            <div class="form-group ">
                                <label class="col-md-2 control-label" for="form_control_1">Descrição
                                    <span class="required">*</span>
                                </label>
                                <div class="col-md-10">
                                    <textarea name="artigo_conteudo" data-provide="markdown" rows="10"><?php if (isset($post['artigo_conteudo'])) echo htmlspecialchars($post['artigo_conteudo']); ?></textarea>
                                    <div class="form-control-focus"> </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-md-2 control-label">Meta título
                                    <span class="required">*</span>
                                </label>
                                <div class="col-md-10">
                                    <input type="text" class="form-control" name="" placeholder="Meta título"> 
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-md-2 control-label">Meta Descrição</label>
                                <div class="col-md-10">
                                    <textarea rows="6" class="form-control" name="" placeholder="Meta descrição"></textarea>
                                </div>
                            </div>
                            <!--                            <div class="form-group">
                                                            <label class="col-md-2 control-label">Meta Palavra-chave</label>
                                                            <div class="col-md-10">
                                                                <textarea rows="6" class="form-control" name="" placeholder="Meta Palavra-chave"></textarea>
                                                            </div>
                                                        </div>
                                                        <div class="form-group">
                                                            <label class="col-md-2 control-label">Etiquetas
                                                            </label>
                                                            <div class="col-md-10">
                                                                <input type="text" class="form-control" name="categoria_titulo" value="" placeholder="Etiquetas"> 
                                                            </div>
                                                        </div>-->
                        </div>
                        <div class="form-actions">
                            <div class="row">
                                <div class="col-md-offset-2 col-md-10">  
                                    <button type="submit" name="sendCatUp" value="enviar" class="btn btn-success"><i class="fa fa-save"></i> <span class="hidden-xs"> Salvar</span></button>
                                </div>
                            </div>
                        </div>
                        <div class="form-body">
                            <div class="form-group">
                                <label class="col-md-2 control-label">Modelo
                                    <span class="required">*</span>
                                </label>
                                <div class="col-md-10">
                                    <input type="text" class="form-control" name="produto" value="" placeholder="Produto"> 
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-md-2 control-label">Quantidade
                                </label>
                                <div class="col-md-10">
                                    <input type="text" class="form-control" name="" placeholder="Meta título"> 
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-md-2 control-label">Mínimo por venda
                                </label>
                                <div class="col-md-10">
                                    <input type="text" class="form-control" value="1" name="" placeholder="Meta título"> 
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-md-2 control-label">Reduzir estoque</label>
                                <div class="col-md-10">
                                    <select class="form-control" name="categoria_status">
                                        <option value="1">Sim</option>
                                        <option value="0">Não</option>
                                    </select>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-md-2 control-label">Se esgotado</label>
                                <div class="col-md-10">
                                    <select class="form-control" name="categoria_status">
                                        <option value="1">2-3 Dias</option>
                                        <option value="2">Em estoque</option>
                                        <option value="3">Fora de estoque</option>
                                        <option value="4">Pedido antecipado</option>
                                    </select>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-md-2 control-label">Dimensões (C x L x A) 
                                </label>
                                <div class="col-md-3">
                                    <input type="text" class="form-control" name="" placeholder="Comprimento"> 
                                </div>
                                <div class="col-md-3">
                                    <input type="text" class="form-control" name="" placeholder="Altura"> 
                                </div>
                                <div class="col-md-3">
                                    <input type="text" class="form-control" name="" placeholder="Largura"> 
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-md-2 control-label" for="form_control_1">Precisa de frete ?</label>
                                <div class="col-md-10">
                                    <div class="md-radio-inline">
                                        <div class="md-radio">
                                            <input type="radio" id="checkbox1_8" name="radio2" value="1" class="md-radiobtn">
                                            <label for="checkbox1_8">
                                                <span class="inc"></span>
                                                <span class="check"></span>
                                                <span class="box"></span> Sim </label>
                                        </div>
                                        <div class="md-radio">
                                            <input type="radio" id="checkbox1_9" name="radio2" value="2" class="md-radiobtn">
                                            <label for="checkbox1_9">
                                                <span class="inc"></span>
                                                <span class="check"></span>
                                                <span class="box"></span> Não </label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="control-label col-md-2">Disponivel a partir de </label>
                                <div class="col-md-3">
                                    <input class="form-control form-control-inline input-medium date-picker" size="16" type="text" value="">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-md-2 control-label">Peso
                                </label>
                                <div class="col-md-10">
                                    <input type="text" class="form-control" name="" placeholder="Peso"> 
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-md-2 control-label">Situação</label>
                                <div class="col-md-10">
                                    <select class="form-control" name="categoria_status">
                                        <option value="1">Habilitado</option>
                                        <option value="0">Desabilitado</option>
                                    </select>
                                </div>
                            </div>

                        </div>
                        <div class="form-body">
                            <div class="form-group">
                                <label class="col-md-2 control-label">Marcas
                                </label>
                                <div class="col-md-10">
                                    <input type="text" class="form-control" name="produto" value="" placeholder="Marcas"> 
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-md-2 control-label">Departamento
                                </label>
                                <div class="col-md-10">
                                    <input type="text" class="form-control" name="" placeholder="Departamento"> 
                                </div>
                            </div>
<!--                            <div class="form-group">
                                <label class="col-md-2 control-label">Filtros
                                </label>
                                <div class="col-md-10">
                                    <input type="text" class="form-control" value="1" name="" placeholder="Filtros"> 
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-md-2 control-label">Produtos relacionados
                                </label>
                                <div class="col-md-10">
                                    <input type="text" class="form-control" name="" placeholder="Produtos relacionador"> 
                                </div>
                            </div>-->
                        </div>
                        <div class="tab-content">
                            <div class="tab-pane active" id="tab_images">
                                <div class="row">
                                    <label class="col-md-2 control-label">Promoções
                                    </label>
                                    <div class=" col-md-10">
                                        <table class="table table-bordered table-hover">
                                            <thead>
                                                <tr role="row" class="heading">
                                                    <th width="10%"> Preço </th>
                                                    <th width="10%"> Data inicial </th>
                                                    <th width="10%"> Data final </th>
                                                    <th width="10%">
                                                        <a href="javascript:;" class="btn btn-success btn-sm" id="add_input">
                                                            <i class="fa fa-plus"></i> Adcionar
                                                        </a> 
                                                    </th>
                                                </tr>
                                            </thead>
                                            <tbody id="add_img">
                                                <tr id="add">

                                                    <td>
                                                        <input type="text" class="form-control" name="" placeholder="Ex. 1999.90"> 
                                                    </td>
                                                    <td>
                                                        <input type="text" class="form-control" name="" placeholder="Data inicial"> 
                                                    </td>
                                                    <td>
                                                        <input type="text" class="form-control" name="" placeholder="Data final"> 
                                                    </td>
                                                    <td>
                                                        <a href="javascript:;" class="btn btn-default btn-sm" id="remove_img">
                                                            <i class="fa fa-times"></i> Remover</a>
                                                    </td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="tab-content">
                            <div class="tab-pane active" id="tab_images">
                                <div class="row">
                                    <label class="col-md-2 control-label">Galeria de imagens
                                    </label>
                                    <div class=" col-md-10">
                                        <table class="table table-bordered table-hover">
                                            <thead>
                                                <tr role="row" class="heading">
                                                    <th width="8%"> Imagem adcionais </th>
                                                    <th width="25%"> Posição </th>
                                                    <th width="10%">
                                                        <a href="javascript:;" class="btn btn-success btn-sm" id="add_input2">
                                                            <i class="fa fa-plus"></i> Adcionar
                                                        </a> 
                                                    </th>
                                                </tr>
                                            </thead>
                                            <tbody id="add_img2">
                                                <tr id="add2">
                                                    <td>
                                                        <div class="fileinput fileinput-new" data-provides="fileinput">
                                                            <div class="fileinput-preview thumbnail" data-trigger="fileinput" style="width: 120px; height: 100px;">
                                                            </div>
                                                            <div>
                                                                <span class="btn red btn-outline btn-file" style="display: none">
                                                                    <input type="file" name="..."> 
                                                                </span>
                                                            </div>
                                                        </div>
                                                    </td>
                                                    <td>
                                                        <input type="text" class="form-control" name="titulo_1[]">
                                                    </td>
                                                    <td>
                                                        <a href="javascript:;" class="btn btn-default btn-sm" id="remove_img2">
                                                            <i class="fa fa-times"></i> Remover</a>
                                                    </td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>   
            </div>
            <!-------------------TABs
            <div class="tab-pane fade" id="tab_1_2">
                <div class="portlet-body">
                    <form class="form-horizontal j_categoria" name="formCat" role="form" method="POST" action="" enctype="multipart/form-data">
                        <div class="form-body">
                            <div class="form-group">
                                <label class="col-md-2 control-label">Modelo
                                    <span class="required">*</span>
                                </label>
                                <div class="col-md-10">
                                    <input type="text" class="form-control" name="produto" value="" placeholder="Produto"> 
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-md-2 control-label">Quantidade
                                </label>
                                <div class="col-md-10">
                                    <input type="text" class="form-control" name="" placeholder="Meta título"> 
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-md-2 control-label">Mínimo por venda
                                </label>
                                <div class="col-md-10">
                                    <input type="text" class="form-control" value="1" name="" placeholder="Meta título"> 
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-md-2 control-label">Reduzir estoque</label>
                                <div class="col-md-10">
                                    <select class="form-control" name="categoria_status">
                                        <option value="1">Sim</option>
                                        <option value="0">Não</option>
                                    </select>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-md-2 control-label">Se esgotado</label>
                                <div class="col-md-10">
                                    <select class="form-control" name="categoria_status">
                                        <option value="1">2-3 Dias</option>
                                        <option value="2">Em estoque</option>
                                        <option value="3">Fora de estoque</option>
                                        <option value="4">Pedido antecipado</option>
                                    </select>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-md-2 control-label">Dimensões (C x L x A) 
                                </label>
                                <div class="col-md-3">
                                    <input type="text" class="form-control" name="" placeholder="Comprimento"> 
                                </div>
                                <div class="col-md-3">
                                    <input type="text" class="form-control" name="" placeholder="Altura"> 
                                </div>
                                <div class="col-md-3">
                                    <input type="text" class="form-control" name="" placeholder="Largura"> 
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-md-2 control-label" for="form_control_1">Precisa de frete ?</label>
                                <div class="col-md-10">
                                    <div class="md-radio-inline">
                                        <div class="md-radio">
                                            <input type="radio" id="checkbox1_8" name="radio2" value="1" class="md-radiobtn">
                                            <label for="checkbox1_8">
                                                <span class="inc"></span>
                                                <span class="check"></span>
                                                <span class="box"></span> Sim </label>
                                        </div>
                                        <div class="md-radio">
                                            <input type="radio" id="checkbox1_9" name="radio2" value="2" class="md-radiobtn">
                                            <label for="checkbox1_9">
                                                <span class="inc"></span>
                                                <span class="check"></span>
                                                <span class="box"></span> Não </label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="control-label col-md-2">Disponivel a partir de </label>
                                <div class="col-md-3">
                                    <input class="form-control form-control-inline input-medium date-picker" size="16" type="text" value="">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-md-2 control-label">Peso
                                </label>
                                <div class="col-md-10">
                                    <input type="text" class="form-control" name="" placeholder="Peso"> 
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-md-2 control-label">Situação</label>
                                <div class="col-md-10">
                                    <select class="form-control" name="categoria_status">
                                        <option value="1">Habilitado</option>
                                        <option value="0">Desabilitado</option>
                                    </select>
                                </div>
                            </div>

                        </div>
                    </form>
                </div>   
            </div>
            <div class="tab-pane fade" id="tab_1_3">
                <div class="portlet-body">
                    <form class="form-horizontal j_categoria" name="formCat" role="form" method="POST" action="" enctype="multipart/form-data">
                        <div class="form-body">
                            <div class="form-group">
                                <label class="col-md-2 control-label">Marcas
                                </label>
                                <div class="col-md-10">
                                    <input type="text" class="form-control" name="produto" value="" placeholder="Marcas"> 
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-md-2 control-label">Departamento
                                </label>
                                <div class="col-md-10">
                                    <input type="text" class="form-control" name="" placeholder="Departamento"> 
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-md-2 control-label">Filtros
                                </label>
                                <div class="col-md-10">
                                    <input type="text" class="form-control" value="1" name="" placeholder="Filtros"> 
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-md-2 control-label">Produtos relacionados
                                </label>
                                <div class="col-md-10">
                                    <input type="text" class="form-control" name="" placeholder="Produtos relacionador"> 
                                </div>
                            </div>
                        </div>
                    </form>
                </div>   
            </div>
            <div class="tab-pane fade" id="tab_1_4">
                <div class="portlet-body">
                    <div class="tabbable-bordered">
                        <div class="tab-content">
                            <div class="tab-pane active" id="tab_images">
                                <div class="row">
                                    <div id="tab_images_uploader_filelist" class="col-md-6 col-sm-12"> </div>
                                </div>
                                <table class="table table-bordered table-hover">
                                    <thead>
                                        <tr role="row" class="heading">
                                            <th width="10%"> Tipo de cliente </th>
                                            <th width="10%"> Prioridade </th>
                                            <th width="10%"> Preço </th>
                                            <th width="10%"> Data inicial </th>
                                            <th width="10%"> Data final </th>
                                            <th width="10%">
                                                <a href="javascript:;" class="btn btn-success btn-sm" id="add_input">
                                                    <i class="fa fa-plus"></i> Adcionar
                                                </a> 
                                            </th>
                                        </tr>
                                    </thead>
                                    <tbody id="add_img">
                                        <tr id="add">
                                            <td>
                                                <select class="form-control" name="categoria_status">
                                                    <option value="1">Default</option>
                                                </select>
                                            </td>
                                            <td>
                                                <input type="text" class="form-control" name="" placeholder="Prioridade"> 
                                            </td>
                                            <td>
                                                <input type="text" class="form-control" name="" placeholder="Departamento"> 
                                            </td>
                                            <td>
                                                <input type="text" class="form-control" name="" placeholder="Data inicial"> 
                                            </td>
                                            <td>
                                                <input type="text" class="form-control" name="" placeholder="Data final"> 
                                            </td>
                                            <td>
                                                <a href="javascript:;" class="btn btn-default btn-sm" id="remove_img">
                                                    <i class="fa fa-times"></i> Remover</a>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="tab-pane fade" id="tab_1_5">
                <div class="portlet-body">
                    <div class="tabbable-bordered">
                        <div class="tab-content">
                            <div class="tab-pane active" id="tab_images">
                                <div class="row">
                                    <div id="tab_images_uploader_filelist" class="col-md-6 col-sm-12"> </div>
                                </div>
                                <table class="table table-bordered table-hover">
                                    <thead>
                                        <tr role="row" class="heading">
                                            <th> Imagem </th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td>
                                                <div class="fileinput fileinput-new" data-provides="fileinput">
                                                    <div class="fileinput-preview thumbnail" data-trigger="fileinput" style="width: 120px; height: 100px;">
                                                    </div>
                                                    <div>
                                                        <span class="btn red btn-outline btn-file" style="display: none">
                                                            <input type="file" name="..."> 
                                                        </span>
                                                    </div>
                                                </div>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="portlet-body">
                    <div class="tabbable-bordered">
                        <div class="tab-content">
                            <div class="tab-pane active" id="tab_images">
                                <div class="row">
                                    <div id="tab_images_uploader_filelist" class="col-md-6 col-sm-12"> </div>
                                </div>
                                <table class="table table-bordered table-hover">
                                    <thead>
                                        <tr role="row" class="heading">
                                            <th width="8%"> Imagem adcionais </th>
                                            <th width="25%"> Posição </th>
                                            <th width="10%">
                                                <a href="javascript:;" class="btn btn-success btn-sm" id="add_input2">
                                                    <i class="fa fa-plus"></i> Adcionar
                                                </a> 
                                            </th>
                                        </tr>
                                    </thead>
                                    <tbody id="add_img2">
                                        <tr id="add2">
                                            <td>
                                                <div class="fileinput fileinput-new" data-provides="fileinput">
                                                    <div class="fileinput-preview thumbnail" data-trigger="fileinput" style="width: 120px; height: 100px;">
                                                    </div>
                                                    <div>
                                                        <span class="btn red btn-outline btn-file" style="display: none">
                                                            <input type="file" name="..."> 
                                                        </span>
                                                    </div>
                                                </div>
                                            </td>
                                            <td>
                                                <input type="text" class="form-control" name="titulo_1[]">
                                            </td>
                                            <td>
                                                <a href="javascript:;" class="btn btn-default btn-sm" id="remove_img2">
                                                    <i class="fa fa-times"></i> Remover</a>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            -------------->
        </div>
    </div>
</div>

<script type="text/javascript" src="<?= INCLUDE_PATH; ?>/js/jquery.form.min.js"></script>
<script>
    $(function () {
        var img_new = $('#add_img');
        $(document).on('click', '#add_input', function () {
            $('<tr>' +
                    '<td>' +
                    '<input type="text" class="form-control" name="" placeholder="Ex. 1999.90"> ' +
                    '</td>' +
                    '<td>' +
                    '<input type="text" class="form-control" name="" placeholder="Data inicial">' +
                    '</td>' +
                    '<td>' +
                    '<input type="text" class="form-control" name="" placeholder="Data final">' +
                    '</td>' +
                    '<td>' +
                    '<a href="javascript:;" class="btn btn-default btn-sm" id="remove_img">' +
                    '<i class="fa fa-times"></i> Remover</a>' +
                    '</td>' +
                    '</tr>').appendTo(img_new);
            return false;
        });
        $(document).on('click', '#remove_img', function () {
            $(this).parents('tr').remove();
            return false;
        });
    });
    $(function () {
        var img_new = $('#add_img2');

        $(document).on('click', '#add_input2', function () {
            $('<tr>' +
                    '<td>' +
                    '<div class="fileinput fileinput-new" data-provides="fileinput">' +
                    '<div class="fileinput-preview thumbnail" data-trigger="fileinput" style="width: 120px; height: 100px;">' +
                    '</div>' +
                    '<div>' +
                    '<span class="btn red btn-outline btn-file" style="display: none">' +
                    '<input type="file" name="..."> ' +
                    '</span>' +
                    '</div>' +
                    '</div>' +
                    '</td>' +
                    '<td>' +
                    '<input type="text" class="form-control" name="titulo_1[]">' +
                    '</td>' +
                    '<td>' +
                    '<a href="javascript:;" class="btn btn-default btn-sm" id="remove_img2">' +
                    '<i class="fa fa-times"></i> Remover</a>' +
                    '</td>' +
                    '</tr>').appendTo(img_new);
            return false;
        });
        $(document).on('click', '#remove_img2', function () {
            $(this).parents('tr').remove();
            return false;
        });
    });
</script>