@php
	/*--------------------------------------------
	이용약관 동의 뷰 template
	--------------------------------------------*/

	// 다중호출 시 javascript binding의 중복을 방지하기 위해 랜덤키를 생성
	$element_key = 'key-'.Str::random(16);
@endphp

@push('head')
<style type="text/css">
	.agree-content{margin-bottom:10px;}
	.agree-content .textarea{margin-bottom:5px;height:140px;background-color:#fff;font-size:13px;overflow-y:scroll;}
	.agree-content .textarea h4{font-size:14px;margin:16px 0 8px;}
	.agree-content .btn-view{position:absolute;top:50%;right:0;transform:translate(0,-50%);-webkit-transform:translate(0,-50%);border-color:#ccc !important;}

	.agree-read-check input:disabled + label {
		opacity: 0.5; /* 투명도를 낮춰서 흐리게 표시 */
		cursor: not-allowed; /* 마우스 포인터 변경 */
	}
</style>
<script type="text/javascript">
	$(document).ready(function() {
		var section = $('section.{{ $element_key }}');

		// form validate
		section.closest('form').addValidateRules({
			'agree_check[0]':'required',
			'agree_check[1]':'required',
		});

		section.find('input[type=checkbox]').change(function() {
			var group = section.find('input[type=checkbox]');
			if ($(this).val() == '') {  // 전체
				if ($("input[name='agree_check[0]']").prop("disabled")) {
					alert('{{ Lang::get('template_process.msg.read_terms_check') }}');
					$(this).prop("checked", false);
					return false;
				}
				group.prop('checked', $(this).is(':checked'));
				if ($(this).is(':checked')) {
					group.valid();
				}
			} else {
				group.filter('[value=""]').prop('checked', group.not('[value=""]').not(':checked').length < 1);
			}
		});

		section.find('.btn-view').click(function() {
			var url = "{{ URL::route('document') }}/" + $(this).data('view');
			openWindow(url, '', 800, '70%', '10%', 'center', {resizable:'no'});
		});
	});


	window.onload = function() {
		$(".agree-read-check").on("click", function () {
			if ($("input[name='agree_check[0]']").prop("disabled")) {
				alert('{{ Lang::get('template_process.msg.read_terms_check') }}');
			}
		});

		$("#agree-content-tearms").on("scroll", function () {
			let box = $(this);
			if (box.scrollTop() + box.innerHeight() >= box[0].scrollHeight - 10) {
				$("input[name='agree_check[0]']").prop("disabled", false);
			}
		});

		$(".agree-all-button").on("click", function () {
			$("input[name='agree_check[0]']").prop("disabled", false);
		});
	}
</script>
@endpush

<section class="{{ $element_key }}">
	<div class="form-group el-group">
		<div class="el-group-cont">
			<div class="input-block agree-content">
				<div class="checkboxradio has-success">
					<input type="checkbox" id="{{ $element_key }}_agree_all_check" value=""/><label for="{{ $element_key }}_agree_all_check" style="font-weight:700">{{ Lang::get('template_process.desc.agree_all_items') }}</label>
				</div>
			</div>
		</div>
	</div>
	<div class="form-group el-group">
		<label class="el-group-title control-label">{{ Lang::get('template_process.word.terms_and_conditions') }}</label>
		<div class="el-group-cont">
			<div class="input-block agree-content">
				<div class="textarea" id="agree-content-tearms">
					@include('document.content.agree_process', ['agency_name' => isset($agency_name) ? $agency_name : '', 'ceo_name' => isset($ceo_name) ? $ceo_name : ''])
				</div>
				<div class="relative">
					<div class="checkboxradio has-success agree-read-check">
						<input type="checkbox" id="{{ $element_key }}_agree1_check" disabled name="agree_check[0]" value="Y" /><label for="{{ $element_key }}_agree1_check">{{ Lang::get('template_process.desc.agree_terms_and_conditions') }}</label>
					</div>
					<button type="button" class="btn btn-sm btn-view agree-all-button" data-view="agree_process{{ isLogin('staff') ? '?agency_id='.Request::get('agency_id') : '' }}">{{ Lang::get('template_process.word.view_all') }}</button>
				</div>
			</div>
		</div>
	</div>
	<div class="form-group el-group">
		<label class="el-group-title control-label"><span class="ib">개인정보 제3자&nbsp;</span><span class="ib">제공 동의 확인</span></label>
		<div class="el-group-cont">
			<div class="input-block agree-content">
				<div class="textarea">
					@include('document.content.agree_privacy', ['agency_name' => isset($agency_name) ? $agency_name : ''])
				</div>
				<div class="relative">
					<div class="checkboxradio has-success">
						<input type="checkbox" id="{{ $element_key }}_agree3_check" name="agree_check[1]" value="Y"/><label for="{{ $element_key }}_agree3_check">개인정보 제3자 제공에 대해 고객에게 안내하였습니다.</label>
					</div>
				</div>
			</div>
		</div>
	</div>
</section>