@extends('layout.basic.main')
@section('title', 'AI設定')
@push('css')
    <link rel="stylesheet"
          href="https://pro.fontawesome.com/releases/v5.15.4/css/all.css"
          integrity="sha384-rqn26AG5Pj86AF4SO72RK5fyefcQ/x32DNQfChxWvbXIyXFePlEktwD18fEz+kQU" crossorigin="anonymous">
    <link rel="stylesheet" href="/css/msg_template/index.css?v={{config('sns-line.version')}}">
    <link rel="stylesheet" href="/css/chatgpt/chatgpt.css?v={{config('sns-line.version')}}">
    <style>
        input[type="text"]:focus{
            border-color: #cccccc;
            overflow: unset;
            box-shadow: none;
            --tw-ring-shadow: unset !important;
            outline: none!important;
        }
        .search_for_temp::placeholder {
            color: #888888 !important;
            font-size: 12px !important;
        }
    </style>
@endpush

@push('js')
    <script src="/js/tailwindcss.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/1.7.7/axios.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js"></script>

    <script src="/js/chatgpt/setting-ai/controller.js?v={{config('sns-line.version')}}"></script>
    <script src="/js/chatgpt/setting-ai/components/from-chat-component.js?v={{config('sns-line.version')}}"></script>
    <script src="/js/chatgpt/setting-ai/components/from-web-component.js?v={{config('sns-line.version')}}"></script>
    <script src="/js/chatgpt/setting-ai/components/from-pdf-component.js?v={{config('sns-line.version')}}"></script>
    <script src="/js/chatgpt/setting-ai/components/basic-setting-component.js?v={{config('sns-line.version')}}"></script>
@endpush

@section('content')
    <div class="container-fluid text-[#222222]" style="position: relative;">
        <div class="row" style="padding:15px 0 15px 0; ">
            <div class="col-md-12 pb-[15px]">
                <span class="text-[20px] font-[600]">AI設定</span>
            </div>
            <div class="col-md-12">
                <span class="text-[14px] font-[300]">AI文章生成の情報ソースとなるデータを登録します。<br> 登録方法は「テキスト（CSV）」「WEBサイト」「PDF」からお選びいただけます。</span>
            </div>
        </div>

        <div class="row">
            <div id="controller" class="col-md-12" style="border-bottom: 1px solid #E0E0E0">
                <div :class="type == chat ?'setting-item':''" style="display: inline-flex; cursor:pointer"
                     @click="setType(chat)" class="mr-[10px] ml-[10px]">
                    <span class="text-[14px]" style="padding: 5px 0 3px 0;">テキスト (1:1チャット)学習</span>
                </div>
                <div :class="type == web?'setting-item':''" style="display: inline-flex;cursor:pointer"
                     @click="setType(web)" class="mr-[10px] ml-[10px]">
                    <span class="text-[14px]" style="padding: 5px 0 3px 0;">WEBサイト学習</span>
                </div>
                <div :class="type == pdf ? 'setting-item':''" style="display: inline-flex;cursor:pointer"
                     @click="setType(pdf)" class="mr-[10px] ml-[10px]">
                    <span class="text-[14px]" style="padding: 5px 0 3px 0;">PDF学習</span>
                </div>
                <div :class="type == basic_setting ?'setting-item':''" style="display: inline-flex;cursor:pointer"
                     @click="setType(basic_setting)" class="mr-[10px] ml-[10px]">
                    <span class="text-[14px]" style="padding: 5px 0 3px 0;">詳細設定</span>
                </div>
            </div>
        </div>
        @include('chatgpt.setting-ai.components.from-chat-component')
        @include('chatgpt.setting-ai.components.from-web-component')
        @include('chatgpt.setting-ai.components.from-pdf-component')
        @include('chatgpt.setting-ai.components.basic-setting-component')
    </div>
@endsection