@extends('layouts.app')

@section('title', 'Leaderboard')

@section('content')
<div class="right-content-wrapper">
	<div class="container-fluid p-0">
        <!-- Page Heading -->
        <div class="d-sm-flex align-items-center justify-content-between mb-4">
            <h1 class="main-heading h3 mb-0 text-gray-800">Live Leaderboard</h1>
        </div>

        {{-- Alert Messages --}}
        @include('common.alert')

    @if(count($leaderboardUsersLists)>0)
        <div class="row mb-2">
            <div class="col-md-10 text-right">
                <!--<button type="button" class="btn btn-primary-blue" data-toggle="collapse" id="showReportFilter"><i class="fas fa-filter"></i> Filter</button>
                <a href="{{ route('leaderboard.index') }}" class="btn btn-primary">Clear</a>-->
            </div> 
            @if(auth()->user()->role_id==1)
            <div class="col-md-2 text-right">
                <a href="{{ route('leaderboard.export-leaderboard-data') . '?leaderboard=live' }}" class="btn btn-sm pl-1 pr-1 pb-2 pt-2 btn-success" style="border-radius:.35rem;">
                    <i class="fas fa-check"></i> Export To Excel
                </a>
            </div>
			@endif
        </div>

        {{--<div class="row mb-2">
            <div class="collapse hide" id="reportFilter">
                <div class="card card-body">
                    <div id="error-message" class="d-none">Please fill in at least one field.</div>
                    <form name="reportFilterForm" id="reportFilterForm" action="{{ route('leaderboard.index') }}" method="get" class="">
                        <input type="hidden" name="filter_data" value="1" />
                        <div class="row mb-2">
                            <div class="col">
                                <label for="">Segment</label>
                                <select name="segment" class="form-control">
                                    <option value="">Select Segment</option>
                                    @if(!empty($segmentCategories))
                                        @foreach($segmentCategories as $segment)
                                            <option value="{{ $segment->id}}" {{ ($filter['segment'] == $segment->id) ? 'selected' : '' }}>{{ $segment->segment_category_name}}</option>
                                        @endforeach
                                    @endif
                                </select>                          
                            </div>
                            <div class="col">
                                <label for="">Region</label>
                                <select name="region" class="form-control">
                                    <option value="">Select Region</option>
                                    @if(!empty($regions))
                                        @foreach($regions as $region)
                                            <option value="{{ $region->id}}" {{ ($filter['region'] == $region->id) ? 'selected' : '' }}>{{ $region->region_name}}</option>
                                        @endforeach
                                    @endif
                                </select>            
                            </div>
                            <div class="col">
                                <label for="">Start Date</label>
                                <input type="text" name="start_date" value="{{$filter['start_date']}}" class="form-control form-field-datepicker-no-future-start-date" placeholder="Start Date">
                            </div>
                            <div class="col">
                                <label for="">End Date</label>
                                <input type="text" name="end_date" value="{{$filter['end_date']}}" class="form-control form-field-datepicker-no-future-end-date" placeholder="End Date">
                            </div>
                            <div class="col">
                            <label for="">&nbsp;</label>
                                <button type="submit" name="filter" class="form-control btn btn-primary" id="applyFilter">Apply</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>--}}
         
        <!-- Cards for Top Performers -->
        @php
            $topUsers = $leaderboardUsersLists->take(3);
        @endphp
		
        <div class="row mb-4">  
			@if(isset($topUsers[1]))
			<div class="col-md-4" style="padding-top: 39px;">
				<div class="card card-widget widget-user shadow position-relative">
					<div class="widget-user-header rank-header second">
						<h3 class="widget-user-report-count">{{$topUsers[1]->report_count ?? ''}} Reports</h3>
						<h6 class="widget-user-segment">{{Helper::reportMultiSegmentCategoryNames(explode(",",$topUsers[1]->report_segment_category_ids))}}</h6>
					</div>
					<div class="widget-user-image">
						<img class="img-circle elevation-2 my-3" src="{{ $topUsers[1]->profile_image ?? asset('images/profile-image-default.png') }}" alt="User Avatar">
						<p class="rank-badge">2</p>
					</div>
					<div class="card-footer text-centre">
						<div class="p-3">
							<h5 class="mb-0 widget-user-username">{{$topUsers[1]->name ?? ''}}</h5>
							<h6 class="text-muted widget-user-designation">{{$topUsers[1]->designation ?? ''}}</h6>
						</div>
					</div>
				</div>
			</div>
			@endif
				
			@if(isset($topUsers[0]))
			<div class="col-md-4">
				<div class="card card-widget widget-user shadow position-relative">
					<div class="widget-user-header rank-header first" style="height: 175px;">
						<h3 class="widget-user-report-count">{{$topUsers[0]->report_count ?? ''}} Reports</h3>
						<h6 class="widget-user-segment">{{Helper::reportMultiSegmentCategoryNames(explode(",",$topUsers[0]->report_segment_category_ids))}}</h6>
					</div>
					<div class="widget-user-image" style="top: 120px;">
						<img class="img-circle elevation-2 my-3" src="{{ $topUsers[0]->profile_image ?? asset('images/profile-image-default.png') }}" alt="User Avatar">
						<p class="rank-badge" style="padding: 2px 12px;">1</p>
					</div>
					<div class="card-footer text-centre">
						<div class="p-3">
							<h5 class="mb-0 widget-user-username">{{$topUsers[0]->name ?? ''}}</h5>
							<h6 class="text-muted widget-user-designation">{{$topUsers[0]->designation ?? ''}}</h6>
						</div>
					</div>
				</div>
			</div>
			@endif
				
			@if(isset($topUsers[2]))
			<div class="col-md-4" style="padding-top: 39px;">
				<div class="card card-widget widget-user shadow position-relative">
					<div class="widget-user-header rank-header third">
						<h3 class="widget-user-report-count">{{$topUsers[2]->report_count ?? ''}} Reports</h3>
						<h6 class="widget-user-segment">{{Helper::reportMultiSegmentCategoryNames(explode(",",$topUsers[2]->report_segment_category_ids))}}</h6>
					</div>
					<div class="widget-user-image">
						<img class="img-circle elevation-2 my-3" src="{{ $topUsers[2]->profile_image ?? asset('images/profile-image-default.png') }}" alt="Profile Image">
						<p class="rank-badge">3</p>
					</div>
					<div class="card-footer text-centre">
						<div class="p-3">
							<h5 class="mb-0 widget-user-username">{{$topUsers[2]->name ?? ''}}</h5>
							<h6 class="text-muted widget-user-designation">{{$topUsers[2]->designation ?? ''}}</h6>
						</div>
					</div>
				</div>
			</div>
			@endif      
		</div>

        <!-- Performance Table -->
        @if(count($leaderboardUsersLists)>3)
        <div class="table-responsive">
            <table class="table table-bordered text-center" id="users-table">
                <thead class="table-light btn-primary">
                <tr>
                    <th style="display: none;">No</th>
                    <th>Rank</th>
                    <th>Username</th>
                    <th>Manager</th>
                    <th>Segment</th>
                    <th>Region</th>
                    <th>Reports</th>
                </tr>
                </thead>
                <tbody>
                @foreach($leaderboardUsersLists->slice(3) as $key=>$leaderboardUser) 
                <tr>
                    <td style="display: none;">{{$key}}</td>
                    <td>{{$key+1}}th</td>
                    <td>{{$leaderboardUser->name ?? ''}}</td>
                    <td>{{$leaderboardUser->designation ?? ''}}</td>
                    <td>{{Helper::reportMultiSegmentCategoryNames(explode(",",$leaderboardUser->report_segment_category_ids))}}</td>
                    <td>{{$leaderboardUser->region_name ?? ''}}</td>
                    <td>{{$leaderboardUser->report_count}}</td>  
                </tr>
                @endforeach
                </tbody>
            </table>
        </div>
        <!-- Performance Table -->
        @endif
    @endif
    </div>
</div>
@endsection

<style>

</style>

@push('script')
<link href="{{asset('admin_assets/css/jquery.dataTables.min.css')}}" rel="stylesheet">
<script src="{{ asset('admin_assets/js/jquery.dataTables.min.js') }}"></script>
<script>
    $(document).ready(function() {       
        //Filter Report
        /*$('#showReportFilter').on('click', function() {
            $('#reportFilter').collapse('toggle');
        });*/

        const table = $('#users-table').DataTable();

        /*const table = $('#users-table').DataTable({
            paging: true,
            processing: true,
            order: [[0, 'asc']], // Order by Name column
        });*/
    });
</script>
@endpush