HEX
Server: Apache/2.4.52 (Ubuntu)
System: Linux spn-python 5.15.0-89-generic #99-Ubuntu SMP Mon Oct 30 20:42:41 UTC 2023 x86_64
User: arjun (1000)
PHP: 8.1.2-1ubuntu2.20
Disabled: NONE
Upload Files
File: //home/arjun/projects/buyercall_new/buyercall/buyercall/blueprints/sms/templates/sms/edit.jinja2
{% extends 'layouts/backend_leads.jinja2' %}

{% block title %}Edit Message Lead{% endblock %}
{% block heading %}Edit Message Lead {% endblock %}
{% block body %}
<div class="content">
    <div id="flash-messages">
    </div>
    <div class="row" id="divLeadForm">
        <div class="col-lg-12 col-md-12">
            <div class="card">
                <div class="card-header card-header-tabs" data-background-color="light-blue">
                    <div class="nav-tabs-navigation">
                        <div class="nav-tabs-wrapper">
                            <span class="nav-tabs-title">Message information:</span>
                            <ul class="nav nav-tabs" data-tabs="tabs">
                                <li class="active">
                                    <a href="#details" data-toggle="tab">
                                        <i class="material-icons">info_outline</i> Details
                                        <div class="ripple-container"></div>
                                    </a>
                                </li>
                                <li>
                                    <a href="#messages" data-toggle="tab">
                                        <i class="material-icons">message</i> Message History ({{ message_log_count }})
                                        <div class="ripple-container"></div>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="card-content">
                    <div class="tab-content">
                        <div class="tab-pane active" id="details">
                            <div class="row">
                                <div class="col-md-6 form-group">
                                    <label for="lblDate" class="control-label">Date</label>
                                    <label id="lblDate" class="form-control" disabled></label>
                                    <div id="divActualDate" style="display:none">{{  message_info.created_on }}</div>
                                </div>
                                <div class="col-md-6 form-group">
                                    <label for="lblType" class="control-label">Message Type</label>
                                    <label id="lblType" class="form-control" disabled> {{  message_info.type }}</label>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-6 form-group">
                                    <label for="lblTo" class="control-label">To</label>
                                    <label id="lblTo" class="form-control" disabled> {{  message_info.to }}</label>
                                </div>
                                <div class="col-md-6 form-group">
                                    <label for="lblFrom" class="control-label">From</label>
                                    <label id="lblFrom" class="form-control" disabled> {{  message_info.from_ }}</label>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-6 form-group">
                                    <label for="lblMediaUrl" class="control-label">Media URL</label>
                                    {% if message_info.media_url in ['','{}',' '] or message_info.media_url == [''] %}
                                        <label id="noMedia" class="form-control" disabled>
                                            No media available
                                        </label>
                                    {% else %}
                                        <label id="lblMediaUrl" class="form-control"><a href="#smsImage" data-toggle="modal" data-target="#smsImage">Click to view</a></label>
                                    {% endif %}
                                </div>
                                <div class="col-md-6 form-group">
                                    <label for="lblStatus" class="control-label">Status</label>
                                    <label id="lblStatus" class="form-control" disabled> {{  message_info.status }}</label>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-6 form-group">
                                    <label for="lblDirection" class="control-label">Direction</label>
                                    <label id="lblDirection" class="form-control" disabled> {{  message_info.direction }}</label>
                                </div>
                                <div class="col-md-6 form-group">
                                    <label for="lblLead" class="control-label">Lead</label>
                                    <label id="lblLead" class="form-control" disabled> {{ message_info.contact.message_name }}</label>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-6 form-group">
                                    <label for="lblLeadSource" class="control-label">Lead Source</label>
                                    <label id="lblLeadSource" class="form-control" disabled> {{  message_info.inbound.friendly_name }}</label>
                                </div>
                                <div class="col-md-6 form-group">
                                    <label for="lblAgent" class="control-label">Agent</label>
                                    <label id="lblAgent" class="form-control" disabled> {{ message_info.message_agent }}</label>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-12 form-group">
                                    <label for="lblMessage" class="control-label">Message</label>
                                    <label id="lblMessage" class="form-control" disabled> {{  message_info.body_text }}</label>
                                </div>
                            </div>
                            <br>
                            <br>
                        </div>
                        <div class="tab-pane" id="messages">
                            <div class="row">
                                {% if message_log_count > 0 -%}
                                <div class="table-responsive">
                                    <table class="table table-striped">
                                          <thead>
                                              <tr>
                                                  <th>Date</th>
                                                  <th>From</th>
                                                  <th>To</th>
                                                  <th>Body</th>
                                                  <th>Agent</th>
                                                  <th>Lead Source</th>
                                                  <th>Direction</th>
                                                  <th class="text-center">Status</th>
                                                  <th class="text-center">Media</th>
                                              </tr>
                                          </thead>
                                          <tbody>
                                              {% for message in message_log %}
                                              <tr>
                                                  <td>{{ message.interaction_time | e }}</td>
                                                  <td>{{ message.from_ | e }}</td>
                                                  <td>{{ message.to | e }}</td>
                                                  <td>{{ message.body_text | e }}</td>
                                                  <td>{{ message.message_agent | e }}</td>
                                                  <td>{{ message.inbound.friendly_name | e }}</td>
                                                  <td>{{ message.direction | e }}</td>
                                                  <td class="text-center">
                                                      <span class="label {%
                                                      if message.status.lower() == 'received' or message.status.lower() == 'receiving' or message.status.lower() == 'recieved' or message.status == 'recieved' -%}
                                                      label-primary
                                                      {%- elif message.status == 'sent' or message.status == 'sending' or message.status=='SENT' -%}
                                                      label-success
                                                      {%- else -%}
                                                      label-danger
                                                      {%- endif -%}">
                                                          {{ message.status | capitalize | e }}
                                                      </span>
                                                  </td>
                                                  <td class="text-center">
                                                    {% if message.media_url in ['','{}',' ', None] or message.media_url == [''] %}

                                                    {% else %}
                                                      {% for media in message.media_url %}
                                                        <a href="#smsImageTable" data-toggle="modal" data-target="#smsImageTable" data-whatever="{{ media }}" data-body="{{ message.body_text }}">View</a>
                                                       {% endfor %}
                                                    {% endif %}
                                                  </td>
                                              </tr>
                                              {% endfor %}
                                          </tbody>
                                    </table>
                                </div>
                                {%- else -%}
                                <div class="table-responsive">
                                    <table class="table table-striped">
                                          <thead>
                                              <tr>

                                              </tr>
                                          </thead>
                                          <tbody>
                                              <tr>
                                                  <td>No data available</td>
                                              </tr>
                                          </tbody>
                                    </table>
                                </div>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- Modal -->
<div class="modal fade" id="smsImage" tabindex="-1" role="dialog" aria-labelledby="smsImagelLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Message Media</h5>
      </div>
      <div class="modal-body">
        <div class="col-md-12 text-center">
        {% if message_info.media_url %}
            {% if multiple_media %}
                {% for i in multiple_media %}
                    <img src="{{ i }}" style="max-height: 400px; max-width: 450px; padding: 3px 3px;">
                {% endfor %}
            {% else %}
                {% for i in message_info.media_url %}
                    <img src="{{ i }}" style="max-height: 400px; max-width: 450px; padding: 3px 3px;">
                {% endfor %}
            {% endif %}
        {% endif %}
        </div>
        <div>
            Message:
            <br />
            {{  message_info.body_text }}
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-simple" data-dismiss="modal">close</button>
      </div>
    </div>
  </div>
</div>
<!-- Modal -->
<div class="modal fade" id="smsImageTable" tabindex="-1" role="dialog" aria-labelledby="smsImageTablelLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Message Media</h5>
      </div>
      <div class="modal-body">
        <div class="col-md-12 text-center">
            <img src=""  style="max-height: 450px; max-width: 500px;" id="image">
        </div>
        <div class="col-md-12 ">
            <p class="msg-heading-img-popup">Message:</p>
            <p id="textBodyPop" disabled></input>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-simple" data-dismiss="modal">close</button>
      </div>
    </div>
  </div>
</div>
{% endblock %}
{% block pagescripts %}
    <script>
        $(function(){

            function createFlashMsg($container, message, status, type) {
                var $flashMsgContainer = $('#flash-messages');
                var $alertContainer = $('#flash-messages .'+type+'.alert');

                if (!$flashMsgContainer[0]) {
                    $container.before('<div id="flash-messages">'+
                                      '<div class="'+type+' alert alert-'+status+'" role="alert">'+
                                        `${message}` +
                                      '</div>'+
                                '</div>');
                } else if(!$alertContainer[0]) {
                    $flashMsgContainer.append('<div class="'+type+' alert alert-'+status+'" role="alert">'+
                                        `${message}` +
                                      '</div>');
                } else {
                    $alertContainer.html(`${message}`);
                }
            }
        });
    </script>
    <script>
        window.setTimeout(function() { $('#flash-messages').hide('slow') }, 10000);
    </script>
    <script>
        $(document).ready(function() {

            //Date day label
            var loActualDate = $('#divActualDate').html();

            if (loActualDate != undefined && loActualDate != null && loActualDate != "") {
                var loResultDate = moment(new Date(loActualDate)).fromNow();
                $("#lblDate").text(loResultDate);
            }
        });
    </script>
    <script>
    $('#smsImageTable').on('show.bs.modal', function (event) {
      var link = $(event.relatedTarget)
      var recipient = link.data('whatever') // Extract info from data-* attributes
      // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
      // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
      var messageText = link.data('body')
      var modal = $(this)
      modal.find('.modal-body #image').attr('src',recipient)
      modal.find('.modal-body #textBodyPop').text(messageText)
    })
    </script>
{% endblock %}