{% extends 'base.html.twig' %}
{% block stylesheets %}
    <style>
        .bar_blue_bg {
            background-color: #02bafc;
            color: #fff;
        }

        .bar_green_bg {
            background-color: #5cb85c;
            color: #000;
        }

        .bar_red_bg {
            background-color: #d9534f;
            color: #000;
        }

        .bar_yellow_bg {
            background-color: #ffff00;
            color: #000;
            padding: 10px;
        }

        .bottom_margin {
            margin-bottom: 10px;
        }

        .fiften_side_padding {
            padding-left: 15%;
            padding-right: 15%;
        }

        .btn {
            border-radius: 50px !important;
        }

        .large_radio {
            min-height: 50px;
        }

        .vertical-align {
            display: flex;
            align-items: center;
        }

        .no_pad {
            padding: 0px !important;
        }

        /* The container */
        .container {
            display: block;
            position: relative;
            padding-left: 35px;
            margin-bottom: 12px;
            /*margin-left:15px !important;*/
            cursor: pointer;
            font-size: 22px;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }

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

        /* Create a custom radio button */
        .checkmark {
            position: absolute;
            top: 0;
            left: 0;
            height: 50px;
            width: 50px;
            background-color: #eee;
            border-radius: 50%;
        }

        .approved {
            border: 2px solid #5cb85c;
        }

        .declined {
            border: 2px solid #d9534f;
        }

        /* On mouse-over, add a grey background color */
        .container:hover input ~ .checkmark {
            background-color: #ccc;
        }

        /* When the radio button is checked, add a blue background */
        input[class='quote_row']:checked ~ .checkmark {
            content: "";
            background-color: #d9534f;
        }

        input[class='quote_row_approved']:checked ~ .checkmark {
            content: "";
            background-color: #5cb85c;
        }

        /*.container input:checked ~ .checkmark {
            content: "";
            background-color: #5cb85c;
        }*/

        /* Create the indicator (the dot/circle - hidden when not checked) */
        .checkmark:after {
            content: "";
            position: absolute;
            display: none;
        }

        /* 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;
        }
    </style>

{% endblock %}
{% block modal %}
    <!-- repair quote modal -->
    <div class="modal modal-info fade scale" id="modal-repair-quote" tabindex="-1" role="dialog"
         aria-labelledby="modal-repair-quote" aria-hidden="true">
        <div class="modal-dialog modal-default" 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>
                    <h4 class="modal-title" id="modal-default-info-label">Repair quote</h4>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-12">
                            <p>
                                Please approve or decline each item by touching the green or red circles so the technician can complete your service.
                            </p>
                            <p>
                                Thank you
                            </p>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-raised btn-primary btn-flat" data-dismiss="modal">Got it
                    </button>
                </div>
            </div>
        </div>
    </div>
{% endblock %}
{% block body %}
    {% set recommendedServices = 0 %}
    <div class="container-fluid">
        <div class="row" style="background-color:#0d47a1;height: 70px;">
            <div class="col-xs-3 text-center" style="padding:10px;">
                <a href="{{ path('client', {'hash': hash}) }}" class="text-right btn btn-lg btn-success btn-back">Back</a>
            </div>
            <div class="col-xs-6 text-center" style="padding:10px;">
                <img src="http://member.iserviceauto.com/iServiceLogo.png" height="50px;">
            </div>
        </div>
        {% if already_selected %}
            <div class="row text-center">
                <div class="col-md-12">
                    <p>You have already made your selections. Please contact your service advisor if you would like to
                       make your selections again.</p>
                    <a href="{{ path('client', {'hash' : hash}) }}" class="btn btn-block btn-lg btn-success">Go Back</a>
                </div>
            </div>
        {% else %}
            <div class="row text-center bar_blue_bg bottom_margin">
                <div class="col-md-12">
                    <h5>APPROVED SERVICES</h5>
                </div>
            </div>
            {% for approved in quotes %}
                {% if approved.default %}
                    {% set labor = (approved.labor) %}
                    {% set parts = approved.parts %}
                    {% set supplies = approved.shopSupplies %}
                    {% set labor_tax = 0 %}
                    {% set parts_tax = 0 %}
                    {% set supplies_tax = 0 %}

                    {% if approved.operationCode.taxableLabor %}
                        {% set labor_tax = (labor*(labor_tax_rate/100)) %}
                    {% endif %}

                    {% if approved.operationCode.taxableParts %}
                        {% set parts_tax = (parts*(parts_supplies_tax/100)) %}
                    {% endif %}

                    {% if approved.operationCode.taxableShopSupplies %}
                        {% set supplies_tax = (supplies * (parts_supplies_tax/100)) %}
                    {% endif %}

                    {% set price = (labor + parts + supplies)|number_format(2) %}
                    {% set tax = (labor_tax + parts_tax + supplies_tax)|number_format(2) %}
                    <div class="row bottom_margin text-center  vertical-align">
                        <div class="col-xs-6">{{ approved.description }}</div>
                        <div class="col-xs-2">${{ price }}</div>
                        <div class="col-xs-2">
                            <label class="container large_radio">
                                <input type="radio" name="quote_id_{{ approved.id }}" class="quote_row_approved"
                                       data-cost="{{ price }}" data-tax="{{ tax }}" data-id="{{ approved.id }}"
                                       value="1"
                                       checked
                                />
                                <span class="checkmark approved"></span>
                            </label>
                        </div>
                        <div class="col-xs-2">
                            <label class="container large_radio">
                                <input type="radio" name="quote_id_{{ approved.id }}" class="quote_row"
                                       data-cost="{{ price }}" data-tax="{{ tax }}" data-id="{{ approved.id }}"
                                       value="0"
                                       disabled
                                />
                                <span class="checkmark declined" style="background-color: grey;"></span>
                            </label>
                        </div>
                    </div>
                {% endif %}
            {% endfor %}
            <div class="row text-center bottom_margin">
                <div class="col-xs-8  bar_blue_bg">
                    <h6>RECOMMENDED SERVICES</h6>
                </div>
                <div class="col-xs-2 bar_green_bg no_pad">
                    <h6>APPROVE</h6>
                </div>
                <div class="col-xs-2 bar_red_bg no_pad">
                    <h6>DECLINE</h6>
                </div>
            </div>
            {% for recommended in quotes %}
                {% if recommended.default is empty %}
                    {% set labor = (recommended.labor) %}
                    {% set parts = recommended.parts %}
                    {% set supplies = recommended.shopSupplies %}
                    {% set labor_tax = 0 %}
                    {% set parts_tax = 0 %}
                    {% set supplies_tax = 0 %}
                    {% set recommendedServices = recommendedServices + 1 %}

                    {% if recommended.operationCode.taxableLabor %}
                        {% set labor_tax = (labor*(labor_tax_rate/100)) %}
                    {% endif %}

                    {% if recommended.operationCode.taxableParts %}
                        {% set parts_tax = (parts * (parts_supplies_tax/100)) %}
                    {% endif %}

                    {% if recommended.operationCode.taxableShopSupplies %}
                        {% set supplies_tax = (supplies*(parts_supplies_tax/100)) %}
                    {% endif %}

                    {% set price = (labor + parts + supplies)|number_format(2) %}
                    {% set tax = (labor_tax + parts_tax + supplies_tax)|number_format(2) %}
                    <div class="row text-center  vertical-align">
                        <div class="col-xs-6">{{ recommended.description }}</div>
                        <div class="col-xs-2">${{ price }}</div>
                        <div class="col-xs-2">
                            <label class="large_radio container">
                                <input type="radio" name="quote_id_{{ recommended.id }}" class="quote_row_approved"
                                       data-cost="{{ price }}" data-tax="{{ tax }}" data-id="{{ recommended.id }}"
                                       value="1"
                                />
                                <span class="checkmark approved"></span>
                            </label>
                        </div>
                        <div class="col-xs-2">
                            <label class="container large_radio">
                                <input type="radio" name="quote_id_{{ recommended.id }}" class="quote_row"
                                       data-cost="{{ price }}" data-tax="{{ tax }}" data-id="{{ recommended.id }}"
                                       value="0"
                                       style="transform: scale(3);"/>
                                <span class="checkmark declined"></span>
                            </label>
                        </div>
                    </div>
                {% endif %}
            {% endfor %}
            <div class="row text-center">
                <!--<div class="col-md-12">
                    <h3>Taxes: $<span id="total_taxes"></span></h3>
                </div>-->
                <div class="col-md-12">
                    <h3>Total: $<span id="total"></span></h3>
                </div>
            </div>
            {% if recommendedServices == 0 %}
                {# Only visible if there is no recommended services #}
                <div class="row text-center bar_yellow_bg" style="margin-bottom: 2rem">
                    <div class="col-md-12">
                        <p>
                            <strong>There is no additional recommendations today.</strong>
                        </p>
                        <p>
                            <strong>Click continue below.</strong>
                        </p>
                    </div>
                </div>
            {% endif %}

            <div class="row text-center bottom_margin">
                <input type="image" name="submit" id="submit_quote" src="{{ asset('quote_submit_button.png') }}"
                       style="margin-left: auto; margin-right: auto;"/>
            </div>
            <div class="row text-center bar_yellow_bg">
                <div class="col-md-12">
                    <strong>*TOTAL INCLUDES TAXES AND FEES</strong>
                </div>
            </div>
        {% endif %}
    </div>
{% endblock %}
{% block javascripts %}
    <script type="text/javascript">
        $(document).ready(function () {

            $('.alreadyApproved .quote_row_approved').on('click', function(e){
                e.preventDefault();
                return
            })

            $('.alreadyApproved .quote_row').attr('disabled', true);
        })

        function calculateTotal() {
            var total     = 0;
            var total_tax = 0;

            $('.quote_row_approved').each(function (k, v) {
                var price = $(this).data('cost').toString();
                price     = price.replace(',', '');
                price     = parseFloat(price);

                var tax = $(this).data('tax').toString();
                tax     = tax.replace(',', '');
                tax     = parseFloat(tax);

                if ($(this).is(':checked')) {
                    total += price;
                    total_tax += tax;
                }
            });
            total += total_tax;

            //$('#total_taxes').html(total_tax.toFixed(2));
            $('#total').html(total.toFixed(2));
        }

        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);
            });
        }

        $('body').on('change', '.quote_row, .quote_row_approved', function () {
            calculateTotal();
        });

        $('body').on('click', '#submit_quote', function () {
            var approvedItems = [];
            var declinedItems = [];
            var isValid       = true;

            $('.quote_row_approved').each(function (k, v) {
                var row  = $(this).closest('.row');
                var test = row.find('.quote_row');
                var quote_id = $(this).data('id');

                if ($(this).is(':checked')) {
                    approvedItems.push(quote_id);
                } else {
                    if ($(test).is(':checked') && $(this).hasClass('alreadyApprovedItem')) {
                        approvedItems.push(quote_id);
                    } else if ($(test).is(':checked') && !$(this).hasClass('alreadyApprovedItem')) {
                        declinedItems.push(quote_id);
                    } else {
                        isValid = false;
                    }
                }
            });

            if (isValid == false) {
                alert('Please Make A Selection For Each Recommended Item');
            } else {
                if (confirm('Are you sure you\'re ready to submit? If you would like to edit your selections before submitting press "cancel", otherwise click "OK".')) {
                    $.post('{{ member_url }}api/repair-order-quote/approve', {
                        approved_items: approvedItems.join('|'),
                        declined_items: declinedItems.join('|')
                    }, function (resp) {
                        logClientInteraction('update_quote');
                        alert('Your work order has been submitted. We will get back to you shortly.');
                        window.location = '{{ path('client', {'hash' : repair_order.linkHash}) }}';
                    }).error(function (e) {
                        console.log(e);

                        if (e.responseText == 'Invalid Quote'){
                            window.location.reload();
                        }
                    });
                }
            }

        });
        //$('#modal-repair-quote').modal('show')
        calculateTotal();
        logClientInteraction('quote_view');
    </script>
{% endblock %}