{% extends 'base.html.twig' %}
{% block stylesheets %}
    <style>
        .page-background{background-color:#3fc6f5 !important;height:100%;color:#fff;}
        .btn{font-size:24px !important;color:#fff;width:300px;padding:20px !important;margin:10px !important;border:solid 3px black !important;border-radius: 50px !important;}
        .great-button{background-color:green !important;}
        .average-button{background-color:yellow !important;color:#000 !important;}
        .poor-button{background-color:red !important;}
        .review-platform-button{background-color:#0b48a1;}
        .submit-button{background-color:#0b48a1;}
        textarea{color:#000 !important;height:300px;width: 300px;border:solid 3px black !important;}
    </style>
{% endblock %}

{% block body %}
    <div class="container-fluid page-background">
        <div class="row" style="background-color:#0d47a1;height: 70px;">
            <div class="col-md-12 text-center" style="padding:10px;">
                <img src="http://member.iserviceauto.com/iServiceLogo.png" height="50px;">
            </div>
        </div>
        {% if myReview == true %}
        <div class="row text-center" id="prompt-one">
            <h1>How was your visit?</h1>
            <p><a href="#" class="btn btn-big great-button" id="great">GREAT</a></p>
            <p><a href="#" class="btn btn-big average-button" id="average">AVERAGE</a></p>
            <p><a href="#" class="btn btn-big poor-button" id="poor">POOR</a></p>
        </div>
        <div class="row page-background text-center" style="display:none;" id="prompt-great">
            <h1>CHOOSE A REVIEW PLATFORM</h1>
            {% if myReviewSettings.facebookUrl %}
            <p><a href="{{ myReviewSettings.facebookUrl }}" target="_blank" class="btn btn-big review-platform-button" id="fb">Facebook</a></p>
            {% endif %}
            {% if myReviewSettings.googleUrl %}
            <p><a href="{{ myReviewSettings.googleUrl }}" target="_blank" class="btn btn-big review-platform-button" id="google">Google</a></p>
            {% endif %}
        </div>
        <div class="row page-background text-center" style="display:none;" id="prompt-average-poor">
            <h1>Please tell us how<br />we can improve.</h1>
            <textarea id="feedback" name="feedback" maxlength="240" placeholder="Type Here"></textarea>
            <p><a href="#" class="btn btn-big submit-button" id="submitForm">SUBMIT</a></p>
        </div>
        <div class="row page-background text-center" style="display:none;" id="prompt-thank-you">
            <h1>Thank you for taking<br />the time to help us<br /> improve. </h1>
            <img src="{{ logo }}" width="300px;">
        </div>
        {% else %}
        <div class="row page-background text-center">
            <div class="col-md-12">
                <h1>You have already left feedback.<br /> Thank you for taking the time to help us improve.</h1>
            </div>
        </div>
        {% endif %}
    </div>
{% endblock %}
{% block javascripts %}
    <script type="text/javascript">

        $.post('{{ member_url }}api/client-interaction/new', {
            repair_order_id: {{ repair_order.id }},
            type           : 'myREVIEW CUSTOMER VIEW'
        }, function (resp) {
            console.log(resp);
        }).error(function (e) {
            console.log(e);
        });

        function performanceClick() {
            $('#prompt-one').hide();
            $('#prompt-great').show();
        }

        $('body').on('click', '#great', function () {
            performanceClick();
            $.post('{{ member_url }}api/client-interaction/new', {
                repair_order_id: {{ repair_order.id }},
                type           : 'myREVIEW GREAT SELECTED'
            }, function (resp) {
                console.log(resp);
            }).error(function (e) {
                console.log(e);
            });
        });

        function feedbackForm() {
            $('#prompt-one').hide();
            $('#prompt-average-poor').show();
        }

        $('body').on('click', '#average', function () {
            feedbackForm();
            $.post('{{ member_url }}api/client-interaction/new', {
                repair_order_id: {{ repair_order.id }},
                type           : 'myREVIEW AVERAGE SELECTED'
            }, function (resp) {
                console.log(resp);
            }).error(function (e) {
                console.log(e);
            });
        });
        $('body').on('click', '#poor', function () {
            feedbackForm();
            $.post('{{ member_url }}api/client-interaction/new', {
                repair_order_id: {{ repair_order.id }},
                type           : 'myREVIEW POOR SELECTED'
            }, function (resp) {
                console.log(resp);
            }).error(function (e) {
                console.log(e);
            });
        });

        $('body').on('click', '#fb', function () {
            feedbackForm();
            $.post('{{ member_url }}api/client-interaction/new', {
                repair_order_id: {{ repair_order.id }},
                type           : 'myREVIEW FACEBOOK REVIEW SELECTED'
            }, function (resp) {
                console.log(resp);
            }).error(function (e) {
                console.log(e);
            });
        });

        $('body').on('click', '#google', function () {
            feedbackForm();
            $.post('{{ member_url }}api/client-interaction/new', {
                repair_order_id: {{ repair_order.id }},
                type           : 'myREVIEW GOOGLE REVIEW SELECTED'
            }, function (resp) {
                console.log(resp);
            }).error(function (e) {
                console.log(e);
            });
        });

        function submitClick() {
            $('#prompt-great').hide();
            $('#prompt-average-poor').hide();
            $('#prompt-thank-you').show();
        }

        $('body').on('click', '#submitForm', function () {
            submitClick();
            var text = 'myREVIEW NOTE: ' + $('textarea#feedback').val();
            $.post('{{ member_url }}api/client-interaction/new', {
                repair_order_id: {{ repair_order.id }},
                type           : text
            }, function (resp) {
                console.log(resp);
            }).error(function (e) {
                console.log(e);
            });
        });

        $('body').on('click', '.review-platform-button', function () {
            submitClick();
        });

    </script>
{% endblock %}