{% 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"
                                data-pdf-url="{{ pdf }}"
                                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 Chrome, 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">
                                {% for varname, var in variables.items %}
                                    <option data-sample="{{ var.editor_sample }}" value="{{ varname }}">{{ var.label }}</option>
                                {% endfor %}
                                {% for p in request.organizer.meta_properties.all %}
                                    <option value="meta:{{ p.name }}">
                                        {% trans "Event attribute:" %} {{ p.name }}
                                    </option>
                                {% endfor %}
                                <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 %}

