@extends('layouts.chatbot.app')

@section('content')

    <script>
        let json = JSON.parse({!!json_encode($json) !!});
        let dataFlux = json;
    </script>

    <input type="hidden" id="flowchart_data">

    <div class="main">
        <div id="chart_container" class="col-md-12">
            <!-- Fluxo e área de trabalho -->
            <div class="flowchart-example-container" id="flowchartworkspace">
                <div id="titulo-fluxo"
                    style="font-size: 20px;padding: 30px 0;font-weight: 900;position: fixed;z-index: 9;width: 100%; display: flex; justify-content: space-between;">
                    <div style="padding: 0 30px;">
                        {{ $fluxo[0]->nome }} -
                        <span id="canal-fluxo"
                            style="background: {{ $fluxo[0]->canal == 3 ? '#25D366' : '#3598dc' }};color: #fff;padding: 5px 10px;border-radius: 50px !important;">
                            {{ $fluxo[0]->canal == 3 ? 'WhatsApp' : 'Webchat' }}
                        </span>
                    </div>
                </div>
                <!-- O conteúdo do fluxo vai aqui -->
            </div>
        </div>
    </div>

    <div class="fixed-buttons">
        <button type="button" class="btn btn-custon btn-primary" data-toggle="modal" data-target="#modalTempo"
            title="Configurar tempo de sessão de fluxo">
            <i class="fa fa-clock"></i> Tempo Fluxo
        </button>

        <button type="button" class="btn btn-custon btn-primary" data-toggle="modal" data-target="#variaveisGlobais"
            title="Configurar variaveis globais">
            <i class="fa fa-globe"></i> Variáveis Globais
        </button>
    </div>

    <div class="action-button" data-html2canvas-ignore="true">
        <div class="col-md-12 text-center">
            <a type="" id="saveData" class="btn btn-custom btn-primary editModal" onclick="saveData()">Salvar</a>
            <a type="" id="saveData" class="btn btn-custom btn-primary editModal"
                onclick="validateStatus({{ $dataBot }})">Publicar</a>
            <div id="dropdown-options" class="dropright dropdown-options">
                <button type="button" id="optionsBtn" class="btn dropdown-toggle main-menu-btn" data-toggle="dropdown"
                    aria-haspopup="true" aria-expanded="false">
                    <i class="fa fa-ellipsis-v" style="cursor: pointer; font-size: 2.5rem;"></i>
                </button>

                <div class="dropdown-menu dropdown-options-child">
                    <a type="button" class="dropdown-item btn-dropdown btn-dropdown-primary" onclick="openJson()">Editar
                        JSON</a>
                    <a type="button" class="dropdown-item btn-dropdown btn-dropdown-primary"
                        onclick="generatePDF('{{ $fluxo[0]->nome }}')">Salvar como imagem</a>
                    <a type="" class="dropdown-item btn-dropdown btn-dropdown-danger" href="#"
                        onclick="confirmReset()">Reiniciar fluxo</a>
                </div>
            </div>
        </div>
    </div>

    <div class="floating-buttons">
        <button id="scrollToTop" class="btn btn-primary" title="Ir para o topo">
            ↑
        </button>
    </div>

    @include('bot.flow.components.modals.open_modal_delete')
    @include('bot.flow.components.modals.open_modal_success')
    @include('bot.flow.components.modals.open_modal_elements')
    @include('bot.flow.components.modals.reset_flow_modal')
    @include('bot.flow.components.elements.config_tempo')
    @include('bot.flow.components.elements.config_variaveis_globais')

@endsection

@push('scripts')

    <!-- SCRIPTS INALTERADOS -->
    <script src="{{ asset('global/plugins/bootstrap-multiselect-master/dist/js/bootstrap-multiselect.js') }}"
        type="text/javascript"></script>
    <script src="{{ asset('global/plugins/bootstrap-select/js/bootstrap-select.min.js') }}" type="text/javascript"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
    <script type="text/javascript" src="{{ asset('pages/scripts/emojionearea.js')}}"></script>
    <link rel="stylesheet" type="text/css" href="{{ asset('pages/css/emojionearea.min.css')}}">

    <!-- SCRIPTS MANIPULADOS -->
    <script src="{{ asset('/pages/scripts/bot/flowchart/jquery.flowchart.js') }}"></script>
    <script src="{{ asset('/pages/scripts/bot/script.js') }}"></script>

    <!-- Elements -->
    <script src="{{ asset('/pages/scripts/bot/components/treeElement.js') }}"></script>
    <script src="{{ asset('/pages/scripts/bot/components/faqElement.js') }}"></script>
    <script src="{{ asset('/pages/scripts/bot/components/messageElement.js') }}"></script>
    <script src="{{ asset('/pages/scripts/bot/components/finalizeElement.js') }}"></script>
    <script src="{{ asset('/pages/scripts/bot/components/awaitElement.js') }}"></script>
    <script src="{{ asset('/pages/scripts/bot/components/transferElement.js') }}"></script>
    <script src="{{ asset('/pages/scripts/bot/components/timerElement.js') }}"></script>
    <script src="{{ asset('/pages/scripts/bot/components/apiElement.js') }}"></script>
    <script src="{{ asset('/pages/scripts/bot/components/decisionElement.js') }}"></script>
    <script src="{{ asset('/pages/scripts/bot/components/botaosimplesElement.js') }}"></script>
    <script src="{{ asset('/pages/scripts/bot/components/fileSendingElement.js') }}"></script>
    <script src="{{ asset('/pages/scripts/bot/components/satisfactionElement.js') }}"></script>
    <script src="{{ asset('/pages/scripts/bot/components/emailElement.js') }}"></script>
    <script src="{{ asset('/pages/scripts/bot/components/tokenElement.js') }}"></script>

    <!-- JSON editor -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/jsoneditor/10.1.3/jsoneditor.min.css" rel="stylesheet"
        type="text/css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jsoneditor/10.1.3/jsoneditor.min.js"></script>

    <!-- HTML to PDF -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"></script>

    <!-- SCRIPTS PARA ESTILIZAÇÃO -->
    <script src="{{ asset('global/scripts/bootstrap-sweetalert/sweetalert2.all.min.js') }}"></script>
    <link href="{{ asset('global/plugins/bootstrap-multiselect-master/dist/css/bootstrap-multiselect.css') }}"
        rel="stylesheet" type="text/css" />
    <link rel="stylesheet" href="{{ asset('global/scripts/bootstrap-sweetalert/sweetalert2.min.css') }}">
    <link href="{{ asset('global/plugins/bootstrap-tagsinput/bootstrap-tagsinput.css')}}" rel="stylesheet"
        type="text/css" />
    <script src="{{ asset('global/plugins/bootstrap-tagsinput/bootstrap-tagsinput.js') }}" type="text/javascript"></script>

    <link href="{{ asset('css/bot/flowchart.css') }}" rel="stylesheet" type="text/css">
    <script src="{{ asset('js/bot/flowchart.js') }}" type="text/javascript"></script>

@endpush