<script src="assets/global/plugins/jquery.validate.min.js" type="text/javascript"></script>

<ul class="page-breadcrumb breadcrumb">
    <li>
        <span>Cliente</span>
        <i class="fa fa-circle"></i>
    </li>
    <li>
        <span>Novo Cliente</span>
    </li>
</ul>
<div class="portlet light">
    <div class="portlet-title">
        <div class="caption">
            <span class="caption-subject font-dark bold uppercase">Novo Cliente</span>
        </div>
        <div class="actions">
            <a href="painel.php?exe=cliente/lista" class="btn btn-xs default" alt="lista" title="lista"><i class="fa fa-chevron-left"></i> <span> Voltar</span></a>
        </div>
    </div>
    <div class="portlet-body">
        <form class="form-horizontal" id="formCad" name="UseForm" method="POST" action="" enctype="multipart/form-data">
            <div class="form-body">
                <div class="form-group ">
                    <label class="col-md-2 control-label" for="form_control_1">Nome
                        <span class="required">*</span>
                    </label>
                    <div class="col-md-10">
                        <input type="text" class="form-control" placeholder="" name="name" value="<?php if (isset($data['name'])) echo htmlspecialchars($data['name']); ?>">
                        <div class="form-control-focus"> </div>
                    </div>
                </div>
                <div class="form-group ">
                    <label class="col-md-2 control-label" for="form_control_1">URL
                        <span class="required">*</span>
                    </label>
                    <div class="col-md-10">
                        <input type="text" class="form-control" placeholder="" name="url" value="<?php if (isset($data['url'])) echo htmlspecialchars($data['url']); ?>">
                        <div class="form-control-focus"> </div>
                    </div>
                </div>
                <div class="row">
                    <label class="col-md-2 control-label">Imagens Principal
                    </label>
                    <div class=" col-md-10">
                        <table class="table table-bordered table-hover">
                            <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="image"> 
                                                </span>
                                            </div>
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <small><i>*Arquivo no formato JPG com o tamanho máximo de 500kb e com as dimensões 290x220</i></small>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            <div class="form-actions">
                <div class="row">
                    <div class="col-md-offset-2 col-md-10">  
                        <input type="hidden"name="action" value="create">
                            <!--<input type="submit" class="btn green" value="Cadastrar Categoria" name="SendPostForm" />-->
                        <button type="submit" name="SendPostForm" value="enviar" class="btn btn-warning"><i class="fa fa-save"></i> <span class="hidden-xs"> Cadastrar </span></button>
                    </div>
                </div>
            </div>
        </form>
        <hr>
    </div>   
</div>
<script>
    $(function () {
        // Ação de validação e cadastro do formulario de cliente
        $("#formCad").validate({
            //definir as regras
            rules: {
                name: {
                    required: true, minlength: 2
                }
            },
            //Definir as mensagens de erro para cada regra
            messages: {
                name: {
                    required: "O nome do cliente é obrigatório", minlength: "O nome precisar ter no mínimo 3 letras"
                }
            },
            submitHandler: function (form) {
                var dados = $(form).serialize();
                console.log(dados);
                $.ajax({
                    type: "POST",
                    url: "__jsc/ajax/cliente.php",
                    data: dados,
                    dataType: 'json',
                    success: function (data)
                    {
                        console.log(data);
                        if (data.error[1] == 'accept') {
                            console.log('sucesso')
                            document.location.href = 'painel.php?exe=cliente/lista&create=true';
                        } else {
                            $("<div class=\"trigger " + data.error[1] + "\">" + data.error[0] + "</div>").prependTo(".j_buscar");
                        }
                    }
                });

                return false;
            }
        });
    });
</script>