@once
@push('stylesheets')
<style>
    .pci-form-wrapper .pci-table.pci-pc-iii-b-output-table thead th {
        text-transform: uppercase;
        letter-spacing: 0.04em;
        font-size: 11px;
    }
    .pci-pc-iii-b-output-table td.pci-pc-iii-b-output-num-cell { text-align: center; }
    .pci-pc-iii-b-output-table .pci-pc-iii-b-output-num { text-align: center; }
</style>
@endpush
@endonce

@php
    $pciIiiBOutputDisplayQty = function (mixed $raw) use ($pciIiiBEdit): string {
        if ($raw === null || $raw === '') {
            return '';
        }
        $digits = preg_replace('/\D+/', '', (string) $raw) ?? '';
        if ($digits === '') {
            return '';
        }
        if ($pciIiiBEdit) {
            return $digits;
        }

        return number_format((int) $digits, 0, '.', ',');
    };
    $pciIiiBOutputDefaultRow = [
        'description' => '',
        'unit' => '',
        'baseline' => '',
        'annual_target' => '',
        'achieved_cumulative' => '',
        'achieved_month' => '',
    ];
    $pciIiiBOutputNormalizeRow = function ($row) {
        if (! is_array($row)) {
            return [
                'description' => '',
                'unit' => '',
                'baseline' => '',
                'annual_target' => '',
                'achieved_cumulative' => '',
                'achieved_month' => '',
            ];
        }

        return [
            'description' => (string) ($row['description'] ?? $row['indicator'] ?? ''),
            'unit' => (string) ($row['unit'] ?? ''),
            'baseline' => $row['baseline'] ?? '',
            'annual_target' => $row['annual_target'] ?? $row['target'] ?? '',
            'achieved_cumulative' => $row['achieved_cumulative'] ?? '',
            'achieved_month' => $row['achieved_month'] ?? '',
        ];
    };
    $pciIiiBOutputRows = array_map($pciIiiBOutputNormalizeRow, $pciIiiBOutputRows);
    if (count($pciIiiBOutputRows) < 1) {
        $pciIiiBOutputRows = [$pciIiiBOutputDefaultRow];
    }
@endphp

{{-- Step 4: Output Indicators --}}
<div class="pci-page" data-page="{{ $pciIiiBBase + 4 }}" data-pci-nav-key="pc-iii-b-output" data-pci-step-title="5. Output Indicators" data-pci-step-theme="4" data-pci-step-icon="bullseye">
    <div class="pci-gi-wrap">
        <button type="button" class="pci-gi-bar pci-gi-bar-primary" data-toggle="collapse" data-target="#pci-pc-iii-b-output-body" aria-expanded="true" id="pci-pc-iii-b-output-toggle">
            <span class="pci-gi-bar-title">Output Indicators</span>
            <span class="pci-gi-round-chevron" aria-hidden="true"><i class="fas fa-chevron-down"></i></span>
        </button>
        <div id="pci-pc-iii-b-output-body" class="collapse show">
            <div class="pci-gi-mint">
                <p class="text-muted small mb-2">Detail the progress on output indicators during this month.</p>
                @if($pciIiiBEdit)
                <div class="d-flex justify-content-end mb-2">
                    <button type="button" class="btn btn-sm btn-primary" id="pci-iii-b-output-add">+ Add Indicator</button>
                </div>
                @endif
                <div class="table-responsive">
                    <table class="pci-table table table-bordered mb-0 pci-pc-iii-b-output-table">
                        <thead>
                            <tr>
                                <th style="width:3rem;">S.No.</th>
                                <th class="text-left" style="min-width:14rem;">Output Indicator Description</th>
                                <th class="text-left" style="width:6rem;">Unit</th>
                                <th style="width:6rem;">Baseline</th>
                                <th style="width:7rem;">Annual Target</th>
                                <th style="width:7rem;">Achieved (Cumul.)</th>
                                <th style="width:7rem;">Achieved (Month)</th>
                                @if($pciIiiBEdit)<th style="width:3rem;"></th>@endif
                            </tr>
                        </thead>
                        <tbody id="pci-iii-b-output-tbody">
                            @foreach($pciIiiBOutputRows as $oi => $oRow)
                            <tr class="pci-iii-b-output-row">
                                <td class="text-center align-middle"><span class="pci-iii-b-output-sno font-weight-bold">{{ $oi + 1 }}</span></td>
                                <td>
                                    <input type="text" name="pc_iii_b_output_indicators[{{ $oi }}][description]" value="{{ $oRow['description'] ?? '' }}" class="form-control form-control-sm {{ !$pciIiiBEdit ? 'pci-readonly' : '' }}" placeholder="e.g. Length of road constructed" {{ !$pciIiiBEdit ? 'readonly' : '' }} />
                                </td>
                                <td>
                                    <input type="text" name="pc_iii_b_output_indicators[{{ $oi }}][unit]" value="{{ $oRow['unit'] ?? '' }}" class="form-control form-control-sm {{ !$pciIiiBEdit ? 'pci-readonly' : '' }}" placeholder="Km" {{ !$pciIiiBEdit ? 'readonly' : '' }} />
                                </td>
                                <td class="pci-pc-iii-b-output-num-cell">
                                    <input type="text" name="pc_iii_b_output_indicators[{{ $oi }}][baseline]" value="{{ $pciIiiBOutputDisplayQty($oRow['baseline'] ?? '') }}" class="form-control form-control-sm pci-pc-iii-b-output-num pci-pc-iii-qty {{ !$pciIiiBEdit ? 'pci-readonly' : '' }}" placeholder="0" inputmode="numeric" pattern="[0-9]*" {{ !$pciIiiBEdit ? 'readonly' : '' }} />
                                </td>
                                <td class="pci-pc-iii-b-output-num-cell">
                                    <input type="text" name="pc_iii_b_output_indicators[{{ $oi }}][annual_target]" value="{{ $pciIiiBOutputDisplayQty($oRow['annual_target'] ?? '') }}" class="form-control form-control-sm pci-pc-iii-b-output-num pci-pc-iii-qty {{ !$pciIiiBEdit ? 'pci-readonly' : '' }}" placeholder="—" inputmode="numeric" pattern="[0-9]*" {{ !$pciIiiBEdit ? 'readonly' : '' }} />
                                </td>
                                <td class="pci-pc-iii-b-output-num-cell">
                                    <input type="text" name="pc_iii_b_output_indicators[{{ $oi }}][achieved_cumulative]" value="{{ $pciIiiBOutputDisplayQty($oRow['achieved_cumulative'] ?? '') }}" class="form-control form-control-sm pci-pc-iii-b-output-num pci-pc-iii-qty {{ !$pciIiiBEdit ? 'pci-readonly' : '' }}" placeholder="—" inputmode="numeric" pattern="[0-9]*" {{ !$pciIiiBEdit ? 'readonly' : '' }} />
                                </td>
                                <td class="pci-pc-iii-b-output-num-cell">
                                    <input type="text" name="pc_iii_b_output_indicators[{{ $oi }}][achieved_month]" value="{{ $pciIiiBOutputDisplayQty($oRow['achieved_month'] ?? '') }}" class="form-control form-control-sm pci-pc-iii-b-output-num pci-pc-iii-qty {{ !$pciIiiBEdit ? 'pci-readonly' : '' }}" placeholder="—" inputmode="numeric" pattern="[0-9]*" {{ !$pciIiiBEdit ? 'readonly' : '' }} />
                                </td>
                                @if($pciIiiBEdit)
                                <td class="text-center"><button type="button" class="btn btn-link text-danger btn-sm pci-iii-b-output-remove" title="Remove row"><i class="fas fa-trash-alt"></i></button></td>
                                @endif
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>