@inject('FrontendPresenter', 'App\Presenters\FrontendPresenter')
@section('json-ld', Breadcrumbs::view('breadcrumbs::json-ld', 'search'))
@extends('layouts.frontend')

@section('other_body')
	{{-- mobile search --}}
	<nav class="pushy pushy-left py-3 d-flex flex-column">
	    <div class="px-3 pushy-content">
		    <a class="menu-btn text-dark" href="javascript:;">
		        <i class="fas fa-chevron-left mr-2"></i> 返回
		    </a>
		    <div class="list-group my-5">
		    	<form name="search-school-mobile" id="search-school-mobile" method="get" action="{{ route('school.search') }}">
		    		{{-- type --}}
			        <a class="list-group-item collapse-arrow-v" data-toggle="collapse" data-id="a-type" href="#collapse-m-school">
	                    <div data-target="type">
	                    	@switch(request()->input('type'))
	                    		@case('degree')
	                    			留學
	                    			@break
	                    		@default
	                    			遊學
	                    	@endswitch
	                	</div>
			        </a>
			        <div id="collapse-m-school" class="collapse border-top" role="tabpanel">
			        	<input type="hidden" name="type" value="{{ request()->input('type', 'language') }}">
			            <a class="list-group-item bg-light setValM" data-field="type" data-value="language" href="#">遊學</a>
			            <a class="list-group-item bg-light setValM" data-field="type" data-value="degree" href="#">留學</a>
			        </div>

			        {{-- country --}}
			        <a class="list-group-item collapse-arrow-v" data-toggle="collapse" data-id="a-country" href="#collapse-m-countries">
                    	<div data-target="country">
                    		@if (!empty(request()->input('country')))
	                            @foreach ($country_list as $k => $v)
	                            	@if (request()->input('country') == $v->country_name_en)
	                            		{{$v->country_name}}
	                            	@endif
	                            @endforeach
                    		@else
                    			所有國家
                    		@endif
                    	</div>
			        </a>
			        <div id="collapse-m-countries" class="collapse border-top" role="tabpanel">
			        	<input type="hidden" name="country" value="{{ request()->input('country') }}">
			            <a class="list-group-item bg-light setValM" href="#" data-field="country" data-value="">所有國家</a>
			            @foreach ($country_list as $k => $v)
			            	<a class="list-group-item bg-light setValM" href="#" data-field="country" data-value="{{$v->country_name_en}}">{{$v->country_name}}</a>
			            @endforeach
			        </div>

			        {{-- city --}}
			        <div id="city_m-selector" class="selector-m @if (empty(request()->input('country'))) disabled @endif">
				        <a class="list-group-item collapse-arrow-v" data-toggle="collapse" data-id="a-city" href="#collapse-m-city">
				            城市
                            @if (request()->has('city') && count(request()->input('city'))>0)
                            	<span class="badge badge-primary badge-counter" id="city_m-counter">{{ count(request()->input('city')) }}</span>
                            @else
                            	<span id="city_m-counter"></span>
                            @endif
				        </a>
				        <div id="collapse-m-city" class="collapse border-top" role="tabpanel">
				            <div class="list-group-item" id="city_m-wrap">
	                        	@if (request()->has('country') && !empty(request()->input('country')))
	                                {!!$FrontendPresenter->getCityMCheckbox()!!}
	                            @endif
				            </div>
				        </div>
				    </div>

				    {{-- term --}}
				    <div id="term_m-selector" class="selector-m">
				        <a class="list-group-item collapse-arrow-v" data-toggle="collapse" data-id="a-term" href="#collapse-m-week">
                        	<div data-target="term">
                        		@if (!empty(request()->input('term')))
		                           {{ request()->input('term') }}週
                        		@else
                        			週數
                        		@endif
                        	</div>
				        </a>
				        <div id="collapse-m-week" class="collapse border-top" role="tabpanel">
                        	<input type="hidden" name="term" value="{{ request()->input('term') }}">
                        	<a class="list-group-item setValM" href="#" data-field="term" data-value="">週數</a>
                        	@foreach ($term as $t)
                        		<a class="list-group-item setValM" href="#" data-field="term" data-value="{{$t}}">{{$t}}週</a>
                        	@endforeach
				        </div>
				    </div>

				    {{-- course --}}
				    <div id="course_m-selector" class="selector-m">
				        <a class="list-group-item collapse-arrow-v" data-toggle="collapse" data-id="a-course" href="#collapse-m-course">
                            <div>
                                所有課程
                                @if (request()->has('course') && count(request()->input('course'))>0)
                                	<span class="badge badge-primary badge-counter" id="course_m-counter">{{ count(request()->input('course')) }}</span>
                                @else
                                	<span id="course_m-counter"></span>
                                @endif
                            </div>
				        </a>
				        <div id="collapse-m-course" class="collapse border-top" role="tabpanel">
				            <div class="list-group-item">
				                {!! $FrontendPresenter->getCourseMCheckbox() !!}
				            </div>
				        </div>
				    </div>

				    {{--keyword--}}
			        <div class="input-group mt-7">
			            <input type="text" name="keyword" autocomplete="off" class="form-control" placeholder="搜尋關鍵字" value="{{ request()->input('keyword') }}">
			            <div class="input-group-append">
				            <button class="btn btn-primary"><i class="fas fa-search"></i></button>
				        </div>
			        </div>
			    </form>
    		</div>
    	</div>
	    <!--<div class="border-top mt-auto p-5">
	        <a class="btn btn-block btn-primary" href="javascript:void(0);">儲存</a>
	        <a class="d-block text-info text-center mt-4 clear_m" href="javascript:void(0);">
	            <i class="fas fa-sm fa-redo-alt mr-2"></i>RESET
	        </a>
	    </div>-->
	</nav>
	<div class="site-overlay"></div>
@stop

@section('content')

	<nav class="nav-main school-search-container">
	    <div class="nav-secondary">
	        <div class="container px-0 px-lg-3">
	        	<form name="search-school" id="search-school" method="get" action="{{ route('school.search') }}">
		            <nav class="navbar d-none d-lg-block">
		                <ul class="nav nav-pills nav-fill nav-search">
		                	{{--type--}}
		                    <li class="nav-item dropdown">
		                        <a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
		                            <div data-target="type">
		                            	@switch(request()->input('type'))
		                            		@case('degree')
		                            			留學
		                            			@break
		                            		@default
		                            			遊學
		                            	@endswitch
		                        	</div>
		                        </a>
		                        <div class="dropdown-menu">
		                        	<input type="hidden" name="type" value="{{ request()->input('type', 'language') }}">
		                            <a class="dropdown-item setVal" data-field="type" data-value="language" href="#">遊學</a>
		                            <a class="dropdown-item setVal" data-field="type" data-value="degree" href="#">留學</a>
		                        </div>
		                    </li>

		                    {{--country--}}
		                    <li class="nav-item dropdown d-none d-lg-block">
		                        <a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
		                        	<div data-target="country">
		                        		@if (!empty(request()->input('country')))
				                            @foreach ($country_list as $k => $v)
				                            	@if (request()->input('country') == $v->country_name_en)
				                            		{{$v->country_name}}
				                            	@endif
				                            @endforeach
		                        		@else
		                        			所有國家
		                        		@endif
		                        	</div>
		                        </a>
		                        <div class="dropdown-menu">
		                        	<input type="hidden" name="country" value="{{ request()->input('country') }}">
		                            <a class="dropdown-item setVal" href="#" data-field="country" data-value="">所有國家</a>
		                            @foreach ($country_list as $k => $v)
		                            	<a class="dropdown-item setVal" href="#" data-field="country" data-value="{{$v->country_name_en}}">{{$v->country_name}}</a>
		                            @endforeach
		                        </div>
		                    </li>

		                    {{--city--}}
		                    <li class="nav-item dropdown d-none d-lg-block @if (empty(request()->input('country'))) disabled @endif" id="city-selector">
		                        <a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
		                            <div>
		                                城市
		                                @if (request()->has('city') && count(request()->input('city'))>0)
		                                	<span class="badge badge-primary badge-counter" id="city-counter">{{ count(request()->input('city')) }}</span>
		                                @else
		                                	<span id="city-counter"></span>
		                                @endif
		                            </div>
		                        </a>
		                        <div class="dropdown-menu p-5" id="city-wrap" style="width: 300px;">
		                        	@if (request()->has('country') && !empty(request()->input('country')))
		                                {!!$FrontendPresenter->getCityCheckbox()!!}
		                            @endif
		                        </div>
		                    </li>

		                    {{--term--}}
		                    <li class="nav-item dropdown d-none d-lg-block" id="term-selector">
		                        <a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
		                        	<div data-target="term">
		                        		@if (!empty(request()->input('term')))
				                           {{ request()->input('term') }}週
		                        		@else
		                        			週數
		                        		@endif
		                        	</div>
		                        </a>
		                        <div class="dropdown-menu">
		                        	<input type="hidden" name="term" value="{{ request()->input('term') }}">
		                        	<a class="dropdown-item setVal" href="#" data-field="term" data-value="">週數</a>
		                        	@foreach ($term as $t)
		                        		<a class="dropdown-item setVal" href="#" data-field="term" data-value="{{$t}}">{{$t}}週</a>
		                        	@endforeach
		                        </div>
		                    </li>

		                    {{--course--}}
		                    <li class="nav-item dropdown d-none d-lg-block" id="course-selector">
		                        <a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
		                            <div>
		                                所有課程
		                                @if (request()->has('course') && count(request()->input('course'))>0)
		                                	<span class="badge badge-primary badge-counter" id="course-counter">{{ count(request()->input('course')) }}</span>
		                                @else
		                                	<span id="course-counter"></span>
		                                @endif
		                            </div>
		                        </a>
		                        <div class="dropdown-menu" style="left: -230px; width: 660px;">
		                            <div class="p-5">
		                                <div class="form-row">
		                                    {!! $FrontendPresenter->getSystemCourseCheckbox() !!}
		                                </div>
		                            </div>
		                        </div>
		                    </li>

		                    {{--keyword--}}
		                    <li class="nav-item dropdown dropdown-filter btn-group">
		                        <input type="text" name="keyword" class="form-control" placeholder="搜尋關鍵字" value="{{ request()->input('keyword') }}">
		                        <button class="btn btn-primary" type="submit"><i class="fas fa-search"></i></button>
		                        <button class="btn btn-secondary px-2" type="button" id="reset-btn"><i class="fas fa-undo"></i></button>
		                    </li>
		                </ul>
		            </nav>
	            </form>
	        </div>
	        <div class="d-lg-none">
	            <a class="d-flex justify-content-between align-items-center text-black menu-btn px-4 py-3" href="javascript:;">
	                學校搜尋 <i class="fas fa-sliders-h"></i>
	            </a>
	        </div>
	    </div>
	</nav>

	<main class="main pt-6 school-search-main">
	    <div class="container">
	        <div class="d-flex align-items-center justify-content-between flex-wrap mb-6">
	            <div class="h4 font-weight-bold">共有 {{$school_count}} 所學校</div>
				<div class="breadcrumbs pt-0">
				    {{ Breadcrumbs::render('search') }}
				</div>
	            {{--<a class="btn btn-outline-primary" href="{{ route('search_language-school-search-map') }}?{{ http_build_query(request()->query()) }}">
	                <i class="fas fa-map"></i> 地圖
	            </a>--}}
	        </div>
	        <div class="row justify-content-center">
	            {{-- <div class="col-12 col-lg-8 d-none d-lg-block"> --}}
	            <div class="col-12 col-lg-8">
	                <div class="list-school">
	                    @foreach ($school_list as $k => $v)
	                    <div class="box-school mb-4">
	                        <div class="box">
	                            <div class="mb-4 mb-md-0">
	                                <div class="slider-school-gallery">
	                                @if (isset($v->images))
		                                @foreach ($v->images as $num => $i)
			                                @if ($num == 10)
			                                	@break
			                                @endif
			                                @if (env('IsDevel'))
			                                	<div class="slider-item" style="background-image: url(/assets/img/uploads/about-1.jpg);"><img src="/assets/img/ui/blank.png"></div>
			                                @else
												@php
													$tmpstr = $i->img_url;
                                        			$tmparr = explode('/', $tmpstr);
                                        			$tmpstr = str_replace($tmparr[count($tmparr)-1], 'vq360/'.$tmparr[count($tmparr)-1], $tmpstr);
												@endphp
			                                	<div class="slider-item" style="background-image: url({{$tmpstr}});"><img src="/assets/img/ui/blank.png"></div>
			                                @endif
		                                @endforeach
	                                @endif
	                                </div>
	                            </div>
	                            <div class="flex-column d-flex w-100 pl-0 pl-md-4">
	                                <div class="mb-auto">
	                                    <div class="row justify-content-between no-gutters">
	                                        <div class="col-lg-10 col-9">
	                                        <div class="h5 font-weight-bold">
	                                            {!! markKeyword($v->school_name, request()->input('keyword')) !!}
	                                        </div>
	                                        </div>
	                                    </div>
	                                <div class="text-muted my-1">
	                                    <i class="fas fa-sm fa-map-marker-alt"></i> {{ $FrontendPresenter->getSystemCountry($v->country) }} {{$v->school_city_tw ?? $v->school_city}}
	                                </div>
	                                @if (empty(request()->input('keyword')))
	                                	<p class="text-row-3">
	                                @else
	                                	<p>
	                                @endif
	                                    {!! markKeyword(nl2br($v->school_feature), request()->input('keyword')) !!}
	                                </p>
	                                </div>
	                                <div class="mt-4 md-md-auto d-block d-md-flex justify-content-between">
	                                    <a class="btn btn-more btn-primary" href="{{ route('school.detail', $v->school_uid) }}">了解更多</a>
	                                    <a class="btn-search-course collapse-arrow-v font-weight-bold" data-toggle="collapse" href="#collapse-school-{{$v->school_uid}}">課程資訊</a>
	                                </div>
	                            </div>
	                        </div>
	                        <div class="collapse" id="collapse-school-{{$v->school_uid}}">
	                            <table class="table table-rwd table-noborder m-0">
	                                <thead>
	                                    <tr class="bg-light">
	                                        <th>課程</th>
	                                        <th class="text-center">價格</th>
	                                        <th class="text-center">時程</th>
	                                        <th>&nbsp;</th>
	                                    </tr>
	                                </thead>
	                                <tbody>
	                                    @foreach ($v->courses as $sc)
											@foreach($sc->cost as $scd)
											<tr>
												<td class="td-head align-middle" data-label="課程">{{$sc->course_title_tw}}</td>
												<td class="text-lg-center align-middle" data-label="價格">{{ $sc->course_currency }} {{ number_format($scd->fee) }}</td>
												<td class="text-lg-center align-middle" data-label="時程">為期{{$scd->week}}週</td>
												<td>
													<a class="btn btn-block btn-outline-primary" href="{{ route('channel_appointment') }}" target="_blank">預約諮詢</a>
												</td>
											</tr>
												@break
											@endforeach
										@endforeach
	                                </tbody>
	                            </table>
	                        </div>
	                    </div>
	                    @endforeach
	                </div>
	                {{--<div class="text-center div_button">
	                    <a class="btn btn-outline-primary px-10 mx-1 cancel" href="javascript:;">取消</a>
	                    <a class="btn btn-primary mx-1 compare" href="javascript:;">比較學校</a>
	                </div>--}}
	                <nav class="mt-10">
	                    <!-- nav-pagination -->
	                    <div id="nav-pagination">
	                        {!! $FrontendPresenter->pagination($school_list) !!}
	                    </div>
	                    <!-- ./nav-pagination -->
	                </nav>
	            </div>
	        </div>
	    </div>
	    {{-- <div class="nav-mobile-search">
	        <a class="btn btn-outline-primary" href="{{ route('search_language-school-search-map') }}?{{ http_build_query(request()->query()) }}">
	            <i class="fas fa-sm fa-map"></i> 地圖
	        </a>
	        <a class="btn btn-primary menu-btn" href="javascript:;">
	            FILTER <span class="badge">2</span>
	        </a>
	    </div>--}}
	</main>

@stop
{{-- @include('frontend.module.modal-search-price') --}}

@section('other_modal')
    <!-- modal-索取報價 -->
    <div class="modal-search-price"></div>

    <!-- modal-states -->
    <div class="modal-states"></div>
    <!-- ./modal-states -->

	<div class="modal fade" id="modal-compare3" tabindex="-1" role="dialog" style="display:none">
	    <div class="modal-dialog modal-lg" role="document">
	        <div class="modal-content">
	            <div class="modal-header">
	                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
	                    <i class="fas fa-sm fa-times"></i>
	                </button>
	            </div>
	            <div class="modal-body px-6 px-md-10 compare_body">

	            </div>
	        </div>
	    </div>
	</div>

	<div class="modal fade" id="modal-limit" tabindex="-1" role="dialog" style="display:none">
	    <div class="modal-dialog" role="document">
	        <div class="modal-content">
	            <div class="modal-header">
	                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
	                    <i class="fas fa-sm fa-times"></i>
	                </button>
	            </div>
	            <div class="modal-body">
	                <div class="text-center">
	                    <img class="img-fluid mb-4" src="/assets/img/uploads/exceed-limited-pic.svg" alt="">
	                    <div class="h3 font-weight-bold">超過上限</div>
	                    <p>如欲使用學校比較功能，請先勾選學校，最多只可選擇3所。</p>
	                    <a class="btn btn-primary my-6 px-10" href="javascript:;" data-dismiss="modal">確認</a>
	                </div>
	            </div>
	        </div>
	    </div>
	</div>

	<div class="modal fade" id="modal-limit2" tabindex="-1" role="dialog" style="display:none">
	    <div class="modal-dialog" role="document">
	        <div class="modal-content">
	            <div class="modal-header">
	                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
	                    <i class="fas fa-sm fa-times"></i>
	                </button>
	            </div>
	            <div class="modal-body">
	                <div class="text-center">
	                    <img class="img-fluid mb-4" src="/assets/img/uploads/exceed-limited-pic.svg" alt="">
	                    {{-- <div class="h3 font-weight-bold">超過上限</div> --}}
	                    <p>如欲使用學校比較功能，請先勾選學校，最多只可選擇3所。</p>
	                    <a class="btn btn-primary my-6 px-10" href="javascript:;" data-dismiss="modal">確認</a>
	                </div>
	            </div>
	        </div>
	    </div>
	</div>
@stop
@section('js')
	<style type="text/css">
		.disabled {
			opacity: 0.3;
		}
		.disabled .dropdown-menu, .disabled.selector-m {
			display: none;
		}
	</style>
	<script src="/assets/js/vendor/jquery.pushy.min.js"></script>
	<script>
		@include('frontend.module.js-language-school')

		function calCount(field)
		{
			$('input[name="'+field+'[]"]').each(function(){
				$(this).on('click', function(){
					var counter=0;
					$('input[name="'+field+'[]"]').each(function(){
						if ($(this).prop('checked')==true) {
							counter++;
						}
					});
					if (counter>0) {
						if ($('#'+field+'-counter').hasClass('badge')) $('#'+field+'-counter').text(counter);
						else $('#'+field+'-counter').addClass('badge badge-primary badge-counter').text(counter);
					} else {
						$('#'+field+'-counter').removeClass('badge badge-primary badge-counter').text('');
					}
				});
			});
		}

		function setMode(mode)
		{
			if (mode=='degree') {
				$('#city-selector').addClass('disabled');
				$('#city-counter').removeClass('badge badge-primary badge-counter').text('');
				$('input[name="city[]"]').each(function(){
					$(this).prop('checked', false);
				});
				$('#term-selector').addClass('disabled');
				$('#course-selector').addClass('disabled');
				$('#course-counter').removeClass('badge badge-primary badge-counter').text('');
				$('input[name="course[]"]').each(function(){
					$(this).prop('checked', false);
				});
			} else {
				if ($('#search-school input[name=country]').val()!='') $('#city-selector').removeClass('disabled');
				$('#term-selector').removeClass('disabled');
				$('#course-selector').removeClass('disabled');
			}
		}

		function setModeM(mode)
		{
			if (mode=='degree') {
				$('#city_m-selector').addClass('disabled');
				$('#city_m-counter').removeClass('badge badge-primary badge-counter').text('');
				$('input[name="city_m[]"]').each(function(){
					$(this).prop('checked', false);
				});
				$('#term_m-selector').addClass('disabled');
				$('#course_m-selector').addClass('disabled');
				$('#course_m-counter').removeClass('badge badge-primary badge-counter').text('');
				$('input[name="course_m[]"]').each(function(){
					$(this).prop('checked', false);
				});
			} else {
				if ($('#search-school-mobile input[name=country]').val()!='') $('#city_m-selector').removeClass('disabled');
				$('#term_m-selector').removeClass('disabled');
				$('#course_m-selector').removeClass('disabled');
			}
		}

		$(document).ready(function(){
			setMode('{{ request()->input('type') }}');
			setModeM('{{ request()->input('type') }}');
			calCount('city');
			calCount('city_m');
			calCount('course');
			calCount('course_m');
		});

		$('.setVal').each(function(){
			$(this).on('click', function(e){
				e.preventDefault();
				var field = $(this).attr('data-field');
				var value = $(this).attr('data-value');
				var text = $(this).text();
				$('#search-school input[name="'+field+'"]').val(value);
				$('#search-school [data-target="'+field+'"]').text(text);
				$(this).closest('.dropdown-menu').removeClass('show');
				if (field=='country') {
					$('#city-counter').removeClass('badge badge-primary badge-counter').text('');
					if ($('#search-school input[name=type]').val()!='degree') $('#city-selector').removeClass('disabled');
					if (value=='') $('#city-selector').addClass('disabled');
  					$.ajax({
    					type: 'GET',
    					data: { key: 'city', country: value },
    					url: '{{ URL::route('school.search-ajax') }}',
    					success: function(result){
    						$('#city-wrap').html(result);
    						calCount('city');
    					}
    				});
				}
				if (field=='type') setMode(value);
			});
		});

		$('.setValM').each(function(){
			$(this).on('click', function(e){
				e.preventDefault();
				var field = $(this).attr('data-field');
				var value = $(this).attr('data-value');
				var text = $(this).text();
				$('#search-school-mobile input[name="'+field+'"]').val(value);
				$('#search-school-mobile [data-target="'+field+'"]').text(text);
				$('#search-school-mobile [data-id="a-'+field+'"]').attr('aria-expanded', 'false').addClass('collapsed');
				$(this).parent().removeClass('show');
				if (field=='country') {
					$('#city_m-counter').removeClass('badge badge-primary badge-counter').text('');
					if ($('#search-school-mobile input[name=type]').val()!='degree') $('#city_m-selector').removeClass('disabled');
					if (value=='') $('#city_m-selector').addClass('disabled');
  					$.ajax({
    					type: 'GET',
    					data: { key: 'city', country: value },
						url: '{{ URL::route('school.search-ajax') }}',
    					success: function(result){
    						$('#city_m-wrap').html(result);
    						calCount('city_m');
    					}
    				});
				}
				if (field=='type') setModeM(value);
			});
		});

		$('#reset-btn').on('click', function(e){
			e.preventDefault();
			location.href='{{ URL::route('search') }}';
		});

		$('.price').click(function () {
		    $('.course_name').html($(this).attr('course_name'));
		    $('.course_term').html($(this).attr('course_term'));
		    $('.course_term_pay').html($(this).attr('course_term_pay'));
		    $('#scd_id').val($(this).attr('scd_id'));

		    $('#modal-price').modal();
		});

		$('#form').submit(function(event) {
		    event.preventDefault();
		    $.ajax({
		        url: '{{ route('contact_add') }}',
		        data: $('#form').serialize(),
		        type: 'POST',
		        success: function(response) {
		            alert(response);
		            $('#name').val('');
		            $('#phone').val('');
		            $('#email').val('');
		            $('#customCheck-agree').prop('checked', false);
		            $('#modal-price').modal('hide');
		        }
		    });
		});
	</script>
@stop