@extends('layouts.app')
@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>
                        <span>Gerenciamento de Bots</span>
                    </li>
                </ul>
            </div>
            <h1 class="page-title nova-faixa"> Gerenciamento de Bots
            </h1>
            <h4>
                <small class="pull-right" style="margin-bottom: 1rem;">
                    <span class="ajuda" data-toggle="confirmation" data-popout="true" data-trigger="hover"
                        data-placement="left" data-original-title="" title="" id="ajuda">Ajuda <i
                            class="fa fa-question-circle" aria-hidden="true"></i></span>
                </small>
            </h4>
            <input type="hidden" id="selectedID">
            <div class="row mt-20">
                <div class="col-md-12 text-right">
                    <a type="" id="editModalFinalizebtn" class="btn btn-custom btn-primary blue" data-toggle="modal"
                        data-target="#addFlowModal">Adicionar novo</a>
                </div>
                <div class="col-md-12 mt-20">
                    <div class="portlet-body">
                        <div class="erros" style="display: none;">
                            <div class="alert alert-danger">
                                <ul>
                                </ul>
                            </div>
                        </div>
                        <div class="success" style="display: none;">
                            <div class="alert alert-success">
                                <ul>
                                </ul>
                            </div>
                        </div>
                        <div class="table-responsive" style="overflow: hidden;">
                            <div
                                style="width: 100%;justify-content: space-between;align-items: center;display: flex;background: #426a9e!important;padding: 10px 20px;color: #fff;">
                                <div class="col-4 caption">
                                    <i class="nova-faixa-icon icon-book-open"></i>Fluxos Chatbots
                                </div>
                                <div class="col"><input type="text" id="searchTable" placeholder="Pesquisar..."
                                        class="form-control"></div>
                            </div>
                            <table class="table table-striped table-bordered table-advance table-hover order-column display"
                                id="sample_1">
                                <thead>
                                    <tr class="left-bold">
                                        <th class="text-left" style="font-weight: 60!important;">
                                            <i class="icon-book-open" style="margin-right: 3px"></i>
                                            <span>Nome</span>
                                        </th>
                                        <th class="text-left" style="font-weight: 60!important;">
                                            <i class="fa fa-user" style="margin-right: 3px"></i>
                                            <span>Canal</span>
                                        </th>
                                        <th class="text-left" style="font-weight: 60!important;">
                                            <i class="fa fa-user" style="margin-right: 3px"></i>
                                            <span>Vínculo</span>
                                        </th>
                                        <th class="text-left" style="font-weight: 60!important;"><i class="fa fa-calendar"
                                                style="margin-right: 3px"></i>
                                            <span>Criação</span>
                                        </th>
                                        <th class="text-left" style="font-weight: 60!important;"><i class="fa fa-user"
                                                style="margin-right: 3px"></i><span>Status</span></th>
                                        <th class="text-left" style="font-weight: 60!important;"><i class="fa fa-cogs"
                                                style="margin-right: 3px"></i> <span>Ações</span></th>
                                    </tr>
                                </thead>
                                <tbody>

                                    @foreach ($bots as $bot)
                                        <tr id="linha_{{ $bot->id }}">
                                            <td id="nome_{{ $bot->id }}">{{ $bot->nome }}</td>
                                            <td id="canal_{{ $bot->id }}">{{ $bot->canal }}</td>
                                            @if($bot->canal == 3)
                                                <td id="vinculo_{{ $bot->id }}" data-id="{{ $bot->id_numero }}">
                                                    {{ $bot->numero }}
                                                </td>
                                            @else
                                                <td id="vinculo_{{ $bot->id }}" data-id="{{ $bot->fila }}">
                                                    {{ $bot->nomefila }}
                                                </td>
                                            @endif
                                            <td>{{ $bot->data }}</td>
                                            <td id="status_{{ $bot->id }}">{{ $bot->status }}</td>
                                            <td class="actions-column">
                                                <div class="btn-group">
                                                    <a class="editar_import" href="/fluxo_de_bot/{!! $bot->id !!}"
                                                        target="_blank" title="Visualizar Fluxo">
                                                        <i class="fa fa-eye" aria-hidden="true"></i>
                                                    </a>
                                                </div>
                                                <div class="btn-group">
                                                    <a class="editar_import"
                                                        onclick="editBot({!! $bot->id !!}, {!! $bot->canal !!})"
                                                        data-toggle="modal" data-target="#editFlowModal" title="Editar"> <i
                                                            class="fa fa-pencil-square-o" aria-hidden="true"></i>
                                                    </a>
                                                </div>
                                                <div class="btn-group">
                                                    <a data-toggle="modal" onclick="saveID({!! $bot->id !!})"
                                                        data-target="#openDeleteModal" class="excluir_import" title="Excluir">
                                                        <i class="fa fa-trash-o" aria-hidden="false"></i>
                                                    </a>
                                                </div>
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    @include('bot.gerenciamento.components.modals.add_flow_modal')
    @include('bot.gerenciamento.components.modals.edit_flow_modal')
    @include('bot.gerenciamento.components.modals.open_modal_delete')
    @push('scripts')
        <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.11.3/datatables.min.css" />
        <script src="{{ asset('global/plugins/datatables/datatables.min.js') }}" type="text/javascript"></script>
        <script src="{{ asset('global/plugins/datatables/plugins/bootstrap/datatables.bootstrap.js') }}"
            type="text/javascript"></script>
        <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="{{ asset('pages/scripts/bot/gerenciamento.js') }}" type="text/javascript"></script>
        <link href="{{ asset('global/plugins/bootstrap-multiselect-master/dist/css/bootstrap-multiselect.css') }}"
            rel="stylesheet" type="text/css" />
        <link href="{{ asset('pages/css/chatbot/style.css') }}" rel="stylesheet" type="text/css" />
        <link href="{{ asset('global/css/plugins.min.css') }}" rel="stylesheet" type="text/css" />
    @endpush
@endsection