@extends('layout.basic.main')
@section('title', 'サロン予約（新規作成）')
@push('js')
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="/js/booking_manager/japanese-holidays.min.js?v={{config('sns-line.version')}}"></script>

    <script src="/js/calendar_salon/ajax-error.js?v={{config('sns-line.version')}}"></script>
    <script src="/js/calendar_salon/index.js?v={{config('sns-line.version')}}"></script>
@endpush
@push('css')
    <link rel="stylesheet" href="/css/calendar_salon/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 {
            padding-bottom: 0 !important;
        }

        .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('content')
    <div class="calendar pt-[20px] mx-[-15px] bg-[#F8F8F8] pb-[50px]" id="calendar-salon-booking" v-cloak>
        <div class="w-[700px] pb-[1px] mx-[auto] bg-[#ffffff] rounded-[20px] shadow-[0px_0px_5px_#00000029]">
            <img src="/images/top_create_salon.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]">出勤時間中であればいつでも受付可能な予約です。</h2>
                        <div class="relative">
                            <i class="fas fa-question-circle text-[20px] text-[#888888]"></i>
                            <div class="absolute text-[14px] z-10 top-[-165px] right-[-225px] w-[350px] rounded-[5px] shadow-[0px_3px_3px_#00000029] bg-[#FFFFFF] p-[20px]"
                                 id="explain-question"
                                 style="display: none"
                            >
                                <p>例）1時間のコース / 10:00~12:00に出勤</p>
                                <ul style="list-style-type: disc; list-style-position: inside; margin-top: 5px;">
                                    <li>
                                        10:00~11:00
                                    </li>
                                    <li>
                                        10:30~11:30
                                    </li>
                                    <li>
                                        11:00~12:00　の全て受付可能
                                    </li>
                                </ul>
                                <p>※受付間隔は最短10分まで設定できます</p>

                                <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.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_salon_new_0.png" class="w-full h-[142px]">
                        <div class="mt-[14px] mx-[6px] mb-[13px] flex justify-center">
                            <div class="text-center py-[4px] border border-solid border-[#DDDDDD] mr-[6px] w-[130px] 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-[130px] 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/calendar-management" 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>
        @include('basic.calendar_salon.modal.modal_create_calendar_salon')
    </div>
@endsection