@extends('template')
@section('title',"公設預約")
@section('content_title',"公設預約")

@section('content')


	<div style="width: 100%;background: #FFFFFF; font-size: 42px;">
		
		<div style="font-size: 82px;display: flex; align-items: center; padding: 32px 18px;">
			
			<img src="{{ asset('image/barcode.png') }}" style="width: 572px; height: 142px;">

			<div style="margin-left: 56px; display: flex; flex-direction:column;justify-content: center;align-items: center;">
				<span>70</span>
				<span style="font-size: 42px;">剩餘點數</span>
			</div>

			<img src="{{ asset('image/reservation.png') }}" style="width: 108px; height: 112px; margin-left: auto;">
		</div>

		<div style="font-size: 68px;display: flex; flex-direction: column;">

			<div style="padding: 56px 36px; display: flex; flex-direction: column;align-items: flex-end;">

				<div style="padding: 36px 52px;border:1px solid #000;position:relative;height: 286px;">
					<div>
						<span>健身房</span>
						<span style="font-size: 42px;margin-left: 28px">(10點/1小時)</span>
					</div>
					<div style="display: flex;font-size: 28px;">
						<div style="display: flex; flex-direction: column;">
							<span>開放時間：9:00~22:00</span>
							<span>人數上限：15</span>

							<span style="margin-top: 26px;width: 387px">*請控制每項器材使用時間</span>
						</div>
						<div style="display: flex;align-items: center;justify-content: center;">
							<button style="width: 138px; height: 106px;font-size: 42px;margin-left: 16px;border:1px solid #000;background-color: #fff;border-radius: 12px;white-space:nowrap;display: flex; align-items: center; justify-content: center;">預約</button>
						</div>
					</div>

					<img src="{{ asset('image/gym.jpg') }}" style="position: absolute; height: 248px; width: 286px;left: -262px; top: 55px;object-fit: cover;">
				</div>
			</div>

			<div style="padding: 56px 36px; display: flex; flex-direction: column;align-items: flex-end;">

				<div style="padding: 36px 52px;border:1px solid #000;position:relative;height: 286px;">
					<div>
						<span>會議室</span>
						<span style="font-size: 42px;margin-left: 28px">(10點/1小時)</span>
					</div>
					<div style="display: flex;font-size: 28px;">
						<div style="display: flex; flex-direction: column;">
							<span>開放時間：9:00~22:00</span>
							<span>人數上限：10</span>

							<span style="margin-top: 26px;width: 387px">*投影機使用完畢請收好放置原位</span>
						</div>
						<div style="display: flex;align-items: center;justify-content: center;">
							<button style="width: 138px; height: 106px;font-size: 42px;margin-left: 16px;border:1px solid #000;background-color: #fff;border-radius: 12px;white-space:nowrap;display: flex; align-items: center; justify-content: center;">預約</button>
						</div>

						<img src="{{ asset('image/meeting-room.jpg') }}" style="position: absolute; height: 248px; width: 286px;left: -262px; top: 55px;object-fit: cover;">
					</div>
				</div>
			</div>

			<div style="padding: 56px 36px; display: flex; flex-direction: column;align-items: flex-end;">

				<div style="padding: 36px 52px;border:1px solid #000;position:relative;height: 286px;">
					<div>
						<span>游泳池</span>
						<span style="font-size: 42px;margin-left: 28px">(10點/1小時)</span>
					</div>
					<div style="display: flex;font-size: 28px;">
						<div style="display: flex; flex-direction: column; width: 387px;">
							<span>開放日期：每年四月至十月</span>
							<span>開放時間：9:00~22:00</span>

							<span style="margin-top: 26px;max-width: 387px">*開放日期會隨天氣狀控調整</span>
						</div>
						<div style="display: flex;align-items: center;justify-content: center;">
							<button style="width: 138px; height: 106px;font-size: 42px;margin-left: 16px;border:1px solid #000;background-color: #fff;border-radius: 12px;white-space:nowrap;display: flex; align-items: center; justify-content: center;">預約</button>
						</div>

						<img src="{{ asset('image/swimming-pool.jpg') }}" style="position: absolute; height: 248px; width: 286px;left: -262px; top: 55px;object-fit: cover;">
					</div>
				</div>
			</div>

		</div>

	</div>

@endsection