@extends('adminlte::page')

@section('title', 'Task Reports')

@section('content_header')
    <div class="d-flex justify-content-between align-items-center">
        <h1 class="font-condensed">Task Reports & Analytics</h1>
        <div>
            <form method="GET" class="d-inline">
                <select name="status" class="form-control form-control-sm d-inline-block mr-2" style="width: auto;" onchange="this.form.submit()">
                    <option value="">All Status</option>
                    <option value="pending" {{ request('status') == 'pending' ? 'selected' : '' }}>Pending</option>
                    <option value="in_progress" {{ request('status') == 'in_progress' ? 'selected' : '' }}>In Progress</option>
                    <option value="completed" {{ request('status') == 'completed' ? 'selected' : '' }}>Completed</option>
                    <option value="cancelled" {{ request('status') == 'cancelled' ? 'selected' : '' }}>Cancelled</option>
                </select>
                <select name="priority" class="form-control form-control-sm d-inline-block mr-2" style="width: auto;" onchange="this.form.submit()">
                    <option value="">All Priority</option>
                    <option value="low" {{ request('priority') == 'low' ? 'selected' : '' }}>Low</option>
                    <option value="medium" {{ request('priority') == 'medium' ? 'selected' : '' }}>Medium</option>
                    <option value="high" {{ request('priority') == 'high' ? 'selected' : '' }}>High</option>
                    <option value="urgent" {{ request('priority') == 'urgent' ? 'selected' : '' }}>Urgent</option>
                </select>
            </form>
            <a href="{{ route('reports.index') }}" class="btn btn-secondary btn-sm">
                <i class="fas fa-arrow-left"></i> Back to Reports
            </a>
        </div>
    </div>
@stop

@section('content')
<!-- Task Overview Cards -->
<div class="row">
    <div class="col-lg-3 col-6">
        <div class="small-box bg-info">
            <div class="inner">
                <h3>{{ $taskCounts->total ?? 0 }}</h3>
                <p>Total Tasks</p>
                <small>All time</small>
            </div>
            <div class="icon">
                <i class="fas fa-tasks"></i>
            </div>
        </div>
    </div>
    <div class="col-lg-3 col-6">
        <div class="small-box bg-warning">
            <div class="inner">
                <h3>{{ $taskCounts->pending ?? 0 }}</h3>
                <p>Pending Tasks</p>
                <small>{{ $taskCounts->total > 0 ? round(($taskCounts->pending / $taskCounts->total) * 100, 1) : 0 }}% of total</small>
            </div>
            <div class="icon">
                <i class="fas fa-clock"></i>
            </div>
        </div>
    </div>
    <div class="col-lg-3 col-6">
        <div class="small-box bg-success">
            <div class="inner">
                <h3>{{ $taskCounts->completed ?? 0 }}</h3>
                <p>Completed Tasks</p>
                <small>{{ $taskCounts->total > 0 ? round(($taskCounts->completed / $taskCounts->total) * 100, 1) : 0 }}% of total</small>
            </div>
            <div class="icon">
                <i class="fas fa-check-circle"></i>
            </div>
        </div>
    </div>
    <div class="col-lg-3 col-6">
        <div class="small-box bg-danger">
            <div class="inner">
                <h3>{{ $overdueTasks ?? 0 }}</h3>
                <p>Overdue Tasks</p>
                <small>Past due date</small>
            </div>
            <div class="icon">
                <i class="fas fa-exclamation-triangle"></i>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <!-- Task Status Distribution -->
    <div class="col-md-6">
        <div class="card">
            <div class="card-header p-compact">
                <h3 class="card-title font-condensed">Task Status Distribution</h3>
            </div>
            <div class="card-body p-compact">
                <canvas id="statusChart" height="180"></canvas>
            </div>
        </div>
    </div>

    <!-- Task Priority Breakdown -->
    <div class="col-md-6">
        <div class="card">
            <div class="card-header p-compact">
                <h3 class="card-title font-condensed">Priority Breakdown</h3>
            </div>
            <div class="card-body p-compact">
                <canvas id="priorityChart" height="180"></canvas>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <!-- Task Completion Rate by User -->
    <div class="col-md-8">
        <div class="card">
            <div class="card-header p-compact">
                <h3 class="card-title font-condensed">Task Performance by User</h3>
            </div>
            <div class="card-body p-compact">
                @if($tasksByUser->count() > 0)
                    <div class="table-responsive">
                        <table class="table table-striped table-sm">
                            <thead>
                                <tr>
                                    <th class="text-compact">User</th>
                                    <th class="text-compact">Total Tasks</th>
                                    <th class="text-compact">Completed</th>
                                    <th class="text-compact">Pending</th>
                                    <th class="text-compact">Overdue</th>
                                    <th class="text-compact">Completion Rate</th>
                                    <th class="text-compact">Avg Days to Complete</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($tasksByUser as $user)
                                    @php
                                        $completionRate = $user->total_tasks > 0 ? ($user->completed_tasks / $user->total_tasks) * 100 : 0;
                                    @endphp
                                    <tr>
                                        <td><strong>{{ $user->name }}</strong></td>
                                        <td>{{ $user->total_tasks }}</td>
                                        <td>
                                            <span class="badge badge-success">{{ $user->completed_tasks }}</span>
                                        </td>
                                        <td>
                                            <span class="badge badge-warning">{{ $user->pending_tasks }}</span>
                                        </td>
                                        <td>
                                            @if($user->overdue_tasks > 0)
                                                <span class="badge badge-danger">{{ $user->overdue_tasks }}</span>
                                            @else
                                                <span class="badge badge-light">0</span>
                                            @endif
                                        </td>
                                        <td>
                                            @php
                                                $rateColor = $completionRate >= 80 ? 'success' : 
                                                            ($completionRate >= 60 ? 'warning' : 'danger');
                                            @endphp
                                            <span class="badge badge-{{ $rateColor }}">{{ number_format($completionRate, 1) }}%</span>
                                        </td>
                                        <td>{{ $user->avg_completion_days ? number_format($user->avg_completion_days, 1) : 'N/A' }}</td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                @else
                    <p class="text-muted">No task data available.</p>
                @endif
            </div>
        </div>
    </div>

    <!-- Recent Task Activity -->
    <div class="col-md-4">
        <div class="card">
            <div class="card-header p-compact">
                <h3 class="card-title font-condensed">Recent Activity</h3>
                <div class="card-tools">
                    <span class="badge badge-info">Last 7 Days</span>
                </div>
            </div>
            <div class="card-body p-compact">
                @if($recentActivity->count() > 0)
                    <div class="timeline" style="margin-left: 0;">
                        @foreach($recentActivity as $activity)
                            <div class="time-label">
                                <span class="bg-green text-extra-compact">{{ \Carbon\Carbon::parse($activity->created_at)->format('M j') }}</span>
                            </div>
                            <div>
                                @php
                                    $icon = match($activity->status) {
                                        'completed' => 'fas fa-check text-success',
                                        'in_progress' => 'fas fa-play text-warning',
                                        'cancelled' => 'fas fa-times text-danger',
                                        default => 'fas fa-clock text-info'
                                    };
                                @endphp
                                <i class="{{ $icon }}"></i>
                                <div class="timeline-item">
                                    <h3 class="timeline-header">
                                        <small><strong>{{ $activity->title }}</strong></small>
                                    </h3>
                                    <div class="timeline-body">
                                        <small>
                                            Assigned to: {{ $activity->assigned_user_name }}<br>
                                            Case: {{ $activity->case_number }}<br>
                                            Status: <span class="badge badge-{{ $activity->status == 'completed' ? 'success' : ($activity->status == 'in_progress' ? 'warning' : 'info') }}">{{ ucfirst(str_replace('_', ' ', $activity->status)) }}</span>
                                        </small>
                                    </div>
                                    <div class="timeline-footer">
                                        <small class="text-muted">{{ \Carbon\Carbon::parse($activity->created_at)->diffForHumans() }}</small>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                @else
                    <p class="text-muted">No recent task activity.</p>
                @endif
            </div>
        </div>
    </div>
</div>

<!-- Task Workload Analysis -->
<div class="row">
    <div class="col-md-12">
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">Task Creation Trend</h3>
                <div class="card-tools">
                    <span class="badge badge-primary">Last 30 Days</span>
                </div>
            </div>
            <div class="card-body">
                <canvas id="taskTrendChart" height="100"></canvas>
            </div>
        </div>
    </div>
</div>

<!-- Quick Stats Summary -->
<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">Task Performance Summary</h3>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-3">
                        <div class="description-block">
                            <h5 class="description-header">{{ $avgTaskDuration ?? 'N/A' }}</h5>
                            <span class="description-text">AVG COMPLETION</span>
                            <small class="text-muted d-block">Days to complete</small>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="description-block">
                            <h5 class="description-header">{{ $tasksThisWeek ?? 0 }}</h5>
                            <span class="description-text">THIS WEEK</span>
                            <small class="text-muted d-block">Tasks created</small>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="description-block">
                            <h5 class="description-header">{{ $completedThisWeek ?? 0 }}</h5>
                            <span class="description-text">COMPLETED</span>
                            <small class="text-muted d-block">This week</small>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="description-block">
                            <h5 class="description-header">{{ $tasksByCase->count() ?? 0 }}</h5>
                            <span class="description-text">ACTIVE CASES</span>
                            <small class="text-muted d-block">With tasks</small>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@stop

@section('js')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
// Status Distribution Chart
const statusCtx = document.getElementById('statusChart').getContext('2d');
const statusChart = new Chart(statusCtx, {
    type: 'doughnut',
    data: {
        labels: ['Pending', 'In Progress', 'Completed', 'Cancelled'],
        datasets: [{
            data: [
                {{ $taskCounts->pending ?? 0 }},
                {{ $taskCounts->in_progress ?? 0 }},
                {{ $taskCounts->completed ?? 0 }},
                {{ $taskCounts->cancelled ?? 0 }}
            ],
            backgroundColor: ['#ffc107', '#17a2b8', '#28a745', '#dc3545']
        }]
    },
    options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: {
            legend: {
                position: 'bottom'
            }
        }
    }
});

// Priority Distribution Chart
const priorityCtx = document.getElementById('priorityChart').getContext('2d');
const priorityChart = new Chart(priorityCtx, {
    type: 'doughnut',
    data: {
        labels: ['Low', 'Medium', 'High', 'Urgent'],
        datasets: [{
            data: [
                {{ $priorityCounts->low ?? 0 }},
                {{ $priorityCounts->medium ?? 0 }},
                {{ $priorityCounts->high ?? 0 }},
                {{ $priorityCounts->urgent ?? 0 }}
            ],
            backgroundColor: ['#6c757d', '#17a2b8', '#fd7e14', '#dc3545']
        }]
    },
    options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: {
            legend: {
                position: 'bottom'
            }
        }
    }
});

// Task Trend Chart
const trendCtx = document.getElementById('taskTrendChart').getContext('2d');
const trendChart = new Chart(trendCtx, {
    type: 'line',
    data: {
        labels: [
            @if(isset($taskTrend))
                @foreach($taskTrend as $trend)
                    '{{ \Carbon\Carbon::parse($trend->date)->format('M j') }}',
                @endforeach
            @endif
        ],
        datasets: [{
            label: 'Tasks Created',
            data: [
                @if(isset($taskTrend))
                    @foreach($taskTrend as $trend)
                        {{ $trend->count }},
                    @endforeach
                @endif
            ],
            borderColor: '#007bff',
            backgroundColor: 'rgba(0, 123, 255, 0.1)',
            borderWidth: 2,
            fill: false
        }]
    },
    options: {
        responsive: true,
        maintainAspectRatio: false,
        scales: {
            y: {
                beginAtZero: true
            }
        },
        plugins: {
            legend: {
                position: 'top'
            }
        }
    }
});
</script>
@stop