@extends('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: 110px;
        /* IN PROGRESS ke approx equal */
        height: 35px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 4px;

    }

    .target-dark {
        background-color: #434343;
        width: 110px;
        /* IN PROGRESS ke approx equal */
        height: 35px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 4px;

    }

    .target-dark1 {
        background-color: #fff;
        width: 110px;
        /* IN PROGRESS ke approx equal */
        height: 35px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 4px;

    }

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

@php $catLetter = 65; // ASCII 'A' @endphp

<div class="overflow-x-auto">
    <table class="w-full border-collapse text-xs">
        <thead>
            {{-- Row 1: Group Headers --}}
            <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:
                    <!-- <svg width="464%" height="4" class="block" style="margin-bottom:-4px;">
                        <line x1="0" y1="2" x2="100%" y2="2" stroke="#434343" stroke-width="1" />
                    </svg> -->
                </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>

            {{-- Row 2: Sub Headers --}}
            <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); // A, B, C...
            $subIndex = 1;
            @endphp

            {{-- Component Header --}}
            <tr>
                <td colspan="2" class="p-3 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;">
                        <svg width="262%" height="4" class="block" style="margin-bottom:10px;">
                            <line x1="0" y1="2" x2="100%" y2="2" stroke="#434343" stroke-width="1" />
                        </svg>
                        <span style="font-weight:800;font-size:20px;font-family:'Roboto Condensed'; padding-left:8px;">
                            {{ $letter }}- {{ $progress->category }}
                        </span>
                    </div>
                    <svg width="262%" height="4" style="display:block; margin-top:10px;">
                        <line x1="0" y1="2" x2="100%" y2="2" stroke="#434343" stroke-width="1" />
                    </svg>
                </td>
                <td class="p-2" style="background-color:#EBFFDC;"></td>
                <td class="p-2" style="background-color:#B2EBF2;"></td>
                <td class="p-2" style="background-color:#B2EBF2;"></td>
                <td class="p-2" style="background-color:#4DD0E1;"></td>
                <td class="p-2" style="background-color:#4DD0E1;"></td>
                <td class="p-2" style="background-color:#4DD0E1;"></td>
                <td class="p-2" style="background-color:#C5CAE9;"></td>
                <td class="p-2" style="background-color:#C5CAE9;"></td>
            </tr>

            {{-- Subcategories --}}
            @foreach($progress->details as $detail)
            <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;">
                    <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">{{ $detail->year_progress }}</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">{{ $detail->comulative_progress }}</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">{{ $detail->current_year_progress }}</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(($detail->current_year_progress / $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">{{ $detail->year_progress + $detail->current_year_progress }}</span>
                </td>
                <td class="text-center py-1" style="background-color:#C5CAE9;font-family:'Arial';color:#000;font-size:20px">
                    @php
                    $cum_percent = ($detail->year_progress + $detail->current_year_progress) > 0
                    ? round((($detail->year_progress + $detail->current_year_progress) / $detail->project_targets) * 100)
                    : 0;
                    @endphp
                    <span class="target-dark1 text-black font-bold px-3 py-1">{{ $cum_percent }}%</span>
                </td>
            </tr>
            @php $subIndex++; @endphp
            @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