@extends('layouts.app')

@section('content')
<div class="container py-4">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h1 class="fw-bold">
            <i class="bi bi-graph-up-arrow me-2 text-primary"></i>
            Performance Summary - {{ \Carbon\Carbon::create($year, $month, 1)->format('F Y') }}
        </h1>
        <button type="button" class="btn btn-outline-primary" data-bs-toggle="modal" data-bs-target="#filterModal">
            <i class="bi bi-filter-circle me-1"></i> Filter
        </button>
    </div>

    <!-- Summary Cards -->
    <div class="row g-4 mb-5">
        <div class="col-md-4">
            <div class="card border-0 shadow h-100">
                <div class="card-body">
                    <h6 class="text-muted">Total Projects Received</h6>
                    <p class="display-6 text-primary">{{ $totalReceivedProjects }}</p>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card border-0 shadow h-100">
                <div class="card-body">
                    <h6 class="text-muted">Total Projects Finished</h6>
                    <p class="display-6 text-success">{{ $totalFinishedProjects }}</p>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card border-0 shadow h-100">
                <div class="card-body">
                    <h6 class="text-muted">Finished On Time</h6>
                    <p class="display-6 text-info">{{ $projectsOnTime }}</p>
                </div>
            </div>
        </div>
    </div>

    <!-- User Performance Table -->
    <div class="card shadow border-0 mb-5">
        <div class="card-header bg-white fw-semibold fs-5">
            <i class="bi bi-people-fill me-2 text-secondary"></i> User Performance
        </div>
        <div class="card-body p-0">
            <div class="table-responsive">
                <table class="table table-hover mb-0 align-middle">
                    <thead class="table-light">
                        <tr>
                            <th>User</th>
                            <th>Tasks Completed</th>
                            <th>On Time</th>
                            <th>Todos Completed</th>
                            <th>On Time</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($userPerformance as $user)
                            <tr>
                                <td>{{ $user->name }}</td>
                                <td>{{ $user->tasks_total_completed }}</td>
                                <td>
                                    <span class="badge bg-success">{{ $user->tasks_completed_on_time }}</span>
                                </td>
                                <td>{{ $user->todos_total_completed }}</td>
                                <td>
                                    <span class="badge bg-info">{{ $user->todos_completed_on_time }}</span>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<!-- Filter Modal -->
<div class="modal fade" id="filterModal" tabindex="-1" aria-labelledby="filterModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <form action="{{ route('summary.index') }}" method="GET" class="modal-content border-0 shadow">
            <div class="modal-header bg-light">
                <h5 class="modal-title" id="filterModalLabel">
                    <i class="bi bi-calendar3 me-2"></i> Filter Report
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="mb-3">
                    <label for="month" class="form-label">Month</label>
                    <select name="month" id="month" class="form-select" required>
                        @for ($m = 1; $m <= 12; $m++)
                            <option value="{{ $m }}" {{ $m == $month ? 'selected' : '' }}>
                                {{ \Carbon\Carbon::create()->month($m)->format('F') }}
                            </option>
                        @endfor
                    </select>
                </div>
                <div class="mb-3">
                    <label for="year" class="form-label">Year</label>
                    <select name="year" id="year" class="form-select" required>
                        @for ($y = now()->year; $y >= now()->year - 5; $y--)
                            <option value="{{ $y }}" {{ $y == $year ? 'selected' : '' }}>
                                {{ $y }}
                            </option>
                        @endfor
                    </select>
                </div>
            </div>
            <div class="modal-footer">
                <button type="submit" class="btn btn-primary">Apply Filter</button>
                <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
            </div>
        </form>
    </div>
</div>
@endsection