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

        input, select, button {
            height: 40px !important;
        }

        .step-bar .progressbar {
            width: 380px;
            height: 80px;
            counter-reset: step;
            margin-left: -15px;
        }

        .step-bar .progressbar li {
            position: relative;
            list-style: none;
            float: left;
            width: 33.33%;
            text-align: center;
        }

        .step-bar .progressbar li:after {
            content: counter(step);
            counter-increment: step;
            width: 30px;
            height: 30px;
            border: 2px solid #E0E0E0;
            display: block;
            text-align: center;
            margin: 15px auto 15px auto;
            border-radius: 30px;
            background-color: #FFFFFF;
        }

        .step-bar .progressbar li:before {
            content: "";
            position: absolute;
            width: 100%;
            height: 5px;
            background: #E0E0E0;
            top: 48px;
            left: -50%;
            z-index: -1;
        }

        .step-bar .progressbar li:first-child:before {
            content: none;
        }

        .step-bar .progressbar li.done:after {
            content: "\f00c";
            border: 2px solid #08BF5A;
            color: #08BF5A;
            line-height: 25px;
        }

        .step-bar .progressbar li.active:after {
            border: 2px solid #08BF5A;
            color: #08BF5A;
            line-height: 25px;
        }

        .step-bar .progressbar li.active {
            color: #08BF5A;
            font-weight: 600;
        }

        .step-bar .progressbar li.active:before {
            background: #08BF5A;
        }

        .step-bar .progressbar li.done:before {
            background: #08BF5A;
        }

        .step-bar .progressbar li.active {
            background: none !important;
        }

        .my_class {
            cursor: pointer;
            background: url(/images/expand_more.svg) 100% no-repeat #fff;
        }

        .custom-checkbox-1 {
            position: relative;
            display: block;
            width: 100%;
            padding-left: 35px;
            cursor: pointer;
        }

        .custom-checkbox-1::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 25px;
            height: 25px;
            border-radius: 3px;
            border: 1px solid #DDDDDD;
            background-color: #FFFFFF;
        }

        input:checked + .custom-checkbox-1::before {
            background-color: #08BF5A;
            content: '';
            width: 25px;
            height: 25px;
            font-size: 25px;
            color: #FFFFFF;
            position: absolute;
            top: 0;
            left: 0;
            text-align: center;
            line-height: 35px;
            border: none;
        }

        .custom-checkbox-2 {
            position: relative;
            display: block;
            width: 100%;
            padding-left: 35px;
            cursor: pointer;
        }

        .custom-checkbox-2::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 25px;
            height: 25px;
            border-radius: 3px;
            border: 1px solid #DDDDDD;
            background-color: #FFFFFF;
        }

        input:checked + .custom-checkbox-2::before {
            background-color: #08BF5A;
            content: '';
            width: 25px;
            height: 25px;
            font-size: 25px;
            color: #FFFFFF;
            position: absolute;
            top: 0;
            left: 0;
            text-align: center;
            line-height: 35px;
            border: none;
        }

        input:checked + label {
            color: #08BF5A;
            font-weight: 600;
        }
    </style>
@endpush
@section('title', '基本情報の入力')
@section('content')
    <div class="calendar" id="calendar-salon-step-create" v-cloak>
        @include('basic.calendar_salon.layouts.header')
        <div class="step-bar">
            <ul class="progressbar">
                <li class="done">タイプ選択</li>
                <li class="done" v-if="staffType == CALENDAR_ONE_STAFF_TYPE">出勤登録</li>
                <li class="done" v-else>スタッフ</li>
                <li class="active">コース</li>
            </ul>
        </div>
        <div class="px-[15px] mt-[25px]">
            <p v-if="staffType == CALENDAR_ONE_STAFF_TYPE" class="text-[16px] font-semibold mb-[11px]">提供しているコース情報を1つ登録してみましょう</p>
            <p v-if="staffType == CALENDAR_ONE_STAFF_TYPE" class="mb-[13px]">※2つ以上の場合、基本情報の登録完了後に追加で登録が可能です。</p>
            <p v-if="staffType == CALENDAR_MANY_STAFF_TYPE" class="text-[16px] font-semibold mb-[11px]">提供しているコース情報を1つ登録してみましょう</p>
            <p v-if="staffType == CALENDAR_MANY_STAFF_TYPE" class="mb-[13px]">※2つ以上の場合、基本情報の登録完了後に追加で登録が可能です。（有料プランのみ）</p>
            <p v-if="staffType == CALENDAR_MANY_STAFF_TYPE" class="mb-[13px]">※登録内容は全て、後から変更が可能です。</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] !border-[#DDDDDD] 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="my_class border-[#DDDDDD] hours-course form-control w-[80px] font-light" 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="my_class border-[#DDDDDD] form-control w-[80px] font-light" v-model="formCreateCourse.minute_done">
                            <option v-for="minute in minutes" :value="minute" :key="minute">@{{ minute == 0 ? '0' + minute : minute }}</option>
                        </select>
                    </label>
                    <span class="text-[16px] mx-[8px]">分</span>
                </div>
            </div>

            <div class="mt-[20px] 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-[20px]">
                <span class="font-semibold">サービス利用料</span>
                <div class="mt-[4px] flex items-center">
                    <input type="text" value="0" class="form-control !border-[#DDDDDD] rounded-[3px] !w-[150px] text-right" v-model="formCreateCourse.amount">
                    <span class="text-[16px] ml-[9px]">円</span>
                </div>
            </div>
            <span class="!font-semibold"
                  v-if="staffType == CALENDAR_MANY_STAFF_TYPE">このコースの対応が可能なスタッフを選択</span>
            <div class="flex mb-[32px] mt-[20px] " v-if="staffType == CALENDAR_MANY_STAFF_TYPE">
                <div class="flex items-center mr-[30px]" v-for="(item, index) in listStaffs" :key="item.staff_id">
                    <input type="checkbox" :id="'check' +(index+1)" v-model="listStaffSelect" :value="item.staff_id"
                           class="hidden cursor-pointer w-[25px] h-[25px]  bg-[#FFFFFF] border border-solid border-[#DDDDDD] rounded-[5px] m-0 mt-[7px]">
                    <label class="text-[#222222] text-[16px] font-light" :class="'custom-checkbox-' + (index+1)" :for="'check' +(index+1)">@{{ item
                        .staff_name }}</label>
                </div>
            </div>
            <div class="text-[#222222] text-[14px] font-light mb-[10px]" v-if="staffType == CALENDAR_MANY_STAFF_TYPE">入力内容は後から変更可能です</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>
                <a class="text-[#888888] text-[16px] font-light underline cursor-pointer"
                   @click="backRedirect('calendar-display')"
                >
                    < 戻る
                </a>
            </div>
        </div>
    </div>
@endsection