{% 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:200px;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 isReview == true %}
        <div class="row text-center" id="prompt-visit">
            <h1>How was your visit?</h1>
            <p><a href="#" class="btn btn-big visit great-button" id="GREAT">GREAT</a></p>
            <p><a href="#" class="btn btn-big visit average-button" id="AVERAGE">AVERAGE</a></p>
            <p><a href="#" class="btn btn-big visit poor-button" id="POOR">POOR</a></p>
        </div>
        <div class="row page-background text-center" style="display:none;" id="prompt-iservice">
            <h1>Would you like an iSERVICE video inspection next time you visit?</h1>
            <p><a href="#" class="btn btn-big btn-success iservice" id="YES">YES</a></p>
            <p><a href="#" class="btn btn-big btn-danger iservice" id="NO">NO</a></p>

        </div>
        <div class="row page-background text-center" style="display:none;" id="prompt-feedback">
            <h1 style="padding:20px;">Transparency means  a lot to us. Tell us about your iService Video experience.</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           : 'isREVIEW CUSTOMER VIEW'
        }, function (resp) {
            console.log(resp);
        }).error(function (e) {
            console.log(e);
        });

        function performanceClick() {
            $('#prompt-visit').hide();
            $('#prompt-iservice').show();
        }

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

        function feedbackForm() {
            $('#prompt-iservice').hide();
            $('#prompt-feedback').show();
        }

        $('body').on('click', '.iservice', function () {
            feedbackForm();
            $.post('{{ member_url }}api/client-interaction/new', {
                repair_order_id: {{ repair_order.id }},
                type           : 'isREVIEW VIDEO INSPECTION NEXT VISIT ' + this.id + ' SELECTED'
            }, function (resp) {
                console.log(resp);
            }).error(function (e) {
                console.log(e);
            });
        });

        function submitClick() {
            $('#prompt-visit').hide();
            $('#prompt-iservice').hide();
            $('#prompt-feedback').hide();
            $('#prompt-thank-you').show();
        }

        $('body').on('click', '#submitForm', function () {
            submitClick();
            var text = 'isREVIEW 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);
            });
        });
    </script>
{% endblock %}