{% extends "firebase/firebase_layout.html" %}
<title>{% block title %}User Notification Log Index{% endblock %}</title>
{% block style %}


 <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/qtip2/3.0.3/jquery.qtip.css">

<style type="text/css">
    .dataTable no-footer {
        width: 100% !important;
    }

    .mobile-responsive tr:hover:not(:first-child) {
        background-color: #d8e7f3;
    }

    @media screen and (max-width: 600px) {

        .mobile-responsive table {
            border: 0;
            border-collapse: collapse;
        }

        .mobile-responsive table thead {
            display:none;
        }
        
        .mobile-responsive table th {
            display:none;
        }

        .mobile-responsive tr:hover:not(:first-child) {
            background-color: #d8e7f3;
        }

        .mobile-responsive table tr {
            margin-bottom: 20px;
            display: block;
            border-bottom: 2px thin #faf5f5;
            box-shadow: 2px 2px 1px #dadada;
            border-collapse: collapse;
        }

        .mobile-responsive table td {
            display: block;
            text-align: right;
            font-size: 15px;
            border-collapse: collapse;
            padding: 25px;
        }

        .mobile-responsive table td:last-child {
            border-bottom: 0;
        }

        .mobile-responsive table td::before {
            content: attr(data-th);
            float: left;
            text-transform: uppercase;
            font-weight: bold;
            font-size: 14px;
        }

        .sidebar {
            width: 100%;
            height: auto;
            position: relative;
        }
        .sidebar a {
            float: left;
        }

        .sidebar a {
            text-align: center;
            float: none;
        }
    }
</style>

{% endblock %} {% block content %}
<div >
<h4 style="text-align: center;">{{get_conf.conf_name}} - Firebase User Notification log Index</h4>
<b>
    <h6 style="text-align: center;font-weight: 800;">
        {% if fb_user_data.full_name %} #{{fb_user_data.full_name}} - {% else %} {% endif %}  {% if fb_user_data.email %} {{fb_user_data.email}} -{% else %} {% endif %}  {% if fb_user_data.mobile %} {{fb_user_data.mobile}} {% else %} {%
        endif %}
    </h6>
</b>

<div class="row">
    <div class="col-lg-3"></div>
    <div class="col-lg-6">
        <div class="mobile-responsive  mb-5">
            <table class="table table-striped table-bordered" id="myTable"  style="font-size:12px;">
                {% if fb_logs_data %} 
                <thead >
                    <tr style="background-color: #01033f;color:#fff">
                        <th width="10%">S No.</th>
                        <th width="30%">Title</th>
                        <th width="10%">Content</th>
                        <th width="30%">Send At</th>
                        <th width="10%">Status</th>
                    </tr>
                </thead>
                <tbody>
                    {% for fb in fb_logs_data %} 
                    <tr>
                        <td data-th="S No.">{{loop.index}}</td>
                        <td data-th="Title">{{fb.notification_title}}</td>
                        <td data-th="Content">
                            <i  {% if fb.fb_msg == 'S' %} style="color:green;" {% elif fb.fb_msg == 'E' %}  style="max-width: 25px;color:red;" {% else %} {% endif %} class="hasTooltip" data-title="Content" data-value="{{ fb.notification_content.replace('\n','<br />') | safe or ''}}" data-atip="about_member_approve"><img src="/static/images/notify_icon/sms.png" alt=""  style="max-width: 25px;" /></i>
                        </td>
                        <td data-th="Send At"><img src="/static/images/notify_icon/clock.png" alt="" style="max-width: 30px;" />{{fb.send_at}}</td>
                        
                        <td data-th="Status">
                            <i class="hasTooltip" data-title="Firebase Message" data-value="{{fb.fb_message}}" data-atip="about_member_approve">
                                {% if fb.fb_msg == 'S' %}
                                    <img src="/static/images/notify_icon/right_icon.png" alt="" style="max-width: 30px;" />
                                {% elif fb.fb_msg == 'E' %}
                                    <img src="/static/images/notify_icon/wrong_icon.png" alt="" style="max-width: 30px;" />
                                {% else %} 
                                    <img src="/static/images/notify_icon/warning_icon.png" alt="" style="max-width: 30px;" />
                                {% endif %}
                            </i>
                        </td>
                    </tr>
                    {% endfor %} 
                </tbody>
                {% else %}
                <thead >
                    <tr style="background-color: #01033f;color:#fff">
                        <th width="100%"></th>
                    </tr>
                </thead>
                 <tbody>
                    <tr>
                        <td colspan="5" class="text-center">No record found.</td>
                    </tr>
                </tbody>
                {% endif %}
            </table>
        </div>  
    </div>
    <div class="col-lg-3"></div>
</div>


<!-- qtip tooltip codes -->
<div class="d-none" id="about_member_approve" >
   <h6 id="notify_title"></h6>
    <hr/>
    <h6 id="fb_msg"></h6>
</div>

</div>
{% endblock %} {% block bottomscript %}
<script src="https://cdn.jsdelivr.net/qtip2/3.0.3/jquery.qtip.min.js"></script>
<script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.js"></script>
<script type="text/javascript">
    $(document).ready( function () {
        $("#myTable").dataTable( {
            "iDisplayLength": 50
        });  
    });

    $('.hasTooltip').each(function() { 
        var fb_message = $(this).attr('data-value');
        var title      = $(this).attr('data-title');
        $("#fb_msg").empty();
        $("#fb_msg").html(fb_message);
        $("#notify_title").empty();
        $("#notify_title").html(title);

        $(this).qtip({
            style: {
              classes : 'qtip-dark qtip-rounded'
            },
            content: {
                text: $("#"+$(this).attr("data-atip")).html()
            },
            position: {
                at: 'center left',
                my: 'right center',
                effect: false,
                viewport: $('body'),
                adjust: {
                    method: 'none shift'
                }
            },
        });
    });
</script>

{% endblock %}