@php use Carbon\Carbon; @endphp
@extends(ucfirst(getScope()).'.Layout.master')
@section('content')
    {!! defineFilter('dashboard', '', 'header'); !!}
    <div class="content">
        <div class="row">
            <div class="col-sm-9">
                <div class="row">
                    <div class="col-sm-12">
                        <div class="dashboard">
                        </div>
                    </div>
                </div>
                <div class="row dashboardTile">
                    <div class="col-sm-3">
                        <!-- All Joinings -->
                        <div class="card card-joinings">
                            <div class="title">{{ _mt($moduleId, 'MultiDashboard.user_joining') }}</div>
                            <div class="subtitle">{{ _mt($moduleId, 'MultiDashboard.all_time') }}</div>
                            <div class="count">{{ $tiles['userJoining']['downlines'] }}</div>
                            <div class="chart">
                                <div class="bar"></div>
                                <div class="bar"></div>
                                <div class="bar"></div>
                                <div class="bar"></div>
                                <div class="bar"></div>
                                <div class="bar"></div>
                                <div class="bar"></div>
                            </div>
                            <span
                                style="color: #222;font-size: 9px; font-weight: 500;">{{ _mt($moduleId, 'MultiDashboard.including') }}</span>
                            <span
                                class="{{ $tiles['userJoining']['variation'] }}"> {{ $tiles['userJoining']['referrals'] }} </span>
                            <span
                                style="color: #222;font-size: 9px; font-weight: 500;">{{ _mt($moduleId, 'MultiDashboard.direct_referrals') }}</span>
                        </div>
                    </div>
                    <div class="col-sm-3">
                        <!-- Business Wallet -->
                        <div class="card card-sales">
                            <div class="title">{{ _mt($moduleId, 'MultiDashboard.business_wallet') }}</div>
                            <div class="subtitle">{{ _mt($moduleId, 'MultiDashboard.all_time') }}</div>
                            <div class="chart-container">
                                <svg width="100%" height="100" viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg"
                                     preserveAspectRatio="none">
                                    <defs>
                                        <linearGradient id="gradient" x1="0" y1="0" x2="0" y2="1">
                                            <stop offset="0%" stop-color="#4CAF50" stop-opacity="0.4"/>
                                            <stop offset="100%" stop-color="#4CAF50" stop-opacity="0"/>
                                        </linearGradient>
                                    </defs>

                                    <!-- Background Fill -->
                                    <path d="M0,70 C50,90 100,40 150,60 C180,75 200,50 200,50 V100 H0 Z"
                                          fill="url(#gradient)" stroke="none"/>

                                    <!-- Wave Stroke Line -->
                                    <path d="M0,70 C50,90 100,40 150,60 C180,75 200,50 200,50" stroke="#4CAF50"
                                          stroke-width="2.5" fill="none"/>
                                </svg>
                            </div>
                            <div class="count">{{ currency($tiles['businessWallet']['balance']) }}</div>
                            <div
                                class="{{ $tiles['businessWallet']['variation'] }}">{{ $tiles['businessWallet']['margin'] }}
                                <span
                                    style="color: #222;font-size: 9px; font-weight: 500;">{{ _mt($moduleId, 'MultiDashboard.generated_as_income_this_week') }}</span>
                            </div>

                        </div>
                    </div>

                    @php
                        $moduleServices = new \App\Blueprint\Services\ModuleServices();
                        $isActive = $moduleServices->isActive('General-Payout');
                    @endphp
                    @if($isActive)
                    <div class="col-sm-3">
                        <!-- Total Payout -->
                        <div class="card card-payout">
                            <div class="card-icon"><img src="{{ $imagePath }}/payout.png"></div>
                            <div class="card-title">{{ _mt($moduleId, 'MultiDashboard.payout') }}</div>
                            <p style="font-size: 12px; color: gray; margin: 5px 0px;">{{ _mt($moduleId, 'MultiDashboard.all_time') }}</p>
                            <div class="card-value">{{ currency($tiles['payout']['amount']) }}</div>
                            <div class="">
                                <span
                                    style="color: #222;font-size: 9px; font-weight: 500;"> {{ _mt($moduleId, 'MultiDashboard.payout_pending') }}</span>
                                <span
                                    class="percentage {{ $tiles['payout']['variation'] }}">{{ $tiles['payout']['pending'] }}</span>
                            </div>

                        </div>
                    </div>
                    @endif
                    <div class="col-sm-3">

                        <!-- Ewallet Balance -->
                        <div class="card card-ewallet">
                            <div class="card-icon"><img src="{{ $imagePath }}/wallet.png"></div>
                            <div class="card-title">{{ _mt($moduleId, 'MultiDashboard.ewallet') }}</div>
                            <p style="font-size: 12px; color: gray; margin: 5px 0px;">{{ _mt($moduleId, 'MultiDashboard.all_time') }}</p>
                            <div class="card-value">{{ currency($tiles['eWallet']['balance']) }}</div>
                            <div class="">
                                <span class="percentage {{ $tiles['eWallet']['variation'] }}">{{ $tiles['eWallet']['margin'] }}</span>
                                <span style="color: #222;font-size: 9px; font-weight: 500;"> {{ _mt($moduleId, 'MultiDashboard.income_generated_this_week') }}</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-6">
                        <div class="row world-map-card-outer" style="padding-left: 15px;">
                            <div class="world-map-card">
                                <h3>{{ _mt($moduleId, 'MultiDashboard.member_joining') }}</h3>
                                <p>Top most countries</p>

                                <!-- Map -->

                                <!-- Progress Bars -->
                                <div class="progress-container">
                                    @foreach($countryGraph as $country)
                                        <div class="progress-item">
                                            <span>{{ $country['country'] }}</span>
                                            <div class="progress-bar">
                                                <div class="progress-fill {{ $country['color'] }}"
                                                     style="width: {{ $country['width'] }}%;"></div>
                                            </div>
                                            <span>{{ $country['count'] }}</span>
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-6">
                        <div class="row">
                            <div class="col-sm-12">
                                <div class="row business-Widget">
                                    <div class="col-sm-6 leftBlock">
                                        <h3>{{ _mt($moduleId, 'MultiDashboard.commission_granted') }}</h3>
                                        <p>{{ _mt($moduleId, 'MultiDashboard.this_week') }}</p>
                                        <div
                                            class="balance-amount">{{ currency($commissionGranted['totalCommission']) }}</div>
                                        {{--                                        <div--}}
                                        {{--                                            class="percentage {{ $commissionGranted['variation'] }}">{{ $commissionGranted['margin'] }}</div>--}}
                                        {{--                                        <span--}}
                                        {{--                                            style="color: #222;font-size: 9px; font-weight: 500;">{{ _mt($moduleId, 'MultiDashboard.fluctuated_from_last_year') }}</span>--}}
                                    </div>

                                    <div class="col-sm-6 rightBlock">
                                        <div class="chart-container">
                                            @foreach($commissionGranted['dailyCommission']['commission'] as $key => $dailyCommission)
                                                <div class="chart-bar bar-{{$key + 1}}"
                                                     style="height: {{ $commissionGranted['dailyCommission']['value'][$dailyCommission] }}px"></div>
                                            @endforeach
                                        </div>
                                        <div class="chart-labels">
                                            @foreach($commissionGranted['dailyCommission']['days'] as $day)
                                                <span>{{ $day }}</span>
                                            @endforeach
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-3">
                <div class="row business-card-outer">
                    <div class="business-card">
                        <h3>{{ _mt($moduleId, 'MultiDashboard.business_wallet_overview') }}</h3>
                        <p>{{ _mt($moduleId, 'MultiDashboard.last_semester_stats') }}</p>
                        <div class="chart-container">
                            <canvas id="barChart"></canvas>
                        </div>
                        <div class="stats-container">
                            <div class="stats-box expenses">
                                <span>{{ _mt($moduleId, 'MultiDashboard.credit') }}</span>
                                <h4>{{ currency($businessWalletOverview['credit']) }}</h4>
                            </div>
                            <div class="stats-box sales">
                                <span>{{ _mt($moduleId, 'MultiDashboard.debit') }}</span>
                                <h4>{{ currency($businessWalletOverview['debit']) }}</h4>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-3 ipad-view">
                <div class="top-sponsor-card row">
                    <h2>{{ _mt($moduleId, 'MultiDashboard.top_sponsors') }}
                        <span>{{ _mt($moduleId, 'MultiDashboard.last_7_sponsors') }}</span></h2>
                    <div class="sponsor-list">
                        @foreach($topSponsors as $sponsor)
                            <div class="sponsor-item">
                                <div class="sponsor-profile">
                                    <img
                                        @if(isset($sponsor->metaData->profile_pic) && $sponsor->MetaData->profile_pic != null )
                                            src="{{ asset($sponsor->metaData->profile_pic) }}"
                                        @else
                                            src="{{ asset('photos/maleUser.jpg') }}"
                                        @endif
                                        class="sponsor-img"
                                        alt="Victor">
                                    <div class="sponsor-name">{{ strlen($sponsor->username) > 6 ? substr($sponsor->username, 0, 6) . '...' :$sponsor->username }}</div>
                                </div>

                                <div
                                    class="referrals">{{ $sponsor->downlines }} {{ _mt($moduleId, 'MultiDashboard.referrals') }}</div>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
            <div class="col-sm-6 ipad-view">
                <div class="row top-earners-card">
                    <!-- Right Side -->
                    <div class="right">
                        <div class="top-earners">
                            <h3>{{ strtoupper(_mt($moduleId, 'MultiDashboard.top_earners')) }}
                                <span
                                    style="color:#6b7280; font-size: 12px;">{{ _mt($moduleId, 'MultiDashboard.last_7_users') }}</span>
                            </h3>
                            @foreach($topEarners as $earner)
                                <div class="top-earner topEarnerTab" data-id="{{ $earner->id }}">
                                    <div class="user-info">
                                        <img
                                            @if(isset($earner->metaData->profile_pic) && $earner->MetaData->profile_pic != null )
                                                src="{{ asset($earner->metaData->profile_pic) }}"
                                            @else
                                                src="{{ asset('photos/maleUser.jpg') }}"
                                            @endif
                                            alt="victor">
                                        <div class="user-name">{{ strlen($earner->username) > 6 ? substr($earner->username, 0, 6) . '...' :$earner->username }}</div>
                                    </div>
                                    <div class="amount">{{ currencySymbol().($earner->earnings ? : 0) }}</div>
                                </div>
                            @endforeach
                        </div>
                    </div>
                    <!-- Left Side -->
                    <div class="top-earners-left left"></div>
                </div>
            </div>
            <div class="col-sm-3 ipad-view">
                <div class="recent-Joinings-accordion-container row">
                    <h3>{{ _mt($moduleId, 'MultiDashboard.recent_joining') }} <span
                            style="color:#6b7280; font-size: 12px;">{{ _mt($moduleId, 'MultiDashboard.last_4_users') }}</span>
                    </h3>
                    <div class="recent-Joinings-body">
                        @foreach($userJoining as $joining)
                            <div class="accordion-item @if($userJoining[0] == $joining) active @endif">
                                <div class="accordion-header">
                                    <div class="user-info">
                                        <img
                                            @if(isset($joining->metaData->profile_pic) && $joining->metaData->profile_pic != null )
                                                src="{{ asset($joining->metaData->profile_pic) }}"
                                            @else
                                                src="{{ asset('photos/maleUser.jpg') }}"
                                            @endif
                                            alt="User Image" class="user-image">
                                        <div class="user-text">
                                            <div class="user-name">{{ strlen($joining->username) > 6 ? substr($joining->username, 0, 6) . '...' :$joining->username }}</div>
                                            <div class="user-joined">{{ $joining->created_at->diffForHumans() }}</div>
                                        </div>
                                    </div>
                                    <div class="arrow"><i class="fa fa-arrow-down"></i></div>
                                </div>
                                <div class="accordion-content">
                                    <div class="info-row"><span class="info-label">{{ _mt($moduleId, 'MultiDashboard.member_id') }}:</span><span
                                            class="info-value">{{ $joining->member_id }}</span></div>
                                    <div class="info-row"><span class="info-label">{{ _mt($moduleId, 'MultiDashboard.username') }}:</span><span
                                            class="info-value">{{ strlen($joining->username) > 6 ? substr($joining->username, 0, 6) . '...' :$joining->username }}</span>
                                    </div>
                                    <div class="info-row"><span class="info-label">{{ _mt($moduleId, 'MultiDashboard.sponsor') }}:</span><span
                                            class="info-value">{{ strlen($joining->sponsor()->username) > 6 ? substr($joining->sponsor()->username, 0, 6) . '...' :$joining->sponsor()->username }}</span>
                                    </div>
                                    <div class="info-row"><span class="info-label">{{ _mt($moduleId, 'MultiDashboard.parent') }}:</span><span
                                            class="info-value">{{ strlen($joining->parent()->username) > 6 ? substr($joining->parent()->username, 0, 6) . '...' :$joining->parent()->username }}</span>
                                    </div>
                                    <div class="info-row"><span class="info-label">{{ _mt($moduleId, 'MultiDashboard.join_date') }}:</span><span
                                            class="info-value">{{ Carbon::parse($joining->created_at)->format('Y-m-d') }}</span>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script>
        // Hide the left menu
        $('body').addClass('page-sidebar-closed');
        $('.page-sidebar-menu').addClass('page-sidebar-menu-closed');

        $('.detailedGraphs .navHolder li').click(function () {
            $(this).addClass('active').siblings().removeClass('active');
            $('.graphPaneWrapper .unitHolder').attr('data-unit', $(this).data('unit'));

            return getUnit('.graphPaneWrapper .unitHolder', $(this).data('unit'));
        });

        function getUnit(element, unit, args, postData, partial) {
            unit = unit ? unit : jQuerize(element).data('unit');
            var options = $.extend({}, {unit: unit, args: args}, postData);
            simulateLoading(jQuerize(element));

            return $.post('{{ scopeRoute('multiDashboard.detailedGraphUnit') }}', options, function (response) {
                jQuerize(element).html(!partial ? response : $(response).find(partial).html());
            });
        }

        $('.commissionDetailedGraph').trigger('click');


        $('.topEarnerTab').click(function () {
            var userId = $(this).attr('data-id');

            return getTopEarnersGraph(userId);
        })

        function getTopEarnersGraph(userId) {
            $.post("{{ scopeRoute('multiDashboard.topEarnersGraph') }}", {userId: userId}, function (response) {
                $('.top-earners-left').html(response)
            })
        }

        getTopEarnersGraph({{$topEarners->first()?$topEarners->first()->id:''}})

        $(function () {
            var clipBoard = new ClipboardJS('.copyButton.replication', {
                target: function (trigger) {
                    return $(trigger).prev('input')[0];
                }
            });
            clipBoard.on('success', function (e) {
                $('.copyButton').html("<i class='fa fa-clone'></i>{{_mt($moduleId,'MultiDashboard.copied') }}");
                {{--                $(e.trigger).html("<i class='fa fa-clone'></i>{{_mt($moduleId,'MultiDashboard.copied') }}")--}}
            });
        });
    </script>


    <script>
        $(document).ready(function () {
            const ctx = document.getElementById("barChart").getContext("2d");
            const barChart = new Chart(ctx, {
                type: "bar",
                data: {
                    labels: JSON.parse('{!! json_encode($businessWalletOverview['barChart']['months']) !!}'),
                    datasets: [
                        {
                            label: "Credit",
                            data: {!! json_encode($businessWalletOverview['barChart']['credit']) !!},
                            backgroundColor: "#7c69e0",
                            borderRadius: 5
                        },
                        {
                            label: "Debit",
                            data: {!! json_encode($businessWalletOverview['barChart']['debit']) !!},
                            backgroundColor: "#e57a7a",
                            borderRadius: 5
                        }
                    ]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    scales: {
                        y: {
                            beginAtZero: true,
                            ticks: {
                                color: "#666"
                            }
                        },
                        x: {
                            ticks: {
                                color: "#999"
                            }
                        }
                    },
                    plugins: {
                        legend: {
                            display: false,
                            labels: {
                                color: "#333"
                            }
                        },
                        tooltip: {
                            mode: 'index',
                            intersect: false
                        }
                    }
                }
            });
        });
    </script>
    <style>
        .page-content {
            background: #f4f4f4 !important;
        }
        .copy-btn.copyButton {
            min-width: 120px;
            text-align: center;
            white-space: nowrap;
        }
    </style>
@endsection