@extends('layout.basic.main')
@section('title', 'AI設定')
@push('js')
    <script src="/js/tailwindcss.js"></script>
@endpush
@push('css')
    <style lang="css">
        #ai-setting span, #ai-setting p {
            color: #222222;
            font-size: 14px;
        }

        #ai-setting button {
            font-size: 14px;
        }

        #ai-setting label {
            font-weight: 300;
        }

        [type='checkbox']:focus, [type='radio']:focus {
            box-shadow: none !important;
            outline: none !important;
        }

        [type='radio'] {
            accent-color: green;
            appearance: auto !important;
        }

        .tab-header ul li.active {
            background-color: #FFFFFF !important;
            border-bottom: 3px solid #5799DB;
        }

        .tab-header ul li.active button {
            color: #5799DB;
        }
    </style>
@endpush
@section('content')
    <div class="mt-5" id="ai-setting">
        <div class="ml-[30px]">
            <p class="text-[20px] font-semibold mb-[15px]">AI設定</p>
            <p class="text-[14px] font-[300]">AI文章生成の情報ソースとなるデータを登録します。</p>
            <p class="text-[14px] font-[300]">登録方法は「テキスト（CSV）」「WEBサイト」「PDF」からお選びいただけます。</p>
        </div>
        <div class="tab-header mt-[25px] tab-top">
            <ul class="flex flex-wrap px-[30px] font-light border-solid border-b border-[#E0E0E0]">
                <li class="mr-[30px] active p-[10px]" id="today-new-booking">
                    <button type="button" @click="changeTabDetail('today-new-booking')"
                            class="inline-block rounded-t-lg hover:opacity-70 text-[#888888]"
                            data-toggle="tab" href="#today-new-booking-content">テキスト (1:1チャット)学習
                    </button>
                </li>
                <li class="mr-[30px] p-[10px]" id="calendar-salon-tab">
                    <button @click="changeTabDetail('calendar-salon-tab')" type="button"
                            class="inline-block rounded-t-lg hover:opacity-70 text-[#888888]"
                            data-toggle="tab" href="#calendar-salon-tab-content">WEBサイト学習
                    </button>
                </li>
                <li class="mr-[30px] p-[10px]" id="calendar-setting-course-staff">
                    <button type="button" @click="changeTabDetail('calendar-setting-course-staff')"
                            id="tab-calendar-setting-course-staff-content"
                            class="inline-block rounded-t-lg hover:opacity-70 text-[#888888]"
                            data-toggle="tab" href="#calendar-setting-course-staff-content">PDF学習
                    </button>
                </li>
                <li class="mr-[30px] p-[10px]" id="setting-calendar-tab">
                    <button type="button" @click="changeTabDetail('setting-calendar-tab')"
                            class="inline-block rounded-t-lg hover:opacity-70 text-[#888888]"
                            id="tab-setting-calendar-tab-content"
                            data-toggle="tab" href="#basic-setting-content">詳細設定
                    </button>
                </li>
            </ul>
        </div>
        <div class="flex items-center justify-between px-[30px] mt-[20px]">
            <button class="w-[160px] h-[40px] border border-solid border-[#5799DB] text-[#5799DB] rounded-[5px] font-semibold">
                ＋学習データを追加
            </button>
            <div>
                <button class="w-[140px] h-[40px] border border-solid border-[#DDDDDD] text-[#888888] !text-[12px] rounded-[5px]">
                    CSVアップロード
                </button>
                <button class="w-[200px] h-[40px] border border-solid border-[#DDDDDD] text-[#888888] !text-[12px] rounded-[5px]">
                    質問または回答を検索
                </button>
            </div>
        </div>
        <div class="tab-content">
            <div class="tab-pane fade in px-[15px] mt-[21px]" id="today-new-booking-content">
            </div>
            <div class="tab-pane fade in px-[15px] mt-[21px]" id="basic-setting-content">
            </div>
        </div>
    </div>
@endsection