@extends('layouts.app')

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

<style>
    .number-cell-box {
        background-color: #F0F4C3;
        border-radius: 5px;
        border: 2px solid rgb(0, 172, 193);
        padding: 4px 0;
        font-family: Arial, sans-serif;
        font-size: 18px;
        outline: none !important;
        box-shadow: 0 4px 12px rgba(150, 217, 194, 0.7);
        display: block;
        width: 220px;
        height: 30px;

    }

    .number-cell-box2 {
        background-color: #F0F4C3;
        border-radius: 5px;
        border: 2px solid rgb(255, 179, 0);
        padding: 4px 0;
        font-family: Arial, sans-serif;
        font-size: 18px;
        outline: none !important;
        box-shadow: 0 4px 12px rgba(244, 227, 144, 0.8);
        display: block;
    }
</style>

@section('content')
<div class="w-full px-6 py-6">
    <div class="bg-white rounded-lg shadow-lg overflow-hidden pb-6">
        <div class="overflow-x-auto">
            <table class="min-w-full">
                <thead class="bg-gray-100">
                    <tr>
                        <th class="px-4 py-3 text-left w-1/3" style="font-size: 18px;font-family:Roboto Condensed;font-weight: bold;"></th>
                        <th class="border-b px-4 py-3 text-left" style="background-color: #F0F4C3;font-size: 18px;font-family:Roboto Condensed;"></th>
                        <th class="border-b px-4 py-3 text-center" style="background-color: #F0F4C3;font-size: 22px;font-family:Roboto Condensed;font-weight:bold;padding-bottom: 2px;">RESULTS</th>
                        <th class="border-b px-4 py-3 text-left" style="background-color: #F0F4C3;font-size: 18px;font-family:Roboto Condensed;"></th>
                    </tr>
                </thead>
                <thead class="bg-gray-100">
                    <tr>
                        <th class="border-b px-4 py-3 text-left w-1/3" style="font-size: 18px;font-family:Roboto Condensed; font-weight: bold;padding-bottom: 2px; border-bottom-width: 2px; border-bottom-color: #9CA3AF; box-shadow: inset 0 -2px 4px rgba(0,0,0,0.08);">
                            INDICATORS:
                        </th>
                        <th class="border-b px-4 py-3 text-center" style="background-color: #F0F4C3;font-size: 18px;font-family:Roboto Condensed;padding-bottom: 2px; border-bottom-width: 2px; border-bottom-color: #9CA3AF; box-shadow: inset 0 -2px 4px rgba(0,0,0,0.08);">BASELINE</th>
                        <th class="border-b  px-4 py-3 text-center" style="background-color: #F0F4C3; font-size: 18px; font-family:Roboto Condensed;padding-bottom: 2px; border-bottom-width: 2px; border-bottom-color: #9CA3AF; box-shadow: inset 0 -2px 4px rgba(0,0,0,0.08);">TARGETS</th>
                        <th class="border-b px-4 py-3 text-center" style="background-color: #F0F4C3; font-size: 18px; font-family:Roboto Condensed;padding-bottom: 2px; border-bottom-width: 2px; border-bottom-color: #9CA3AF; box-shadow: inset 0 -2px 4px rgba(0,0,0,0.08);">ACHIEVEMENTS</th>
                    </tr>
                </thead>

                <tbody class="bg-gray-100">
                    @php $currentTitle = null; $toggleColor = true; @endphp

                    @foreach($rbmfs as $rbmf)
                    {{-- Display Title only once --}}
                    @if($currentTitle !== $rbmf->title)
                    <tr class="bg-gray-100">
                        <td class="border-b px-4 py-2 text-left w-1/3" style="font-size: 20px; color:black;font-family:Roboto Condensed;font-weight: bold;padding-bottom: 2px; border-bottom-width: 2px; border-bottom-color: #9CA3AF; box-shadow: inset 0 -2px 4px rgba(0,0,0,0.08);">
                            {{ $rbmf->title }}:
                        </td>
                        <td style="background-color: #F0F4C3; border-bottom-width: 2px; border-bottom-color: #9CA3AF;"></td>
                        <td style="background-color: #F0F4C3; border-bottom-width: 2px; border-bottom-color: #9CA3AF;"></td>
                        <td style="background-color: #F0F4C3; border-bottom-width: 2px; border-bottom-color: #9CA3AF;"></td>
                    </tr>
                    @php $currentTitle = $rbmf->title; $toggleColor = !$toggleColor; @endphp
                    @endif

                    {{-- Loop through Indicators --}}
                    @foreach($rbmf->indicators as $indicator)


                    <tr>
                        <td class="px-4 py-2 pl-8 text-right rbmfText">{{ $indicator->description }}</td>
                        <td class="px-4 py-2 text-center" style=" background-color: #F0F4C3;
        border-radius: 5px;
        border: 2px solid rgb(0, 172, 193);
        padding: 0px 0px;
        font-family: Arial, sans-serif;
        font-size: 18px;
        padding-right:10px;
        width: 240px;
        padding-left:10px;
        padding-top:12px;
        height: 22px;
        outline: none !important;
        box-shadow: 0 4px 12px rgba(150, 217, 194, 0.7); border: none;">
                            <div class="{{ $toggleColor ? 'number-cell-box2' : 'number-cell-box' }}">
                                {{ $indicator->baseline ?? 0 }}
                            </div>
                        </td>
                        <td class="px-4 py-2 text-center" style=" background-color: #F0F4C3;
        border-radius: 5px;
        border: 2px solid rgb(0, 172, 193);
        padding: 0px 0px;
        font-family: Arial, sans-serif;
        font-size: 18px;
        padding-right:10px;
        padding-top:12px;
        width: 240px;
        height: 32px;
        outline: none !important;
        box-shadow: 0 4px 12px rgba(150, 217, 194, 0.7); border: none;">
                            <div class="{{ $toggleColor ? 'number-cell-box2' : 'number-cell-box' }}">
                                {{ $indicator->targets ?? 0 }}
                            </div>
                        </td>
                        <td class="px-4 py-2 text-center" style=" background-color: #F0F4C3;
        border-radius: 5px;
        border: 2px solid rgb(0, 172, 193);
        padding: 0px 0px;
        font-family: Arial, sans-serif;
        font-size: 18px;
        width: 240px;
        height: 32px;
        padding-right:10px;
        padding-top:12px;
        outline: none !important;
        box-shadow: 0 4px 12px rgba(150, 217, 194, 0.7);; border: none;">
                            <div class="{{ $toggleColor ? 'number-cell-box2' : 'number-cell-box' }}">
                                {{ $indicator->achievements ?? 0 }}
                            </div>
                        </td>
                    </tr>
                    @endforeach
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>
</div>
@endsection