@extends('theme.default.layouts.app')

@section('dashboard-title')
<h3 style="margin-top: 17px; font-size: 26px;">PROGRESS DASHBOARD</h3>
@endsection

@section('content')

<style>
    .header-teal {
        background-color: #00BCD4;
    }

    .header-lavender {
        background-color: #B0BEC5;
    }

    .col-teal {
        background-color: #B2EBF2;
    }

    .col-lavender {
        background-color: #ECEFF1;
    }

    .status-badge {
        background-color: #FFC107;
        width: 90%;
        height: 35px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 4px;
    }

    .target-dark {
        background-color: #434343;
        width: 90%;
        height: 35px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 4px;
    }

    .target-dark1 {
        background-color: #fff;
        width: 90%;
        height: 35px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 4px;
    }

    .section-heading {
        background-color: #F5F5F5;
    }
</style>

@php
    $catLetter = 65;

    $progresses = collect([
        [
            'category' => 'Infrastructure Development',
            'details' => [
                [
                    'sub_categories' => 'Boreholes completed',
                    'status' => 'completed',
                    'project_targets' => 10,
                    'year_progress' => 6,
                    'cumulative_progress' => 8,
                    'current_year_targets' => 4,
                    'current_year_progress' => 2,
                ],
                [
                    'sub_categories' => 'Solar pumps installed',
                    'status' => 'inprogress',
                    'project_targets' => 12,
                    'year_progress' => 7,
                    'cumulative_progress' => 9,
                    'current_year_targets' => 5,
                    'current_year_progress' => 3,
                ],
                [
                    'sub_categories' => 'Water points rehabilitated',
                    'status' => 'completed',
                    'project_targets' => 15,
                    'year_progress' => 9,
                    'cumulative_progress' => 12,
                    'current_year_targets' => 6,
                    'current_year_progress' => 4,
                ],
            ],
        ],
        [
            'category' => 'Community Support',
            'details' => [
                [
                    'sub_categories' => 'Accounts opened',
                    'status' => 'completed',
                    'project_targets' => 20,
                    'year_progress' => 11,
                    'cumulative_progress' => 14,
                    'current_year_targets' => 9,
                    'current_year_progress' => 5,
                ],
                [
                    'sub_categories' => 'Work initiated',
                    'status' => 'inprogress',
                    'project_targets' => 18,
                    'year_progress' => 10,
                    'cumulative_progress' => 13,
                    'current_year_targets' => 8,
                    'current_year_progress' => 4,
                ],
            ],
        ],
        [
            'category' => 'Monitoring and Reporting',
            'details' => [
                [
                    'sub_categories' => 'Plinth completed',
                    'status' => 'completed',
                    'project_targets' => 14,
                    'year_progress' => 8,
                    'cumulative_progress' => 10,
                    'current_year_targets' => 6,
                    'current_year_progress' => 3,
                ],
                [
                    'sub_categories' => 'Lintel completed',
                    'status' => 'completed',
                    'project_targets' => 16,
                    'year_progress' => 9,
                    'cumulative_progress' => 12,
                    'current_year_targets' => 7,
                    'current_year_progress' => 4,
                ],
                [
                    'sub_categories' => 'Roof completed',
                    'status' => 'inprogress',
                    'project_targets' => 18,
                    'year_progress' => 10,
                    'cumulative_progress' => 13,
                    'current_year_targets' => 8,
                    'current_year_progress' => 5,
                ],
            ],
        ],
    ])->map(function ($progress) {
        $progress['details'] = collect($progress['details'])->map(function ($detail) {
            return (object) $detail;
        });

        return (object) $progress;
    });
@endphp

<div class="overflow-x-auto">
    <table class="w-full border-collapse text-xs">
        <thead>
            <tr>
                <th class="text-left px-3 py-2 font-bold text-gray-700 w-100 align-bottom" rowspan="2" style="background-color:#F3F3F3;font-size:18px;font-weight:700;color:#434343;font-family:'Roboto Condensed';">
                    ACTIVITIES:
                </th>
                <th class="px-2 py-2 font-bold text-gray-700 w-24 align-bottom" rowspan="2" style="background-color:#F3F3F3;font-weight:700;color:#000;font-size:13px;padding-bottom:30px;font-family:'Roboto Condensed';">
                    STATUS
                </th>
                <th class="text-center px-2 py-2 font-bold text-gray-700 w-20" rowspan="2" style="background-color:#EBFFDC;font-weight:700;color:#000;font-size:17px;font-family:'Roboto Condensed';">
                    PROJECT<br>TARGETS
                </th>
                <th class="header-teal text-center px-2 py-2 font-bold text-black w-20" colspan="2" style="background-color:#B2EBF2;font-weight:700;color:#000;font-size:17px;font-family:'Roboto Condensed';">
                    YEAR (2024-25)
                    <svg width="120%" height="4" style="display:block; margin-top:0;"><line x1="0" y1="2" x2="100%" y2="2" stroke="#434343" stroke-width="1" /></svg>
                </th>
                <th class="header-teal text-center px-2 py-2 font-bold text-black" colspan="3" style="background-color:#4DD0E1;font-weight:700;color:#000;font-size:17px;font-family:'Roboto Condensed';">
                    CURRENT YEAR (2025-26)
                    <svg width="120%" height="4" style="display:block; margin-top:0;"><line x1="0" y1="2" x2="100%" y2="2" stroke="#434343" stroke-width="1" /></svg>
                </th>
                <th class="header-lavender text-center px-2 py-2 font-bold text-gray-700" colspan="2" style="background-color:#C5CAE9;font-weight:700;color:#000;font-size:17px;font-family:'Roboto Condensed';">
                    CUMULATIVE
                    <svg width="100%" height="4" style="display:block; margin-top:0;"><line x1="0" y1="2" x2="100%" y2="2" stroke="#434343" stroke-width="1" /></svg>
                </th>
            </tr>

            <tr>
                <th class="header-teal text-center px-2 py-2 font-semibold text-black" style="background-color:#B2EBF2;font-weight:700;color:#000;font-size:15px;font-family:'Roboto Condensed';">
                    2024-25<br>PROGRESS
                </th>
                <th class="header-teal text-center px-2 py-2 font-semibold text-black" style="background-color:#B2EBF2;font-weight:700;color:#000;font-size:15px;font-family:'Roboto Condensed';">
                    CUMULATIVE<br>PROGRESS<br><span class="text-xs font-normal" style="font-size:11px;">(As on June 2025)</span>
                </th>
                <th class="header-teal text-center px-2 py-2 font-semibold text-black" style="background-color:#4DD0E1;font-weight:700;color:#000;font-size:15px;font-family:'Roboto Condensed';">TARGETS</th>
                <th class="header-teal text-center px-2 py-2 font-semibold text-black" style="background-color:#4DD0E1;font-weight:700;color:#000;font-size:15px;font-family:'Roboto Condensed';">PROGRESS</th>
                <th class="header-teal text-center px-2 py-2 font-semibold text-black" style="background-color:#4DD0E1;font-weight:700;color:#000;font-size:15px;font-family:'Roboto Condensed';padding-top:26px;">PROGRESS<br>%</th>
                <th class="header-lavender text-center px-2 py-2 font-semibold text-gray-700" style="background-color:#C5CAE9;font-weight:700;color:#000;font-size:15px;font-family:'Roboto Condensed';">PROGRESS</th>
                <th class="header-lavender text-center px-2 py-2 font-semibold text-gray-700" style="background-color:#C5CAE9;font-weight:700;color:#000;font-size:15px;font-family:'Roboto Condensed';padding-top:26px;">PROGRESS<br>%</th>
            </tr>
        </thead>
        <tbody>
            @forelse($progresses as $progress)
            @php
                $letter = chr($catLetter);
            @endphp
            <tr>
                <td colspan="2" class="py-4 font-bold align-bottom" style="vertical-align:top; padding-top:16px;background-color:#F3F3F3;">
                    <div style="margin-top:-14px; font-size:1.25rem; font-weight:500; color:#000; line-height:18px; border-bottom: 2px solid #434343; padding-bottom: 10px; border-top: 2px solid #434343;padding-top: 7px">
                        <span style="font-weight:800;font-size:20px;font-family:'Roboto Condensed'; padding-left:8px;">
                            {{ $letter }}- {{ $progress->category }}
                        </span>
                    </div>
                </td>
                @for($i = 0; $i < 8; $i++)
                    <td style="background-color:{{ $i == 0 ? '#EBFFDC' : ($i < 3 ? '#B2EBF2' : ($i < 6 ? '#4DD0E1' : '#C5CAE9')) }};">
                        <div style="margin-top:-14px; border-bottom: 2px solid #434343; padding-bottom: 10px; border-top: 2px solid #434343;padding-top: 10px">&nbsp;</div>
                    </td>
                @endfor
            </tr>

            @foreach($progress->details as $detail)
            @php
                $yearProgress = $detail->year_progress;
                $currentYearProgress = $detail->current_year_progress;
                $cumulativeAsOfJune = $detail->cumulative_progress;
                $totalCumulative = $cumulativeAsOfJune + $currentYearProgress;
            @endphp
            <tr>
                <td class="px-3 py-1 font-semibold text-gray-700" style="background-color:#F3F3F3;font-weight:700;color:#000;font-size:16px;padding-left:18px;">
                    {{ $detail->sub_categories }}
                </td>
                <td class="text-center py-1" style="background-color:#F3F3F3;font-family:'Oswald';font-size:16px;width: 7%;">
                    <span class="status-badge text-white font-bold px-2 py-1">
                        {{ $detail->status == 'inprogress' ? 'IN PROGRESS' : strtoupper($detail->status) }}
                    </span>
                </td>
                <td class="text-center py-1" style="background-color:#EBFFDC;font-family:'Arial';font-size:20px;">
                    <span class="target-dark text-white font-bold px-3 py-1">{{ $detail->project_targets }}</span>
                </td>
                <td class="text-center py-1" style="background-color:#B2EBF2;font-family:'Arial';color:#000;font-size:20px;">
                    <span class="target-dark1 text-black font-bold px-3 py-1">{{ $yearProgress }}</span>
                </td>
                <td class="text-center py-1" style="background-color:#B2EBF2;font-family:'Arial';color:#000;font-size:20px;">
                    <span class="target-dark1 text-black font-bold px-3 py-1">{{ $cumulativeAsOfJune }}</span>
                </td>
                <td class="text-center py-1" style="background-color:#4DD0E1;font-family:'Arial';color:#000;font-size:20px;">
                    <span class="target-dark text-white font-bold px-3 py-1">{{ $detail->current_year_targets }}</span>
                </td>
                <td class="text-center py-1" style="background-color:#4DD0E1;font-family:'Arial';color:#000;font-size:20px;">
                    <span class="target-dark1 text-black font-bold px-3 py-1">{{ $currentYearProgress }}</span>
                </td>
                <td class="text-center py-1" style="background-color:#4DD0E1;font-family:'Arial';color:#000;font-size:20px;">
                    @php
                        $percent = $detail->current_year_targets > 0 ? round(($currentYearProgress / $detail->current_year_targets) * 100) : 0;
                    @endphp
                    <span class="target-dark1 text-black font-bold px-3 py-1">{{ $percent }}%</span>
                </td>
                <td class="text-center py-1" style="background-color:#C5CAE9;font-family:'Arial';color:#000;font-size:20px;padding-left:20px">
                    <span class="target-dark1 text-black font-bold px-3 py-1">{{ $totalCumulative }}</span>
                </td>
                <td class="text-center py-1" style="background-color:#C5CAE9;font-family:'Arial';color:#000;font-size:20px;padding-right:20px">
                    @php
                        $cum_percent = $detail->project_targets > 0 ? round(($totalCumulative / $detail->project_targets) * 100) : 0;
                    @endphp
                    <span class="target-dark1 text-black font-bold px-3 py-1">{{ $cum_percent }}%</span>
                </td>
            </tr>
            @endforeach

            @php $catLetter++; @endphp
            @empty
            <tr>
                <td colspan="10" class="text-center py-4 font-bold text-gray-500" style="background-color:#F9F9F9;">
                    No Data Found
                </td>
            </tr>
            @endforelse
        </tbody>
    </table>
</div>

@endsection