@extends('layouts.app')

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

@section('content')

@php
function formatNumberShort($number, $decimals = 1) {
    if ($number >= 1000000) { // 1 Million
        return number_format($number / 1000000, $decimals) . ' M';
    } elseif ($number >= 1000) { // 1 Thousand
        return number_format($number / 1000, $decimals) . ' K';
    } else {
        return number_format($number, 0);
    }
}
@endphp

<div>
    <div class="overflow-x-auto bg-white rounded shadow" style="background-color:#f3f3f3;">
        <table class="w-full border-collapse" style="font-size:16px;font-family:Roboto Condensed;">
            <thead>
                {{-- ROW 1: Group headers --}}
                <tr>
                    <td class="p-2" style="min-width:220px; border:none;"></td>
                    <td class="p-2" style="min-width:170px; border:none;"></td>

                    <td colspan="2" class="text-center text-black font-bold uppercase pt-2"
                        style="background-color:#f4c7c3;font-size:18px;font-family:'Roboto Condensed';font-weight:700;color:#000;">
                        <div style="line-height:18px;">PHASE-1 ALLOCATION</div>
                        <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>
                    </td>

                    <td colspan="4" class="text-center font-bold uppercase pt-2"
                        style="background-color:#fde0e0; font-size:18px;font-family:'Roboto Condensed'; font-weight:700;color:#000;">
                        <div style="line-height:18px;">Financial Progress</div>
                        <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>
                    </td>
                </tr>

                {{-- ROW 2: Column headers --}}
                <tr>
                    <td class="p-3 font-bold uppercase pt-8" style="vertical-align:center;font-weight:700;color:#000;font-size:18px;">
                        Activities:
                        <svg width="261%" height="4" style="display:block; margin-top:0;">
                            <line x1="0" y1="2" x2="100%" y2="2" stroke="#434343" stroke-width="1"/>
                        </svg>
                    </td>

                    <td class="text-center font-bold" style="vertical-align:top; padding-left:220px; font-weight:700;color:#000;font-size:16px;line-height:18px;">
                        Approving<br>Authority/Admin<br>Approval
                    </td>

                    <td class="p-2 text-center font-bold uppercase pt-8" style="background-color:#f4c7c3; vertical-align:center; min-width:100px;font-weight:700;color:#000;font-size:18px;">USD Million</td>
                    <td class="p-2 text-center font-bold uppercase pt-8" style="background-color:#f4c7c3; vertical-align:center; min-width:100px;font-weight:700;color:#000;font-size:18px;">PKR Million</td>
                    <td class="p-2 text-center font-bold uppercase pt-6" style="background-color:#fde0e0; vertical-align:center; min-width:110px;font-weight:700;color:#000;font-size:18px;line-height:20px;">Allocation<br>2025-2026</td>
                    <td class="p-2 text-center font-bold uppercase pt-6" style="background-color:#fde0e0; vertical-align:center; min-width:100px;font-weight:700;color:#000;font-size:18px;line-height:20px;">Released<br>2025-2026</td>
                    <td class="p-2 text-center font-bold uppercase pt-6" style="background-color:#fde0e0; vertical-align:center; min-width:110px;font-weight:700;color:#000;font-size:18px;line-height:20px;">Utilization<br>As Per<br>Release</td>
                    <td class="p-2 text-center font-bold uppercase pt-6" style="background-color:#fde0e0; vertical-align:center; min-width:100px;font-weight:700;color:#000;font-size:18px;line-height:20px;">Utilization %</td>
                </tr>
            </thead>

            <tbody>
                @forelse($financials as $component)

                {{-- COMPONENT HEADING --}}
                <tr>
                    <td colspan="2" class="p-3 font-bold" style="vertical-align:top; padding-top:2px;">
                        <div style="margin-top:-14px; font-size:20px; font-weight:500; color:#000; line-height:18px;">
                            <span style="font-weight:800;font-size:20px;">COMPONENT {{ $component->serial_no }}:</span> {{ strtoupper($component->component_name) }}
                        </div>
                        <svg width="400%" height="4" style="display:block; margin-top:2px;">
                            <line x1="0" y1="2" x2="100%" y2="2" stroke="#434343" stroke-width="1"/>
                        </svg>
                    </td>
                    <td class="p-2" style="background-color:#f4c7c3;"></td>
                    <td class="p-2" style="background-color:#f4c7c3;"></td>
                    <td class="p-2" style="background-color:#fde0e0;"></td>
                    <td class="p-2" style="background-color:#fde0e0;"></td>
                    <td class="p-2" style="background-color:#fde0e0;"></td>
                    <td class="p-2" style="background-color:#fde0e0;"></td>
                </tr>

                {{-- Component Approval Rows --}}
                @foreach($component->approvals as $index => $approval)
                <tr>
                    <td class="p-2 td-activity" style="vertical-align:top;"></td>
                    <td class="p-2 text-center" style="padding-left:90px;color:#000;font-size:16px; vertical-align:top;padding-top:0 !important;">
                        {{ $approval->approval_authority }}
                    </td>

                    {{-- USD --}}
                    <td class="p-2 text-center" style="background-color:#f4c7c3;">
                        <span style="display:inline-block;width:100%;height:30px;background-color:#434343;text-align:center;line-height:25px;color:white;font-size:16px;font-weight:bold;padding-top:3px;">
                            ${{ formatNumberShort($approval->usd_million,0) }}
                        </span>
                    </td>

                    {{-- PKR --}}
                    <td class="p-2 text-center" style="background-color:#f4c7c3;">
                        <span style="display:inline-block;width:100%;height:30px;background-color:#434343;text-align:center;line-height:25px;color:white;font-size:16px;font-weight:bold;padding-top:3px;">
                            {{ formatNumberShort($approval->pkr_million,0) }}
                        </span>
                    </td>

                    {{-- Allocation --}}
                    <td class="p-2 text-center" style="background-color:#fde0e0;">
                        {{ $index == 0 ? number_format($component->budget,2) : '' }}
                    </td>

                    {{-- Released --}}
                    <td class="p-2 text-center" style="background-color:#fde0e0;">
                        {{ $index == 0 ? number_format($component->releases,2) : '' }}
                    </td>

                    {{-- Utilization --}}
                    <td class="p-2 text-center" style="background-color:#fde0e0;">
                        {{ $index == 0 ? number_format($component->total_expense,2) : '' }}
                    </td>

                    {{-- Utilization % --}}
                    <td class="p-2 text-center" style="background-color:#fde0e0;">
                        @if($index == 0 && $component->utilization)
                        <span style="font-weight:700; color: {{ $component->utilization > 50 ? '#81BF84' : '#e53e3e' }};">
                            {{ number_format($component->utilization, 2) }}%
                        </span>
                        @endif
                    </td>
                </tr>
                @endforeach

                @empty
                <tr>
                    <td colspan="8" style="text-align:center;padding:20px;">No Financial Data Found</td>
                </tr>
                @endforelse
            </tbody>
        </table>

        <svg width="400%" height="4" style="display:block; margin-top:2px;">
            <line x1="0" y1="2" x2="100%" y2="2" stroke="#434343" stroke-width="1"/>
        </svg>
    </div>
</div>

@endsection