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

{% block nav_title %}<i class="fas fa-graduation-cap"></i>&nbsp;&nbsp;<span class="text-danger">Platform</span> - AGS line items{% endblock %}

{% block body %}
<div class="card bg-light">
    <div class="card-header d-flex justify-content-between align-items-center">
        <div>
            <i class="fas fa-graduation-cap"></i>&nbsp;Line items
        </div>
        <a class="btn btn-primary" href="{{ path('platform_ags_create_line_item') }}">
            <i class="fas fa-plus-circle"></i>&nbsp;Create
        </a>
    </div>
    <div class="card-body">
        {% if lineItems|length > 0 %}
            <table id="lineItems" class="table table-striped table-bordered dt-responsive nowrap" style="width:100%">
                <thead>
                <tr>
                    <th>Identifier</th>
                    <th>Label</th>
                    <th>Actions</th>
                </tr>
                </thead>
                <tbody>
                {% for lineItem in lineItems %}
                    <tr>
                        <td>
                            <code>{{ lineItem.identifier|truncate }}</code>
                        </td>
                        <td>
                            {{ lineItem.label }}
                        </td>
                        <td style="width:1px;white-space:nowrap;">
                            <div class="btn-group" role="group" aria-label="Basic example">
                                <a
                                        class="btn btn-info text-white"
                                        data-toggle="modal"
                                        data-dismiss="modal"
                                        data-target="#agsServiceUrlModal"
                                        data-ags-service-url="{{ lineItem.identifier }}"
                                        data-ags-container-service-url="{{ lineItem.identifier|split('/')|slice(0, -1)|join('/') }}"
                                >
                                    <i class="fas fa-link"></i>&nbsp;AGS
                                </a>
                                <a class="btn btn-primary" href="{{ path('platform_ags_view_line_item', {'lineItemIdentifier': lineItem.identifier|base64_url_encode}) }}">
                                    <i class="fas fa-info-circle"></i>&nbsp;Details
                                </a>
                                <a class="btn btn-danger text-white" href="{{ path('platform_ags_delete_line_item', {'lineItemIdentifier': lineItem.identifier|base64_url_encode}) }}" onclick="return confirm('Are you sure?')">
                                    <i class="fas fa-trash-alt"></i>&nbsp;Delete
                                </a>
                            </div>
                        </td>
                    </tr>
                {% endfor %}
                </tbody>
            </table>
        {% else %}
            <div class="alert alert-dark alert-no-margin-bottom" role="alert">
                <i class="fas fa-ban"></i>&nbsp;No line items available
            </div>
        {% endif %}
    </div>
    <div class="card-footer text-muted">
        <small><code><i class="fas fa-exclamation-triangle"></i>&nbsp;Non persistent cache storage</code></small>
    </div>
</div>
<div class="modal fade" id="agsServiceUrlModal" tabindex="-1" role="dialog" aria-labelledby="agsServiceUrlModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header bg-light">
                <h5 class="modal-title" id="agsServiceUrlModalLabel"><i class="fas fa-info-circle"></i>&nbsp;AGS line item service url</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body bg-light">
                <form>
                    <div class="form-group">
                        <textarea class="form-control" id="agsServiceUrlField" rows="5"></textarea>
                    </div>
                </form>
            </div>
            <div class="modal-footer bg-light">
                <div class="btn-group" role="group" aria-label="Basic example">
                    <button id="agsServiceUrlCopy" type="button" class="btn btn-info">
                        <i id="agsServiceUrlCopyLogo" class="fas fa-copy"></i>&nbsp;
                        <span id="agsServiceUrlCopyText">Copy to clipboard</span>
                    </button>
                    <button type="button" class="btn btn-secondary" data-dismiss="modal"><i class="fas fa-times"></i>&nbsp;Close</button>
                </div>
            </div>
            <div class="modal-header bg-light">
                <h5 class="modal-title" id="agsServiceUrlModalLabel"><i class="fas fa-info-circle"></i>&nbsp;AGS line item container service url</h5>
            </div>
            <div class="modal-body bg-light">
                <form>
                    <div class="form-group">
                        <textarea class="form-control" id="agsContainerServiceUrlField" rows="5"></textarea>
                    </div>
                </form>
            </div>
            <div class="modal-footer bg-light">
                <div class="btn-group" role="group" aria-label="Basic example">
                    <button id="agsContainerServiceUrlCopy" type="button" class="btn btn-info">
                        <i id="agsContainerServiceUrlCopyLogo" class="fas fa-copy"></i>&nbsp;
                        <span id="agsContainerServiceUrlCopyText">Copy to clipboard</span>
                    </button>
                    <button type="button" class="btn btn-secondary" data-dismiss="modal"><i class="fas fa-times"></i>&nbsp;Close</button>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock body %}

{% block scripts %}
    <script>
        $('#agsServiceUrlModal').on("show.bs.modal", function (event) {
            $("#agsServiceUrlField").val($(event.relatedTarget).attr("data-ags-service-url"));
            $("#agsContainerServiceUrlField").val($(event.relatedTarget).attr("data-ags-container-service-url"));
        });

        function copyUrlToClipboard() {

            $('#agsServiceUrlField').select();
            document.execCommand("copy");

            $('#agsServiceUrlCopy').removeClass('btn-info');
            $('#agsServiceUrlCopy').addClass('btn-success');
            $('#agsServiceUrlCopyLogo').removeClass('fa-copy');
            $('#agsServiceUrlCopyLogo').addClass('fa-check');
            $('#agsServiceUrlCopyText').html('Copied !');
            setTimeout(
                function() {
                    $('#agsServiceUrlCopy').removeClass('btn-success');
                    $('#agsServiceUrlCopy').addClass('btn-info');
                    $('#agsServiceUrlCopyLogo').removeClass('fa-check');
                    $('#agsServiceUrlCopyLogo').addClass('fa-copy');
                    $('#agsServiceUrlCopyText').html('Copy to clipboard');

                },
                1500
            );
        }

        function copyContainerUrlToClipboard() {

            $('#agsContainerServiceUrlField').select();
            document.execCommand("copy");

            $('#agsContainerServiceUrlCopy').removeClass('btn-info');
            $('#agsContainerServiceUrlCopy').addClass('btn-success');
            $('#agsContainerServiceUrlCopyLogo').removeClass('fa-copy');
            $('#agsContainerServiceUrlCopyLogo').addClass('fa-check');
            $('#agsContainerServiceUrlCopyText').html('Copied !');
            setTimeout(
                function() {
                    $('#agsContainerServiceUrlCopy').removeClass('btn-success');
                    $('#agsContainerServiceUrlCopy').addClass('btn-info');
                    $('#agsContainerServiceUrlCopyLogo').removeClass('fa-check');
                    $('#agsContainerServiceUrlCopyLogo').addClass('fa-copy');
                    $('#agsContainerServiceUrlCopyText').html('Copy to clipboard');

                },
                1500
            );
        }

        $("#agsServiceUrlCopy").click(function(){
            copyUrlToClipboard();
        });

        $("#agsContainerServiceUrlCopy").click(function(){
            copyContainerUrlToClipboard();
        });

        {% if lineItems|length > 0 %}
        $(document).ready(function() {
            $('#lineItems').DataTable(
                {
                    responsive: {
                        details: {
                            display: $.fn.dataTable.Responsive.display.modal( {
                                header: function ( row ) {
                                    var data = row.data();
                                    return 'Line item details';
                                }
                            } ),
                            renderer: $.fn.dataTable.Responsive.renderer.tableAll( {
                                tableClass: 'table'
                            } )
                        }
                    },
                    language: {
                        paginate: {
                            previous: "<",
                            next: ">"
                        }
                    }
                }
            );
        } );
        {% endif %}
    </script>
{% endblock %}