<?php $this->layout('layouts/main', ['title' => 'Project Progress Dashboard']) ?>

<div class="container mx-auto px-4 py-8">
    <div class="flex justify-between items-center mb-6">
        <h1 class="text-2xl font-bold text-gray-800">Project Progress Dashboard</h1>
        <a href="<?= APP_URL ?>/reports/daily?project_id=<?= $projectId ?>" class="text-blue-600 hover:underline">&larr; Back to Reports</a>
    </div>

    <!-- Summary Cards -->
    <div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-8">
        <?php 
            $totalPlanned = array_sum(array_column($summary, 'total_planned'));
            $totalAchieved = array_sum(array_column($summary, 'total_achieved'));
            $pctComplete = $totalPlanned > 0 ? round(($totalAchieved / $totalPlanned) * 100, 1) : 0;
        ?>
        <div class="bg-white rounded-lg shadow p-6 border-l-4 border-blue-500">
            <h3 class="text-gray-500 text-sm font-bold uppercase">Overall Completion</h3>
            <p class="text-3xl font-bold text-gray-800 mt-2"><?= $pctComplete ?>%</p>
        </div>
        <div class="bg-white rounded-lg shadow p-6 border-l-4 border-indigo-500">
            <h3 class="text-gray-500 text-sm font-bold uppercase">Total Work Items</h3>
            <p class="text-3xl font-bold text-gray-800 mt-2"><?= count($summary) ?></p>
        </div>
        <div class="bg-white rounded-lg shadow p-6 border-l-4 border-green-500">
            <h3 class="text-gray-500 text-sm font-bold uppercase">Total Units Achieved</h3>
            <p class="text-3xl font-bold text-gray-800 mt-2"><?= number_format($totalAchieved, 2) ?></p>
        </div>
        <div class="bg-white rounded-lg shadow p-6 border-l-4 border-yellow-500">
            <h3 class="text-gray-500 text-sm font-bold uppercase">Total Reports</h3>
            <p class="text-3xl font-bold text-gray-800 mt-2"><?= (int)($totalReports ?? 0) ?></p>
        </div>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-8">
        <!-- Line Chart -->
        <div class="bg-white shadow rounded-lg p-6">
            <h2 class="text-lg font-bold text-gray-700 mb-4">Daily Progress Trend</h2>
            <div class="h-64">
                <canvas id="progressLineChart"></canvas>
            </div>
        </div>

        <!-- Bar Chart -->
        <div class="bg-white shadow rounded-lg p-6">
            <h2 class="text-lg font-bold text-gray-700 mb-4">Plan vs Achieved by Activity</h2>
            <div class="h-64">
                <canvas id="planVsAchievedChart"></canvas>
            </div>
        </div>
    </div>

    <!-- Workload Detail Table -->
    <div class="bg-white shadow rounded-lg overflow-hidden mb-8">
        <div class="p-4 bg-gray-50 border-b">
            <h2 class="text-lg font-bold text-gray-700">Detailed Workload Summary</h2>
        </div>
        <table class="min-w-full leading-normal">
            <thead>
                <tr>
                    <th class="px-5 py-3 border-b border-gray-200 text-left text-xs font-semibold text-gray-600 uppercase">Activity</th>
                    <th class="px-5 py-3 border-b border-gray-200 text-left text-xs font-semibold text-gray-600 uppercase">Unit</th>
                    <th class="px-5 py-3 border-b border-gray-200 text-left text-xs font-semibold text-gray-600 uppercase">Total Planned</th>
                    <th class="px-5 py-3 border-b border-gray-200 text-left text-xs font-semibold text-gray-600 uppercase">Total Achieved</th>
                    <th class="px-5 py-3 border-b border-gray-200 text-left text-xs font-semibold text-gray-600 uppercase">% Complete</th>
                </tr>
            </thead>
            <tbody>
                <?php foreach ($summary as $item): ?>
                <tr>
                    <td class="px-5 py-3 border-b border-gray-200 text-sm font-medium"><?= htmlspecialchars($item['activity_name']) ?></td>
                    <td class="px-5 py-3 border-b border-gray-200 text-sm"><?= htmlspecialchars($item['unit']) ?></td>
                    <td class="px-5 py-3 border-b border-gray-200 text-sm"><?= number_format($item['total_planned'], 2) ?></td>
                    <td class="px-5 py-3 border-b border-gray-200 text-sm font-bold text-blue-600"><?= number_format($item['total_achieved'], 2) ?></td>
                    <td class="px-5 py-3 border-b border-gray-200 text-sm">
                        <div class="flex items-center">
                            <span class="mr-2"><?= round($item['percentage'], 1) ?>%</span>
                            <div class="w-full bg-gray-200 rounded-full h-2">
                                <div class="bg-green-500 h-2 rounded-full" style="width: <?= min(100, $item['percentage']) ?>%"></div>
                            </div>
                        </div>
                    </td>
                </tr>
                <?php endforeach; ?>
                <?php if (empty($summary)): ?>
                <tr><td colspan="5" class="px-5 py-4 text-center text-gray-500">No data available for dashboard.</td></tr>
                <?php endif; ?>
            </tbody>
        </table>
    </div>

    <!-- Recent Photos Gallery -->
    <div class="bg-white shadow rounded-lg p-6">
        <h2 class="text-lg font-bold text-gray-700 mb-4">Recent Site Photos</h2>
        <div class="grid grid-cols-2 md:grid-cols-6 gap-4">
            <?php foreach ($recentPhotos as $photo): ?>
                <div class="aspect-square bg-gray-100 rounded overflow-hidden">
                    <img src="<?= APP_URL ?>/uploads/<?= htmlspecialchars($photo['file_path']) ?>" alt="Site Photo" class="w-full h-full object-cover">
                </div>
            <?php endforeach; ?>
            <?php if (empty($recentPhotos)): ?>
                <p class="text-gray-500 col-span-6">No recent photos found.</p>
            <?php endif; ?>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function () {
    if (typeof Chart === 'undefined') return;

    const chartData = <?= json_encode($chartData ?? []) ?>;
    new Chart(document.getElementById('progressLineChart'), {
        type: 'line',
        data: {
            labels: chartData.map(d => d.date),
            datasets: [{
                label: 'Achieved Qty',
                data: chartData.map(d => parseFloat(d.total_achieved) || 0),
                borderColor: '#0A3A6B',
                backgroundColor: 'rgba(79,108,247,0.15)',
                tension: 0.3,
                fill: true,
            }]
        },
        options: { responsive: true, maintainAspectRatio: false }
    });

    const summary = <?= json_encode($summary ?? []) ?>;
    new Chart(document.getElementById('planVsAchievedChart'), {
        type: 'bar',
        data: {
            labels: summary.map(s => s.activity_name),
            datasets: [
                { label: 'Planned', data: summary.map(s => parseFloat(s.total_planned) || 0), backgroundColor: '#94A3B8' },
                { label: 'Achieved', data: summary.map(s => parseFloat(s.total_achieved) || 0), backgroundColor: '#0A3A6B' },
            ]
        },
        options: { responsive: true, maintainAspectRatio: false }
    });
});
</script>

