@php use App\Blueprint\Services\ModuleServices;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>
                    <div class="col-sm-3">
                        <!-- Total Payout -->
                        <div class="card card-payout">
                            <div class="card-icon"><img src="{{ $imagePath }}/payout-icon.svg"></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>
                    <div class="col-sm-3">

                        <!-- Ewallet Balance -->
                        <div class="card card-ewallet">
                            <div class="card-icon"><img src="{{ $imagePath }}/wallet-icon.svg"></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 style="visibility: hidden;">Top most countries</p>

                                <!-- Map -->
                                <div class="map-container" id="world-map"></div>

                                <!-- 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"
                                                     style="width: {{ $country['width'] }}%;background-color: #03A9F4"></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.all_time') }}</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 class="row">
                            <div class="col-sm-12">
                                <div class="referral-card">
                                    <img
                                        @if(isset(loggedUser()->metaData->profile_pic) && loggedUser()->MetaData->profile_pic != null )
                                            src="{{ asset(loggedUser()->metaData->profile_pic) }}"
                                        @else
                                            src="{{ asset('photos/maleUser.jpg') }}"
                                        @endif
                                        alt="Profile" class="profile-img">
                                    <h3>{{ loggedUser()->member_id }}</h3>
                                    <p>{{ _mt($moduleId, 'MultiDashboard.your_referral_link') }}</p>
                                    <div class="referral-box">
                                        <input type="text" id="referral-link" value="{{ $referralLink }}"
                                               readonly>
                                        <button
                                            class="copy-btn copyButton replication">{{ _mt($moduleId, 'MultiDashboard.copy') }}</button>
                                    </div>
                                    <div class="social-links">
                                        <a target="_blank"
                                           href="{{ $referralLink}}">{{--<i class="icon-share-alt"></i>--}}
                                            {{--<img src="https://cdn-icons-png.flaticon.com/128/929/929468.png" class="share-icon"/>--}}
                                            <img src="{{ $imagePath }}/share-icon.png" class="share-icon"/>
                                        </a>
                                        <a href="https://www.instagram.com/?url=https://www.drdrop.co/?u={{ $referralLink }}">
                                            {{--<i class="fa fa-instagram"></i>--}}
                                            <img src="{{ $imagePath }}/instagram.png" class="share-icon"/>
                                        </a>
                                        <a href="https://www.facebook.com/sharer/sharer.php?u={{ $referralLink }}">
                                            {{--<i class="fa fa-facebook"></i>--}}
                                            <img src="{{ $imagePath }}/facebook.png" class="share-icon"/>
                                        </a>
                                        <a href="https://twitter.com/share?url={{ $referralLink }}">
                                            {{--<i class="fa fa-twitter"></i>--}}
                                            <img src="{{ $imagePath }}/twitter.png" class="share-icon"/>
                                        </a>
                                        <a href="https://www.linkedin.com/shareArticle?mini=true&amp;url={{ $referralLink }}">
                                            {{-- <i class="fa fa-linkedin"></i>--}}
                                            <img src="{{ $imagePath }}/linkedin.png" class="share-icon"/>
                                        </a>
                                        <a href="https://api.whatsapp.com/send?text={{ urlencode($referralLink) }}"
                                           target="_blank">
                                            {{--                                             <i class="fa fa-whatsapp"></i>--}}
                                            <img src="{{ $imagePath }}/whatsapp.png" class="share-icon"/>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-3">
                <div class="row business-card-outer">
                    <div class="business-card" style="height: 397px;!important;">
                        <h3>{{ _mt($moduleId, 'MultiDashboard.business_wallet_overview') }}</h3>
                        {{--                        <p>{{ _mt($moduleId, 'MultiDashboard.last_semester_stats') }}</p>--}}
                        <div class="chart-container" style="height: 235px;!important;">
                            <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 class="row recent-card-outer">
                    <div class="recent-card">
                        <h3>{{ _mt($moduleId, 'MultiDashboard.recent_activities')}}</h3>
                        @if($recentActivities->count())
                            <ul class="timeline">
                                @foreach($recentActivities as $activity)
                                    <li class="timeline-item">
                                        <span class="timeline-time">{{ $activity->created_at->format('H:i A') }}</span>
                                        <span class="timeline-dot {{ $activity->activity->color ? : 'purple' }}"></span>
                                        <div class="timeline-content">
                                            <strong>{{ str_replace('%user%',loggedUser()->username
                                          , $activity->activity->description[currentLocal()]) }}</strong>
                                            <br>
                                            {{ $activity->created_at->format('D Y') }}
                                            ({{ $activity->created_at->diffForHumans() }})
                                        </div>
                                    </li>
                                @endforeach
                            </ul>
                        @else
                            <div class="noData-bx">
                                <img class="nodataFound-img" src="{{ $imagePath }}/no-data.png">
                                <h4>{{ _mt($moduleId,'MultiDashboard.no_data') }}</h4>
                            </div>
                        @endif
                    </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">
                        @if($topSponsors->count())
                            @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">{{ $sponsor->member_id }}</div>
                                    </div>

                                    <div
                                        class="referrals">{{ $sponsor->downlines }} {{ _mt($moduleId, 'MultiDashboard.referrals') }}</div>
                                </div>
                            @endforeach
                        @else
                            <div class="noData-bx">
                                <img class="nodataFound-img" src="{{ $imagePath }}/no-data.png">
                                <h4>{{ _mt($moduleId,'MultiDashboard.no_data') }}</h4>
                            </div>
                        @endif
                    </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 style="text-transform: capitalize;">{{ strtoupper(_mt($moduleId, 'MultiDashboard.top_earners')) }}
                                <span
                                    style="color:#9aa0aa; font-size: 12px; font-weight: normal">{{ _mt($moduleId, 'MultiDashboard.last_7_users') }}</span>
                            </h3>
                            @if($topEarners->count())
                                @foreach($topEarners as $index => $earner)
                                    <div class="top-earner topEarnerTab {{ $index == 0 ? 'selected' : '' }}"
                                         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">{{ $earner->member_id }}</div>
                                        </div>
                                        <div class="amount">{{ prettyCurrency($earner->earnings ?: 0) }}</div>
                                    </div>
                                @endforeach
                            @else
                                <div class="noData-bx">
                                    <img class="nodataFound-img" src="{{ $imagePath }}/no-data.png">
                                    <h4>{{ _mt($moduleId,'MultiDashboard.no_data') }}</h4>
                                </div>
                            @endif
                        </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:#9aa0aa; font-size: 12px; font-weight: normal;">{{ _mt($moduleId, 'MultiDashboard.last_4_users') }}</span>
                    </h3>
                    <div class="recent-Joinings-body">
                        @if($userJoining->count())
                            @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">{{ $joining->member_id }}</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">{{ $joining->sponsor()->member_id }}</span>
                                        </div>
                                        <div class="info-row"><span class="info-label">{{ _mt($moduleId, 'MultiDashboard.parent') }}:</span><span
                                                class="info-value">{{ $joining->parent()->member_id }}</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
                        @else
                            <div class="noData-bx">
                                <img class="nodataFound-img" src="{{ $imagePath }}/no-data.png">
                                <h4>{{ _mt($moduleId,'MultiDashboard.no_data') }}</h4>
                            </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>
        <div class="row detailedGraphs new-info-detailGraph">
            <div class="col-md-3 col-sm-3 co-xs-12 navWrapper">
                <ul class="navHolder">
                    <li class="graphNav commissionDetailedGraph" data-unit="commissionDetailedGraph">
                        <img src="{{ $imagePath }}/commission-info-tab.png">
                        <p>{{ _mt($moduleId, 'MultiDashboard.commission_info') }}</p>
                    </li>
                    <li class="graphNav" data-unit="userDetailedGraph">
                        <img src="{{ $imagePath }}/network-info-tab.png">
                        <p>{{ _mt($moduleId, 'MultiDashboard.user_joining_info') }}</p>
                    </li>
                    {{--                    <li class="graphNav" data-unit="mailDetailedGraph">--}}
                    {{--                        <img src="{{ $imagePath }}/mail_info.png">--}}
                    {{--                        <p>{{ _mt($moduleId, 'MultiDashboard.email') }}</p>--}}
                    {{--                    </li>--}}
                    {{--                    <li class="graphNav" data-unit="mailDetailedGraph">--}}
                    {{--                        <img src="https://cdn-icons-png.flaticon.com/128/921/921591.png"/>--}}
                    {{--                        <p>{{ _mt($moduleId, 'MultiDashboard.email') }}</p>--}}
                    {{--                    </li>--}}
                </ul>
            </div>
            <div class="graphPaneWrapper col-md-9 col-sm-9 co-xs-12">
                <div class="innerHolder unitHolder" data-unit="commissionDetailedGraph"></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: "#4de366",
                            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
                        }
                    }
                }
            });

            var countryColors = {};
            @foreach($countryGraph as  $countryData)
                countryColors["{{ $countryData['country'] }}"] = "#03A9F4";
            @endforeach

            // Init vector map with custom colors
            $('#world-map').vectorMap({
                map: 'world_en',
                backgroundColor: '#ffffff',
                color: '#e0e0e0',           // Default color for all other countries
                hoverOpacity: 0.7,
                selectedColor: '#03A9F4',
                enableZoom: false,
                showTooltip: true,
                selectedRegions: Object.keys(countryColors),
            });
        });

    </script>

    <script>
        $(document).ready(function () {
            $('.top-earner').on('click', function () {
                $('.top-earner').removeClass('selected');
                $(this).addClass('selected');
            });
        });
    </script>

    <style>
        .page-content {
            background: #f4f4f4 !important;
        }

        .copy-btn.copyButton {
            min-width: 120px;
            text-align: center;
            white-space: nowrap;
        }

    </style>
@endsection