@extends('layout.basic.main')
@section('title', 'AI設定')
@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/set-api-key.js"></script>
    <style>
        input[type="text"]:focus{
            border-color: #cccccc;
            outline: unset;
            box-shadow: none;
            font-size: 14px;
        }
    </style>
@endpush
@section('content')
    <div class="col-md-12 text-[#222222]" id="add-key-chatgpt" >

        <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 text-[14px]">
                <span>ChatGPTのAPIキーが設定されていません。<br> AIサポートのご利用にはChatGPTの連携が必須となります。</span>
            </div>
        </div>
        <div class="text-[14px] font-[600]" style="padding-top: 15px">
            <span>
               ChatGPTのAPIキー
            </span>
        </div>
        <div >
            <div class="col-md-4" style="padding-left: 0">
                <input type="text" class="w-[500px] h-[40px] appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none" v-model="api_key">
            </div>
        </div>
        <div class="col-md-12 mt-3" style="padding-left: 0">
            <span href="#" class="underline text-[#5799DB] text-[14px] cursor-pointer">APIキーの取得方法</span>
        </div>
        <div class="col-md-12 mt-3" style="padding-left: 0;">
            <button type="button"
                    @click="setApiKey"
                    class="text-[#08BF5A] hover:text-white border border-[#08BF5A] hover:bg-[#08BF5A] font-[300]
            rounded-lg text-sm px-5 py-2.5 text-center me-2 mb-2 w-[182px] h-[43px]">
                保存する
            </button>
        </div>

    </div>
@endsection