@extends('layout.basic.main')
@push('js')
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="/js/form_answer/vuedraggable.min.js"></script>
    <script src="/js/calendar_management/ajax-error.js?v={{config('sns-line.version')}}"></script>
    <script src="/js/calendar_management/index.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-size: 14px;
        }

        .leading-normal {
            line-height: normal !important;
        }

        #main-new {
            padding-bottom: 0px;
        }

        .fa-question-circle:hover + div{
            display: block !important;
        }

        #explain-question .arrow {
            width: 40px;
            height: 20px;
            position: absolute;
            top: 100%;
            left: 95px;
            overflow: hidden;
        }

        #explain-question .arrow:before {
            content: '';
            position: absolute;
            width: 20px;
            height: 20px;
            background: white;
            transform: translateX(-50%) translateY(-50%) rotate(45deg);
            top: 0;
            left: 50%;
            box-shadow: 0px 3px 3px #00000029;
        }

        #create-calendar {
            z-index: 1000;
            height: 100vh;
            background-color: rgba(0, 0, 0, 0.5);
        }
    </style>
@endpush
@section('title', 'レッスン予約（新規作成）')
@section('content')
    <div class="calendar pt-[20px] mx-[-15px] bg-[#F8F8F8] pb-[50px]" id="calendar" v-cloak>
        <div class="w-[700px] pb-[1px] mx-[auto] bg-[#ffffff] rounded-[20px] shadow-[0px_0px_5px_#00000029]">
            <img src="/images/top-example.png" class="w-[700px] h-[200px] rounded-tl-[20px] rounded-tr-[20px]">
            <div class="pt-[17px] relative">
                <div class="mb-[15px] ml-[32px]">
                    <span class="text-[20px] font-semibold">レッスン予約の新規作成</span>
                    <div class="flex items-center mt-[12px]  ">
                        <h2 class="text-[16px] mr-[28px]">決まった時間枠だけ予約を受付できます</h2>
                        <div class="relative">
                            <i class="fas fa-question-circle text-[20px] text-[#888888]"></i>
                            <div class="absolute text-[14px] z-10 top-[-123px] right-[-225px] w-[350px] rounded-[5px] shadow-[0px_3px_3px_#00000029] bg-[#FFFFFF] p-[20px]"
                                 id="explain-question"
                                 style="display: none"
                            >
                                <p>例) 設定された時間枠だけ予約受付</p>
                                <ul style="list-style-type: disc; list-style-position: inside; margin-top: 5px;">
                                    <li>
                                        10:00~11:00 ヨガ教室
                                    </li>
                                    <li>
                                        15:30-16:30 ピラティス教室
                                    </li>
                                </ul>

                                <div class="arrow"></div>
                            </div>
                        </div>

                    </div>
                    <div class="w-[386px] bg-[#F8F8F8] h-[134px] p-[8px] mb-[17px] mt-[21px]">
                        <span class="ml-[9px]">この様なビジネスに対応しています</span>
                        <div class="mt-[11px] flex">
                            <div class="bg-[#FFFFFF] text-center py-[9px] mr-[6px] w-[107px] h-[37px] rounded-[24px] font-semibold">
                                学習塾
                            </div>
                            <div class="bg-[#FFFFFF] text-center py-[9px] mr-[9px] w-[115px] h-[37px] rounded-[24px] font-semibold">
                                料理教室
                            </div>
                            <div class="bg-[#FFFFFF] text-center py-[9px] w-[121px] h-[37px] rounded-[24px] font-semibold">
                                パソコン教室
                            </div>
                        </div>
                        <div class="mt-[8px] flex">
                            <div class="bg-[#FFFFFF] text-center py-[9px] mr-[9px] w-[157px] h-[37px] rounded-[24px] font-semibold">
                                オンラインレッスン
                            </div>
                            <div class="bg-[#FFFFFF] text-center py-[9px] w-[170px] h-[37px] rounded-[24px] font-semibold">
                                ヨガ・ピラティス教室
                            </div>
                        </div>
                    </div>
                    <button class="bg-[#08BF5A] w-[386px] h-[50px] text-[#FFFFFF] shadow-[0px_1px_2px_#00000029] rounded-[5px] border border-solid border-[#08BF5A] text-[16px] font-semibold hover:opacity-70"
                            @click="showCreateCalendarModal = true"
                    >
                        新規作成にすすむ <i class="fas fa-caret-right"></i>
                    </button>
                </div>
                <div class="absolute bottom-[-27px] right-[0] text-center">
                    <img width="257px" src="/images/phone-example-lesson.png?v={{ config('sns-line.version') }}">
                </div>
            </div>
            <div class="mt-[69px]">
                <h2 class="text-[16px] font-semibold text-center">他の業種・予約タイプはこちら</h2>
                <div class="mt-[21px] mx-[34px] flex">
                    <div class="w-[300px] h-[266px] rounded-[10px] shadow-[0px_2px_4px_#00000029] mr-[32px]">
                        <img src="/images/pixta.png" class="w-full h-[142px]">
                        <div class="mt-[14px] mx-[6px] mb-[13px] flex">
                            <div class="text-center py-[4px] border border-solid border-[#DDDDDD] mr-[6px] w-[79px] h-[28px] rounded-[24px] font-semibold"
                                 style="line-height: normal"
                            >美容室
                            </div>
                            <div class="text-center py-[4px] border border-solid border-[#DDDDDD] mr-[5px] w-[66px] h-[28px] rounded-[24px] font-semibold"
                                 style="line-height: normal"
                            >整体
                            </div>
                            <div class="text-center py-[4px] border border-solid border-[#DDDDDD] w-[132px] h-[28px] rounded-[24px] font-semibold"
                                 style="line-height: normal"
                            >オンライン面談
                            </div>
                        </div>
                        <div class="text-center">
                            <p class="mb-[9px]">営業時間中ならいつでも予約を受付</p>
                        </div>
                        <a href="/basic/manager-booking" target="_blank">
                            <button class="bg-[#5799DB] text-[16px] text-[#FFFFFF] font-semibold rounded-bl-[10px] rounded-br-[10px] w-[300px] h-[40px]">
                                サロン・面談予約はこちら <i class="fas fa-caret-right"></i>
                            </button>
                        </a>
                    </div>
                    <div class="w-[300px] h-[266px] rounded-[10px] shadow-[0px_2px_4px_#00000029]">
                        <img src="/images/28576297_m.png" class="w-full h-[142px]">
                        <div class="mt-[14px] mx-[6px] mb-[13px] flex">
                            <div class="text-center py-[4px] border border-solid border-[#DDDDDD] mr-[7px] w-[138px] h-[28px] rounded-[24px] font-semibold"
                                 style="line-height: normal"
                            >各種イベント開催
                            </div>
                            <div class="text-center py-[4px] border border-solid border-[#DDDDDD] w-[136px] h-[28px] rounded-[24px] font-semibold"
                                 style="line-height: normal"
                            >セミナー申込み
                            </div>
                        </div>
                        <div class="text-center">
                            <p class="mb-[9px]">開催日時が決まっている参加予約を受付</p>
                        </div>
                        <a href="/basic/booking-event-day/list-event" target="_blank">
                            <button class="bg-[#5799DB] text-[16px] text-[#FFFFFF] font-semibold rounded-bl-[10px] rounded-br-[10px] w-[300px] h-[40px]">
                                イベント予約はこちら <i class="fas fa-caret-right"></i>
                            </button>
                        </a>
                    </div>
                </div>
            </div>
            <div class="mt-[24px] text-center py-[20px] bg-[#F8F8F8] rounded-[10px] mx-[29px] mb-[30px] h-[170px]">
                <span class="text-[16px] font-semibold underline">以下のビジネスには対応できない場合があります</span>
                <div class="mt-[18px]">
                    <div class="mb-[7px] flex justify-center">
                        <div class="font-semibold bg-[#E0E0E0] w-[245px] h-[40px] mr-[5px] rounded-[15px] py-[10px]">
                            時間貸し施設予約
                        </div>
                        <div class="font-semibold bg-[#E0E0E0] w-[245px] h-[40px] rounded-[15px] py-[10px]">
                            物品レンタル予約
                        </div>
                    </div>
                    <div class="flex justify-center">
                        <div class="font-semibold bg-[#E0E0E0] w-[245px] h-[40px] mr-[5px] rounded-[15px] py-[10px]">
                            飲食店予約
                        </div>
                        <div class="font-semibold bg-[#E0E0E0] w-[245px] h-[40px] rounded-[15px] py-[10px]">宿泊予約
                        </div>
                    </div>
                </div>
            </div>
            <div class="text-center mb-[12px]">
                <button class="border border-solid border-[#08BF5A] text-[16px] text-[#08BF5A] rounded-[3px] w-[350px] h-[40px]"
                        @click="showCreateCalendarModal = true"
                >
                    レッスン予約の新規作成にすすむ <i class="fas fa-caret-right"></i>
                </button>
            </div>
            <div class="text-center mb-[46px]">
                <button class="border border-solid border-[#DDDDDD] text-[16px] text-[#888888] rounded-[3px] w-[100px] h-[40px]"
                        @click="goBack"
                >
                    戻る
                </button>
            </div>
        </div>

        <div class="fixed top-1/2 left-1/2 translate-x-[-50%] translate-y-[-50%] w-[100%] z-[1]" id="create-calendar"
             v-if="showCreateCalendarModal">
            <div class="modal-dialog w-[700px] mt-0" style="top: 50%; transform: translateY(-50%)" role="document">
                <div class="modal-content rounded-[10px] px-[50px]">
                    <div class="modal-header text-center relative !bg-[#FFFFFF] border-0 pt-[21px]">
                        <h3 class="modal-title text-[20px] leading-[27px] font-semibold text-[#222222]">
                            レッスン予約新規作成
                        </h3>
                        <h4 class="mt-[6px] font-light text-[16px]">入力内容は、後から変更が可能です</h4>
                        <button type="button"
                                class="flex justify-center items-center w-[38px] h-[38px] rounded-[5px] close ic-close text-[27px] absolute right-[-34px] top-[16px] opacity-100 z-10 hover:bg-[#96ADB2] hover:!text-white"
                                @click="showCreateCalendarModal = false"
                        >
                            <i class="far fa-times text-[32px]"></i>
                        </button>
                    </div>
                    <div class="modal-body px-0 mt-[30px]">
                        <div>
                            <span class="text-[16px] leading-[21px] font-semibold">店舗名を入力してください（<span
                                        class="text-[#F44336]">入力内容がお客様に表示されます</span>）</span>
                            <input class="form-control mt-[8px] mb-[6px] !h-[40px] !px-[10px] text-[14px] !pl-[10px] placeholder:text-[#D3D3D3] !border-[#DDDDDD] rounded-[3px]"
                                   type="text" placeholder="パーソナルトレーニング エルメ 渋谷店"
                                   v-model="formCreateCalendar.line_name"
                            >
                            <span class="flex justify-end text-[14px] leading-[19px] text-[#888888] font-light">
                                @{{ formCreateCalendar.line_name.length }}/30
                            </span>
                        </div>
                        <div class="mt-[23px]">
                            <span class="text-[16px] leading-[21px] font-semibold">エルメ上での管理名を入力してください（<span
                                        class="text-[#F44336]">入力内容はお客様に表示されません</span>)</span>
                            <input class="form-control mt-[8px] mb-[6px] !h-[40px] !px-[10px] text-[14px] !pl-[10px] placeholder:text-[#D3D3D3] !border-[#DDDDDD] rounded-[3px]"
                                   type="text"
                                   placeholder="渋谷店"
                                   v-model="formCreateCalendar.calendar_name"
                            >
                            <span class="flex justify-end text-[14px] leading-[19px] text-[#888888] font-light">
                                @{{ formCreateCalendar.calendar_name.length }}/10
                            </span>
                        </div>
                    </div>
                    <div class="modal-footer border-0 block text-center grid grid-rows-2 items-center justify-center">
                        <button type="button"
                                @click="createNewCalendar"
                                class="w-[300px] h-[40px] text-[16px] border-solid border border-[#08BF5A] text-[#08BF5A] hover:opacity-70 rounded-[3px]">
                            レッスン予約を新規作成
                        </button>
                        <a class="text-[#888888] text-[16px] font-light underline cursor-pointer"
                           @click="showCreateCalendarModal = false"
                        >
                            戻る
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection