@extends('layouts.app')

@section('title', 'Reports | DYSON LATAM')

@section('content')

    @php
        $totalProjects = $projects->count();

        $totalCertifications = $projects->sum(function ($project) {
            return $project->certifications->count();
        });

        $completedCertifications = $projects->sum(function ($project) {
            return $project->certifications->where('status', 'certified')->count();
        });

        $totalStages = $projects->sum(function ($project) {
            return $project->stages->count();
        });

        $completedStages = $projects->sum(function ($project) {
            return $project->stages->where('status', 'completed')->count();
        });

        $overallCertificationProgress =
            $totalCertifications > 0 ? round(($completedCertifications / $totalCertifications) * 100) : 0;

        $overallStageProgress = $totalStages > 0 ? round(($completedStages / $totalStages) * 100) : 0;

        $countries = $projects
            ->groupBy(function ($project) {
                return $project->country?->name ?? 'N/A';
            })
            ->sortKeys();

        $categories = $projects
            ->groupBy(function ($project) {
                return $project->category?->name ?? 'N/A';
            })
            ->sortKeys();

        $projectRows = $projects->map(function ($project) {
            $stages = $project->stages;

            $completedStages = $stages->where('status', 'completed')->count();
            $totalStages = $stages->count();

            $stageProgress = $totalStages > 0 ? round(($completedStages / $totalStages) * 100) : 0;

            $certifications = $project->certifications;

            $completedCertifications = $certifications->where('status', 'certified')->count();

            $totalCertifications = $certifications->count();

            $certificationProgress =
                $totalCertifications > 0 ? round(($completedCertifications / $totalCertifications) * 100) : 0;

            if ($stages->contains('status', 'blocked')) {
                $status = 'Blocked';
            } elseif ($stages->contains('status', 'overdue')) {
                $status = 'Overdue';
            } elseif ($totalStages > 0 && $completedStages === $totalStages) {
                $status = 'Completed';
            } elseif ($stages->contains('status', 'in_progress')) {
                $status = 'In Progress';
            } else {
                $status = 'Pending';
            }

            return [
                'project' => $project,
                'stage_progress' => $stageProgress,
                'certification_progress' => $certificationProgress,
                'status' => $status,
            ];
        });
    @endphp

    <style>
        .reports-page {
            display: flex;
            flex-direction: column;
            gap: 18px;
        }

        .reports-header {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 18px;
        }

        .reports-kicker {
            margin-bottom: 5px;
            color: #7a80a0;
            font-family: monospace;
            font-size: 9px;
            font-weight: 700;
            letter-spacing: .12em;
            text-transform: uppercase;
        }

        .reports-title {
            margin: 0;
            color: #161929;
            font-size: 24px;
            font-weight: 800;
            letter-spacing: -.03em;
        }

        .reports-subtitle {
            margin: 6px 0 0;
            color: #7a80a0;
            font-family: monospace;
            font-size: 10px;
        }

        .reports-grid-4 {
            display: grid;
            grid-template-columns: repeat(4, minmax(0, 1fr));
            gap: 12px;
        }

        .report-card {
            min-width: 0;
            background: #ffffff;
            border: 1px solid #dde1ee;
            border-radius: 12px;
            box-shadow: 0 4px 14px rgba(31, 36, 56, .04);
        }

        .report-kpi {
            padding: 15px 16px;
        }

        .report-kpi-label {
            color: #7a80a0;
            font-family: monospace;
            font-size: 9px;
            font-weight: 700;
            letter-spacing: .08em;
            text-transform: uppercase;
        }

        .report-kpi-value {
            margin-top: 8px;
            color: #171a2b;
            font-size: 26px;
            font-weight: 800;
            letter-spacing: -.03em;
        }

        .report-kpi-meta {
            margin-top: 4px;
            color: #8c91aa;
            font-family: monospace;
            font-size: 8px;
        }

        .reports-grid-2 {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 14px;
        }

        .report-section {
            padding: 16px;
        }

        .report-section-header {
            margin-bottom: 14px;
        }

        .report-section-title {
            margin: 0;
            color: #1a1d2e;
            font-size: 13px;
            font-weight: 800;
            letter-spacing: .01em;
        }

        .report-section-description {
            margin: 4px 0 0;
            color: #8c91aa;
            font-family: monospace;
            font-size: 8px;
        }

        .report-list {
            display: flex;
            flex-direction: column;
            gap: 9px;
        }

        .report-list-row {
            display: grid;
            grid-template-columns: minmax(0, 1fr) auto;
            align-items: center;
            gap: 12px;
            padding: 10px 0;
            border-bottom: 1px solid #edf0f6;
        }

        .report-list-row:last-child {
            border-bottom: 0;
        }

        .report-list-name {
            color: #31364d;
            font-size: 11px;
            font-weight: 700;
        }

        .report-list-meta {
            margin-top: 3px;
            color: #8c91aa;
            font-family: monospace;
            font-size: 8px;
        }

        .report-list-value {
            color: #1a1d2e;
            font-family: monospace;
            font-size: 10px;
            font-weight: 700;
            text-align: right;
            white-space: nowrap;
        }

        .progress-block {
            margin-top: 7px;
        }

        .progress-track {
            width: 100%;
            height: 6px;
            overflow: hidden;
            background: #eef1f7;
            border-radius: 99px;
        }

        .progress-fill {
            height: 100%;
            background: #171a2b;
            border-radius: 99px;
        }

        .progress-value {
            margin-top: 4px;
            color: #7a80a0;
            font-family: monospace;
            font-size: 8px;
        }

        .report-table-wrap {
            overflow-x: auto;
        }

        .report-table {
            width: 100%;
            border-collapse: collapse;
        }

        .report-table th {
            padding: 10px 10px;
            background: #f7f8fc;
            border-bottom: 1px solid #dde1ee;
            color: #7a80a0;
            font-family: monospace;
            font-size: 8px;
            font-weight: 700;
            letter-spacing: .06em;
            text-align: left;
            text-transform: uppercase;
            white-space: nowrap;
        }

        .report-table td {
            padding: 11px 10px;
            border-bottom: 1px solid #edf0f6;
            color: #34394f;
            font-size: 10px;
            vertical-align: middle;
        }

        .report-table tbody tr:last-child td {
            border-bottom: 0;
        }

        .report-project-name {
            color: #191c2c;
            font-size: 10px;
            font-weight: 800;
        }

        .report-project-model {
            margin-top: 3px;
            color: #8c91aa;
            font-family: monospace;
            font-size: 8px;
        }

        .report-badge {
            display: inline-flex;
            align-items: center;
            min-height: 22px;
            padding: 0 8px;
            border: 1px solid #dfe3ee;
            border-radius: 999px;
            background: #f7f8fc;
            color: #565d79;
            font-family: monospace;
            font-size: 8px;
            font-weight: 700;
            white-space: nowrap;
        }

        .report-progress-cell {
            min-width: 115px;
        }

        .report-empty {
            padding: 18px 0;
            color: #8c91aa;
            font-family: monospace;
            font-size: 9px;
            text-align: center;
        }

        @media (max-width: 1050px) {
            .reports-grid-4 {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }

            .reports-grid-2 {
                grid-template-columns: 1fr;
            }
        }

        @media (max-width: 700px) {
            .reports-header {
                flex-direction: column;
            }

            .reports-grid-4 {
                grid-template-columns: 1fr;
            }

            .report-table {
                min-width: 850px;
            }
        }
    </style>

    <div class="reports-page">

        <div class="reports-header">
            <div>
                <div class="reports-kicker">DYSON LATAM / REPORTING</div>
                <h1 class="reports-title">Reports</h1>
                <p class="reports-subtitle">
                    Project management and certification reporting
                </p>
            </div>
        </div>

        <div class="reports-grid-4">

            <div class="report-card">
                <div class="report-kpi">
                    <div class="report-kpi-label">Total Projects</div>
                    <div class="report-kpi-value">{{ $totalProjects }}</div>
                    <div class="report-kpi-meta">All registered NPD projects</div>
                </div>
            </div>

            <div class="report-card">
                <div class="report-kpi">
                    <div class="report-kpi-label">Stages Progress</div>
                    <div class="report-kpi-value">{{ $overallStageProgress }}%</div>
                    <div class="report-kpi-meta">
                        {{ $completedStages }} / {{ $totalStages }} completed
                    </div>
                </div>
            </div>

            <div class="report-card">
                <div class="report-kpi">
                    <div class="report-kpi-label">Certifications</div>
                    <div class="report-kpi-value">{{ $totalCertifications }}</div>
                    <div class="report-kpi-meta">
                        {{ $completedCertifications }} certified
                    </div>
                </div>
            </div>

            <div class="report-card">
                <div class="report-kpi">
                    <div class="report-kpi-label">Certification Progress</div>
                    <div class="report-kpi-value">{{ $overallCertificationProgress }}%</div>
                    <div class="report-kpi-meta">Across all projects</div>
                </div>
            </div>

        </div>

        <div class="reports-grid-2">

            <div class="report-card">
                <div class="report-section">

                    <div class="report-section-header">
                        <h2 class="report-section-title">Projects by Country</h2>
                        <p class="report-section-description">
                            Distribution of registered projects
                        </p>
                    </div>

                    <div class="report-list">

                        @forelse ($countries as $country => $countryProjects)
                            <div class="report-list-row">

                                <div>
                                    <div class="report-list-name">
                                        {{ $country }}
                                    </div>

                                    <div class="report-list-meta">
                                        {{ $countryProjects->count() }} project(s)
                                    </div>
                                </div>

                                <div class="report-list-value">
                                    {{ $countryProjects->count() }}
                                </div>

                            </div>

                        @empty

                            <div class="report-empty">
                                No country data available.
                            </div>
                        @endforelse

                    </div>

                </div>
            </div>

            <div class="report-card">
                <div class="report-section">

                    <div class="report-section-header">
                        <h2 class="report-section-title">Projects by Category</h2>
                        <p class="report-section-description">
                            Distribution of projects by category
                        </p>
                    </div>

                    <div class="report-list">

                        @forelse ($categories as $category => $categoryProjects)
                            <div class="report-list-row">

                                <div>
                                    <div class="report-list-name">
                                        {{ $category }}
                                    </div>

                                    <div class="report-list-meta">
                                        {{ $categoryProjects->count() }} project(s)
                                    </div>
                                </div>

                                <div class="report-list-value">
                                    {{ $categoryProjects->count() }}
                                </div>

                            </div>

                        @empty

                            <div class="report-empty">
                                No category data available.
                            </div>
                        @endforelse

                    </div>

                </div>
            </div>

        </div>

        <div class="report-card">

            <div class="report-section">

                <div class="report-section-header">
                    <h2 class="report-section-title">Project Report</h2>
                    <p class="report-section-description">
                        Current stage and certification progress by project
                    </p>
                </div>

                <div class="report-table-wrap">

                    <table class="report-table">

                        <thead>
                            <tr>
                                <th>Project</th>
                                <th>Country</th>
                                <th>Category</th>
                                <th>Status</th>
                                <th>Stages</th>
                                <th>Certifications</th>
                                <th>Launch Date</th>
                            </tr>
                        </thead>

                        <tbody>

                            @forelse ($projectRows as $row)
                                @php
                                    $project = $row['project'];

                                    $completedStages = $project->stages->where('status', 'completed')->count();

                                    $totalStages = $project->stages->count();

                                    $completedCertifications = $project->certifications
                                        ->where('status', 'certified')
                                        ->count();

                                    $totalCertifications = $project->certifications->count();
                                @endphp

                                <tr>

                                    <td>
                                        <div class="report-project-name">
                                            {{ $project->name }}
                                        </div>

                                        @if ($project->model)
                                            <div class="report-project-model">
                                                {{ $project->model }}
                                            </div>
                                        @endif
                                    </td>

                                    <td>
                                        {{ $project->country?->name ?? 'N/A' }}
                                    </td>

                                    <td>
                                        {{ $project->category?->name ?? 'N/A' }}
                                    </td>

                                    <td>
                                        <span class="report-badge">
                                            {{ $row['status'] }}
                                        </span>
                                    </td>

                                    <td class="report-progress-cell">

                                        <div>
                                            {{ $completedStages }} / {{ $totalStages }}
                                        </div>

                                        <div class="progress-block">
                                            <div class="progress-track">
                                                <div class="progress-fill" style="width: {{ $row['stage_progress'] }}%;">
                                                </div>
                                            </div>

                                            <div class="progress-value">
                                                {{ $row['stage_progress'] }}%
                                            </div>
                                        </div>

                                    </td>

                                    <td class="report-progress-cell">

                                        <div>
                                            {{ $completedCertifications }} / {{ $totalCertifications }}
                                        </div>

                                        <div class="progress-block">
                                            <div class="progress-track">
                                                <div class="progress-fill"
                                                    style="width: {{ $row['certification_progress'] }}%;"></div>
                                            </div>

                                            <div class="progress-value">
                                                {{ $row['certification_progress'] }}%
                                            </div>
                                        </div>

                                    </td>

                                    <td>
                                        {{ $project->launch_date?->format('d M Y') ?? 'N/A' }}
                                    </td>

                                </tr>

                            @empty

                                <tr>
                                    <td colspan="7">
                                        <div class="report-empty">
                                            No projects available.
                                        </div>
                                    </td>
                                </tr>
                            @endforelse

                        </tbody>

                    </table>

                </div>

            </div>

        </div>

    </div>

@endsection