<link rel='stylesheet' href='//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css'>

<style>
    .success-box {
        margin:50px 0;
        padding:10px 10px;
        border:1px solid #eee;
        background:#f9f9f9;
    }
    .success-box img {
        margin-right:10px;
        display:inline-block;
        vertical-align:top;
    }
    .success-box > div {
        vertical-align:top;
        display:inline-block;
        color:#888;
    }
    /* Rating Star Widgets Style */
    .rating-stars ul {
        list-style-type:none;
        padding:0;

        -moz-user-select:none;
        -webkit-user-select:none;
    }
    .rating-stars ul > li.star {
        display:inline-block;

    }
    /* Idle State of the stars */
    .rating-stars ul > li.star > i.fa {
        font-size:2.5em; /* Change the size of the stars */
        color:#ccc; /* Color on idle state */
    }
    /* Hover state of the stars */
    .rating-stars ul > li.star.hover > i.fa {
        color:#FFCC36;
    }
    /* Selected state of the stars */
    .rating-stars ul > li.star.selected > i.fa {
        color:#FF912C;
    }
</style>

<div class="modal fade" id="track_unreported" tabindex="-1" role="dialog" aria-labelledby="track_unreported" aria-hidden="true" data-id="0">
    <div class="modal-dialog mat_box" role="document">
        <div class="modal-content">
            <div class="modal-body">
				<div class="no-track-found" style="padding: 30px 10px;"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M10,17L5,12L6.41,10.58L10,14.17L17.59,6.58L19,8M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z"></path></svg> {{LANG The track report was successfully deleted.}}</div>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="review_track" tabindex="-1" role="dialog" aria-labelledby="report_track" aria-hidden="true">
    <div class="modal-dialog mat_box create_playlist" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">{{LANG Review track.}}</h5>
            </div>
            <form method="post" action="" id="track-review-form">
                <div class="alert alert-danger alert-empty" id="output-review-track-errors"></div>
                <div class="create_playlist_innr">
                    <div class="play_info">
                        <div class="form-group mat_input" style="text-align: initial;">
                            <textarea name="track_review_description" id="track_review_description" rows="5" style="width: 100%;" placeholder="{{LANG Please enter your review.}}"></textarea>
                            <br><br>

                            <section class='rating-widget'>
                                <!-- Rating Stars Box -->
                                <div class='rating-stars text-center'>
                                    <ul id='stars'>
                                        <li class='star' title='Poor' data-value='1'>
                                            <i class='fa fa-star fa-fw'></i>
                                        </li>
                                        <li class='star' title='Fair' data-value='2'>
                                            <i class='fa fa-star fa-fw'></i>
                                        </li>
                                        <li class='star' title='Good' data-value='3'>
                                            <i class='fa fa-star fa-fw'></i>
                                        </li>
                                        <li class='star' title='Excellent' data-value='4'>
                                            <i class='fa fa-star fa-fw'></i>
                                        </li>
                                        <li class='star' title='WOW!!!' data-value='5'>
                                            <i class='fa fa-star fa-fw'></i>
                                        </li>
                                    </ul>
                                </div>
                            </section>


                        </div>
                    </div>
                </div>
                <input type="hidden" id="review_track_id" name="id">
                <input type="hidden" id="review_track_oid">
                <input type="hidden" id="track_stars" name="track_stars" value="0">
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">{{LANG Cancel}}</button>
                    <button type="submit" class="btn btn-primary btn-mat" disabled="disabled" id="btn-review-track-submit">{{LANG Submit}}</button>
                </div>
            </form>
        </div>
    </div>
</div>
<script>
    $(document).ready(function(){

        /* 1. Visualizing things on Hover - See next part for action on click */
        $('#stars li').on('mouseover', function(){
            var onStar = parseInt($(this).data('value'), 10); // The star currently mouse on

            // Now highlight all the stars that's not after the current hovered star
            $(this).parent().children('li.star').each(function(e){
                if (e < onStar) {
                    $(this).addClass('hover');
                }
                else {
                    $(this).removeClass('hover');
                }
            });

        }).on('mouseout', function(){
            $(this).parent().children('li.star').each(function(e){
                $(this).removeClass('hover');
            });
        });

        $('#track_review_description').bind('input propertychange', function() {
            if(this.value.length){
                var ratingValue = parseInt($('#stars li.selected').last().data('value'), 10);
                if (ratingValue > 1) {
                    $('#btn-review-track-submit').removeAttr('disabled');
                }
            }
        });

        /* 2. Action to perform on click */
        $('#stars li').on('click', function(){
            var onStar = parseInt($(this).data('value'), 10); // The star currently selected
            var stars = $(this).parent().children('li.star');

            for (i = 0; i < stars.length; i++) {
                $(stars[i]).removeClass('selected');
            }

            for (i = 0; i < onStar; i++) {
                $(stars[i]).addClass('selected');
            }

            // JUST RESPONSE (Not needed)
            var ratingValue = parseInt($('#stars li.selected').last().data('value'), 10);
            var msg = "";
            if (ratingValue > 1) {
                $('#track_stars').val(ratingValue);
                if( $('#track_review_description').val() !== '' ) {
                    $('#btn-review-track-submit').removeAttr('disabled');
                }
                msg = "Thanks! You rated this " + ratingValue + " stars.";
            }
            else {
                msg = "We will improve ourselves. You rated this " + ratingValue + " stars.";
            }

        });


    });

    $(document).ready(function() {
        var options = {
            url: "{{CONFIG ajax_url}}/review-track?hash_id=" + getHashID(),
            beforeSubmit:  function () {
                $('#output-review-track-errors').removeClass('alert-success').addClass('alert-danger');
                $('#output-review-track-errors').empty();
                $("#btn-review-track-submit").text("{{LANG Please wait..}}");
            },
            success: function (data) {
                $("#btn-review-track-submit").text("{{LANG Submit}}");
                if (data.status == 200) {
                    $('#output-review-track-errors').addClass('alert-success').removeClass('alert-danger');
                    $('#output-review-track-errors').text("{{LANG Thanks for your submission.}}");
                    setTimeout(function () {
                        $('#track-review-form')[0].reset();
                        $('#review_track').modal('hide');
                        closeModal();


                        goToAjaxLink('track/'+$('#review_track_oid').val());

                        $('#output-review-track-errors').empty();
                    }, 3000);
                } else if (data.status == 400) {
                    var errros = data.errors.join("<br>");
                    $('#output-review-track-errors').html(errros);
                }
            }
        };

        $('#track-review-form').ajaxForm(options);
    });
</script>