$(document).ready(function(){
	$('select.select-ticket').multilineSelectmenu({
		maxHeight: 60
	})
	.on("change", function(event, param) {
		//service = $(this).val();
		$(this).closest('.table-ticket').find('.error-ticket').hide();
	});

	$('#form').submit(function(e){
		okToPost = true;
		var ticketDate = Array();
		var ticketType = Array();
		idx = 0;
		$('.table-ticket').each(function(){
			if($(this).find('.datevalue').val()=='') {
				$(this).closest('.table-ticket').find('.error-date').show().html("You haven't chosen a date for ticket.");
				okToPost = false;
			}
			var rowTicket = $(this).find('.select-ticket');
			if($(this).find('.select-ticket').val()==null) {
				$(this).closest('.table-ticket').find('.error-ticket').show().html("チケットの種類を選択しませんでした。");
				okToPost = false;
			}
			ticketDate[idx] = $(this).find('.datevalue').val();
			ticketType[idx++] = $(this).find('.select-ticket').val();
		});
		if(okToPost && ticketDate.length>1) {
			for(i=0; i<ticketDate.length; i++) {
				for(j=i+1; j<ticketDate.length; j++) {
					if(i!=j && ticketDate[i]==ticketDate[j] && ticketType[i]==ticketType[j]) {
						okToPost = false;
					}
				}
			}
			if(!okToPost) {
				$('#alert-form').dialog({
					autoOpen: true,
					modal: true,
					position: { my: 'center top', at: 'center top+200', of: window },
					width: 540,
					height: 'auto',
					resizable: false,
					open: function(event, ui) { $(this).html("You have chosen the same tickets for the same dates several times. Please correct it."); },
					title: "A problem has been detected in the sent information",
					buttons: { "閉じる": function() { $(this).dialog('close'); } }
				})
				.click(function(event) { event.preventDefault(); });
			}
		}
		if(okToPost)
			$(this).unbind('submit').submit();
		else {
			e.preventDefault();
			return false;
		}
	});

	$('.datepicker').datepicker({
		dateFormat: 'yy MM dd',
		altFormat: 'yymmdd', 
		minDate: '+1',
		maxDate: new Date(2025, 11, 31),
		defaultDate: '+1',
		autoSize: true
	}).each(function() {
		$(this).datepicker("option", "altField", $(this).next());
		$(this).val("日付を選択");
	})
	.on("change", function(event, param) {
		var div = $(this).parents('div');
		var date = div.find('.datevalue').val();
		var index = parseInt(this.id.split('-')[1]);
		populateTicket(div, date, index, param);
	});

	$('#popup-opendate').magnificPopup({
		type: 'inline',
		tClose: "閉じる (Esc)",
		tLoading: "Loading..."
	});

	$('.check-opendate').change(function(event) {
		var checked = ($(this).prop('checked')) ? 1 : 0;
		$(this).closest('div').find('.opendatevalue').val(checked);
		if(checked==1)
			$('#popup-opendate').magnificPopup('open');
	});

	function populateTicket(div, date, index, param) {
		$('#waiting-spin').show();
		$.ajax({
			url: '/purchase/populate_tickets-ajax.php',
			data: 'date='+date+'&ticket='+index+'&select='+param,
			success: function (data) {
				div.find('.select-ticket')
					.empty()
					.html(data)
					.removeAttr('disabled')
					.multilineSelectmenu('enable')
					.multilineSelectmenu('destroy')
					.multilineSelectmenu({
						width: 320,
						maxHeight: 60
					})
					.addClass('select-ticket')
					.focus();
				div.closest('.table-ticket').find('.error-date').hide();
				$('#waiting-spin').fadeOut(20);
			}
		});
	}


	$('#button-add_ticket').click(function(event) {
		event.preventDefault();
		if($(this).hasClass('disabled'))
			return false;

		var cloneIndex = $(".table-ticket").length;
		var newTicket = $(".table-ticket:last").clone(false);
		newTicket.find('.title-number').html(cloneIndex+1);

		newTicket
			.insertAfter('.table-ticket:last')
			.find('select.select-ticket')
			.attr('style', '')
			.next('span')
			.remove();
        newSelectTicket = newTicket.find('select.select-ticket');
        newSelectTicket.multilineSelectmenu({
			width: 320,
			maxHeight: 60
		})
		.prop('disabled',true)
		.html("<option value='' selected disabled>チケットの種類を選択してください</option>")
		.multilineSelectmenu('refresh');

		newTicket.find('input.datefield').datepicker();

		newTicket.find('.button-del')
			.show()
			.on("click", function(event, param) {
				event.preventDefault();
				removeTicket($(this));
			});

		newTicket
			.find('input.datepicker')
			.attr("id", "")
			.removeClass('hasDatepicker')
			.removeData('datepicker')
			.unbind()
			.datepicker({
				dateFormat: 'yy MM dd',
				altFormat: 'yymmdd', 
				minDate: '+1',
				maxDate: new Date(2025, 11, 31),
				defaultDate: '+1',
				autoSize: true
			}).each(function() {
				$(this).datepicker("option", "altField", $(this).next());
				$(this).val("日付を選択"); // Choose a date
				newTicket.find('.datevalue').val('');
			})
			.on("change", function(event, param) {
				var currIndex = parseInt(newTicket.find('.title-number').html())-1;
				var newDate = newTicket.find('.datevalue').val();
				populateTicket(newTicket, newDate, currIndex, param);
			});

		newTicket
			.find('.check-opendate')
			.prop('checked',false)
			.on("change", function(event, param) {
				var checked = ($(this).prop('checked')) ? 1 : 0;
				$(this).closest('div').find('.opendatevalue').val(checked);
			});
		newTicket.find('.opendatevalue').val(0)

		newTicket
			.find('.check-museum')
			.prop('checked',false)
			.on("change", function(event, param) {
				var checked = ($(this).prop('checked')) ? 1 : 0;
				$(this).closest('div').find('.museumvalue').val(checked);
			});
		newTicket.find('.museumvalue').val(0)
	});

	$('.check-museum').change(function(event) {
		var checked = ($(this).prop('checked')) ? 1 : 0;
		$(this).closest('div').find('.museumvalue').val(checked);
	});

	$('.button-del').click(function(event) {
		event.preventDefault();
		removeTicket($(this));
	});

	function removeTicket(e) {
		e.parent('div').parent('div').remove();
		var ticket = 1;
		$('.title-number').each(function(){
			$(this).html(ticket);
			$(this).closest('div').find('.title-number').html(ticket++);
		});
		var rowCount = $('#table-options').find('.table-ticket').length;
		if($('#button-add_ticket').hasClass('disabled'))
			$('#button-add_ticket').removeClass('disabled');
	}

	$('.ajax-popup').magnificPopup({
		type: 'ajax',
		tClose: "閉じる (Esc)",
		tLoading: "Loading..."
	});
});