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

{% block stylesheets %}
    {{ parent() }}
    {{ encore_entry_link_tags('signature-document-style') }}
{% endblock %}

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

{% block container_class %} container py-2 {% 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 justify-content-center">
        <div class="col-lg-12">
            <div
                id="you-sign-iframe"
                style="width: 100%; height: 700px;"
                {# src="{{youSignApiUrl}}procedure/sign?members={{memberId}}&signatureUi={{signatureUI}}" #}
            ></div>
        </div>
    </div>

{% endblock %}

{% block javascript %}

    {{ parent() }}

    <script src="https://cdn.yousign.tech/iframe-sdk-1.5.0.min.js" integrity="sha384-wrNTU81R+b2K+9A1aE1c3blhReNpdRK6Tn1fzXOXhWGZGUk+Btp0dyfnk45pVpOr" crossorigin="anonymous"></script>

    <script>

        $(document).ready(function() {

        const yousign = new Yousign({
            signatureLink: '{{signatureLink|raw}}',
            iframeContainerId: 'you-sign-iframe',
            isSandbox: false,
        });

        yousign.onStarted((data) => {
        console.log("Signer has opened the signature");
            console.log(data);
        });

        yousign.onSuccess((data) => {
        console.log("Signer has successfully signed");
            console.log(data);
        });

        yousign.onError((data) => {
        console.log("Signer encountered an error when signing");
            console.log(data);
        });

        yousign.onPing((data) => {
        console.log("Ping - The signature request is loaded");
        console.log(data);
        });

        yousign.onDeclined((data) => {
        console.log("Declined - The signer declined the signature");
        console.log(data);
        });


        });

    </script>

    {{ encore_entry_script_tags('signature-document-script') }}

{% endblock %}