$('body').on('change', '.custom-file-input', function() {
   var fileName = $(this).val().split('\\').pop();
   $(this).next('.custom-file-label').addClass("selected").html(fileName);
}); 

$('.add-more-media-btn').on('click', function() {
	var append_data = '<div class="media-wrapper">'+
						'<div class="custom-file" style="width: 93%; float: left;">'+
				            '<input id="media" name="media[]" type="file" class="custom-file-input">'+
				            '<label for="logo" class="custom-file-label">Choose file...</label>'+
				        '</div>'+
						'<button type="button" class="btn btn-danger delete-media-btn" data-media-id="0"'+
							'style="width: 7%; padding-left: 0; padding-right: 0;"'+
						'><i class="fa fa-trash"></i></button>'+
					'</div>';

	// $('.media-wrapper').eq(0).clone().find("input:file").val("").end().appendTo('.media-container');
	$('.media-container').append(append_data);
}); 

$('body').on('click', '.delete-media-btn', function() {
	var media = $(this);
	var media_id = $(this).data('media-id');
	var go_ahead = confirm('Are you sure');
	
	if(go_ahead) {
		if(media_id !== 0) {
			$.ajax({
				type: 'get',
				url: '/backend/report/media/' + media_id + '/delete',
				success: function (res) {
					media.parent('.media-wrapper').remove();
				}
			})
		} else {
			media.parent('.media-wrapper').remove();
		}
	}
});

$("#report_form").validate({ 
	rules: {
		location_required: {
			required: true
		}
	},
	messages: {
		location_required: "Location is required"
	},
	ignore:":not(:visible)"
});


$(".select2-control").select2({ width: '100%' });
$(".select2-free-text").select2({
	width: '100%',
	tags: true,
	createTag: function (params) {
		return {
			id: params.term,
			text: params.term,
			newOption: true
		}
	}
});

$('.summernote').summernote({
	placeholder: 'Description', 
	tabsize: 2, 
	height: 400,
	callbacks: {	
		onPaste: function (e) {
	        var bufferText = ((e.originalEvent || e).clipboardData || window.clipboardData).getData('Text');
	        e.preventDefault();
	        document.execCommand('insertText', false, bufferText);
	    }
	}
});

$('body').on('change', '.location_accuracy_field', function() {
	showHideLocaitons($(this).data('marker'));
});


function showHideLocaitons(marker_key) {
	$('#location-'+ marker_key +' .location_province_wrapper').hide();
	$('#location-'+ marker_key +' .location_district_wrapper').hide();
	$('#location-'+ marker_key +' .location_municipality_wrapper').hide();
	$('#location-'+ marker_key +' .location_ward_wrapper').hide();
	$('#location-'+ marker_key +' .location_hlcit_wrapper').hide();

	if($('#location-'+ marker_key +' .location_accuracy_field').val().length) {
		$('#location-'+ marker_key +' .location_hlcit_wrapper').show();
	}

	if($('#location-'+ marker_key +' .location_accuracy_field').val() == 'province') {
		$('#location-'+ marker_key +' .location_province_wrapper').show();
	}
	if($('#location-'+ marker_key +' .location_accuracy_field').val() == 'district') {
		$('#location-'+ marker_key +' .location_province_wrapper').show();
		$('#location-'+ marker_key +' .location_district_wrapper').show();
	}
	if($('#location-'+ marker_key +' .location_accuracy_field').val() == 'municipality') {
		$('#location-'+ marker_key +' .location_province_wrapper').show();
		$('#location-'+ marker_key +' .location_district_wrapper').show();
		$('#location-'+ marker_key +' .location_municipality_wrapper').show();
	}
	if($('#location-'+ marker_key +' .location_accuracy_field').val() == 'ward' || $('#location-'+ marker_key +' .location_accuracy_field').val() == 'exactlocation') {
		$('#location-'+ marker_key +' .location_province_wrapper').show();
		$('#location-'+ marker_key +' .location_district_wrapper').show();
		$('#location-'+ marker_key +' .location_municipality_wrapper').show();
		$('#location-'+ marker_key +' .location_ward_wrapper').show();
	}

	requiredCheck();
}

function requiredCheck() {
	$('.required').prop('required', function(){
		return  $(this).is(':visible');
	});
}

function incidentShowHide() {
	if($('.incident_checkbox').is(':checked')) {
		$('.coding_fields').show();
	} else {
		$('.coding_fields').hide();
	}

	requiredCheck();
}

function checkSelect() {
	violent_nonviolent = $('#violent_nonviolent').val();
	oneside_twoside = $('#oneside_twoside').val();

	if(violent_nonviolent == 'violent') {
		$('#oneside_twoside').parent().show();
		$('#collective_interpersonal').parent().show();
		$('#duration').parent().hide();
		$('.weapons_row').show();
		$('optgroup.optgroup-violent option').prop('disabled', false);
		$('.impacts_panel').show();
		$('.actor_2_perpetrator_title').html('Perpetrator');
	} else if(violent_nonviolent == 'nonviolent') {
		$('#collective_interpersonal').parent().hide();
		$('#oneside_twoside').parent().hide();
		$('#duration').parent().show();
		$('.weapons_row').hide();
		$('optgroup.optgroup-violent option').prop('disabled', true);
		$('.impacts_panel').hide();

		$('.actor_2_perpetrator_title').html('Target');
	} else {
		$('#duration').parent().hide();
		$('#oneside_twoside').parent().hide();
		$('#collective_interpersonal').parent().hide();
		$('.weapons_row').hide();
		$('optgroup.optgroup-violent option').prop('disabled', false);
		$('body li.select2-results__option:nth-child(2)').css('display', 'block');
		$('.impacts_panel').hide();
	}

	if(oneside_twoside == 'onesided') {
		$('.actor_2_perpetrator_title').html('Target');
	} else if (oneside_twoside == 'twosided'){
		$('.actor_2_perpetrator_title').html('Perpetrator');
	}

	$(".select2-control").select2({ width: '100%' });
}

function smsContentShowHide() {
	if($('.alert_type').val() == 0 || $('.alert_type').val() == 2) {
		$('.sms_content_group').show();
	} else {
		$('.sms_content_group').hide();
	}
}

$('.sms_content').on('keyup', function() {
	var count = $(this).val().length;
	$('#sms_content_count').html(count);
});

$('.alert_type').on('change', function() {
	smsContentShowHide();
});

$('#violent_nonviolent').change(function() {
	checkSelect()
});

$('#oneside_twoside').change(function() {
	checkSelect()
});

$('.incident_checkbox').on('change', function() {
	incidentShowHide();
});

$('body').on('change', '.location_province', function() {
	var marker = $(this).data('marker');

	$.ajax({
		type: "GET",
		url: "/backend/report/filter-province-district",
		data: {province_id: $(this).val()},
		success: function (res) {
			$('.location_district_' + marker).empty();
			$('.location_district_' + marker).append('<option value="">Select district</option>');
			for (var i = 0; i < res.length; i++) {
				$('.location_district_' + marker).append('<option value="'+ res[i].id +'">'+ res[i].title +'</option>');
			}

			$('.location_municipality_' + marker).empty();
			$('.location_municipality_' + marker).append('<option value="">First select district</option>');
			$('.location_ward_' + marker).empty();
			$('.location_ward_' + marker).append('<option value="">First select municipality</option>');

			$(".select2-control").select2({ width: '100%' });
		}
	})
});

$('body').on('change', '.location_district', function() {
	var marker = $(this).data('marker');

	$.ajax({
		type: "GET",
		url: "/backend/report/filter-district-municipality",
		data: {district_id: $(this).val()},
		success: function (res) {
			// console.log(res)
			$('.location_municipality_' + marker).empty();
			$('.location_municipality_' + marker).append('<option value="">Select municipality</option>');
			for (var i = 0; i < res.length; i++) {
				$('.location_municipality_' + marker).append('<option value="'+ res[i].id +'">'+ res[i].title +'</option>');
			}

			$('.location_ward_' + marker).empty();
			$('.location_ward_' + marker).append('<option value="">First select municipality</option>');

			$(".select2-control").select2({ width: '100%' });
		}
	})
});

$('body').on('change', '.location_municipality', function() {
	var marker = $(this).data('marker');

	$.ajax({
		type: "GET",
		url: "/backend/report/filter-municipality-ward",
		data: {municipality_id: $(this).val()},
		success: function (res) {
			// console.log(res)
			$('.location_ward_' + marker).empty();
			$('.location_ward_' + marker).append('<option value="">Select ward</option>');
			for (var i = 0; i < res.length; i++) {
				$('.location_ward_' + marker).append('<option value="'+ res[i].id +'">'+ res[i].title +'</option>');
			}

			$(".select2-control").select2({ width: '100%' });
		}
	})
});


$('body').on('click', '.select2-selection__choice', function(){
	// Get the desired text to copy
	var selectText = $(this).text();
	selectText = selectText.substr(1);
	
	// Create an input
	var input = document.createElement('input');
	// Set it's value to the text to copy, the input type doesn't matter
	input.value = selectText;
	// add it to the document
	document.body.appendChild(input);
	// call select(); on input which performs a user like selection  
	input.select();
	// execute the copy command, this is why we add the input to the document
	document.execCommand("copy");
	// remove the input from the document
	document.body.removeChild(input);
});
