{% 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: 30vh;
        }

        .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;
        }
    </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">
                    <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">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=""
                               class="btn btn-success btn-block">New Car</a>
                        </div>
                        <div class="col-md-6">
                            <a href=""
                               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>

    <!-- video list modal -->

    <div class="modal modal-info fade scale" id="modal-list-videos" 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-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body container">
                    <div class="row">
                        <div class="col-xs-12">
                            {% for video in inspection.videos %}
                                <div class="video-player">
                                    <div class="inspection_video_overlays" id="inspection_video_overlays_{{ loop.index0 }}">
                                        <center><img style="opacity: .5" src="http://member.iserviceauto.com/iServiceLogo.png"
                                                     height="50px;"></center>
                                    </div>
                                    <video controls id="inspection_video_client_{{ loop.index0 }}" class="video">
                                        <source src="{{ video.url }}" type="video/mp4"
                                                id="videoSource" data-type="client" data-leadId="{{ video.id }}">
                                    </video>
                                    <div class="playpause"></div>
                                </div>
                                <br>
                            {% endfor %}

                            {% for video in walkaround.videos %}
                                <div class="video-player">
                                    <div class="walkaround_video_overlays" id="walkaround_video_overlays_{{ loop.index0 }}">
                                        <center><img style="opacity: .5" src="{{ asset('images/PreviewLogo.png') }}"
                                                     height="50px;"></center>
                                    </div>
                                    <video controls id="inspection_video_client_{{ loop.index0 }}" class="video">
                                        <source src="{{ video.url }}" type="video/mp4"
                                                id="videoSource" data-type="client" data-leadId="{{ video.id }}">
                                    </video>
                                    <div class="playpause"></div>
                                </div>
                                <br>
                            {% endfor %}

                            {% for video in custom.videos %}
                                <div class="video-player">
                                    <div class="walkaround_video_overlays" id="walkaround_video_overlays_{{ loop.index0 }}">
                                        <center><img style="opacity: .5" src="{{ asset('images/PreviewLogo.png') }}"
                                                     height="50px;"></center>
                                    </div>
                                    <video controls id="inspection_video_client_{{ loop.index0 }}" class="video">
                                        <source src="{{ video.url }}" type="video/mp4"
                                                id="videoSource" data-type="client" data-leadId="{{ video.id }}">
                                    </video>
                                    <div class="playpause"></div>
                                </div>
                                <br>
                            {% endfor %}

                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-danger" data-dismiss="modal">Close
                    </button>
                </div>
            </div>
        </div>
    </div>

{% endblock %}
{% block body %}
    <div class="container-fluid">
        <div class="row" style="background-color:#0d47a1;height: 90px;">
            <div class="col-xs-12 text-center" style="padding:10px;">
                <span class="text-white text-uppercase logo-text"><img src="{{ asset('images/PreviewLogo.png') }}" height="50px;"/></span>
                <p class="text-white powered-by">Powered by <img src="http://member.iserviceauto.com/iServiceLogo.png" height="20px;"></p>
            </div>
        </div>

        {% if lastVideo %}
            <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="{{ asset('images/PreviewLogo.png') }}"
                                                 height="50px;"></center>
                                </div>
                                <video controls id="clientVideo" class="video">
                                    <source src="{{ lastVideo.url }}" type="video/mp4"
                                            id="videoSource" data-type="client" data-leadId="{{ lastVideo.id }}">
                                </video>
                                <div class="playpause"></div>
                            </div>
                        </div>
                </div>
            </div>
        {% endif %}

        <div class="row text-center" style="padding:10px;color:#fff;background-color:#0d47a1;">
            <div class="col-md-4 col-xs-4">
                Sales Rep:<br/>{% if salesAgent %}{{ salesAgent.firstName }}{% endif %}
            </div>
            <div class="col-md-4 col-xs-4">
                    <a class="btn btn-default btn-block"
                       href="tel:1{{ salesAgent.phone }}">CALL</a>
            </div>
            <div class="col-md-4 col-xs-4">
                <a class="btn btn-default btn-block"
                   href="sms:{{ twilio_number }}"><i>MESSAGE</a>
            </div>
        </div>
        <div class="row" style="padding-top:15px;">
            <div class="col-xs-12">
                {% set completionText = '' %}
                {% set buttonState = 'btn-success' %}
                {% if finance.requested == true %}
                    {% set buttonState = 'btn-default disabled' %}
                    {% set completionText = ' (COMPLETE)' %}
                {% endif %}
                <a href="{{ path('pre_check_financing', {'hash' : hash}) }}" class="btn btn-block {{ buttonState }}">
                    GET PREAPPROVED {{ completionText }}
                </a>
            </div>
        </div>
        <div class="row" style="padding-top:15px;">
            <div class="col-xs-12">
                {% set completionText = '' %}
                {% set buttonState = 'btn-success' %}
                {% if carAppraisal.requested == true %}
                    {% set buttonState = 'btn-default disabled' %}
                    {% set completionText = ' (COMPLETE)' %}
                {% endif %}
                <a href="{{ path('pre_check_trade_value', {'hash' : hash}) }}" class="btn btn-block {{ buttonState }}">
                    VALUE MY TRADE {{ completionText }}
                </a>
            </div>
        </div>
        <!--<div class="row" style="padding-top:15px;">
            <div class="col-xs-12">
                {% set completionText = '' %}
                {% set buttonState = 'btn-success' %}
                {% if testDrive.requested == true %}
                    {% set buttonState = 'btn-default disabled' %}
                    {% set completionText = ' (COMPLETE)' %}
                {% endif %}
                <a href="{{ path('pre_check_test_drive', {'hash' : hash}) }}" class="btn btn-block {{ buttonState }}">
                    SCHEDULE TEST DRIVE {{ completionText }}
                </a>
            </div>
        </div>-->
        <div class="row" style="padding-top:15px;">
            <div class="col-xs-12">
                <a href="https://www.sycamoreautogroup.com/used-vehicles/" target="_blank" class="btn btn-default btn-block">
                    BROWSE CAR INVENTORY
                </a>
            </div>
        </div>
        <div class="row" style="padding-top:15px;">
            <div class="col-xs-12">
                {% set previousVideos = inspection.videos|length + walkaround.videos|length + custom.videos|length %}
                {% if (previousVideos > 1) %}
                <button type="button" class="btn btn-primary btn-block" data-toggle="modal"
                        data-target="#modal-list-videos">
                    WATCH REQUESTED VIDEOS ({{ previousVideos }})
                </button>
                {% endif %}
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">

            </div>
        </div>
    </div>
{% endblock %}
{% block javascripts %}
    <script type="text/javascript">
        $(document).ready(function () {
            $('.video').parent().click(function () {
                if ($(this).children(".video").get(0).paused) {
                    $(this).children(".video").get(0).play();
                } else {
                    $(this).children(".video").get(0).pause();
                }
            });

            function logClientInteractionLead(type,leadRequestId) {
                $.post('{{ member_url }}api/preview/lead-interaction/new', {
                    lead_request_id: leadRequestId,
                    type           : type
                }, function (resp) {
                    console.log(resp);
                }).error(function (e) {
                    console.log(e);
                });

                event.preventDefault();
            }

            $("video").on("play", function (e) {
                var videoSource = document.getElementById('videoSource');
                var leadRequestId   = $(videoSource).attr('data-leadId');
                logClientInteractionLead('video_view', leadRequestId);
                /*var videoSource = document.getElementById('videoSource');
                var videoType   = $(videoSource).attr('data-type');
                if (videoType == 'client') {
                    //logClientInteraction('video_view');
                }

                $(this).get(0).play();*/
                $(e.target).parent().find('.playpause').fadeOut();
                //$(this).closest(".playpause").fadeOut();
            });

            $('video').on('pause', function (e) {
                //$(".playpause").fadeIn();

                $(e.target).parent().find('.playpause').fadeIn();
            });
        });

        var player      = document.getElementById('clientVideo');
        var videoSource = document.getElementById('videoSource');


    </script>
{% endblock %}