{% extends 'base.html.twig' %}
{% block stylesheets %}
    <style>
        #video_box {
            position: relative;
        }

        #video_overlays {
            background: rgba(255, 255, 255, 0.0);
            position: absolute;
            padding-top: 10px;
            padding-left: 10px;
            display: flex;
            float: right;
        }

        .video {
            width: 100%;
            max-height: 75vh;
        }

        .playpause {
            background-image: url('{{ asset('iservice_play.png') }}'), url('{{ logo }}');
            background-position: center, center;
            background-repeat: no-repeat, no-repeat;
            background-size: 99px 69px, contain;
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            margin: auto auto 40px auto;
        }
        .video-disabled {
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            z-index: 1;
            background: rgba(74, 74, 74, 0.8);
            cursor: not-allowed;
        }
        .appraise-my-car{
            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;
        }
        .inspection-report{
            height:50px !important;
            font-size:24px !important;
            color:#000 !important;
            border: 4px solid black !important;
            background-color: green !important;
            border-radius: 20px !important;
            font-weight: bold !important;
        }
        #AppraiseMyCar{
            color: #000000 !important;
        }

        .pricing-estimate.inspection-report{
            height: 88px !important;
            padding: 24px 12px;
        }

        .pricing-estimate.inspection-report:not(.btn-gray){
            background-color: #DADADA !important;
            background-color: #fffd2d !important;
            background-image: none !important;
        }
    </style>
{% endblock %}
{% block modal %}
    <div class="modal modal-info fade scale" id="modal-default-info" tabindex="-1" role="dialog"
         aria-labelledby="modal-default-info" aria-hidden="true">
        <div class="modal-dialog modal-default" role="document">
            <div class="modal-content">
                <div class="modal-header">

                    <h4 class="modal-title" id="modal-default-info-label">New Car Price Quote</h4>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-12">
                            <h3 class="text-center">I would like to request a quote on a:</h3>
                        </div>
                        <div class="col-md-6">
                            <a href="{{ path('new_price_quote', { 'hash': hash, 'type': 1}) }}"
                               class="btn btn-success btn-block">New Car</a>
                        </div>
                        <div class="col-md-6">
                            <a href="{{ path('new_price_quote', { 'hash': hash, 'type': 2}) }}"
                               class="btn btn-primary btn-block">Used Car</a>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-raised btn-primary btn-flat" data-dismiss="modal">Cancel
                    </button>
                </div>
            </div>
        </div>
    </div>
    <div class="modal modal-info fade scale" id="modal-appraise-info" tabindex="-1" role="dialog"
         aria-labelledby="modal-appraise-info" 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">Appraise My Car</h4>
                </div>
                <div class="modal-body">
                    <div class="row car_appraisal_prompt">
                        <div class="col-md-12">
                            <h3 class="text-center">Is your car currently at the dealership?</h3>
                        </div>
                        <div class="col-md-6">
                            <a href="{{ path('appraise_my_car', { 'hash': hash, 'type': 1}) }}"
                               class="btn btn-success btn-block submit_car_appraisal">Yes</a>
                        </div>
                        <div class="col-md-6">
                            <button type="button" class="btn btn-primary btn-block" data-toggle="modal"
                                    data-target="#modal-nothere-info">
                                No
                                <div class="ripple-container"></div>
                            </button>
                        </div>
                    </div>
                    <div class="row car_appraisal_processing" style="display: none;">
                        <a href="#"
                           class="btn btn-success btn-block submit_car_appraisal">Processing</a>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-raised btn-primary btn-flat" data-dismiss="modal">Cancel
                    </button>
                </div>
            </div>
        </div>
    </div>
    <div class="modal modal-info fade scale" id="modal-nothere-info" tabindex="-1" role="dialog"
         aria-labelledby="modal-nothere-info" 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">Appraise My Car</h4>
                </div>
                <div class="modal-body">
                    <div class="row car_appraisal_prompt">
                        <div class="col-md-12">
                            <h3 class="text-center">Dealer may only be able to supply a “value range” without seeing
                                                    car. </h3>
                        </div>
                        <div class="col-md-12">
                            <a href="{{ path('appraise_my_car', { 'hash': hash, 'type': 2}) }}"
                               class="btn btn-success btn-block submit_car_appraisal" >Continue</a>
                        </div>
                    </div>
                    <div class="row car_appraisal_processing" style="display: none;">
                        <a href="#"
                           class="btn btn-success btn-block submit_car_appraisal">Processing</a>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-raised btn-primary btn-flat" data-dismiss="modal">Cancel
                    </button>
                </div>
            </div>
        </div>
    </div>
    <div class="modal modal-info fade scale" id="modal-coupons-info" tabindex="-1" role="dialog"
         aria-labelledby="modal-coupons-info" 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">Coupons & Rewards</h4>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-12">
                            <a href="{{ path('coupons', { 'hash': hash }) }}" class="btn btn-success btn-block">
                                Dealer Coupons
                            </a>
                        </div>
                        <br/><br/>
                        <div class="col-md-12">
                            <a href="{{ credit_card_link }}" target="_blank" id="cc_rewards"
                               class="btn btn-success btn-block">
                                {{ credit_card_text }}
                            </a>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-raised btn-primary btn-flat" data-dismiss="modal">Cancel
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- watch video modal -->

    <div class="modal modal-info fade scale" id="modal-watch-video" tabindex="-1" role="dialog"
         aria-labelledby="modal-watch-video" aria-hidden="true">
        <div class="modal-dialog modal-default" role="document">
            <div class="modal-content">

                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-12">
                            <p>
                                Please watch the inspection video.
                            </p>
                            <p>
                                Once complete, The view Pricing button will turn yellow to make your selects so your technician can complete your service
                            </p>
                            <p>
                                Thank you
                            </p>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn" data-dismiss="modal">Got it!
                    </button>
                </div>
            </div>
        </div>
    </div>

{% endblock %}
{% block body %}
    <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>

        {% if repair_order.video != false %}

            <div class="row">
                <div id="wrap_video" style="position: relative">

                <div id="video_box" class="text-center">
                            <div>
                                <div id="video_overlays">
                                    <center><img style="opacity: .5" src="http://member.iserviceauto.com/iServiceLogo.png"
                                                 height="50px;"></center>
                                </div>
                                <video controls id="clientVideo" class="video">
                                    <source src="{{ member_url }}videos/{{ repair_order.video }}" type="video/mp4"
                                            id="videoSource" data-type="client">
                                </video>
                                <div class="playpause"></div>
                            </div>
                        </div>

                </div>
            </div>

        {% else %}
            <div class="row">
                <div class="col-md-12 text-center">
                    <h2><b>Instructions:</b></h2>
                    <h2>Your inspection video and quote will come soon in this platform.  Use the buttons below to communicate with your advisor.</h2>
                </div>
            </div>

        {% endif %}

        <div class="row text-center" style="padding:10px;color:#fff;background-color:#0d47a1;">
            <div class="col-md-4 col-xs-4">
                Tech Name:<br/>{{ repair_order.technician | split(' ')[0] }}
            </div>
            <div class="col-md-4 col-xs-4">
                Certification: <br/>{{ repair_order.technician.certification }}
            </div>
            <div class="col-md-4 col-xs-4">
                Experience: <br/>{{ repair_order.technician.experience }} YRS
            </div>
        </div>
        {% if mpi == true %}
            <div class="row" style="padding-top:15px;">
                <div class="col-xs-12">
                    <a href="{{ path('mpi', {'hash' : repair_order.linkHash}) }}" class="btn btn-block inspection-report">
                        View Inspection Report
                        </a>
                </div>
            </div>
        {% endif %}
        {% if createAQuote == true and repair_order.video %}
            <div class="row" style="padding-top:15px;">
                <div class="col-xs-12">
                    <a href="{{ path('repair-quote', {'hash' : repair_order.linkHash}) }}" class="btn {{ videoViewed ? '' : 'btn-gray' }} btn-block pricing-estimate inspection-report">

                        View Pricing Estimate
                    </a>
                </div>
            </div>

        {% elseif createAQuote == true and repair_order.video is null %}
            <div class="row" style="padding-top:15px;">
                <div class="col-xs-12">
                    <a href="{{ path('repair-quote', {'hash' : repair_order.linkHash}) }}" class="btn btn-block pricing-estimate inspection-report">

                        View Pricing Estimate
                    </a>
                </div>
            </div>
        {% endif %}
        <div class="row d-none" style="padding-top:15px;">
            <div class="col-xs-12">
            {% if myLoan != false %}
                <a href="{{ path('myloan-start', {'hash' : hash}) }}" id="myLoan" class="btn btn-block appraise-my-car">
                        Finance Your Repair
                </a>
            {% elseif settings.financeRepairUrl %}
                <span id="AppraiseMyCarAlternative" class="btn btn-block appraise-my-car">
                    {% if settings.appraiseMyCarButtonText %}
                        {{ settings.appraiseMyCarButtonText }}
                    {% else %}
                        Finance Your Repair
                    {% endif %}
                </span>
            {% else %}
                <a href="javascript:" data-toggle="modal" data-target="#modal-appraise-info"
                   style="display: block;">
                    <span id="AppraiseMyCar" class="btn btn-block appraise-my-car">
                        {% if settings.appraiseMyCarButtonText %}
                            {{ settings.appraiseMyCarButtonText }}
                        {% else %}
                            Appraise My Car
                        {% endif %}
                    </span>
                </a>
            {% endif %}
            </div>
        </div>
        <div class="row" style="padding-top:15px;">
            <div class="col-md-6 col-xs-6">
                <a class="btn btn-primary btn-block"
                   href="sms:{{ twilio_number }}">Text {{ repair_order.advisor | split(' ')[0] }}</a>
            </div>
            <div class="col-md-6  col-xs-6">
                <a class="btn btn-primary btn-block"
                   href="tel:1{{ repair_order.advisor.phone }}">Call {{ repair_order.advisor | split(' ')[0] }}</a>
                <!--<span style="display: none">
                    <a id="make_a_call" href="tel:1{{ repair_order.advisor.phone }}">call</a>
                </span>-->

            </div>
        </div>
        <div class="row" style="padding-top:15px;">
            <div class="col-xs-12">
                <button type="button" class="btn btn-primary btn-block" data-toggle="modal"
                        data-target="#modal-coupons-info">
                    Unlock Coupons
                </button>
            </div>
        </div>
        {#
        <div class="row" style="padding-top:15px;">
            <div class="col-md-6  col-xs-6">
                <button type="button" class="btn btn-success btn-block" data-toggle="modal"
                        data-target="#modal-default-info">
                    New Car Price Quote
                    <div class="ripple-container"></div>
                </button>
            </div>
            <div class="col-md-6  col-xs-6">
                {% if review_link is not empty %}
                    <a href="{{ review_link }}" target="_blank" class="btn btn-success btn-block">
                        Rate Your Dealer
                    </a>
                {% endif %}
            </div>
        </div>
        #}
    </div>
{% endblock %}
{% block javascripts %}
    <script type="text/javascript">
        $(document).ready(function () {
            let $video = $('.video');
            $video.parent().click(function () {
                if ($(this).children(".video").get(0).paused) {
                    $(this).children(".video").get(0).play();
                } else {
                    $(this).children(".video").get(0).pause();
                }
            });

            $video.on("play", function (e) {
                var videoSource = document.getElementById('videoSource');
                var videoType   = $(videoSource).attr('data-type');

                if (videoType == 'client') {
                    logClientInteraction('video_view');
                }

                $(".video").get(0).play();
                $(".playpause").fadeOut();
            });

            var atLeatHalfWatched = false;
            $video.on('timeupdate', function () {
                let half = Math.round(this.duration / 2);

                if (this.currentTime >= half) {
                    if(atLeatHalfWatched == false) {
                        $('.pricing-estimate.inspection-report.btn-gray').removeClass('btn-gray');
                    }
                    atLeatHalfWatched = true;
                }
            });
            $video.on('pause', function () {
                $(".playpause").fadeIn();
            });
        });

        $('body').on('click', '.submit_car_appraisal', function () {
            $('.car_appraisal_prompt').hide();
            $('.car_appraisal_processing').show();
        });

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

            event.preventDefault();
        }

        $('body').on('click', '#AppraiseMyCarAlternative', function () {
            logClientInteraction('appraise_my_car_alternative');
            window.location.href = "{{ settings.financeRepairUrl }}";
        });

        $('body').on('click', '#cc_rewards', function () {
            logClientInteraction('cc_rewards');
        });

        $('body').on('click', '#call_advisor', function () {
            //$('#make_a_call').click();
            logClientInteraction('call_advisor');
        });

        var player      = document.getElementById('clientVideo');
        var videoSource = document.getElementById('videoSource');
        player.addEventListener('ended', appraiseMyCar, false);

        function appraiseMyCar(e) {
            if (!e) {
                e = window.event;
            }
            var videoType = $(videoSource).attr('data-type');
            if (videoType == 'client') {
                {% if settings.financeRepairUrl %}
                $(videoSource).attr('src', "{% if settings.appraiseMyCarVideo %}{{ member_url }}uploads/appraisal_videos/{{ settings.appraiseMyCarVideo }}{% else %}https://iserviceauto.com/wp-content/uploads/2020/09/Finance-My-Repair.mp4{% endif %}");
                {% else %}
                $(videoSource).attr('src', "{% if settings.appraiseMyCarVideo %}{{ member_url }}uploads/appraisal_videos/{{ settings.appraiseMyCarVideo }}{% else %}http://iserviceauto.com/wp-content/uploads/2018/03/appraise-my-car.mp4{% endif %}");
                {% endif %}
                $(videoSource).attr('data-type', "appraise-my-car");
                player.load();
                $(".playpause").hide();
                player.play();
            }
            if (videoType == 'appraise-my-car') {
                $(videoSource).attr('src', "{{ member_url }}videos/{{ repair_order.video }}");
                $(videoSource).attr('data-type', "client");
                player.load();
            }

        }

        {% if repair_order.video is not null and createAQuote == true %}
            {% if videoViewed is null %}
                $('#modal-watch-video').modal('show');
            {% endif %}
        {% endif %}

        $('.pricing-estimate.inspection-report.btn-gray').on('click', function (e) {
            e.preventDefault();
            $('#modal-watch-video').modal('show');
        })

    </script>
{% endblock %}