<div class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" id="myModal" aria-hidden="true" style="display:none">
	<div class="modal-body change">
		<div class="">
			<div class="change__box" id="modalForm">
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true" onclick="closeModal()">×</button>

				<p>市区を選択してください。　※複数選択できます。</p>
				<div class="change__box-all">
					<label><input type="checkbox" class="chka" />横浜市 すべての地域</label>
				</div>
				<input type="hidden" name="area" id="area" value="" >
				<ul class="change__box-list">
				@foreach($side_area as $area)
					<li><label><input type="checkbox" name="area_check" value="{{$area['area_id']}}" class="chkb" data-count="{{$area['count']}}" />{{$area['name']}}({{$area['count']}})</label></li>
				@endforeach

				</ul>
				<div class="wrapper_btn_popup">
					<button type="button" class="btn btn-primary" style="text-align:center" onclick="searchArea();">この条件で検索</button>
				</div>
				<script type="application/javascript">
					function getTextOnly(text) {
						return text.replace('/\(.*?\)/g', '');
					}
					$('.chka').click(function() {
						$('.chkb').prop('checked', this.checked);
						var total = 0;
						var strChosen = "";
						var strSearchArea = "";
						var search_area = "";
						if (this.checked) {
							$('.chkb').each(function(i, obj) {
								total += parseInt($(this).data('count'));
								if (strChosen == "") {
									strChosen = getTextOnly($(this).parent().text());
									strChosen = strChosen.replace(/\(.*?\)/g, '');
									strSearchArea = $(this).data('count');
								} else {
									strChosen += ', ' + getTextOnly($(this).parent().text());
									strChosen = strChosen.replace(/\(.*?\)/g, '');
									strSearchArea += ', ' + $(this).data('count');
								}
								if(search_area != "") {
									search_area += ",";
								}
								search_area += $(this).val();
								$('#area').val(search_area);
							});
						}
						$("#total").html(total);
						if (total > 0) {
							$(".side-search__joken").find('dd').html(strChosen);
							$("#search_area").val(strSearchArea);
							$("#bottom_bar").show();
						} else {
							$(".side-search__joken").find('dd').html('');
							$("#bottom_bar").hide();
						}

					})

					//".checkbox" change
					$('.chkb').change(function() {
						if (false == $(this).prop("checked")) {
							$(".chka").prop('checked', false);
						}
						if ($('.chkb:checked').length == $('.chkb').length) {
							$(".chka").prop('checked', true);
						}
						var $checkeds = $('input[class=chkb]:checked');
						var total = 0;
						var strChosen = "";
						var strSearchArea = "";
						var search_area = "";
						$checkeds.each(function(i, obj) {

							total += parseInt($(this).data('count'));

							if (strChosen == "") {
								strChosen = getTextOnly($(this).parent().text());
								strChosen = strChosen.replace(/\(.*?\)/g, '');
								strSearchArea = $(this).data('count');
							} else {
								strChosen += ', ' + getTextOnly($(this).parent().text());
								strChosen = strChosen.replace(/\(.*?\)/g, '');
								strSearchArea += ', ' + $(this).data('count');
							}
							
							if(search_area != "") {
								search_area += ",";
							}
							search_area += $(this).val();
							$('#area').val(search_area);

						});
						if (total == 0) {
							$("#total").html(000);
						} else if (total < 10) {
							$("#total").html("00" + total);
						} else if (total < 100) {
							$("#total").html("0" + total);
						} else {
							$("#total").html(total);
						}

						if (total > 0) {
							$(".side-search__joken").find('dd').html(strChosen);
							$("#search_area").val(strSearchArea);
							$("#bottom_bar").show();
						} else {
							$(".side-search__joken").find('dd').html('');
							$("#bottom_bar").hide();
						}
					});
				</script>

			</div>
			<!--change__box-->

			<div id="bottom_bar" class="change__bar" style="display:none">
				<div class="wrapper">
					<span class="change__bar-count">該当物件数<strong><span id="total">000<span></strong>件</span>
					<input class="change__bar-clear" type="button" value="条件をクリア" />
					<input class="change__bar-button fas" type="button" value="&#xf002 この条件で検索" onclick="searchArea();"/>

				</div>
				<!--wrapper-->

			</div>
			<!--change__bar-->

		</div>
		<!--change-->
	</div>
</div>
<script>
	function searchArea() {
		var search_area = "";
		$('.chkb').each(function(i, obj) {
				if($(this).prop("checked")) {
					if(search_area != "") {
					search_area += ",";
				}
				search_area += $(this).val();
			}
		});
		window.location.href = "/buy/bukkenlist?area="+search_area;
		return false;
	}
</script>