@extends('layouts.admin')

@section('title', __('Team Dashboard'))

@section('content')
<div class="container-fluid">
    <!-- Page Header -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <h1 class="h3 mb-0 text-gray-800">{{ __('Team Management') }}</h1>
                    <p class="text-muted">{{ __('Manage your team members and their information') }}</p>
                </div>
                <div>
                    <a href="{{ route('admin.team.list', ['locale' => app()->getLocale()]) }}" class="btn btn-primary">
                        <i class="fas fa-list"></i> {{ __('View All Members') }}
                    </a>
                    <a href="{{ route('admin.team.create', ['locale' => app()->getLocale()]) }}" class="btn btn-success">
                        <i class="fas fa-plus"></i> {{ __('Add Member') }}
                    </a>
                </div>
            </div>
        </div>
    </div>

    <!-- Statistics Cards -->
    <div class="row mb-4">
        <div class="col-xl-3 col-md-6 mb-4">
            <div class="card border-left-primary shadow h-100 py-2">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-primary text-uppercase mb-1">
                                {{ __('Total Members') }}
                            </div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">{{ $stats['total'] }}</div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-users fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-xl-3 col-md-6 mb-4">
            <div class="card border-left-success shadow h-100 py-2">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-success text-uppercase mb-1">
                                {{ __('Active Members') }}
                            </div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">{{ $stats['active'] }}</div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-user-check fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-xl-3 col-md-6 mb-4">
            <div class="card border-left-warning shadow h-100 py-2">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-warning text-uppercase mb-1">
                                {{ __('Team Leads') }}
                            </div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">{{ $stats['leads'] }}</div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-star fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-xl-3 col-md-6 mb-4">
            <div class="card border-left-info shadow h-100 py-2">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-info text-uppercase mb-1">
                                {{ __('Departments') }}
                            </div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">{{ $stats['departments'] }}</div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-building fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Recent Members and Department Distribution -->
    <div class="row">
        <!-- Recent Members -->
        <div class="col-lg-8 mb-4">
            <div class="card shadow">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary">{{ __('Recent Members') }}</h6>
                </div>
                <div class="card-body">
                    @if($recentMembers->count() > 0)
                        <div class="table-responsive">
                            <table class="table table-borderless">
                                <thead>
                                    <tr>
                                        <th>{{ __('Member') }}</th>
                                        <th>{{ __('Position') }}</th>
                                        <th>{{ __('Department') }}</th>
                                        <th>{{ __('Status') }}</th>
                                        <th>{{ __('Joined') }}</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($recentMembers as $member)
                                    <tr>
                                        <td>
                                            <div class="d-flex align-items-center">
                                                @if($member->avatar)
                                                    <img src="{{ asset('storage/' . $member->avatar) }}" class="rounded-circle mr-2" width="40" height="40" alt="Avatar">
                                                @else
                                                    <div class="avatar-placeholder rounded-circle bg-secondary text-white d-flex align-items-center justify-content-center mr-2" style="width:40px;height:40px;">
                                                        <i class="fas fa-user"></i>
                                                    </div>
                                                @endif
                                                <div>
                                                    <div class="font-weight-bold">{{ $member->name }}</div>
                                                    <small class="text-muted">{{ $member->email }}</small>
                                                </div>
                                            </div>
                                        </td>
                                        <td>{{ $member->position }}</td>
                                        <td>{{ $member->department ?: __('Not Assigned') }}</td>
                                        <td>
                                            @if($member->is_active)
                                                <span class="badge badge-success">{{ __('Active') }}</span>
                                            @else
                                                <span class="badge badge-secondary">{{ __('Inactive') }}</span>
                                            @endif
                                            @if($member->is_lead)
                                                <span class="badge badge-warning ml-1"><i class="fas fa-star"></i> {{ __('Lead') }}</span>
                                            @endif
                                        </td>
                                        <td>{{ $member->created_at->format('M d, Y') }}</td>
                                    </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                        <div class="text-center mt-3">
                            <a href="{{ route('admin.team.list', ['locale' => app()->getLocale()]) }}" class="btn btn-outline-primary btn-sm">
                                {{ __('View All Members') }}
                            </a>
                        </div>
                    @else
                        <div class="text-center py-5">
                            <i class="fas fa-users fa-3x text-gray-300 mb-3"></i>
                            <h5 class="text-gray-500">{{ __('No team members yet') }}</h5>
                            <p class="text-gray-400">{{ __('Start building your team by adding your first member.') }}</p>
                            <a href="{{ route('admin.team.create', ['locale' => app()->getLocale()]) }}" class="btn btn-primary">
                                <i class="fas fa-plus"></i> {{ __('Add First Member') }}
                            </a>
                        </div>
                    @endif
                </div>
            </div>
        </div>

        <!-- Department Distribution -->
        <div class="col-lg-4 mb-4">
            <div class="card shadow">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary">{{ __('Department Distribution') }}</h6>
                </div>
                <div class="card-body">
                    @if($departmentStats->count() > 0)
                        <div class="chart-container">
                            <canvas id="departmentChart" width="100%" height="200"></canvas>
                        </div>
                        <div class="mt-3">
                            @foreach($departmentStats as $stat)
                            <div class="d-flex justify-content-between align-items-center mb-2">
                                <span class="text-sm">{{ $stat->department ?: __('No Department') }}</span>
                                <span class="badge badge-primary">{{ $stat->count }}</span>
                            </div>
                            @endforeach
                        </div>
                    @else
                        <div class="text-center py-4">
                            <i class="fas fa-chart-pie fa-2x text-gray-300 mb-2"></i>
                            <p class="text-gray-500 mb-0">{{ __('No department data available') }}</p>
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>

@push('scripts')
@if($departmentStats->count() > 0)
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    const ctx = document.getElementById('departmentChart').getContext('2d');
    const departmentData = @json($departmentStats);

    new Chart(ctx, {
        type: 'doughnut',
        data: {
            labels: departmentData.map(item => item.department || '{{ __("No Department") }}'),
            datasets: [{
                data: departmentData.map(item => item.count),
                backgroundColor: [
                    '#4e73df', '#1cc88a', '#36b9cc', '#f6c23e', '#e74a3b',
                    '#6f42c1', '#fd7e14', '#20c997', '#6c757d', '#007bff'
                ],
                borderWidth: 1
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            legend: {
                display: false
            },
            tooltips: {
                callbacks: {
                    label: function(tooltipItem, data) {
                        const label = data.labels[tooltipItem.index];
                        const value = data.datasets[0].data[tooltipItem.index];
                        return label + ': ' + value;
                    }
                }
            }
        }
    });
});
</script>
@endif
@endpush
@endsection