{% extends "kegadmin/base.html" %}
{% load kegweblib %}
{% load crispy_forms_tags %}

{% block title %}Kegbot Admin: Edit Keg | {{ block.super }}{% endblock %}
{% block pagetitle %}Kegbot Admin: Edit Keg {% endblock %}

{% block kegadmin-main %}

<h2>Edit Keg #{{keg.id}}: {{keg.type.name}}
{% include 'kegadmin/includes/keg-status-label.html' %}
</h2>
<table class="table table-striped table-bordered">
<tbody>
    {% if keg.online or keg.finished %}
        <tr>
            <th>Start Time</th>
            <td>{{keg.start_time}}</td>
        </tr>
    {% endif %}
    {% if not keg.online and keg.finished %}
        <tr>
            <th>End Time</th>
            <td>{{keg.end_time}}</td>
        </tr>
    {% endif %}
    <tr>
        <th>Size</th>
        <td>{{ keg.keg_type_description }}</td>
    </tr>
    <tr>
        <th>Initial Volume</th>
        <td>{% volume keg.full_volume_ml %}</td>
    </tr>
    <tr>
        <th>Served Volume</th>
        <td>{% volume keg.served_volume_ml %}</td>
    </tr>
    <tr>
        <th>Remaining Volume</th>
        <td>{% volume remaining %}</td>
    </tr>
</table>
    
{% crispy edit_form %}


<div id="cancelModal" class="modal hide fade" tabindex="-1"
    role="dialog" aria-labelledby="cancelDialogLabel" aria-hidden="true">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h3 id="cancelDialogLabel">Really Delete Keg {{ keg.id }}?</h3>
    </div>
    <div class="modal-body">
        <p>
            Are you sure you want to delete <b>Keg {{ keg.id }}</b>?
        </p>
        <p>
            Deleting the keg will <b>immediately and permanently delete all pour data associated with
            this keg</b>, including any recorded pictures and statistics.  This action cannot be undone.
        </p>
    </div>
    <div class="modal-footer">
         <form action="{% url "kegadmin-edit-keg" keg.id %}" method="POST">{% csrf_token %}
         <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
             <input type="submit" name="submit_delete_keg"
                class="btn btn-danger" value="Delete Keg"/>
         </form>
    </div>
</div>


{% endblock %}

{% block kb-extrajs %}
<script type="text/javascript">
$(document).ready(function () {
    var volume_ml = $('.input-volume').val();

  $('.variable-units').append('<div class="control-group"> \
    <label for="id_converted" class="control-label requiredField"> \
    Spilled Volume<span class="asteriskField">*</span></label> \
    <div class="controls"> \
    <input class="numberinput" type="number" step="0.01" id="id_converted" value='+volume_ml+'> \
    <select id="units-input" class="span2"> \
    <option value="milliliters">Milliliters</option> \
    <option value="ounces">Ounces</option> \
    <option value="liters">Liters</option> \
    <option value="gallons">Gallons</option> \
    </select><p class="help-block">Total amount of spilled liquid \
    for this keg</p></div></div>');

  var units = $('#units-input').val();

  $('#id_converted').change(function() {
      user_input = $(this).val();
      if ($('#units-input').val()=='milliliters') {
        var volume_ml = user_input;
      } else if ($('#units-input').val()=='ounces') {
        var volume_ml = user_input * 29.5735;
      } else if ($('#units-input').val()=='liters') {
        var volume_ml = user_input * 1000;
      } else if ($('#units-input').val()=='gallons') {
        var volume_ml = user_input * 3785.41;
      }
      $('.input-volume').val(volume_ml);
    })

  $('#units-input').change(function () {
    var choice = $(this).val();
    var volume_ml = $('.input-volume').val();
    if (choice == 'milliliters') {
        $('.input-volume').val(volume_ml);
        $('#id_converted').val(volume_ml);
      } else if (choice == 'ounces') {
        var updated_volume = volume_ml / 29.5735;
        $('.input-volume').val(volume_ml);
        $('#id_converted').val(updated_volume);
      } else if (choice == 'liters') {
        var updated_volume = volume_ml / 1000;
        $('.input-volume').val(volume_ml);
        $('#id_converted').val(updated_volume);
      } else if (choice == 'gallons') {
        var updated_volume = volume_ml / 3785.41;
        $('.input-volume').val(volume_ml);
        $('#id_converted').val(updated_volume);
      }
  })

});
</script>
{% endblock %}
