@extends('layouts.app')

@push('scripts')
    <script src="{{ asset('pages/scripts/omnimeta/linguagens.js') }}" type="text/javascript"></script>
    <script src="{{ asset('pages/scripts/omnimeta/formulario-edicao-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/editar-template.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>Editar Template OmniMeta</span>
                    </li>
                </ul>
            </div>
            <h1 class="page-title nova-faixa"> Editar 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>
                        <input type="hidden" id="id_template" name="id_template" value="{{ $template->id }}">
                        <input type="hidden" id="file_url" name="file_url" value="{{ $templateComponents['file_url'] }}">
                        <input type="hidden" id="botoes_valores" name="botoes_valores"
                            value="{{ $templateComponents['botoes_valores'] }}">
                        <div class="row row-formulario">
                            <div class="col-md-6">
                                <label class="col-form-label" for="categoria">Categoria</label>
                                @if ($template->status_template === 'APPROVED')
                                    <i class="bi bi-question-circle"
                                        title="A categoria de templates aprovados não pode ser trocada"></i>
                                @endif
                                <select class="form-control" id="categoria" name="categoria"
                                    {{ $template->status_template === 'APPROVED' ? 'disabled' : '' }}>
                                    <option value="utilidade"
                                        {{ $template->categoria_template === 'UTILITY' ? 'selected' : '' }}>Utilidade
                                    </option>
                                    <option value="marketing"
                                        {{ $template->categoria_template === 'MARKETING' ? 'selected' : '' }}>Marketing
                                    </option>
                                </select>
                            </div>
                            <div class="col-md-6">
                                <label class="col-form-label" for="nome">Nome</label>
                                <input type="text" class="form-control required" id="nome" name="nome"
                                    maxlength="512" value="{{ $template->nome }}" disabled>
                            </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" disabled></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 }}"
                                            {{ '55' . $numero->numero == $template->numero ? 'selected' : '' }}>
                                            {{ $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 - 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"
                                        {{ $templateComponents['cabecalho'] === 'com_cabecalho' ? 'selected' : '' }}>Com
                                        cabeçalho</option>
                                </select>
                            </div>
                        </div>
                        <div class="row row-formulario" id="cabecalho_configuracoes"
                            {{ $templateComponents['cabecalho'] === 'sem_cabecalho' ? 'hidden' : '' }}>
                            <div class="col-md-6">
                                <select class="form-control" id="tipo_cabecalho" name="tipo_cabecalho">
                                    <option value="texto"
                                        {{ $templateComponents['tipo_cabecalho'] === 'TEXT' ? 'selected' : '' }}>Texto
                                    </option>
                                    <option value="imagem"
                                        {{ $templateComponents['tipo_cabecalho'] === 'IMAGE' ? 'selected' : '' }}>Imagem
                                    </option>
                                    <option value="documento"
                                        {{ $templateComponents['tipo_cabecalho'] === 'DOCUMENT' ? 'selected' : '' }}>
                                        Documento</option>
                                    <option value="video"
                                        {{ $templateComponents['tipo_cabecalho'] === 'VIDEO' ? 'selected' : '' }}>Vídeo
                                    </option>
                                </select>
                            </div>
                        </div>
                        <div class="row row-formulario" id="campo_texto_cabecalho"
                            {{ $templateComponents['tipo_cabecalho'] === 'TEXT' ? '' : '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"
                            {{ $templateComponents['tipo_cabecalho'] === 'IMAGE' ? '' : '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"
                            {{ $templateComponents['tipo_cabecalho'] === 'DOCUMENT' ? '' : '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"
                            {{ $templateComponents['tipo_cabecalho'] === 'VIDEO' ? '' : '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">{{ $templateComponents['corpo_texto'] }}</textarea>
                            </div>
                        </div>
                        <div id="variaveis_mensagem_titulo" hidden>Variaveis da mensagem</div>
                        <div id="variaveis_mensagem"></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"
                                        {{ $templateComponents['botoes'] === 'com_botoes' ? 'selected' : '' }}>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"
                                        {{ $templateComponents['rodape'] === 'com_rodape' ? 'selected' : '' }}>Com rodapé
                                    </option>
                                </select>
                            </div>
                        </div>
                        <div class="row row-formulario" id="rodape_campo"
                            {{ $templateComponents['rodape'] === 'com_rodape' ? '' : 'hidden' }}>
                            <div class="col-md-12">
                                <input type="text" id="texto_rodape" class="form-control" name="texto_rodape"
                                    placeholder="Texto do rodapé" maxlength="60"
                                    value="{{ $templateComponents['rodape_texto'] }}"></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>
                                        {{-- <div id="botoes_celular" class="botoes-celular"></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">
                        @if (
                            ($template->status_template == 'APPROVED' || $template->status_template == 'REJECTED') &&
                                ($hoursDifference === null || $hoursDifference > 24))
                            <button type="button" id="btn_editar" class="btn btn-success">Editar</button>
                        @else
                            <button type="button" id="btn_editar" class="btn btn-success" style="cursor: not-allowed;"
                                disabled
                                title="O template não pode ser editado pois foi modificado há menos de 24 horas ou está pendente">Editar</button>
                        @endif
                        <button type="button" class="btn btn-secondary voltar"
                            onclick="window.location.href='{{ url('/configuracao_atendimento') }}'">Voltar</button>
                    </div>
                </div>
            </div>
            <div class="row mt-2">
                <div class="col-md-12 text-center mt-4">
                    <div role="alert">
                        <p><strong>Informações importantes:</strong></p>
                        <ul style="list-style-position: inside;">
                            <li>É possível editar somente os modelos aprovados ou rejeitados.</li>
                            <li>Não é possível editar a categoria de um modelo aprovado.</li>
                            <li>Os modelos aprovados podem ser editados até 10 vezes dentro de 30 dias ou uma vez dentro de 24 horas.</li>
                            <li>A aprovação de edição de um template pode demorar até 24 horas.</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script src="{{ asset('pages/scripts/omnimeta/celular.js') }}" type="text/javascript"></script>
@endpush