{% extends 'base.html.twig' %}
{% block stylesheets %}
    <style>
        .btn {
            border-radius: 50px !important;
        }

        /* Hide the browser's default radio button */
        .container input {
            position: absolute;
            opacity: 0;
            cursor: pointer;
        }

        /* Show the indicator (dot/circle) when checked */
        .container input:checked ~ .checkmark:after {
        }

        /* Style the indicator (dot/circle) */
        .container .checkmark:after {
            top: 9px;
            left: 9px;
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: white;
        }
        .waiverButton{
            height:75px !important;
            font-size:36px !important;
            color:#000 !important;
            border: 4px solid black !important;
            background-color: yellow !important;
            border-radius: 20px !important;
            font-weight: bold !important;
        }
        .modal-content{
            background-color:#0d47a1 !important;
            color:#ffffff !important;
        }

        input {
            padding: .5em;
            margin: .5em;
        }
        select {
            padding: .5em;
            margin: .5em;
        }

        #signatureparent {
            color:darkblue;
            background-color:darkgrey;
            /*max-width:600px !important;*/
            padding:20px;
        }

        /*This is the div within which the signature canvas is fitted*/
        #signature {
            border: 2px dotted black;
            background-color:lightgrey;
        }

        /* Drawing the 'gripper' for touch-enabled devices */
        html.touch #content {
            float:left;
            width:92%;
        }
        html.touch #scrollgrabber {
            float:right;
            width:4%;
            margin-right:2%;
            background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAFCAAAAACh79lDAAAAAXNSR0IArs4c6QAAABJJREFUCB1jmMmQxjCT4T/DfwAPLgOXlrt3IwAAAABJRU5ErkJggg==)
        }
        html.borderradius #scrollgrabber {
            border-radius: 1em;
        }
        .btn{font-size:30px !important; font-weight: bold;}
    </style>

{% endblock %}
{% block modal %}
    <!--Waiver Modal -->
    <div class="modal modal-info fade scale" id="modal-default-waiver" tabindex="-1" role="dialog"
         aria-labelledby="modal-default-info" aria-hidden="true">
        <div class="modal-dialog modal-primary" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    <h3 class="modal-title text-center" id="modal-default-info-label"><strong>Estimate Authorization</strong></h3>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-12">
                            {{ waiver.text|raw }}
                        </div>
                    </div>
                </div>
                <div class="modal-footer text-center">
                    <button class="btn btn-block waiverButton" id="waiverCustomerApproved">I Understand</button>
                </div>
            </div>
        </div>
    </div>
{% endblock %}
{% block body %}
    <form method="post" id="waiverSignature" action="{{ path('repair-waiver-signature', {('hash'):hash}) }}">
    <div class="container-fluid">
        <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>
        <div class="row">
            <div class="col-md-12 text-center">
                <div>
                    <div id="content">
                        <div id="signatureparent">
                            <div><h3>Use your finger to sign your<br />name to authorize today's visit.</h3></div>
                            <div id="signature"></div>
                        </div>
                        <input type="hidden" id="signatureImageCode" name="signatureImageCode">
                    </div>
                    <div id="tools"></div>
                    <div id="scrollgrabber"></div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <button class="btn btn-block btn-success" style="height:75px;margin-top:20px;" id="submit">SUBMIT</button>
            </div>
        </div>
    </div>
    </form>
{% endblock %}
{% block javascripts %}
    <script type="text/javascript">
        function logClientInteraction(type) {
            $.post('{{ member_url }}api/client-interaction/new', {
                repair_order_id: {{ repair_order.id }},
                type           : type
            }, function (resp) {
                console.log(resp);
            }).error(function (e) {
                console.log(e);
            });
        }

        logClientInteraction('caq_customer_waiver_viewed');

        $(document).ready(function () {
            {% if waiver.active == true %}
                $('#modal-default-waiver').modal('show');
            {% endif %}
            $('body').on('click', '#waiverCustomerApproved', function () {
                logClientInteraction('caq_customer_waiver_acknowledged');
                $('#modal-default-waiver').modal('hide');
            });
        });

    </script>
    <script>
        (function($) {
            var topics = {};
            $.publish = function(topic, args) {
                if (topics[topic]) {
                    var currentTopic = topics[topic],
                        args = args || {};

                    for (var i = 0, j = currentTopic.length; i < j; i++) {
                        currentTopic[i].call($, args);
                    }
                }
            };
            $.subscribe = function(topic, callback) {
                if (!topics[topic]) {
                    topics[topic] = [];
                }
                topics[topic].push(callback);
                return {
                    "topic": topic,
                    "callback": callback
                };
            };
            $.unsubscribe = function(handle) {
                var topic = handle.topic;
                if (topics[topic]) {
                    var currentTopic = topics[topic];

                    for (var i = 0, j = currentTopic.length; i < j; i++) {
                        if (currentTopic[i] === handle.callback) {
                            currentTopic.splice(i, 1);
                        }
                    }
                }
            };
        })(jQuery);

    </script>
    <script src="{{ asset('js/jSignature/src/jSignature.js') }}"></script>
    <script src="{{ asset('js/jSignature/src/plugins/jSignature.CompressorBase30.js') }}"></script>
    <script src="{{ asset('js/jSignature/src/plugins/jSignature.CompressorSVG.js') }}"></script>
    <script src="{{ asset('js/jSignature/src/plugins/jSignature.UndoButton.js') }}"></script>
    <script>
        $(document).ready(function() {

            var $sigdiv = $("#signature").jSignature({ 'height': 300, 'width':'100%' })

                , $tools = $('#tools')
                , $extraarea = $('#displayarea')
                , pubsubprefix = 'jSignature.demo.'


            $('#submit').bind('click', function(e){
                var data = $sigdiv.jSignature('getData', 'svgbase64')
                $.publish(pubsubprefix + 'formatchanged')
                $('textarea', $tools).val(data.join(','))
                $.publish(pubsubprefix + data[0], data);
                var signature = $("#signatureImageString").val();
                $("#signatureImageCode").val(signature);
                $("#waiverSignature").submit();
            }).appendTo($tools)


            $('<input type="button" class="btn btn-button btn-warning btn-block" style="height:75px;" value="CLEAR">').bind('click', function(e){
                $sigdiv.jSignature('reset')
            }).appendTo($tools)

            $('<div><textarea id="signatureImageString" style="width:100%;height:7em;display:none;"></textarea></div>').appendTo($tools)


            $.subscribe(pubsubprefix + 'image/svg+xml;base64', function(data) {
                var i = new Image()
                i.src = 'data:' + data[0] + ',' + data[1]
                $(i).appendTo($extraarea)
            });
        })
    </script>
{% endblock %}