{% extends "DAIManagementApp/base.html" %}
{% block content %}

<div class="app-content">
    <div class="side-app">

        <!-- PAGE-HEADER -->

        <div class="page-header">
            <div>
                <h1 class="page-title">Stats per Campaigns </h1>
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="#"> Stats </a></li>
                    <li class="breadcrumb-item active" aria-current="page">Stats per Campaigns </li>
                </ol>
            </div>
        </div>
            
        <div class="row">
            <div class="card">

            <div class="card-header">
                <h3 class="card-title">Campaigns with the highest cpm</h3>
            </div>
            <br>
            <div class="row">

                {% for cpm in cpms %}
                <div class="col-sm-12 col-md-6 col-lg-6 col-xl-3">
                    
                            <div class="card">
                                <div class="card-body text-center">
                                    <!-- <i class="fa fa-firefox text-primary fa-3x"></i> -->
                                    <h3 class="text-muted">{{ cpm.name }}</h3>
                                    <h6 class="mt-4 mb-2">CPM</h6>
                                    <h2 class="mb-2 number-font">{{ cpm.cpm }}</h2>
                                    
                                </div>
                            </div>
                            
                        </div>
                {% endfor %}
                  

                                </div>
                                </div>

                </div>       
        <div class="row">
            <div class="col-sm-12 col-md-4 col-lg-12 col-xl-9">
                <div class="card">
                    <div class='card-header'> Campaigns according to advertisers</div>
                    <div class="card-body">
                        <canvas id="bar-chart" class="h-275 chartjs-render-monitor" width="800" height="450" style="display: block; width: 565px; height: 275px;"></canvas>
                    </div>
                </div>
            </div>
            
            <div class="col-sm-12 col-md-12 col-lg-12 col-xl-3">
                <div class="card custom-card ">
                    <div class="card-header">
                        <h3 class="card-title">Pacing</h3>
                    </div>
                    <div class="card-body pt-0">
                        <div id="recentorders2" class="apex-charts ht-150"></div>
                        <div class="row sales-product-infomation pb-0 mb-0 mx-auto wd-100p mt-6">
                            <div class="col-md-6 col justify-content-center text-center">
                                <p class="mb-0 d-flex justify-content-center"><span class="legend bg-primary"></span>Pacing</p>
                               
                                <h3 class="mb-1 fw-bold">{{pacing.true}}</h3>
                                
                            </div>
                            <div class="col-md-6 col text-center float-end">
                                <p class="mb-0 d-flex justify-content-center "><span class="legend bg-background2"></span>Not Pacing</p>
                               
                                    <h3 class="mb-1 fw-bold">{{pacing.false}}</h3>
                                
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="col-sm-12 col-md-4 col-lg-12 col-xl-9">
                <div class="card">
                    <div class='card-header'> Etats Campaigns </div>
                    <div class="card-body">
                        <canvas id="chartPie" class="h-275 chartjs-render-monitor" width="800" height="450" style="display: block; width: 565px; height: 275px;"></canvas>
                    </div>
                </div>
            </div>
            
            
        </div>
    </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.3/dist/Chart.min.js"></script>
<script >
$(function() {
    var datapie = {
        labels: {{active.label|safe}},
        datasets: [{
            data: {{ active.data|safe }} ,
            
            backgroundColor: {{ active.color|safe }}
        }]
    };

    var optionpie = {
        maintainAspectRatio: false,
        responsive: true,
        legend: {
            display: true,
        },
        animation: {
            animateScale: true,
            animateRotate: true
        }
    };

    /* Doughbut Chart*/
    var ctx6 = document.getElementById('chartPie');
    var myPieChart6 = new Chart(ctx6, {
        type: 'doughnut',
        data: datapie,
        options: optionpie
    });
    new Chart(document.getElementById("bar-chart"), {
            type: 'bar',
            data: {
            labels: {{ brands.label|safe }},
            datasets: [
                {
                label: "",
                backgroundColor: {{ brands.color|safe }},
                data: {{ brands.data|safe }}
                }
            ]
            },
            options: {
            legend: { display: false },
            title: {
                display: false,
                text: 'Predicted world population (millions) in 2050'
            }
            }
        });

        
        var options = {
            chart: {
            height: 305,
            type: 'radialBar',
            offsetX: 0,
            offsetY: 10,
        },
        plotOptions: {
            radialBar: {
            startAngle: -135,
            endAngle: 135,
            size: 120,
            imageWidth: 50,
            imageHeight: 50,
            track: {
                strokeWidth: "80%",
            },
            dropShadow: {
                enabled: false,
                top: 0,
                left: 0,
                bottom: 0,
                blur: 3,
                opacity: 0.5
            },
            dataLabels: {
            name: {
                fontSize: '16px',
                color: undefined,
                offsetY: 30,
            },
            hollow: {
                size: "60%"
                },
            value: {
                offsetY: -10,
                fontSize: '22px',
                color: undefined,
                formatter: function (val) {
                return val + "%";
                }
            }
            }
        }
        },
        colors: ['#ff5d9e'],
        fill: {
            type: "gradient",
            gradient: {
                shade: "gradient",
                type: "horizontal",
                shadeIntensity: .5,
                gradientToColors: ['#6259ca'],
                inverseColors: !0,
                opacityFrom: 1,
                opacityTo: 1,
                stops: [0, 100]
            }
        },
        stroke: {
            dashArray: 4
        },
        series: [{{ pacing.purcent }} ],
            labels: [""]
        };

        var chart = new ApexCharts(document.querySelector("#recentorders2"), options);
        chart.render();

        
        

});

        
</script>



{% endblock content %}