{% extends "porto-corporate-layout.html.twig" %}

{% block stylesheets %}
    {{ parent() }}
    {{ encore_entry_link_tags('o2s-tools-liste-style') }}
    {{ encore_entry_link_tags('json-view-style') }}
{% endblock %}

{% block pageheader %}
    {{ parent() }}
{% endblock %}

{% block pageheaderclass %} page-header-with-thin-bottom-margin {% endblock %}

{% block pagecontent %}

    <div class="row">
        <div class="col-md-12">
            {% for flashMessage in app.session.flashbag.get('error') %}
                <div class="alert alert-danger alert-dismissible" >
                    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                    {{ flashMessage|raw }}
                </div>
            {% endfor %}
            {% for flashMessage in app.session.flashbag.get('notice') %}
                <div class="alert alert-success alert-dismissible" >
                    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                    {{ flashMessage|raw }}
                </div>
            {% endfor %}
        </div>
    </div>

    <div class="row">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header py-1 color-client">
                    <h4 class="color-client float-start">
                        <i class="fas fa-angle-right me-1"></i>{{'API O2S - COMPTES'|trans}}
                    </h4>
                </div>
                <div class="card-body">

                    <div class="row mb-3">
                        <div class="col-md-12">
                            <span class="color-client text-4"><i class="fas fa-bookmark me-2"></i>{{'Lister les comptes'|trans}}</span>
                            <span
                                class="tooltipable color-777 hover-client text-4 ms-4"
                                role="button"
                                onClick="apiCall(this);"
                                data-requete="comptes"
                                title="{{'Cliquer pour voir les informations API O2S'|trans}}"
                            >
                                <i class="fas fa-arrow-right me-1"></i>
                                {{'Liste complète'|trans}}
                            </span>
                            <span
                                class="tooltipable color-777 hover-client text-4 ms-4"
                                id="comptes-o2s-contact-link"
                                role="button"
                                onClick="$('#comptes-o2s-contact-link').attr('data-id', $('#comptes-o2s-contact-id').val()); apiCall(this);"
                                data-requete="comptes"
                                title="{{'Cliquer pour voir les informations API O2S'|trans}}"
                            >
                                <i class="fas fa-arrow-right me-1"></i>
                                {{'Du contact id'|trans}}
                            </span>
                            <input id="comptes-o2s-contact-id" class="form-control form-control-sm d-inline w-25 ms-2"/>
                            <span class="color-silver fst-italic ms-5">Exemple : 4dcc8096-3bb1-11e7-b0eb-e0db550f9915</span>
                        </div>
                    </div>

                    <div class="row mb-3">
                        <div class="col-md-12">
                            <span class="color-client text-4"><i class="fas fa-bookmark me-2"></i>{{'Détail du compte'|trans}}</span>
                            <span
                                class="tooltipable color-777 hover-client text-4 ms-4"
                                id="comptes-o2s-compte-link"
                                role="button"
                                onClick="$('#comptes-o2s-compte-link').attr('data-id', $('#comptes-o2s-compte-id').val()); apiCall(this);"
                                data-requete="compte"
                                title="{{'Cliquer pour voir les informations API O2S'|trans}}"
                            >
                                <i class="fas fa-arrow-right me-1"></i>
                                {{'id'|trans}}
                            </span>
                            <input id="comptes-o2s-compte-id" class="form-control form-control-sm d-inline w-25 ms-2"/>
                            <span class="color-silver fst-italic ms-5">Exemple : f7a8e0fa-1b76-11e6-b55b-b8ac6f13edbd</span>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header py-1 color-client">
                    <h4 class="color-client float-start">
                        <i class="fas fa-angle-right me-1"></i>{{'API O2S - ASSETS'|trans}}
                    </h4>
                </div>
                <div class="card-body">

                    <div class="row mb-3">
                        <div class="col-md-12">
                            <span class="color-client text-4"><i class="fas fa-bookmark me-2"></i>{{'Lister les assets'|trans}}</span>
                            <span
                                class="tooltipable color-777 hover-client text-4 ms-4"
                                role="button"
                                onClick="apiCall(this);"
                                data-requete="assets"
                                title="{{'Cliquer pour voir les informations API O2S'|trans}}"
                            >
                                <i class="fas fa-arrow-right me-1"></i>
                                {{'Liste'|trans}}
                            </span>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>

    <!-- Modal infos -->
    {% include 'shared/modal-infos.html.twig' %}

    <!-- API infos -->
    {% include 'shared/api-infos.html.twig' %}

{% endblock %}

{% block javascript %}

    {{ parent() }}

    <script>


        $(document).ready(function() {
        });

window.apiCall = function(iCaller) {

    $.LoadingOverlay("show");

    $.ajax({
      type: 'POST',
      url: "{{path('attitudepatrimoine_o2s_api_call')}}",
      data: {
          requete: $(iCaller).attr("data-requete"),
          id: $(iCaller).attr("data-id"),
      },
      success: apiCallCallback
    });

}


function apiCallCallback(data) {

    if(data.hasOwnProperty('result')) {
        if(data.result == "ok") {
            $(".json-container").remove();
            $("#api-infos-label").html(data.apiLabel);
            let tree = JsonView.createTree(data.apiInfos);
            JsonView.render(tree, document.querySelector('#api-infos'));
            JsonView.expandChildren(tree);
            if(!data.expandAll) {
                JsonView.traverseTree(tree, function(node) {
                    if(node.depth == 1) {
                        JsonView.collapseChildren(node);
                    }
                });
            }
            if(typeof data.autresInfos != "undefined") {
                $("#autres-infos").html(data.autresInfos);
            }
            else {
                $("#autres-infos").html("");
            }
            $("#api-infos-modal").modal("show");
        }
        else {
            if(data.hasOwnProperty('message')) {
                alert(data.message);
            }
        }
    }
    else {
        alert(TRANS_vous_avez_ete_deconnecte);
        window.location.replace(url_accueil);
    }

    $.LoadingOverlay("hide");

}


    </script>

    {{ encore_entry_script_tags('o2s-tools-liste-script') }}
    {{ encore_entry_script_tags('json-view-script') }}

{% endblock %}