{% extends 'doctor/base.html' %}
{% load static %}
{% load i18n %}

{% block sidebar.dashboard %}{% endblock %}
{% block sidebar.patients %} {% endblock %}
{% block sidebar.challenge %} {% endblock %}
{% block sidebar.appointments %} {% endblock %}
{% block sidebar.chat_inbox %} class="active" {% endblock %}

{% block content %}
    <div class="chat-inbox-container">
      <div class="inbox-header">
        <h2>{% trans "Chats" %}</h2>
      </div>
      <div class="search-box">
        <form method="GET" action="">
          <input type="text" name="search" placeholder="{% trans 'Search chats...' %}" value="{{ search_query }}">
          <button type="submit">{% trans "Search" %}</button>
        </form>
      </div>
      <div class="chat-list">
        {% if conversations %}
          {% for conv in conversations %}
            <a href="{% url 'panel-doctor-chat-with' conv.app_user.id %}" class="chat-list-item" target="_blank">
              <div class="avatar">
                {% if conv.app_user.profile.image %}
                  <img src="{{ conv.app_user.profile.image.url }}" alt="{{ conv.app_user.profile.first_name }}">
                {% endif %}
                {% if conv.unread_count > 0 %}
                    <span class="unread-indicator">{{ conv.unread_count }}</span>
                {% endif %}
              </div>
              <div class="chat-details" dir="rtl">
                <div class="chat-header">
                  <span class="chat-name">{{ conv.app_user.profile.first_name }} {{ conv.app_user.profile.last_name }}</span>
                  <span class="chat-time">{{ conv.formatted_time }}</span>
                </div>
                <div class="chat-preview text-right" dir="rtl">
                  <span class="author-indicator">{{ conv.prefix }}</span>
                  {{ conv.last_message.text|striptags|truncatechars:40 }}
                </div>
              </div>
            </a>
          {% endfor %}

          <!-- Pagination links -->
          <div class="pagination">
              {% if conversations.has_previous %}
                  <a href="?page=1{% if search_query %}&search={{ search_query }}{% endif %}">&laquo; first</a>
                  <a href="?page={{ conversations.previous_page_number }}{% if search_query %}&search={{ search_query }}{% endif %}">previous</a>
              {% endif %}
              <span class="current">
                  Page {{ conversations.number }} of {{ conversations.paginator.num_pages }}.
              </span>
              {% if conversations.has_next %}
                  <a href="?page={{ conversations.next_page_number }}{% if search_query %}&search={{ search_query }}{% endif %}">next</a>
                  <a href="?page={{ conversations.paginator.num_pages }}{% if search_query %}&search={{ search_query }}{% endif %}">last &raquo;</a>
              {% endif %}
          </div>
        {% else %}
          <p class="no-conversations">{% trans "No conversations found." %}</p>
        {% endif %}
      </div>
    </div>

    <style>
    /* Increase specificity by targeting the unread indicator within the avatar inside a chat-list item */
    .chat-list .chat-list-item .avatar .unread-indicator {
      position: absolute !important;
      bottom: 1px !important;
      right: 16px !important;
      width: 20px !important;
      height: 20px !important;
      background: #009A6E !important;  /* Change to your desired color */
      color: #fff !important;
      border: 2px solid #fff !important;
      border-radius: 50% !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      font-size: 12px !important;
      font-weight: bold !important;
    }
      body {
        background-color: #f0f2f5;
      }
      .chat-inbox-container {
        max-width: 600px;
        margin: 50px auto;
        background-color: #fff;
        border-radius: 10px;
        box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        overflow: hidden;
      }
      .inbox-header {
        background-color: #009A6E;
        color: #fff;
        padding: 20px;
        text-align: center;
      }
      .inbox-header h2 {
        margin: 0;
        font-size: 28px;
        font-weight: 600;
      }
      .search-box {
        padding: 15px;
        border-bottom: 1px solid #eee;
      }
      .search-box input {
        width: 80%;
        padding: 10px 15px;
        border: none;
        border-radius: 20px;
        background-color: #f1f2f5;
        font-size: 16px;
        outline: none;
      }
      .search-box button {
        padding: 10px 15px;
        border: none;
        background-color: #009A6E;
        color: #fff;
        border-radius: 20px;
        cursor: pointer;
      }
      .chat-list {
        max-height: 600px;
        overflow-y: auto;
      }
      .chat-list-item {
        display: flex;
        align-items: center;
        padding: 15px;
        border-bottom: 1px solid #eee;
        text-decoration: none;
        color: inherit;
        transition: background-color 0.3s;
      }
      .chat-list-item:hover {
        background-color: #f9f9f9;
      }
      .avatar {
        width: 55px;
        height: 55px;
        margin-right: 15px;
        position: relative;
        flex-shrink: 0;
      }
      .avatar img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        object-fit: cover;
      }
      .unread-indicator {
        position: absolute;
        bottom: 4px;
        right: 4px;
        width: 12px;
        height: 12px;
        background: #009A6Eda;
        border: 2px solid #fff;
        border-radius: 50%;
      }
      .chat-details {
        flex-grow: 1;
      }
      .chat-header {
        display: flex;
        justify-content: space-between;
        margin-bottom: 5px;
      }
      .chat-name {
        font-size: 18px;
        font-weight: 600;
        color: #333;
      }
      .chat-time {
        font-size: 14px;
        color: #888;
      }
      .chat-preview {
        font-size: 15px;
        color: #555;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .author-indicator {
        font-weight: bold;
        margin-right: 5px;
      }
      .pagination {
        padding: 15px;
        text-align: center;
      }
      .pagination a {
        margin: 0 5px;
        text-decoration: none;
        color: #009A6E;
      }
      .pagination .current {
        margin: 0 5px;
        color: #555;
      }
    </style>
{% endblock %}

{% block script %}
    <script src="{% static 'panel/doctor' %}/js/jquery-3.2.1.min.js"></script>
    <script src="{% static 'panel/doctor' %}/js/popper.min.js"></script>
    <script src="{% static 'panel/doctor' %}/js/bootstrap.min.js"></script>
    <script src="{% static 'panel/doctor' %}/js/jquery.slimscroll.js"></script>
    <script src="{% static 'panel/doctor' %}/js/select2.min.js"></script>
    <script src="{% static 'panel/doctor' %}/js/jquery.dataTables.min.js"></script>
    <script src="{% static 'panel/doctor' %}/js/dataTables.bootstrap4.min.js"></script>
    <script src="{% static 'panel/doctor' %}/js/moment.min.js"></script>
    <script src="{% static 'panel/doctor' %}/js/bootstrap-datetimepicker.min.js"></script>
    <script src="{% static 'panel/doctor' %}/js/app.js"></script>

    <script>
      // Optional: client-side filtering of conversation items as the user types.
      $(document).ready(function(){
        $('#chatSearch').on('keyup', function(){
          var searchTerm = $(this).val().toLowerCase();
          $('.chat-item').each(function(){
            var text = $(this).text().toLowerCase();
            $(this).toggle(text.indexOf(searchTerm) > -1);
          });
        });
      });
    </script>
{% endblock %}