{% extends "pretixcontrol/event/base.html" %}
{% load i18n %}
{% load staticfiles %}
{% block title %}{% trans "PDF Ticket Editor" %}{% endblock %}
{% block content %}
    <h1>{% trans "PDF Ticket Editor" %}</h1>

    <script type="application/json" id="editor-data">
        {{ layout|safe }}
    </script>
    <div class="row">
        <div class="col-md-9">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <div class="pull-right">
                        <div class="btn-group">
                            <button type="button" class="btn btn-default btn-xs" id="toolbox-source"
                                    title="{% trans "Code" %}">
                                <span class="fa fa-code"></span>
                            </button>
                            <button type="button" class="btn btn-default btn-xs" id="toolbox-paste"
                                    title="{% trans "Paste" %}">
                                <span class="fa fa-paste"></span>
                            </button>
                            <button type="button" class="btn btn-default btn-xs" id="toolbox-undo"
                                    title="{% trans "Undo" %}">
                                <span class="fa fa-undo"></span>
                            </button>
                            <button type="button" class="btn btn-default btn-xs" id="toolbox-redo"
                                    title="{% trans "Redo" %}">
                                <span class="fa fa-repeat"></span>
                            </button>
                        </div>
                    </div>
                    {% trans "Editor" %}
                </div>
                <div class="panel-body">
                    <div id="editor-canvas-area">
                        <canvas id="pdf-canvas"
                                {% if request.event.settings.ticketoutput_pdf_background %}
                                    data-pdf-url="{{ request.event.settings.ticketoutput_pdf_background.url }}"
                                {% else %}
                                    data-pdf-url="{% static "pretixpresale/pdf/ticket_default_a4.pdf" %}"
                                {% endif %}
                                data-worker-url="{% static "pretixplugins/ticketoutputpdf/pdf.worker.js" %}">

                        </canvas>
                        <div id="fabric-container">
                            <canvas id="fabric-canvas">
                            </canvas>
                        </div>
                        <div id="source-container">
                            <div class="alert alert-warning">
                                <strong>
                                    {% blocktrans trimmed %}
                                        This feature is only intended for advanced users. We recommend to only use it
                                        to copy and share ticket designs, not to modify the design source code.
                                    {% endblocktrans %}
                                </strong>
                            </div>
                            <p>
                                <textarea id="source-textarea" class="form-control"></textarea>
                            </p>
                            <p class="text-right">
                                <button class="btn btn-default" id="source-close">
                                    {% trans "Cancel" %}
                                </button>
                                <button class="btn btn-default" id="source-save">
                                    {% trans "Apply" %}
                                </button>
                            </p>
                        </div>
                        <div id="loading-container">
                            <div id="loading-upload">
                                <span class="fa fa-cog big-rotating-icon"></span>
                                <p>
                                    {% trans "Uploading new PDF background…" %}
                                </p>
                                <div class="progress">
                                    <div class="progress-bar" style="width: 0%;">
                                    </div>
                                </div>
                            </div>
                            <div id="loading-initial">
                                <h2>{% trans "Welcome to the PDF ticket editor!" %}</h2>
                                <p>
                                    {% blocktrans trimmed %}
                                        This editor allows you to create a design for the PDF tickets of your event.
                                        You can upload a background PDF and then use this tool to place texts and
                                        a QR code on the ticket.
                                    {% endblocktrans %}
                                </p>
                                <p>&nbsp;</p>
                                <p>
                                    <span class="fa fa-eye fa-2x"></span>
                                </p>
                                <p>
                                    {% blocktrans trimmed %}
                                        Please note that the editor can only provide a rough preview. Some details,
                                        for example in text rendering, might look slightly different in the final
                                        tickets. You can use the "Preview" button on the right for a more precise
                                        preview.
                                    {% endblocktrans %}
                                </p>
                                <p>&nbsp;</p>
                                <p>
                                    <span class="fa fa-chrome fa-2x"></span>
                                    <span class="fa fa-firefox fa-2x"></span>
                                    <span class="fa fa-opera fa-2x"></span>
                                </p>
                                <p>
                                    {% blocktrans trimmed %}
                                        The editor is tested with recent versions of Google Chome, Mozilla Firefox
                                        and Opera. Other browsers, especially Internet Explorer or Microsoft Edge, might
                                        have problems displaying your background PDF or loading the correct fonts.
                                    {% endblocktrans %}
                                </p>
                                <noscript>
                                    <div class="alert alert-danger">
                                        {% blocktrans trimmed %}
                                            The editor requires JavaScript to work. Please enable JavaScript in your
                                            browser to continue.
                                        {% endblocktrans %}
                                    </div>
                                </noscript>
                                <p>&nbsp;</p>
                                <p>
                                    <em id="editor-loading">
                                        <span class="fa fa-cog fa-spin"></span>
                                        {% trans "Loading…" %}
                                    </em>
                                    <button id="editor-start" class="btn btn-primary sr-only">
                                        {% trans "Start editing" %}
                                    </button>
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3" id="editor-toolbox-area">
            <div class="panel panel-default" id="toolbox">
                <div class="panel-heading">
                    <div class="pull-right object-buttons">
                        <div class="btn-group">
                            <button type="button" class="btn btn-default btn-xs" id="toolbox-cut"
                                    title="{% trans "Cut" %}">
                                <span class="fa fa-cut"></span>
                            </button>
                            <button type="button" class="btn btn-default btn-xs" id="toolbox-copy"
                                    title="{% trans "Copy" %}">
                                <span class="fa fa-copy"></span>
                            </button>
                            <button type="button" class="btn btn-danger btn-xs" id="toolbox-delete"
                                    title="{% trans "Delete" %}">
                                <span class="fa fa-trash"></span>
                            </button>
                        </div>
                    </div>
                    <span id="toolbox-heading">
                        {% trans "Loading…" %}
                    </span>
                </div>
                <div class="panel-body" id="toolbox-body">
                    <div class="row control-group pdf-info">
                        <div class="col-sm-6">
                            <label>{% trans "Width (mm)" %}</label><br>
                            <input type="number" id="pdf-info-width" class="input-block-level form-control" disabled>
                        </div>
                        <div class="col-sm-6">
                            <label>{% trans "Height (mm)" %}</label><br>
                            <input type="number" id="pdf-info-height" class="input-block-level form-control" disabled>
                        </div>
                    </div>
                    <div class="row control-group pdf-info">
                        <div class="col-sm-12">
                            <label>{% trans "Background PDF" %}</label><br>
                            <span class="btn btn-default fileinput-button">
                                <i class="fa fa-upload"></i>
                                <span>{% trans "Upload new background" %}</span>
                                <input id="fileupload" type="file" name="background">
                            </span>
                        </div>
                    </div>
                    <div class="row control-group position">
                        <div class="col-sm-6">
                            <label>{% trans "x (mm)" %}</label><br>
                            <input type="number" value="13" class="input-block-level form-control" step="0.01"
                                    id="toolbox-position-x">
                        </div>
                        <div class="col-sm-6">
                            <label>{% trans "y (mm)" %}</label><br>
                            <input type="number" value="13" class="input-block-level form-control" step="0.01"
                                    id="toolbox-position-y">
                        </div>
                    </div>
                    <div class="row control-group squaresize">
                        <div class="col-sm-12">
                            <label>{% trans "Size (mm)" %}</label><br>
                            <input type="number" value="13" class="input-block-level form-control" step="0.01"
                                    id="toolbox-squaresize">
                        </div>
                    </div>
                    <div class="row control-group squaresize">
                        <div class="col-sm-12">
                            <p>
                                {% blocktrans trimmed %}
                                    The final QR code will be slightly smaller because some whitespace is required
                                    for proper scanning.
                                {% endblocktrans %}
                            </p>
                        </div>
                    </div>
                    <div class="row control-group text">
                        <div class="col-sm-6">
                            <label>{% trans "Font size (pt)" %}</label><br>
                            <input type="number" value="13" class="input-block-level form-control" step="0.1"
                                    id="toolbox-fontsize">
                        </div>
                        <div class="col-sm-6">
                            <label>&nbsp;</label><br>
                            <div class="btn-group btn-group-justified" role="group">
                                <div class="btn-group" role="group">
                                    <button type="button" class="btn btn-default toggling" data-action="bold">
                                        <span class="fa fa-bold"></span>
                                    </button>
                                </div>
                                <div class="btn-group" role="group">
                                    <button type="button" class="btn btn-default toggling" data-action="italic">
                                        <span class="fa fa-italic"></span>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row control-group text">
                        <div class="col-sm-6">
                            <label>{% trans "Text color" %}</label><br>
                            <input type="text" value="#000000" class="input-block-level form-control colorpickerfield"
                                    id="toolbox-col">
                        </div>
                        <div class="col-sm-6">
                            <label>&nbsp;</label><br>
                            <div class="btn-group btn-group-justified" id="toolbox-align">
                                <div class="btn-group" role="group">
                                    <button type="button" class="btn btn-default option toggling" data-action="left">
                                        <span class="fa fa-align-left"></span>
                                    </button>
                                </div>
                                <div class="btn-group" role="group">
                                    <button type="button" class="btn btn-default option toggling" data-action="center">
                                        <span class="fa fa-align-center"></span>
                                    </button>
                                </div>
                                <div class="btn-group" role="group">
                                    <button type="button" class="btn btn-default option toggling" data-action="right">
                                        <span class="fa fa-align-right"></span>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row control-group text">
                        <div class="col-sm-12">
                            <label>{% trans "Font" %}</label><br>
                            <select class="input-block-level form-control" id="toolbox-fontfamily">
                                <option>Open Sans</option>
                                {% for family in fonts.keys %}
                                    <option>{{ family }}</option>
                                {% endfor %}
                            </select>
                        </div>
                    </div>
                    <div class="row control-group text">
                        <div class="col-sm-12">
                            <label>{% trans "Width (mm)" %}</label><br>
                            <input type="number" value="13" class="input-block-level form-control" step="0.01"
                                    id="toolbox-textwidth">
                        </div>
                    </div>
                    <div class="row control-group text">
                        <div class="col-sm-12">
                            <label>{% trans "Text content" %}</label><br>
                            <select class="input-block-level form-control" id="toolbox-content">
                                <option value="secret">{% trans "Ticket code (barcode content)" %}</option>
                                <option value="order">{% trans "Order code" %}</option>
                                <option value="item">{% trans "Product name" %}</option>
                                <option value="variation">{% trans "Variation name" %}</option>
                                <option value="item_description">{% trans "Product description" %}</option>
                                <option value="itemvar">{% trans "Product name and variation" %}</option>
                                <option value="price">{% trans "Price" %}</option>
                                <option value="attendee_name">{% trans "Attendee name" %}</option>
                                <option value="event_name">{% trans "Event name" %}</option>
                                <option value="event_date">{% trans "Event date" %}</option>
                                <option value="event_date_range">{% trans "Event date range" %}</option>
                                <option value="event_begin">{% trans "Event begin date and time" %}</option>
                                <option value="event_begin_time">{% trans "Event begin time" %}</option>
                                <option value="event_admission">{% trans "Event admission date and time" %}</option>
                                <option value="event_admission_time">{% trans "Event admission time" %}</option>
                                <option value="event_location">{% trans "Event location" %}</option>
                                <option value="addons">{% trans "List of Add-Ons" %}</option>
                                <option value="organizer">{% trans "Organizer name" %}</option>
                                <option value="organizer_info_text">{% trans "Organizer info text" %}</option>
                                <option value="other">{% trans "Other…" %}</option>
                            </select>
                            <textarea type="text" value="" class="input-block-level form-control"
                                    id="toolbox-content-other"></textarea>
                        </div>
                    </div>
                </div>
            </div>
            <div class="editor-toolbox-text panel panel-default">
                <div class="panel-heading">
                    {% trans "Add a new object" %}
                </div>
                <div class="panel-body add-buttons">
                    <button class="btn btn-default btn-block" id="editor-add-text" disabled>
                        <span class="fa fa-font"></span>
                        {% trans "Text" %}
                    </button>
                    <button class="btn btn-default btn-block" id="editor-add-qrcode" disabled>
                        <span class="fa fa-qrcode"></span>
                        {% trans "QR code area" %}
                    </button>
                </div>
            </div>

            <form method="post" action="" id="preview-form" target="_blank">
                <div class="form-group submit-group">
                    {% csrf_token %}
                    <input type="hidden" value="" name="data">
                    <input type="hidden" value="" name="background">
                    <input type="hidden" value="true" name="preview">
                    <button type="submit" class="btn btn-default btn-lg" id="editor-preview">
                        {% trans "Preview" %}
                    </button>
                    <button type="submit" class="btn btn-primary btn-save" id="editor-save">
                        {% trans "Save" %}
                    </button>
                </div>
            </form>
        </div>
    </div>
    <script type="text/javascript" src="{% static "pretixplugins/ticketoutputpdf/pdf.js" %}"></script>
    <script type="text/javascript" src="{% static "pretixplugins/ticketoutputpdf/fabric.min.js" %}"></script>
    <script type="text/javascript" src="{% static "pretixplugins/ticketoutputpdf/editor.js" %}"></script>
    {% for family, styles in fonts.items %}
    {% for style, formats in styles.items %}
        <span class="preload-font" data-family="{{ family }}" data-style="{{ style }}">
            giItT1WQy@!-/#
        </span>
    {% endfor %}
    {% endfor %}
{% endblock %}

