{% extends "theme/base.twig" %}
{% set area = 'cpainel'%}
{% set type = 'chatbotOption'%}
{% block CSSfiles %}
    {{ parent() }}
    <!--suppress SpellCheckingInspection, SpellCheckingInspection, HtmlUnknownTarget -->
    <link rel="stylesheet" href="/assets/plugins/multiselect/multiselect.css?v={{ config.versionId }}">
    <link rel="stylesheet" href="/assets/plugins/daterangepicker/daterangepicker.css?v={{ config.versionId }}">
    <link rel="stylesheet" href="/assets/plugins/datatables/datatables.responsive.css?v={{ config.versionId }}">
    <link rel="stylesheet" href="/assets/css/local/chatbotOption.css?v={{ config.versionId }}">
    <!-- jQuery -->

{% endblock %}

{% block JSfiles %}
    {{ parent() }}
    <script>
        let parameters = {{ parameters|json_encode|raw }};
    </script>

    <script src="/assets/plugins/datatables/datatables.js?v={{ config.versionId }}"></script>
    <script src="/assets/plugins/datatables/datatables.bootstrap.js?v={{ config.versionId }}"></script>
    <script src="/assets/plugins/datatables/datatables.buttons.js?v={{ config.versionId }}"></script>
    <script src="/assets/plugins/datatables/datatables.buttons.html5.js?v={{ config.versionId }}"></script>
    <script src="/assets/plugins/datatables/datatables.jszip.js?v={{ config.versionId }}"></script>
    <script src="/assets/plugins/datatables/datatables.responsive.js?v={{ config.versionId }}"></script>
    <script src="/assets/plugins/daterangepicker/daterangepicker.js?v={{ config.versionId }}"></script>
    <script src="/assets/plugins/multiselect/multiselect.js?v={{ config.versionId }}"></script>
    <script src="/assets/js/local/chatbotOption.js?v={{ config.versionId }}"></script>
    
{% endblock %}
{% block content %}
    <div class="row px-md-2 px-2 m-0 w-100 pt-2 mb-2 after-header">
        <div class="col-12 col-xl-12 col-xxl-12 d-flex align-items-stretch">
            <div class="container-fluid px-0">
                <div class="row align-items-center">
                    <div class="col">
                        <h1 class="mb-0 title-after-header py-2">
                            ChatBot Opções >> Formulário

                        </h1>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <div class="row px-md-2 px-2 m-0 w-100 pt-2 mb-2 after-header">
        <div class="col-12 col-xl-12 col-xxl-12 d-flex align-items-stretch">
            <div class="card widthfull  shadow-dark-80 border border-gray-50 mb-3 mb-xl-5">
                <div class="card-body p-3 d-flex flex-column">
                    <div class="row w-100">
                        <div class="col-6 col-md-6 col-lg-6 col-xl-6 col-xxl-6">
                        {% if session.session_user.id == 1 %}
                            <div class="mb-md-2 pb-2">
                                <label class="form-label form-label-lg" for="role">Selecione á Conta 
                                    <star>*Visivel para administrador*</star>
                                </label>
                                <select name="id_conta" class="form-control form-control-xl pesq_conta" id="id_conta" tabindex="6">
                                    {% for itens in conta %}
                                        
                                        <option value="{{ itens.id }}" {{ selected }}  {{ disabled }}>{{ itens.razao_social }}</option>

                                    {% endfor %}
                                
                                </select>
                            </div>
                        {% else %}
                            <input type="hidden" id="id_conta" name="id_conta">
                        {% endif %}
                        
                        </div>
                    </div>
                    <div class="row w-100">
                        <div class="col-12 col-md-12 col-lg-12 col-xl-12 col-xxl-12 filters">
                            <h5>Configuração ChatBot</h5>
                            <div class="col-12 col-xl-12 col-xxl-12 d-flex align-items-stretch">
                                    <div class="container-fluid px-0">
                                        <div class="row align-items-center">
                                            <div class="col">
                                                <h1 class="mb-0 title-after-header py-2"></h1>
                                            </div>
                                            <div class="col-auto d-flex align-items-center my-2 my-sm-0">
                                                <button class="btn btn-lg btn-warning btn-xs btn-modal-chatbotconfig">
                                                    <span>Adicionar</span>
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            <table id="datatableConfig" class="table nowrap table-no-bordered table-hover">
                                <thead>
                                <tr>
                                    <th>#</th>
                                    <th>Tipo Chatbot</th>
                                    <th>Número</th>
                                    <th>Webhook</th>
                                    <th class="text-center">Criado em</th>
                                    <th class="text-center">Ações</th>
                                </tr>
                                </thead>
                                <tbody>
                                </tbody>
                            </table>
                        </div>
                        <div class="col-12 col-xl-12 col-xxl-12 d-flex align-items-stretch">
                            <div class="card widthfull  shadow-dark-80 border border-gray-50 mb-3 mb-xl-5">
                                <div class="card-body p-3 d-flex flex-column">
                                    <div class="row w-100">
                                    <input type="hidden" id="id_saudacao" name="id_saudacao" value="{{saudacao.id}}">
                                        <div class="col-12 col-md-12 col-lg-12 col-xl-12 col-xxl-12 filters">
                                            <h5>Saudação Inícial</h5>
                                            <textarea id="saudacao_inicial" name="saudacao_inicial" class="styled-textarea sm" placeholder="Digite sua Saudacação Inicial...">{{saudacao.descricao}}</textarea>
                                        </div>
                                    </div>
                                    <div class="row w-100">
                                        <button type="button" class="btn btn-primary btn-mt mt-auto btn-persist-saudacao">
                                            Atualizar Saudação
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row px-md-2 px-2 m-0 w-100 pt-2 mb-2 after-header">
        <div class="col-12 col-xl-12 col-xxl-12 ">
            <div class="">
                <div class="row widthfull">
                    <div class="col-6 col-xl-6 col-xxl-6 d-flex align-items-stretch" data-level="1" data-id-ref="0">
                        <div class="card basic widthfull  rounded-12 shadow-dark-80 border border-gray-50 mb-2">
                            <div class="card-body px-3 py-1 d-flex flex-column">

                                <h4>Nivel 1</h4>

                                <div class="mb-4 mt-0 d-flex gap-1">
                                    <input type="text" placeholder="Título *24 caracter" maxlength="24" class="form-control form-control-sm" name="titulo" data-id-ref="0">
                                    <input type="text" placeholder="Descrição *72 caracter" maxlength="72" class="form-control form-control-sm" name="descricao">
                                    
                                    <button class="btn btn-xs btn-success btn-persist ml-2">Salvar</button>
                                </div>
                                <input id="fileupload"  type="file" name="FilesPic" multiple >
                                <br>
                                <table class="table nowrap table-chatbotOption">
                                    <thead>
                                    <tr>
                                        <th>Titulo</th>
                                        <th>Descrição</th>
                                        <th>Imagem</th>
                                        <th class="text-center">Ações</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>

                    <div class="col-6 col-xl-6 col-xxl-6 d-flex align-items-stretch disable-div" data-level="2"
                        data-id-ref="-1">
                        <div class="card widthfull  rounded-12 shadow-dark-80 border border-gray-50 mb-3 mb-xl-5">

                            <div class="card-body px-3 py-1 d-flex flex-column">

                                <h4>Nivel 2</h4>

                                <div class="mb-4 mt-0 d-flex">
                                    <input type="text" placeholder="Título *24 caracter" maxlength="24" class="form-control form-control-sm" name="titulo" data-id-ref="0">
                                    <input type="text" placeholder="Descrição *72 caracter" maxlength="72" class="form-control form-control-sm" name="descricao">
                                    <button class="btn btn-xs btn-success btn-persist ml-2">Salvar</button>
                                </div>

                                <table class="table table-striped table-no-bordered table-hover nowrap table-chatbotOption">
                                    <thead>
                                    <tr>
                                        <th>Titulo</th>
                                        <th>Descrição</th>
                                        <th class="text-center">Ações</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>

                    <div class="col-6 col-xl-6 col-xxl-6 d-flex align-items-stretch disable-div" data-level="3"
                        data-id-ref="-1">
                        <div class="card widthfull  rounded-12 shadow-dark-80 border border-gray-50 mb-3 mb-xl-5">

                            <div class="card-body px-3 py-1 d-flex flex-column">

                                <h4>Nivel 3</h4>

                                <div class="mb-4 mt-0 d-flex">
                                    <input type="text" placeholder="Título *24 caracter" maxlength="24" class="form-control form-control-sm" name="titulo" data-id-ref="0">
                                    <input type="text" placeholder="Descrição *72 caracter" maxlength="72" class="form-control form-control-sm" name="descricao">
                                    <button class="btn btn-xs btn-success btn-persist ml-2">Salvar</button>
                                </div>

                                <table class="table table-striped table-no-bordered table-hover nowrap table-chatbotOption">
                                    <thead>
                                    <tr>
                                        <th>Titulo</th>
                                        <th>Descrição</th>
                                        <th class="text-center">Ações</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>

                    <div class="col-6 col-xl-6 col-xxl-6 d-flex align-items-stretch disable-div" data-level="4"
                        data-id-ref="-1">
                        <div class="card widthfull  rounded-12 shadow-dark-80 border border-gray-50 mb-3 mb-xl-5">

                            <div class="card-body px-3 py-1 d-flex flex-column">

                                <h4>Nível 4</h4>

                                <div class="mb-4 mt-0 d-flex">
                                    <input type="text" placeholder="Título *24 caracter" maxlength="24" class="form-control form-control-sm" name="titulo" data-id-ref="0">
                                    <input type="text" placeholder="Descrição *72 caracter" maxlength="72" class="form-control form-control-sm" name="descricao">
                                    <button class="btn btn-xs btn-success btn-persist ml-2">Salvar</button>
                                </div>

                                <table class="table table-striped table-no-bordered table-hover nowrap table-chatbotOption">
                                    <thead>
                                    <tr>
                                        <th>Titulo</th>
                                        <th>Descrição</th>
                                        <th class="text-center">Ações</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                    <div class="col-6 col-xl-6 col-xxl-6 d-flex align-items-stretch disable-div" data-level="5"
                        data-id-ref="-1">
                        <div class="card widthfull  rounded-12 shadow-dark-80 border border-gray-50 mb-3 mb-xl-5">

                            <div class="card-body px-3 py-1 d-flex flex-column">

                                <h4>Nível 5</h4>

                                <div class="mb-4 mt-0 d-flex">
                                    <input type="text" placeholder="Título *24 caracter" maxlength="24" class="form-control form-control-sm" name="titulo" data-id-ref="0">
                                    <input type="text" placeholder="Descrição *72 caracter" maxlength="72" class="form-control form-control-sm" name="descricao">
                                    <button class="btn btn-xs btn-success btn-persist ml-2">Salvar</button>
                                </div>

                                <table class="table table-striped table-no-bordered table-hover nowrap table-chatbotOption">
                                    <thead>
                                    <tr>
                                        <th>Titulo</th>
                                        <th>Descrição</th>
                                        <th class="text-center">Ações</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {% include '/chatbotOption/modal/formConfig.twig' %}
{% endblock %}