@version(2)
@load('./css/salon.css')
@load('./lang')

@php
$hsv_days = explode(',', (string)$lang->hsl_weekdays);
$hsv_today = (int)date('w');
$hsv_address = trim($branch->address . ' ' . $branch->address_detail);
$hsv_map = is_numeric($branch->lat) && is_numeric($branch->lng);
$hsv_hero = count($images) ? $images[0] : (string)$branch->thumb;
$hsv_rest = count($images) > 1 ? array_slice($images, 1) : [];
@endphp

<div class="hsv">
	@if ($hsv_hero)
	<div class="hsv-hero" style="background-image:url('{{ $hsv_hero }}')">
		<span class="hsv-hero-veil"></span>
		<div class="hsv-hero-copy">
			@if ($branch->region)<span class="hsv-region">{{ $branch->region }}</span>@endif
			<h1 class="hsv-title">{{ $branch->name }}</h1>
			@if ($branch->summary)<p class="hsv-sum">{{ $branch->summary }}</p>@endif
		</div>
	</div>
	@else
	<header class="hsv-head">
		<span class="hsl-label"><i></i>SALON</span>
		<h1 class="hsv-title is-plain">{{ $branch->name }}</h1>
		@if ($branch->summary)<p class="hsv-sum is-plain">{{ $branch->summary }}</p>@endif
	</header>
	@endif

	<div class="hsv-cols">
		<div class="hsv-main">
			@if ($branch->content)
			<section class="hsv-sec">
				<h2 class="hsv-sec-title">ABOUT</h2>
				<div class="hsv-text">{!! $branch->content !!}</div>
			</section>
			@endif

			<section class="hsv-sec">
				<h2 class="hsv-sec-title">HOURS</h2>
				<table class="hsv-hours">
					<tbody>
						@foreach ($hsv_days as $wd => $wd_label)
						@php
						$h = $hours[$wd] ?? null;
						$closed = !$h || (string)$h->is_closed === 'Y' || !$h->open_time || !$h->close_time;
						$has_break = $h && $h->break_start && $h->break_end;
						@endphp
						<tr class="@if($wd === $hsv_today) is-today @endif">
							<th>{{ $wd_label }}</th>
							<td>
								@if ($closed)
								<span class="hsv-off">{{ $lang->branch_day_closed }}</span>
								@else
								{{ $h->open_time }} &ndash; {{ $h->close_time }}
								@if ($has_break)<small>{{ $lang->hsl_break }} {{ $h->break_start }} &ndash; {{ $h->break_end }}</small>@endif
								@endif
							</td>
						</tr>
						@endforeach
					</tbody>
				</table>

				@if (count($holidays))
				<ul class="hsv-holidays">
					@foreach ($holidays as $hd)
					@php
					$hd_once = (string)$hd->repeat_type === 'once';
					$hd_date = (string)$hd->holiday_date;
					$hd_when = $hd_once
						? (strlen($hd_date) === 8 ? (zdate($hd_date . '000000', $lang->hsl_date_format)) : $hd_date)
						: ((int)$hd->nth . ' / ' . ($hsv_days[(int)$hd->weekday] ?? ''));
					@endphp
					<li><b>{{ $hd_when }}</b> {{ $hd->reason }}</li>
					@endforeach
				</ul>
				@endif
			</section>

			@if (count($hsv_rest))
			<section class="hsv-sec">
				<h2 class="hsv-sec-title">GALLERY</h2>
				<ul class="hsv-gallery">
					@foreach ($hsv_rest as $img)
					<li><img src="{{ $img }}" alt="" loading="lazy" /></li>
					@endforeach
				</ul>
			</section>
			@endif
		</div>

		<aside class="hsv-side">
			<div class="hsv-card">
				<span class="hsv-open @if($open_now) is-open @endif">{{ $open_now ? $lang->branch_open_now : $lang->branch_closed_now }}</span>
				@if ($today_hours)
				<p class="hsv-today">{{ $today_hours->open_time }} &ndash; {{ $today_hours->close_time }}</p>
				@else
				<p class="hsv-today">{{ $lang->branch_today_closed }}</p>
				@endif

				<h2 class="hsv-card-title">FIND US</h2>
				<p class="hsv-address">
					@if ($branch->postcode)<span class="hsv-post">{{ $branch->postcode }}</span>@endif
					{{ $hsv_address }}
				</p>
				<button type="button" class="hsl-btn-line" data-copy="{{ $hsv_address }}" data-done="{{ $lang->branch_address_copied }}">{{ $lang->branch_copy_address }}</button>

				@if ($branch->tel)
				<p class="hsv-tel"><a href="tel:{{ $branch->tel }}">{{ $branch->tel }}</a></p>
				@endif

				@if ($hsv_map)
				<a class="hsl-btn" target="_blank" rel="noopener"
					href="https://map.kakao.com/link/map/{{ rawurlencode($branch->name) }},{{ $branch->lat }},{{ $branch->lng }}">
					<span>{{ $lang->branch_directions }}</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>
				@endif
			</div>

			@if (count($amenities))
			<div class="hsv-card">
				<h2 class="hsv-card-title">AMENITIES</h2>
				<ul class="hsv-amenities">
					@foreach ($amenities as $am)
					<li>{{ $am }}</li>
					@endforeach
				</ul>
			</div>
			@endif

			<a class="hsl-link" href="{{ getUrl('', 'mid', $module_info->mid, 'act', '') }}">
				<span>{{ $lang->hsl_all_salons }}</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>
		</aside>
	</div>
</div>

<script>
(function () {
	document.querySelectorAll('[data-copy]').forEach(function (btn) {
		btn.addEventListener('click', function () {
			var text = btn.getAttribute('data-copy') || '';
			if (!text) { return; }
			if (navigator.clipboard && navigator.clipboard.writeText) {
				navigator.clipboard.writeText(text);
			} else {
				var el = document.createElement('textarea');
				el.value = text;
				document.body.appendChild(el);
				el.select();
				try { document.execCommand('copy'); } catch (e) {}
				document.body.removeChild(el);
			}
			var old = btn.textContent;
			btn.textContent = btn.getAttribute('data-done') || old;
			setTimeout(function () { btn.textContent = old; }, 1500);
		});
	});
})();
</script>