{% extends 'layout.html' %}

{% load static %}

{% load crispy_forms_tags %}

{% block content %}
<!-- MESSAGE Modal --------------------------------------------------------------------------------------------- -->
<div class="modal fade" id="replyMessageModal" tabindex="-1" aria-labelledby="replyMessageModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h1 class="modal-title fs-5" id="replyMessageModalLabel">MESSAGE FORM</h1>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
            <div class="p-1">
  
                <form method="post" action="/message1/" id="reply_message_form" autocomplete="off">
                    {% csrf_token %}

                    <!--div class="mb-3">
                        <label for="receiver" class="form-label">Receipent</label>
                        <h5 id="receiver_lab"></h5>
                        <input type="text" class="form-control" id="rec" name="rec">
                    </div-->
                    
                    <input type="hidden" class="form-control" id="receiver1" name="receiver1">

                    <div class="mb-3">
                        <label for="message" class="form-label">Message</label>
                        <textarea class="form-control" id="message1" rows="3" name="message1"></textarea>
                    </div>
                    
                    <!--div class="mb-3">
                        <label for="sender" class="form-label">Sender</label>
                        <input type="text" class="form-control" id="sender" name="sender">
                    </div-->
                      
  
                    <button type="submit" class="btn btn-primary mt-3 rounded-0 shadowed">REPLY</button>
                    <button type="button" class="btn btn-dark mt-3 rounded-0 shadowed" data-bs-dismiss="modal" onclick="window.location.reload()">CLOSE</button>
                </form>
            </div>
        </div>
        <div class="modal-footer">
        </div>
      </div>
    </div>
  </div>
  <!--MESSAGE Modal Ends --------------------------------------------------------------------------------------------------------------------->
  

<div class="mx-1 my-2" style="border: 0.2px solid rgba(0, 0, 0, 0.1);">
    <h3 class="p-2" style="background-color:#212529;color:white;">MESSAGES</h3>
    <div class="px-2 pb-3">
        <div class="mb-3">
            
              <div class="input-group mb-3">
                <!--input type="text" class="form-control shadowed" id="myInput" placeholder="Search.." aria-label="Recipient's username" aria-describedby="button-addon2"-->
              </div>

            <table class="table table-stripped" id="myTable1">
                <thead>
                  <tr style="background-color:#212529;color:white;">
                    <th scope="col">SENDER</th>
                    <th scope="col">MESSAGE</th>
                    <th scope="col">DATE</th>
                    <th scope="col">ACTION</th>
                  </tr>
                </thead>
                <tbody id="myTablee">
            {% for m in mssg %}
                    <tr>
                        <td>{{ m.sender }}</td>
                        <td>{{ m.message }}</td>
                        <td>{{ m.datetime_created }}</td>
                        <td>
                            {% if m.is_read %}
                            <i class="bi bi-envelope-open-fill"></i><sup> OPENED</sup>

                            {% else %}
                                <a href="/message/read/{{ m.id }}"><i class="bi bi-envelope-fill" id="show-option"  title="Mark as read"></i></a>
                            {% endif %}
                            <!--a href="#" class="aside__link" data-bs-toggle="modal" data-bs-target="#replyMessageModal"-->&nbsp;&nbsp;<i class="bi bi-reply-fill" id="show-option1" onclick="showReplyModel('{{ m.created_by }}')" title="Reply this Message"></i>
                        </td>
                    </tr>
            {% endfor %}
                </tbody>
            </table>

            <!-- PAGINATION --
            {% if mssg.has_other_pages %}
              <ul class="pagination">
                {% if mssg.has_previous %}
                  <li class="page-item"><a href="?page={{ mssg.previous_page_number }}" class="page-link">&laquo;</a></li>
                {% else %}
                  <li class="page-item disabled"><span class="page-link">&laquo;</span></li>
                {% endif %}
                {% for i in mssg.paginator.page_range %}
                  {% if mssg.number == i %}
                    <li class="page-item active"><span class="page-link">{{ i }} <span class="sr-only">(current)</span></span></li>
                  {% else %}
                    <li class="page-item"><a href="?page={{ i }}" class="page-link">{{ i }}</a></li>
                  {% endif %}
                {% endfor %}
                {% if mssg.has_next %}
                  <li class="page-item"><a href="?page={{ mssg.next_page_number }}" class="page-link">&raquo;</a></li>
                {% else %}
                  <li class="page-item disabled"><span class="page-link">&raquo;</span></li>
                {% endif %}
              </ul>
            {% endif %}
            -- PAGINATION -->
        </div>
    </div>
</div>

<script>
    $( function() {
        $( "#show-option, #show-option1" ).tooltip({
          show: {effect: "slideDown", delay: 100},
          hide: {effect: "explode", delay: 500}
        })
    })
</script>

<script>
    function showReplyModel(m){
        console.log(m)
        $('#replyMessageModal').modal('show');
        document.getElementById('receiver1').value = m;
        $('#receiver_lab').html(m)
    }
</script>
{% endblock %}