@extends('layout/ace')

@section('breadcrumbs')
    {{ Breadcrumbs::render('Dashboard') }}
@endsection

@section('title', 'Početna strana')

@section('content')
    <div class="px-2 border-1 brc-secondary-l1 radius-3px shadow-md bgc-grey-l5">
        <div class="row justify-content-center">
            @php
                $brojKorisnikaValue = $dashboardStats->activeCompaniesCount ."/". $dashboardStats->activeUsersCount;
            @endphp
            <x-index-dashboard-stats label="Broj korisnika" color1="secondary" color2="info" textSize="sm" value="{{ $brojKorisnikaValue }}">
                <x-slot name="icon">
                    <i class="fa fa-users text-white text-180 w-4"></i>
                </x-slot>
            </x-index-dashboard-stats>
            <x-index-dashboard-stats label="Vreme gledanja danas" value="{{ $dashboardStats->totalWatchedTimeToday }}" color1="secondary" color2="success" textSize="sm">
                <x-slot name="icon">
                    <i class="fa fa-clock text-white text-180 w-4"></i>
                </x-slot>
            </x-index-dashboard-stats>
            <x-index-dashboard-stats label="Vreme gledanja ovog meseca" value="{{ $dashboardStats->totalWatchedTimeThisMonth }}" color1="secondary" color2="purple" textSize="sm">
                <x-slot name="icon">
                    <i class="fa fa-clock text-white text-180 w-4"></i>
                </x-slot>
            </x-index-dashboard-stats>
            <x-index-dashboard-stats label="Ukupno vreme gledanja" value="{{ $dashboardStats->totalWatchedTime }}" color1="secondary" color2="primary" textSize="sm"  :last="true">
                <x-slot name="icon">
                    <i class="fa fa-clock text-white text-180 w-4"></i>
                </x-slot>
            </x-index-dashboard-stats>
        </div>
    </div>
    <div class="row px-2">
        <div class="col-12 col-sm-6 p-2 mb-md-0">
            <div class="pos-rel d-flex flex-column text-center bgc-white px-2 py-3 radius-1 shadow-sm h-100">
                <div class="text-dark-tp4 text-110 text-nowrap">Zarada ovog meseca sa pdv-om: <strong>{{ number_format($dashboardStats->thisMonthEarnings->without_pdv->total, 2, ',', '.') }} din. </strong></div>

                <div class="mt-2 w-75 text-center mx-auto">
                    <canvas id="thisMonthEarningsChart"></canvas>
                </div>
            </div>
        </div>
        <div class="col-12 col-sm-6 p-2 mb-md-0">
            <div class="pos-rel d-flex flex-column text-center bgc-white px-2 py-3 radius-1 shadow-sm h-100">
                <div class="text-dark-tp4 text-110 text-nowrap">
                    Ukupna zarada sa pdv-om: <strong>{{ number_format($dashboardStats->totalEarnings->without_pdv->total, 2, ',', '.') }} din.</strong>
                </div>


                <div class="mt-2 w-75 text-center mx-auto">
                    <canvas id="totalEarningsChart"></canvas>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('scripts')
    @parent
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script>
        const dataTotalEarnings = {
            labels: [
                'Krojačeva Skola',
                'Vendori',
            ],
            datasets: [{
                label: 'Ukupna zarada bez pdv-a',
                data: [{{ $dashboardStats->totalEarnings->without_pdv->other }}, {{ $dashboardStats->totalEarnings->without_pdv->vendors }}],
                // data: [0, 0],
                backgroundColor: [
                    'rgb(255, 99, 132)',
                    'rgb(54, 162, 235)',
                ],
                hoverOffset: 4
            }]
        };

        const configTotalEarnings = {
            type: 'doughnut',
            data: dataTotalEarnings,
            options: {}
        };

        const totalEarningsChart = new Chart(
            document.getElementById('totalEarningsChart'),
            configTotalEarnings
        );

        const dataThisMonthEarnings = {
            labels: [
                'Krojačeva Skola',
                'Vendori',
            ],
            datasets: [{
                label: 'Ukupna zarada bez pdv-a',
                data: [{{ $dashboardStats->thisMonthEarnings->without_pdv->other }}, {{ $dashboardStats->thisMonthEarnings->without_pdv->vendors }}],
                // data: [0, 0],
                backgroundColor: [
                    'rgb(255, 99, 132)',
                    'rgb(54, 162, 235)',
                ],
                hoverOffset: 4
            }]
        };

        const configThisMonthEarnings = {
            type: 'doughnut',
            data: dataThisMonthEarnings,
            options: {}
        };

        const thisMonthEarningsChart = new Chart(
            document.getElementById('thisMonthEarningsChart'),
            configThisMonthEarnings
        );

    </script>

    <script>
        // (() => {
        //     fetch(route('cms.fetch.dashboard_stats.get_users_count', {user_stats: 1}), {
        //         method: "GET",
        //         headers: {
        //             Accept: "application/json",
        //             "Content-Type": "application/json",
        //             "X-CSRF-TOKEN": document.head.querySelector("meta[name='csrf-token']").content,
        //         },
        //     })
        //     .then((response) => response.json())
        //     .then((result) => {
        //         console.log("🚀 ~ .then ~ result:", result)
        //         if(result.status) {
        //             if(document.querySelector("#index-dashboard-stats-broj-korisnika #value-box")) {
        //                 document.querySelector("#index-dashboard-stats-broj-korisnika #value-box").innerHTML = `${result.data.companies_with_active_licences}/${result.data.active_users_count}`
        //             }
        //         }
        //     });
        // })()
    </script>
@endsection