@extends('layouts.vertical', ["page_title"=> $title ?: "Leaderboard", "mode" => $mode ?? "", "demo" => $demo ?? ""])

@section('css')
<style>
.mlb-pills {
    display: flex;
    justify-content: flex-start;
    gap: 10px;
    margin: 0 0 16px;
    flex-wrap: wrap;
}
.mlb-pill {
    border: 1px solid #ebe4f5;
    background: #fff;
    color: #6f6f6f;
    border-radius: 999px;
    padding: 6px 16px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    display: inline-block;
}
.mlb-pill:hover {
    background: #eadff8;
    border-color: #eadff8;
    color: #2b2b2b;
}
.mlb-pill.is-active {
    background: #eadff8;
    border-color: #eadff8;
    color: #2b2b2b;
    pointer-events: none;
}
.mlb-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    flex-wrap: wrap;
    margin: 0 0 16px;
}
.mlb-toolbar .mlb-pills {
    margin: 0;
    flex: 1;
}
.mlb-period {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 220px;
}
.mlb-period label {
    margin: 0;
    white-space: nowrap;
    color: #6f6f6f;
    font-size: 13px;
    font-weight: 600;
}
.mlb-period select {
    min-width: 180px;
}
</style>
@endsection

@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="col-6">
            <div class="page-title-box">
                <h4 class="page-title">{{ $title ?: 'Leaderboard' }}</h4>
                @if(!empty($period_label))
                    <p class="text-muted mb-0">{{ $period_label }}</p>
                @endif
            </div>
        </div>
        <div class="col-6 mt-2 text-end">
            <a href="{{ url('/index') }}" class="btn btn-light btn-sm">Back to Dashboard</a>
            @if(empty($error))
                <a href="{{ $exportUrl ?? '#' }}" class="btn btn-success btn-sm">Export</a>
            @endif
        </div>
    </div>

    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-body">
                    @if(!empty($pills) || !empty($periods))
                        <div class="mlb-toolbar">
                            @if(!empty($pills))
                                <div class="mlb-pills">
                                    @foreach($pills as $pill)
                                        <a class="mlb-pill {{ !empty($pill['active']) ? 'is-active' : '' }}"
                                            href="{{ $pill['url'] }}">{{ $pill['label'] }}</a>
                                    @endforeach
                                </div>
                            @else
                                <div></div>
                            @endif
                            @if(!empty($periods))
                                <div class="mlb-period">
                                    <label for="period">Period</label>
                                    <select class="form-control form-control-sm" id="period" name="period">
                                        @foreach($periods as $period)
                                            <option value="{{ $period->value }}" {{ (string) ($selected_period ?? '') === (string) $period->value ? 'selected' : '' }}>{{ $period->label }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            @endif
                        </div>
                    @endif
                    @if(session('error'))
                        <p class="text-danger">{{ session('error') }}</p>
                    @endif
                    @if(!empty($error))
                        <p class="text-danger mb-0">{{ $error }}</p>
                    @elseif(empty($users))
                        <p class="text-muted mb-0">No leaderboard data found.</p>
                    @else
                        <div class="table-responsive">
                            <table class="table table-centered table-nowrap table-hover table-bordered mb-0">
                                <thead class="table-light">
                                    <tr>
                                        <th>Rank</th>
                                        <th>{{ !empty($is_team) ? 'Team' : 'User' }}</th>
                                        @if(empty($is_team))
                                            <th>Employee Code</th>
                                            <th>Designation / Position</th>
                                        @endif
                                        <th>Score</th>
                                        @foreach($metrics as $metric)
                                            <th>{{ $metric['name'] }}</th>
                                        @endforeach
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($users as $user)
                                        <tr>
                                            <td>{{ $user['rank'] }}</td>
                                            <td>
                                                <div class="d-flex align-items-center">
                                                    @if(!empty($user['avatar']))
                                                        <img src="{{ $user['avatar'] }}" alt="" class="rounded-circle me-2" width="32" height="32">
                                                    @endif
                                                    <span>{{ $user['name'] }}</span>
                                                </div>
                                            </td>
                                            @if(empty($is_team))
                                                <td>{{ $user['employee_code'] }}</td>
                                                <td>
                                                    {{ $user['designation'] }}
                                                    @if(!empty($user['position_name']))
                                                        <br><small class="text-muted">{{ $user['position_name'] }}</small>
                                                    @endif
                                                </td>
                                            @endif
                                            <td>{{ $user['score'] }}</td>
                                            @foreach($metrics as $metric)
                                                <td>{{ $user['metric_values'][$metric['id']] ?? '—' }}</td>
                                            @endforeach
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('script')
<script type="text/javascript">
    jQuery(document).ready(function($){
        $('#period').on('change', function(){
            let href = new URL(window.location.href);
            href.searchParams.set('period', $(this).val());
            window.location.href = href.toString();
        });
    });
</script>
@endsection