@extends('layout.basic.main')
@section('title', 'AI設定（テキスト学習 編集）')
@push('css')
    <link rel="stylesheet" href="/css/chatgpt/chatgpt.css?v={{config("sns-line.version")}}">
@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="/js/chatgpt/setting-ai/controller.js?v={{config("sns-line.version")}}"></script>--}}
    <script src="/js/chatgpt/setting-ai/from-chat/create-content.js?v={{config("sns-line.version")}}"></script>

@endpush
@section('content')
    <div id="create-content-chatgpt" class="text-[#222222] pl-[15px]" v-cloak>
        <div class="pt-[15px]">
            <div class="col-md-12 flex align-bottom">
                <span class="pr-[10px] text-[20px] font-semibold">学習データ編集</span>
                <div class="inline-flex text-[14px] font-[300] mb-[3px] text-[#888888] ml-[30px]" style="align-items: flex-end">
                    <a href="/basic/chat-gpt/setting-ai/">
                        <span class="underline">テキスト (1:1チャット)学習</span></a>
                    <span class="pl-[10px]"> > 学習データ編集</span>
                </div>
            </div>
        </div>
        <div class="pl-[20px] pt-[50px] text-[#222222] ">
            <div class="card-select" >
                <label for="default" class="block mb-2 text-sm font-[300]">カテゴリー</label>
                <select id="default" v-model="category_id"
                        class=" border h-[32px] border-[#DDDDDD] bg-[#FFFFFF]
                        focus:border-[#66afe9]  focus:ring-0 mb-6
                        border-solid text-[14px] rounded-[4px] block w-[250px] pl-[10px] !pb-0 !pt-0 leading-2">
                    <option value="0">未分類</option>
                    <option :value="category.id" v-for="category in categories">@{{ category.name }}</option>
                </select>
{{--                <i class="fal fa-angle-down icon-down top-[32px]"></i>--}}
            </div>
            <div class="w-350 pb-[20px] text-[#222222]">
                <label class="block mb-2 text-sm font-[300] ">質問文</label>
                <textarea id="message" v-model="question"
                          class="w-[650px] h-[150px] p-2.5 text-sm rounded-lg border border-gray-300 focus:border-[#66afe9]  focus:ring-0"></textarea>
            </div>
            <div class="w-350 pb-[20px] text-[#222222]">
                <label class="block mb-2 text-sm font-[300] ">回答文</label>
                <textarea id="message" v-model="answer"
                          class="w-[650px] h-[150px] p-2.5 text-sm rounded-lg border border-gray-300 focus:border-[#66afe9]  focus:ring-0"></textarea>
            </div>
            <div class="mb-[20px]">
                <span class="text-[14px] text-[#F44336] font-[300]">個人情報が含まれる学習データの登録はしないでください。</span>
            </div>
            <div class="pb-[20px]">
                <button type="button" @click="createContent(redirect_list)"
                        class="text-[#08BF5A] hover:text-white border border-[#08BF5A] hover:bg-[#08BF5A]  font-[300]
            focus:outline-none  font-medium w-[182px] h-[43px]
            rounded-lg text-sm px-5 py-2.5 text-center me-2 ">
                    保存して一覧に戻る
                </button>
                <span @click="createContent(reloaded)" class="text-[#5799DB] text-[14px] underline cursor-pointer">
                    保存して次の学習データを追加する >
                </span>
            </div>
            <div>
                <button type="button" class="py-2.5 px-5 me-2 mb-2 text-sm font-medium text-[#222222] focus:outline-none bg-white rounded-[4px]
             border border-[#DDDDDD] hover:bg-gray-100   w-[84px] h-[42px]"
                        @click="window.location.href='/basic/chat-gpt/setting-ai/'"
                >戻る
                </button>
            </div>
        </div>
    </div>
@endsection