@php
    $pciIvEdit = canField('pc-forms', 'project_brief_descriptions', 'edit');
    $pciIvSrc = $pcForm ?? null;
    $pciIvFill = $pciCrudDraftFill ?? [];

    $pciIvOutlay = old('pc_iv_annual_outlay_expenditures');
    if (! is_array($pciIvOutlay)) {
        $pciIvOutlay = $pciIvSrc?->pc_iv_annual_outlay_expenditures ?? ($pciIvFill['pc_iv_annual_outlay_expenditures'] ?? []);
        if (! is_array($pciIvOutlay)) {
            $pciIvOutlay = [];
        }
    }
    $pciIvOutlayRows = is_array($pciIvOutlay['rows'] ?? null) ? array_values($pciIvOutlay['rows']) : [];

    $pciIvFinPhasingWizardStep = (int) ($pciIvFinancialPhasingWizardStep ?? 7);
    $pciIvFinPhasingStepTitle = $pciIvFinancialPhasingStepTitle ?? '7. Financial Phasing as per PC-I and Expenditure';
@endphp

<div class="pci-page" data-page="{{ $pciIvFinPhasingWizardStep }}" data-pci-nav-key="pc-iv-financial-phasing" data-pci-step-title="{{ $pciIvFinPhasingStepTitle }}" data-pci-step-theme="3" data-pci-step-icon="chart-line"
    id="pci-pc-iv-financial-phasing-section"
    data-pci-iv-edit="{{ $pciIvEdit ? '1' : '0' }}"
    data-pci-iv-stored-outlay="{{ e(json_encode($pciIvOutlayRows)) }}">
    <div class="pci-gi-wrap">
        <button type="button" class="pci-gi-bar pci-gi-bar-primary" data-toggle="collapse" data-target="#pci-pc-iv-financial-phasing-body" aria-expanded="true" id="pci-pc-iv-financial-phasing-toggle">
            <span class="pci-gi-bar-title">11. Financial Phasing as per PC-I and 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-financial-phasing-body" class="collapse show">
            <div class="pci-gi-mint">
                <div class="pci-gi-divider"></div>
                @if($pciIvEdit)
                <div class="d-flex justify-content-end mb-2">
                    <button type="button" class="btn btn-sm btn-primary" id="pci-pc-iv-fin-phasing-add">+ Add Year</button>
                </div>
                @endif
                <div class="table-responsive">
                    <table class="pci-table table table-bordered table-sm mb-0" id="pci-pc-iv-financial-phasing-table">
                        <thead>
                            <tr>
                                <th rowspan="2" class="align-middle text-left" style="min-width:7rem;">Fiscal Year Tracking</th>
                                <th colspan="2" class="text-center">PC-I Phasing Framework</th>
                                <th colspan="2" class="text-center">PSDP / ADP Allocations</th>
                                <th colspan="2" class="text-center">Year-Wise Releases</th>
                                <th colspan="2" class="text-center">Actual Expensed Outlays</th>
                                @if($pciIvEdit)<th rowspan="2" style="width:3rem;"></th>@endif
                            </tr>
                            <tr>
                                <th class="text-center">Total Cost</th>
                                <th class="text-center">FE / Grant</th>
                                <th class="text-center">Total Cost</th>
                                <th class="text-center">FE / Grant</th>
                                <th class="text-center">Total Cost</th>
                                <th class="text-center">FE / Grant</th>
                                <th class="text-center">Total Cost</th>
                                <th class="text-center">FE / Grant</th>
                            </tr>
                        </thead>
                        <tbody id="pci-pc-iv-fin-phasing-tbody">
                            <tr id="pci-pc-iv-fin-phasing-empty">
                                <td colspan="{{ $pciIvEdit ? 10 : 9 }}" class="text-center text-muted small py-3">Select a scheme to load fiscal year phasing rows, or click + Add Year.</td>
                            </tr>
                        </tbody>
                        <tfoot>
                            <tr id="pci-pc-iv-fin-phasing-totals" class="table-active font-weight-bold" style="display:none;">
                                <th class="text-left align-middle">Consolidated Total</th>
                                <td><input type="text" id="pci-pc-iv-fp-total-pci-cost" class="form-control form-control-sm pci-readonly text-right font-weight-bold" readonly placeholder="—" tabindex="-1" /></td>
                                <td><input type="text" id="pci-pc-iv-fp-total-pci-fe" class="form-control form-control-sm pci-readonly text-right font-weight-bold" readonly placeholder="—" tabindex="-1" /></td>
                                <td><input type="text" id="pci-pc-iv-fp-total-psdp-cost" class="form-control form-control-sm pci-readonly text-right font-weight-bold" readonly placeholder="—" tabindex="-1" /></td>
                                <td><input type="text" id="pci-pc-iv-fp-total-psdp-fe" class="form-control form-control-sm pci-readonly text-right font-weight-bold" readonly placeholder="—" tabindex="-1" /></td>
                                <td><input type="text" id="pci-pc-iv-fp-total-rel-cost" class="form-control form-control-sm pci-readonly text-right font-weight-bold" readonly placeholder="—" tabindex="-1" /></td>
                                <td><input type="text" id="pci-pc-iv-fp-total-rel-fe" class="form-control form-control-sm pci-readonly text-right font-weight-bold" readonly placeholder="—" tabindex="-1" /></td>
                                <td><input type="text" id="pci-pc-iv-fp-total-act-cost" class="form-control form-control-sm pci-readonly text-right font-weight-bold" readonly placeholder="—" tabindex="-1" /></td>
                                <td><input type="text" id="pci-pc-iv-fp-total-act-fe" class="form-control form-control-sm pci-readonly text-right font-weight-bold" readonly placeholder="—" tabindex="-1" /></td>
                                @if($pciIvEdit)<td></td>@endif
                            </tr>
                        </tfoot>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>