{% extends 'VGMWOBundle::layout.html.twig' %}

{% block stylesheets %}
    {{ parent() }}
    <link href="{{ asset('bundles/vgmwo/css/bootstrap-datetimepicker.css') }}" rel="stylesheet" media="screen">
    <link href="{{ asset('bundles/vgmwo/css/waitMe.css') }}" rel="stylesheet" media="screen">
    <link href="{{ asset('bundles/vgmwo/css/jquery-ui.css') }}" rel="stylesheet" media="screen">
    <link href="{{ asset('bundles/vgmwo/css/dataTables.jqueryui.css') }}" rel="stylesheet" media="screen">
    <link href="{{ asset('bundles/vgmwo/css/knockout.file.binding.css') }}" rel="stylesheet" media="screen">
{% endblock %}
{% block content%}
    <div id="workers_list"
         class="container">
        <!-- Nav tabs -->
        <ul class="nav nav-tabs" role="tablist">
            <li class="col-md-6 active"><a href="#active" role="tab" data-toggle="tab">Active Employees</a></li>
            <li class="col-md-6"><a href="#unactive" role="tab" data-toggle="tab">Unactive Employees</a></li>
        </ul>

        <!-- Tab panes -->
        <div class="tab-content">
            <div class="tab-pane active" id="active">
                <div id="active-workers-table"
                     class="table-responsive col-lg-12"
                     style="padding-left: 0px; padding-right: 0px;">
                    <table class="table table-hover fixed-header active_workers" cellspacing="0" width="100%">
                        <thead>
                            <tr style="background-color: #fff;">
                                <!-- Picture column -->
                                <th class="col-md-1 text-center">Picture</th>
                                <!-- Code column -->
                                <th class="col-md-1">Code</th>
                                <!-- Name column -->
                                <th class="col-md-2">Full name</th>
                                <!-- Department column -->
                                <th class="col-md-3">Department</th>
                                <!-- Phone column -->
                                <th class="col-md-2">Phone number</th>
                                <!-- email column -->
                                <th class="col-md-2">e-mail</th>
                                <!-- State / Zip code column -->
                                <th class="col-md-1">State/Zip</th>
                            </tr>
                        </thead>
                        <tbody data-bind="foreach: active_workers">
                        <tr data-bind="click: show_me" style="cursor: pointer;">
                            <td class="text-center">
                                <img data-bind="attr:{src: picture().dataURL() != null
                                                ? picture().dataURL()
                                                : '{{ asset('bundles/vgmwo/images/unknown-user.png') }}'},
                                                click: enlarge_picture" width="32px" height="32px"
                                     style="cursor: zoom-in" class="picture">
                            </td>
                            <td data-bind="text: code"/>
                            <td data-bind="text: full_name"/>
                            <td data-bind="text: department() ? department().name : '- - -'"/>
                            <td data-bind="text: phone2show()"/>
                            <td data-bind="text: email2show()"/>
                            <td data-bind="text: state_zip2show()"/>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="tab-pane" id="unactive">
                <div id="unactive-workers-table"
                     class="table-responsive col-lg-12"
                     style="padding-left: 0px; padding-right: 0px;">
                    <table class="table table-hover fixed-header unactive_workers" cellspacing="0" width="100%">
                        <thead>
                        <tr style="background-color: #fff;">
                            <!-- Picture column -->
                            <th class="col-md-1 text-center">Picture</th>
                            <!-- Code column -->
                            <th class="col-md-1">Code</th>
                            <!-- Name column -->
                            <th class="col-md-2">Full name</th>
                            <!-- Department column -->
                            <th class="col-md-3">Department</th>
                            <!-- Phone column -->
                            <th class="col-md-2">Phone number</th>
                            <!-- email column -->
                            <th class="col-md-2">e-mail</th>
                            <!-- State / Zip code column -->
                            <th class="col-md-1">State/Zip</th>
                        </tr>
                        </thead>
                        <tbody data-bind="foreach: unactive_workers">
                        <tr data-bind="click: show_me" style="cursor: pointer;">
                            <td class="text-center">
                                <img data-bind="attr:{src: picture().dataURL() != null
                                                ? picture().dataURL()
                                                : '{{ asset('bundles/vgmwo/images/unknown-user.png') }}'},
                                                click: enlarge_picture" width="32px" height="32px"
                                     style="cursor: zoom-in" class="picture">
                            </td>
                            <td data-bind="text: code"/>
                            <td data-bind="text: full_name"/>
                            <td data-bind="text: department() ? department().name : '- - -'"/>
                            <td data-bind="text: phone2show()"/>
                            <td data-bind="text: email2show()"/>
                            <td data-bind="text: state_zip2show()"/>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    <!-- Enlarge Picture -->
    <div class="modal fade bs-example-modal-lg"
         id="large-picture"
         role="dialog"
         aria-labelledby="myModalLabel"
         aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">
                        <span aria-hidden="true">&times;</span>
                        <span class="sr-only">Cancel</span>
                    </button>
                    <h4 id="stock-data-header" class="modal-title">Enlarged Picture</h4>
                </div>
                <div id="pictureModal" class="modal-body">
                    <img data-bind="attr:{src: large_picture}" width="100%" height="100%">
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script type="text/javascript" src="{{ asset('bundles/vgmwo/js/bootstrap-datetimepicker.js') }}"></script>
    <script type="text/javascript" src="{{ asset('bundles/vgmwo/js/knockout-file-bindings.js') }}"></script>
    <script type="text/javascript" src="{{ asset('bundles/vgmwo/js/jquery/jquery.stickytableheaders.min.js') }}"></script>
    <script type="text/javascript" src="{{ asset('bundles/vgmwo/js/jquery/jquery-ui.js') }}"></script>
    <script type="text/javascript" src="{{ asset('bundles/vgmwo/js/jquery/jquery.dataTables.min.js') }}"></script>
    <script type="text/javascript" src="{{ asset('bundles/vgmwo/js/customized/utils/Utils.js') }}"></script>
    <script type="text/javascript" src="{{ asset('bundles/vgmwo/js/waitMe.js') }}"></script>
    <script type="text/javascript" src="{{ asset('bundles/vgmwo/js/customized/Workers.js') }}"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            loadPageFeatures();
            viewModel.get_support();
            viewModel.get_workers_data();

            $("#tabs").tabs( {
                "activate": function(event, ui) {
                    $( $.fn.dataTable.tables( true ) ).DataTable().columns.adjust();
                }
            } );
            viewModel.init_active_workers_table();
            viewModel.init_unactive_workers_table();
            $(window).resize(function () {
                viewModel.refresh_active_workers_table();
                viewModel.refresh_unactive_workers_table();
            });
            $('a[href="#active"][data-toggle="tab"]').on('shown.bs.tab', function(e){
               viewModel.refresh_active_workers_table();
            });
            $('a[href="#unactive"][data-toggle="tab"]').on('shown.bs.tab', function(e){
                viewModel.refresh_unactive_workers_table();
            });
        });
        $('#large-picture').on('hidden.bs.modal', function (e) {
            viewModel.clear_large_image();
        });
        function generate_worker_url(worker_id){
            var url = "{{ path('workers_show', {'id': 'worker_id' }) }}".replace("worker_id", worker_id);
            window.location.href = url;
        }
        function getURLSupport(){
            var url = "{{ path('get_workers_support') }}";
            return url;
        }
        function getURLFilterWorkers(){
            var url = "{{ path('get_filtered_workers') }}";
            return url;
        }
        function getURLUpdateWorker(){
            var url = "{{ path('update_worker') }}";
            return url;
        }
        function getURLNewWorker(){
            var url = "{{ path('workers_new') }}";
            return url;
        }


        viewModel.LoadData = ko.dependentObservable(function() {
            viewModel.picture = ko.observable({
                dataURL: ko.observable(),
                // base64String: ko.observable(),
            });
            viewModel.onClear = function(picture){
                if(confirm('Are you sure?')){
                    picture.clear && picture.clear();
                }
            };
        }, viewModel);

        // Activates knockout.js
        ko.applyBindings(viewModel, document.getElementById("content-body"));
    </script>
{% endblock %}