@version(2)
@load('./css/booking.css')
@load('./lang')
@load('./js/booking.js')

@if ($is_staff_mode)
{{-- 담당자 모드: 지점, 담당자, 날짜, 시각을 차례로 고른다 --}}
<div class="hb hb-book" id="hbBook"
	data-resource="{{ (int)$resource->resource_srl }}"
	data-times-url="{{ getUrl('', 'act', 'procReservationGetTimes') }}"
	data-days-url="{{ getUrl('', 'act', 'procReservationGetOpenDays') }}"
	data-form-url="{{ getUrl('', 'mid', $mid, 'act', 'dispReservationForm', 'resource_srl', $resource->resource_srl) }}"
	data-any="{{ $allow_any_staff ? 'Y' : 'N' }}">

	<header class="hb-head">
		<span class="hb-label"><i></i>BOOKING</span>
		<h1 class="hb-title">{{ $resource->title }}</h1>
		@if (!empty($resource->summary))<p class="hb-note">{{ $resource->summary }}</p>@endif
	</header>

	<ol class="hb-steps">
		@if (count($branches) > 1)
		<li class="is-on" data-step="branch"><em>01</em><span>{{ $lang->hb_step_branch }}</span></li>
		@endif
		<li data-step="staff"><em>{{ count($branches) > 1 ? '02' : '01' }}</em><span>{{ $lang->hb_step_staff }}</span></li>
		<li data-step="date"><em>{{ count($branches) > 1 ? '03' : '02' }}</em><span>{{ $lang->hb_step_date }}</span></li>
	</ol>

	@if (count($branches) > 1)
	<section class="hb-panel">
		<h2 class="hb-panel-title">{{ $lang->hb_step_branch }}</h2>
		<ul class="hb-chips" id="hbBranches">
			@foreach ($branches as $b)
			<li><button type="button" class="hb-chip @if((int)$branch_srl === (int)$b->branch_srl) is-on @endif" data-branch="{{ (int)$b->branch_srl }}">{{ $b->name }}</button></li>
			@endforeach
		</ul>
	</section>
	@endif

	<section class="hb-panel">
		<h2 class="hb-panel-title">{{ $lang->hb_step_staff }}</h2>

		@if (empty($staff_list))
		<p class="hb-empty">{{ $lang->hb_no_staff }}</p>
		@else
		<ul class="hb-staff" id="hbStaff">
			@if ($allow_any_staff)
			<li>
				<button type="button" class="hb-person is-on" data-staff="0" data-price="{{ (int)$resource->price }}" data-duration="{{ (int)$resource->duration }}">
					<span class="hb-person-face is-any">
						<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" aria-hidden="true"><path d="M12 4v16M4 12h16" /></svg>
					</span>
					<span class="hb-person-name">{{ $lang->hb_any_staff }}</span>
					<span class="hb-person-role">{{ $lang->hb_any_staff_note }}</span>
				</button>
			</li>
			@endif

			@foreach ($staff_list as $hb_i => $s)
			<li>
				<button type="button" class="hb-person @if(!$allow_any_staff && $hb_i === 0) is-on @endif"
					data-staff="{{ (int)$s->staff_srl }}"
					data-price="{{ (int)$s->resolved_price }}"
					data-duration="{{ (int)$s->resolved_duration }}">
					<span class="hb-person-face">
						@if ($s->thumb)
						<img src="{{ $s->thumb }}" alt="" loading="lazy" />
						@else
						<em>{{ $s->initial }}</em>
						@endif
					</span>
					<span class="hb-person-name">{{ $s->name }}</span>
					@if ($s->position)<span class="hb-person-role">{{ $s->position }}</span>@endif
					<span class="hb-person-price">{{ (int)$s->resolved_price > 0 ? number_format((int)$s->resolved_price) : $lang->hb_ask }} / {{ (int)$s->resolved_duration }}{{ $lang->hb_minutes }}</span>
				</button>
			</li>
			@endforeach
		</ul>
		@endif
	</section>

	<section class="hb-panel">
		<h2 class="hb-panel-title">{{ $lang->hb_step_date }}</h2>

		{{-- 달력과 시간을 나란히 둔다. 한쪽만 쓰면 넓은 화면에서 오른쪽이 통째로 빈다 --}}
		<div class="hb-when">
		<div class="hb-cal">
			<div class="hb-cal-head">
				<button type="button" class="hb-cal-nav" data-month="-1" aria-label="{{ $lang->hb_prev_month }}">
					<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.2" aria-hidden="true"><path d="M15 6l-6 6 6 6" /></svg>
				</button>
				<strong id="hbMonth"></strong>
				<button type="button" class="hb-cal-nav" data-month="1" aria-label="{{ $lang->hb_next_month }}">
					<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.2" aria-hidden="true"><path d="M9 6l6 6-6 6" /></svg>
				</button>
			</div>
			<div class="hb-cal-week">
				@foreach (explode(',', (string)$lang->hb_weekday_short) as $wd)
				<span>{{ $wd }}</span>
				@endforeach
			</div>
			<div class="hb-cal-grid" id="hbGrid"></div>
		</div>

		<div class="hb-times" id="hbTimes" hidden>
			<h3 class="hb-times-title"><span id="hbTimesDate"></span></h3>
			<div class="hb-times-grid" id="hbTimesGrid"></div>
			<p class="hb-times-empty" id="hbTimesEmpty" hidden>{{ $lang->hb_no_times }}</p>
		</div>
		</div>
	</section>

	<div class="hb-bar" id="hbBar" hidden>
		<div class="hb-bar-sum">
			<b id="hbSumService">{{ $resource->title }}</b>
			<span id="hbSumRest"></span>
		</div>
		<a class="hb-btn" id="hbGo" href="#">
			<span>{{ $lang->hb_next_step }}</span>
			<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6" /></svg>
		</a>
	</div>
</div>

@else
{{-- 정원제 슬롯 모드는 기본 스킨과 같은 방식으로 둔다 --}}
<div class="hb hb-slot" id="rsv_calendar"
	data-resource="{{ $resource->resource_srl }}"
	data-slots-url="{{ getUrl('', 'act', 'procReservationGetSlots') }}"
	data-form-url="{{ getUrl('', 'mid', $mid, 'act', 'dispReservationForm', 'resource_srl', $resource->resource_srl) }}">

	<header class="hb-head">
		<span class="hb-label"><i></i>BOOKING</span>
		<h1 class="hb-title">{{ $resource->title }}</h1>
		@if (!empty($resource->summary))<p class="hb-note">{{ $resource->summary }}</p>@endif
	</header>

	<div class="hb-cal">
		<div class="hb-cal-head">
			<button type="button" class="hb-cal-nav" data-nav="-1" aria-label="{{ $lang->hb_prev_month }}">
				<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.2" aria-hidden="true"><path d="M15 6l-6 6 6 6" /></svg>
			</button>
			<strong id="rsv_cal_month"></strong>
			<button type="button" class="hb-cal-nav" data-nav="1" aria-label="{{ $lang->hb_next_month }}">
				<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.2" aria-hidden="true"><path d="M9 6l6 6-6 6" /></svg>
			</button>
		</div>
		<div class="hb-cal-grid" id="rsv_cal_grid" role="grid"></div>
	</div>

	<div class="hb-times" id="rsv_times" hidden>
		<h3 class="hb-times-title">{{ $lang->reservation_select_time }} <span id="rsv_times_date"></span></h3>
		<div class="hb-times-grid" id="rsv_times_grid"></div>
	</div>
</div>
@endif