@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;
@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