@push('css')
@endpush
<div class="content">
  <label class="mb-[18px] text-[20px] font-semibold block text-[#222222]">予約受付上限（自動受付ストップ）の設定</label>
  <span class="text-[#222222] text-[14px]">店舗全体の同時受付上限</span>
  <div class="mt-[14px]">
    <img src="/images/booking_limit_1.png" width="600">
  </div>
  <div class="mb-[9px] mt-[23px]">
    <label for="limit_total_staff" class="w-full cursor-pointer mb-[8px]"
      v-show="detailCalendar.calendar_staff_type == CALENDAR_STAFF_TYPE_MULTIPLE_STAFF"
    >
      <input type="radio" class="text-[16px] accent-[green] !m-0 !mr-[5px] !cursor-pointer" value="2" name="settingSeasonLimitBooking" v-model="settingSeasonLimitBooking.setting_booking_limit" id="limit_total_staff">
      <span class="font-light text-[#888888] !cursor-pointer" style="line-height: normal">上限をその時間に受付可能なスタッフ数の合計にする</span>
    </label>
    <div class="ml-[20px] mb-[10px]" v-if="settingSeasonLimitBooking.setting_booking_limit == 2">
      <p class="text-[14px] font-semibold text-[#222222]">− シフトの合算設定</p>
      <label class="flex items-center mt-[10px] cursor-pointer">
        <input type="radio" class="!m-0 !mr-[6px]" name="shift_combine" value="1" v-model="settingSeasonLimitBooking.shift_combine">
        <span class="text-[#888888]">1つの予約を1人のスタッフのみで対応する（シフトの合算をしない）</span>
      </label>
      <label class="flex items-center mt-[15px] cursor-pointer">
        <input type="radio" class="!m-0 !mr-[6px]" name="shift_combine" value="2" v-model="settingSeasonLimitBooking.shift_combine">
        <span class="text-[#888888]">1つの予約を2人以上のスタッフで交代して対応する（シフトの合算をする）</span>
      </label>
      <p class="text-[#5799DB] cursor-pointer mt-[15px] text-[14px] underline" @click="showCombineModal = true">シフトの合算とは？</p>
    </div>
    <label for="unlimited" class="w-full cursor-pointer mb-[8px]">
      <input type="radio" class="text-[16px] accent-[green] !m-0 !mr-[5px] !cursor-pointer" value="0" name="settingSeasonLimitBooking" v-model="settingSeasonLimitBooking.setting_booking_limit" id="unlimited">
      <span class="font-light text-[#888888] !cursor-pointer" style="line-height: normal">上限を設定しない（同時間帯に何人でも受付可能）</span>
    </label>
    <label for="set_limit" class="w-full cursor-pointer">
      <input type="radio" class="text-[16px] accent-[green] !m-0 !mr-[5px] !cursor-pointer" value="1" name="settingSeasonLimitBooking" v-model="settingSeasonLimitBooking.setting_booking_limit" id="set_limit">
      <span class="font-light text-[#888888] !cursor-pointer" style="line-height: normal">上限を設定する</span>
    </label>
  </div>
  <div class="flex items-center" v-if="settingSeasonLimitBooking.setting_booking_limit == 1">
    <div class="!font-[300] text-[14px] text-[#222222] mr-2">
      同じ時間帯に
    </div>
    <input type="text" class="form-control !w-[80px] text-[14px] text-[#222222] !h-[38px] !rounded-[3px] border border-solid
                !border-[#E6E6E6] text-center" v-model="settingSeasonLimitBooking.limited_quantity" />
    <div class="!font-[300] text-[14px] text-[#222222] ml-2">
      人予約が入ったら、自動でその時間帯の受付をストップする
    </div>
  </div>
  <div v-if="detailCalendar.calendar_staff_type != 1">
    <div class="text-[#222222] text-[14px] mt-[55px]">スタッフごとの同時受付上限</div>
    <div class="mt-[15px]">
      <img src="/images/staff_limit_1.png" width="600">
    </div>
    <div class="mt-[25px]">
      <div class="flex mb-[6px]">
        <div class="w-[300px] !font-semibold">スタッフ</div>
        <div class="w-[30px] ml-[20px]"></div>
        <div class="w-[100px] !font-semibold">同時受付</div>
        <div class="w-[150px]"></div>
      </div>
      <template v-for="(staff, idxStaff) in settingSeasonLimitBooking.setting_staffs_limit">
        <div class="flex mb-[10px]">
          <div class="flex items-center w-[300px] bg-[#F8F8F8] rounded-[3px] p-[8px]">
            <img :src="staff.avatar_url ? (staff.avatar_url.includes('http') ? staff.avatar_url : '{{ env('URL_SERVER_MEDIA') }}' + staff.avatar_url) : '/images/blank_avatar.png'" class="w-[25px] h-[25px] rounded-[50%] mr-[10px]">
            <div class="grow whitespace-nowrap text-ellipsis overflow-hidden">@{{staff.staff_name}}</div>
          </div>
          <div class="flex items-center w-[30px] ml-[20px]">
            <input type="radio" class="text-[16px] accent-[green] !m-0 !mr-[5px] !cursor-pointer" value="1" :name="'setting_staff_limit_' + idxStaff" v-model="staff.setting_staff_limit">
          </div>
          <div class="flex items-center w-[100px]">
            <input :disabled="staff.setting_staff_limit == 0" type="text" class="form-control !w-[80px] text-[16px] text-[#222222] !h-[38px] !rounded-[3px] border border-solid
                !border-[#E6E6E6] text-center" v-model="staff.limited_quantity"/>
            <div class="!font-semibold text-[14px] text-[#222222] ml-2 mb-[-23px]">
              人
            </div>
          </div>
          <div class="flex items-center w-[150px] ml-[25px]">
            <label :for="'staff_unlimited_' + idxStaff" class="w-full cursor-pointer">
              <input type="radio" class="text-[16px] accent-[green] !m-0 !mr-[5px] !cursor-pointer !mt-[-1px]" value="0" :name="'setting_staff_limit_' + idxStaff" v-model="staff.setting_staff_limit" :id="'staff_unlimited_' + idxStaff">
              <span class="font-light text-[#888888] !cursor-pointer" style="line-height: normal">上限を設定しない</span>
            </label>
          </div>
        </div>
      </template>
    </div>
  </div>
  <button class="w-[200px] h-[40px] text-[16px] border border-solid border-[#08BF5A] block rounded-[3px] mb-[16px] text-[#08BF5A] mt-[25px]" @click="saveSettingLimitBooking()">
    保存
  </button>
</div>

@push('js')
@endpush