<section class="modal no-close" id="modalDadosEstabelecimento">
    <div class="inner-modal ativo editar-dados">
        <div class="box">
            <div class="head-box sticky">
                <h3 class="title">Dados do estabelecimento</h3>
                <p class="">Consulte os detalhes do estabelecimento selecionado.</p>
                <div class="tags mt-1">
                    <div class="tag" id="tagStatus">Estabelecimento ativo</div>
                    <div class="tag" id="tagNumeroUsuarios"><div id="numeroUsuarios">0</div> usuários</div>
                </div>
                <div class="close" id="fechaModalDadosEtabelecimento">
                    <span class="material-icons-round">close</span>
                </div>
            </div>
            <div class="load load-detalhes center"></div>
            <form class="form" id="formDadosEstabelecimento" 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_dados" class="input field-cnpj mask-cnpj icon-right">
                            <label for="field_cnpj_dados">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_dados" class="input">
                            <label for="field_razao_social_dados">Razão social</label>
                        </div>
                        <div class="input-content">
                            <input required type="text" name="nome_fantasia" id="field_nome_fantasia_dados" class="input">
                            <label for="field_nome_fantasia_dados">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_dados" class="input icon-right mask-cep field-cep">
                            <label for="field_cep_dados">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_dados" class="input">
                            <label for="field_logradouro_dados">Logradouro</label>
                        </div>
                    </div>
                    <div class="row cols2">
                        <div class="input-content">
                            <input required type="text" name="numero" id="field_numero_dados" class="input">
                            <label for="field_numero_dados">Número</label>
                        </div>
                        <div class="input-content">
                            <input type="text" name="complemento" id="field_complemento_dados" class="input field-default">
                            <label for="field_complemento_dados">Complemento</label>
                        </div>
                        <div class="input-content">
                            <input required type="text" name="bairro" id="field_bairro_dados" class="input">
                            <label for="field_bairro_dados">Bairro</label>
                        </div>
                    </div>
                    <div class="row cols2">
                        <div class="input-content">
                            <input required type="text" name="cidade" id="field_cidade_dados" class="input">
                            <label for="field_cidade_dados">Cidade</label>
                        </div>
                        <div class="input-content">
                            <input required type="text" name="uf" id="field_uf_dados" class="input">
                            <label for="field_uf_dados">UF</label>
                        </div>
                    </div>
                </div>
                <div class="divider light"></div>
                <p class="titulo mb-3">Dados adicionais</p>
                <div class="fields">
                    <div class="row cols2">
                        <div class="input-content">
                            <input type="text" name="site" id="field_site_dados" class="input field-default">
                            <label for="field_site_dados">Site</label>
                        </div>
                    </div>
                    <div class="row cols2">
                        <div class="input-content">
                            <input required type="text" name="email" id="field_email_dados" class="input field-email">
                            <label for="field_email_dados">E-mail</label>
                        </div>
                    </div>
                    <div class="row cols2">
                        <div class="input-content">
                            <input required type="text" name="chave" id="field_chave_dados" class="input field-default">
                            <label for="field_chave_dados">Chave</label>
                        </div>
                        <div class="input-content">
                            <input readonly required type="text" name="data_cadastro" id="field_data_cadastro_dados" class="input field-default">
                            <label for="field_data_cadastro_dados">Data de cadastro</label>
                        </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_dados" class="input field-hexa mask-hexa">
                            <label for="field_cor_primaria_dados">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_dados" class="input field-hexa mask-hexa">
                            <label for="field_cor_secundaria_dados">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_dados" class="label-upload botao">
                                    <input hidden type="file" name="logo" id="field_logo_dados" 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_dados" class="label-upload botao">
                                    <input hidden type="file" name="icone" id="field_icone_dados" 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">
                    <div class="btns gap-small">
                        <button disabled type="submit" class="botao primary botao-submit" id="btnAtualizaEstabelecimento" data-id="">
                            <span class="text">Atualizar dados</span>
                            <span class="load" id="loadSubmit"></span>
                        </button>
                        <div class="botao icone secondary abre-options" id="abreOpcoes">
                            <span class="material-icons-round">more_vert</span>
                        </div>
                        <div class="lista options shadow" id="optionsEstabelecimento">
                            <ul class="linhas">
                                <li class="altera-status" data-id="">
                                    <p class="name">Alterar status</p>
                                </li>
                                <li class="enviar-email" data-id="">
                                    <p class="name">Enviar e-mail</p>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
</section>