{% extends '@App/base.html.twig' %}
{% block title %}
    Spotlight Car Inventory
{% endblock %}
{% block body %}
    <div class="row">
        <div class="col-xs-12">
            <div class="widget">
                <div class="row">
                    <div class="col-xs-12">
                        <a href="{{ path('spotlight_car_inventory_new') }}"
                           class="btn btn-success btn-raised btn-lg pull-left" style="margin-right:50px;">
                            ADD CAR
                        </a>
                        <table id="car_internal_ro_list" class="table table-hover table-striped table-bordered">
                            <thead>
                            <tr>
                                <th>STOCK NUMBER</th>
                                <th>NEW/USED</th>
                                <th>YEAR|MAKE|MODEL</th>
                                <th>DEFAULT VIDEO INVENTORY</th>
                                <th>VEHICLE FILMED VIDEO(S)</th>
                                <th>VIDEO(S) SELECTED</th>
                                <th>ACTION</th>
                            </tr>
                            </thead>
                            <tbody>
                            {% for car in cars %}
                                <tr>
                                    <td>{{ car.stock_number }}</td>
                                    <td>
                                        {% if car.new_car %}
                                            NEW
                                        {% else %}
                                            USED
                                        {% endif %}
                                    </td>
                                    <td>
                                        {% if car.year %}
                                            {{ car.year }}
                                        {% else %}
                                            N/A
                                        {% endif %}
                                        |
                                        {% if car.make %}
                                            {{ car.make }}
                                        {% else %}
                                            N/A
                                        {% endif %}
                                        |
                                        {% if car.model %}
                                            {{ car.model }}
                                        {% else %}
                                            N/A
                                        {% endif %}
                                    </td>
                                    <td>
                                        <div class="dropdown">
                                            <button class="btn btn-primary btn-raised dropdown-toggle" type="button"
                                                    data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                VIDEO INVENTORY
                                                <div class="ripple-container"></div>
                                                <div class="ripple-container"></div>
                                            </button>
                                            <div class="dropdown-menu">
                                                {% for video in video_inventory %}
                                                    <a href="javascript:" class="dropdown-item" data-toggle="modal"
                                                       data-target="#video_inventory_modal"
                                                       data-car_inventory_id="{{ car.id }}"
                                                       data-video_inventory_id="{{ video.id }}"
                                                       data-video="{{ video.video }}"
                                                       data-stock_number="{{ car.stock_number }}">
                                                        {{ video.name }}
                                                    </a>
                                                {% endfor %}
                                                <a href="javascript:"
                                                   class="dropdown-item btn btn-danger choose-no-video"
                                                   data-car_inventory_id="{{ car.id }}">
                                                    CHOOSE NO VIDEO
                                                </a>
                                            </div>
                                        </div>
                                    </td>
                                    <td class="text-center">
                                        {% if car.inspection_video %}
                                            {% if car.new_car %}
                                                {% set inspectionVideoPath = '/videos/new_car/inspection/' ~ car.inspection_video %}
                                            {% else %}
                                                {% set inspectionVideoPath = '/videos/used_car/inspection/' ~ car.inspection_video %}
                                            {% endif %}
                                            <a href="#" data-toggle="modal"
                                               data-target="#inspection_walkaround_modal"
                                               data-stock_number="{{ car.stock_number }}"
                                               data-video="{{ inspectionVideoPath }}"
                                               data-car_inventory_id="{{ car.id }}" data-type="inspection"><img src="{{ asset('images/general/vehicle-inspection.png') }}" width="30px;"></a>
                                        {% elseif car.push_inspection_to_app == true %}
                                                <span class="font-twenty">pending</span>
                                        {% else %}
                                            <a href="#" class="push-inspection-to-app" data-vehicle="{{ car.id }}"><span class="font-thirty">+</span></a>
                                        {% endif %}
                                        <span class="font-thirty">|</span>
                                        {% if car.walkaround_video %}
                                            {% if car.new_car %}
                                                {% set walkaroundVideoPath = '/videos/new_car/walkaround/' ~ car.walkaround_video %}
                                            {% else %}
                                                {% set walkaroundVideoPath = '/videos/used_car/walkaround/' ~ car.walkaround_video %}
                                            {% endif %}
                                            <a href="#" data-toggle="modal"
                                               data-target="#inspection_walkaround_modal"
                                               data-stock_number="{{ car.stock_number }}"
                                               data-video="{{ walkaroundVideoPath }}"
                                               data-car_inventory_id="{{ car.id }}" data-type="walkaround"><img src="{{ asset('images/general/vehicle-walkaround.png') }}" width="30px;"></a>
                                        {% elseif car.push_walkaround_to_app == true %}
                                            <span class="font-twenty">pending</span>
                                        {% else %}
                                            <a href="#" class="push-walkaround-to-app" data-vehicle="{{ car.id }}"><span class="font-thirty">+</span></a>
                                        {% endif %}
                                    </td>
                                    <td>
                                        {% if car.no_video %}
                                        {% else %}
                                            {% set selectedVideo = '' %}
                                            {% set selectedVideoName =  '' %}

                                            {# set default video #}
                                            {% if car.new_car and default_new_car_video %}
                                                {% set selectedVideo = default_new_car_video.video %}
                                                {% set selectedVideoName = default_new_car_video.name %}
                                            {% elseif not car.new_car and default_used_car_video %}
                                                {% set selectedVideo = default_used_car_video.video %}
                                                {% set selectedVideoName = default_used_car_video.name %}
                                            {% endif %}

                                            {# overwrite if they manually selected one #}
                                            {% if car.selected_video %}
                                                {% set selectedVideo = car.selected_video %}
                                                {% set selectedVideoName = car.video_name %}
                                            {% endif %}

                                            {% if not selectedVideo %}
                                                <!--<button class="btn btn-danger">NO VIDEO SELECTED</button>-->
                                            {% else %}
                                                <!--<button class="btn btn-success" data-toggle="modal"
                                                        data-target="#watch_selected_modal"
                                                        data-video="{{ selectedVideo }}"
                                                        data-stock_number="{{ car.stock_number }}">
                                                    {{ selectedVideoName }}
                                                </button>-->
                                                <div class="dropdown">
                                                    <button class="btn btn-success btn-raised dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                        {{ selectedVideoName }}
                                                        <div class="ripple-container"></div>
                                                        <div class="ripple-container"></div>
                                                        <div class="ripple-container"></div></button>
                                                    <div class="dropdown-menu">
                                                        <button class="dropdown-item btn btn-success" data-toggle="modal"
                                                                data-target="#watch_selected_modal"
                                                                data-video="{{ selectedVideo }}"
                                                                data-stock_number="{{ car.stock_number }}">
                                                            WATCH
                                                        </button>
                                                        <a href="{{ path('spotlight_car_inventory_remove_selected_video', {'id' : car.id, 'videoType' : 'inspection'}) }}" class="dropdown-item btn btn-danger">
                                                            REMOVE FROM WEBSITE
                                                        </a>
                                                    </div>
                                                </div>
                                            {% endif %}
                                        {% endif %}
                                        {% if car.selected_walkaround_video %}
                                            <div class="dropdown">
                                                <button class="btn btn-success btn-raised dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                    WALKAROUND VIDEO
                                                    <div class="ripple-container"></div>
                                                    <div class="ripple-container"></div>
                                                    <div class="ripple-container"></div></button>
                                                <div class="dropdown-menu">
                                                    <button class="dropdown-item btn btn-success" data-toggle="modal"
                                                            data-target="#watch_selected_modal"
                                                            data-video="{{ car.selected_walkaround_video }}"
                                                            data-stock_number="{{ car.stock_number }}">
                                                        WATCH
                                                    </button>
                                                    <a href="{{ path('spotlight_car_inventory_remove_selected_video', {'id' : car.id, 'videoType' : 'walkaround'}) }}" class="dropdown-item btn btn-danger">
                                                        REMOVE FROM WEBSITE
                                                    </a>
                                                </div>
                                            </div>
                                        {% endif %}
                                        {% if not selectedVideo and not car.selected_walkaround_video %}
                                        <button class="btn btn-danger">NO VIDEO SELECTED</button>
                                        {% endif %}
                                    </td>
                                    <td>
                                        <div class="dropdown">
                                            <button class="btn btn-primary btn-raised dropdown-toggle" type="button"
                                                    data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                Actions
                                                <div class="ripple-container"></div>
                                                <div class="ripple-container"></div>
                                            </button>
                                            <div class="dropdown-menu">
                                                <a href="javascript:" class="dropdown-item archive-car"
                                                   data-car_inventory_id="{{ car.id }}">
                                                    CLOSE
                                                </a>
                                                <a href="{{ path('spotlight_car_inventory_edit', {'id' : car.id}) }}"
                                                   class="dropdown-item">
                                                    EDIT
                                                </a>
                                                <a href="javascript:" class="dropdown-item delete-car"
                                                   data-car_inventory_id="{{ car.id }}">
                                                    DELETE
                                                </a>
                                            </div>
                                        </div>
                                    </td>
                                </tr>
                            {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}
{% block modal %}
    <!--Video Inventory Modal-->
    <div class="modal modal-primary fade scale in" id="video_inventory_modal">
        <input type="hidden" id="video_inventory_modal_video_id" value=""/>
        <input type="hidden" id="video_inventory_modal_car_id" value=""/>
        <div class="modal-dialog modal-lg" 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">×</span>
                    </button>
                    <h4 class="modal-title">
                        Stock #<span id="video_inventory_modal_stock_number" style="display: inline;"></span>
                    </h4>
                </div>
                <div class="modal-body">
                    <h4 id="video_inventory_modal_video_name"></h4>
                    <video id="video_inventory_modal_video" controls="" style="width:100%;">
                        <source id="video_inventory_modal_video_source" src="" type="video/mp4">
                    </video>
                    <br/><br/>
                    <button id="video_inventory_modal_make_primary" class="btn btn-primary" style="width: 100%;"
                            title="This will apply this video to the stock # selected">
                        APPLY VIDEO TO WEBSITE
                    </button>
                    <button id="video_inventory_modal_make_primary" class="btn btn-block btn-warning"
                            style="width: 100%;" data-dismiss="modal">
                        EXIT
                    </button>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-raised btn-primary btn-flat" data-dismiss="modal">
                        CLOSE
                    </button>
                </div>
            </div>
        </div>
    </div>
    <!--End Video Inventory Modal-->
    <!--Inspection/Walkaround Video Modal-->
    <div class="modal modal-primary fade scale in" id="inspection_walkaround_modal">
        <input type="hidden" id="inspection_walkaround_modal_car_id" value=""/>
        <input type="hidden" id="inspection_walkaround_modal_type" value=""/>
        <div class="modal-dialog modal-lg" 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">×</span>
                    </button>
                    <h4 class="modal-title">
                        Stock #<span id="inspection_walkaround_modal_stock_number" style="display: inline;"></span>
                    </h4>
                </div>
                <div class="modal-body">
                    <h4 id="inspection_walkaround_modal_name"></h4>
                    <video id="inspection_walkaround_modal_video" controls="" style="width:100%;">
                        <source id="inspection_walkaround_modal_video_source" src="" type="video/mp4">
                    </video>
                    <br/><br/>
                    <div class="row">
                        <div class="col-xs-4">
                            <button id="inspection_walkaround_modal_make_primary" class="btn btn-primary"
                                    style="width: 100%;"
                                    title="This will apply this video to the stock # selected">
                                APPLY VIDEO TO WEBSITE
                            </button>
                        </div>
                        <div class="col-xs-4">
                            <button id="inspection_walkaround_modal_redo" class="btn btn-warning" style="width: 100%;"
                                    title="This will put the video back in que to be recorded again">
                                REDO
                            </button>
                        </div>
                        <div class="col-xs-4">
                            <button id="inspection_walkaround_modal_delete" class="btn btn-danger" style="width: 100%;"
                                    title="This will delete the video selected from this stock #">
                                DELETE
                            </button>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-raised btn-primary btn-flat" data-dismiss="modal">
                        CLOSE
                    </button>
                </div>
            </div>
        </div>
    </div>
    <!--End Inspection/Walkaround Video Modal-->
    <!--Watch Selected Modal-->
    <div class="modal modal-primary fade scale in" id="watch_selected_modal">
        <div class="modal-dialog modal-lg" 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">×</span>
                    </button>
                    <h4 class="modal-title">
                        Stock #<span id="watch_selected_modal_stock_number" style="display: inline;"></span>
                    </h4>
                </div>
                <div class="modal-body">
                    <video id="watch_selected_modal_video" controls="" style="width:100%;">
                        <source id="watch_selected_modal_video_source" src="" type="video/mp4">
                    </video>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-raised btn-primary btn-flat" data-dismiss="modal">
                        CLOSE
                    </button>
                </div>
            </div>
        </div>
    </div>
    <!--End Watch Selected Modal-->
{% endblock %}
{% block javascripts %}
    <script type="text/javascript">
        // Video Inventory Modal Variables
        var $videoInventoryModalStockNumber = $('#video_inventory_modal_stock_number');
        var $videoInventoryModalVideoName   = $('#video_inventory_modal_video_name');
        var $videoInventoryModalVideo       = $('#video_inventory_modal_video').get(0);
        var $videoInventoryModalVideoSource = $('#video_inventory_modal_video_source');
        var $videoInventoryModalVideoId     = $('#video_inventory_modal_video_id');
        var $videoInventoryModalCarId       = $('#video_inventory_modal_car_id');

        // Inspection/Walkaround Modal Variables
        var $inspectionWalkaroundModalStockNumber = $('#inspection_walkaround_modal_stock_number');
        var $inspectionWalkaroundModalVideoName   = $('#inspection_walkaround_modal_name');
        var $inspectionWalkaroundModalVideo       = $('#inspection_walkaround_modal_video').get(0);
        var $inspectionWalkaroundModalVideoSource = $('#inspection_walkaround_modal_video_source');
        var $inspectionWalkaroundModalCarId       = $('#inspection_walkaround_modal_car_id');
        var $inspectionWalkaroundModalType        = $('#inspection_walkaround_modal_type');

        // View Selected Modal Variables
        var $watchSelectedModalStockNumber = $('#watch_selected_modal_stock_number');
        var $watchSelectedModalVideo       = $('#watch_selected_modal_video').get(0);
        var $watchSelectedModalVideoSource = $('#watch_selected_modal_video_source');

        // On video inventory modal open
        $('body').on('show.bs.modal', '#video_inventory_modal', function (e) {
            var stockNumber = $(e.relatedTarget).data('stock_number');
            var video       = $(e.relatedTarget).data('video');
            var inventoryId = $(e.relatedTarget).data('car_inventory_id');
            var videoId     = $(e.relatedTarget).data('video_inventory_id');
            var videoName   = $(e.relatedTarget).html();

            $videoInventoryModalStockNumber.html(stockNumber);
            $videoInventoryModalVideoName.html(videoName);
            $videoInventoryModalVideoSource.attr('src', video);
            $videoInventoryModalVideoId.val(videoId);
            $videoInventoryModalCarId.val(inventoryId);

            $videoInventoryModalVideo.load();
        });

        // On video inventory close
        $('body').on('hide.bs.modal', '#video_inventory_modal', function () {
            $videoInventoryModalVideo.pause();
            $videoInventoryModalStockNumber.html('');
            $videoInventoryModalVideoName.html('');
            $videoInventoryModalVideoSource.attr('src', '');
            $videoInventoryModalVideoId.val('');
            $videoInventoryModalCarId.val('');
        });

        // On apply to this stock # submit on video inventory video
        $('body').on('click', '#video_inventory_modal_make_primary', function () {
            var videoId = $videoInventoryModalVideoId.val();
            var carId   = $videoInventoryModalCarId.val();

            if (confirm('Are you sure you want to apply this video to this stock #?')) {
                $.post('/api/spotlight/set-primary-video', {
                    car_inventory_id  : carId,
                    video_inventory_id: videoId
                }, function (resp) {
                    window.location.reload();
                }).fail(function (e) {
                    console.log(e);
                });
            }
        });

        // On inspection/walkaround modal open
        $('body').on('show.bs.modal', '#inspection_walkaround_modal', function (e) {
            var stockNumber    = $(e.relatedTarget).data('stock_number');
            var video          = $(e.relatedTarget).data('video');
            var inventoryId    = $(e.relatedTarget).data('car_inventory_id');
            var videoType      = $(e.relatedTarget).data('type');
            var videoTypeTitle = 'Inspection Video';

            if (videoType === 'walkaround') {
                videoTypeTitle = 'Walkaround Video';
            }

            $inspectionWalkaroundModalStockNumber.html(stockNumber);
            $inspectionWalkaroundModalVideoName.html(videoTypeTitle);
            $inspectionWalkaroundModalVideoSource.attr('src', video);
            $inspectionWalkaroundModalCarId.val(inventoryId);
            $inspectionWalkaroundModalType.val(videoType);

            $inspectionWalkaroundModalVideo.load();
        });

        // On inspection/walkaround modal close
        $('body').on('hide.bs.modal', '#inspection_walkaround_modal', function () {
            $inspectionWalkaroundModalVideo.pause();
            $inspectionWalkaroundModalStockNumber.html('');
            $inspectionWalkaroundModalVideoName.html('');
            $inspectionWalkaroundModalVideoSource.attr('src', '');
            $inspectionWalkaroundModalCarId.val('');
            $inspectionWalkaroundModalType.val('');
        });

        // On apply to this stock # submit on inspection/walkaround video
        $('body').on('click', '#inspection_walkaround_modal_make_primary', function () {
            var inventoryId = $inspectionWalkaroundModalCarId.val();
            var type        = $inspectionWalkaroundModalType.val();

            if (confirm('Are you sure you want to apply this video to this stock #?')) {
                $.post('/api/spotlight/inspection-walkaround-set-primary-video', {
                    car_inventory_id: inventoryId,
                    type            : type
                }, function (resp) {
                    window.location.reload();
                }).fail(function (e) {
                    console.log(e);
                });
            }
        });

        // Push Inspection To App
        $('body').on('click', '.push-inspection-to-app', function () {
            var carID    = $(this).data('vehicle');
            var pushToAppUrl = '/api/spotlight/car/' + carID + '/push-inspection-to-app';
            $.get(pushToAppUrl, {}, function (resp) {
                window.location.reload();
            }).fail(function (e) {
                console.log(e);
            });
        });

        // Push Walkaround To App
        $('body').on('click', '.push-walkaround-to-app', function () {
            var carID    = $(this).data('vehicle');
            var pushToAppUrl = '/api/spotlight/car/' + carID + '/push-walkaround-to-app';
            $.get(pushToAppUrl, {}, function (resp) {
                window.location.reload();
            }).fail(function (e) {
                console.log(e);
            });
        });

        // On redo of inspection/walkaround video
        $('body').on('click', '#inspection_walkaround_modal_redo', function () {
            var inventoryId = $inspectionWalkaroundModalCarId.val();
            var type        = $inspectionWalkaroundModalType.val();

            if (confirm('Are you sure you want to redo this video?')) {
                $.post('/api/spotlight/inspection-walkaround-redo', {
                    car_inventory_id: inventoryId,
                    type            : type
                }, function (resp) {
                    window.location.reload();
                }).fail(function (e) {
                    console.log(e);
                });
            }
        });

        // On delete of inspection/walkaround video
        $('body').on('click', '#inspection_walkaround_modal_delete', function () {
            var inventoryId = $inspectionWalkaroundModalCarId.val();
            var type        = $inspectionWalkaroundModalType.val();

            if (confirm('Are you sure you want to delete this video?')) {
                $.post('/api/spotlight/inspection-walkaround-redo', {
                    car_inventory_id: inventoryId,
                    type            : type
                }, function (resp) {
                    window.location.reload();
                }).fail(function (e) {
                    console.log(e);
                });
            }
        });

        // On show of watch selected video modal
        $('body').on('show.bs.modal', '#watch_selected_modal', function (e) {
            var video       = $(e.relatedTarget).data('video');
            var stockNumber = $(e.relatedTarget).data('stock_number');

            $watchSelectedModalStockNumber.html(stockNumber);
            $watchSelectedModalVideoSource.attr('src', video);

            $watchSelectedModalVideo.load();
        });

        // On hide of watch selected video modal
        $('body').on('hide.bs.modal', '#watch_selected_modal', function () {
            $watchSelectedModalVideo.pause();
            $watchSelectedModalVideoSource.attr('src', '');
            $watchSelectedModalStockNumber.html('');
        });

        $('body').on('click', '.choose-no-video', function () {
            var carId = $(this).data('car_inventory_id');

            if (confirm('Are you sure you want to remove any video from being associated to this stock #?')) {
                $.post('/api/spotlight/car-inventory/' + carId + '/choose-no-video', {}, function (resp) {
                    window.location.reload();
                }).error(function (e) {
                    console.log(e);
                    alert('failed to save changes');
                });
            }
        });

        $('body').on('click', '.archive-car', function () {
            var carId = $(this).data('car_inventory_id');

            if (confirm('Are you sure you want to archive this stock #?')) {
                $.post('/api/spotlight/car-inventory/' + carId + '/archive', {}, function (resp) {
                    window.location.reload();
                }).fail(function (e) {
                    console.log(e);
                });
            }
        });

        $('body').on('click', '.delete-car', function () {
            var carId = $(this).data('car_inventory_id');

            if (confirm('Are you sure you want to delete this stock #?')) {
                $.get('/api/spotlight/car/' + carId + '/remove-vehicle', {}, function (resp) {
                    window.location.reload();
                }).fail(function (e) {
                    console.log(e);
                });
            }
        });
    </script>
{% endblock %}