@extends('layout.basic.main')
@section('title', 'AI設定（PDF学習 編集）')
@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")}}">
    <style>
        .input-cus-outline:focus{
            --tw-ring-shadow: unset !important;
            outline: none!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/from-pdf/create-content.js?v={{config("sns-line.version")}}"></script>

@endpush

@section('content')
    <div id="from-pdf-create" class="pl-[15px] w-full text-[#222222]" v-cloak>
        <div class="pt-[15px] pb-[30px]">
            <div class="flex align-bottom">
                <span class="pr-[10px] text-[20px] font-[600]">学習データ追加</span>
                <div class="inline-flex mb-[3px] text-[14px] text-[#888888]" style="align-items: flex-end">
                    <a href="/basic/chat-gpt/setting-ai" class="underline">PDF学習 </a>
                    <span class="pl-[10px]">> 学習データ編集</span>
                </div>
            </div>
        </div>

        <div class="pb-[15px]">
            <div class="pb-[15px] flex items-center">
                <button type="button" :disabled="contents.length > 9"
                        {{--                        @click="createContent"--}}
                        @click="addContent"
                        class="text-[#5799DB] hover:text-white border border-[#5799DB] hover:bg-[#5799DB]
            focus:outline-none  !font-[600]
            rounded-lg text-sm px-5 py-2.5 text-center me-2">
                    PDFをアップロード
                </button>
                <span class="text-[14px] text-[#222222]">同時に10個までアップロード可能です</span>
            </div>
            <div class="h-[500px] px-0" style="overflow: auto">
                <div class="flex pb-[15px] items-end" v-for="(content,index) in contents">
                    <div class="pr-[40px] w-[20%]">
                        <label class="text-[14px] text-[#222222] font-[300]">カテゴリー</label>
                        <div class="b-select">
                            <select class="form-control cursor-pointer truncate-text pr-[15px] !text-[14px] !text-[#222222] !font-[300] focus:border-[#66afe9]  focus:ring-0"
                                    v-model="content.category_id">
                                <option value="0">未分類</option>
                                <option v-for="category in categories" :value="category.id">
                                    @{{ category.name }}
                                </option>
                            </select>
                            <i class="fal fa-angle-down !top-[8px]"></i>
                        </div>
                    </div>
                    <div class="flex pr-[40px] w-[30%]" style="align-items: end">
                        <div class="flex-1 pr-[10px] text-[14px] text-[#222222] font-[300]">
                            <label class="text-[14px] text-[#222222] font-[300]" >管理名</label>
                            <input type="text" maxlength="20" class="form-control focus:border-[#66afe9]  focus:ring-0 !h-[34px] rounded-[5px] border border-solid appearance-none leading-tight focus:outline-none input-cus-outline" v-model="content.name">
                        </div>
                        <span>@{{ content.name.length }}/20</span>
                    </div>
                    <div class="flex pr-[40px] w-[30%] items-center">
                        <div class="flex-1 pr-[10px]">
                            <div class="flex items-center bg-[#F8F8F8] rounded-[5px] p-[5px] w-[450px]">
                                <div class="bg-[#888888] rounded-[5px] flex justify-center align-items-center w-[40px] h-[40px] mr-[10px] ">
                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" height="25px"
                                         width="25px">
                                        <path d="M64 464l48 0 0 48-48 0c-35.3 0-64-28.7-64-64L0 64C0 28.7 28.7 0 64
                                 0L229.5 0c17 0 33.3 6.7 45.3 18.7l90.5 90.5c12 12 18.7 28.3 18.7
                                 45.3L384 304l-48 0 0-144-80 0c-17.7 0-32-14.3-32-32l0-80L64 48c-8.8 0-16 7.2-16 16l0
                                 384c0 8.8 7.2 16 16 16zM176 352l32 0c30.9 0 56 25.1 56 56s-25.1 56-56 56l-16 0 0
                                 32c0 8.8-7.2 16-16 16s-16-7.2-16-16l0-48 0-80c0-8.8 7.2-16 16-16zm32
                                 80c13.3 0 24-10.7 24-24s-10.7-24-24-24l-16 0 0 48 16 0zm96-80l32
                                 0c26.5 0 48 21.5 48 48l0 64c0 26.5-21.5 48-48 48l-32
                                 0c-8.8 0-16-7.2-16-16l0-128c0-8.8 7.2-16 16-16zm32 128c8.8 0
                                 16-7.2 16-16l0-64c0-8.8-7.2-16-16-16l-16 0 0 96 16 0zm80-112c0-8.8
                                 7.2-16 16-16l48 0c8.8 0 16 7.2 16 16s-7.2 16-16 16l-32 0 0 32 32
                                 0c8.8 0 16 7.2 16 16s-7.2 16-16 16l-32 0 0 48c0
                                 8.8-7.2 16-16 16s-16-7.2-16-16l0-64 0-64z"
                                              fill="#FFFFFF"
                                        />
                                    </svg>
                                </div>
                                <div class="flex mr-[10px] flex-1">
                                    <input type="file" accept=".pdf" :id="'file_'+index" class="input-file"
                                           style="display: none" @change="readFile(event,index)">
                                    <div class="truncate !w-[220px] flex-1 text-[14px] text-[#222222] font-[300]"
                                         v-if="content.file_name">@{{ content.file_name }}
                                    </div>
                                    <label :for="'file_'+index" class="hover:bg-[#F8F8F8] rounded cursor-pointer"
                                           v-if="!content.file_name">
                                    <span class="p-[5px] text-[14px] font-[600]">
                                        <i class="fa fa-upload" aria-hidden="true"></i>
                                        ファイルの選択
                                    </span>
                                    </label>
                                </div>
                            </div>
                        </div>
                        <span v-if="index > 0" @click="removeContent(index)" class="cursor-pointer">
                                <i class="fas fa-trash-alt text-[#888888] text-[20px]"></i>
                    </span>

                    </div>
                </div>
            </div>
        </div>
        <div>
            <div class="mb-[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]
            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-[4px]
             border border-[#DDDDDD] hover:bg-[#DDDDDD]  w-[84px] font-[300]">
                    戻る
                </button>
            </div>
        </div>
    </div>
@endsection