<?php $__env->startSection('title', trans('messages.dashboard')); ?>

<?php $__env->startSection('head'); ?>
    <script type="text/javascript" src="<?php echo e(AppUrl::asset('core/echarts/echarts.min.js'), false); ?>"></script>
    <script type="text/javascript" src="<?php echo e(AppUrl::asset('core/echarts/dark.js'), false); ?>"></script>
<?php $__env->stopSection(); ?>

<?php $__env->startSection('content'); ?>
    <h2 class="mt-4 pt-2">
        <?php echo e(trans('messages.audience.manage'), false); ?>

    </h2>
    <p><?php echo trans('messages.audience.intro'); ?></p>

    <div class="row mt-4 mb-4">
        <div class="col-md-3">
            <div class="bg-secondary p-3 shadow rounded-3 text-white">
                <div class="text-center">
                    <h2 class="text-semibold mb-1 mt-0"><?php echo e(number_with_delimiter($subscriberCount), false); ?></h2>
                    <div class="text-muted2 text-white">
                        <?php echo trans('messages.list.mail_list_count.desc', [
                            'count' => number_with_delimiter($subscribedCount)
                        ]); ?>

                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="bg-secondary p-3 shadow rounded-3 text-white">
                <div class="text-center">
                    <h2 class="text-semibold mb-1 mt-0"><?php echo e(number_to_percentage($activeContactPercent), false); ?></h2>
                    <div class="text-muted2 text-white">
                        <?php echo e(trans('messages.list.active_contact.desc'), false); ?>

                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="bg-secondary p-3 shadow rounded-3 text-white">
                <div class="text-center">
                    <h2 class="text-semibold mb-1 mt-0"><?php echo e(number_with_delimiter($formCount), false); ?></h2>
                    <div class="text-muted2 text-white">
                        <?php if(Auth::user()->customer->local()->forms()->count()): ?>
                            <p class="mb-0"><?php echo e(trans('messages.list.form.desc'), false); ?></p>
                        <?php else: ?>
                            <p class="mb-0"><?php echo e(trans('messages.forms_not_yet'), false); ?></p>
                        <?php endif; ?>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <a href="<?php echo e(action('BlacklistController@index'), false); ?>" class="bg-secondary p-3 shadow rounded-3 text-white d-block">
                <div class="text-center">
                    <h2 class="text-semibold mb-1 mt-0">
                        <?php echo e(number_with_delimiter($blacklistedCount), false); ?>

                    </h2>
                    <div class="text-muted2 text-white">
                        <p class="mb-0"><?php echo trans('messages.list.blacklist.desc'); ?></p>                        
                    </div>
                </div>
            </a>
        </div>
    </div>

    <h3 class="mt-5 mb-20"><span class="material-symbols-rounded me-2">insights</span> <?php echo e(trans('messages.audience.audience_growth.title'), false); ?></h3>
    <p class="mb-4"><?php echo e(trans('messages.audience.audience_growth.desc'), false); ?></p>
    <div class="border shadow-sm rounded">
        <div class="p-3">
            <div id="AudienceGrowthChart"
                class=""
                style="width:100%; height:350px;"
            ></div>
        </div>
    </div>
    
    <script>
        var AudienceGrowthChart = {
            url: '<?php echo e(action('AudienceController@growthChart'), false); ?>',
            getChart: function() {
                return $('#AudienceGrowthChart');
            },
    
            showChart: function() {
                $.ajax({
                    method: "GET",
                    url: this.url,
                })
                .done(function( response ) {
                    AudienceGrowthChart.renderChart( response );
                });
            },
    
            renderChart: function(data) {
                    // based on prepared DOM, initialize echarts instance
                    var my2Chart = echarts.init(AudienceGrowthChart.getChart()[0], ECHARTS_THEME);
    
                    var option = {
                        tooltip: {
                            trigger: 'axis'
                        },
                        legend: {
                            data: ['<?php echo e(trans('messages.total'), false); ?>', '<?php echo e(trans('messages.unsubscribed'), false); ?>']
                        },
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '3%',
                            containLabel: true
                        },
                        toolbox: {
                            show: false
                        },
                        xAxis: {
                            type: 'category',
                            boundaryGap: false,
                            data: data.columns
                        },
                        yAxis: {
                            type: 'value'
                        },
                        series: [
                            {
                                name: '<?php echo e(trans('messages.total'), false); ?>',
                                type: 'line',
                                itemStyle: {
                                    color: '#5cb2b2'
                                },
                                data: data.total
                            },
                            {
                                name: '<?php echo e(trans('messages.unsubscribed'), false); ?>',
                                type: 'line',
                                itemStyle: {
                                    color: '#b26e59'
                                },
                                data: data.unsubscribed
                            }
                        ]
                    };
    
                    // use configuration item and data specified to show chart
                    my2Chart.setOption(option);
            }
        }
    
        AudienceGrowthChart.showChart();
    </script>

    <h3 class="mt-5 mb-20"><span class="material-symbols-rounded me-2">open_in_new</span> <?php echo e(trans('messages.audience.quick_action'), false); ?></h3>
    <p class="mb-4"><?php echo e(trans('messages.audience.quick_action.desc'), false); ?></p>

    <div class="my-4">
        <div class="quick-action-items">
            <div class="quick-action py-3 border-top">
                <div class="d-flex align-items-center">
                    <div class="me-4">
                        <img width="180px" src="<?php echo e(url('images/quick-action-sign-up-form.svg'), false); ?>" />
                    </div>
                    <div>
                        <label class="fs-6 fw-600 mb-1"><?php echo e(trans('messages.create_a_signup_form'), false); ?></label>
                        <p class="mb-0 text-muted fst-italic">
                            <?php echo trans('messages.create_a_signup_form.desc'); ?>

                        </p>
                    </div>
                    <div class="ms-auto">
                        <a href="<?php echo e(action('FormController@index'), false); ?>" class="btn btn-secondary py-2 px-4">
                            <?php echo e(trans('messages.form.create'), false); ?>

                        </a>
                    </div>
                </div>
            </div>
            <div class="quick-action py-3 border-top">
                <div class="d-flex align-items-center">
                    <div class="me-4">
                        <img width="180px" src="<?php echo e(url('images/import-contacts.png'), false); ?>" />
                    </div>
                    <div>
                        <label class="fs-6 fw-600 mb-1"><?php echo e(trans('messages.audience.import_contacts.title'), false); ?></label>
                        <p class="mb-0 text-muted fst-italic">
                            <?php echo trans('messages.create_a_signup_form.desc'); ?>

                        </p>
                    </div>
                    <div class="ms-auto">
                        <a href="javascript:;" class="btn btn-primary py-2 px-4 import-select-list">
                            <?php echo e(trans('messages.audience.import_contacts.title'), false); ?>

                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        var AudienceOverviewImportSelectList = {
            url: '<?php echo action('MailListController@selectList', [
                'redirect' => action('SubscriberController@import2', [
                    'list_uid' => 'list_uid',                    
                ]),
                'title' => trans('messages.audience.import_contacts.title'),
            ]); ?>',

            popup: null,

            getPopup: function() {
                if (this.popup == null) {
                    this.popup = new Popup({
                        url: this.url
                    });
                }

                return this.popup;
            },

            load: function() {
                this.getPopup().load();
            }
        }

        $(function() {
            $('.import-select-list').on('click', function() {
                AudienceOverviewImportSelectList.load();
            });
        });
    </script>
<?php $__env->stopSection(); ?>

<?php echo $__env->make('layouts.core.frontend', [
    'menu' => 'overview',
], array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?><?php /**PATH /home/xedaptot/be.naniguide.com/resources/views/audience/overview.blade.php ENDPATH**/ ?>