@extends('layouts.app')

@section('content')
    <script>
        window.prompts = <?= json_encode($prompts) ?>;
    </script>
    <div class="content-wrapper" id="inputPanel" x-data="initSettings()">
        <div class="content">
            <div class="panel panel-flat">
                <div class="panel-heading">
                    <h5 class="panel-title">PROMPTs</h5>
                    <div class="heading-elements">
                        <ul class="icons-list">
                            <li><a data-action="collapse" class="" id="settingsToggle"></a></li>
                        </ul>
                    </div>
                </div>
                <div class="panel-body" >
                    <div class="dataTable_pagination">
                        {{ view('vendor.pagination.alpine') }}
                        <div class="summary">
                            <strong>Всего записей:</strong> <span x-text="prompts.total">
                        </div>
                    </div>
                    <table class="table dataTable">
                        <thead>
                        <tr>
                            <th>#</th>
                            <th>Действия</th>
                            <th>Создан</th>
                            <th>Тип</th>
                            <th>Модель</th>
                            <th>Prompt</th>
                            <th>JSON</th>
                            <th>Активный</th>
                        </tr>
                        </thead>
                            <tbody>
                                <template x-for="promptObject in Object.values(prompts.data)">
                                    <tr :class="{'danger': !promptObject.is_active}">
                                        <td class="long"><div class="" x-text="promptObject.id"></div></td>
                                        <td class="long">
                                            <a :href="'/edit/prompt/' + promptObject.id">Редактировать</a>
                                            <br/>

                                            <div x-show="!promptObject.is_active">
                                                <a href="#" @click="activatePrompt(promptObject.id, 1)">Активировать</a>
                                                <br/>
                                                <a href="#" @click="if (confirm('Точно удалить ПРОМТ #'+promptObject.id)) { deletePrompt(promptObject.id); }">Удалить</a>
                                            </div>
                                            <div x-show="promptObject.is_active">
                                                <a href="#" @click="activatePrompt(promptObject.id, 0)">Деактивировать</a>
                                                <br/>
                                                <a href="#" @click="duplicatePrompt(promptObject.id)">Дублировать</a>
                                            </div>

                                        </td>
                                        <td class="long"><div class="" x-text="moment(promptObject.created_at).format('DD.MM.YYYY')"></div></td>
                                        <td class="long"><div class="" x-text="promptObject.type"></div></td>
                                        <td class="long"><div class="" x-text="promptObject.model"></div></td>
                                        <td class="long"><textarea :id="promptObject.id+'-prompt'" class="col-lg-12" rows="10" cols="20" name="prompt" x-text="promptObject.prompt"></textarea></td>
                                        <td class="long">
                                            <div class="editor" :data-id="promptObject.id" data-name="json" style="min-width: 350px; overflow: scroll" :data-value='promptObject.json'></div>
                                            <textarea style="display: none" :id="promptObject.id+'-json'" name="json" x-text="promptObject.json"></textarea>
                                        </td>
                                        <td class="long">
                                            <i class="icon-x text-danger" x-show="!promptObject.is_active"></i>
                                            <i class="icon-check text-success" x-show="promptObject.is_active"></i>
                                        </td>

                                    </tr>
                                </template>
                            </tbody>
                        </tbody>
                    </table>
                    <div class="dataTable_pagination">
                        {{ view('vendor.pagination.alpine') }}
                        <div class="summary">
                            <strong>Всего записей:</strong> <span x-text="prompts.total">
                        </div>
                    </div>
                </div>
            </div>
            </div>
        </div>
@endsection