@extends('layouts.master')

@section('content')
    <div class="main-content app-content mt-0">
        <div class="side-app">

            <!-- CONTAINER -->
            <div class="main-container container-fluid">

                <!-- PAGE-HEADER -->
                <div class="page-header">
                    <h1 class="page-title">{{ __('common.admin_dashboard') }}</h1>
                    <div>
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item"><a href="javascript:void(0)">{{ __('common.home') }}</a></li>
                            <li class="breadcrumb-item active" aria-current="page">{{ __('common.dashboard') }}</li>
                        </ol>
                    </div>
                </div>
                <!-- PAGE-HEADER END -->

                <!-- ROW-1 -->
                <div class="row">
                    <div class="col-lg-12 col-md-12 col-sm-12 col-xl-12">
                        <div class="row">
                            <div class="col-lg-6 col-md-6 col-sm-12 col-xl-3">
                                <div class="card overflow-hidden">
                                    <div class="card-body">
                                        <div class="d-flex">
                                            <div class="mt-2">
                                                <h6 class="">{{ __('common.total_app_users') }}</h6>
                                                <h2 class="mb-0 number-font">{{ $appUsers ?? 0 }}</h2>
                                            </div>
                                            <div class="ms-auto">
                                                <div class="chart-wrapper mt-1">
                                                    <canvas id="saleschart" class="h-8 w-9 chart-dropshadow"></canvas>
                                                </div>
                                            </div>
                                        </div>

                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-6 col-md-6 col-sm-12 col-xl-3">
                                <div class="card overflow-hidden">
                                    <div class="card-body">
                                        <div class="d-flex">
                                            <div class="mt-2">
                                                <h6 class="">{{__('common.total_companies')}}</h6>
                                                <h2 class="mb-0 number-font">{{ $totalCompanies ?? 0 }}</h2>
                                            </div>
                                            <div class="ms-auto">
                                                <div class="chart-wrapper mt-1">
                                                    <canvas id="leadschart" class="h-8 w-9 chart-dropshadow"></canvas>
                                                </div>
                                            </div>
                                        </div>

                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-6 col-md-6 col-sm-12 col-xl-3">
                                <div class="card overflow-hidden">
                                    <div class="card-body">
                                        <div class="d-flex">
                                            <div class="mt-2">
                                                <h6 class="">{{ __('common.total_tag_scanned') }}</h6>
                                                <h2 class="mb-0 number-font">{{ $totalTagScanned ?? 0 }}</h2>
                                            </div>
                                            <div class="ms-auto">
                                                <div class="chart-wrapper mt-1">
                                                    <canvas id="profitchart" class="h-8 w-9 chart-dropshadow"></canvas>
                                                </div>
                                            </div>
                                        </div>

                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-6 col-md-6 col-sm-12 col-xl-3">
                                <div class="card overflow-hidden">
                                    <div class="card-body">
                                        <div class="d-flex">
                                            <div class="mt-2">
                                                <h6 class="">{{ __('common.active_companies') }}</h6>
                                                <h2 class="mb-0 number-font">{{ $getActiveCompanies ?? 0 }}</h2>
                                            </div>
                                            <div class="ms-auto">
                                                <div class="chart-wrapper mt-1">
                                                    <canvas id="costchart" class="h-8 w-9 chart-dropshadow"></canvas>
                                                </div>
                                            </div>
                                        </div>

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


                        </div>
                    </div>
                </div>
                <!-- ROW-1 END -->

                <!-- ROW-2 -->
                <div class="row">
                    <div class="col-sm-12 col-md-12 col-lg-12 col-xl-9">
                        <div class="card">
                            <div class="card-header">
                                <h3 class="card-title">{{ __('common.sales_analytics') }}</h3>
                            </div>
                            <div class="card-body">
                                <div class="d-flex mx-auto text-center justify-content-center mb-4">
                                    <div class="d-flex text-center justify-content-center me-3"><span
                                            class="dot-label bg-primary my-auto"></span>{{ __('common.sales') }}</div>
                                   
                                </div>
                                <div class="chartjs-wrapper-demo">
                                    <canvas id="transactions-admin" class="chart-dropshadow"></canvas>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- COL END -->
                    <div class="col-sm-12 col-md-12 col-lg-12 col-xl-3">

                            <div class="card overflow-hidden">
                                <div class="card-body">
                                    <div class="d-flex">
                                        <div class="mt-2">
                                            <h6 class="">{{ __('common.total_profit') }}</h6>
                                            <h2 class="mb-0 number-font">{{'$'.$getAdminProfit ?? 0 }}</h2>
                                        </div>
                                        <div class="ms-auto">
                                            <div class="chart-wrapper mt-1">
                                                <canvas id="costchart" class="h-8 w-9 chart-dropshadow"></canvas>
                                            </div>
                                        </div>
                                    </div>

                                </div>
                            </div>




                        <div class="card overflow-hidden">

                            <div class="card-body">
                                <div class="d-flex mb-4 mt-3">
                                    <div class="avatar avatar-md bg-secondary-transparent text-secondary bradius me-3">
                                        <i class="fe fe-check"></i>
                                    </div>
                                    <div class="">
                                        <h6 class="mb-1 fw-semibold" style="margin-top:10px;">{{ __('common.authentic_product_scans') }}</h6>

                                    </div>
                                    <div class=" ms-auto my-auto">
                                        <p class="fw-bold fs-20">{{ $getScanIdentifier->authentic_count ?? 0 }}</p>
                                    </div>
                                </div>
                                <div class="d-flex">
                                    <div class="avatar  avatar-md bg-pink-transparent text-pink bradius me-3">
                                        <i class="fe fe-x"></i>
                                    </div>
                                    <div class="">
                                        <h6 class="mb-1 fw-semibold" style="margin-top:10px;">{{ __('common.fraud_product_scans') }}</h6>

                                    </div>
                                    <div class=" ms-auto my-auto">
                                        <p class="fw-bold fs-20 mb-0">{{ $getScanIdentifier->fraud_count ?? 0 }}</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- COL END -->
                </div>
                <!-- ROW-2 END -->


            </div>
            <!-- CONTAINER END -->
        </div>
    </div>
@endsection

@section('bottom_script')
    @php
        $monthName = array_column($graphResult, 'month');
        $tagScanned = array_column($graphResult, 'count');
        // dumper($tagScanned);
    @endphp

    <script>
        var myCanvas = document.getElementById("transactions-admin");
        myCanvas.height = "330";
        const labels = @json($monthName);
        const data = @json($tagScanned);

        var myCanvasContext = myCanvas.getContext("2d");
        var gradientStroke1 = myCanvasContext.createLinearGradient(0, 80, 0, 280);
        gradientStroke1.addColorStop(0, 'rgba(108, 95, 252, 0.8)');
        gradientStroke1.addColorStop(1, 'rgba(108, 95, 252, 0.2) ');

        var gradientStroke2 = myCanvasContext.createLinearGradient(0, 80, 0, 280);
        gradientStroke2.addColorStop(0, 'rgba(5, 195, 251, 0.8)');
        gradientStroke2.addColorStop(1, 'rgba(5, 195, 251, 0.2) ');
        document.getElementById('transactions-admin').innerHTML = '';
        var myChart;
        myChart = new Chart(myCanvas, {

            type: 'line',
            data: {
                labels: labels,
                type: 'line',
                datasets: [{
                    label: 'Tag Scanned',
                    data: data,
                    backgroundColor: gradientStroke1,
                    borderColor: "#05c3fb",
                    pointBackgroundColor: '#fff',
                    pointHoverBackgroundColor: gradientStroke1,
                    pointBorderColor: "#05c3fb",
                    pointHoverBorderColor: gradientStroke1,
                    pointBorderWidth: 0,
                    pointRadius: 0,
                    pointHoverRadius: 0,
                    borderWidth: 3,
                    fill: 'origin',
                    lineTension: 0.3
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        display: false,
                        labels: {
                            usePointStyle: false,
                        }
                    },
                    tooltip: {
                        enabled: false
                    }
                },
                scales: {
                    x: {
                        display: true,
                        grid: {
                            display: false,
                            drawBorder: false,
                            color: 'rgba(119, 119, 142, 0.08)'
                        },
                        ticks: {
                            autoSkip: true,
                            color: '#b0bac9'
                        },
                        scaleLabel: {
                            display: false,
                            labelString: 'Month',
                            fontColor: 'transparent'
                        }
                    },
                    y: {
                        ticks: {
                            min: 0,
                            max: 1050,
                            stepSize: 150,
                            color: "#b0bac9",
                        },
                        display: true,
                        grid: {
                            display: true,
                            drawBorder: false,
                            zeroLineColor: 'rgba(142, 156, 173,0.1)',
                            color: "rgba(142, 156, 173,0.1)",
                        },
                        scaleLabel: {
                            display: false,
                            labelString: 'sales',
                            fontColor: 'transparent'
                        }
                    }
                },
                title: {
                    display: false,
                    text: 'Normal Legend'
                }
            }
        });
    </script>
@endsection