<?php $__env->startSection('content'); ?>
<div class="container-fluid">
    <div class="row">
        <div class="col-sm-12">
            <div class="page-title-box">
                <div class="row">
                    <div class="col">
                        <h4 class="page-title">Finance Dashboard</h4>
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item"><a href="javascript:void(0);">LaraOffice</a></li>
                            <li class="breadcrumb-item active">Finance</li>
                        </ol>
                    </div><!--end col-->
                </div><!--end row-->                                                              
            </div><!--end page-title-box-->
        </div><!--end col-->
    </div><!--end row-->

    <div class="row">
        <div class="col-lg-3">
            <div class="card overflow-hidden">
                <div class="card-body">
                    <div class="row d-flex (justify-content-center)">
                        <div class="col">
                            <h5 class="text-muted font-13">Total Invoices</h5>
                            <h3 class="my-2"><?php echo e($summary['total_invoices']); ?></h3>
                        </div>
                        <div class="col-auto align-self-center">
                            <div class="report-main-icon bg-light-alt">
                                <i class="ti ti-file-invoice font-24 mb-0 text-muted"></i>
                            </div>
                        </div>
                    </div>
                </div><!--end card-body-->
            </div><!--end card-->
        </div><!--end col-->
        <div class="col-lg-3">
            <div class="card overflow-hidden">
                <div class="card-body">
                    <div class="row d-flex (justify-content-center)">
                        <div class="col">
                            <h5 class="text-muted font-13">Total Revenue</h5>
                            <h3 class="my-2">$<?php echo e(number_format($summary['total_revenue'], 2)); ?></h3>
                        </div>
                        <div class="col-auto align-self-center">
                            <div class="report-main-icon bg-light-alt">
                                <i class="ti ti-moneybag font-24 mb-0 text-muted"></i>
                            </div>
                        </div>
                    </div>
                </div><!--end card-body-->
            </div><!--end card-->
        </div><!--end col-->
        <div class="col-lg-3">
            <div class="card overflow-hidden">
                <div class="card-body">
                    <div class="row d-flex (justify-content-center)">
                        <div class="col">
                            <h5 class="text-muted font-13">Active Subscriptions</h5>
                            <h3 class="my-2"><?php echo e($summary['active_subscriptions']); ?></h3>
                        </div>
                        <div class="col-auto align-self-center">
                            <div class="report-main-icon bg-light-alt">
                                <i class="ti ti-refresh font-24 mb-0 text-muted"></i>
                            </div>
                        </div>
                    </div>
                </div><!--end card-body-->
            </div><!--end card-->
        </div><!--end col-->
        <div class="col-lg-3">
            <div class="card overflow-hidden">
                <div class="card-body">
                    <div class="row d-flex (justify-content-center)">
                        <div class="col">
                            <h5 class="text-muted font-13">Recurring Plans</h5>
                            <h3 class="my-2"><?php echo e($summary['recurring_plans']); ?></h3>
                        </div>
                        <div class="col-auto align-self-center">
                            <div class="report-main-icon bg-light-alt">
                                <i class="ti ti-calendar-event font-24 mb-0 text-muted"></i>
                            </div>
                        </div>
                    </div>
                </div><!--end card-body-->
            </div><!--end card-->
        </div><!--end col-->
    </div><!--end row-->

    <div class="row">
        <div class="col-lg-8">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title">Revenue Overview</h4>
                </div><!--end card-header-->
                <div class="card-body">
                    <div class="">
                        <div id="revenue_chart" class="apex-charts"></div>
                    </div>
                </div><!--end card-body-->
            </div><!--end card-->
        </div><!--end col-->
        <div class="col-lg-4">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title">Invoices Status</h4>
                </div><!--end card-header-->
                <div class="card-body">
                    <ul class="list-group">
                        <li class="list-group-item d-flex justify-content-between align-items-center">
                            Paid Invoices
                            <span class="badge bg-success rounded-pill"><?php echo e($summary['paid_invoices']); ?></span>
                        </li>
                        <li class="list-group-item d-flex justify-content-between align-items-center">
                            Unpaid Invoices
                            <span class="badge bg-warning rounded-pill"><?php echo e($summary['unpaid_invoices']); ?></span>
                        </li>
                    </ul>
                </div><!--end card-body-->
            </div><!--end card-->
        </div><!--end col-->
    </div><!--end row-->
</div>
<?php $__env->stopSection(); ?>

<?php $__env->startSection('scripts'); ?>
<script src="<?php echo e(asset('assets/libs/apexcharts/apexcharts.min.js')); ?>"></script>
<script>
    var options = {
        chart: {
            height: 335,
            type: 'area',
            toolbar: {
                show: false
            },
        },
        colors: ['#6772e5'],
        dataLabels: {
            enabled: false
        },
        stroke: {
            show: true,
            curve: 'smooth',
            width: 3,
            lineCap: 'square'
        },
        series: [{
            name: 'Revenue',
            data: <?php echo json_encode($revenueChart['data'], 15, 512) ?>
        }],
        labels: <?php echo json_encode($revenueChart['labels'], 15, 512) ?>,
        xaxis: {
            type: 'datetime',
            axisBorder: {
                show: false
            },
            axisTicks: {
                show: false
            },
        },
        yaxis: {
            labels: {
                formatter: function (value) {
                    return "$" + value;
                }
            }
        },
        fill: {
            type: "gradient",
            gradient: {
                shadeIntensity: 1,
                opacityFrom: 0.4,
                opacityTo: 0.1,
                stops: [0, 90, 100]
            }
        },
        tooltip: {
            x: {
                format: 'dd/MM/yy HH:mm'
            },
        },
    };

    var chart = new ApexCharts(document.querySelector("#revenue_chart"), options);
    chart.render();
</script>
<?php $__env->stopSection(); ?>

<?php echo $__env->make('layouts.app', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?><?php /**PATH /media/madu/E8460E1D460DECDE/projects/laraoffice/app/Modules/FINANCE/Providers/../Views/dashboard/index.blade.php ENDPATH**/ ?>