@once
@push('stylesheets')
<style>
    .pci-form-wrapper .pci-table.pci-pc-iv-physical-targets-table thead th,
    .pci-form-wrapper .pci-table.pci-pc-iv-itemwise-expenditure-table thead th,
    .pci-form-wrapper .pci-table.pci-pc-iv-climate-expenditures-table thead th {
        text-transform: uppercase;
        letter-spacing: 0.04em;
        font-size: 11px;
    }
    .pci-pc-iv-physical-targets-table .pci-pc-iv-actual-col,
    .pci-pc-iv-itemwise-expenditure-table .pci-pc-iv-actual-col,
    .pci-pc-iv-climate-expenditures-table .pci-pc-iv-actual-col {
        color: #c9a227;
    }
    .pci-pc-iv-climate-expenditures-table thead .pci-pc-iv-pci-approved-group,
    .pci-pc-iv-itemwise-expenditure-table thead .pci-pc-iv-pci-approved-group {
        background: #1e7e34;
        color: #fff;
    }
    .pci-pc-iv-physical-targets-table td.pci-pc-iv-qty-cell,
    .pci-pc-iv-itemwise-expenditure-table td.pci-pc-iv-amt-cell,
    .pci-pc-iv-climate-expenditures-table td.pci-pc-iv-amt-cell {
        text-align: center;
    }
</style>
@endpush
@endonce

@php
    $pciIvEdit = canField('pc-forms', 'project_brief_descriptions', 'edit');
    $pciIvDisplayMillion = fn (mixed $raw): string => app(\App\Services\PC\PcFormService::class)->formatPcIiiMillionForFormDisplay($raw, $pciIvEdit);
    $pciIvSrc = $pcForm ?? null;
    $pciIvFill = $pciCrudDraftFill ?? [];

    $pciIvPhysical = old('pc_iv_structural_physical_targets');
    if (! is_array($pciIvPhysical)) {
        $pciIvPhysical = $pciIvSrc?->pc_iv_structural_physical_targets ?? ($pciIvFill['pc_iv_structural_physical_targets'] ?? []);
        if (! is_array($pciIvPhysical)) {
            $pciIvPhysical = [];
        }
    }
    $pciIvPhysicalRows = is_array($pciIvPhysical['rows'] ?? null) ? array_values($pciIvPhysical['rows']) : [];

    $pciIvItemwise = old('pc_iv_itemwise_expenditure');
    if (! is_array($pciIvItemwise)) {
        $pciIvItemwise = $pciIvSrc?->pc_iv_itemwise_expenditure ?? ($pciIvFill['pc_iv_itemwise_expenditure'] ?? []);
        if (! is_array($pciIvItemwise)) {
            $pciIvItemwise = [];
        }
    }
    $pciIvItemwiseRows = is_array($pciIvItemwise['rows'] ?? null) ? array_values($pciIvItemwise['rows']) : [];
    if ($pciIvItemwiseRows === []) {
        $pciIvItemwiseRows = [[
            'description' => '',
            'pci_total' => '',
            'pci_local' => '',
            'pci_fec' => '',
            'actual_total' => '',
            'actual_local' => '',
            'actual_fec' => '',
        ]];
    }

    $pciIvClimate = old('pc_iv_climate_co_benefit_expenditures');
    if (! is_array($pciIvClimate)) {
        $pciIvClimate = $pciIvSrc?->pc_iv_climate_co_benefit_expenditures ?? ($pciIvFill['pc_iv_climate_co_benefit_expenditures'] ?? []);
        if (! is_array($pciIvClimate)) {
            $pciIvClimate = [];
        }
    }
    $pciIvClimateAdapt = is_array($pciIvClimate['adaptation'] ?? null) ? $pciIvClimate['adaptation'] : [];
    $pciIvClimateMit = is_array($pciIvClimate['mitigation'] ?? null) ? $pciIvClimate['mitigation'] : [];

    $pciIvDisplayQty = fn (mixed $raw): string => app(\App\Services\PC\PcFormService::class)->formatPcIiiQtyForFormDisplay($raw, $pciIvEdit);

    $pciIvPhysicalClimateWizardStep = (int) ($pciIvPhysicalClimateWizardStep ?? 8);
    $pciIvPhysicalClimateStepTitle = $pciIvPhysicalClimateStepTitle ?? '8. Physical Targets & Item-wise Planned & Actual Expenditure';
@endphp

<div class="pci-page" data-page="{{ $pciIvPhysicalClimateWizardStep }}" data-pci-nav-key="pc-iv-physical-climate" data-pci-step-title="{{ $pciIvPhysicalClimateStepTitle }}" data-pci-step-theme="4" data-pci-step-icon="leaf"
    id="pci-pc-iv-physical-climate-section"
    data-pci-iv-edit="{{ $pciIvEdit ? '1' : '0' }}"
    data-pci-iv-stored-physical="{{ e(json_encode($pciIvPhysicalRows)) }}"
    data-pci-iv-stored-itemwise="{{ e(json_encode($pciIvItemwiseRows)) }}"
    data-pci-iv-stored-climate="{{ e(json_encode($pciIvClimate)) }}">
    <div class="pci-gi-wrap">
        <button type="button" class="pci-gi-bar pci-gi-bar-primary" data-toggle="collapse" data-target="#pci-pc-iv-physical-climate-body" aria-expanded="true" id="pci-pc-iv-physical-climate-toggle">
            <span class="pci-gi-bar-title">Physical Targets &amp; Item-wise Planned &amp; Actual Expenditure</span>
            <span class="pci-gi-round-chevron" aria-hidden="true"><i class="fas fa-chevron-down"></i></span>
        </button>
        <div id="pci-pc-iv-physical-climate-body" class="collapse show">
            <div class="pci-gi-mint">
                <div class="pci-gi-divider"></div>

                {{-- 12. Physical Targets and Achievements --}}
                <div class="pci-gi-wrap mb-3">
                    <button type="button" class="pci-gi-bar pci-gi-bar-secondary" data-toggle="collapse" data-target="#pci-pc-iv-physical-targets-body" aria-expanded="true" id="pci-pc-iv-physical-targets-toggle">
                        <span class="pci-gi-bar-title pci-gi-bar-title-plain">12. Physical Targets and Achievements</span>
                        <span class="pci-gi-round-chevron" aria-hidden="true"><i class="fas fa-chevron-down"></i></span>
                    </button>
                    <div id="pci-pc-iv-physical-targets-body" class="collapse show">
                        <div class="pci-gi-mint">
                            @if($pciIvEdit)
                            <div class="d-flex justify-content-end mb-2">
                                <button type="button" class="btn btn-sm btn-primary" id="pci-pc-iv-physical-add">+ Add Row</button>
                            </div>
                            @endif
                            <div class="table-responsive">
                                <table class="pci-table table table-bordered table-sm mb-0 pci-pc-iv-physical-targets-table" id="pci-pc-iv-physical-targets-table">
                                    <thead>
                                        <tr>
                                            <th style="width:3rem;">S.No</th>
                                            <th class="text-left" style="min-width:16rem;">Items (as per PC-I)</th>
                                            <th class="text-left" style="width:7rem;">Unit</th>
                                            <th style="width:8rem;">Quantity</th>
                                            <th class="pci-pc-iv-actual-col" style="width:8rem;">Actual Achievements</th>
                                            @if($pciIvEdit)<th style="width:3rem;"></th>@endif
                                        </tr>
                                    </thead>
                                    <tbody id="pci-pc-iv-physical-targets-tbody">
                                        @if(count($pciIvPhysicalRows) > 0)
                                            @foreach($pciIvPhysicalRows as $physIdx => $physRow)
                                            @php
                                                $physRow = is_array($physRow) ? $physRow : [];
                                            @endphp
                                            <tr class="pci-pc-iv-physical-row" data-pc-iv-physical-row="{{ $physIdx }}">
                                                <td class="text-center align-middle"><span class="pci-pc-iv-physical-sno font-weight-bold">{{ $physIdx + 1 }}</span></td>
                                                <td><input type="text" name="pc_iv_structural_physical_targets[rows][{{ $physIdx }}][description]" value="{{ $physRow['description'] ?? '' }}" class="form-control form-control-sm pci-pc-iv-physical-desc{{ !$pciIvEdit ? ' pci-readonly' : '' }}" placeholder="Item as per PC-I" {{ !$pciIvEdit ? 'readonly' : '' }} /></td>
                                                <td><input type="text" name="pc_iv_structural_physical_targets[rows][{{ $physIdx }}][unit_type]" value="{{ $physRow['unit_type'] ?? '' }}" class="form-control form-control-sm pci-pc-iv-physical-unit{{ !$pciIvEdit ? ' pci-readonly' : '' }}" placeholder="Unit" {{ !$pciIvEdit ? 'readonly' : '' }} /></td>
                                                <td class="pci-pc-iv-qty-cell"><input type="text" name="pc_iv_structural_physical_targets[rows][{{ $physIdx }}][pci_target_qty]" value="{{ $pciIvDisplayQty($physRow['pci_target_qty'] ?? '') }}" class="form-control form-control-sm pci-pc-iv-physical-target pci-pc-iii-qty text-center{{ !$pciIvEdit ? ' pci-readonly' : '' }}" placeholder="0" inputmode="numeric" pattern="[0-9]*" {{ !$pciIvEdit ? 'readonly' : '' }} /></td>
                                                <td class="pci-pc-iv-qty-cell"><input type="text" name="pc_iv_structural_physical_targets[rows][{{ $physIdx }}][actual_verified_qty]" value="{{ $pciIvDisplayQty($physRow['actual_verified_qty'] ?? '') }}" class="form-control form-control-sm pci-pc-iv-physical-actual pci-pc-iii-qty text-center pci-pc-iv-actual-col{{ !$pciIvEdit ? ' pci-readonly' : '' }}" placeholder="0" inputmode="numeric" pattern="[0-9]*" {{ !$pciIvEdit ? 'readonly' : '' }} /></td>
                                                @if($pciIvEdit)
                                                <td class="text-center"><button type="button" class="btn btn-link text-danger btn-sm pci-pc-iv-physical-remove" title="Remove row"><i class="fas fa-trash-alt"></i></button></td>
                                                @endif
                                            </tr>
                                            @endforeach
                                        @else
                                        <tr id="pci-pc-iv-physical-targets-empty">
                                            <td colspan="{{ $pciIvEdit ? 6 : 5 }}" class="text-center text-muted small py-3">Select a scheme to load physical target rows from CSR Cost Estimate schedule lines, or add rows manually.</td>
                                        </tr>
                                        @endif
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- 13. Item-wise Planned & Actual Expenditure --}}
                <div class="pci-gi-wrap mb-3">
                    <button type="button" class="pci-gi-bar pci-gi-bar-secondary" data-toggle="collapse" data-target="#pci-pc-iv-itemwise-expenditure-body" aria-expanded="true" id="pci-pc-iv-itemwise-expenditure-toggle">
                        <span class="pci-gi-bar-title pci-gi-bar-title-plain">13. Item-wise Planned &amp; Actual Expenditure (Rs. Million)</span>
                        <span class="pci-gi-round-chevron" aria-hidden="true"><i class="fas fa-chevron-down"></i></span>
                    </button>
                    <div id="pci-pc-iv-itemwise-expenditure-body" class="collapse show">
                        <div class="pci-gi-mint">
                            @if($pciIvEdit)
                            <div class="d-flex justify-content-end mb-2">
                                <button type="button" class="btn btn-sm btn-primary" id="pci-pc-iv-itemwise-add">+ Add Row</button>
                            </div>
                            @endif
                            <div class="table-responsive">
                                <table class="pci-table table table-bordered table-sm mb-0 pci-pc-iv-itemwise-expenditure-table" id="pci-pc-iv-itemwise-expenditure-table">
                                    <thead>
                                        <tr>
                                            <th rowspan="2" class="align-middle" style="width:3rem;">S.No</th>
                                            <th rowspan="2" class="align-middle text-left" style="min-width:14rem;">Items (As per PC-I)</th>
                                            <th colspan="3" class="text-center pci-pc-iv-pci-approved-group">PC-I Estimates</th>
                                            <th colspan="3" class="text-center">Actual Expenditure</th>
                                            @if($pciIvEdit)<th rowspan="2" style="width:3rem;"></th>@endif
                                        </tr>
                                        <tr>
                                            <th class="text-center">Total</th>
                                            <th class="text-center">Local</th>
                                            <th class="text-center">FEC</th>
                                            <th class="text-center pci-pc-iv-actual-col">Total</th>
                                            <th class="text-center pci-pc-iv-actual-col">Local</th>
                                            <th class="text-center pci-pc-iv-actual-col">FEC</th>
                                        </tr>
                                    </thead>
                                    <tbody id="pci-pc-iv-itemwise-expenditure-tbody">
                                        @foreach($pciIvItemwiseRows as $iwIdx => $iwRow)
                                        @php $iwRow = is_array($iwRow) ? $iwRow : []; @endphp
                                        <tr class="pci-pc-iv-itemwise-row" data-pc-iv-itemwise-row="{{ $iwIdx }}">
                                            <td class="text-center align-middle"><span class="pci-pc-iv-itemwise-sno font-weight-bold">{{ $iwIdx + 1 }}</span></td>
                                            <td><input type="text" name="pc_iv_itemwise_expenditure[rows][{{ $iwIdx }}][description]" value="{{ $iwRow['description'] ?? '' }}" class="form-control form-control-sm{{ !$pciIvEdit ? ' pci-readonly' : '' }}" placeholder="Item as per PC-I" {{ !$pciIvEdit ? 'readonly' : '' }} /></td>
                                            <td class="pci-pc-iv-amt-cell"><input type="text" name="pc_iv_itemwise_expenditure[rows][{{ $iwIdx }}][pci_total]" value="{{ $pciIvDisplayMillion($iwRow['pci_total'] ?? '') }}" class="form-control form-control-sm pci-pc-iii-num text-right{{ !$pciIvEdit ? ' pci-readonly' : '' }}" placeholder="0.00" inputmode="decimal" {{ !$pciIvEdit ? 'readonly' : '' }} /></td>
                                            <td class="pci-pc-iv-amt-cell"><input type="text" name="pc_iv_itemwise_expenditure[rows][{{ $iwIdx }}][pci_local]" value="{{ $pciIvDisplayMillion($iwRow['pci_local'] ?? '') }}" class="form-control form-control-sm pci-pc-iii-num text-right{{ !$pciIvEdit ? ' pci-readonly' : '' }}" placeholder="0.00" inputmode="decimal" {{ !$pciIvEdit ? 'readonly' : '' }} /></td>
                                            <td class="pci-pc-iv-amt-cell"><input type="text" name="pc_iv_itemwise_expenditure[rows][{{ $iwIdx }}][pci_fec]" value="{{ $pciIvDisplayMillion($iwRow['pci_fec'] ?? '') }}" class="form-control form-control-sm pci-pc-iii-num text-right{{ !$pciIvEdit ? ' pci-readonly' : '' }}" placeholder="0.00" inputmode="decimal" {{ !$pciIvEdit ? 'readonly' : '' }} /></td>
                                            <td class="pci-pc-iv-amt-cell"><input type="text" name="pc_iv_itemwise_expenditure[rows][{{ $iwIdx }}][actual_total]" value="{{ $pciIvDisplayMillion($iwRow['actual_total'] ?? '') }}" class="form-control form-control-sm pci-pc-iii-num text-right pci-pc-iv-actual-col{{ !$pciIvEdit ? ' pci-readonly' : '' }}" placeholder="0.00" inputmode="decimal" {{ !$pciIvEdit ? 'readonly' : '' }} /></td>
                                            <td class="pci-pc-iv-amt-cell"><input type="text" name="pc_iv_itemwise_expenditure[rows][{{ $iwIdx }}][actual_local]" value="{{ $pciIvDisplayMillion($iwRow['actual_local'] ?? '') }}" class="form-control form-control-sm pci-pc-iii-num text-right pci-pc-iv-actual-col{{ !$pciIvEdit ? ' pci-readonly' : '' }}" placeholder="0.00" inputmode="decimal" {{ !$pciIvEdit ? 'readonly' : '' }} /></td>
                                            <td class="pci-pc-iv-amt-cell"><input type="text" name="pc_iv_itemwise_expenditure[rows][{{ $iwIdx }}][actual_fec]" value="{{ $pciIvDisplayMillion($iwRow['actual_fec'] ?? '') }}" class="form-control form-control-sm pci-pc-iii-num text-right pci-pc-iv-actual-col{{ !$pciIvEdit ? ' pci-readonly' : '' }}" placeholder="0.00" inputmode="decimal" {{ !$pciIvEdit ? 'readonly' : '' }} /></td>
                                            @if($pciIvEdit)
                                            <td class="text-center"><button type="button" class="btn btn-link text-danger btn-sm pci-pc-iv-itemwise-remove" title="Remove row"><i class="fas fa-trash-alt"></i></button></td>
                                            @endif
                                        </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                            <p class="text-muted small mt-2 mb-0">Climate adaptation / mitigation capital expenditures (extra detail) continue in the table below.</p>
                        </div>
                    </div>
                </div>

                {{-- Climate co-benefit capital expenditures (extra; aligns with item 13 climate rows) --}}
                <div class="pci-gi-wrap mb-0">
                    <button type="button" class="pci-gi-bar pci-gi-bar-secondary" data-toggle="collapse" data-target="#pci-pc-iv-climate-expenditures-body" aria-expanded="true" id="pci-pc-iv-climate-expenditures-toggle">
                        <span class="pci-gi-bar-title pci-gi-bar-title-plain">13. Adaptation / Mitigation Capital Expenditures (Rs. Million)</span>
                        <span class="pci-gi-round-chevron" aria-hidden="true"><i class="fas fa-chevron-down"></i></span>
                    </button>
                    <div id="pci-pc-iv-climate-expenditures-body" class="collapse show">
                        <div class="pci-gi-mint">
                            <p class="text-muted small mb-2">Values scaled in PKR millions (2 decimal places).</p>
                            <div class="table-responsive">
                                <table class="pci-table table table-bordered table-sm mb-0 pci-pc-iv-climate-expenditures-table" id="pci-pc-iv-climate-expenditures-table">
                                    <thead>
                                        <tr>
                                            <th rowspan="2" class="align-middle text-left" style="min-width:14rem;">Items (As per PC-I)</th>
                                            <th colspan="3" class="text-center pci-pc-iv-pci-approved-group">PC-I Estimates</th>
                                            <th colspan="3" class="text-center">Actual Expenditure</th>
                                        </tr>
                                        <tr>
                                            <th class="text-center">Local</th>
                                            <th class="text-center">FEC</th>
                                            <th class="text-center font-weight-bold">Total</th>
                                            <th class="text-center">Local</th>
                                            <th class="text-center">FEC</th>
                                            <th class="text-center pci-pc-iv-actual-col font-weight-bold">Total</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach([
                                            'adaptation' => 'Adaptation',
                                            'mitigation' => 'Mitigation',
                                        ] as $clKey => $clLabel)
                                        @php
                                            $clSaved = $clKey === 'adaptation' ? $pciIvClimateAdapt : $pciIvClimateMit;
                                        @endphp
                                        <tr data-pc-iv-climate-row="{{ $clKey }}">
                                            <th class="text-left align-middle">{{ $clLabel }}</th>
                                            <td class="pci-pc-iv-amt-cell"><input type="text" name="pc_iv_climate_co_benefit_expenditures[{{ $clKey }}][local_component]" id="pci-pc-iv-climate-{{ $clKey }}-base-local" value="{{ $pciIvDisplayMillion($clSaved['local_component'] ?? '') }}" class="form-control form-control-sm pci-pc-iii-num pci-pc-iv-climate-baseline text-right {{ !$pciIvEdit ? 'pci-readonly' : '' }}" placeholder="0.00" inputmode="decimal" data-pc-iv-climate-base="{{ $clKey }}" data-pc-iv-climate-base-kind="local" {{ !$pciIvEdit ? 'readonly' : '' }} /></td>
                                            <td class="pci-pc-iv-amt-cell"><input type="text" name="pc_iv_climate_co_benefit_expenditures[{{ $clKey }}][foreign_exchange]" id="pci-pc-iv-climate-{{ $clKey }}-base-fe" value="{{ $pciIvDisplayMillion($clSaved['foreign_exchange'] ?? '') }}" class="form-control form-control-sm pci-pc-iii-num pci-pc-iv-climate-baseline text-right {{ !$pciIvEdit ? 'pci-readonly' : '' }}" placeholder="0.00" inputmode="decimal" data-pc-iv-climate-base="{{ $clKey }}" data-pc-iv-climate-base-kind="fe" {{ !$pciIvEdit ? 'readonly' : '' }} /></td>
                                            <td class="pci-pc-iv-amt-cell"><input type="text" id="pci-pc-iv-climate-{{ $clKey }}-base-total" class="form-control form-control-sm pci-readonly text-right font-weight-bold" readonly placeholder="0.00" tabindex="-1" /></td>
                                            <td class="pci-pc-iv-amt-cell"><input type="text" name="pc_iv_climate_co_benefit_expenditures[{{ $clKey }}][local_incurred]" value="{{ $pciIvDisplayMillion($clSaved['local_incurred'] ?? '') }}" class="form-control form-control-sm pci-pc-iii-num pci-pc-iv-climate-actual text-right {{ !$pciIvEdit ? 'pci-readonly' : '' }}" placeholder="0.0000" inputmode="decimal" data-pc-iv-climate-row="{{ $clKey }}" data-pc-iv-climate-kind="local" {{ !$pciIvEdit ? 'readonly' : '' }} /></td>
                                            <td class="pci-pc-iv-amt-cell"><input type="text" name="pc_iv_climate_co_benefit_expenditures[{{ $clKey }}][foreign_incurred]" value="{{ $pciIvDisplayMillion($clSaved['foreign_incurred'] ?? '') }}" class="form-control form-control-sm pci-pc-iii-num pci-pc-iv-climate-actual text-right {{ !$pciIvEdit ? 'pci-readonly' : '' }}" placeholder="0.0000" inputmode="decimal" data-pc-iv-climate-row="{{ $clKey }}" data-pc-iv-climate-kind="foreign" {{ !$pciIvEdit ? 'readonly' : '' }} /></td>
                                            <td class="pci-pc-iv-amt-cell"><input type="text" id="pci-pc-iv-climate-{{ $clKey }}-actual-total" class="form-control form-control-sm pci-readonly text-right font-weight-bold pci-pc-iv-actual-col" readonly placeholder="0.00" tabindex="-1" /></td>
                                        </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>