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

<style type="text/css">
    .canvasjs-chart-credit {
        display: none !important;
    }

    .pie_chart {
        max-width: 920px;
        margin: 0px auto;
        box-sizing: border-box;
        width: 300px !important;
        height: 300px !important;
    }
</style>

{% endblock %} {% block content %}
<h4 style="text-align: center;">Visual Representation of FB Notification</h4>


<div class="row">
    <div class="col-md-3"></div>
    <div class="col-md-6">
        <div class="card" style="border-radius: 15px;">
            <div class="card-body">
                <h5 class="card-title"><b>{{notify_title.notification_title}} :</b></h5>
                <div class="row">
                    <div class="col-md-4">
                        <i class="fa fa-square" style="font-size:15 px;color:#36a2eb;"> </i> 
                        <span style="font-family: fangsong;">Success Count : {% if pie_chart: %}{{pie_chart.success_count}} {% else %} 0 {% endif %}</span>
                    </div>
                    <div class="col-md-4">
                        <i class="fa fa-square" style="font-size:15 px;color:#ff6384;"> </i> 
                        <span style="font-family: fangsong;">Failure Count :{% if pie_chart: %} {{pie_chart.failure_count}} {% else %} 0 {% endif %}</span>
                    </div>
                    <div class="col-md-4">
                        <i class="fa fa-square" style="font-size:15 px;color:#ff9f40;"> </i> 
                        <span style="font-family: fangsong;">Total Count :{% if pie_chart: %} {{pie_chart.total_count}} {% else %} 0 {% endif %}</span>
                    </div>
                </div>
                <hr>
                {% if pie_chart: %}
                <canvas class="pie_chart" id="pie_chart"></canvas>
                <h6 style="text-align:center;margin-top: 8px;">
                <img src="/static/images/clock_2.png" alt="" style="max-width: 20px;" /> Sent at : {{pie_chart.send_at}}</h6>
                {% else %}
                <h6 style="text-align:center;">No Record found..</h6>
                {% endif %}
            </div>
        </div>
    </div>
    <div class="col-md-3"></div>
</div>
<canvas class="pie_chart" id="myChart"></canvas>

{% endblock %} {% block bottomscript %}
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
{% if pie_chart :%}
<script type="text/javascript">
    $(document).ready(function(){
        var label          = {{pie_chart.label | tojson | safe }};
        var success_count  = {{pie_chart.success_count | tojson | safe }};
        var failure_count  = {{pie_chart.failure_count | tojson | safe }};
        var total_count    = {{pie_chart.total_count   | tojson | safe }};
        
        // Pie Chart Start Here
        const ctx = document.getElementById('pie_chart');
          new Chart(ctx, {
            type: 'doughnut',
            data: {
              labels: label,
              datasets: [{
                label: 'Count',
                data: [success_count,failure_count,total_count],
                borderWidth:0
              }]
            },
            options: {
              scales: {
                y: {
                  beginAtZero: true
                }
              }
            }
          });
        // Pie Chart End Here
    });
    // Document Ready Ends
</script>
{% else %}
<script type="text/javascript">
    $(document).ready(function(){

    });
</script>
{% endif %}
{% endblock %}