@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 dashboardTile">
                    <div class="col-sm-3">
                        <div class="congrat-card card">
                            <div class="card-left">
                                <h2>{{ _mt($moduleId, 'MultiDashboard.welcome_back') }}
                                    <strong>{{ strlen($user->metaData->firstname) > 6 ? substr($user->metaData->firstname, 0, 6) . '...' : $user->metaData->firstname }}</strong> 🎉</h2>
                                <div class="amount">
                                    <label>{{ _mt($moduleId, 'MultiDashboard.your_membership') }}</label>{{ $user->member_id }}
                                </div>
                                <div class="target">{{ _mt($moduleId, 'MultiDashboard.package') }} <span
                                        class="package">{{ $user->repoData->package ? $user->repoData->package->name : '' }}</span>
                                </div>
                                <div class="target">{{ _mt($moduleId, 'MultiDashboard.rank') }} <span class="package"
                                                                                                      style="background: #93d3a9;">{{ $rank ? $rank->rank->name : ''  }}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-3">
                        <!-- All Joinings -->
                        <div class="card card-joinings">
                            <div class="title">{{ _mt($moduleId, 'MultiDashboard.downlines') }}</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">

                        <!-- 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 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>
                </div>
                <div class="row">
                    <div class="col-sm-6">
                        <div class="row recent-tab-card-outer" style="padding-left: 15px;">
                            <div class="recent-tab-card">
                                <div class="card-header">
                                    <h3>Recent Block</h3>
                                    <div class="tabs">
                                        <span class="tab active" data-tab="joinings">Joinings</span>
                                        <span class="tab" data-tab="activities">Activities</span>
                                    </div>
                                </div>
                                <div class="tab-content">
                                    <div id="joinings" class="tab-pane active">
                                        <!-- Replace with actual joining content -->
                                        <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">{{ 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.package') }}:</span><span
                                                                    class="info-value">{{ $joining->repoData->package ? $joining->repoData->package->name : '' }}</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
                                            @else
                                                <h4 style="display: grid;justify-content: center;margin-top: 200px;"> {{ _mt($moduleId, 'MultiDashboard.no_data') }}</h4>
                                            @endif
                                        </div>
                                    </div>
                                    <div id="activities" class="tab-pane">
                                        <div class="recent-activity-body">
                                            <ul class="timeline">
                                                @if($recentActivities->count())
                                                    @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%', strlen($activity->user->username) > 6 ? substr($activity->user->username, 0, 6) . '...' : $activity->user->username, $activity->activity->description[currentLocal()]) }}</strong>
                                                                <br>
                                                                {{ $activity->created_at->format('D Y') }}
                                                                ({{ $activity->created_at->diffForHumans() }})
                                                            </div>
                                                        </li>
                                                    @endforeach
                                                @else
                                                    <h4 style="display: grid;justify-content: center;margin-top: 200px;"> {{ _mt($moduleId, 'MultiDashboard.no_data') }}</h4>
                                                @endif
                                            </ul>
                                        </div>
                                    </div>
                                </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 {{ $commissionGrantead['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-commission">
                                            @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>{{ strlen(loggedUser()->username) > 6 ? substr(loggedUser()->username, 0, 6) . '...' : loggedUser()->username }}</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></a>
                                        <a href="https://www.facebook.com/sharer/sharer.php?u={{ $referralLink }}"><i
                                                class="fa fa-facebook"></i></a>
                                        <a href="https://www.instagram.com/?url=https://www.drdrop.co/?u={{ $referralLink }}"><i
                                                class="fa fa-instagram"></i></a>
                                        <a href="https://www.linkedin.com/shareArticle?mini=true&amp;url={{ $referralLink }}"><i
                                                class="fa fa-linkedin"></i></a>
                                        <a href="https://twitter.com/share?url={{ $referralLink }}"><i
                                                class="fa fa-twitter"></i></a>
                                    </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.ewallet_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($eWalletOverview['credit']) }}</h4>
                            </div>
                            <div class="stats-box sales">
                                <span>{{ _mt($moduleId, 'MultiDashboard.debit') }}</span>
                                <h4>{{ currency($eWalletOverview['debit']) }}</h4>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row top-performer-tab-card-outer">
                    <div class="top-performer-tab-card">
                        <div class="card-header">
                            <h3>{{ _mt($moduleId, 'MultiDashboard.top_performers') }}</h3>
                            <div class="tabs">
                                <span class="tab active"
                                      data-tab="sponsors">{{ _mt($moduleId, 'MultiDashboard.sponsors') }} </span>
                                <span class="tab"
                                      data-tab="earners">{{ _mt($moduleId, 'MultiDashboard.earners') }}</span>
                            </div>
                        </div>
                        <div class="tab-content">
                            <div id="sponsors" class="tab-pane active">
                                <div class="sponsorTab-body">
                                    <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">{{ 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
                                        @else
                                            <h4 style="display: grid;justify-content: center;margin-top: 100px;"> {{ _mt($moduleId, 'MultiDashboard.no_data') }}</h4>
                                        @endif
                                    </div>
                                </div>
                            </div>
                            <div id="earners" class="tab-pane">
                                <div class="earnersTab-body">
                                    <div class="earners-list">
                                        @if($topEarners->count())
                                            @foreach($topEarners as $earner)
                                                <div class="earners-item">
                                                    <div class="earners-profile">
                                                        <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
                                                            class="earners-img" alt="Victor">
                                                        <div class="earners-name">{{ strlen($earner->username) > 6 ? substr($earner->username, 0, 6) . '...' : $earner->username }}</div>
                                                    </div>
                                                    <div
                                                        class="amount">{{ $earner->earnings ? currency($earner->earnings) : currency(0) }}</div>
                                                </div>
                                            @endforeach
                                        @else
                                            <h4 style="display: grid;justify-content: center;margin-top: 100px;"> {{ _mt($moduleId, 'MultiDashboard.no_data') }}</h4>
                                        @endif
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>

            </div>
        </div>

        <div class="row detailedGraphs new-info-detailGraph" style="margin-top: 10px;">
            <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.png">
                        <p>{{ _mt($moduleId, 'MultiDashboard.commission_info') }}</p>
                    </li>
                    <li class="graphNav" data-unit="userDetailedGraph">
                        <img src="{{ $imagePath }}/user_info.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)
            })
        }

        $(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.copy') }}");
                $(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($eWalletOverview['barChart']['months']) !!}'),
                    datasets: [
                        {
                            label: "Credit",
                            data: {!! json_encode($eWalletOverview['barChart']['credit']) !!},
                            backgroundColor: "#7c69e0",
                            borderRadius: 5
                        },
                        {
                            label: "Debit",
                            data: {!! json_encode($eWalletOverview['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;
        }
    </style>

    <script>
        const tabs = document.querySelectorAll('.recent-tab-card .tab');
        const panes = document.querySelectorAll('.recent-tab-card .tab-pane');

        tabs.forEach(tab => {
            tab.addEventListener('click', () => {
                const target = tab.getAttribute('data-tab');

                // Remove active classes
                tabs.forEach(t => t.classList.remove('active'));
                panes.forEach(p => p.classList.remove('active'));

                // Activate selected tab and pane
                tab.classList.add('active');
                document.getElementById(target).classList.add('active');
            });
        });
    </script>
    <script>
        const accordionItems = document.querySelectorAll('.recent-tab-card .accordion-item');

        accordionItems.forEach(item => {
            const header = item.querySelector('.recent-tab-card .accordion-header');
            header.addEventListener('click', () => {
                accordionItems.forEach(i => i.classList.remove('active'));
                item.classList.add('active');
            });
        });
    </script>
    <script>
        const topTabs = document.querySelectorAll('.top-performer-tab-card .tab');
        const topPanes = document.querySelectorAll('.top-performer-tab-card .tab-pane');

        topTabs.forEach(tab => {
            tab.addEventListener('click', () => {
                const target = tab.getAttribute('data-tab');

                // Remove active classes
                topTabs.forEach(t => t.classList.remove('active'));
                topPanes.forEach(p => p.classList.remove('active'));

                // Activate selected tab and pane
                tab.classList.add('active');
                document.getElementById(target).classList.add('active');
            });
        });
    </script>

    <style>

        .copy-btn.copyButton {
            min-width: 120px;
            text-align: center;
            white-space: nowrap;
        }
    </style>
@endsection