{% extends "base.html" %}

{% block title %}View Call #{{ caller.call_no }}{% endblock %}

{% block content %}
<div class="container">
  <div class="card mb-2">
    <div class="card-header">
      <h5 class="mb-0">Call: <b>{{ caller.time }}</b><small class="text-muted"> on {{ caller.date }}</small></h6>
    </div>
    <div class="card-body">
      <h4>
        <span class="badge
          {% if caller.action=='Permitted' %}badge-primary
          {% elif caller.action=='Blocked' %}badge-danger
          {% else %}badge-info
          {% endif %}">
          Call was {{ caller.action }}
        </span>
      </h4>
      <p class="card-text">Reason: {{ caller.reason }}</p>
    </div>
  </div>

  <div class="card mb-2">
    <div class="card-header">
      <h5 class="mb-0">Caller: <b>{{ caller.phone_no }}</b><small class="text-muted"> -  {{caller.name }}</small></h5>
    </div>
    <div class="card-body">
      <p class="card-text font-weight-bold
      {% if caller.whitelisted=='Y' %}table-success
      {% elif caller.blacklisted=='Y' %}alert-danger
      {% else %}table-info
      {% endif %}">
        {% if caller.whitelisted == 'Y' %}This caller is permitted and calls will not be screened or blocked.
        {% elif caller.blacklisted == 'Y' %}This caller is blocked and calls will be immediately intercepted.
        {% else %}This caller is allowed but calls will be screened for robocalling, scams, patterns, etc.
        {% endif %}
      </p>
      <a href="/callers/manage/{{ caller.call_no }}" class="btn btn-primary">Change</a>
      <a href="/calls?search={{ caller.phone_no }}&submit=phone" type="button" class="btn btn-primary">Show History</a>
    </div>
  </div>
  {% if caller.msg_no is not none %}
    <div class="card mb-2">
      <div class="card-header">
        <h5 class="mb-0">Voice Message</b></h5>
      </div>
      <div class="card-body">
        <p>
          <audio id="audio" controls preload="metadata" data-msg-no="{{ caller.msg_no }}" data-msg-played="{{ caller.msg_played }}">
            <source src="{{ caller.wav_file }}" type="audio/wav">
            Your browser does not support the audio element.
          </audio>
        </p>
        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal-delete-message">Delete</button>
      </div>
    </div>
  {% endif %}
  <button id="back-button" type="button" class="btn btn-secondary">Back</button>

</div>

<!--
  Delete Message Confirmation Modal
-->
<div class="modal fade" id="modal-delete-message" tabindex="-1" role="dialog" aria-labelledby="delete-message-label" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="delete-message-label">Please Confirm Delete</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <h6>Delete voice message from {{ caller.phone_no }}?</h6>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
        <button id="delete-message" type="button" class="btn btn-primary" data-dismiss="modal">Delete</button>
      </div>
    </div>
  </div>
</div>

{% endblock %}


{% block js %}
<script>
// Go back to the original referrer
$('#back-button').on('click', function (event) {
    history.back()
});

// Open the Messages page
$('#delete-message').on('click', function (event) {
  window.location.href = "/messages/delete/{{ caller.msg_no }}"
});

// Change message played status when the audio is played
$("audio").on('play', function(e) {
  var $audio = $(e.currentTarget)
  var message_no = $audio.data('msg-no')
  var msg_played = $audio.data('msg-played')
  if (msg_played == 0) {
    // Set the status to 1; "played"
    var data = { msg_no: message_no, status: 1 }
    $.post("/messages/played", data, function(results) {
        if (results.success) {
          $('#msg-'+results.msg_no).remove()
          $('#total-unplayed').text(results.unplayed_count)
        }
    });
  }
});
</script>
{% endblock %}
