<div class="af2_dashboard_page">
    <div class="af2_card_table">
        <div class="af2_card">
            <div class="af2_card_block colorOne kpis-impressions">
                <div class="af2_card_label">
                    <div class="af2_statistics_icon"><i class="fas fa-eye"></i></div>
                    <div class="af2_statistics_label"><h5><?=__('Impressions', 'af2_multilanguage')?></h5></div>
                </div>
                <div class="af2_statistics_value"><h3><?=$af2_custom_contents['impressions']?></h3></div>
            </div>
        </div>
        <div class="af2_card">
            <div class="af2_card_block colorTwo kpis-leads">
                <div class="af2_card_label af2_small">
                    <div class="af2_statistics_icon"><i class="fas fa-comment-dots"></i></div>
                    <div class="af2_statistics_label"><h5><?=__('Leads', 'af2_multilanguage')?></h5></div>
                </div>
                <div class="af2_statistics_value"><h3><?=$af2_custom_contents['leads']?></h3></div>
            </div>
        </div>
        <div class="af2_card">
            <div class="af2_card_block colorThree kpis-conversionrate">
                <div class="af2_card_label">
                    <div class="af2_statistics_icon"><i class="fas fa-chart-bar"></i></div>
                    <div class="af2_statistics_label"><h5><?=__('Conversion rate', 'af2_multilanguage')?></h5></div>
                </div>
                <div class="af2_statistics_value"><h3><?=$af2_custom_contents['conversionrate']?></h3></div>
            </div>
        </div>
        <div class="af2_card">
            <div class="af2_card_block colorFour kpis-impressionfactor">
                <div class="af2_card_label">
                    <div class="af2_statistics_icon"><i class="fas fa-percentage"></i></div>
                    <div class="af2_statistics_label"><h5><?=__('Impression / Conversion', 'af2_multilanguage')?></h5></div>
                </div>
                <div class="af2_statistics_value"><h3><?=$af2_custom_contents['impressionfactor']?></h3></div>
            </div>
        </div>
    </div>
</div>
<div class="af2_card" style="margin-top: 20px;">
<div id="revenue-chart" class="af2_card_block"  style="min-width: 100%;min-height: 400px;">
    <div class="af2_chart_header" style="display: flex;justify-content: space-between;">
        <div class="af2_chart_heading">
            <h4 class="header mt-0"><?=__('Leads by days in', 'af2_multilanguage')?> <span id="af2_date-text" class=""><?php echo date('F-Y'); ?></span></h4>
        </div>
        <div class="af2_chart_inputs">
            <?=__('Period:', 'af2_multilanguage')?>       
            <select id="monthSelect" name="month">
                <option value="" disabled><?=__('Select month', 'af2_multilanguage')?></option>
                <?php 
                foreach ($af2_custom_contents['monthsarray'] as $month_index => $month) {
                    ?><option value="<?=$month_index?>" <?=($month_index == (int) $af2_custom_contents['currentmonth']) ? 'selected' : '' ?>><?=$month?></option><?php
                }
                ?>
            </select>   
            <select id="yearSelect" name="year">
                <option value="" disabled><?=__('Select year', 'af2_multilanguage')?></option>
                <?php
                foreach (range($af2_custom_contents['currentyear']-10, $af2_custom_contents['currentyear']) as $value) {
                    ?><option value="<?=$value?>" <?=($value == (int) $af2_custom_contents['currentyear']) ? 'selected' : '' ?>><?=$value?></option><?php
                }
                ?>
            </select>           
        </div>
    </div>
    <div class="af2_chart_main">
        <div class="af2_chart_chart_wrapper">
            <canvas id="leadsConversionGraph" class="chartjs-render-monitor"></canvas>
        </div>
    </div>
</div>
</div>