@extends('user_dashboard.layouts.app')
@section('content')
    @push('css')
        <style>
            .rbt-table tr th,
            .rbt-table tr td {
                padding: 10px 2px;
            }

            .rbt-table tbody tr th,
            .rbt-table tbody tr td {
                font-size: 13px;
            }

            .pt-0 .rbt-shadow-box {
                padding: 10px;
            }

            .rbt-shadow-box h4 {
                font-size: 14px;
            }

            @media only screen and (max-width: 767px) {
                .rbt-dashboard-table .rbt-table {
                    min-width: auto;
                }

                .pt-0 {
                    padding: 0;
                }

                .rbt-title-style-3 {
                    font-size: 14px;
                }

            }

            .rbt-table tbody tr th,
            .rbt-table tbody tr td {
                font-weight: 600;
                vertical-align: middle;
            }
        </style>
    @endpush

    <div class="rbt-dashboard-area mt--30 mb--50">
        <div class="container-fluid">
            <div class="row g-5">
                <div class="col-lg-3">
                    @include('user_dashboard.layouts.sidebar')
                </div>
                <div class="col-lg-9">
                    <div class="rbt-dashboard-content bg-color-white">
                        <div class="content">
                            <div class="row">
                                <div class="col-md-12">
                                    <div class="section-title">
                                        <h3 class="rbt-title-style-style">Leaderboard</h3>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="rbt-dashboard-content rbt-shadow-box mb--10">
                                        <div class="content">
                                            <div class="row gy-5">
                                                <div class="col-md-12">
                                                    <div class="section-title">
                                                        <h3 class="rbt-title-style-style">Today</h3>
                                                    </div>
                                                </div>
                                                <div class="col-lg-12">
                                                    @foreach ($today_leaderboards as $today_leaderboards_key => $today_leaderboard)
                                                            <div class="service-card service-card-5 mb-3">
                                                                <div class="inner">
                                                                    <div class="icon">
                                                                        <h6 class="mb-0 me-2">#{{ $today_leaderboards_key + 1 }}
                                                                        </h6>
                                                                        <img src="{{ asset('frontend/images/avatar/' . $today_leaderboard->user->avatar) }}"
                                                                            class="avatar-sm img-thumbnail rounded-circle"
                                                                            onerror="this.onerror=null;this.src='{{ asset('backend/img/default.png') }}';">
                                                                    </div>
                                                                    <div class="content">
                                                                        <h6 class="mb-0">{{ $today_leaderboard->user->name }}
                                                                        </h6>
                                                                    </div>
                                                                    <div>
                                                                        <h6 class="mb-0 text-success">
                                                                            ₹{{ $today_leaderboard->total_commission }}
                                                                        </h6>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                    @endforeach
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="rbt-dashboard-content rbt-shadow-box mb--10">
                                        <div class="content">
                                            <div class="row gy-5">
                                                <div class="col-md-12">
                                                    <div class="section-title">
                                                        <h3 class="rbt-title-style-style">This Week</h3>
                                                    </div>
                                                </div>
                                                <div class="col-lg-12">
                                                    @foreach ($last_week_leaderboards as $last_week_leaderboards_key => $last_week_leaderboard)
                                                            <div class="service-card service-card-5 mb-3">
                                                                <div class="inner">
                                                                    <div class="icon">
                                                                        <h6 class="mb-0 me-2">
                                                                            #{{ $last_week_leaderboards_key + 1 }}</h6>
                                                                        <img src="{{ asset('frontend/images/avatar/' . $last_week_leaderboard->user->avatar) }}"
                                                                            class="avatar-sm img-thumbnail rounded-circle"
                                                                            onerror="this.onerror=null;this.src='{{ asset('backend/img/default.png') }}';">
                                                                    </div>
                                                                    <div class="content">
                                                                        <h6 class="mb-0">
                                                                            {{ $last_week_leaderboard->user->name }}</h6>
                                                                    </div>
                                                                    <div>
                                                                        <h6 class="mb-0 text-success">
                                                                            ₹{{ $last_week_leaderboard->total_commission }}</h6>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                    @endforeach
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="rbt-dashboard-content rbt-shadow-box mb--10">
                                        <div class="content">
                                            <div class="row gy-5">
                                                <div class="col-md-12">
                                                    <div class="section-title">
                                                        <h3 class="rbt-title-style-style">This Month</h3>
                                                    </div>
                                                </div>
                                                <div class="col-lg-12">
                                                    @foreach ($last_month_leaderboards as $last_month_leaderboards_key => $last_month_leaderboard)
                                                            <div class="service-card service-card-5 mb-3">
                                                                <div class="inner">
                                                                    <div class="icon">
                                                                        <h6 class="mb-0 me-2">
                                                                            #{{ $last_month_leaderboards_key + 1 }}</h6>
                                                                        <img src="{{ asset('frontend/images/avatar/' . $last_month_leaderboard->user->avatar) }}"
                                                                            class="avatar-sm img-thumbnail rounded-circle"
                                                                            onerror="this.onerror=null;this.src='{{ asset('backend/img/default.png') }}';">
                                                                    </div>
                                                                    <div class="content">
                                                                        <h6 class="mb-0">
                                                                            {{ $last_month_leaderboard->user->name }}</h6>
                                                                    </div>
                                                                    <div>
                                                                        <h6 class="mb-0 text-success">
                                                                            ₹{{ $last_month_leaderboard->total_commission }}
                                                                        </h6>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                    @endforeach
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="rbt-dashboard-content rbt-shadow-box mb--10">
                                        <div class="content">
                                            <div class="row gy-5">
                                                <div class="col-md-12">
                                                    <div class="section-title">
                                                        <h3 class="rbt-title-style-style">All Time</h3>
                                                    </div>
                                                </div>
                                                <div class="col-lg-12">
                                                    @foreach ($all_time_leaderboards as $all_time_leaderboards_key => $all_time_leaderboard)
                                                            <div class="service-card service-card-5 mb-3">
                                                                <div class="inner">
                                                                    <div class="icon">
                                                                        <h6 class="mb-0 me-2">
                                                                            #{{ $all_time_leaderboards_key + 1 }}</h6>
                                                                        <img src="{{ asset('frontend/images/avatar/' . $all_time_leaderboard->user->avatar) }}"
                                                                            class="avatar-sm img-thumbnail rounded-circle"
                                                                            onerror="this.onerror=null;this.src='{{ asset('backend/img/default.png') }}';">
                                                                    </div>
                                                                    <div class="content">
                                                                        <h6 class="mb-0">
                                                                            {{ $all_time_leaderboard->user->name }}</h6>
                                                                    </div>
                                                                    <div>
                                                                        <h6 class="mb-0 text-success">
                                                                            ₹{{ $all_time_leaderboard->total_commission }}
                                                                        </h6>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                    @endforeach
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection