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

{% block title %}{{ 'sign.prepareTitle'|trans }}{% endblock %}
{% block footer %}{% endblock %}

{% block styles %}
    {{ parent() }}
    {{ encore_entry_link_tags('sign') }}
{% endblock %}

{% block body %}
<div class="sign-prepare" id="signPrepare"
     data-active-signer-id="{{ activeSignerId|default('') }}"
     data-place-hint="{{ 'sign.placeOnDocument'|trans|e('html_attr') }}"
     data-need-signer="{{ 'sign.fieldsNeedSigner'|trans|e('html_attr') }}">
    <header class="sign-prepare__top">
        <a class="sign-prepare__close" href="{{ path('app_sign_index') }}" aria-label="{{ 'lang.close'|default('Schließen')|trans }}">×</a>
        <div class="sign-prepare__steps" aria-label="{{ 'sign.process'|trans }}">
            <span class="sign-step is-done">1. {{ 'sign.step.upload'|trans }}</span>
            <span class="sign-step{% if step == 2 %} is-active{% endif %}{% if step > 2 %} is-done{% endif %}">2. {{ 'sign.step.signers'|trans }}</span>
            <span class="sign-step{% if step == 3 %} is-active{% endif %}{% if step > 3 %} is-done{% endif %}">3. {{ 'sign.step.fields'|trans }}</span>
            <span class="sign-step{% if step == 4 %} is-active{% endif %}">4. {{ 'sign.step.send'|trans }}</span>
        </div>
        <div class="sign-prepare__meta">
            <span class="sign-prepare__status">
                <span id="signFieldsCount">{{ document.fields|length }}</span> {{ 'sign.fieldsCount'|trans }} · {{ 'sign.draftSaved'|trans }}
            </span>
            {% if step < 4 %}
                {% set nextParams = {id: document.id, step: step + 1} %}
                {% if activeSignerId %}{% set nextParams = nextParams|merge({signer: activeSignerId}) %}{% endif %}
                <a class="button button-blue" href="{{ path('app_sign_prepare', nextParams) }}">{{ 'sign.next'|trans }}</a>
            {% else %}
                <a class="button button-blue" href="{{ path('app_sign_review', {id: document.id}) }}">{{ 'sign.reviewAndSend'|trans }}</a>
            {% endif %}
        </div>
    </header>

    <div class="sign-prepare__layout">
        <aside class="sign-prepare__sidebar">
            <section class="sign-side-block">
                <h2>{{ 'sign.signers'|trans }}</h2>
                {% if document.signers is empty %}
                    <p class="sign-help">{{ 'sign.signersHelp'|trans }}</p>
                {% else %}
                    <p class="sign-help">{{ 'sign.selectActiveSigner'|trans }}</p>
                    <ul class="sign-signer-chips" id="signSignerList">
                        {% for signer in document.signers %}
                            <li>
                                <button type="button"
                                        class="sign-chip{% if activeSignerId == signer.id %} is-active{% endif %}"
                                        style="--signer-color: {{ signer.color }}"
                                        data-signer-id="{{ signer.id }}"
                                        data-signer-name="{{ signer.displayName|e('html_attr') }}"
                                        data-signer-color="{{ signer.color }}">
                                    <span class="sign-chip__dot"></span>
                                    <span class="sign-chip__name">{{ signer.displayName }}</span>
                                    {% if signer.isSelf %}
                                        <span class="sign-chip__you">{{ 'sign.you'|trans }}</span>
                                    {% endif %}
                                </button>
                                <form method="post" class="sign-chip-remove-form">
                                    <input type="hidden" name="action" value="remove_signer">
                                    <input type="hidden" name="signer_id" value="{{ signer.id }}">
                                    <input type="hidden" name="active_signer_id" value="{{ activeSignerId }}">
                                    <input type="hidden" name="step" value="{{ step }}">
                                    <button type="submit" class="sign-chip__remove" aria-label="{{ 'lang.delete'|trans }}">×</button>
                                </form>
                            </li>
                        {% endfor %}
                    </ul>
                {% endif %}

                <div class="sign-side-actions">
                    <button type="button" class="button button-orange w-100" data-bs-toggle="modal" data-bs-target="#addSignerModal">
                        {{ 'sign.addSigner'|trans }}
                    </button>
                </div>
            </section>

            <section class="sign-side-block">
                <h2>{{ 'sign.fields'|trans }}</h2>
                <p class="sign-help">{{ 'sign.fieldsHelp'|trans }}</p>
                <p class="sign-active-for" id="signActiveFor"
                   data-template="{{ 'sign.activeFor'|trans({'%name%': '%name%'})|e('html_attr') }}"
                   {% if not activeSigner %}hidden{% endif %}
                   {% if activeSigner %}style="--signer-color: {{ activeSigner.color }}"{% endif %}>
                    {% if activeSigner %}{{ 'sign.activeFor'|trans({'%name%': activeSigner.displayName}) }}{% endif %}
                </p>
                <p class="sign-help" id="signPlaceHint" hidden></p>
                <div class="sign-field-tools{% if not activeSigner %} is-disabled{% endif %}" id="signFieldTools">
                    <button type="button" class="sign-tool-btn" data-field-type="signature">{{ 'sign.field.signature'|trans }}</button>
                    <button type="button" class="sign-tool-btn" data-field-type="date">{{ 'sign.field.date'|trans }}</button>
                    <button type="button" class="sign-tool-btn" data-field-type="text">{{ 'sign.field.text'|trans }}</button>
                </div>
                <form method="post" id="signPlaceForm" class="d-none">
                    <input type="hidden" name="action" value="add_field">
                    <input type="hidden" name="type" id="placeFieldType" value="signature">
                    <input type="hidden" name="signer_id" id="placeSignerId" value="{{ activeSignerId|default('') }}">
                    <input type="hidden" name="active_signer_id" id="placeActiveSignerId" value="{{ activeSignerId|default('') }}">
                    <input type="hidden" name="step" value="3">
                    <input type="hidden" name="page" id="placePage" value="1">
                    <input type="hidden" name="posX" id="placePosX" value="20">
                    <input type="hidden" name="posY" id="placePosY" value="70">
                    <input type="hidden" name="ajax" value="1">
                </form>
                <form method="post" id="signMoveForm" class="d-none">
                    <input type="hidden" name="action" value="move_field">
                    <input type="hidden" name="field_id" id="moveFieldId" value="">
                    <input type="hidden" name="active_signer_id" value="{{ activeSignerId|default('') }}">
                    <input type="hidden" name="step" value="3">
                    <input type="hidden" name="page" id="movePage" value="1">
                    <input type="hidden" name="posX" id="movePosX" value="20">
                    <input type="hidden" name="posY" id="movePosY" value="70">
                    <input type="hidden" name="ajax" value="1">
                </form>
                <form method="post" id="signRemoveFieldForm" class="d-none">
                    <input type="hidden" name="action" value="remove_field">
                    <input type="hidden" name="field_id" id="removeFieldId" value="">
                    <input type="hidden" name="active_signer_id" value="{{ activeSignerId|default('') }}">
                    <input type="hidden" name="step" value="3">
                    <input type="hidden" name="ajax" value="1">
                </form>
                {% if document.fields|length > 0 %}
                    <form method="post" class="mt-2">
                        <input type="hidden" name="action" value="clear_fields">
                        <input type="hidden" name="active_signer_id" value="{{ activeSignerId|default('') }}">
                        <input type="hidden" name="step" value="3">
                        <button type="submit" class="sign-link-btn">{{ 'sign.clearAll'|trans }}</button>
                    </form>
                {% endif %}
            </section>

            <section class="sign-side-block">
                <form method="post">
                    <input type="hidden" name="action" value="save_meta">
                    <input type="hidden" name="active_signer_id" value="{{ activeSignerId|default('') }}">
                    <input type="hidden" name="step" value="{{ step }}">
                    <label class="sign-label" for="docTitle">{{ 'sign.documentTitle'|trans }}</label>
                    <input class="form-control sign-input" id="docTitle" name="title" value="{{ document.title }}">
                    <label class="sign-label mt-3" for="docMessage">{{ 'sign.message'|trans }}</label>
                    <textarea class="form-control sign-input" id="docMessage" name="message" rows="3" placeholder="{{ 'sign.messagePlaceholder'|trans }}">{{ document.message }}</textarea>
                    <button type="submit" class="button button-blue mt-3 w-100">{{ 'sign.save'|trans }}</button>
                </form>
            </section>

            <div class="sign-prepare__nav">
                {% if step > 2 %}
                    {% set backParams = {id: document.id, step: step - 1} %}
                    {% if activeSignerId %}{% set backParams = backParams|merge({signer: activeSignerId}) %}{% endif %}
                    <a class="sign-link-btn" href="{{ path('app_sign_prepare', backParams) }}">{{ 'sign.back'|trans }}</a>
                {% else %}
                    <a class="sign-link-btn" href="{{ path('app_sign_index') }}">{{ 'sign.back'|trans }}</a>
                {% endif %}
            </div>
        </aside>

        <main class="sign-prepare__workspace">
            <div class="sign-pdf-frame{% if activeSigner %} is-place-ready{% endif %}"
                 id="signPdfFrame"
                 data-pdf-url="{{ path('app_sign_pdf', {id: document.id}) }}">
                <div class="sign-pdf-loading" id="signPdfLoading">{{ 'sign.loadingPdf'|trans }}</div>
                <div class="sign-pdf-pages" id="signPdfPages" hidden></div>
            </div>
            <script type="application/json" id="signFieldsData">[
                {%- for field in document.fields -%}
                {
                    "id": {{ field.id }},
                    "type": {{ field.type|json_encode|raw }},
                    "page": {{ field.page }},
                    "posX": {{ field.posX }},
                    "posY": {{ field.posY }},
                    "width": {{ field.width }},
                    "height": {{ field.height }},
                    "color": {{ (field.signer ? field.signer.color : '#003FA5')|json_encode|raw }},
                    "label": {{ (field.type == 'signature' ? 'sign.field.signature' : (field.type == 'date' ? 'sign.field.date' : 'sign.field.text'))|trans|json_encode|raw }},
                    "signerName": {{ (field.signer ? (field.signer.displayName ~ (field.signer.isSelf ? ' (' ~ ('sign.you'|trans) ~ ')' : '')) : '')|json_encode|raw }}
                }{% if not loop.last %},{% endif %}
                {%- endfor -%}
            ]</script>
            <div class="sign-zoom-bar" aria-hidden="true">
                <span id="signZoomLabel">100%</span>
            </div>
        </main>
    </div>
</div>

<div class="modal fade" id="addSignerModal" tabindex="-1" aria-labelledby="addSignerModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content sign-modal">
            <div class="modal-header">
                <h2 class="modal-title fs-5" id="addSignerModalLabel">{{ 'sign.whoSignsField'|trans }}</h2>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form method="post">
                <div class="modal-body">
                    <p class="sign-help">{{ 'sign.whoSignsHelp'|trans }}</p>
                    <div class="sign-toggle mb-3">
                        <label class="sign-toggle__option">
                            <input type="radio" name="signer_mode" value="self">
                            <span>{{ 'sign.iSign'|trans }}</span>
                        </label>
                        <label class="sign-toggle__option">
                            <input type="radio" name="signer_mode" value="other" checked>
                            <span>{{ 'sign.someoneElse'|trans }}</span>
                        </label>
                    </div>

                    <div id="otherSignerFields">
                        {% if contacts is not empty %}
                            <label class="sign-label" for="contactPick">{{ 'sign.selectSigner'|trans }}</label>
                            <select class="form-select sign-input mb-3" id="contactPick">
                                <option value="">{{ 'sign.addNewPerson'|trans }}</option>
                                {% for contact in contacts %}
                                    <option value="{{ contact.email }}"
                                            data-first="{{ contact.firstName }}"
                                            data-last="{{ contact.lastName }}"
                                            data-phone="{{ contact.cellphone }}">
                                        {{ contact.email }}{% if contact.firstName %} — {{ contact.firstName }} {{ contact.lastName }}{% endif %}
                                    </option>
                                {% endfor %}
                            </select>
                        {% endif %}
                        <div class="row g-2">
                            <div class="col-md-6">
                                <label class="sign-label" for="firstName">{{ 'lang.firstName'|trans }}</label>
                                <input class="form-control sign-input" id="firstName" name="firstName">
                            </div>
                            <div class="col-md-6">
                                <label class="sign-label" for="lastName">{{ 'lang.lastName'|trans }}</label>
                                <input class="form-control sign-input" id="lastName" name="lastName">
                            </div>
                        </div>
                        <label class="sign-label mt-2" for="email">{{ 'lang.email'|trans }}</label>
                        <input class="form-control sign-input" id="email" name="email" type="email" required>

                        <details class="mt-3">
                            <summary>{{ 'sign.moreDetails'|trans }}</summary>
                            <label class="sign-label mt-2" for="cellphone">{{ 'lang.cellphone'|trans }}</label>
                            <input class="form-control sign-input" id="cellphone" name="cellphone">
                            <label class="sign-label mt-2" for="company">{{ 'lang.company'|trans }}</label>
                            <input class="form-control sign-input" id="company" name="company">
                        </details>
                    </div>
                    <input type="hidden" name="action" value="add_signer">
                    <input type="hidden" name="active_signer_id" value="{{ activeSignerId|default('') }}">
                    <input type="hidden" name="step" value="{{ step }}">
                </div>
                <div class="modal-footer">
                    <button type="button" class="button" data-bs-dismiss="modal">{{ 'lang.cancel'|default('Abbrechen')|trans }}</button>
                    <button type="submit" class="button button-blue">{{ 'sign.addSigner'|trans }}</button>
                </div>
            </form>
        </div>
    </div>
</div>
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script>
        if (window.pdfjsLib) {
            window.pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.worker.min.js';
        }
    </script>
    {{ encore_entry_script_tags('sign') }}
{% endblock %}