{% 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>SELECTED INSPECTION VIDEO</th>
                                <th>SELECTED WALKAROUND VIDEO</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>
                                        {% if car.no_video %}
                                            <button class="btn btn-danger">NO SELECTED VIDEO</button>
                                        {% 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 SELECTED VIDEO</button>
                                            {% else %}
                                                <button class="btn btn-primary" data-toggle="modal"
                                                        data-target="#watch_selected_modal"
                                                        data-video="{{ selectedVideo }}"
                                                        data-stock_number="{{ car.stock_number }}">
                                                    {{ selectedVideoName }}
                                                </button>
                                            {% endif %}
                                        {% endif %}
                                    </td>
                                    <td>
                                        {% if car.selected_walkaround_video %}
                                            <button class="btn btn-primary" data-toggle="modal"
                                                    data-target="#watch_selected_modal"
                                                    data-video="{{ car.selected_walkaround_video }}"
                                                    data-stock_number="{{ car.stock_number }}">
                                                WALKAROUND VIDEO
                                            </button>
                                        {% else %}
                                            <button class="btn btn-danger">NO SELECTED VIDEO</button>
                                        {% endif %}
                                    </td>
                                    <td><a href="{{ path('spotlight_car_inventory_delete', {'id' : car.id}) }}" class="btn btn-success">RESTORE</a> </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-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>
                <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);
                });
            }
        });

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

    </script>
{% endblock %}