@extends('layout.basic.main')
@push('js')
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="/js/calendar_management/ajax-error.js?v={{config('sns-line.version')}}"></script>
    <script src="/js/calendar_management/create_course.js?v={{config('sns-line.version')}}"></script>
@endpush
@push('css')
    <link rel="stylesheet" href="/css/calendar/index.css?v={{config("sns-line.version")}}" type="text/css">
    <style>
        body {
            line-height: 1.42857143 !important;
            font-weight: 300;
            font-size: 14px;
        }

        input, select, button {
            height: 40px !important;
        }
    </style>
@endpush
@section('title', $calendar->calendar_name)
@section('content')
    <div class="calendar" id="calendar" v-cloak>
        @include('basic.calendar_management.header')
        <div class="px-[15px] mt-[25px]">
            <p class="text-[16px] font-semibold mb-[11px]">提供しているコース情報を1つ登録しましょう</p>
            <p class="mb-[13px]">※登録内容は、後から変更が可能です</p>
            <p class="mb-[23px]">※コースが2つ以上の場合、基本情報の登録完了後に追加で登録が可能です。</p>
            <div class="mb-[21px]">
                <span class="mr-[15px] font-semibold">コース名</span><span class="text-[#F44336]">＊</span>
                <input type="text" class="form-control mt-[4px] !w-[450px] !p-[10px] placeholder:text-[#E0E0E0]"
                       placeholder="例) 初心者向けトレーニング"
                       v-model="formCreateCourse.course_name"
                >
            </div>
            <div class="mb-[33px]">
                <span class="font-semibold mr-[15px]">所要時間</span><span class="text-[#F44336]">＊</span>
                <div class="mt-[4px] flex items-center justify-start">
                    <label class="hours-course-label">
                        <select class="hours-course form-control w-[80px] font-light" style="background: url(/images/expand_more.svg) 90% no-repeat;" v-model="formCreateCourse.hour_done">
                            <option v-for="hour in hours" :value="hour" :key="hour">@{{ hour }}</option>
                        </select>
                    </label>
                    <span class="text-[16px] mx-[8px]">時間</span>
                    <label class="minutes-course-label">
                        <select class="form-control w-[80px] font-light" style="background: url(/images/expand_more.svg) 90% no-repeat;" v-model="formCreateCourse.minute_done">
                            <option v-for="minute in minutes" :value="minute" :key="minute">@{{ minute }}</option>
                        </select>
                    </label>
                    <span class="text-[16px] mx-[8px]">分</span>
                </div>
            </div>
            <div class="mt-[25px] mb-[10px] text-[#222222]">
                <span class="!font-semibold">イメージ</span>
                <span class="font-light text-[14px] ml-[15px]">推奨 1,000 × 500（px）</span>
            </div>
            <div class="max-w-[200px] !h-[100px] overflow-hidden">
                <img id="course_image_change" :src="formCreateCourse.course_image ? (formCreateCourse.course_image.indexOf('ext-media') >= 0 ? '{{ env('URL_SERVER_MEDIA') }}' + formCreateCourse.course_image : formCreateCourse.course_image) : '/images/Group3022.png'" class="w-full h-full object-contain" alt="">
                <input accept="image/*" ref="fileInput" type="file" id="inputFile" @change="previewFiles($event)" class="hidden mt-[40px]">
            </div>
            <div class="text-[16px] text-[#5799DB] mt-[5px] font-light">
                        <span v-if="buttonUpload.isShowBtnUpload" @click.prevent="showModalUpload()" class="hover:opacity-70 cursor-pointer underline
                        !font-light"><span
                                    class="!font-light text-[16px]">アップロード</span></span>
                <span v-if="buttonUpload.isShowBtnEdit" @click.prevent="showModalUpload()" :class="{'cursor-pointer underline': true}"><span class="font-light">変更</span></span>
                <span @click.prevent="deleteImage()" v-if="buttonUpload.isShowBtnDelete" class="ml-[10px] text-[#F44336] cursor-pointer underline"><span class="font-light">削除</span></span>
            </div>
            <div class="mb-[32px] mt-[36px]">
                <span class="font-semibold">サービス利用料</span>
                <div class="mt-[4px] flex items-center">
                    <input type="text" value="0" class="form-control !w-[150px] text-right" v-model="formCreateCourse.amount">
                    <span class="text-[16px] ml-[9px]">円</span>
                </div>
            </div>
            <button type="button" @click="createCourse"
                    class="w-[250px] h-[40px] mb-[26px] text-[16px] rounded-[3px] border-solid border border-[#08BF5A] text-[#08BF5A] hover:opacity-70">
                基本情報を保存
            </button>
        </div>
    </div>
@endsection