$(document).ready(function(){

	var storeSelect = $('#store_select');
	var planSelect = $('#plans .plan_select');
	var storeID = $('#store_select').val();

    var url = window.location.href;
    var urlParams = new URLSearchParams(window.location.search);
    var menuName = urlParams.get('menu');


	// フォーム検証用のライブラリ
	var formValidate = $('#reservation form').formValidate();

	var calendar = $('#calendar').calendar();
	var selectPlan = $('.plan_select').selectPlan();
	var estimate = $('#estimate').estimate();
	var timetable = $('#sched').timetable();

	var _siblingEl;

	function init() {
		estimate.setStudioName();
		estimate.renderList();
		_state.storeId = storeSelect.val();
	}

	calendar.events.onLoad = function() {
		// console.log('loaded');
		timetable.init();
	}

	calendar.events.onMonthChange = function() {
		timetable.init();
	}

	// on calendar date change
	calendar.events.onDateChange = function(date) {

		_state.date = date;

		if(_state.holiday != _state.date.weekend) {
			_state.holiday = _state.date.holiday;
			estimate.priceCompute();
		}

		// set estaimate date
		var date_text = date.year+'年'+date.month+'月'+date.day+'日'+'（'+date.weekdayJP+'）';
		$('#estimate .est_date').text(date_text);
		$('#sched').removeClass('hidden');

		timetable.renderTimetable();

		scrollTo('#sched');
	};

	// before form submit
	formValidate.events.beforeSubmit = function(_callback) {

		var day = _state.date.day;
		var dayData = _state.calendarTimes[day];

		var val = $('input[name="ご予約時間"]:checked').val();
		var errorCount = 0;

		timetable.ajaxGetTimetable(day, dayData, function(){ 
			if(val && val !== undefined) {
				val = parseInt(val);
	
				$.each(_state.calendarTimes[day].timetable, function(i, data){
					if(val == data.id) {
						if(parseInt(data.status) != 0) { errorCount++; }
					}
				});
			}

			if(errorCount != 0) {
				timetable.init(function(){
					_callback();
				});
			}
			else {
				_callback();
			}

		});
	}

	// onchange time 
	timetable.events.onTimeChange = function(time) 
	{
		$('#estimate').removeClass('hidden');
		$('#applicant').removeClass('hidden');
		$('#estimate .est_time').text(time);

		scrollTo('#estimate');
	}

	// on Store select change
	storeSelect.on("change", function() {

		storeID = storeSelect.val();
		_state.storeId = storeID;

		selectPlan.renderPlan(storeID,menuName);

		estimate.priceCompute();
		estimate.setStudioName();

		// clear
		$('.plan_box').html('');
		$('.reserve').addClass('hidden');
		$('.est_date').html('');
		$('.est_time').html('');
		$('#estimate').addClass('hidden');
		$('#applicant').addClass('hidden');
		$('#reservation .step3').hide();
	});

	selectPlan.renderPlan(storeID,menuName);

	// on select plan change
	selectPlan.events.onChange = function(data){

		if(data.calendar_note) {
			$('#calendar .caution_msg span').html(data.calendar_note);
			$('#calendar .caution_msg').show();
		} else {
			$('#calendar .caution_msg').hide();
		}
		
		if(data.fee_note) {
			$('#estimate .caution_msg span').html(data.fee_note);
			$('#estimate .caution_msg').show();
		} else {
			$('#estimate .caution_msg').hide();
		}

		// set prices obj
		_state.planName = data.plan_name;

		if(data.no_am !== undefined) {
			_state.no_am = data.no_am;
		} else {
			_state.no_am = false;
		}
		
		_state.planType = data.type;
		_state.prices = data.prices;
		_state.dateRange = data.date_range;
		_state.planTime = data.time;

		_siblingEl = $(document).find('.siblings_container .full:last-child');

		estimate.priceCompute();

		// clear
		$('.reserve').addClass('hidden');
		$('#estimate').addClass('hidden');
		$('#applicant').addClass('hidden');

		$('.est_date').html('');
		$('.est_time').html('');
		calendar.clear();

		if(!data.product_fee) {
			$('#estimate .price .alert').hide();
		}
	};

	// delete siblings
	$(document).on("click", '#plans .delete_siblings a', function(e){

		$(this).parents('li.delete_siblings').parent('ul.full').remove();
		//$('#plans .siblings_container .full:last-child').remove();
		estimate.priceCompute();

		e.preventDefault();
	});

	// compute price 
	$(document).on("change", '#plans input.price_compute', function(){

		estimate.priceCompute();
		return false;
	});

	// 撮影後の外出衣装レンタル
	$(document).on("click change", '.rental_toggle input[type="radio"]', function(){
		var parent = $('.rental_toggle input[type="radio"]').parents('ul.full');

		var count = 0;
		$.each($('.rental_toggle input[type="radio"]:checked'), function(){
			if($(this).val() != 0) { count++; }
		});

		if(count > 0) 	{ parent.next('.toggle').show(); }
		else {
			parent.next('.toggle').find('input[type="radio"]:checked').prop('checked', false).trigger("change");
			parent.next('.toggle').hide();
		} 
	});

	// 性別
	$(document).on('change', '.gender input[type="radio"]', function(){
		var val = parseInt($(this).val());
		var parent = $(this).parents('.td');

		var hasClass = false;
		if(parent.find('.row span').hasClass('boy_height')) {
			hasClass = true;
		}

		if(hasClass) {  

			parent.find(".toggle_show input, .toggle input").prop("checked", false);
			parent.find(".toggle").hide();

			if(val == 0) { 
				parent.find('.row .boy_height').removeClass('hidden');  
				parent.find('.row .girl_height').addClass('hidden');  
			} else {
				parent.find('.row .girl_height').removeClass('hidden');  
				parent.find('.row .boy_height').addClass('hidden');  
			}
		}

		estimate.priceCompute();

		return false;
	});

	// 撮影対象者（人数）
	$(document).on('change', 'li.count input[type="radio"]', function(e){
		var parent = $(this).parents('ul');
		var copyThis = parent.find('li.count').next('li.col2');
		var val = parseInt($(this).val());

		parent.find('li.count').nextAll('li').remove();

		for(var i = 0; i < val; i++) {

			var newEl = copyThis.eq(0).clone();
			newEl.find('input').each(function(){
				this.name = this.name.replace('[0]', '['+i+']');
				this.checked = false;
			});
			newEl.find('.th').html(i+1);
			newEl.find('.toggle').data('row', i);
			newEl.find('.toggle').hide();
			newEl.removeClass('hidden');
			newEl.appendTo(parent);
		}
	});

	// ご希望のプラン
	$(document).on('change', '.toggle_show input[type="radio"]', function(){
		var val = parseInt($(this).val());
		var isToggle = $(this).data('toggle');
		var toggleAll = $(this).data('toggle-all');
		var parent = $(this).parents('.toggle_show');
		
		var toggleDiv = (toggleAll === true) ? parent.nextAll('.toggle') : parent.next('.toggle');

		toggleDiv.find('.input_error').removeClass('input_error');

		if(val == 1 || isToggle === true) 	{ toggleDiv.show(); }
		else {
			toggleDiv.find('input[type="radio"]').trigger('change');
			toggleDiv.hide();
			toggleDiv.find('input[type="radio"]:checked').prop('checked', false).trigger("change");
			toggleDiv.find('input[type="checkbox"]:checked').prop('checked', false).trigger("change");
		}
	});

	// オプション / ご兄弟の入力欄を追加
	var siblingCount = 1;
	$(document).on('click', '.add_siblings', function(e){

		var parent = $(this).parents('.option');

		var newEl = _siblingEl.eq(0).clone();
		var count = parent.find('.siblings_container .full').length;

		newEl.find('input').each(function(){
			this.name = this.name.replace('[0]', '['+(siblingCount)+']');
			this.checked = false;
		});

		if(count > 0) {
			newEl.find('.mwform-radio-field').removeClass('input_validate');
			newEl.find('.mwform-radio-field .alert_text').text('');
			newEl.append('<li class="delete_siblings"><p class="btn"><a href="#"><span>この入力欄を削除する</span></a></p></li>');
		}

		newEl.appendTo($(document).find('.siblings_container'));

		siblingCount++;
		e.preventDefault();
	});

	calendar.events.onLoad = function(data){
		timetable.init();
	}

	// 上記プランで決定
	$('.plan_set a').on('click', function(e){

		formValidate.checkForm();

		if(!_state.error) {
			// console.log('calendar loaded');
			calendar.init();
			$('.reserve').removeClass('hidden');
			$('#reservation .step3').addClass('active');
			$('#reservation .step3').removeClass('fixed');
			
			scrollTo('#warning');
		}

		e.preventDefault();
	});

	init();

	function scrollTo(div) {
		 $('html, body').animate({
	        scrollTop: $(div).offset().top - 100
	    }, 500);
	}
});