@extends('layout.basic.main')
@section('title', 'AI設定（WEBサイト学習 編集）')
@push('css')
    <link rel="stylesheet"
          href="https://pro.fontawesome.com/releases/v5.15.4/css/all.css?v={{config("sns-line.version")}}"
          integrity="sha384-rqn26AG5Pj86AF4SO72RK5fyefcQ/x32DNQfChxWvbXIyXFePlEktwD18fEz+kQU" crossorigin="anonymous">
    <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="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/from-web/create-content.js?v={{config("sns-line.version")}}"></script>

@endpush

@section('content')
    <div id="from-web-create" class="pl-[15px] w-full" v-cloak>
        <div class="mt-[15px] mb-[30px]">
            <span class="pr-[10px] text-[#222222] font-semibold text-[20px]">学習データ追加</span>
            <a href="/basic/chat-gpt/setting-ai" class="text-[#888888] underline !text-[14px]">WEBサイト学習</a> >
            <span class="text-[#888888] text-[14px]">学習データ編集</span>
        </div>
        <div class="h-[600px] " style="overflow: auto">
            <div class="pb-[15px]" >
                <div class="flex pb-[15px]" v-for="(content,index) in contents">
                    <div class="mr-[10px] w-[200px]">
                        <label v-if="index == 0" style="font-weight: 300 !important;" class="text-[14px] text-[#222222]">カテゴリー</label>
                        <div class="b-select">
                            <select class=" focus:border-[#66afe9]  focus:ring-0 !text-[14px] truncate-text   w-[200px]  h-[34px] rounded-[4px] border border-[#DDDDDD] pl-[10px] !pb-0 !pt-0 leading-[2]" v-model="content.category_id">
                                <option value="0">未分類</option>
                                <option v-for="category in categories" :value="category.id">@{{ category.name }}</option>
                            </select>

                        </div>
                    </div>
                    <div class="flex items-end mr-[20px]  w-[350px]">
                        <div class="mr-[10px]">
                            <span v-if="index == 0" style="font-weight: 300 !important;" class="text-[14px] text-[#222222]">管理名</span>
                            <input type="text" maxlength="20" class=" focus:border-[#66afe9]  focus:ring-0 form-control !w-[300px] !h-[34px] rounded-[5px] border border-solid focus:border-[#66afe9]" v-model="content.name">
                        </div>
                        <span class="text-[12px] text-[#888888]">@{{ content.name.length }}/20</span>
                    </div>
                    <div class="flex items-end">
                        <div class="pr-[10px]" style="max-width: 400px">
                            <label v-if="index == 0" style="font-weight: 300 !important;" class="text-[14px] text-[#222222]">WEBサイトURL</label>
                            <input type="text" class=" focus:border-[#66afe9]  focus:ring-0 form-control !h-[34px] !w-[300px] rounded border border-solid focus:border-[#66afe9]" v-model="content.web_url">
                        </div>
                        <i class="fal fa-trash-alt text-[#888888] text-[20px] cursor-pointer"
                           v-if="index > 0"
                           @click="removeContent(index)"
                        ></i>
                    </div>
                </div>
            </div>
            <div class="pb-[30px]">
            <span class="underline underline-offset-4 text-[#5799DB] text-[14px] cursor-pointer"
                  @click="addContent">
                + 学習データを追加
            </span>
            </div>
        </div>
        <div class="">
            <div class="pb-[20px]">
                <span class="text-[14px] text-[#F44336] font-[300]">個人情報が含まれる学習データの登録はしないでください。</span>
            </div>
            <div class="pb-[15px]">
                <button type="button"
                        @click="createContent"
                        class="text-[#08BF5A] hover:text-white border border-[#08BF5A] hover:bg-[#08BF5A]
            focus:outline-none  font-[300] font-[300] w-[182px] h-[43px]
            rounded-lg text-sm px-5 py-2.5 text-center me-2 mb-2">
                    保存して一覧に戻る
                </button>
            </div>
            <div>
                <button type="button"
                        onclick="location.href='/basic/chat-gpt/setting-ai'"
                        class="py-2.5 px-5 me-2 mb-2 text-sm text-[#222222] focus:outline-none bg-white rounded-lg
             border border-[#DDDDDD] hover:bg-[#DDDDDD] w-[84px] h-[43px] font-[300] ">
                    戻る
                </button>
            </div>
        </div>
    </div>
@endsection