@push('css')
@endpush
<div class="content">
  <label class="mb-[8px] text-[20px] font-semibold block text-[#222222]">前後の空き時間</label>
  <span class="text-[#222222] text-[14px]">このページでは予約・Googleカレンダー連携スケジュール前後の空き時間設定を行います。</span>

  <div class="text-[#222222] mt-[25px] !font-[600] text-[14px]">
    予約前後の空き時間
  </div>
  <div class="text-[#222222] mt-4 !font-[300] text-[14px]">
    エルメ上で入った予約の前後に空き時間を設定できます。
  </div>
  <div class="relative w-[300px] mt-[10px]">
    <select class="text-center w-[300px] h-[35px] bg-[#FFFFFF] border border-solid border-[#E0E0E0] rounded-[3px] py-0 !text-[14px]" v-model="settingFreeTimeBeforeAfter.bookingSetting">
      <option value="0">予約前後に空き時間を設定しない</option>
      <option value="1">予約の「前」に空き時間を設定する</option>
      <option value="2">予約の「後」に空き時間を設定する</option>
      <option value="3">予約前後に空き時間を設定する</option>
    </select>
    <i class="fas fa-caret-down absolute right-[16.5px] top-[9.5px] text-[#888888]"></i>
  </div>
  <div v-if="settingFreeTimeBeforeAfter.bookingSetting != 0" class="mt-[20px] flex">
    <div v-if="settingFreeTimeBeforeAfter.bookingSetting == 1 || settingFreeTimeBeforeAfter.bookingSetting == 3">
      <div class="!text-[14px] !font-[300] !text-[#222222] flex items-center justify-center !w-[140px] !rounded-[4px] !bg-[#F8F8F8] !h-[32px]">
        <span class="!text-[#5799DB] !font-[600]">前</span>
        の空き時間
        <i class="fas fa-arrow-from-right !text-[20px] ml-[7px]"></i>
      </div>
      <div class="relative w-[140px] h-[35px] mt-[6px]">
        <select class="text-center w-[140px] h-[35px] bg-[#FFFFFF] border border-solid border-[#E0E0E0] rounded-[3px] py-0 !text-[14px]" v-model="settingFreeTimeBeforeAfter.bookingBeforeFreeTime">
          <option value="10">10分</option>
          <option value="15">15分</option>
          <option value="30">30分</option>
          <option value="60">1時間</option>
          <option value="120">2時間</option>
        </select>
        <i class="fas fa-caret-down absolute right-[16.5px] top-[9.5px] text-[#888888]"></i>
      </div>
    </div>
    <div class="!bg-[#E0E0E0] !rounded-[4px] !font-[600] !text-[14px] !text-[#222222] !text-center w-[100px] h-[73px] flex items-center justify-center mx-[10px]">予約</div>
    <div v-if="settingFreeTimeBeforeAfter.bookingSetting == 2 || settingFreeTimeBeforeAfter.bookingSetting == 3">
      <div class="!text-[14px] !font-[300] !text-[#222222] flex items-center justify-center !w-[140px] !rounded-[4px] !bg-[#F8F8F8] !h-[32px]">
        <i class="fas fa-arrow-from-left !text-[20px] mr-[7px]"></i>
        <span class="!text-[#F44336] !font-[600]">後</span>
        の空き時間
      </div>
      <div class="relative w-[140px] h-[35px] mt-[6px]">
        <select class="text-center w-[140px] h-[35px] bg-[#FFFFFF] border border-solid border-[#E0E0E0] rounded-[3px] py-0 !text-[14px]" v-model="settingFreeTimeBeforeAfter.bookingFreeTimeAfter">
          <option value="10">10分</option>
          <option value="15">15分</option>
          <option value="30">30分</option>
          <option value="60">1時間</option>
          <option value="120">2時間</option>
        </select>
        <i class="fas fa-caret-down absolute right-[16.5px] top-[9.5px] text-[#888888]"></i>
      </div>
    </div>
  </div>

  <div class="text-[#222222] mt-[50px] !font-[600] text-[14px]">
    Googleカレンダー連携スケジュール前後の空き時間
  </div>
  <div class="text-[#222222] mt-4 !font-[300] text-[14px]">
    Googleカレンダーから連携されたスケジュールの前後に空き時間を設定できます。
  </div>
  <div class="relative w-[400px] my-[10px]">
    <select class="text-center w-[400px] h-[35px] bg-[#FFFFFF] border border-solid border-[#E0E0E0] rounded-[3px] py-0 !text-[14px]" v-model="settingFreeTimeBeforeAfter.calendarSetting">
      <option value="0">連携スケジュールの前後に空き時間を設定しない</option>
      <option value="1">連携スケジュールの「前」に空き時間を設定する</option>
      <option value="2">連携スケジュール予約の「後」に空き時間を設定する</option>
      <option value="3">連携スケジュールの前後に空き時間を設定する</option>
    </select>
    <i class="fas fa-caret-down absolute right-[16.5px] top-[9.5px] text-[#888888]"></i>
  </div>
  <div class="min-h-[200px]">
    <div v-if="settingFreeTimeBeforeAfter.calendarSetting != 0" class="flex">
      <div v-if="settingFreeTimeBeforeAfter.calendarSetting == 1 || settingFreeTimeBeforeAfter.calendarSetting == 3">
        <div class="!text-[14px] !font-[300] !text-[#222222] flex items-center justify-center !w-[140px] !rounded-[4px] !bg-[#F8F8F8] !h-[32px]">
          <span class="!text-[#5799DB] !font-[600]">前</span>
          の空き時間
          <i class="fas fa-arrow-from-right !text-[20px] ml-[7px]"></i>
        </div>
        <div class="relative w-[140px] h-[35px] mt-[6px]">
          <select class="text-center w-[140px] h-[35px] bg-[#FFFFFF] border border-solid border-[#E0E0E0] rounded-[3px] py-0 !text-[14px]" v-model="settingFreeTimeBeforeAfter.calendarBeforeFreeTime">
            <option value="10">10分</option>
            <option value="15">15分</option>
            <option value="30">30分</option>
            <option value="60">1時間</option>
            <option value="120">2時間</option>
          </select>
          <i class="fas fa-caret-down absolute right-[16.5px] top-[9.5px] text-[#888888]"></i>
        </div>
      </div>
      <div class="!bg-[#E0E0E0] !rounded-[4px] !font-[600] !text-[12px] !text-[#222222] !text-center w-[100px] h-[73px] mx-[10px] relative">
        <div class="absolute top-1/2 translate-y-[-50%] w-full !font-[600]">
          <p class="flex justify-center"><img src="/images/icon_gg.png" alt="" class="w-[15px] h-[15px] mr-[10px]">カレンダー</p>
          スケジュール
        </div>  
      </div>
      <div v-if="settingFreeTimeBeforeAfter.calendarSetting == 2 || settingFreeTimeBeforeAfter.calendarSetting == 3">
        <div class="!text-[14px] !font-[300] !text-[#222222] flex items-center justify-center !w-[140px] !rounded-[4px] !bg-[#F8F8F8] !h-[32px]">
          <i class="fas fa-arrow-from-left !text-[20px] mr-[7px]"></i>
          <span class="!text-[#F44336] !font-[600]">後</span>
          の空き時間
        </div>
        <div class="relative w-[140px] h-[35px] mt-[6px]">
          <select class="text-center w-[140px] h-[35px] bg-[#FFFFFF] border border-solid border-[#E0E0E0] rounded-[3px] py-0 !text-[14px]" v-model="settingFreeTimeBeforeAfter.calendarFreeTimeAfter">
            <option value="10">10分</option>
            <option value="15">15分</option>
            <option value="30">30分</option>
            <option value="60">1時間</option>
            <option value="120">2時間</option>
          </select>
          <i class="fas fa-caret-down absolute right-[16.5px] top-[9.5px] text-[#888888]"></i>
        </div>
      </div>
    </div>
  </div>
  <button class="w-[200px] h-[40px] text-[16px] border border-solid border-[#08BF5A] block rounded-[3px] mb-[16px] text-[#08BF5A]" @click="saveSettingFreeTime()">
    保存
  </button>
</div>

@push('js')
@endpush