{% extends "base.jinja2" %}

{% block page_title %}{{ title }}{% endblock %}

{% block jumbotron %}
  <h1>{{page_headline}}</h1>
  <p>Design your label and print it...</p>
  <!--<p><a class="btn btn-primary btn-lg" href="#" role="button">History of printed labels</a></p>-->
{% endblock %}

{% block content %}
  <div class="row">
    <div class="col-md-4">
      <fieldset class="form-group">
        <div class="panel-group" id="accordion">
          <div class="panel panel-default">
            <div class="panel-heading">
              <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#accordion" href="#collapse1">
                <span class="glyphicon glyphicon-file" aria-hidden="true"></span> Label Size</a>
              </h4>
            </div>
            <div id="collapse1" class="panel-collapse collapse">
              <div class="chooser panel-body">
              <label for="labelSize" style="display: none">Label Size:</label>
              <select class="form-control" id="labelSize" onChange="preview()">
                {% for label_size in label_sizes %}<option value="{{label_size[0]}}" {% if default_label_size == label_size[0] %}selected{% endif %}>{{label_size[1]}}</option>{% endfor %}
              </select>
              <label for="orientation" style="margin-top: 10px; margin-bottom: 0">Label Orientation:</label>
              <div class="radio" style="margin-top: 5px;">
                <label><input type="radio" onchange="preview()" name="orientation" value="standard" {% if default_orientation == 'standard' %}checked{% endif %}>Standard</label>
              </div>
              <div class="radio">
                <label><input type="radio" onchange="preview()" name="orientation" value="rotated" {% if default_orientation == 'rotated' %}checked{% endif %}>Rotated</label>
              </div>
              </div> <!-- class="chooser panel-body" -->
            </div>
          </div>
          <div class="panel panel-default">
            <div class="panel-heading">
              <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#accordion" href="#collapse2">
                  <span class="glyphicon glyphicon-text-size" aria-hidden="true"></span>
                  Font Settings
                </a>
              </h4>
            </div>
            <div id="collapse2" class="panel-collapse collapse in">
              <div class="chooser panel-body">
              <label for="fontFamily">Font Family:</label>
              <select class="form-control" id="fontFamily" onChange="preview()">
                {% for font in fonts %}<option>{{font}}</option> {% endfor %}
              </select>
              <label for="fontSize" >Font Size:</label>
              <input id="fontSize" class="form-control" type="number" min="1" value="70" onChange="preview()" required>
              <label for="fontAlign" class="control-label input-group">Font Alignment:</label>
              <div class="btn-group" data-toggle="buttons">
                  <label class="btn btn-default">
                      <input type="radio" name="fontAlign" onchange="preview()" value="left" aria-label="Left Align"><span class="glyphicon glyphicon-align-left" aria-hidden="true"></span>
                  </label>
                  <label class="btn btn-default active">
                      <input type="radio" name="fontAlign" onchange="preview()" value="center" aria-label="Center Align" checked=""><span class="glyphicon glyphicon-align-center" aria-hidden="true"></span>
                  </label>
                  <label class="btn btn-default">
                      <input type="radio" name="fontAlign" onchange="preview()" value="right" aria-label="Right Align"><span class="glyphicon glyphicon-align-right" aria-hidden="true"></span>
                  </label>
              </div>
              </div> <!-- class="chooser panel-body" -->
            </div>
          </div>
          <div class="panel panel-default">
            <div class="panel-heading">
              <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#accordion" href="#collapse3">
                  <span class="glyphicon glyphicon-cog" aria-hidden="true"></span>
                  Detailed Settings
                </a>
              </h4>
            </div>
            <div id="collapse3" class="panel-collapse collapse">
              <div class="chooser panel-body">
              <label for="marginTop">Margin Top:</label>
              <div class="input-group marginsTopBottom">
                <input id="marginTop" class="form-control" type="number" min="0" max="200" value="24" onChange="preview()" required>    <span class="input-group-addon">%</span>
              </div>
              <label for="marginBottom">Margin Bottom:</label>
              <div class="input-group marginsTopBottom">
                <input id="marginBottom" class="form-control" type="number" min="0" max="200" value="45" onChange="preview()" required> <span class="input-group-addon">%</span>
              </div>
              <label for="marginLeft">Margin Left:</label>
              <div class="input-group marginsLeftRight">
                <input id="marginLeft" class="form-control" type="number" min="0" max="200" value="35" onChange="preview()" required>   <span class="input-group-addon">%</span>
              </div>
              <label for="marginRight">Margin Right:</label>
              <div class="input-group marginsLeftRight">
                <input id="marginRight" class="form-control" type="number" min="0" max="200" value="35" onChange="preview()" required>  <span class="input-group-addon">%</span>
              </div>
              </div> <!-- class="chooser panel-body" -->
            </div>
          </div>
        </div>
      </fieldset>
    </div>
    <div class="col-md-4">
      <fieldset class="form-group">
        <label for="labelText">Label Text:</label>
        <textarea rows="7" id="labelText" class="form-control" onChange="preview()" onInput="preview()"></textarea>
      </fieldset>
    </div>
    <div class="col-md-4">
      <fieldset class="form-group">
        <label for="previewImg">Label Preview:</label><br />
        <img id="previewImg" style="border: 1px solid #444; max-height: 350px; width: auto; max-width: 100%; margin-bottom: 10px;"/>
        <p>Printed size w/o margins: <span id="labelWidth">?</span> cm x <span id="labelHeight">?</span> cm</p>
        <button id="printButton" type="button" class="btn btn-primary btn-block btn-lg" onClick="print()">
          <span class="glyphicon glyphicon-print" aria-hidden="true"></span> Print
        </button>
      </fieldset>
      <div class="panel panel-default">
        <div class="panel-heading">
          <h3 class="panel-title"><span class="glyphicon glyphicon-console" aria-hidden="true" style="margin-right: 0.3em"></span> Status</h3>
        </div>
        <div id="statusPanel" class="panel-body">
          - undefined -
        </div>
      </div>
    </div>
  </div>
{% endblock %}

{% block javascript %}
var text = $('#labelText');

function formData() {
  //var text = $('#labelText').val().replace(/\n/g, "%0A");
  var text = $('#labelText').val();
  if (text == '') text = ' ';
  return {
    text:        text,
    font_family: $('#fontFamily option:selected').text(),
    font_size:   $('#fontSize').val(),
    label_size:  $('#labelSize option:selected').val(),
    align:       $('input[name=fontAlign]:checked').val(),
    orientation: $('input[name=orientation]:checked').val(),
    margin_top:    $('#marginTop').val(),
    margin_bottom: $('#marginBottom').val(),
    margin_left:   $('#marginLeft').val(),
    margin_right:  $('#marginRight').val()
  }
}

function preview() {
  if ($('input[name=orientation]:checked').val() == 'standard') {
    $('.marginsTopBottom').prop('disabled', false).removeAttr('title');
    $('.marginsLeftRight').prop('disabled', true).prop('title',  'Only relevant if rotated orientation is selected.');
  } else {
    $('.marginsTopBottom').prop('disabled', true).prop('title',  'Only relevant if standard orientation is selected.');
    $('.marginsLeftRight').prop('disabled', false).removeAttr('title');
  }
  $.ajax({
    type:        'POST',
    url:         '/api/preview/text?return_format=base64',
    contentType: 'application/x-www-form-urlencoded; charset=UTF-8',
    data:        formData(),
    success: function( data ) {
      $('#previewImg').attr('src', 'data:image/png;base64,' + data);
      var img = $('#previewImg')[0];
      img.onload = function() {
        $('#labelWidth').html( (img.naturalWidth /300*2.54).toFixed(1));
        $('#labelHeight').html((img.naturalHeight/300*2.54).toFixed(1));
      };
    }
  });
}

function setStatus(data) {
  if (data['success'])
    $('#statusPanel').html('<div id="statusBox" class="alert alert-success" role="alert"><i class="glyphicon glyphicon-check"></i><span>Printing was successful.</span></div>');
  else
    $('#statusPanel').html('<div id="statusBox" class="alert alert-warning" role="alert"><i class="glyphicon glyphicon-alert"></i><span>Printing was unsuccessful:<br />'+data['message']+'</span></div>');
  $('#printButton').prop('disabled', false);
}

function print() {
  $('#printButton').prop('disabled', true);
  $('#statusPanel').html('<div id="statusBox" class="alert alert-info" role="alert"><i class="glyphicon glyphicon-hourglass"></i><span>Processing print request...</span></div>');
  $.ajax({
    type:     'POST',
    dataType: 'json',
    data:     formData(),
    url:      '/api/print/text',
    success:  setStatus,
    error:    setStatus
  });
}

preview()

{% endblock %}