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

{% block title %}Tunnel list{% endblock %}

{% block body %}

    <div class="container-fluid">
        <div class="row">
            <div class="col-md-12">
                {% if(not isServiceEnabled) %}
                <div class="alert alert-warning" role="alert">
                    Web terminal tool is not installed. Untill installation is performed, the direct access to the tunnel inside browser tab will not work. Contact your server admin.
                </div>
                {% endif %}
                <div class="bgc-white bd bdrs-3 p-20 mB-20">
                    <h4 class="c-grey-900"><i class="c-brown-500 fas fa-route"></i> List of Tunnels
                        <a href="{{ path('admin_help', {'page': 'tunnels'}) }}"><span class="help-box" title="How to manage tunnels"></span></a>
                    </h4>
                    <hr class="mB-30">
                    {% include 'blocks/filter.html.twig' %}
                    {{ sg_datatables_render(datatable) }}
                </div>
            </div>
        </div>
    </div>

    <!-- Modal -->
    <div class="modal fade" id="assign-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">Assign Device to the Tunnel</h5>
                </div>
                <div class="modal-body">
                    <select id="select"></select>
                </div>

                <div class="modal-footer">
                    <button id="cancel" type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                    <a id="assignDevice" class="btn btn-primary"><i class="fa-regular fa-square-plus"></i> Assign</a>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="confirm-restart" tabindex="-1" role="dialog" aria-labelledby="confirmRestartTunnel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="confirmRestartTunnel">Restart Tunnel</h5>
                </div>
                <div class="modal-body">
                    Do you really want to restart selected tunnel?
                </div>
                <div class="modal-footer">
                    <button id="cancel" type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                    <a id="confirm-restart" class="btn btn-danger btn-ok">Restart</a>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="confirm-shutdown" tabindex="-1" role="dialog" aria-labelledby="confirmShutdownWebTunnel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="confirmShutdownWebTunnel">Shutdown Tunnel</h5>
                </div>
                <div class="modal-body">
                    Do you really want to shutdown selected tunnel?
                </div>
                <div class="modal-footer">
                    <button id="cancel" type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                    <a id="confirm-shutdown" class="btn btn-danger btn-ok">Shutdown</a>
                </div>
            </div>
        </div>
    </div>

{% endblock body %}

{% block stylesheets %}

    {{ parent() }}

{% endblock %}

{% block javascripts %}

    {{ parent() }}

    <script>

        $(document).ready(function(){

            var route = "{{ path('ajax_device_get_not_tunnel')|escape('js') }}";
            var items = {};

            var SelectField  = tail("#select", {
                search: true,
                classNames: "default white",
                descriptions: true,
                hideSelected: true,
                items: items,
                hideDisabled: true,
                deselect: true,
                multiShowCount: false,
            });

            {#
            //SelectField.options.add(items);
            //SelectField.update($item);
            //SelectField.updateLabel('test');
            //SelectField.reload();*/ #}

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

            $('#assign-device').on('show.bs.modal', function (e) {
                SelectField.reload();
                SelectField.updateLabel('Select Device');
                var $invoker = $(e.relatedTarget);
                var $tunnelId = $invoker.attr('value');
                $("#assignDevice").attr('tunnel-id', $tunnelId);
            });

            $('a#confirm-restart').click(function(e){
                $('#confirm-restart').modal('hide');
                $.ajax({
                    url: $('a#confirm-restart').attr('link'),
                    success:function(result){
                        SelectField.reload();
                        //$('#sg-datatables-tunnels_web_datatable').DataTable().ajax.reload();
                        autoReloadEnable('sg-datatables-tunnels_datatable');
                        //$(anchor).closest('tr').addClass("error");
                        //$(anchor).closest('tr').delay(2000).fadeOut();
                    }});
            });

            $('a#confirm-shutdown').click(function(e){
                $('#confirm-shutdown').modal('hide');
                $.ajax({
                    url: $('a#confirm-shutdown').attr('link'),
                    success:function(result){
                        SelectField.reload();
                        //$('#sg-datatables-tunnels_web_datatable').DataTable().ajax.reload();
                        autoReloadEnable('sg-datatables-tunnels_datatable');
                    }});
            });

            $('#sg-datatables-tunnels_datatable').on('click', '#restart', function () {
                var link = $(this).attr('href');
                $('#confirm-restart').modal('show').find('a#confirm-restart').attr('link', link);
            });

            $('#sg-datatables-tunnels_datatable').on('click', '#shutdown', function () {
                var link = $(this).attr('href');
                $('#confirm-shutdown').modal('show').find('a#confirm-shutdown').attr('link', link);
            });

            var routeAssignTunnelDevice = "{{ path('ajax_tunnel_assign_device')|escape('js') }}";

            $('a#assignDevice').click({componentSelect: SelectField}, function(e){
                $('#assign-device').modal('hide')

                var $item = e.data.componentSelect.options.selected[0].value;
                var $tunnelId = $("#assignDevice").attr('tunnel-id');

                $.ajax({
                    method: "POST",
                    url: routeAssignTunnelDevice,
                    data: {item: $item, tunnelId: $tunnelId},
                    success:function(result){
                        SelectField.reload();
                        //$('#sg-datatables-tunnels_web_datatable').DataTable().ajax.reload();
                        autoReloadEnable('sg-datatables-tunnels_datatable');
                    }});
            });

        });

    </script>

{% endblock %}