{% extends "firebase/firebase_layout.html" %}
<title>{% block title %}Notification Index{% endblock %}</title>
{% block style %}
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/qtip2/3.0.3/jquery.qtip.css" />
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.4/css/jquery.dataTables.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 %}
<b>
    <h6 style="text-align: center; font-weight: 800; margin-top: 8px;">
        {% if notify_title.notification_title %} # Title - {{notify_title.notification_title}} {% else %} {% endif %}
    </h6>
</b>

<div class="row">
    <div class="col-lg-2"></div>
    <div class="col-lg-8">
        <div class="mobile-responsive">
            <table class="table table-striped table-bordered" id="myTable" style="font-size: 12px;">
                {% if notify_index %} 
                <thead>
                    <tr style="background-color: #01033f; color: #fff;">
                        <th width="5%">S No.</th>
                        <th width="20%">Full Name</th>
                        <th width="10%">Device Type</th>
                        <th width="10%">Content</th>
                        <th width="10%">Send User</th>
                        <th width="20%">Send At</th>
                        <th width="5%">Status</th>
                    </tr>
                </thead>
                <tbody>
                    {% for n in notify_index %}
                    <!-- {{notify_index}} -->
                    <tr>
                        <td data-th="S No.">{{loop.index}}</td>
                        <td data-th="Full Name">{{n.full_name}}</td>
                        <td data-th="Device Type">
                            {% if n.device_type == 'Android' %}
                            <img src="/static/images/notify_icon/andriod_icon.png" alt="" style="max-width: 30px;" />
                            {% else %}
                            <img src="/static/images/notify_icon/ios_bg_icon.png" alt="" style="max-width: 30px;" />
                            {% endif %}
                        </td>
                        <td data-th="Content">
                            <i class="hasTooltip" data-title="Content" data-value="{{ n.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 User">{{n.send_user}}</td>

                        <td data-th="Send At"><img src="/static/images/notify_icon/clock.png" alt="" style="max-width: 30px;" />{{n.send_at}}</td>

                        <td data-th="Status">
                             <i class="hasTooltip" data-title="Message Status"  data-value="{{ n.fb_message.replace('\n','<br />') | safe or ''}}" data-atip="about_member_approve">
                            {% if n.fb_msg == 'S' %}
                                <img src="/static/images/notify_icon/right_icon.png" alt="" style="max-width: 30px;" />
                            {% elif n.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="7" style="text-align: center; background-color: #fff;">No record found.</td>
                    </tr>
                </tbody>
                    {% endif %}
            </table>
        </div>
    </div>
    <div class="col-lg-2"></div>
</div>

<!-- qtip tooltip codes -->
<div class="d-none" id="about_member_approve">
    <h6 id="notify_title"></h6>
    <hr />
    <div id="fb_msg"></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 %}