<section class="modal no-close" id="modalNovoEstabelecimento">
    <div class="inner-modal editar-dados">
        <div class="box">
            <div class="head-box sticky">
                <h3 class="title">Cadastrar estabelecimento</h3>
                <p class="">Preencha os campos abaixo para cadastrar um novo estabelecimento.</p>
                <div class="close" id="fechaModalNovoEtabelecimento">
                    <span class="material-icons-round">close</span>
                </div>
            </div>
            <form class="form" id="formNovoEstabelecimento" enctype="multipart/form-data" method="post">
                <p class="titulo mb-3">Dados de registro</p>
                <div class="fields">
                    <div class="row cols2">
                        <div class="input-content">
                            <input required type="text" name="cnpj" id="field_cnpj" class="input field-cnpj mask-cnpj icon-right">
                            <label for="field_cnpj">CNPJ</label>
                            <div class="icon right">
                                <div class="load" id="loadCnpj"></div>
                            </div>
                        </div>
                    </div>
                    <div class="row cols2">
                        <div class="input-content">
                            <input required type="text" name="razao_social" id="field_razao_social" class="input">
                            <label for="field_razao_social">Razão social</label>
                        </div>
                        <div class="input-content">
                            <input required type="text" name="nome_fantasia" id="field_nome_fantasia" class="input">
                            <label for="field_nome_fantasia">Nome fantasia</label>
                        </div>
                    </div>
                </div>
                <div class="divider light"></div>
                <p class="titulo mb-3">Endereço</p>
                <div class="fields">
                    <div class="row cols2">
                        <div class="input-content">
                            <input required type="text" name="cep" id="field_cep" class="input icon-right mask-cep field-cep">
                            <label for="field_cep">CEP</label>
                            <div class="icon right">
                                <div class="load" id="loadCep"></div>
                            </div>
                        </div>
                        <div class="input-content">
                            <input required type="text" name="logradouro" id="field_logradouro" class="input">
                            <label for="field_logradouro">Logradouro</label>
                        </div>
                    </div>
                    <div class="row cols2">
                        <div class="input-content">
                            <input required type="text" name="numero" id="field_numero" class="input">
                            <label for="field_numero">Número</label>
                        </div>
                        <div class="input-content">
                            <input type="text" name="complemento" id="field_complemento" class="input">
                            <label for="field_complemento">Complemento</label>
                        </div>
                        <div class="input-content">
                            <input required type="text" name="bairro" id="field_bairro" class="input">
                            <label for="field_bairro">Bairro</label>
                        </div>
                    </div>
                    <div class="row cols2">
                        <div class="input-content">
                            <input required type="text" name="cidade" id="field_cidade" class="input">
                            <label for="field_cidade">Cidade</label>
                        </div>
                        <div class="input-content">
                            <input required type="text" name="uf" id="field_uf" class="input">
                            <label for="field_uf">UF</label>
                        </div>
                    </div>
                </div>
                <div class="divider light"></div>
                <p class="titulo mb-3">Dados adicionais</p>
                <div class="fields">
                    <div class="row">
                        <div class="input-content">
                            <input required type="text" name="email" id="field_email" class="input field-email">
                            <label for="field_email">E-mail</label>
                        </div>
                    </div>
                    <div class="row cols2">
                        <div class="input-content">
                            <input type="text" name="site" id="field_site" class="input field-default">
                            <label for="field_site">Site</label>
                        </div>
                        <div class="input-content">
                            <input required type="text" name="chave" id="field_chave" class="input field-default">
                            <label for="field_chave">Chave</label>
                        </div>
                    </div>
                    <div class="card analise flex small border">
                        <div class="icone">
                            <span class="material-icons-round">info</span>
                        </div>
                        <div class="conteudo">
                            <p class="descricao">A chave é utilizada para identificar um estabelecimento no sistema.</p>
                        </div>
                    </div>
                </div>
                <div class="divider light"></div>
                <p class="titulo mb-3">Personalização da marca</p>
                <div class="fields">
                    <div class="row cols2">
                        <div class="input-content">
                            <input required type="text" name="cor_primaria" id="field_cor_primaria" class="input field-hexa mask-hexa">
                            <label for="field_cor_primaria">Cor primária</label>
                            <div class="color-preview"></div>
                        </div>
                        <div class="input-content">
                            <input required type="text" name="cor_secundaria" id="field_cor_secundaria" class="input field-hexa mask-hexa">
                            <label for="field_cor_secundaria">Cor secundária</label>
                            <div class="color-preview"></div>
                        </div>
                    </div>
                    <div class="row cols2">
                        <div class="upload-content">
                            <p class="mb-1">Logomarca</p>
                            <div class="flex column flex-upload">
                                <label for="field_logo" class="label-upload botao">
                                    <input hidden required type="file" name="logo" id="field_logo" accept="image/png">
                                    <div class="icon"><span class="material-icons-round">upload</span></div>
                                    <div class="text">Selecionar arquivo</div>
                                </label>
                                <div class="logo-preview">
                                    <div class="flex gap-sm">
                                        <div class="img">
                                            <img src="" alt="Logomarca">
                                        </div>
                                        <div class="path"></div>
                                    </div>
                                    <div class="botao icone delete red small">
                                        <div class="icon">
                                            <span class="material-icons-round">delete</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="upload-content">
                            <p class="mb-1">Ícone</p>
                            <div class="flex column flex-upload">
                                <label for="field_icone" class="label-upload botao">
                                    <input hidden required type="file" name="icone" id="field_icone" accept="image/png">
                                    <div class="icon"><span class="material-icons-round">upload</span></div>
                                    <div class="text">Selecionar arquivo</div>
                                </label>
                                <div class="logo-preview">
                                    <div class="flex gap-sm">
                                        <div class="img">
                                            <img src="" alt="Logomarca">
                                        </div>
                                        <div class="path"></div>
                                    </div>
                                    <div class="botao icone delete red small">
                                        <div class="icon">
                                            <span class="material-icons-round">delete</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="card analise flex small border">
                        <div class="icone">
                            <span class="material-icons-round">info</span>
                        </div>
                        <div class="conteudo">
                            <p class="descricao">As cores devem estar no formato hexadecimal. A logomarca e o ícone devem estar no formato PNG e ter menos de 2MB.</p>
                        </div>
                    </div>
                </div>
                <div class="row-botao sticky">
                    <button disabled type="submit" class="botao primary botao-submit" id="btnCadastraEstabelecimento">
                        <!-- <div class="icon"><span class="material-icons-round">check</span></div> -->
                        <span class="text">Cadastrar</span>
                        <span class="load" id="loadSubmit"></span>
                    </button>
                </div>
            </form>
        </div>
    </div>
</section>