{% extends "base.html.twig" %}

{% block title %}Monitoring group devices{% endblock %}

{% block body %}

    <div class="container-fluid">
        <div class="row">
            <div class="col-md-12">
                <div class="bgc-white bd bdrs-3 p-20 mB-20">
                    <h4 class="c-grey-900">Devices in monitoring group: <b>{{ mntGroup.name }}</b></h4>
                    <hr class="mB-30">
                    {% include 'blocks/filter.html.twig' %}
                    {{ sg_datatables_render(datatable) }}
                </div>
            </div>
        </div>
    </div>

    <!-- Modal -->
    <div class="modal fade" id="add-device" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Add devices to Monitoring group</h5>
                </div>
                <div class="modal-body">
                <select id="select"></select>
                {#<div class="example">
                    <div style="margin: 30px auto;">
                        <div class="tail-move-container tail-select-container"></div>
                    </div>
                </div> #}
                </div>

                <div class="modal-footer">
                    <button id="cancel" type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                    <a id="addDevices" class="btn btn-primary">Add</a>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="confirm-remove" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Remove device from monitoring group</h5>
                </div>
                <div class="modal-body">
                    Do you really want to remove selected device from monitoring group?
                </div>
                <div class="modal-footer">
                    <button id="cancel" type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                    <a id="confirm" class="btn btn-danger btn-ok"><span class="fas fa-trash"></span> Remove</a>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="confirm-remove-monitoring-groups-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Remove selected devices from monitoring group</h5>
                </div>
                <div class="modal-body">
                    Do you really want to remove selected devices from monitoring group?
                </div>
                <div class="modal-footer">
                    <button id="cancel" type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                    <a id="confirm-remove-monitoring-groups" class="btn btn-danger btn-ok"><span class="fas fa-trash"></span> Remove</a>
                </div>
            </div>
        </div>
    </div>

    {{ block("modals", "device/index-modals.html.twig") }}

{% endblock body %}

{% block javascripts %}

    {{ parent() }}

    {{ block("javascripts", "device/index-modals.html.twig") }}

    <script src="{{ asset('bundles/fosjsrouting/js/router.js') }}"></script>
    <script src="{{ path('fos_js_routing_js', {'callback': 'fos.Router.setData'}) }}"></script>

    <script>

        $(document).ready(function(){

            var route = "{{ path('ajax_device_get_all_not_in_monitoring_group', {mntGroupId:mntGroupId})|escape('js') }}";
            var routeAddDevices = "{{ path('ajax_monitoring_group_devices_add')|escape('js') }}";
            var routeRemoveDevices = "{{ path('ajax_monitoring_group_devices_remove', {monitoringGroupId:mntGroupId})|escape('js') }}";

            var items = {};

            var SelectField  = tail("#select", {
                search: true,
                classNames: "default white",
                descriptions: true,
                //hideSelected: true,
                items: items,
                multiple: true,
                hideDisabled: true,
                deselect: true,
                multiSelectAll: true,
                //multiLimit: 15,
                multiShowCount: true,
                //multiContainer: ".tail-move-container",
            });

            SelectField.on('open', function (){
                $.ajax({
                    url: route,
                    context: document.body,
                    success: function(data){
                        SelectField.options.add(data);
                    }
                });
            })

            $('a#confirm').click(function(e){
                $('#confirm-remove').modal('hide');
                $.ajax({
                    url: $('#confirm').attr('link'),
                    success:function(result){
                        SelectField.reload();
                        oTable.ajax.reload();
                        let toastOptions = {
                            title: "Success",
                            message: result.message,
                            status: 1, //'SUCCESS',
                            timeout: 20000
                        }
                        Toast.create(toastOptions);
                    }});
            });

            $('#sg-datatables-device_monitoring_group_datatable').on('click', '#remove', function () {
                var link = $(this).attr('href');
                $('#confirm-remove').modal('show').find('a#confirm').attr('link', link);
                //alert(data);
            });

            $('a#addDevices').click({componentSelect: SelectField}, function(e){
                $('#add-device').modal('hide');
                data = e.data.componentSelect.options.selected;
                var items = data.map(function (item) {
                    return item['value'];
                });

                mntGroupId = {{ mntGroupId }};
                $.ajax({
                    method: "POST",
                    url: routeAddDevices,
                    data: {items: items, mntGroupId: mntGroupId},
                    success:function(result){
                        SelectField.reload();
                        oTable.ajax.reload();
                        let toastOptions = {
                            title: "Success",
                            message: result.message,
                            status: 1, //'SUCCESS',
                            timeout: 20000
                        }
                        Toast.create(toastOptions);
                    }});
            });

            $('a#confirm-remove-monitoring-groups').click(function(e){
                $('#confirm-remove-monitoring-groups-modal').modal('hide');

                let selectedDatatableItems = $.map(oTable.rows(".selected").data(), function (i) {
                    return i
                });

                $.ajax({
                    method: "POST",
                    url: routeRemoveDevices,
                    data: {'selectedDevices': selectedDatatableItems},
                    success:function(result){
                        oTable.ajax.reload();
                        let toastOptions = {
                            title: "Success",
                            message: result.message,
                            status: 1,
                            timeout: 20000
                        }
                        Toast.create(toastOptions);
                    }});
            });

        });

    </script>

{% endblock %}