@extends('layouts.app')

@push('scripts')
    <script src="{{ asset('pages/scripts/omnimeta/linguagens.js') }}" type="text/javascript"></script>
    <script src="{{ asset('pages/scripts/omnimeta/formulario-cadastro-template.js') }}" type="text/javascript"></script>
    <script src="{{ asset('pages/scripts/omnimeta/upload-media.js') }}" type="text/javascript"></script>
    <script src="{{ asset('pages/scripts/omnimeta/salvar-template.js') }}" type="text/javascript"></script>
    <script src="{{ asset('pages/scripts/omnimeta/celular.js') }}" type="text/javascript"></script>
    <script src="{{ asset('pages/scripts/categoria/bootstrap-confirmation-index.js') }}" type="text/javascript"></script>
    <script src="{{ asset('global/plugins/bootstrap-multiselect-master/dist/js/bootstrap-multiselect.js') }}"type="text/javascript"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.4.1/font/bootstrap-icons.css">

    <script src="{{ asset('pages/scripts/funcoes/funcoes.js') }}" type="text/javascript"></script>
    <!-- Color pick -->
    <script src="{{ asset('pages/scripts/configuracao_atendimento/pickr.min.js') }}"></script>

    <!-- CSS -->
    <link href="{{ asset('pages/css/omnimeta/celular.css') }}" rel="stylesheet" type="text/css" />
    <link href="{{ asset('pages/css/omnimeta/formulario-cadastro-template.css') }}" rel="stylesheet" type="text/css" />
@endpush
@section('content')
    <div class="page-content-wrapper">
        <div class="page-content">
            <div class="page-bar">
                <ul class="page-breadcrumb">
                    <li>
                        <a href="{{ url('/home') }}">Home</a>
                        <i class="fa fa-circle"></i>
                    </li>
                    <li>
                        <a href="{{ url('/configuracao_atendimento') }}">Configurações do Atendimento</a>
                        <i class="fa fa-circle"></i>
                    </li>
                    <li>
                        <span>Cadastrar Template OmniMeta</span>
                    </li>
                </ul>
            </div>
            <h1 class="page-title nova-faixa"> Cadastrar Template OmniMeta
                <div class="pull-right">
                    <i class="nova-faixa-icon fas fa-file-code"></i>
                </div>
            </h1>
            <div id="loader" class="loader" style="display: none;">
                <div class="spinner"></div>
            </div>
            <div class="container-fluid container-formulario">
                <div class="col-md-8">
                    <form id="form_omnimeta_template" novalidate>
                        <div class="row row-formulario">
                            <div class="col-md-6">
                                <label class="col-form-label" for="categoria">Categoria</label>
                                <select class="form-control" id="categoria" name="categoria">
                                    <option value="utilidade">Utilidade</option>
                                    <option value="marketing">Marketing</option>
                                </select>
                            </div>
                            <div class="col-md-6">
                                <label class="col-form-label" for="nome">Nome</label>
                                <i class="bi bi-question-circle" title="Não é permitido nomes com acentos ou espaços"></i>
                                <input type="text" class="form-control required" id="nome" name="nome" required maxlength="512">
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6">
                                <label class="col-form-label" for="linguagem">Linguagem</label>
                                <select class="form-control" id="linguagem" name="linguagem"></select>
                            </div>
                            <div class="col-md-6">
                                <label class="col-form-label" for="telefone">Telefone</label>
                            <select class="btn bs-select select-telefone form-control input-md" name="telefone" id="telefone">
                                @foreach($numeros_whatsapp as $numero)
                                    <option value="{{$numero->numero}}">{{$numero->numero}} </option>
                                @endforeach
                            </select>
                            </div>
                        </div>
                        <hr>
                        <div class="row">
                            <label class="col-md-12 col-form-label" for="cabecalho">Configurações do cabeçalho
                                <i class="bi bi-question-circle" title="Extensões permitidas: Imagens: .jpeg, .png, .jpg - Documentos: .pdf, .doc, .docx, .txt - Vídeos: .mp4, .3gp"></i> 
                            </label>
                        </div>
                        <div class="row row-formulario">
                            <div class="col-md-6">
                                <select class="form-control" id="cabecalho" name="cabecalho">
                                    <option value="sem_cabecalho">Sem cabeçalho</option>
                                    <option value="com_cabecalho">Com cabeçalho</option>
                                </select>
                            </div>
                        </div>
                        <div class="row row-formulario" id="cabecalho_configuracoes" hidden>
                            <div class="col-md-6">
                                <select class="form-control" id="tipo_cabecalho" name="tipo_cabecalho">
                                    <option value="texto">Texto</option>
                                    <option value="imagem">Imagem</option>
                                    <option value="documento">Documento</option>
                                    <option value="video">Vídeo</option>
                                </select>
                            </div>
                        </div>
                        <div class="row row-formulario" id="campo_texto_cabecalho" hidden>
                            <div class="col-md-12">
                                <input type="text" class="form-control" id="texto_cabecalho" placeholder="Texto do cabeçalho" maxlength="60"></input>
                            </div>
                        </div>
                        <div id="variaveis_cabecalho" hidden></div>
                        <div id="campo_imagem_cabecalho" hidden>
                            <div class="row row-formulario">
                                <div class="col-md-12">
                                    <input type="file" id="imagem_cabecalho" class="form-control" accept="image/jpeg, image/png, image/webp">
                                </div>
                            </div>
                        </div>

                        <div id="campo_documento_cabecalho" hidden>
                            <div class="row row-formulario">
                                <div class="col-md-12">
                                    <input type="file" id="documento_cabecalho" class="form-control" accept="audio/aac, audio/amr, audio/mpeg, audio/mp4, audio/ogg, text/plain, application/vnd.ms-excel, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/msword, application/vnd.openxmlformats-officedocument.wordprocessingml.document, application/vnd.ms-powerpoint, application/vnd.openxmlformats-officedocument.presentationml.presentation, application/pdf, application/json, text/csv, application/xml, application/zip">
                                </div>
                            </div>
                        </div>

                        <div id="campo_video_cabecalho" hidden>
                            <div class="row row-formulario">
                                <div class="col-md-12">
                                    <input type="file" id="video_cabecalho" class="form-control" accept="video/3gp, video/mp4">
                                </div>
                            </div>
                        </div>
                        <hr>
                        <div class="row">
                            <label class="col-md-12 col-form-label" for="texto_mensagem">Corpo da mensagem
                                <i class="bi bi-question-circle" title="Variáveis são identificadas por: @{{variavel}}."></i>
                            </label>
                        </div>
                        <div class="row row-formulario">
                            <div class="col-md-12">
                                <textarea id="texto_mensagem" class="texto-mensagem form-control" name="texto_mensagem" rows="3" maxlength="1024"></textarea>
                            </div>
                        </div>
                        <div id="variaveis_mensagem_titulo" hidden>Variaveis da mensagem</div>
                        <div id="variaveis_mensagem" hidden></div>
                        <hr>
                        <div class="row">
                            <label class="col-md-12 col-form-label" for="botoes">Configurações de botões</label>
                        </div>
                        <div class="row row-formulario">
                            <div class="col-md-6">
                                <select class="form-control" id="botoes" name="botoes">
                                    <option value="sem_botoes">Sem botões</option>
                                    <option value="com_botoes">Com botões</option>
                                </select>
                            </div>
                        </div>
                        <div class="row row-formulario" id="botoes_campo" hidden>
                            <div class="col-md-6">
                                <label class="col-form-label" for="botoes_opcoes">Tipo de botão</label>
                                <select class="form-control" id="botoes_opcoes" name="botoes_opcoes">
                                    <option value="url">URL</option>
                                    <option value="telefone">Telefone</option>
                                    <option value="texto">Texto</option>
                                </select>
                                <button type="button" id="adicionar_botao" class="btn btn-primary btn-sm botoes">
                                    Adicionar botão
                                </button>
                            </div>
                        </div>
                        <div id="lista_botoes"></div>
                        <hr>
                        <div class="row">
                            <label class="col-md-12 col-form-label" for="rodape">Configurações do rodapé</label>
                        </div>
                        <div class="row row-formulario">
                            <div class="col-md-6">
                                <select class="form-control" id="rodape" name="rodape">
                                    <option value="sem_rodape">Sem rodapé</option>
                                    <option value="com_rodape">Com rodapé</option>
                                </select>
                            </div>
                        </div>
                        <div class="row row-formulario" id="rodape_campo" hidden>
                            <div class="col-md-12">
                                <input type="text" id="texto_rodape" class="form-control" name="texto_rodape" placeholder="Texto do rodapé"
                                    maxlength="60"></input>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="col-md-4 phone-div">
                    <div class="celular-front">
                        <div class="frame"></div>
                        <div class="antenas">
                            <div class="tt"></div>
                            <div class="tr"></div>
                            <div class="tl"></div>
                            <div class="bb"></div>
                            <div class="br"></div>
                            <div class="bl"></div>
                        </div>
                        <div class="teclas">
                            <div class="silent"></div>
                            <div class="volt"></div>
                            <div class="volb"></div>
                            <div class="lock"></div>
                        </div>
                        <div class="tela">
                            <div class="topo">
                                <div class="hora">13:00</div>
                                <div class="island">
                                    <div class="camera"></div>
                                </div>
                                <div class="bateria">
                                    <img src="/pages/img/omnimeta/bateria.png">
                                </div>
                            </div>
                            <div class="conversa-celular">
                                <div class="mensagem">
                                    <div class="txt">
                                        <p class="name">OmniPlus</p>
                                        <div id="mensagem_cabecalho"></div>
                                        <p class="message" id="mensagem_celular"></p>
                                        <div id="mensagem_rodape"></div>
                                        <p></p>
                                        <span class="timestamp">13:00 pm</span>
                                    </div>
                                    <div class="mensagem-arrow"></div>
                                </div>
                                <div id="botoes_celular" class="botoes-celular"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12 text-center">
                        <button type="button" id="btn_salvar" class="btn btn-success">Salvar</button>
                        <button type="button" class="btn btn-secondary voltar"
                            onclick="window.location.href='{{ url('/configuracao_atendimento') }}'">Voltar</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection