jQuery(document).ready(function(){

    jQuery('body').on('change', "input[name='feedback']", function(){

        jQuery('.reason').hide();

        var value = jQuery(this).val();

        jQuery('.'+value+'-reason-wrapper').show();

    });

    jQuery('body').on('click', '#submit-feedback', function(){

        var feedback = jQuery("input[name='feedback']").val();

        var deactivate_url = jQuery(this).data('url');

        var reason = jQuery("input[name='"+feedback+"_reason']").val();

        var plugin = jQuery(this).data('plugin');

        var plugin_url = "";

        var postNonce = "";

        if(plugin === "music-selector"){

            plugin_url = MusicSelectorFeedbackAjax.ajaxurl;

            postNonce = MusicSelectorFeedbackAjax.postNonce;

            action = 'feedback_ajax_handler';

        }else if(plugin === "music-planner"){

            plugin_url = MusicPlanFeedbackAjax.ajaxurl;

            postNonce = MusicPlanFeedbackAjax.postNonce;

            action = 'feedback_mp_ajax_handler';

        }else if(plugin === "wedding-planner"){

            plugin_url = WeddingPlannerFeedbackAjax.ajaxurl;

            postNonce = WeddingPlannerFeedbackAjax.postNonce;

            action = 'feedback_wp_ajax_handler';

        }else if(plugin === "time-scheduler"){

            plugin_url = TimeSchedulerFeedbackAjax.ajaxurl;

            postNonce = TimeSchedulerFeedbackAjax.postNonce;

            action = 'feedback_ts_ajax_handler';
        }

	    jQuery.ajax({

    		url: plugin_url,
    		data:{
    			'action': action,
    			'feedback' : feedback,
    		    'reason': reason,
    			'postNonce': postNonce,
    			'fn': 'process-feedback'
    		},
    		dataType: 'json',
            complete: function(){

                window.location = deactivate_url;

            },
    		success:function(data){
                console.log(data);
    		},
    		error: function(errorThrown){
    			console.log(errorThrown);
    		}

        });

    });

    function appendModal(){

        var modal = '<div class="bootstrap-iso"><div style="margin-top: 50px" class="modal fade" id="feedback-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">'

            +'<div class="modal-dialog" id="feedback-modal" role="document">'

                +'<div class="modal-content">'

                    +'<div class="modal-body">'
                        +'<div class="container-fluid">'
                            +'<div style="margin-top: 20px; color:#0073aa; margin-bottom: 20px; font-size: 16px"> <strong>If you have a moment, please let us know why you are deactivating:</strong></div>'
                            +'<div class="radio">'
                                +'<label style="font-size: 15px">'
                                    +'<input type="radio" name="feedback" id="r1" value="option1">'
                                    +'I couldn’t understand how to make it work'
                                +'</label>'
                            +'</div>'
                            +'<div class="form-group option1-reason-wrapper reason" style="display:none">'
                                +'<label for="option1-reason">What exactly did you have issues with?</label>'
                                +'<input type="text" class="form-control" name="option1_reason" id="option1-reason" >'
                            +'</div>'
                            +'<div class="radio">'
                                +'<label style="font-size: 15px">'
                                    +'<input type="radio" name="feedback" id="r2" value="option2">'
                                    +'I found a better plugin'
                                +'</label>'
                            +'</div>'
                            +'<div class="form-group option2-reason-wrapper reason" style="display:none">'
                                +'<label for="option2-reason">What’s the plugins name?</label>'
                                +'<input type="text" class="form-control" name="option2_reason" id="option2-reason" >'
                            +'</div>'
                            +'<div class="radio">'
                                +'<label style="font-size: 15px">'
                                    +'<input type="radio" name="feedback" id="r3" value="option3">'
                                    +'The plugin is great, but I need a specific feature that you don’t support'
                                +'</label>'
                            +'</div>'
                            +'<div class="form-group option3-reason-wrapper reason" style="display:none">'
                                +'<label for="option3-reason">What is the specific feature?</label>'
                                +'<input type="text" class="form-control" name="option3_reason" id="option3-reason" >'
                            +'</div>'
                            +'<div class="radio">'
                                +'<label style="font-size: 15px">'
                                    +'<input  type="radio" name="feedback" id="r4" value="option4" >'
                                    +'The plugin is not working?'
                                +'</label>'
                            +'</div>'
                            +'<div class="form-group option4-reason-wrapper reason" style="display:none">'
                                +'<label for="option4-reason">Can you provide us some more detail?</label>'
                                +'<input type="text" class="form-control" name="option4_reason" id="option4-reason" >'
                            +'</div>'
                            +'<div class="radio">'
                                +'<label style="font-size: 15px">'
                                    +'<input type="radio" name="feedback" id="r5" value="option5" >'
                                    +'It’s not what I was looking for'
                                +'</label>'
                            +'</div>'
                            +'<div class="form-group option5-reason-wrapper reason" style="display:none">'
                                +'<label for="option5-reason">What are you looking for?</label>'
                                +'<input type="text" class="form-control" name="option5_reason" id="option5-reason" >'
                            +'</div>'
                            +'<div class="radio">'
                                +'<label style="font-size: 15px">'
                                    +'<input type="radio" name="feedback" id="r6" value="option6" >'
                                    +'The plugin didn’t work as expected'
                                +'</label>'
                            +'</div>'
                            +'<div class="form-group option6-reason-wrapper reason" style="display:none">'
                                +'<label for="option6-reason">What was the issue</label>'
                                +'<input type="text" class="form-control" name="option6_reason" id="option6-reason" >'
                            +'</div>'
                            +'<div class="radio">'
                                +'<label style="font-size: 15px">'
                                    +'<input  type="radio" name="feedback" id="r7" value="option7" >'
                                    +'Other'
                                +'</label>'
                            +'</div>'
                            +'<div class="form-group option7-reason-wrapper reason" style="display:none">'
                                +'<label for="option7-reason">Please let us know a little more</label>'
                                +'<input type="text" class="form-control" name="option7_reason" id="option7-reason" >'
                            +'</div>'

                        +'</div>'
                        +'<div class="modal-footer">'
                            +'<button type="button" data-url="" data-plugin="" id="submit-feedback" class="btn btn-default" data-dismiss="modal">Submit & Deactivate</button>'
                            +'<button type="button" class="btn btn-primary"  data-dismiss="modal">Cancel</button>'
                        +'</div>'
                    +'</div>'
                +'</div>'
            +'</div'
        +'</div></div>';

        jQuery('body').append(modal);

    }

    jQuery('body').on('click', '.ms-deactivate', function(event){

        event.preventDefault();

        var submit_btn = jQuery('.bootstrap-iso').find('#feedback-modal .modal-footer #submit-feedback');

        submit_btn.data('url', jQuery(this).attr('href'));

        submit_btn.data('plugin', 'music-selector');

        jQuery('#feedback-modal').modal('show');

    });

    jQuery('body').on('click', '.mp-deactivate', function(event){

        event.preventDefault();

        var submit_btn = jQuery('.bootstrap-iso').find('#feedback-modal .modal-footer #submit-feedback');

        submit_btn.data('url', jQuery(this).attr('href'));

        submit_btn.data('plugin', 'music-planner');

        jQuery('#feedback-modal').modal('show');

    });

    jQuery('body').on('click', '.wp-deactivate', function(event){

        event.preventDefault();

        var submit_btn = jQuery('.bootstrap-iso').find('#feedback-modal .modal-footer #submit-feedback');

        submit_btn.data('url', jQuery(this).attr('href'));

        submit_btn.data('plugin', 'wedding-planner');

        jQuery('#feedback-modal').modal('show');

    });

    jQuery('body').on('click', '.ts-deactivate', function(event){

        event.preventDefault();

        var submit_btn = jQuery('.bootstrap-iso').find('#feedback-modal .modal-footer #submit-feedback');

        submit_btn.data('url', jQuery(this).attr('href'));

        submit_btn.data('plugin', 'time-scheduler');

        jQuery('#feedback-modal').modal('show');

    });

    jQuery('body').on('shown.bs.modal', '#feedback-modal', function () {

        jQuery("input[name='feedback']").prop('checked', false);

        jQuery(this).find('.form-control').val('');

        jQuery('.reason').hide();

    });


    appendModal();
});
