@extends('companies.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 text-capitalize ">{{ auth()->user()->name }} Dashboard, </h1>
                    <div>
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item"><a href="javascript:void(0)">Home</a></li>
                            <li class="breadcrumb-item active" aria-current="page">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-4">
                                <div class="card overflow-hidden">
                                    <div class="card-body">
                                        <div class="d-flex">
                                            <div class="mt-2">
                                                <h6 class="">{{__('common.total')}} {{__('common.tags')}} {{__('common.added')}}</h6>
                                                <h2 class="mb-0 number-font">{{ $totalTagAdded ?? 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-4">
                                <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">{{ $scannedCount ?? 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-4">
                                <div class="card overflow-hidden">
                                    <div class="card-body">
                                        <div class="d-flex">
                                            <div class="mt-2">
                                                <h6 class="">{{__('common.tags')}} {{__('common.remaining')}}</h6>
                                                <h2 class="mb-0 number-font">{{ $remainingTags ?? 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="">Active Plan</h6>
                                            <h4 class="mb-0 number-font">{{$activePlan->plan_name ?? 0}} ({{dateFormat($activePlan->start_date, DISPLAY_DATE) ?? ''}} - {{dateFormat($activePlan->end_date, DISPLAY_DATE) ?? ''}})</h4>
                                        </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-12">
                        <div class="card">
                            <div class="card-header">
                                <h3 class="card-title">{{__('common.tag_scan_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.tag')}} {{__('common.scanned')}}</div>

                                </div>
                                <div class="chartjs-wrapper-demo">
                                    <canvas id="transactions-company" class="chart-dropshadow"></canvas>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- COL END -->
                    {{-- <div class="col-sm-12 col-md-12 col-lg-12 col-xl-3">
                         @if (isset($activePlan) && $activePlan)
                        @foreach($activePlan as $plan)
                        <div class="card overflow-hidden">
                                
                                
                            <div class="card-body  border-top">
                                <h3 class="card-title " style="color: #6c5ffc;">
                                    {{ $plan->plan_name . ' Plan (Active)' ?? 'Buy Plan' }}</h3>
                                <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="fw-bold fs-16">{{__('common.plan')}} {{__('common.start')}} {{__('common.date')}}</h6>
                                        <p class="fw-normal fs-12"> <span
                                                class="text-success">{{ dateFormat($plan->start_date, DISPLAY_DATE) ?? '' }}</span>
                                        </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="fw-bold fs-16">{{__('common.plan')}} {{__('common.end')}} {{__('common.date')}}</h6>
                                        <p class="fw-normal fs-12"> <span
                                                class="text-success">{{ dateFormat($plan->end_date, DISPLAY_DATE) ?? '' }}</span>
                                        </p>
                                    </div>

                                </div>
                            </div>


                        </div>
                        @endforeach
                        @endif


                        @if (isset($pendingPlan) && $pendingPlan)
                        @foreach($pendingPlan as $plan)

                            <div class="card overflow-hidden">

                                <div class="card-body border-top">
                                    <h4 class="card-title text-warning">{{__('common.pending')}} {{__('common.plans')}}</h4>
                                    <h5 class="fw-bold fs-18">{{ $plan->plan_name ?? __('common.pending_plan') }}</h5>

                                    <div class="d-flex mb-4 mt-3">
                                        <div class="avatar avatar-md bg-warning-transparent text-warning bradius me-3">
                                            <i class="fe fe-clock"></i>
                                        </div>
                                        <div class="">
                                            <h6 class="fw-bold fs-16">{{__('common.start')}} {{__('common.date')}}</h6>
                                            <p class="fw-normal fs-12">
                                                <span class="text-warning">Starts:
                                                    {{ dateFormat($plan->start_date, DISPLAY_DATE) ?? 'N/A' }}</span>
                                            </p>
                                        </div>
                                    </div>
                                    <div class="d-flex">
                                        <div class="avatar avatar-md bg-info-transparent text-info bradius me-3">
                                            <i class="fe fe-calendar"></i>
                                        </div>
                                        <div class="">
                                            <h6 class="fw-bold fs-16">{{__('common.end')}} {{__('common.date')}}</h6>
                                            <p class="fw-normal fs-12">
                                                <span
                                                    class="text-info">{{ dateFormat($plan->end_date, DISPLAY_DATE) ?? 'N/A' }}</span>
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            @endforeach
                        @endif
                    </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($monthName);
    @endphp

    <script>
        var myCanvas = document.getElementById("transactions-company");
        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-company').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